*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Georgia,'Times New Roman',serif;line-height:1.8;color:#222;background:#f4f1eb}
.Module_link__CGtoP{max-width:1100px;margin:0 auto;padding:0 24px}
.Nav_link__FvtCM{background:linear-gradient(135deg,#2c3e50,#34495e);color:#fff;padding:48px 0;text-align:center;margin-bottom:48px}
.Nav_link__FvtCM h1{font-size:36px;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.Nav_link__FvtCM p{font-size:16px;opacity:.8;font-style:italic}
.Nav_link__FvtCM .Page_root__agxC3{color:#fff;text-decoration:none;font-size:20px;letter-spacing:1px;text-transform:uppercase}
.Footer_root__yKEGF{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.Section_root__c824r{background:#fff;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:28px;transition:box-shadow .2s}
.Section_root__c824r:hover{box-shadow:0 4px 20px rgba(0,0,0,.14)}
.Section_root__c824r h2{font-size:22px;margin-bottom:10px;line-height:1.3}
.Section_root__c824r h2 a{color:#2c3e50;text-decoration:none}
.Section_root__c824r .Main_inner__dPyIr{font-size:12px;color:#888;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}
.Section_root__c824r p{font-size:15px;color:#555;margin-bottom:14px}
.Container_block__YP3FH{color:#e74c3c;text-decoration:none;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.Content_foot__UrD2t{max-width:780px;margin:0 auto;padding:0 24px 60px}
.Content_foot__UrD2t h1{font-size:36px;margin-bottom:10px;line-height:1.2}
.Content_foot__UrD2t .Main_inner__dPyIr{font-size:13px;color:#888;display:block;margin-bottom:28px;text-transform:uppercase;letter-spacing:1px}
.Content_foot__UrD2t h2{font-size:24px;margin:36px 0 14px}
.Content_foot__UrD2t h3{font-size:19px;margin:28px 0 10px}
.Content_foot__UrD2t p{margin-bottom:18px;font-size:17px}
.Content_foot__UrD2t ul,.Content_foot__UrD2t ol{margin:0 0 18px 28px}
.Content_foot__UrD2t a{color:#e74c3c}
.Content_foot__UrD2t img{max-width:100%;height:auto;border-radius:4px;margin:20px 0}
.Card_foot__KDKP6{border-top:2px solid #ddd;padding:28px 0;margin-top:48px;text-align:center;font-size:13px;color:#888}
.Card_foot__KDKP6 a{color:#888}
.Module_foot__ncKLU{border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:14px 0;margin-bottom:28px;font-size:14px;color:#888;font-style:italic;text-align:center}
.Grid_row__aMWCe{background:#f9f3e3;padding:16px 20px;margin-top:28px;font-size:13px;color:#7a6230;border-radius:4px}
.Footer_wrap__KX6eD{font-size:11px;color:#888;margin:-22px 0 28px;text-transform:uppercase;letter-spacing:1.5px}
.Header_wrapper__ZIP0y{margin:0 0 28px}
.Nav_content__Na6N3{width:100%;height:auto;border-radius:4px}
.Hero_inner__Ot1N3{border-top:2px solid #ddd;margin-top:40px;padding-top:24px}
.Hero_inner__Ot1N3 h4{font-size:16px;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;color:#888}
.mag-related-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mag-related-item a{color:#2c3e50;text-decoration:none;font-size:15px}
.mag-related-item a:hover{color:#e74c3c}
.Nav_wrapper__xkY24{background:#fff;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:22px 28px;margin-top:28px}
.Nav_wrapper__xkY24 p{font-size:15px;padding:4px 0;margin:0}
.Nav_wrapper__xkY24 .Main_inner__dPyIr{margin:0 8px 0 0;display:inline}
.Nav_wrapper__xkY24 a{color:#2c3e50;text-decoration:none}
.Nav_wrapper__xkY24 a:hover{color:#e74c3c}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Playfair+Display:wght@400;700&display=swap');
body{font-family:'Montserrat',sans-serif;color:#1A1A1A;background:#FFF9F9}
.Nav_link__FvtCM{background:#2D1B22;color:#fff}
.Nav_link__FvtCM h1{font-family:'Playfair Display',serif;color:#fff}
.Nav_link__FvtCM p{color:rgba(255,255,255,.75)}
.Nav_link__FvtCM a{color:#fff;text-decoration:none}
.card h2{font-family:'Playfair Display',serif}
.card h2 a{color:#2D1B22}
.card h2 a:hover{color:#E94E77}
.read-more{color:#E94E77}
.article-content h1{font-family:'Playfair Display',serif}
.article-content h2{font-family:'Playfair Display',serif}
.article-content a{color:#E94E77}
.article-content img{border-radius:8px}
.affiliate-disclosure{border-radius:8px}
.ymyl-disclaimer{border-radius:8px}
/* === Custom === */
/* mk-pro-es — Maquilla Libre
   NOTE: the top-of-file @import is dead in this pipeline (custom.css is concatenated
   after the template + theme rules, so Chromium drops it per spec). Fonts are declared
   as @font-face in the QA round-1 section below. Legacy .mag-* / .card / .bld-* /
   .article-content rules were removed: this build ships seeded class names
   (.Section_root__c824r, .Nav_link__FvtCM, …) so none of them ever matched. */

/* — tokens — */
:root {
  --bg:           #FAF4EF;
  --bg-alt:       #F2E9E2;
  --bg-card:      #FFFFFF;
  --primary:      #C05848;
  --primary-dark: #9A3E30;
  --secondary:    #D4945A;
  --accent:       #7A3D52;
  --text-dark:    #281C14;
  --text-mid:     #5E3D2C;
  --text-light:   #9A7A68;
  --border:       #E8D8CC;
  --link:         #C05848;
  --link-hover:   #9A3E30;
  --size-base: 17px;
  --size-sm:   14px;
  --lh-body:    1.72;
  --lh-heading: 1.2;
  --max-prose: 68ch;
}

/* — base — */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-size: var(--size-base);
  line-height: var(--lh-body);
  color: var(--text-dark);
  background-color: var(--bg);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
h1, h2, h3, h4, h5, h6 { line-height: var(--lh-heading); color: var(--text-dark); }
p, ul, ol { max-width: var(--max-prose); }
li { margin-bottom: 0.35em; }
img { max-width: 100%; height: auto; display: block; }
hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; }

/* === QA round-1 fixes (2026-07-21T22:21:55+0800) === */
/* Editorial signature pass — "Maquilla Libre" / Ximena Carrasco, Querétaro.
   NOTE: the deployed theme layer belongs to another site (plum #4A152C + Playfair)
   and both @import font loads are dead (they land after rules in site.css), so
   fonts are declared as @font-face here and the identity is re-asserted below.
   Selectors are element/structural only — class names are seeded per deploy. */

/* — type: one display voice, one text voice, one meta voice — */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(https://fonts.gstatic.com/s/instrumentserif/v5/jizBRFtNs2ka5fXjeivQ4LroWlx-6zUTjnTLgNs.woff2) format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url(https://fonts.gstatic.com/s/instrumentserif/v5/jizHRFtNs2ka5fXjeivQ4LroWlx-6zAjjH7Motmp5g.woff2) format('woff2');
}
@font-face {
  font-family: 'Petrona';
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(https://fonts.gstatic.com/s/petrona/v38/mtG64_NXL7bZo9XXgXJYtUkS0CQ.woff2) format('woff2');
}
@font-face {
  font-family: 'Petrona';
  font-style: italic; font-weight: 300 700; font-display: swap;
  src: url(https://fonts.gstatic.com/s/petrona/v38/mtG44_NXL7bZo9XXgXdot0MV8ia-Fg.woff2) format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxKsv4Rn.woff2) format('woff2');
}

:root {
  --ml-display: 'Instrument Serif', Georgia, serif;
  --ml-text:    'Petrona', Georgia, serif;
  --ml-meta:    'Archivo', -apple-system, 'Segoe UI', sans-serif;
  --font-heading: 'Instrument Serif', Georgia, serif;
  --font-body:    'Petrona', Georgia, serif;

  --ml-ink:     #281C14;   /* text_dark  */
  --ml-body:    #5E3D2C;   /* text_mid   */
  --ml-muted:   #9A7A68;   /* text_light */
  --ml-rule:    #E8D8CC;   /* border     */
  --ml-cream:   #FAF4EF;
  --ml-cream-2: #F2E9E2;
  --ml-paper:   #FFFFFF;
  --ml-terra:   #C05848;   /* primary — the moment colour */
  --ml-terra-d: #9A3E30;
  --ml-kicker:  #A0663A;   /* legible small-caps shade of the copper secondary */
  --ml-panel:   #2E1D18;   /* deep cacao, for the hemeroteca panel */

  /* signature: the swatch — two lipstick swipes inside a hairline seal */
  --ml-mark: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30.4' fill='none' stroke='%23C89A7E' stroke-width='1.1' opacity='.7'/%3E%3Cpath d='M15 43C23 27 39 27 49 21' fill='none' stroke='%23C05848' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M19 48C27 36 41 34 50 31' fill='none' stroke='%23D4945A' stroke-width='2.6' stroke-linecap='round' opacity='.9'/%3E%3C/svg%3E");
}

:root body {
  font-family: var(--ml-text);
  font-size: 17px;
  line-height: 1.72;
  color: var(--ml-body);
  background: var(--ml-cream);
}

/* ============================================================
   MASTHEAD  (body > nav > div > h1 + p   |  article: > div > a)
   ============================================================ */
:root body > nav:nth-of-type(1) {
  display: block;
  max-width: none;
  position: relative;
  text-align: center;
  padding: 4.4rem 1.5rem 3.4rem;
  margin: 0 0 3.4rem;
  background-color: var(--ml-panel);
  background-image:
    linear-gradient(178deg, rgba(46,29,24,.74) 0%, rgba(46,29,24,.93) 100%),
    url("/theme-assets/hero-masthead.jpg");
  background-size: cover;
  background-position: center 42%;
  border-bottom: 3px solid var(--ml-terra);
}
:root body > nav:nth-of-type(1) > div {
  display: block;
  max-width: 940px;
}
/* the swatch */
:root body > nav:nth-of-type(1) > div::before {
  content: "";
  display: block;
  width: 56px; height: 56px;
  margin: 0 auto 1.05rem;
  background: var(--ml-mark) no-repeat center / contain;
}
:root body > nav:nth-of-type(1) > div > h1 {
  font-family: var(--ml-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.9rem, 7vw, 4.4rem);
  line-height: 1;
  letter-spacing: -.005em;
  text-transform: none;
  color: #FBF2EA;
  margin: 0;
}
:root body > nav:nth-of-type(1) > div > h1::before {
  content: "QUER" "\0000C9" "TARO, M" "\0000C9" "XICO";
  display: block;
  font-family: var(--ml-meta);
  font-style: normal;
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .34em;
  line-height: 1;
  color: #D9A07E;
  margin-bottom: 1.1rem;
}
/* the long SEO description is already in <head>; replace it with a manifesto line */
:root body > nav:nth-of-type(1) > div > p { display: none; }
:root body > nav:nth-of-type(1) > div:has(> h1)::after {
  content: "Cursos de automaquillaje pagados con mi propia tarjeta, y la cuenta de cu" "\0000E1" "ntas noches de evento tarda cada uno en pagarse.";
  display: block;
  max-width: 44ch;
  margin: 1.15rem auto 0;
  padding-top: 1.05rem;
  border-top: 1px solid rgba(250,244,239,.22);
  font-family: var(--ml-text);
  font-style: italic;
  font-weight: 300;
  font-size: .97rem;
  line-height: 1.6;
  color: rgba(250,244,239,.8);
}
/* article masthead wordmark */
:root body > nav:nth-of-type(1) > div > a {
  display: inline-block;
  padding: 0;
  font-family: var(--ml-display);
  font-style: italic;
  font-weight: 400;
  font-size: 2.05rem;
  letter-spacing: 0;
  text-transform: none;
  color: #FBF2EA;
  text-decoration: none;
  background: none;
}
:root body > nav:nth-of-type(1) > div > a:hover { color: #E9B294; background: none; }
:root body > nav:nth-of-type(1):has(> div > a) { padding: 2.5rem 1.5rem 2.2rem; margin-bottom: 2.8rem; }
:root body > nav:nth-of-type(1) > div:has(> a)::before { width: 34px; height: 34px; margin-bottom: .7rem; }

/* ============================================================
   HOME — hero → editor's picks → chronological grid → hemeroteca
   main > div:nth-of-type(1) = card grid ; :nth-of-type(2) = archive strip
   ============================================================ */
:root main > div:nth-of-type(1) {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 1.8rem;
  row-gap: 2.4rem;
  align-items: start;
}

/* — quiet supporting card (base) — */
:root main > div:nth-of-type(1) > div:nth-child(n+1) {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  transition: none;
}
:root main > div:nth-of-type(1) > div:nth-child(n+1):hover { box-shadow: none; }
:root main > div:nth-of-type(1) > div:nth-child(n+1) > p:first-of-type {
  font-family: var(--ml-meta);
  font-size: .63rem;
  font-weight: 400;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--ml-muted);
  margin: 0 0 .7rem;
}
:root main > div:nth-of-type(1) > div:nth-child(n+1) > h2 {
  font-family: var(--ml-text);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.32;
  letter-spacing: -.005em;
  margin: 0 0 .6rem;
}
:root main > div:nth-of-type(1) > div:nth-child(n+1) > h2 > a {
  color: var(--ml-ink);
  text-decoration: none;
}
:root main > div:nth-of-type(1) > div:nth-child(n+1) > h2 > a:hover { color: var(--ml-terra-d); }
:root main > div:nth-of-type(1) > div:nth-child(n+1) > p:nth-of-type(2) {
  font-family: var(--ml-text);
  font-weight: 300;
  font-size: .94rem;
  line-height: 1.62;
  color: var(--ml-body);
  margin: 0 0 .9rem;
  max-width: 46ch;
}
/* CTA — the template ships an English "Continue Reading" on a Spanish site */
:root main > div:nth-of-type(1) > div:nth-child(n+1) > a {
  display: inline-block;
  font-size: 0;
  letter-spacing: 0;
  color: var(--ml-terra-d);
  text-decoration: none;
}
:root main > div:nth-of-type(1) > div:nth-child(n+1) > a::after {
  content: "SEGUIR LEYENDO";
  font-family: var(--ml-meta);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .2em;
  border-bottom: 1px solid var(--ml-rule);
  padding-bottom: .3rem;
}
:root main > div:nth-of-type(1) > div:nth-child(n+1) > a:hover::after {
  color: var(--ml-terra);
  border-bottom-color: var(--ml-terra);
}

/* — 1. THE HERO MOMENT — */
:root main > div:nth-of-type(1) > div:first-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(165px, 1fr) 2.7fr;
  column-gap: 3.2rem;
  row-gap: .5rem;
  align-content: start;
  background: var(--ml-paper);
  border: 1px solid var(--ml-rule);
  border-top: 3px solid var(--ml-terra);
  padding: 2.9rem 3.1rem 3rem;
  margin-bottom: .8rem;
}
/* left rail, row 1 — badge */
:root main > div:nth-of-type(1) > div:first-child::before {
  content: "LA NOTA DE ESTA SEMANA";
  grid-column: 1; grid-row: 1;
  align-self: start;
  font-family: var(--ml-meta);
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .21em;
  line-height: 1.5;
  color: var(--ml-terra-d);
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--ml-rule);
}
/* left rail, row 2 — date */
:root main > div:nth-of-type(1) > div:first-child > p:first-of-type {
  grid-column: 1; grid-row: 2;
  align-self: start;
  margin: .15rem 0 0;
  font-size: .66rem;
  letter-spacing: .19em;
  color: var(--ml-muted);
}
/* left rail, row 3 — byline (keeps the wide row from going one-sided) */
:root main > div:nth-of-type(1) > div:first-child::after {
  content: "POR XIMENA CARRASCO";
  grid-column: 1; grid-row: 3;
  align-self: start;
  margin-top: .35rem;
  padding-top: .8rem;
  border-top: 1px solid var(--ml-rule);
  font-family: var(--ml-meta);
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .16em;
  line-height: 1.6;
  color: var(--ml-ink);
}
/* the loud voice */
:root main > div:nth-of-type(1) > div:first-child > h2 {
  grid-column: 2; grid-row: 1 / 3;
  align-self: start;
  font-family: var(--ml-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.3vw, 3.05rem);
  line-height: 1.05;
  letter-spacing: -.012em;
  margin: -.4rem 0 0;
}
:root main > div:nth-of-type(1) > div:first-child > h2 > a {
  color: var(--ml-ink);
  text-decoration: none;
}
:root main > div:nth-of-type(1) > div:first-child > h2 > a:hover { color: var(--ml-terra-d); }
:root main > div:nth-of-type(1) > div:first-child > p:nth-of-type(2) {
  grid-column: 2; grid-row: 3;
  align-self: start;
  font-size: 1.06rem;
  font-weight: 300;
  line-height: 1.68;
  color: var(--ml-body);
  max-width: 54ch;
  margin: .5rem 0 0;
}
/* lede rule instead of a drop cap — the deck is only two lines, an initial orphans it */
:root main > div:nth-of-type(1) > div:first-child > p:nth-of-type(2) {
  border-left: 2px solid var(--ml-terra);
  padding-left: 1.15rem;
}
:root main > div:nth-of-type(1) > div:first-child > a {
  grid-column: 2; grid-row: 4;
  justify-self: start;
  align-self: start;
  margin-top: 1.5rem;
  padding: .78rem 1.9rem;
  border: 1px solid var(--ml-terra);
  border-radius: 999px;
}
:root main > div:nth-of-type(1) > div:first-child > a::after {
  content: "LEER LA NOTA COMPLETA";
  font-size: .66rem;
  letter-spacing: .2em;
  border-bottom: none;
  padding-bottom: 0;
  color: var(--ml-terra-d);
}
:root main > div:nth-of-type(1) > div:first-child > a:hover {
  background: var(--ml-terra);
  border-color: var(--ml-terra);
}
:root main > div:nth-of-type(1) > div:first-child > a:hover::after {
  color: #FFF6F0;
  border-bottom: none;
}

/* — 2. THE SECOND MOMENT: editor's picks band (cards 2–4) — */
:root main > div:nth-of-type(1) > div:nth-child(n+2):nth-child(-n+4) {
  grid-column: span 2;
  position: relative;
  margin-top: 3.4rem;
  padding: 1.5rem 1.6rem 1.7rem;
  background: var(--ml-cream-2);
  border: 1px solid var(--ml-rule);
  border-top: 2px solid var(--ml-kicker);
}
:root main > div:nth-of-type(1) > div:nth-child(2)::before {
  content: "LO QUE LEER PRIMERO" "\0000A0\002014\0000A0" "SELECCI" "\0000D3" "N DE XIMENA";
  position: absolute;
  left: 0;
  bottom: calc(100% + 1.05rem);
  white-space: nowrap;
  font-family: var(--ml-meta);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .21em;
  line-height: 1.3;
  color: var(--ml-kicker);
}
:root main > div:nth-of-type(1) > div:nth-child(n+2):nth-child(-n+4) > h2 { font-size: 1.14rem; }
:root main > div:nth-of-type(1) > div:nth-child(n+2):nth-child(-n+4) > p:nth-of-type(2) {
  font-size: .89rem;
}

/* — 3. the chronological grid (cards 5+), hairline rows — */
:root main > div:nth-of-type(1) > div:nth-child(n+5) {
  grid-column: span 3;
  border-top: 1px solid var(--ml-rule);
  padding-top: 1.4rem;
}
:root main > div:nth-of-type(1) > div:nth-child(5),
:root main > div:nth-of-type(1) > div:nth-child(6) { margin-top: 3.2rem; }
:root main > div:nth-of-type(1) > div:nth-child(5) { position: relative; }
:root main > div:nth-of-type(1) > div:nth-child(5)::before {
  content: "EL ARCHIVO, POR FECHA";
  position: absolute;
  left: 0;
  bottom: calc(100% + 1.1rem);
  white-space: nowrap;
  font-family: var(--ml-meta);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .21em;
  line-height: 1.3;
  color: var(--ml-muted);
}

/* — 4. hemeroteca: the bare link list becomes a deliberate closing panel — */
:root main > div:nth-of-type(2) {
  margin: 4.4rem 0 0;
  padding: 2.4rem 2.4rem 2rem;
  background: var(--ml-panel);
  border: none;
  border-radius: 0;
  box-shadow: none;
}
:root main > div:nth-of-type(2)::before {
  content: "HEMEROTECA" "\0000A0\002014\0000A0" "NOTAS ANTERIORES";
  display: block;
  font-family: var(--ml-meta);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .22em;
  line-height: 1;
  color: #D9A07E;
  padding-bottom: 1.1rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid rgba(250,244,239,.2);
}
:root main > div:nth-of-type(2) > p {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
  margin: 0;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(250,244,239,.12);
  font-size: 1rem;
  max-width: none;
}
:root main > div:nth-of-type(2) > p:last-child { border-bottom: none; }
:root main > div:nth-of-type(2) > p > span {
  display: block;
  margin: 0;
  font-family: var(--ml-meta);
  font-size: .63rem;
  font-weight: 400;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(250,244,239,.5);
}
:root main > div:nth-of-type(2) > p > a {
  font-family: var(--ml-text);
  font-size: 1.04rem;
  font-weight: 400;
  line-height: 1.4;
  color: #F6EBE2;
  text-decoration: none;
}
:root main > div:nth-of-type(2) > p > a:hover { color: #E9A184; }

/* ============================================================
   ARTICLE  (main > h1 + time + article + aside)
   ============================================================ */
:root main:nth-of-type(1):has(> time) > h1 {
  font-family: var(--ml-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 5.4vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -.014em;
  color: var(--ml-ink);
  margin: 0 0 1rem;
}
:root main:nth-of-type(1):has(> time) > h1::before {
  content: "AUTOMAQUILLAJE" "\0000A0\002014\0000A0" "QUER" "\0000C9" "TARO";
  display: block;
  font-family: var(--ml-meta);
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .26em;
  line-height: 1;
  color: var(--ml-kicker);
  margin-bottom: 1.1rem;
}
:root main:nth-of-type(1):has(> time) > time {
  display: block;
  margin: 0 0 2.4rem;
  padding: .8rem 0;
  border-top: 1px solid var(--ml-rule);
  border-bottom: 1px solid var(--ml-rule);
  font-family: var(--ml-meta);
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--ml-muted);
}
:root main:nth-of-type(1):has(> time) > time::after {
  content: "\0000A0\0000B7\0000A0" "POR XIMENA CARRASCO";
  font-weight: 600;
  color: var(--ml-terra-d);
}
:root main:nth-of-type(1) > article > p {
  font-family: var(--ml-text);
  font-weight: 300;
  font-size: 1.09rem;
  line-height: 1.78;
  color: var(--ml-body);
  margin: 0 0 1.5rem;
}
/* opening paragraph only — `figure + p` alone also caught the closing CTA block */
:root main:nth-of-type(1) > article > figure:first-child + p::first-letter {
  float: left;
  font-family: var(--ml-display);
  font-size: 4rem;
  line-height: .8;
  padding: .3rem .48rem 0 0;
  color: var(--ml-terra);
}
/* the affiliate disclosure reads as an editorial note, not a stray paragraph */
:root main:nth-of-type(1):has(> time) > article > p:nth-of-type(2) {
  font-size: .92rem;
  font-style: italic;
  line-height: 1.62;
  color: var(--ml-muted);
  background: var(--ml-cream-2);
  border-left: 3px solid var(--ml-kicker);
  padding: .85rem 1.1rem;
  margin: 0 0 2rem;
  max-width: none;
}
:root main:nth-of-type(1) > article > h2 {
  font-family: var(--ml-display);
  font-weight: 400;
  font-size: 1.95rem;
  line-height: 1.16;
  letter-spacing: -.008em;
  color: var(--ml-ink);
  margin: 3rem 0 1rem;
}
/* dinkus between sections — drawn, so it never depends on a dingbat glyph */
:root main:nth-of-type(1) > article > h2::before {
  content: "";
  display: block;
  width: 46px;
  height: 5px;
  margin: 0 auto 2rem;
  background: radial-gradient(circle, var(--ml-terra) 2.4px, transparent 2.9px) 0 50% / 16px 5px repeat-x;
  opacity: .85;
}
:root main:nth-of-type(1) > article > figure {
  margin: 2.2rem 0 2.4rem;
}
:root main:nth-of-type(1) > article > figure > img {
  border-radius: 2px;
  margin: 0;
}
:root main:nth-of-type(1) > article > blockquote {
  position: relative;
  margin: 2.2rem 0;
  padding: .4rem 0 .4rem 3.4rem;
  background: none;
  border: none;
  border-left: 2px solid var(--ml-rule);
  font-family: var(--ml-text);
  font-style: italic;
  font-weight: 300;
  font-size: 1.22rem;
  line-height: 1.6;
  color: var(--ml-ink);
}
:root main:nth-of-type(1) > article > blockquote::before {
  content: "\00201C";
  position: absolute;
  left: .9rem;
  top: -.6rem;
  font-family: var(--ml-display);
  font-size: 3.6rem;
  line-height: 1;
  color: var(--ml-terra);
  opacity: .55;
}

/* — monetization: affiliate links get a real chip, not inline body text — */
:root main:nth-of-type(1):has(> time) > article a[href^="/r/"] {
  display: inline;
  padding: .1em .42em;
  background: #F8E3D8;
  border-bottom: 2px solid var(--ml-terra);
  border-radius: 2px 2px 0 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  font-family: var(--ml-text);
  font-weight: 600;
  color: var(--ml-terra-d);
  text-decoration: none;
}
:root main:nth-of-type(1):has(> time) > article a[href^="/r/"]:hover {
  background: var(--ml-terra);
  color: #FFF6F0;
}
/* the closing recommendation becomes a bordered CTA block */
:root main:nth-of-type(1):has(> time) > article > p:last-of-type:has(> a[href^="/r/"]) {
  margin: 2.8rem 0 0;
  padding: 1.9rem 2rem 1.8rem;
  background: #FBF0E9;
  border: 1px solid #E8CDBD;
  border-left: 4px solid var(--ml-terra);
  border-radius: 2px;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ml-ink);
  max-width: none;
}
:root main:nth-of-type(1):has(> time) > article > p:last-of-type:has(> a[href^="/r/"])::before {
  content: "LO QUE YO HAR" "\0000CD" "A";
  display: block;
  margin-bottom: .65rem;
  font-family: var(--ml-meta);
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .22em;
  line-height: 1;
  color: var(--ml-terra-d);
}

/* — related — */
:root main:nth-of-type(1) > aside {
  margin-top: 4rem;
  padding-top: 1.8rem;
  border-top: 2px solid var(--ml-terra);
}
:root main:nth-of-type(1) > aside > h4 {
  margin: 0 0 1.2rem;
  font-family: var(--ml-meta);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ml-kicker);
}
:root main:nth-of-type(1) > aside > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2.2rem;
  counter-reset: mlrel;
}
:root main:nth-of-type(1) > aside > div > div {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  align-items: baseline;
  padding: .8rem 0;
  border-bottom: 1px solid var(--ml-rule);
  font-weight: 400;
}
:root main:nth-of-type(1) > aside > div > div::before {
  counter-increment: mlrel;
  content: counter(mlrel, decimal-leading-zero);
  font-family: var(--ml-meta);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--ml-terra);
}
:root main:nth-of-type(1) > aside > div > div > a {
  font-family: var(--ml-text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.42;
  color: var(--ml-ink);
  text-decoration: none;
}
:root main:nth-of-type(1) > aside > div > div > a:hover { color: var(--ml-terra-d); }

/* — footer — */
:root body > footer:nth-of-type(1) {
  margin-top: 4.5rem;
  padding: 2rem 1.5rem 2.4rem;
  border-top: 1px solid var(--ml-rule);
  background: none;
  text-align: center;
  font-family: var(--ml-meta);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--ml-muted);
}
:root body > footer:nth-of-type(1) > p > a {
  color: var(--ml-body);
  text-decoration: none;
  border-bottom: 1px solid var(--ml-rule);
}
:root body > footer:nth-of-type(1) > p > a:hover { color: var(--ml-terra-d); }

/* ============================================================
   RESPONSIVE — every spanning band must be reset, `span N` makes
   implicit tracks and would survive the single-column switch
   ============================================================ */
@media (max-width: 900px) {
  :root main > div:nth-of-type(1) { grid-template-columns: 1fr; row-gap: 2rem; }
  :root main > div:nth-of-type(1) > div:first-child,
  :root main > div:nth-of-type(1) > div:nth-child(n+2):nth-child(-n+4),
  :root main > div:nth-of-type(1) > div:nth-child(n+5) { grid-column: 1 / -1; }

  :root main > div:nth-of-type(1) > div:first-child {
    display: block;
    padding: 2rem 1.6rem 2.2rem;
  }
  :root main > div:nth-of-type(1) > div:first-child::before,
  :root main > div:nth-of-type(1) > div:first-child::after,
  :root main > div:nth-of-type(1) > div:first-child > p:first-of-type,
  :root main > div:nth-of-type(1) > div:first-child > h2,
  :root main > div:nth-of-type(1) > div:first-child > p:nth-of-type(2),
  :root main > div:nth-of-type(1) > div:first-child > a {
    grid-column: auto; grid-row: auto;
  }
  :root main > div:nth-of-type(1) > div:first-child::before {
    display: block;
    margin-bottom: .8rem;
    border-bottom: none;
    padding-bottom: 0;
  }
  :root main > div:nth-of-type(1) > div:first-child::after {
    display: block;
    margin-top: 1.2rem;
    padding-top: .8rem;
  }
  :root main > div:nth-of-type(1) > div:first-child > h2 { margin: 0 0 .5rem; }
  :root main > div:nth-of-type(1) > div:first-child > p:nth-of-type(2) { margin: 0; }
  :root main > div:nth-of-type(1) > div:first-child > a { margin-top: 1.2rem; }

  :root main > div:nth-of-type(1) > div:nth-child(2)::before,
  :root main > div:nth-of-type(1) > div:nth-child(5)::before {
    position: static;
    display: block;
    white-space: normal;
    margin-bottom: .9rem;
  }
  :root main > div:nth-of-type(1) > div:nth-child(n+2):nth-child(-n+4) { margin-top: 1.6rem; }
  :root main > div:nth-of-type(1) > div:nth-child(2) { margin-top: 3rem; }
  :root main > div:nth-of-type(1) > div:nth-child(5) { margin-top: 3rem; }
  :root main > div:nth-of-type(1) > div:nth-child(6) { margin-top: 0; }

  :root main > div:nth-of-type(2) { padding: 1.8rem 1.4rem 1.4rem; }
  :root main > div:nth-of-type(2) > p { grid-template-columns: 1fr; gap: .2rem; }

  :root main:nth-of-type(1) > aside > div { grid-template-columns: 1fr; gap: 0; }
  :root body > nav:nth-of-type(1) { padding: 3.2rem 1.25rem 2.6rem; margin-bottom: 2.4rem; }
}
@media (max-width: 560px) {
  :root main > div:nth-of-type(1) > div:first-child { padding: 1.7rem 1.2rem 1.9rem; }
  :root main > div:nth-of-type(1) > div:nth-child(n+2):nth-child(-n+4) { padding: 1.2rem 1.2rem 1.4rem; }
  :root main:nth-of-type(1) > article > h2 { font-size: 1.6rem; }
  :root main:nth-of-type(1):has(> time) > article > p:last-of-type:has(> a[href^="/r/"]) {
    padding: 1.4rem 1.2rem 1.3rem;
  }
  :root body > nav:nth-of-type(1) > div::before { width: 46px; height: 46px; }
}