/* Be Vietnam Pro vietnamese 400 — SIL Open Font License 1.1, see /fonts/OFL-BeVietnamPro.txt */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/be-vietnam-pro-400-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Be Vietnam Pro latin-ext 400 — SIL Open Font License 1.1, see /fonts/OFL-BeVietnamPro.txt */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/be-vietnam-pro-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Be Vietnam Pro latin 400 — SIL Open Font License 1.1, see /fonts/OFL-BeVietnamPro.txt */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/be-vietnam-pro-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Be Vietnam Pro vietnamese 500 — SIL Open Font License 1.1, see /fonts/OFL-BeVietnamPro.txt */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/be-vietnam-pro-500-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Be Vietnam Pro latin-ext 500 — SIL Open Font License 1.1, see /fonts/OFL-BeVietnamPro.txt */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/be-vietnam-pro-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Be Vietnam Pro latin 500 — SIL Open Font License 1.1, see /fonts/OFL-BeVietnamPro.txt */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/be-vietnam-pro-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Be Vietnam Pro vietnamese 600 — SIL Open Font License 1.1, see /fonts/OFL-BeVietnamPro.txt */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/be-vietnam-pro-600-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Be Vietnam Pro latin-ext 600 — SIL Open Font License 1.1, see /fonts/OFL-BeVietnamPro.txt */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/be-vietnam-pro-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Be Vietnam Pro latin 600 — SIL Open Font License 1.1, see /fonts/OFL-BeVietnamPro.txt */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/be-vietnam-pro-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Be Vietnam Pro vietnamese 700 — SIL Open Font License 1.1, see /fonts/OFL-BeVietnamPro.txt */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/be-vietnam-pro-700-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Be Vietnam Pro latin-ext 700 — SIL Open Font License 1.1, see /fonts/OFL-BeVietnamPro.txt */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/be-vietnam-pro-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Be Vietnam Pro latin 700 — SIL Open Font License 1.1, see /fonts/OFL-BeVietnamPro.txt */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/be-vietnam-pro-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Owner override 2026-10-23: teal core and Be Vietnam Pro; locale grounds and language semantics retained.
   --agave is a legacy alias for the shared teal action, not the former green. */
/* Yes You Can CNA — "Editorial latinoamericano" tokens for the Spanish site.
   Light values first; dark applies with the system setting unless the page is
   explicitly light, and always with the study desk's data-theme="midnight". */
:root {
  color-scheme: light;
  --marfil: #faf5ea;          /* page background */
  --papel: #f2ead8;           /* cards, raised surfaces */
  --papel-2: #eae0c9;         /* bars, term chips */
  --tinta: #1d2a22;           /* body text */
  --tinta-2: #4b5748;         /* secondary text */
  --agave: #00756d;           /* primary action, links, progress */
  --agave-2: #005e58;         /* hover; text on agave-tenue */
  --agave-tenue: #dcf1ee;     /* soft fills */
  --on-agave: #ffffff;        /* text on agave */
  --marino: #12304a;          /* reserved: English exam language, official names */
  --puente-en: #183a57;       /* English half of the bilingual bridge */
  --on-marino: #f4f1e8;       /* text on puente-en */
  --terracota: #9e4424;       /* the single warm accent: labels, route numbers */
  --ambar-tenue: #fff0cc;     /* critical step / real warning only */
  --ambar-tinta: #7a4b00;
  --linea: #d6c9ac;
  --linea-fuerte: #857655;
  --acierto: #2a6a3c;
  --acierto-fondo: #dcebdd;
  --error: #9c3320;
  --error-fondo: #f6ddd5;
  --foco: #8a2c55;
  --glosa: #8a2c55;
  --on-glosa: #faf5ea;

  --font-titulo: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-texto: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;

  --texto: 1.125rem;          /* 18px body */
  --texto-chico: 0.9375rem;   /* 15px */
  --etiqueta: 0.875rem;       /* 14px minimum readable */
  --h1: clamp(1.75rem, 7.4vw, 4.2rem);
  --h2: clamp(1.5rem, 5.6vw, 2.5rem);
  --h3: 1.25rem;
  --cifra: clamp(2.4rem, 9vw, 4rem);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --gutter: 16px;
  --ancho: 72rem;
  --lectura: 40rem;
  --r-boton: 6px;
  --r-opcion: 12px;
  --r-tarjeta: 20px;
  --toque: 48px;
}

@media (min-width: 900px) {
  :root { --texto: 1.1875rem; --gutter: 32px; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --marfil: #131a16; --papel: #1b241e; --papel-2: #243029;
    --tinta: #f1ebdc; --tinta-2: #bcc4b4;
    --agave: #48cdbe; --agave-2: #7eddd1; --agave-tenue: #143640; --on-agave: #10201a;
    --marino: #9db8d6; --puente-en: #0e2236; --on-marino: #f4f1e8;
    --terracota: #ec9a76; --ambar-tenue: #3a2c10; --ambar-tinta: #f2c66b;
    --linea: #33413a; --linea-fuerte: #6b7b6f;
    --acierto: #8fd1a0; --acierto-fondo: #1c3524; --error: #f0a18e; --error-fondo: #41231b;
    --foco: #f0b6ce; --glosa: #e08cb0; --on-glosa: #131a16;
  }
}

:root[data-theme="midnight"], :root[data-theme="dark"] {
  color-scheme: dark;
  --marfil: #131a16; --papel: #1b241e; --papel-2: #243029;
  --tinta: #f1ebdc; --tinta-2: #bcc4b4;
  --agave: #48cdbe; --agave-2: #7eddd1; --agave-tenue: #143640; --on-agave: #10201a;
  --marino: #9db8d6; --puente-en: #0e2236; --on-marino: #f4f1e8;
  --terracota: #ec9a76; --ambar-tenue: #3a2c10; --ambar-tinta: #f2c66b;
  --linea: #33413a; --linea-fuerte: #6b7b6f;
  --acierto: #8fd1a0; --acierto-fondo: #1c3524; --error: #f0a18e; --error-fondo: #41231b;
  --foco: #f0b6ce; --glosa: #e08cb0; --on-glosa: #131a16;
}

/* Base, layout and shell components shared by every Spanish page. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--marfil);
  color: var(--tinta);
  font-family: var(--font-texto);
  font-size: var(--texto);
  line-height: 1.55;
  hyphens: manual;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; }
h1, h2, h3 {
  font-family: var(--font-titulo);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 var(--s4);
  text-wrap: balance;
  hyphens: manual;
}
h1 { font-size: var(--h1); letter-spacing: -0.01em; max-width: 18ch; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.25; }
p, ul, ol { margin: 0 0 var(--s4); }
p, li { max-width: var(--lectura); hyphenate-limit-chars: 8 4 4; }
summary, dt, button, .es-opcion, .es-temas a, .es-nav a { hyphens: manual; }
a { color: var(--agave); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--agave-2); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 2px; }
[lang="en"] { font-variant-ligatures: none; }
.term, abbr { color: var(--marino); font-weight: 600; }
.ui-term { font-family: var(--font-texto); font-weight: 600; font-size: 0.92em; background: var(--papel-2); color: var(--marino); border-radius: 4px; padding: 0 0.3em; white-space: nowrap; }
strong { font-weight: 700; }
.trap { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.es-wrap, .es-main { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }
.es-main { padding-block: var(--s6) var(--s8); }
.es-section { padding-block: var(--s7); border-top: 1px solid var(--linea); }
.es-section:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 900px) { .es-section { padding-block: var(--s8); } }

/* Small label above a heading: sentence case, never letter-spaced capitals. */
.es-etiqueta { display: block; font-size: var(--etiqueta); font-weight: 600; color: var(--terracota); margin-bottom: var(--s2); }
.es-lede { font-size: 1.15em; color: var(--tinta-2); max-width: 36rem; }
.es-nota { font-size: var(--texto-chico); color: var(--tinta-2); }

.es-skip { position: absolute; left: var(--s4); top: 0; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; background: var(--agave); color: var(--on-agave); border-radius: var(--r-boton); z-index: 20; }
.es-skip:focus { top: var(--s4); width: auto; height: auto; max-width: calc(100vw - 2 * var(--s4)); padding: var(--s3) var(--s4); overflow: visible; clip-path: none; white-space: normal; }

.es-header { border-bottom: 1px solid var(--linea); background: var(--marfil); }
.es-header__inner { max-width: var(--ancho); margin-inline: auto; padding: var(--s3) var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.es-brand { font-family: var(--font-titulo); font-weight: 800; font-size: 1.25rem; color: var(--tinta); text-decoration: none; margin-right: auto; white-space: nowrap; }
.es-brand b { color: var(--agave); }
.es-nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); order: 3; width: 100%; }
.es-nav a { color: var(--tinta); text-decoration: none; font-weight: 600; font-size: var(--texto-chico); min-height: var(--toque); display: inline-flex; align-items: center; border-bottom: 2px solid transparent; }
.es-nav a[aria-current="page"] { border-bottom-color: var(--terracota); }
.es-nav a:hover { color: var(--agave); }
.es-lang { display: inline-flex; flex-wrap: wrap; max-width: 100%; min-width: 0; gap: var(--s2); align-items: center; font-size: var(--texto-chico); color: var(--tinta-2); }
.es-lang a { min-height: var(--toque); display: inline-flex; align-items: center; color: var(--tinta-2); }
.es-lang a[aria-current="page"] { color: var(--tinta); font-weight: 700; text-decoration: none; }
@media (min-width: 900px) {
  .es-nav { order: 0; width: auto; gap: var(--s5); }
}

.es-boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--toque); padding: var(--s3) var(--s5); border-radius: var(--r-boton); border: 2px solid var(--agave); background: var(--agave); color: var(--on-agave); font: 600 1rem/1.2 var(--font-texto); text-decoration: none; cursor: pointer; text-align: center; }
.es-boton:hover { background: var(--agave-2); border-color: var(--agave-2); color: var(--on-agave); }
.es-boton--secundario { background: transparent; color: var(--agave); }
.es-boton--secundario:hover { background: var(--agave-tenue); color: var(--agave-2); }
.es-boton[disabled], .es-boton[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.es-acciones { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

input, textarea, select, button { font: inherit; color: inherit; }
label { display: block; font-weight: 600; margin: var(--s4) 0 var(--s2); }
input[type="email"], input[type="text"], input[type="date"], input[type="number"], input[type="search"], textarea, select {
  width: 100%; max-width: 32rem; min-height: var(--toque); padding: var(--s2) var(--s3);
  background: var(--marfil); border: 1px solid var(--linea-fuerte); border-radius: var(--r-boton);
}
textarea { min-height: 7rem; }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; accent-color: var(--agave); }
[role="status"]:empty { display: none; }
[role="status"] { margin-top: var(--s3); font-weight: 600; }

.es-transparency { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: var(--papel); }
.es-transparency p { margin: 0; padding-block: var(--s3); font-size: var(--texto-chico); color: var(--tinta-2); max-width: 52rem; }
.es-footer { padding-block: var(--s6) var(--s7); font-size: var(--texto-chico); color: var(--tinta-2); }
.es-footer__links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); max-width: none; }
.es-footer__links a { color: var(--tinta-2); min-height: 2.25rem; display: inline-flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Shared mark, approved 2026-10-23; locale wordmark and navigation stay intact. */
.es-brand { display:inline-flex;align-items:center;gap:8px }
.es-brand::before { content:"";width:30px;height:30px;flex:none;background:url("/brand-mark-animated.svg") center/contain no-repeat }

/* Shared components of the Spanish site. Markup contract: build-contract.md.
   Only tokens from 00-tokens.css; every state also carries an icon or a word. */

/* ---------- Question card ---------- */
.es-pregunta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); padding: var(--s5) var(--s4); margin-block: var(--s5); max-width: 46rem; box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--tinta) 45%, transparent); }
@media (min-width: 900px) { .es-pregunta { padding: var(--s6); } }
.es-pregunta__meta { font-size: var(--etiqueta); font-weight: 600; color: var(--terracota); margin-bottom: var(--s3); max-width: none; }
.es-pregunta__enunciado { font-family: var(--font-titulo); font-weight: 600; font-size: clamp(1.3rem, 5vw, 1.75rem); line-height: 1.28; letter-spacing: 0; max-width: none; margin-bottom: var(--s4); }
.es-opciones { list-style: none; padding: 0; margin: 0 0 var(--s4); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.es-opciones li { max-width: none; min-width: 0; }
.es-opcion { display: flex; align-items: flex-start; gap: 14px; width: 100%; min-width: 0; min-height: 56px; text-align: left; padding: 14px 16px; background: var(--marfil); color: var(--tinta); border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-opcion); font: 500 1.125rem/1.35 var(--font-texto); cursor: pointer; }
.es-opcion:hover:not([aria-disabled="true"]) { border-color: var(--agave); background: var(--agave-tenue); }
.es-opcion[aria-disabled="true"] { cursor: default; }
.es-opcion__letra { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid currentColor; border-radius: 50%; font: 700 0.875rem/1 var(--font-texto); }
.es-opcion__texto { flex: 1; min-width: 0; padding-top: 3px; overflow-wrap: anywhere; }
.es-opcion__marca { flex: none; margin-left: auto; display: inline-flex; padding-top: 3px; }
.es-opcion.is-correcta { background: var(--acierto-fondo); border-color: var(--acierto); }
.es-opcion.is-correcta .es-opcion__letra, .es-opcion.is-correcta .es-opcion__marca { color: var(--acierto); }
.es-opcion.is-incorrecta { background: var(--error-fondo); border-color: var(--error); }
.es-opcion.is-incorrecta .es-opcion__letra, .es-opcion.is-incorrecta .es-opcion__marca { color: var(--error); }
.es-pregunta__estado { display: flex; align-items: center; gap: var(--s2); font-weight: 700; margin: 0 0 var(--s4); max-width: none; }
.es-pregunta__estado.is-correcta { color: var(--acierto); }
.es-pregunta__estado.is-incorrecta { color: var(--error); }
.es-pregunta__estado svg { flex: none; }

/* ---------- Answer reveal, "Para recordar", source ---------- */
.answer-reveal { margin-bottom: var(--s5); border-top: 1px solid var(--linea); padding-top: var(--s2); }
.answer-reveal > summary { display: flex; align-items: center; gap: var(--s3); min-height: var(--toque); font-weight: 600; color: var(--agave); cursor: pointer; list-style: none; }
.answer-reveal > summary::-webkit-details-marker { display: none; }
.answer-reveal > summary::before { content: ""; flex: none; width: 0.6rem; height: 0.6rem; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; margin-left: 4px; }
.answer-reveal[open] > summary::before { transform: rotate(45deg); }
.es-respuesta__correcta { margin-top: var(--s3); }
.es-recordar { background: var(--agave-tenue); border-left: 4px solid var(--agave); border-radius: 0 var(--r-opcion) var(--r-opcion) 0; padding: var(--s3) var(--s4); margin-block: var(--s4); }
.es-recordar .es-etiqueta { color: var(--agave-2); margin-bottom: var(--s1); }
.es-recordar p:last-child { margin-bottom: 0; }
.es-fuente { font-size: var(--texto-chico); color: var(--tinta-2); margin-bottom: 0; }

/* ---------- Bilingual bridge ---------- */
.es-puente { border-radius: var(--r-tarjeta); overflow: hidden; border: 1px solid var(--linea); background: var(--papel); }
.es-puente__es { padding: var(--s4) var(--s4) var(--s3); }
.es-puente__en { padding: var(--s4); background: var(--puente-en); color: var(--on-marino); }
.es-puente p { max-width: none; }
.es-puente__es p { margin: var(--s2) 0 0; font-size: 1.125rem; }
.es-puente__en p[lang] { margin: var(--s2) 0 var(--s4); font: 600 1.3rem/1.3 var(--font-texto); font-style: normal; }
.es-pildora { display: inline-block; padding: 2px 10px; border-radius: 999px; font: 700 0.875rem/1.4 var(--font-texto); background: var(--agave-tenue); color: var(--agave-2); }
.es-pildora--en { background: var(--on-marino); color: var(--puente-en); }
.es-escuchar { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--toque); padding: var(--s2) var(--s4); border-radius: var(--r-boton); border: 2px solid var(--agave); background: transparent; color: var(--agave); font: 600 1rem/1.2 var(--font-texto); cursor: pointer; }
.es-escuchar::before { content: ""; flex: none; width: 1.25rem; height: 1.25rem; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4.03v8.05A4.5 4.5 0 0 0 16.5 12zM14 3.23v2.06a7 7 0 0 1 0 13.42v2.06a9 9 0 0 0 0-17.54z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4.03v8.05A4.5 4.5 0 0 0 16.5 12zM14 3.23v2.06a7 7 0 0 1 0 13.42v2.06a9 9 0 0 0 0-17.54z'/%3E%3C/svg%3E") center / contain no-repeat; }
.es-escuchar:hover:not(:disabled) { background: var(--agave-tenue); color: var(--agave-2); }
.es-escuchar.is-hablando { background: var(--agave-tenue); color: var(--agave-2); }
.es-escuchar:disabled { opacity: 0.6; cursor: not-allowed; }
.es-puente__en .es-escuchar { border-color: var(--on-marino); color: var(--on-marino); }
.es-puente__en .es-escuchar:hover:not(:disabled), .es-puente__en .es-escuchar.is-hablando { background: var(--on-marino); color: var(--puente-en); }
.es-puente__en :focus-visible { outline-color: var(--on-marino); }
.es-escuchar__nota { margin: var(--s3) 0 0; font-size: var(--texto-chico); }

/* ---------- Exam route and comparison box ---------- */
.es-ruta { list-style: none; padding: 0; margin: var(--s5) 0; counter-reset: ruta; }
.es-ruta__paso { position: relative; display: flex; gap: var(--s4); padding-bottom: var(--s5); max-width: 44rem; }
.es-ruta__paso:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 48px; bottom: 4px; width: 2px; background: var(--linea-fuerte); }
.es-ruta__num { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--terracota); border-radius: 50%; background: var(--marfil); color: var(--terracota); font: 800 1.35rem/1 var(--font-titulo); }
.es-ruta__cuerpo { flex: 1; min-width: 0; padding-top: 6px; }
.es-ruta__cuerpo p { margin-bottom: 0; }
.es-comparar { display: grid; gap: var(--s4); margin-block: var(--s5); }
.es-comparar > div { background: var(--papel); border: 1px solid var(--linea); border-top: 4px solid var(--agave); border-radius: var(--r-opcion); padding: var(--s4) var(--s4) var(--s3); }
.es-comparar > div:last-child { border-top-color: var(--terracota); }
.es-comparar h3 { margin-bottom: var(--s2); }
.es-comparar p:last-child { margin-bottom: 0; }
@media (min-width: 700px) { .es-comparar { grid-template-columns: 1fr 1fr; gap: var(--s5); } }

/* ---------- Topic list ---------- */
.es-temas { list-style: none; padding: 0; margin: var(--s5) 0; border-bottom: 1px solid var(--linea); }
.es-temas li { max-width: none; border-top: 1px solid var(--linea); padding: var(--s3) 0; }
.es-temas a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s4); min-height: var(--toque); color: var(--tinta); text-decoration: none; }
.es-temas a:hover .es-temas__nombre { color: var(--agave); text-decoration: underline; text-decoration-thickness: 2px; }
.es-temas__nombre { font-family: var(--font-titulo); font-weight: 700; font-size: 1.25rem; line-height: 1.25; }
.es-temas__conteo { font-size: var(--texto-chico); font-weight: 600; color: var(--terracota); white-space: nowrap; }
.es-temas li p { margin: var(--s1) 0 0; color: var(--tinta-2); font-size: var(--texto-chico); }
@media (min-width: 900px) {
  .es-temas { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s7); }
}

/* ---------- Checklist ---------- */
.es-lista { margin-block: var(--s4); }
.es-lista ul { list-style: none; padding: 0; margin: 0; }
.es-lista li { max-width: none; border-top: 1px solid var(--linea); }
.es-lista li:last-child { border-bottom: 1px solid var(--linea); }
.es-lista__estado { font-size: var(--texto-chico); font-weight: 600; color: var(--tinta-2); margin-bottom: var(--s3); }
.es-check { display: flex; align-items: flex-start; gap: var(--s3); min-height: var(--toque); margin: 0; padding: var(--s3) 0; font-weight: 500; cursor: pointer; }
.es-check input[type="checkbox"] { flex: none; width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0; }
.es-check span { flex: 1; min-width: 0; }
.es-check:has(input:checked) span { color: var(--tinta-2); }

/* ---------- Share ---------- */
.es-compartir { display: inline-flex; align-items: center; justify-content: center; min-height: var(--toque); padding: var(--s2) var(--s4); border-radius: var(--r-boton); color: var(--agave); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.es-compartir:hover { background: var(--agave-tenue); color: var(--agave-2); }

/* ---------- Real warning only ---------- */
.es-aviso { background: var(--ambar-tenue); color: var(--ambar-tinta); border-left: 4px solid var(--ambar-tinta); border-radius: 0 var(--r-opcion) var(--r-opcion) 0; padding: var(--s3) var(--s4); margin-block: var(--s4); }
.es-aviso p:last-child { margin-bottom: 0; }
.es-aviso a { color: inherit; }

/* ---------- Figures ---------- */
.es-cifras { list-style: none; padding: 0; margin: var(--s5) 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s4); border-top: 2px solid var(--tinta); padding-top: var(--s4); }
.es-cifras li { max-width: none; font-size: var(--texto-chico); font-weight: 500; color: var(--tinta-2); line-height: 1.3; }
.es-cifras strong { display: block; font-family: var(--font-titulo); font-weight: 800; font-size: var(--cifra); line-height: 1; color: var(--agave); margin-bottom: var(--s1); }
@media (min-width: 700px) { .es-cifras { grid-template-columns: repeat(4, 1fr); } }

/* The language of the exam: navy is reserved for English exam language. */
.es-idioma, .est-idioma { border-left: 4px solid var(--marino); padding-left: var(--s4); }
.es-idioma p:last-child { margin-bottom: 0; }

/* Choice art: panels sit above the letter and text from 541px, and beside them
   as a row up to 540px. Panel offsets match /question-art.css. */
.es-opciones--arte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.es-opcion--arte { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 0 16px 16px; overflow: hidden; }
.es-opcion--arte .choice-picture { grid-column: 1 / -1; grid-row: 1; position: relative; display: block; aspect-ratio: 1; overflow: hidden; margin: 0 -16px 12px; background: var(--marfil); border-bottom: 1px solid var(--linea); }
.es-opcion--arte .choice-picture img { position: absolute; display: block; width: 200%; height: 200%; max-width: none; object-fit: fill; }
.es-opcion--arte .choice-picture.panel-0 img { left: 0; top: 0; }
.es-opcion--arte .choice-picture.panel-1 img { left: -100%; top: 0; }
.es-opcion--arte .choice-picture.panel-2 img { left: 0; top: -100%; }
.es-opcion--arte .choice-picture.panel-3 img { left: -100%; top: -100%; }
.es-opcion--arte .es-opcion__letra { grid-column: 1; grid-row: 2; margin-top: 2px; }
.es-opcion--arte .es-opcion__texto { grid-column: 2; grid-row: 2; padding-top: 3px; }
.es-ilustracion-nota { margin: var(--s3) 0 var(--s4); }
@media (max-width: 540px) {
  .es-opciones--arte { grid-template-columns: minmax(0, 1fr); }
  .es-opcion--arte { grid-template-columns: minmax(72px, 0.35fr) minmax(0, 1fr); padding: 0; }
  .es-opcion--arte .choice-picture { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin: 0; border-bottom: 0; border-right: 1px solid var(--linea); }
  .es-opcion--arte .es-opcion__letra { grid-column: 2; grid-row: 1; margin: 14px 0 0 12px; }
  .es-opcion--arte .es-opcion__texto { grid-column: 2; grid-row: 2; padding: 0 14px 14px 12px; }
}

/* Home (/es/). */
.home-hero { padding-bottom: var(--s7); }
.home-hero h1 { max-width: 15ch; font-weight: 800; margin-bottom: var(--s4); }
.home-hero .es-lede { margin-bottom: var(--s5); }
.home-hero__nota { margin-top: var(--s4); }
@media (min-width: 900px) {
  .home-hero { padding-top: var(--s6); padding-bottom: var(--s8); }
  .home-hero h1 { max-width: 14ch; margin-bottom: var(--s5); }
}

#muestra .es-pregunta { margin-top: var(--s5); }
#ruta .es-comparar { margin-bottom: var(--s5); }

.home-puentes { display: grid; gap: var(--s4); margin-block: var(--s5); }
@media (min-width: 900px) { .home-puentes { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }
.home-puentes .es-puente { display: flex; flex-direction: column; }
.home-puentes .es-puente__en { flex: 1; }

.home-formularios { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
.home-formularios > * { min-width: 0; }
.home-formularios form { margin-bottom: var(--s4); }
.home-formularios .es-boton { margin-top: var(--s4); max-width: 100%; overflow-wrap: anywhere; }
.home-formularios textarea { max-width: 100%; }
@media (min-width: 900px) {
  .home-formularios { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s8); }
}

.home-puentes__mas > summary { cursor: pointer; font-weight: 600; color: var(--agave); padding: var(--s3) 0; }
@media (max-width: 599px) { .es-cifras strong { font-size: clamp(2rem, 9vw, 3rem); } }
.home-puentes__mas { grid-column: 1 / -1; }

/* Sobre este contenido (/es/sobre-este-contenido/). */
.tr-articulo { max-width: 46rem; }
.tr-cabecera h1 { max-width: 16ch; margin-bottom: var(--s4); }
.tr-articulo .es-section { padding-block: var(--s6); }
.tr-articulo .es-section:first-child { padding-bottom: var(--s6); }
.tr-articulo h2 { font-size: clamp(1.4rem, 5vw, 2rem); }
.tr-lista, .tr-fuentes { padding-left: 1.25rem; margin-bottom: var(--s4); }
.tr-lista li { margin-bottom: var(--s2); padding-left: var(--s1); }
.tr-lista li::marker { color: var(--terracota); }
.tr-fuentes { list-style: none; padding-left: 0; border-top: 1px solid var(--linea); }
.tr-fuentes li { max-width: none; padding: var(--s3) 0; border-bottom: 1px solid var(--linea); }
.tr-fuentes a { font-weight: 600; }

/* Glosario (/es/glosario/). */
.gl-cabecera { padding-bottom: var(--s5); }
.gl-cabecera h1 { max-width: 14ch; }
.gl-idioma { padding-block: var(--s5); }
.gl-idioma h2 { font-size: 1.35rem; }
.gl-fuentes { list-style: none; padding: 0; margin: 0; }
.gl-fuentes li { max-width: none; padding: var(--s2) 0; border-top: 1px solid var(--linea); }
.gl-fuentes a { font-weight: 600; }

.gl-herramientas { padding-top: var(--s5); }
.gl-controles { position: sticky; top: 0; z-index: 5; background: var(--marfil); padding-block: var(--s3); border-bottom: 1px solid var(--linea); margin-bottom: var(--s5); }
.gl-controles label { margin-top: 0; }
.gl-controles input[type="search"] { max-width: 28rem; }
.gl-etiqueta-grupo { font-size: var(--etiqueta); font-weight: 600; margin: var(--s3) 0 var(--s2); color: var(--tinta-2); }
.gl-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s2); }
.gl-chip { min-height: var(--toque); padding: var(--s2) var(--s4); border: 1.5px solid var(--linea-fuerte); border-radius: 999px; background: var(--marfil); color: var(--tinta); font: 600 0.9375rem/1.2 var(--font-texto); cursor: pointer; }
.gl-chip:hover { border-color: var(--agave); background: var(--agave-tenue); }
.gl-chip.is-activo, .gl-chip[aria-pressed="true"] { background: var(--agave); border-color: var(--agave); color: var(--on-agave); }
.gl-controles .es-nota { margin: var(--s2) 0 0; }
.gl-vacio { padding: var(--s4); background: var(--papel); border-radius: var(--r-opcion); border: 1px solid var(--linea); }

.gl-grupo { margin-bottom: var(--s7); }
.gl-grupo h2 { font-size: clamp(1.4rem, 5vw, 2rem); padding-bottom: var(--s2); border-bottom: 2px solid var(--tinta); }
.gl-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); grid-template-columns: 1fr; }
.gl-ficha { max-width: none; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-opcion); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.gl-par { margin: 0; display: grid; gap: var(--s2); }
.gl-par > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s3); align-items: baseline; }
.gl-par dt { font-size: var(--etiqueta); font-weight: 600; color: var(--terracota); }
.gl-par dd { margin: 0; min-width: 0; }
.gl-es { font-family: var(--font-titulo); font-weight: 700; font-size: 1.25rem; line-height: 1.25; }
.gl-en { font-weight: 600; font-size: 1.125rem; color: var(--marino); font-style: normal; }
.gl-ficha .es-escuchar { align-self: flex-start; }
.gl-def { margin: 0; color: var(--tinta-2); font-size: var(--texto-chico); max-width: none; }
.gl-pie { border-top: 1px solid var(--linea); padding-top: var(--s5); }
@media (min-width: 760px) { .gl-lista { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .gl-lista { gap: var(--s5); } }

/* Topic index and topic pages (/es/guides/…). Shared components live in 15-components.css. */
.es-guias__cabecera, .es-guia__cabecera { padding-bottom: var(--s6); }
.es-guias__cabecera h1, .es-guia__cabecera h1 { max-width: 22ch; }
.es-guias__grupo { padding-block: var(--s6); border-top: 1px solid var(--linea); }
.es-guias__grupo h2 { margin-bottom: var(--s5); }
.es-guias .es-acciones { margin-top: var(--s6); }
.es-guias .es-nota { margin-top: var(--s5); }

.es-guia__cabecera .es-etiqueta { margin-bottom: var(--s2); }
.es-guia__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); margin-bottom: var(--s6); }
.es-guia__preguntas > h2 { margin-bottom: var(--s5); }
.es-guia__preguntas .es-acciones { margin-top: var(--s4); }
.es-guia__preguntas .es-pregunta { scroll-margin-top: var(--s5); }

.es-guia__otros-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; max-width: 40rem; }
.es-guia__otros-lista li { border-top: 1px solid var(--linea); max-width: none; }
.es-guia__otros-lista li:last-child { border-bottom: 1px solid var(--linea); }
.es-guia__otros-lista a { display: flex; align-items: center; min-height: var(--toque); padding-block: var(--s2); font-weight: 600; text-decoration: none; }
.es-guia__otros-lista a:hover { text-decoration: underline; }
@media (min-width: 900px) {
  .es-guia__otros-lista { max-width: none; grid-template-columns: 1fr 1fr; column-gap: var(--s7); }
  .es-guia__otros-lista li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--linea); }
}

/* Comments (markup and ids are used by /guide.js) */
.es-comentarios { margin-top: var(--s7); padding-top: var(--s6); border-top: 2px solid var(--linea-fuerte); }
.es-comentarios h2 { font-size: var(--h3); margin-bottom: var(--s3); }
.es-comentarios p { color: var(--tinta-2); }
#commentList { margin-bottom: var(--s5); }
.comment { padding: var(--s4) var(--s5); background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-opcion); margin-bottom: var(--s3); }
.comment p { white-space: pre-wrap; margin: 0 0 var(--s2); color: var(--tinta); }
.comment time { font-size: var(--etiqueta); color: var(--tinta-2); }
.comment-empty { color: var(--tinta-2); }
#commentForm { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); padding: var(--s5) var(--gutter); }
#commentForm label:first-child { margin-top: 0; }
#commentForm input[type="email"], #commentForm textarea { max-width: none; }
#commentForm button { margin-top: var(--s4); }
#commentForm button:disabled { opacity: 0.6; cursor: not-allowed; }
#commentTurnstile { margin-top: var(--s4); max-width: 100%; overflow-x: auto; }
@media (min-width: 900px) { #commentForm { padding: var(--s6); } }

/* Individual question pages (/es/questions/<id>/). The card itself is a shared component. */
.es-q-pagina { max-width: 46rem; margin-inline: auto; }
.es-q-migas { display: flex; flex-wrap: wrap; gap: 0 var(--s5); margin-bottom: var(--s5); font-size: var(--texto-chico); }
.es-q-migas a { display: inline-flex; align-items: center; min-height: var(--toque); font-weight: 600; }
/* The stem is the page's h1; keep it readable, not display-sized. */
.es-q-pagina .es-pregunta__enunciado { font-size: clamp(1.375rem, 5.2vw, 2rem); line-height: 1.25; max-width: none; letter-spacing: 0; }
.es-q-pagina .es-pregunta .es-acciones { margin-top: var(--s5); }
.es-q-mas { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--linea); }
.es-q-mas__enlaces a { display: inline-flex; align-items: center; min-height: var(--toque); font-weight: 600; }
@media (max-width: 480px) {
  .es-q-pagina .es-pregunta .es-acciones > .es-boton { flex: 1 1 100%; }
}

/* "¿Qué haría usted?" (/es/stories/) */
.es-historias__cabecera { padding-bottom: var(--s6); }
.es-historias__lista { display: grid; gap: 0; }
.es-historia { padding-block: var(--s6); border-top: 1px solid var(--linea); max-width: var(--lectura); }
.es-historia .es-etiqueta { margin-bottom: var(--s2); }
.es-historia h2 { font-size: clamp(1.375rem, 4.6vw, 1.875rem); }
.es-historia p { max-width: none; }
.es-historia .es-acciones { margin: var(--s4) 0 0; }
.es-historias__mas { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--linea-fuerte); }
@media (min-width: 900px) {
  .es-historias__lista { grid-template-columns: 1fr 1fr; column-gap: var(--s7); }
  .es-historia { max-width: none; }
}

/* Procedures: resources, exam day, privacy, corrections. Tokens only.
   Shared components (.es-ruta, .es-lista, .es-aviso, .es-compartir) are styled in
   15-components.css; rules here are scoped to this page group's wrappers. */

/* ---------- shared page heads ---------- */
.es-recursos__cabecera, .es-dia__cabecera, .es-privacidad__cabecera { padding-bottom: var(--s6); }
.es-recursos__cabecera h1, .es-dia__cabecera h1, .es-privacidad__cabecera h1 { max-width: 20ch; }

/* ---------- resources ---------- */
.es-recursos { display: grid; gap: var(--s5); }
.es-recursos__indice { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); padding: var(--s4) var(--s5); }
.es-recursos__indice-titulo { font-family: var(--font-texto); font-size: var(--etiqueta); font-weight: 600; color: var(--terracota); margin: 0 0 var(--s2); line-height: 1.3; }
.es-recursos__indice ul { list-style: none; margin: 0; padding: 0; }
.es-recursos__indice li { max-width: none; }
.es-recursos__indice a { display: flex; align-items: center; min-height: var(--toque); color: var(--tinta); font-weight: 600; text-decoration: none; border-top: 1px solid var(--linea); }
.es-recursos__indice li:first-child a { border-top: 0; }
.es-recursos__indice a:hover { color: var(--agave); text-decoration: underline; }
.es-recursos__contenido { min-width: 0; }
.es-recursos__tarjetas { display: grid; gap: var(--s4); }
.es-recurso { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); padding: var(--s5); margin: 0 0 var(--s4); }
.es-recurso h3 { margin-bottom: var(--s3); }
.es-recurso p:last-child { margin-bottom: 0; }
.es-recurso--ancho p { max-width: var(--lectura); }
.es-recurso__enlace { margin-bottom: var(--s2); }
.es-recurso__enlace a { display: inline-flex; align-items: center; min-height: var(--toque); font-weight: 600; }
.es-recursos__enlaces a { display: inline-block; padding-block: var(--s2); font-weight: 600; }
.es-recursos__lista { padding-left: var(--s5); }
.es-recursos__lista li { margin-bottom: var(--s3); }
.es-recursos .es-ruta { list-style: none; margin: 0; padding: 0; }
.es-recursos .es-ruta__paso { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s4); margin-bottom: var(--s5); max-width: none; }
.es-recursos .es-ruta__num { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 2px solid var(--terracota); color: var(--terracota); font-family: var(--font-titulo); font-weight: 800; }
.es-recursos .es-ruta__cuerpo p { margin: var(--s2) 0 0; }
@media (min-width: 900px) {
  .es-recursos { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s8); align-items: start; }
  .es-recursos__indice { position: sticky; top: var(--s5); }
  .es-recursos__tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .es-recursos__contenido .es-section:first-child { padding-top: 0; }
}

/* ---------- exam day ---------- */
.es-dia__nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin: var(--s5) 0 0; padding: 0; }
.es-dia__nav li { max-width: none; }
.es-dia__nav a { display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 var(--s4); border: 2px solid var(--agave); border-radius: var(--r-boton); font-weight: 600; text-decoration: none; }
.es-dia__nav a:hover { background: var(--agave-tenue); }
.es-dia .es-ruta { list-style: none; margin: 0; padding: 0; position: relative; }
.es-dia .es-ruta__paso { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s4); position: relative; padding-bottom: var(--s7); max-width: none; }
.es-dia .es-ruta__paso::before { content: ""; position: absolute; left: calc(1.25rem - 1px); top: 2.5rem; bottom: 0; width: 2px; background: var(--linea-fuerte); }
.es-dia .es-ruta__paso:last-child { padding-bottom: var(--s6); }
.es-dia .es-ruta__paso:last-child::before { display: none; }
.es-dia .es-ruta__num { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--terracota); color: var(--marfil); font-family: var(--font-titulo); font-weight: 800; font-size: 1.25rem; position: relative; }
.es-dia .es-ruta__cuerpo { min-width: 0; padding-top: var(--s1); scroll-margin-top: var(--s5); }
.es-dia .es-ruta__cuerpo, .es-dia__fichas li { overflow-wrap: anywhere; }
.es-dia .ui-term { white-space: normal; }
.es-dia .es-ruta__cuerpo h2 { margin-bottom: var(--s4); scroll-margin-top: var(--s5); }
.es-dia .es-ruta__cuerpo h3 { margin-top: var(--s6); }
.es-dia__fichas { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: 0; margin: var(--s5) 0; }
.es-dia__fichas li { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-opcion); padding: var(--s4); max-width: none; }
.es-dia__lista { padding-left: var(--s5); }
.es-dia__lista li { margin-bottom: var(--s3); }
.es-dia .es-aviso, .es-dia__lista-seccion .es-aviso { background: var(--ambar-tenue); color: var(--ambar-tinta); border-radius: var(--r-opcion); padding: var(--s4) var(--s5); margin: 0 0 var(--s4); border-left: 6px solid var(--ambar-tinta); }
.es-dia .es-aviso p { margin: 0; color: inherit; }
.es-dia .es-aviso a { color: inherit; font-weight: 600; }
.es-dia__lista-seccion .es-lista ul { list-style: none; padding: 0; margin: 0 0 var(--s5); }
.es-dia__lista-seccion .es-lista li { max-width: none; border-top: 1px solid var(--linea); }
.es-dia__lista-seccion .es-lista li:last-child { border-bottom: 1px solid var(--linea); }
.es-dia__lista-seccion .es-check { display: flex; align-items: flex-start; gap: var(--s3); min-height: var(--toque); padding: var(--s3) 0; margin: 0; font-weight: 400; cursor: pointer; }
.es-dia__lista-seccion .es-check input { flex: none; margin-top: 0.2rem; }
.es-dia__lista-seccion .es-lista__estado { font-weight: 600; color: var(--tinta-2); }
.es-dia__acciones a.es-boton { text-decoration: none; }
.es-dia__fuentes { padding-left: var(--s5); }
.es-dia__fuentes li { margin-bottom: var(--s3); }
@media (min-width: 900px) {
  .es-dia .es-ruta__paso { grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--s6); }
  .es-dia .es-ruta__paso::before { left: calc(1.75rem - 1px); top: 3.5rem; }
  .es-dia .es-ruta__num { width: 3.5rem; height: 3.5rem; font-size: 1.75rem; }
  .es-dia__fichas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .es-dia .es-ruta__cuerpo { max-width: 48rem; }
}
@media print {
  .es-header, .es-nav, .es-transparency, .es-footer, .es-dia__acciones, .es-dia__nav { display: none !important; }
}

/* ---------- privacy ---------- */
.es-privacidad { max-width: var(--lectura); }
.es-privacidad__bloque h2 { font-size: clamp(1.25rem, 4.4vw, 1.75rem); }
.es-privacidad__bloque p { max-width: none; }
.es-privacidad__bloque:first-of-type { border-top: 1px solid var(--linea); padding-top: var(--s7); }

/* ---------- corrections ---------- */
.es-correcciones { max-width: 44rem; }
.es-aviso-privado { background: var(--papel); border-left: 4px solid var(--terracota); border-radius: var(--r-boton); padding: var(--s3) var(--s4); font-size: var(--texto-chico); }
.es-correcciones__form { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); padding: var(--s2) var(--s5) var(--s5); margin-top: var(--s5); }
.es-correcciones__form input[type="email"], .es-correcciones__form textarea, .es-correcciones__form select { max-width: none; }
.es-correcciones__form select { min-height: 3.5rem; }
.es-correcciones__form button[type="submit"] { margin-top: var(--s5); min-height: var(--toque); padding: var(--s3) var(--s6); border-radius: var(--r-boton); border: 2px solid var(--agave); background: var(--agave); color: var(--on-agave); font-weight: 700; cursor: pointer; }
.es-correcciones__form button[type="submit"]:hover:not([disabled]) { background: var(--agave-2); border-color: var(--agave-2); }
.es-correcciones__form button[type="submit"][disabled] { opacity: 0.55; cursor: not-allowed; }
.es-correcciones__form #correctionTurnstile { margin-top: var(--s4); }
.es-correcciones__form [role="status"] { max-width: none; }

/* /es/study/ — the study desk. Five real views (Inicio, Preguntas, Destrezas,
   Casos, Mi plan), one shown at a time, with a bottom bar on phones and a side
   rail from 900px. Shared components (.es-pregunta, .es-opcion, .es-puente,
   .es-recordar, .es-aviso, .es-ruta, .es-check) are styled in the components
   stylesheet; this file only lays them out inside the desk and styles the
   desk's own parts (.est-*, .es-segmentos). Tokens only, no literal colors. */

body[data-es-study] { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.es-main--study { padding-block: var(--s5) var(--s7); }
.est > * { min-width: 0; }

/* ---------- header ---------- */
.est-cabecera { margin-bottom: var(--s5); }
.est-cabecera h1 { font-size: clamp(1.75rem, 6.5vw, 2.6rem); max-width: none; margin-bottom: var(--s2); }
.est-lede { color: var(--tinta-2); max-width: 36rem; margin-bottom: var(--s2); }
.est[data-vista]:not([data-vista="dashboard"]) .est-lede { display: none; }
.est-enlaces { display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.est-enlaces a { display: inline-flex; align-items: center; min-height: var(--toque); font-weight: 600; font-size: var(--texto-chico); }

/* ---------- navigation: bottom bar on phones ---------- */
.est-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--marfil); border-top: 1px solid var(--linea-fuerte); padding-bottom: env(safe-area-inset-bottom); }
.est-nav ul { list-style: none; margin: 0 auto; padding: 0; display: flex; max-width: 36rem; }
.est-nav li { flex: 1 1 auto; margin: 0; max-width: none; }
.est-nav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1); min-height: 64px; padding: var(--s2) 2px; color: var(--tinta-2); text-decoration: none; font-weight: 600; font-size: var(--etiqueta); line-height: 1.1; text-align: center; white-space: nowrap; }
.est-nav a:hover { color: var(--agave); }
.est-nav svg { width: 24px; height: 24px; flex: none; }
.est-nav a[aria-current="page"] { color: var(--agave-2); }
.est-nav a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 3px; background: var(--terracota); border-radius: 0 0 3px 3px; }

/* ---------- body ---------- */
.est-estados p { margin: 0 0 var(--s2); font-size: var(--texto-chico); font-weight: 400; color: var(--tinta-2); }
.est-vista > h2 { scroll-margin-top: var(--s4); margin-bottom: var(--s4); }
.est-seccion { border-top: 1px solid var(--linea); margin-top: var(--s7); padding-top: var(--s6); scroll-margin-top: var(--s4); }
.est-seccion > h3 { font-size: clamp(1.4rem, 4.8vw, 1.85rem); scroll-margin-top: var(--s4); }
.est-pie { margin: var(--s7) 0 0; padding-top: var(--s4); border-top: 1px solid var(--linea); font-size: var(--texto-chico); color: var(--tinta-2); max-width: none; }

@media (min-width: 900px) {
  body[data-es-study] { padding-bottom: 0; }
  .es-main--study { padding-block: var(--s6) var(--s8); }
  .est { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); column-gap: var(--s6); align-items: start; }
  .est-cabecera { grid-column: 1 / -1; margin-bottom: var(--s6); }
  .est-nav { position: sticky; top: var(--s4); left: auto; right: auto; bottom: auto; grid-column: 1; z-index: 1; border-top: 0; background: transparent; padding: 0; }
  .est-nav ul { display: block; max-width: none; }
  .est-nav li { margin-bottom: var(--s1); }
  .est-nav a { flex-direction: row; justify-content: flex-start; gap: var(--s3); min-height: 52px; padding: 0 var(--s4); font-size: 1rem; text-align: left; border-radius: var(--r-boton); }
  .est-nav a[aria-current="page"] { background: var(--agave-tenue); }
  .est-nav a[aria-current="page"]::before { top: 10px; bottom: 10px; left: 0; right: auto; width: 4px; height: auto; border-radius: 0 3px 3px 0; }
  .est-cuerpo { grid-column: 2; border-left: 1px solid var(--linea); padding-left: var(--s6); }
}

/* ---------- segmented control: scrolls sideways, never clips a label ---------- */
.es-segmentos { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s1) 0 var(--s3); margin: var(--s4) 0; }
.es-segmentos > button, .es-segmentos > a { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; min-height: var(--toque); padding: var(--s2) var(--s4); border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-tarjeta); background: transparent; color: var(--tinta); font: 600 var(--texto-chico)/1.2 var(--font-texto); text-decoration: none; white-space: nowrap; cursor: pointer; }
.es-segmentos > button:hover:not([disabled]), .es-segmentos > a:hover { background: var(--agave-tenue); color: var(--agave-2); }
.es-segmentos > [aria-pressed="true"] { background: var(--agave); border-color: var(--agave); color: var(--on-agave); }
.es-segmentos > [disabled] { opacity: 0.55; cursor: not-allowed; }
@media (max-width: 599px) { .es-segmentos > button { flex: 1 1 100%; justify-content: center; } }

/* ---------- forms ---------- */
.est-campo { margin-bottom: var(--s4); }
.est-campo label { margin-top: 0; }
.est-form { display: grid; gap: var(--s1); margin-block: var(--s4); }
.est-form .es-boton { justify-self: start; margin-top: var(--s3); }
#sessionPlanForm { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); column-gap: var(--s4); align-items: end; }
#sessionPlanForm .es-boton { grid-column: 1 / -1; }
.est-casilla { display: flex; align-items: flex-start; gap: var(--s3); font-weight: 400; min-height: var(--toque); margin: var(--s2) 0; max-width: var(--lectura); }
.est-casilla input { flex: none; margin-top: 0.2rem; }
#feedbackStatus, #sessionPlanStatus, #settingsStatus, #planResult { min-height: 1.5em; }

/* ---------- Inicio ---------- */
.est-resumen { font-size: 1.15em; max-width: 36rem; }
.est-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); margin: var(--s5) 0; }
.est-cifras > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; border-top: 2px solid var(--linea-fuerte); padding-top: var(--s2); min-width: 0; }
.est-cifras dd { margin: 0; font: 800 var(--cifra)/1 var(--font-titulo); color: var(--terracota); }
.est-cifras dt { font-size: var(--texto-chico); color: var(--tinta-2); margin-top: var(--s1); overflow-wrap: anywhere; }
.est-atajos { margin-block: var(--s5); }
@media (min-width: 900px) { .est-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- disclosure blocks ---------- */
.est-hitos, .est-detalle, .est-destrezas > details, .est-revision { border-top: 1px solid var(--linea); }
.est-hitos { margin-top: var(--s5); }
.est-detalle { margin-top: var(--s6); }
.est-destrezas > details:last-child { border-bottom: 1px solid var(--linea); }
.est-hitos > summary, .est-detalle > summary, .est-destrezas > details > summary, .est-revision > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 56px; padding-block: var(--s3); font-weight: 700; cursor: pointer; list-style: none; }
.est-hitos > summary::-webkit-details-marker, .est-detalle > summary::-webkit-details-marker, .est-destrezas > details > summary::-webkit-details-marker, .est-revision > summary::-webkit-details-marker { display: none; }
.est-hitos > summary::after, .est-detalle > summary::after, .est-destrezas > details > summary::after, .est-revision > summary::after { content: ""; flex: none; width: 0.55em; height: 0.55em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.15s; }
.est-hitos[open] > summary::after, .est-detalle[open] > summary::after, .est-destrezas > details[open] > summary::after, .est-revision[open] > summary::after { transform: rotate(-135deg); }
.est-hitos__lista { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s4); }
.est-hito { border-left: 3px solid var(--linea-fuerte); padding-left: var(--s4); }
.est-hito--cumplido { border-left-color: var(--acierto); }
.est-hito p { margin: 0 0 var(--s1); }
.est-hito__titulo { font-weight: 700; }
.est-hito__estado { font-size: var(--etiqueta); font-weight: 600; color: var(--tinta-2); }
.est-hito--cumplido .est-hito__estado { color: var(--acierto); }
@media (min-width: 900px) { .est-hitos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s6); } }

/* ---------- Preguntas ---------- */
.est-quiz { margin-top: var(--s4); }
.est-barra { height: 6px; background: var(--papel-2); border-radius: 3px; overflow: hidden; margin-bottom: var(--s4); }
.est-barra i { display: block; height: 100%; background: var(--terracota); border-radius: 3px; }
.est-pregunta h3 { font-family: var(--font-texto); font-size: var(--texto-chico); font-weight: 600; color: var(--tinta-2); margin-bottom: var(--s1); }
.est-tiempo { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s3); }
.est-tiempo p { margin: 0; color: var(--tinta-2); font-size: var(--texto-chico); }
.est-tiempo output { font: 800 1.5rem/1 var(--font-titulo); font-variant-numeric: tabular-nums; }
.est-pregunta .es-opcion[aria-pressed="true"]:not(.is-correcta):not(.is-incorrecta) { border-color: var(--agave); background: var(--agave-tenue); }
.est-icono { width: 1.2em; height: 1.2em; flex: none; }
.est-veredicto { display: flex; align-items: center; gap: var(--s2); font-weight: 700; margin: var(--s4) 0 var(--s2); }
.est-veredicto--ok { color: var(--acierto); }
.est-veredicto--no { color: var(--error); }
#quizExplanation { margin-top: var(--s4); }
#quizExplanation:empty { display: none; }
.est-pregunta .es-acciones { margin-top: var(--s5); }
.est-resultado h3 { font-size: clamp(1.4rem, 5vw, 1.9rem); }
.est-revision > summary { font-weight: 600; }
.est-revision > summary::after { margin-left: auto; }
.est-revision > :not(summary) { padding-inline: var(--s1); }

/* ---------- Destrezas ---------- */
.est-bloque { border: 1px solid var(--linea); background: var(--papel); border-radius: var(--r-opcion); padding: var(--s4); margin-block: var(--s4); }
.est-bloque > :last-child { margin-bottom: 0; }
.est-reloj { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
#skillsClock { font: 800 2.25rem/1 var(--font-titulo); font-variant-numeric: tabular-nums; }
.est-sorteo { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s3); }
.est-sorteo li { border-left: 3px solid var(--terracota); padding-left: var(--s3); }
.est-sorteo a { font-weight: 700; display: inline-block; padding-block: var(--s1); }
.est-sorteo p { margin: 0; }
.est-oficial { color: var(--marino); font-weight: 600; margin-bottom: var(--s2); }
.est-destreza { padding: var(--s2) 0 var(--s6); }
.est-destreza h3 { font-size: 1.2rem; margin: var(--s5) 0 var(--s3); }
.est-etiquetas { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0; margin: 0 0 var(--s4); }
.est-etiquetas li { border: 1px solid var(--linea-fuerte); border-radius: var(--r-tarjeta); padding: 2px var(--s3); font-size: var(--etiqueta); font-weight: 600; color: var(--tinta-2); }
.est-pasos { list-style: none; counter-reset: paso; padding: 0; margin: 0 0 var(--s4); }
.est-pasos li { counter-increment: paso; position: relative; padding-left: 2.6rem; margin-bottom: var(--s3); }
.est-pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0.1em; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--agave-tenue); color: var(--agave-2); font: 700 var(--etiqueta)/1.9rem var(--font-texto); text-align: center; }
.est-terminos { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--s3) var(--s4); margin: 0 0 var(--s4); }
.est-terminos > div { border-top: 1px solid var(--linea); padding-top: var(--s2); min-width: 0; }
.est-terminos dt { font-weight: 600; overflow-wrap: anywhere; }
.est-terminos dd { margin: 0; color: var(--marino); font-weight: 600; overflow-wrap: anywhere; }
.est-conteo { font-size: var(--etiqueta); color: var(--tinta-2); margin: var(--s3) 0 0; }
.est-general > div { padding-bottom: var(--s4); }

/* ---------- Casos ---------- */
.est-casos { margin-top: var(--s5); }
.est-caso { border-top: 1px solid var(--linea); padding-block: var(--s5); }
.est-caso:first-child { border-top: 0; padding-top: 0; }
.est-caso h3 { font-size: 1.4rem; }
.est-caso [role="status"] { margin-top: var(--s4); font-weight: 400; }

/* ---------- Mi plan ---------- */
.est-sesion { margin-top: var(--s4); }
.est-sesion ol { padding-left: var(--s5); }
.est-sesion li { margin-bottom: var(--s4); }
.est-sesion p { margin-bottom: var(--s1); }
.est-sesion__titulo { font-weight: 700; }
.est-sesion a { display: inline-block; padding-block: var(--s2); }
#planResult ul { padding-left: var(--s5); }
.est-fuentes { margin-top: var(--s4); }
.est-fuente { border-top: 1px solid var(--linea); padding-block: var(--s4); }
.est-fuente:first-child { border-top: 0; padding-top: 0; }
.est-fuente h4 { font-family: var(--font-titulo); font-size: 1.15rem; line-height: 1.25; margin: 0 0 var(--s2); }
.est-fuente p { margin-bottom: var(--s2); }
.est-fuente__oficial { font-size: var(--texto-chico); color: var(--tinta-2); }
.est-fuente__oficial [lang="en"] { color: var(--marino); font-weight: 600; }
#examSteps { margin-block: var(--s4); }

/* Cases one at a time; folded extra phrases; listening practice */
.est-caso-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin: var(--s5) 0; }
.est-caso-nav__pos { margin: 0; font-weight: 600; }
.est-mas-frases { margin: var(--s3) 0 var(--s4); }
.est-mas-frases > summary { cursor: pointer; font-weight: 600; color: var(--agave); padding: var(--s2) 0; }
#skillList > details > summary { display: flex; flex-direction: column; gap: 2px; }
#skillList > details > summary .est-oficial { font-size: var(--texto-chico); font-weight: 600; margin: 0; }
.est-oido .es-opciones { margin-top: var(--s4); }
.est-oido__resultado:empty { display: none; }

.est-panel { margin-top: var(--s4); }
.es-puente p { hyphens: manual; }