*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,system-ui,sans-serif;line-height:1.7;color:#333;background:#fff}
.Header_wrapper__XydSn{max-width:780px;margin:0 auto;padding:0 20px}
header{background:#1a1a2e;color:#fff;padding:32px 0;margin-bottom:40px}
header h1{font-size:28px;margin-bottom:4px}
header p{opacity:.7;font-size:15px}
header .Main_wrap__gRwMW{color:#fff;text-decoration:none;font-size:18px;font-weight:600}
.Container_title__2kfzu{border-bottom:1px solid #eee;padding:24px 0}
.Container_title__2kfzu h2{font-size:20px;margin-bottom:8px}
.Container_title__2kfzu h2 a{color:#1a1a2e;text-decoration:none}
.Container_title__2kfzu h2 a:hover{color:#e94560}
.Container_title__2kfzu .date{font-size:13px;color:#999;margin-bottom:8px}
.Main_link__TgcKY{color:#e94560;text-decoration:none;font-size:14px;font-weight:600}
.Footer_text__OZkw9{padding-bottom:60px}
.Footer_text__OZkw9 h1{font-size:32px;margin-bottom:8px}
.Footer_text__OZkw9 time{font-size:13px;color:#999;display:block;margin-bottom:24px}
.Footer_text__OZkw9 h2{font-size:22px;margin:32px 0 12px}
.Footer_text__OZkw9 h3{font-size:18px;margin:24px 0 8px}
.Footer_text__OZkw9 p{margin-bottom:16px}
.Footer_text__OZkw9 ul,.Footer_text__OZkw9 ol{margin:0 0 16px 24px}
.Footer_text__OZkw9 a{color:#e94560}
.Footer_text__OZkw9 img{max-width:100%;height:auto;border-radius:8px;margin:16px 0}
footer{border-top:1px solid #eee;padding:24px 0;margin-top:40px;text-align:center;font-size:13px;color:#999}
footer a{color:#999}
.Container_foot__8FK5Y{background:#f5f5f5;border-left:3px solid #999;padding:10px 14px;margin-bottom:20px;font-size:13px;color:#777;font-style:italic}
.Wrapper_foot__Dw5O1{background:#fef9e7;border:1px solid #f0c36d;padding:10px 14px;margin-top:20px;font-size:12px;color:#8a6d3b}
.Section_head__xv0jX{font-size:13px;color:#999;margin:-16px 0 24px;font-style:italic}
.Nav_block__5pLGH{text-align:center;margin:0 0 20px}
.Section_section__98ZO2{max-width:100%;height:auto;border-radius:6px}
.Card_box__kzCFs{margin-top:40px;padding-top:24px;border-top:1px solid #eee}
.Card_box__kzCFs h3{font-size:18px;margin-bottom:12px}
.Card_box__kzCFs ul{list-style:none;padding:0}
.Card_box__kzCFs li{padding:4px 0}
.Card_box__kzCFs a{color:#e94560;text-decoration:none}
.Page_box__9qL0A{padding:20px 0}
.Page_box__9qL0A ul{list-style:none;padding:0}
.Page_box__9qL0A li{padding:5px 0;font-size:15px}
.Page_box__9qL0A a{color:#1a1a2e;text-decoration:none}
.Page_box__9qL0A a:hover{color:#e94560}
/* === Theme === */
:root{--primary:#2B4C7E;--accent:#C8A84B;--bg:#F2F0EB;--fg:#1E1E1E;--border:#C5BFB0;--r:2px;--fb:'Libre Baskerville';--fh:'IBM Plex Sans Condensed'}
/* === Custom === */
/* v.426f91 — layout revision */
/*
 * ax-ansiedad-es — "Cuaderno de Calma"
 * De informe corporativo a cuaderno editorial. Voz display serif itálica (Fraunces),
 * cuerpo Libre Baskerville, meta en Plex Condensed. Cabecera con foto (backdrop.jpg) +
 * monograma de cuaderno abierto. Un solo héroe, banda "Selección de Irene", dos franjas
 * de foto (story-photo.jpg) como cambios de marcha, e índice de archivo a todo lo ancho.
 * Color momento: ciruela #7C4A5C, usado EXACTAMENTE 2 veces (capitular portada + capitular
 * de artículo). Persona: Irene, maestra de primaria en Zaragoza.
 *
 * Build real = Next-style, clases de módulo NO ofuscadas. Se usan selectores estructurales
 * (element + :nth-child/:has) con un peso de clase (:first-of-type / :nth-child) para ganar
 * a las reglas base .Container_title / .Page_box / .Footer_text (0,1,x).
 * NOTA: el @import de fuentes muere en la concatenación → se declaran @font-face.
 */

/* === Webfonts (position-independent; @import is dropped after rules) === */
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(https://fonts.gstatic.com/s/fraunces/v38/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeP2Xz5c.woff2) format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:400 700; font-display:swap;
  src:url(https://fonts.gstatic.com/s/fraunces/v38/6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjeveQ7ZXk8g.woff2) format('woff2'); }
@font-face { font-family:'Libre Baskerville'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(https://fonts.gstatic.com/s/librebaskerville/v24/kmKnZrc3Hgbbcjq75U4uslyuy4kn0qNZaxMaC82U.woff2) format('woff2'); }
@font-face { font-family:'Libre Baskerville'; font-style:italic; font-weight:400; font-display:swap;
  src:url(https://fonts.gstatic.com/s/librebaskerville/v24/kmKWZrc3Hgbbcjq75U4uslyuy4kn0qNccR04_RUJeby2OU36SjNNlufweKgfqIc.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Sans Condensed'; font-style:normal; font-weight:400; font-display:swap;
  src:url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v15/Gg8lN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYapyK7Bh4sN.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Sans Condensed'; font-style:normal; font-weight:600; font-display:swap;
  src:url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v15/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY527LvspYYnFBq4.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Sans Condensed'; font-style:normal; font-weight:700; font-display:swap;
  src:url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v15/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY4S7bvspYYnFBq4.woff2) format('woff2'); }

/* === Variables === */
:root {
  --primary: #2B4C7E;
  --accent: #C8A84B;
  --moment: #7C4A5C;          /* ciruela — 2 usos: capitulares */
  --bg: #F2F0EB;
  --fg: #1E1E1E;
  --muted: #5A5A5A;
  --border: #C5BFB0;
  --hair: rgba(43,76,126,.14);
  --card: #FAF6EC;            /* superficie tarjeta, cálida */
  --panel: #F6F1E4;           /* paneles de índice / avisos */
  --fdisplay: 'Fraunces';
  --fb: 'Libre Baskerville';
  --fh: 'IBM Plex Sans Condensed';
  --max: 1120px;
}

/* === Base === */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--fb), Georgia, serif;
  background-color: var(--bg);
  color: var(--fg);
  line-height: 1.75;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--fdisplay), Georgia, serif;
  font-weight: 600;
  line-height: 1.18;
  margin: 1.5em 0 .5em;
  color: var(--primary);
  letter-spacing: 0;
}
h1 { font-size: 2.4rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.28rem; }

p { margin: 0 0 1.2em; max-width: 68ch; }

a { color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }
strong { font-weight: 700; }
em { font-style: italic; }

ul, ol { padding-left: 1.6em; margin-bottom: 1.2em; }
li { margin-bottom: .4em; }
hr { border: none; border-top: 1px solid var(--border); margin: 2.5em 0; }
::selection { background-color: var(--accent); color: #fff; }

/* ============================================================= *
 *  MASTHEAD  (shared: <header><div><h1|a>+<p?>)
 * ============================================================= */
header {
  background-image:
    linear-gradient(150deg, rgba(26,42,72,.90), rgba(26,42,72,.70)),
    url("/theme-assets/backdrop.jpg");
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
  padding: 3.5rem 1.5rem 2.9rem;
  margin: 0 0 3rem;
  border-bottom: 3px solid var(--accent);
}
header > div { max-width: 760px; margin: 0 auto; }

/* Monograma: cuaderno abierto, trazo oro */
header > div::before {
  content: "";
  display: block;
  width: 48px; height: 48px;
  margin: 0 auto 1rem;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%23C8A84B'%20stroke-width='1.6'%3E%3Cpath%20d='M24%2012C18%208%208%208%206%2010L6%2038C10%2036%2018%2036%2024%2040C30%2036%2038%2036%2042%2038L42%2010C40%208%2030%208%2024%2012Z'/%3E%3Cpath%20d='M24%2012L24%2040'/%3E%3C/svg%3E");
  opacity: .95;
}
header h1,
header > div > a {
  font-family: var(--fdisplay), Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 3rem;
  line-height: 1.04;
  color: #fff;
  display: block;
  margin: 0;
  text-decoration: none;
  letter-spacing: 0;
}
header p {
  font-family: var(--fb), Georgia, serif;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255,255,255,.86);
  max-width: 56ch;
  margin: 1rem auto 0;
}
/* Firma bajo la cabecera */
header > div::after {
  content: "UNA PREGUNTA POR HOJA · IRENE, ZARAGOZA";
  display: block;
  margin-top: 1.15rem;
  font-family: var(--fh), system-ui, sans-serif;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .26em;
  color: var(--accent);
}

/* ============================================================= *
 *  HOME  =  main:not(:has(> h1)):first-of-type   (no h1 in main)
 *  6-col grid; pseudos are grid items ordered between sections.
 * ============================================================= */
main:not(:has(> h1)):first-of-type {
  max-width: var(--max);
  margin: 0 auto;
  padding: .5rem 2rem 4rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 2.4rem;
  row-gap: 2.6rem;
  align-items: stretch;
}

/* ---- Etiqueta de banda: Selección de Irene (grid item, full row) ---- */
main:not(:has(> h1)):first-of-type::before {
  content: "SELECCIÓN DE IRENE · EMPIEZA POR AQUÍ";
  order: 1;
  grid-column: 1 / -1;
  font-family: var(--fh), system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--primary);
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--hair);
  margin: 1.2rem 0 -.6rem;
}

/* ---- Franja 1 (foto): cabecera del diario, entre picks y rejilla ---- */
main:not(:has(> h1)):first-of-type::after {
  content: "EL DIARIO — MÁS RECIENTES";
  order: 3;
  grid-column: 1 / -1;
  min-height: 200px;
  margin: 1.2rem 0 .4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background-image:
    linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.28)),
    url("/theme-assets/story-photo.jpg");
  background-size: cover;
  background-position: center 30%;
  color: #fff;
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .32em;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}

/* ---- HÉROE (article 1): full width, voz alta ---- */
main:not(:has(> h1)):first-of-type > article:first-child {
  order: 0;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0,1.6fr) minmax(0,1fr);
  column-gap: 3rem;
  row-gap: .15rem;
  align-items: start;
  background: none;
  border: none;
  border-bottom: 2px solid var(--primary);
  border-radius: 0;
  padding: .4rem 0 2.4rem;
  margin: 0;
}
main:not(:has(> h1)):first-of-type > article:first-child > * { grid-column: 1; }

main:not(:has(> h1)):first-of-type > article:first-child::before {
  content: "ÚLTIMO EN EL CUADERNO";
  grid-column: 1 / -1;
  font-family: var(--fh), system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--primary);
  width: max-content;
  padding-bottom: .25rem;
  border-bottom: 2px solid var(--accent);
  margin-bottom: 1rem;
}
main:not(:has(> h1)):first-of-type > article:first-child h2 {
  font-family: var(--fdisplay), Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 1.12;
  margin: 0 0 .7rem;
}
main:not(:has(> h1)):first-of-type > article:first-child h2 a { color: var(--primary); text-decoration: none; }
main:not(:has(> h1)):first-of-type > article:first-child h2 a:hover { color: var(--accent); }

/* fecha → línea de autoría */
main:not(:has(> h1)):first-of-type > article:first-child > p:first-of-type {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}
main:not(:has(> h1)):first-of-type > article:first-child > p:first-of-type::before {
  content: "Por Irene Lozada · ";
  color: var(--primary);
  font-weight: 600;
}
/* entradilla con capitular (MOMENTO ciruela 1) */
main:not(:has(> h1)):first-of-type > article:first-child > p:last-of-type {
  font-family: var(--fb), Georgia, serif;
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--fg);
  max-width: 40ch;
  margin: 0;
}
main:not(:has(> h1)):first-of-type > article:first-child > p:last-of-type::first-letter {
  font-family: var(--fdisplay), Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 3.6rem;
  line-height: .8;
  float: left;
  margin: .05em .12em 0 0;
  color: var(--moment);
}
/* CTA del héroe: píldora contorneada */
main:not(:has(> h1)):first-of-type > article:first-child > a {
  display: inline-block;
  justify-self: start;
  margin-top: 1.3rem;
  font-family: var(--fh), system-ui, sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
  border: 1.5px solid var(--primary);
  border-radius: 4px;
  padding: .65em 1.5em;
}
main:not(:has(> h1)):first-of-type > article:first-child > a:hover { background: var(--primary); color: #fff; }

/* cita-manifiesto que llena la columna derecha (RULE 4: balance) */
main:not(:has(> h1)):first-of-type > article:first-child::after {
  content: "\201CLos nervios no se aguantan: se estudian.\201D";
  grid-column: 2;
  grid-row: 2 / 6;
  align-self: center;
  font-family: var(--fdisplay), Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.55rem;
  line-height: 1.4;
  color: var(--primary);
  border-left: 2px solid var(--accent);
  padding-left: 1.5rem;
  margin: .4rem 0;
}

/* ---- EDITOR'S PICKS (articles 2-4): 3 across (span 2 of 6) ---- */
main:not(:has(> h1)):first-of-type > article:nth-child(n+2):nth-child(-n+4) {
  order: 2;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--hair);
  border-top: 3px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  padding: 26px 32px 28px;
  margin: 0;
}
/* ---- JOURNAL (articles 5+): 2 across (span 3 of 6) ---- */
main:not(:has(> h1)):first-of-type > article:nth-child(n+5) {
  order: 4;
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  padding: 28px 34px 30px;
  margin: 0;
}

/* Tarjetas normales (picks + journal): tipografía compartida */
main:not(:has(> h1)):first-of-type > article:nth-child(n+2) > p:first-of-type {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .55rem;
}
main:not(:has(> h1)):first-of-type > article:nth-child(n+2) h2 {
  font-family: var(--fdisplay), Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.32rem;
  line-height: 1.24;
  margin: 0 0 .55rem;
}
main:not(:has(> h1)):first-of-type > article:nth-child(n+2) h2 a { color: var(--primary); text-decoration: none; }
main:not(:has(> h1)):first-of-type > article:nth-child(n+2) h2 a:hover { color: var(--accent); }
main:not(:has(> h1)):first-of-type > article:nth-child(n+2) > p:last-of-type {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 1.1rem;
  max-width: 60ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
main:not(:has(> h1)):first-of-type > article:nth-child(n+2) > a {
  margin-top: auto;
  font-family: var(--fh), system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
main:not(:has(> h1)):first-of-type > article:nth-child(n+2) > a:hover { color: var(--primary); }

/* ---- ÍNDICE DE ARCHIVO (section.Page_box): full width, 2 columnas ---- *
 *  Franja 2 (foto) = ::before del section = "SEGUIR LEYENDO"            */
main:not(:has(> h1)):first-of-type > section {
  order: 5;
  grid-column: 1 / -1;
  margin: 1.4rem 0 0;
  padding: 0 0 1.8rem;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 10px;
  overflow: hidden;
}
main:not(:has(> h1)):first-of-type > section::before {
  content: "SEGUIR LEYENDO";
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 210px;
  margin-bottom: 1.8rem;
  background-image:
    linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.28)),
    url("/theme-assets/story-photo.jpg");
  background-size: cover;
  background-position: center 70%;
  color: #fff;
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .32em;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
main:not(:has(> h1)):first-of-type > section ul {
  list-style: none;
  padding: 0 2.2rem;
  margin: 0;
  columns: 2;
  column-gap: 2.6rem;
}
main:not(:has(> h1)):first-of-type > section ul li {
  break-inside: avoid;
  margin: 0;
  padding: .7rem 0;
  border-bottom: 1px dotted rgba(0,0,0,.14);
}
main:not(:has(> h1)):first-of-type > section ul li a {
  font-family: var(--fb), Georgia, serif;
  font-size: .98rem;
  line-height: 1.4;
  color: var(--primary);
  text-decoration: none;
}
main:not(:has(> h1)):first-of-type > section ul li a:hover { color: var(--accent); text-decoration: underline; }

/* ============================================================= *
 *  ARTICLE  =  main:has(> h1):first-of-type
 * ============================================================= */
main:has(> h1):first-of-type {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem 2rem 4rem;
}
main:has(> h1):first-of-type > h1 {
  font-family: var(--fdisplay), Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 2.9rem;
  line-height: 1.1;
  color: var(--primary);
  margin: .3em 0 .35em;
  max-width: 20ch;
}
main:has(> h1):first-of-type > time {
  display: block;
  font-family: var(--fh), system-ui, sans-serif;
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2.2rem;
}
main:has(> h1):first-of-type > time::before { content: "Por Irene Lozada · "; color: var(--primary); }

main:has(> h1):first-of-type > article { max-width: 720px; }
main:has(> h1):first-of-type > article > div:first-child img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  margin: 0 0 2rem;
}
main:has(> h1):first-of-type > article > p {
  font-size: 1.14rem;
  line-height: 1.8;
  color: var(--fg);
  margin: 0 0 1.35em;
}
/* capitular de la entradilla (MOMENTO ciruela 2) */
main:has(> h1):first-of-type > article > p:first-of-type::first-letter {
  font-family: var(--fdisplay), Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 3.5rem;
  line-height: .78;
  float: left;
  margin: .04em .12em 0 0;
  color: var(--moment);
}
main:has(> h1):first-of-type > article > h2 {
  font-family: var(--fdisplay), Georgia, serif;
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.22;
  color: var(--primary);
  border: none;
  padding: 0;
  margin: 2.4em 0 .5em;
}
/* dinkus entre secciones */
main:has(> h1):first-of-type > article > h2::before {
  content: "✷ ✷ ✷";
  display: block;
  text-align: center;
  color: var(--accent);
  font-size: .8rem;
  letter-spacing: .5em;
  margin: 0 auto 1.1em;
}
main:has(> h1):first-of-type > article > h3 {
  font-family: var(--fdisplay), Georgia, serif;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--primary);
  margin: 2em 0 .4em;
}
main:has(> h1):first-of-type > article > blockquote {
  position: relative;
  font-family: var(--fdisplay), Georgia, serif;
  font-style: italic;
  font-size: 1.24rem;
  line-height: 1.5;
  color: var(--primary);
  background: none;
  border: none;
  border-left: 3px solid var(--accent);
  margin: 2em 0;
  padding: .2em 0 .2em 2.4rem;
}
main:has(> h1):first-of-type > article > blockquote::before {
  content: "\201C";
  position: absolute;
  left: .55rem; top: -.15em;
  font-size: 3rem;
  line-height: 1;
  color: var(--accent);
}
main:has(> h1):first-of-type > article > blockquote p { margin: 0; }

/* marcadores de estructura (strong inicial) */
main:has(> h1):first-of-type > article > p > strong:first-child { color: var(--primary); }

/* enlaces de cuerpo */
main:has(> h1):first-of-type > article p a,
main:has(> h1):first-of-type > article li a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 2px;
}

/* --- CTA de afiliado (/rec/): mención cálida en línea, no píldora rota --- *
 *  Ruta completa + [href] para batir la regla de enlace de cuerpo (RULE J) */
main:has(> h1):first-of-type > article p a[href^="/rec/"],
main:has(> h1):first-of-type > article li a[href^="/rec/"] {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
  background: rgba(200,168,75,.18);
  box-shadow: inset 0 -1px 0 var(--accent);
  border-radius: 3px;
  padding: .04em .34em;
}
main:has(> h1):first-of-type > article p a[href^="/rec/"]::after,
main:has(> h1):first-of-type > article li a[href^="/rec/"]::after {
  content: " ↗";
  font-size: .82em;
  color: var(--accent);
}
main:has(> h1):first-of-type > article p a[href^="/rec/"]:hover,
main:has(> h1):first-of-type > article li a[href^="/rec/"]:hover {
  background: var(--accent);
  color: #fff;
  box-shadow: none;
}

/* Aviso final (aside.Wrapper_foot) */
main:has(> h1):first-of-type > article > aside {
  background: var(--panel);
  border: 1px solid rgba(0,0,0,.08);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 1rem 1.3rem;
  margin-top: 2.4rem;
  font-family: var(--fb), Georgia, serif;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--muted);
}
main:has(> h1):first-of-type > article > aside b { color: var(--primary); }

/* --- Artículos relacionados (section.Card_box) --- */
main:has(> h1):first-of-type > section {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 2px solid var(--primary);
}
main:has(> h1):first-of-type > section > h3 {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 1.2rem;
}
main:has(> h1):first-of-type > section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .8rem;
}
main:has(> h1):first-of-type > section ul li {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
}
main:has(> h1):first-of-type > section ul li a {
  display: block;
  padding: 1rem 1.3rem 1rem 2.4rem;
  position: relative;
  font-family: var(--fdisplay), Georgia, serif;
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--primary);
  text-decoration: none;
}
main:has(> h1):first-of-type > section ul li a::before {
  content: "→";
  position: absolute;
  left: 1.1rem;
  color: var(--accent);
  font-style: normal;
}
main:has(> h1):first-of-type > section ul li a:hover { color: var(--accent); }

/* ============================================================= *
 *  FOOTER
 * ============================================================= */
footer {
  background: var(--primary);
  color: rgba(255,255,255,.78);
  text-align: center;
  padding: 2.2rem 1.5rem;
  margin-top: 3.5rem;
  border-top: 3px solid var(--accent);
  font-family: var(--fh), system-ui, sans-serif;
  font-size: .84rem;
  letter-spacing: .04em;
}
footer a { color: rgba(255,255,255,.9); text-decoration: none; }
footer a:hover { color: var(--accent); }

/* ============================================================= *
 *  RESPONSIVE
 * ============================================================= */
@media (max-width: 720px) {
  header h1, header > div > a { font-size: 2.3rem; }

  main:not(:has(> h1)):first-of-type {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 1.8rem;
    padding: .5rem 1.2rem 3rem;
  }
  /* reset de spans → una columna (evita tracks implícitos) */
  main:not(:has(> h1)):first-of-type > article:first-child,
  main:not(:has(> h1)):first-of-type > article:nth-child(n+2):nth-child(-n+4),
  main:not(:has(> h1)):first-of-type > article:nth-child(n+5) { grid-column: 1 / -1; }

  main:not(:has(> h1)):first-of-type > article:first-child { grid-template-columns: 1fr; }
  main:not(:has(> h1)):first-of-type > article:first-child::after {
    grid-column: 1;
    grid-row: auto;
    margin-top: 1.4rem;
  }
  main:not(:has(> h1)):first-of-type > article:first-child h2 { font-size: 2rem; }
  main:not(:has(> h1)):first-of-type > article:first-child > p:last-of-type { max-width: none; }
  main:not(:has(> h1)):first-of-type > section ul { columns: 1; }

  main:has(> h1):first-of-type > h1 { font-size: 2.2rem; }
  main:has(> h1):first-of-type > article { max-width: none; }
}