/* =====================================================================
   MADRID SPANISH INSTITUTE
   Hoja de diseño. Sustituye a final-fixes.css, que había crecido hasta
   2.132 líneas y 426 !important apilando parche sobre parche.

   Aquí no hay historia: hay decisiones, ordenadas por lo que hacen.

     1 · La paleta
     2 · La página
     3 · La cabecera y el pie
     4 · La portada, en verde
     5 · Las interiores, en crema
     6 · El ritmo de las interiores
     7 · Componentes
     8 · Las páginas que traen su hoja dentro   ← toda la fuerza bruta
     9 · Arreglos de maqueta
    10 · Accesibilidad
    11 · Impresión

   Sobre !important. Esta hoja se carga después de core.css y de
   hero-botanica.css, así que para ganarles casi siempre basta con la
   especificidad. Con dos excepciones: hero-botanica.css usa !important
   en la cabecera de la portada (sección 4), y nueve páginas llevan su propio
   <style> DENTRO del HTML, que se aplica después de todo lo demás. Toda esa pelea está encerrada en la
   sección 8, para que el resto de la hoja se pueda leer y editar sin
   miedo.
   ===================================================================== */


/* =====================================================================
   0 · ESTRUCTURA
   =====================================================================
   La capa de maqueta de la publicación: se quitó la numeración
   decorativa del HTML y aquí se cierran las columnas que quedaron
   huérfanas, se ordenan las rejillas de las listas y se planta el
   motivo del hero —el tallo y la semilla— como marca de capítulo.

   No decide colores. Los colores empiezan en la sección 1.
   ===================================================================== */

/* Final publication pass: accessibility, calmer editorial rhythm and Campus integration. */

:root{
  --ocre-o:#8A6318;
  --tallo:#5B7B42;
}

/* Decorative numbering has been removed from the markup. Collapse the old gutters. */
.door,
.bar,
.spine,
.reg li{
  grid-template-columns:minmax(0,1fr) !important;
}

.door__no,
.bar__no,
.spine__no,
.course__no,
.format__no,
.i-format__no,
.u-criteria__no,
.u-decisions__no,
.next-steps__no,
.archive__no,
.editorial-lines__no{
  display:none !important;
}

.reg li::before,
.faq summary::before,
.c-steps li::before,
body.institutions-clean .i-milestones li::before,
.policy-list li::before{
  content:none !important;
  display:none !important;
}

.faq summary{
  grid-template-columns:minmax(0,1fr) auto !important;
}
.faq .faq__a{margin-left:0 !important}

.article-nav a{
  display:block !important;
  grid-template-columns:1fr !important;
}

.time-lines li{
  grid-template-columns:minmax(12rem,.65fr) minmax(0,1.35fr) !important;
}
.time-lines p{grid-column:auto !important}

.feature__covers li,
.brief-list li{
  display:block !important;
}

.archive__row{
  grid-template-columns:minmax(15rem,.8fr) minmax(0,1.2fr) auto !important;
}
.archive__row .tlink{grid-column:auto !important}

.editorial-lines li{
  grid-template-columns:minmax(12rem,.62fr) minmax(0,1.38fr) !important;
}
.editorial-lines p{grid-column:auto !important}

.u-criteria li{
  grid-template-columns:minmax(15rem,.8fr) minmax(0,1.2fr) !important;
}
.u-decisions li{grid-template-columns:minmax(0,1fr) !important}

.privacy-intro{
  grid-template-columns:minmax(0,1fr) !important;
  gap:0 !important;
}
.privacy-list{
  padding-left:0 !important;
}
.data-note,
.policy-note{
  margin-left:0 !important;
}

.policy-list li{
  grid-template-columns:minmax(13rem,.7fr) minmax(0,1.3fr) !important;
}
.policy-list p{grid-column:auto !important}

.i-format{grid-template-columns:minmax(0,1fr) !important}

/* =====================================================================
   DIRECCION DE ARTE — PORTADA
   El hero no se toca. Todo lo de abajo se acota con :has() para que
   ninguna otra pagina se entere.
   ===================================================================== */

/* ---------- 1 · MATERIA: la tela y la luz salen del hero ---------- */
body{
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.085'/%3E%3C/svg%3E");
  background-size:min(78vw,860px) min(78vw,860px);
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 120% 70% at 18% 8%,rgba(255,255,255,.55),transparent 55%),
    radial-gradient(ellipse 130% 95% at 78% 96%,rgba(31,18,14,.055),transparent 60%);
}
body > *{position:relative;z-index:1}
.hero-botanica{position:relative}
.hero-botanica::after{
  content:"";position:absolute;left:0;right:0;bottom:-1.4rem;height:1.4rem;
  z-index:8;pointer-events:none;
  background:linear-gradient(to bottom,rgba(6,29,20,.16),rgba(6,29,20,0));
}

/* ---------- 2 · LAS RAYAS: de 42 a las que separan capitulos ---------- */
.door,.reg li,.faq{border-top-color:transparent;border-bottom-color:transparent}
.mv{border-top:0}
.mv + .mv{margin-top:clamp(1rem,3vw,2.5rem)}

/* ---------- 3 · CTA: un solo color. Ocre siempre, sin excepciones. --- */

/* =====================================================================
   A partir de aqui, solo la portada
   ===================================================================== */

/* ---------- 4 · ESCALA: el titular de seccion llena su columna ------- */
body:has(.hero-botanica) .mv h2:not(.kicker),
body:has(.hero-botanica) .coda h2:not(.kicker){
  font-size:clamp(2.45rem,5.1vw,3.9rem);
  line-height:1.015;
  letter-spacing:-.032em;
  max-width:15ch;
}

/* ---------- 5 · LA CABECERA DE SECCION deja de ser 50/50 ------------- */
body:has(.hero-botanica) .movement__head{
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(1.4rem,4vw,4.5rem);
  align-items:end;
}
body:has(.hero-botanica) .movement__head .lead{
  max-width:36ch;font-size:1.0625rem;line-height:1.7;padding-bottom:.5rem;
}

/* ---------- 6 · LAS TRES PUERTAS: tres filas iguales -> un indice ---- */
body:has(.hero-botanica) .door{
  grid-template-columns:minmax(0,1fr);
  padding-inline:clamp(.75rem,2vw,1.5rem);
  margin-inline:calc(-1 * clamp(.75rem,2vw,1.5rem));
  border-top:1px solid var(--rule-soft);
  transition:background-color .4s var(--e,ease);
}
body:has(.hero-botanica) .door:last-of-type{border-bottom:1px solid var(--rule-soft)}
body:has(.hero-botanica) .door:hover,
body:has(.hero-botanica) .door:focus-visible{background-color:transparent}
body:has(.hero-botanica) .door__in{
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:.35rem clamp(2rem,5vw,5.5rem);
  align-items:start;
  padding-block:clamp(1.9rem,3.8vw,3rem);
}
body:has(.hero-botanica) .door:hover .door__in{transform:none}
body:has(.hero-botanica) .door h3{
  font-family:var(--serif);
  font-style:normal;
  font-weight:400;
  font-size:clamp(1.8rem,3.45vw,2.75rem);
  line-height:1.04;letter-spacing:-.024em;max-width:15ch;
  transition:color .3s var(--e,ease);
}
/* Aquí iban dos cosas que se retiraron: la inicial en cursiva y oro
   —la página ya tiene detalle de sobra sin ella— y el titular entero
   cambiando a oro al pasar el puntero, que es justo el cambio de color
   en masa que la sección 4 evita. */
body:has(.hero-botanica) .door p{font-size:1.0625rem;line-height:1.68;max-width:46ch}
body:has(.hero-botanica) .door .tlink{margin-top:1rem}

/* ---------- 7 · COLABORACIONES: 9 filas -> una linea corrida --------- */
body:has(.hero-botanica) .reg{display:block;max-width:58rem}
body:has(.hero-botanica) .reg li{
  display:inline;grid-template-columns:none;border:0;padding:0;
}
body:has(.hero-botanica) .reg li + li::before{
  content:"·" !important;display:inline !important;
  color:var(--ocre);padding:0 .62rem;font-weight:700;
}
body:has(.hero-botanica) .reg b{
  font-family:var(--serif);font-weight:400;color:var(--verde);
  font-size:clamp(1.05rem,1.55vw,1.28rem);line-height:1.9;
}

/* ---------- 8 · «VENGA.»: que sea de verdad un momento -------------- */
@media(min-width:60rem){
  body:has(.hero-botanica) .aside__grid{
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  }
}
body:has(.hero-botanica) .aside__q{
  font-size:clamp(3rem,7.6vw,5.6rem);line-height:.96;letter-spacing:-.04em;
}
body:has(.hero-botanica) .aside{padding-block:clamp(3.5rem,8vw,6.5rem)}

/* ---------- 9 · EL CIERRE: la segunda voz alta de la pagina --------- */
body:has(.hero-botanica) .coda__say{
  font-size:clamp(2.8rem,6.3vw,4.7rem);line-height:.99;letter-spacing:-.034em;
}


.theme-botanica .onwine :focus-visible,
.theme-botanica .masthead :focus-visible,
.theme-botanica .site-foot :focus-visible{
  outline-color:var(--ocre) !important;
}
.contact-form .c-field input:focus-visible,
.contact-form .c-field select:focus-visible,
.contact-form .c-field textarea:focus-visible,
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{
  outline:2px solid var(--verde-h) !important;
  outline-offset:3px !important;
}

@media(max-width:52rem){
  .archive__row,
  .editorial-lines li,
  .u-criteria li,
  .policy-list li,
  .time-lines li{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .archive__row p,
  .archive__row .tlink,
  .editorial-lines p{
    grid-column:1 !important;
  }
}

/* The full brand and two controls did not fit on the 320/390 px 404 header. */
@media(max-width:44rem){
  .lost__tools .btn{display:none !important}
  .lost__tools{gap:.5rem !important}
  .lost + .site-foot{margin-top:0}
  .masthead__in{gap:.65rem !important}
  .mark{gap:.7rem !important;min-width:0}
  .mark__name{font-size:.9rem !important;white-space:normal !important;line-height:1.15}
  .lost__grid{min-width:0}
  .lost__no{font-size:clamp(6.5rem,38vw,9rem) !important}
}

/* =====================================================================
   FINAL REVIEW — stable calls to action and a quieter footer
   ===================================================================== */

/* The home sits on green. Ochre text links must remain legible after
   hover/focus instead of inheriting the paper-page hover colour. */
body.home-botanica .tlink:hover,
body.home-botanica .tlink:focus-visible,
body.home-botanica .door:hover .tlink,
body.home-botanica .door:focus-within .tlink{
  color:#FEFCF4 !important;
  border-bottom-color:#FEFCF4 !important;
}
body.home-botanica .door[href*="campus."]:hover .tlink,
body.home-botanica .door[href*="campus."]:focus-within .tlink{
  background:#C89B45 !important;
  color:#132A22 !important;
  border-bottom-color:transparent !important;
}

/* Filled footer CTA: keep its label visible for mouse and keyboard. */
.site-foot .foot-cta:hover,
.site-foot .foot-cta:focus-visible,
body.lectura .site-foot .foot-cta:hover,
body.lectura .site-foot .foot-cta:focus-visible{
  background:#C89B45 !important;
  color:#132A22 !important;
  border-color:transparent !important;
}
.site-foot .foot-cta:hover *,
.site-foot .foot-cta:focus-visible *,
body.lectura .site-foot .foot-cta:hover *,
body.lectura .site-foot .foot-cta:focus-visible *{
  color:#132A22 !important;
}

/* One structural rule is enough: it separates the introduction from the
   locations without turning the footer into a stack of ruled rows. */
.site-foot .foot-main{
  border-top:0 !important;
  border-bottom:1px solid rgba(254,252,244,.22) !important;
}
.site-foot .foot-places,
.site-foot .foot-links,
.site-foot .foot-bottom,
.site-foot .foot-place{
  border-top:0 !important;
  border-bottom:0 !important;
}

/* The Fundae deadline is expressed in words, rather than as a decorative date. */
.c-stat__value,
.expiry__year{
  white-space:normal !important;
  overflow-wrap:anywhere;
}
.c-stat__value{
  font-size:clamp(2.35rem,5.5vw,4.75rem) !important;
  line-height:1 !important;
}
.expiry__year{
  font-size:clamp(2rem,5vw,4.25rem) !important;
  line-height:1 !important;
}


/* =====================================================================
   EL MOTIVO DEL HERO COMO SEÑAL DE SECCION
   El tallo verde y la semilla ocre salen del hero y marcan cada
   capitulo. Sustituyen a la raya horizontal generica. Sin rojo:
   el rojo se queda en el logotipo, como estaba mandado.
   ===================================================================== */

body:has(.hero-botanica) .mv > .wrap,
body:has(.hero-botanica) .coda > .wrap{position:relative}

/* el tallo: crece hacia abajo y se desvanece, como en el hero */
body:has(.hero-botanica) .mv > .wrap::before,
body:has(.hero-botanica) .coda > .wrap::before{
  content:"";position:absolute;
  left:calc(var(--pad) - 1.44rem);
  top:.45rem;width:3px;height:clamp(2.4rem,3.6vw,3.4rem);
  background:linear-gradient(to bottom,var(--tallo) 0%,var(--tallo) 55%,rgba(91,123,66,0) 100%);
  border-radius:2px;
}
/* la semilla: el punto ocre del logotipo, coronando el tallo */
body:has(.hero-botanica) .mv > .wrap::after,
body:has(.hero-botanica) .coda > .wrap::after{
  content:"";position:absolute;
  left:calc(var(--pad) - 1.63rem);
  top:-.22rem;width:9px;height:9px;border-radius:50%;
  background:var(--ocre);
  box-shadow:0 0 0 4px rgba(181,138,58,.16);
}
/* sobre verde, el tallo se aclara para no perderse */
body:has(.hero-botanica) .mv--wine > .wrap::before{
  background:linear-gradient(to bottom,#7A9E68 0%,#7A9E68 55%,rgba(122,158,104,0) 100%);
}
@media(max-width:52rem){
  body:has(.hero-botanica) .mv > .wrap::before,
  body:has(.hero-botanica) .mv > .wrap::after,
  body:has(.hero-botanica) .coda > .wrap::before,
  body:has(.hero-botanica) .coda > .wrap::after{display:none}
}

/* ---------- LAS TRES DE ARRIBA ----------
   La columna que quedo huerfana al quitar los numeros no se cierra:
   se le devuelve un habitante. Cada ruta lleva su propia semilla, que
   germina al pasar por encima. Ni numero ni tarjeta. */
body:has(.hero-botanica) .door{
  grid-template-columns:2.6rem minmax(0,1fr);
  align-items:start;
  /* al aire: ninguna raya separa una ruta de otra */
  border-top:0;
  border-bottom:0;
}
body:has(.hero-botanica) .door:last-of-type{border-bottom:0}
body:has(.hero-botanica) .door::after{display:none}

/* el tallo de cada ruta: ahora si crece, y es el unico separador */
body:has(.hero-botanica) .door__in{position:relative}
body:has(.hero-botanica) .door__in::after{
  content:"";position:absolute;
  left:-1.42rem;
  top:calc(clamp(2.05rem,3.9vw,3.05rem) + 11px);
  width:3px;
  height:calc(100% - clamp(2.05rem,3.9vw,3.05rem) - 2.6rem);
  min-height:2.5rem;
  border-radius:2px;
  background:linear-gradient(to bottom,var(--tallo) 0%,var(--tallo) 42%,rgba(91,123,66,0) 100%);
  transition:opacity .4s var(--e,ease);
}
body:has(.hero-botanica) .door__in::before{
  content:"";position:absolute;left:-1.62rem;
  top:clamp(2.05rem,3.9vw,3.05rem);
  width:9px;height:9px;border-radius:50%;
  background:var(--ocre);
  box-shadow:0 0 0 0 rgba(224,172,66,.3);
  transition:box-shadow .45s var(--e,ease);
}
body:has(.hero-botanica) .door:hover .door__in::before,
body:has(.hero-botanica) .door:focus-visible .door__in::before{
  box-shadow:0 0 0 6px rgba(224,172,66,.22);
}
@media (prefers-reduced-motion:reduce){
  body:has(.hero-botanica) .door::before,
  body:has(.hero-botanica) .door__in::before{transition:none}
}
@media(max-width:52rem){
  body:has(.hero-botanica) .door{grid-template-columns:minmax(0,1fr)}
  body:has(.hero-botanica) .door::before{display:none}
  body:has(.hero-botanica) .door__in::before{display:none}
}


/* al quitar las rayas, el aire tiene que hacer el trabajo que hacian ellas */
body:has(.hero-botanica) .door__in{
  padding-block:clamp(2.4rem,4.8vw,3.9rem);
}
body:has(.hero-botanica) .door:hover,
body:has(.hero-botanica) .door:focus-visible{background-color:rgba(224,172,66,.055)}
/* en movil los tallos se quedan: sin rayas, son el unico separador */
@media(max-width:52rem){
  body:has(.hero-botanica) .door{grid-template-columns:1.6rem minmax(0,1fr)}
  body:has(.hero-botanica) .door::before{display:none}
  body:has(.hero-botanica) .door__in::before{display:block;left:-1.15rem;width:8px;height:8px}
  body:has(.hero-botanica) .door__in::after{display:block;left:-1rem;width:2px}
}


/* --- un solo tallo por eje ---------------------------------------
   Donde la seccion ya lleva rutas con su propio tallo, el marcador de
   seccion sobra: dos tallos en la misma vertical se leen como uno roto.
   Ahi la seccion se queda solo con su semilla. */
body:has(.hero-botanica) .mv:has(.door) > .wrap::before{display:none}


/* =====================================================================
   1 · LA PALETA
   =====================================================================
   Tres colores, y dos auxiliares que se explican solos:

     verde profundo #132A22
     ocre          #B58A3A
     crema         #FEFCF4   ·  11,09:1 sobre el verde

   · #132A22 es el verde en su escalón más hondo. Hace de tinta dentro
     del botón de oro —4,82:1, la única combinación que pasa el mínimo
     encima del ocre— y de casilla oscura del damero.
   · #CBA24E y #8A6318 son el mismo ocre, uno más claro y otro más
     hondo. El ocre pleno escrito sobre verde da 3,61:1 y sobre crema
     3,07:1: en los dos casos se queda corto. Así que el ocre de LETRA
     cambia según el suelo, y el ocre de RELLENO no cambia nunca.

   La página tiene dos modos. El mismo par de colores, del derecho y
   del revés, y se elige con la clase «lectura» en el <body>.
   ===================================================================== */

:root,
body,
.theme-botanica,
.onwine,
.site-foot,
.hero-botanica{
  --verde:#132A22;
  --verde-h:#132A22;
  --ocre-pleno:#B58A3A;
  --crema-pura:#FEFCF4;

  /* modo portada: fondo verde, tinta crema */
  --fondo:#132A22;
  --titulo:#FEFCF4;
  --parrafo:#FEFCF4;
  --segundo:rgba(254,252,244,.80);
  --menu:#FFFFFF;
  --ocre:#CBA24E;          /* el ocre como letra sobre verde · 4,78:1 */
  --ocre-o:#8A6318;
  --ocre-tinta:#132A22;
  --rule:rgba(254,252,244,.26);
  --rule-soft:rgba(254,252,244,.13);
  --sombra:rgba(11,26,21,.55);
  --sombra-suave:rgba(11,26,21,.30);

  /* las variables que ya usaban core.css y la escena del hero */
  --crema:#FEFCF4;  --papel:#FEFCF4;  --paper:#FEFCF4;
  --paper-alt:#132A22;  --paper-deep:#132A22;
  --wine:var(--ocre);   --wine-deep:#132A22;
  --oro:var(--ocre);
  --text:#FEFCF4;   --negro:#FEFCF4;  --body:#FEFCF4;
  --muted:var(--segundo);  --faint:rgba(254,252,244,.70);
  --linea-c:rgba(254,252,244,.20);
  --linea-cr:rgba(254,252,244,.20);
  --tablero-a:#FEFCF4;
  --tablero-b:#132A22;
  --marca-hueco:#132A22;
}

/* modo lectura: los mismos colores, intercambiando el papel */
body.lectura{
  --fondo:#FEFCF4;
  --titulo:#1F4035;
  --parrafo:#1F4035;
  --segundo:#3A5A4E;       /* 7,43:1 */
  --ocre:#8A6318;          /* el ocre como letra sobre crema · 5,27:1 */
  --rule:rgba(31,64,53,.20);
  --rule-soft:rgba(31,64,53,.11);
  --sombra:rgba(31,64,53,.16);
  --sombra-suave:rgba(31,64,53,.08);

  --crema:#1F4035;  --papel:#1F4035;  --paper:#1F4035;
  --paper-alt:#FEFCF4;  --paper-deep:#F6F1E2;
  --text:#1F4035;   --negro:#1F4035;  --body:#1F4035;
  --muted:#3A5A4E;  --faint:#4E6A5F;
  --linea-c:rgba(31,64,53,.20);
  --linea-cr:rgba(31,64,53,.20);
}

/* dentro de un panel verde de una página clara vuelve a mandar la
   escala oscura: es una isla del otro modo */
body.lectura .onwine,
body.lectura .score,
body.lectura .practice,
body.lectura .mv--wine,
body.lectura .fund-admin,
body.lectura .u-director,
body.lectura .next,
body.lectura .duo,
body.lectura .aside,
body.lectura .coda,
body.lectura .fund-coda,
body.lectura .article-cta,
body.lectura #preparation{
  --titulo:#FEFCF4;
  --parrafo:#FEFCF4;
  --segundo:rgba(254,252,244,.80);
  --ocre:#CBA24E;
  --text:#FEFCF4;  --negro:#FEFCF4;  --body:#FEFCF4;
  --muted:rgba(254,252,244,.80);  --faint:rgba(254,252,244,.70);
  --crema:#FEFCF4;  --papel:#FEFCF4;  --paper:#FEFCF4;
  --oro:#CBA24E;    --wine:#CBA24E;
  --rule:rgba(254,252,244,.24);
  --rule-soft:rgba(254,252,244,.13);
}


/* =====================================================================
   2 · LA PÁGINA
   ===================================================================== */

html{ background:var(--fondo) }
html:has(body.lectura){ background:#FEFCF4 }

body{
  background-color:var(--fondo);
  background-image:none;
  color:var(--parrafo);
}

/* Nada de lo que hay dentro pinta su propio fondo: la superficie es
   una sola. Las excepciones —los paneles— se declaran en la sección 6. */
main, section, article,
.section--alt, .article-section, .article-shell, .article-body,
.article-hero, .mv, .coda, .nucleo, .rise, .spine, .spine__in,
.exam-table, .archive__row, .placement-spot,
.theme-botanica .aside{
  background:transparent;
  background-color:transparent;
}
.duo::before{ display:none; content:none }

/* Una tela finísima sobre todo el sitio, para que el color no quede
   plano. En la portada la trae ya la escena del hero. */
body::after{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
body.lectura::after{ display:none }

body::before{
  background:
    radial-gradient(ellipse 120% 70% at 18% 8%,rgba(255,255,255,.055),transparent 55%),
    radial-gradient(ellipse 130% 95% at 78% 96%,rgba(11,26,21,.20),transparent 60%);
}
body.lectura::before{
  background:
    radial-gradient(ellipse 120% 70% at 18% 8%,rgba(255,255,255,.5),transparent 55%),
    radial-gradient(ellipse 130% 95% at 78% 96%,rgba(31,64,53,.035),transparent 60%);
}

/* --- la letra ------------------------------------------------------- */
h1, h2, h3, h4, h5,
.lead, .standfirst, .article-dek, .aside__q, .coda__say, .coda__lead,
.movement__head, .sigue__t, .foot-statement, .title-accent,
main h1, main h2, main h3, main h4, main h5, main summary,
.faq summary, .u-criteria h3, .u-decisions h3, .i-day h3,
.i-thesis h2, .i-format h3, .c-steps h3, .next-steps h3,
.nivel-meta h3, .nivel-meta h4, .u-about-facts strong,
.language-switch a{
  color:var(--titulo);
}
p, li, dd, dt, td, summary, blockquote, figcaption,
.answer, .score, .article-body p, .article-body li,
.time-lines p, .faq__a, .brief-list li{
  color:var(--parrafo);
}
.kicker, .eyebrow, .foot-kicker, .crumbs, .article-meta,
.sigue__label, .foot-bottom, .foot-lang, .nav-programmes__desc,
small, .foot-contact__heading, .i-crumbs span, .crumbs span{
  color:var(--segundo);
}
th{ color:var(--ocre) }

/* los acentos dentro de un titular mandan sobre el titular */
main h1 .title-accent, main h2 .title-accent, main h3 .title-accent,
main h1 .es, main h2 .es, main h3 .es,
main h1 em, main h2 em, main h3 em,
.theme-botanica .title-accent, .es,
.answer__mark, .c-stat__value, .expiry__year, .level__code,
.archive__label, .blog-margin__no, .brief__reassure,
.c-report__brand, .required, .figure__n, .stop__when,
.spine__no, .door__no, .bar__no, .nivel-badge,
.article-meta dt, .article-nav p, .article-nav span,
.policy-kicker, .privacy-kicker, .foot-place__title{
  color:var(--ocre);
}

/* Sobre fondo oscuro la letra clara «florece» y los trazos finos se
   emborronan. Se compensa con grosor, no con tamaño. */
body:not(.lectura) p,
body:not(.lectura) li,
body:not(.lectura) dd,
body:not(.lectura) td,
body:not(.lectura) .lead,
body:not(.lectura) .standfirst,
body:not(.lectura) .faq__a,
body:not(.lectura) .article-body p{ font-weight:460 }

/* la escala de la casa, que se había encogido a 17px */
.lead{
  font-size:clamp(1.25rem,2.1vw,1.5rem);
  line-height:1.5;
  max-width:44ch;
}
body:has(.hero-botanica) .door p,
body:has(.hero-botanica) .mv p,
body:has(.hero-botanica) .coda p{
  font-size:var(--t-base);
  line-height:1.6;
}
body:has(.hero-botanica) .door p{ max-width:46ch }
body:has(.hero-botanica) .foot-place p{ font-size:var(--t-s) }

/* el kicker es una etiqueta de sección y mide siempre lo mismo */
.kicker, .eyebrow, .foot-kicker{
  font-family:var(--sans);
  font-size:.75rem;
  line-height:1.5;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
}

/* --- filetes -------------------------------------------------------- */
hr,
.faq details, .faq summary,
.door, .aside, .site-foot, .foot-links, .foot-bottom,
.article-nav, .article-nav a, .archive__row,
.time-lines li, .exam-table th, .exam-table td,
.reg li, .spine, .masthead__in, .placement-spot,
table, th, td{
  border-color:var(--rule);
}
.faq details:first-of-type{ border-top:0 }


/* =====================================================================
   3 · LA CABECERA Y EL PIE
   Iguales en las 40 páginas, también en las claras. La marca está en
   todas las pantallas; lo que cambia es solo la zona donde se lee.
   ===================================================================== */

.masthead{
  background:var(--verde);
  background-color:var(--verde);
  color:var(--menu);
  box-shadow:none;
}
.masthead::before,
.masthead::after{ display:none; content:none }
.masthead .mark,
.masthead .mark__name,
.masthead .nav > a,
.masthead .nav__lang,
.masthead .nav-programmes__trigger,
.masthead .navtoggle,
.masthead .navclose{
  color:var(--menu);
  text-shadow:0 1px 2px rgba(11,26,21,.30);
}
.masthead .mark__name,
.masthead .nav > a,
.masthead .nav__lang,
.masthead .nav-programmes__trigger{ font-weight:600 }
.masthead .nav__sep{ background:rgba(255,255,255,.42) }
.masthead .nav > a:hover,
.masthead .nav > a[aria-current="page"],
.masthead .nav__lang:hover,
.masthead .nav-programmes__trigger:hover{
  color:var(--menu);
  border-bottom-color:var(--ocre-pleno);
  background:transparent;
}
.masthead .mark svg{ --marca-hueco:#132A22 }
.navclose{ background:transparent; color:var(--menu) }

/* el desplegable es una tarjeta clara: ahí manda la tinta oscura */
.nav-programmes__menu{
  background:#FEFCF4;
  border-color:rgba(31,64,53,.18);
  box-shadow:0 1rem 2.4rem rgba(11,26,21,.34);
}
.nav-programmes__menu,
.nav-programmes__menu *{ color:#33302E; text-shadow:none; opacity:1 }
.nav-programmes__menu a:hover,
.nav-programmes__menu a[aria-current="page"]{
  background:#EFE4C9; color:#6E5008;
}
.nav-programmes__menu .nav-programmes__desc,
.nav-programmes__menu small,
.nav-programmes__menu span{ color:#5C5754 }
.nav-programmes__menu a::after{ background:#6E5008 }
.skip{ background:#FEFCF4; color:#6E5008 }

/* el menú de móvil: el verde en su escalón más hondo */
@media (max-width:68rem){
  .masthead .nav{ background:#132A22; color:var(--menu) }
  .masthead .nav > a,
  .masthead .nav__lang,
  .masthead .nav-programmes__trigger{ color:var(--menu) }
  .masthead .nav-programmes__menu{ background:transparent; box-shadow:none }
  .masthead .nav-programmes__menu,
  .masthead .nav-programmes__menu *{ color:#FEFCF4 !important; opacity:1 !important }
  .masthead .nav-programmes__menu small{color:rgba(254,252,244,.84) !important}
  .masthead .nav-programmes__menu a:hover,
  .masthead .nav-programmes__menu a[aria-current="page"]{
    background:transparent; color:var(--ocre);
  }
  .nav-programmes__menu a::after{ background:var(--ocre);color:var(--ocre) !important }

  /* El núcleo oculta el panel con visibility, pero el desplegable de
     programas se declaraba visible por su cuenta y sus tres enlaces
     seguían en el orden de tabulación: el foco se iba a y=-707px, fuera
     de la pantalla. Se le ata al mismo estado que el panel. */
  .nav:not([data-open="true"]) a,
  .nav:not([data-open="true"]) button,
  .nav:not([data-open="true"]) .nav-programmes__menu{ visibility:hidden }
  .nav[data-open="true"] a,
  .nav[data-open="true"] button,
  .nav[data-open="true"] .nav-programmes__menu{ visibility:visible }
}

/* --- el pie --------------------------------------------------------- */
.site-foot{
  background:#132A22;
  background-color:#132A22;
  background-image:none;
  border-top:1px solid rgba(254,252,244,.22);
  color:#FEFCF4;
}
.site-foot p, .site-foot li, .site-foot a{ color:#FEFCF4 }
.site-foot .foot-statement{ color:#FEFCF4 }
.site-foot svg, .foot-icon, .site-foot .foot-kicker,
.site-foot .foot-place__title{ color:var(--ocre) }

/* en las páginas claras el pie sigue en verde: es la marca */
body.lectura .masthead{
  background:var(--verde);
  background-color:var(--verde);
  background-image:none;
  color:#FFFFFF;
}
body.lectura .masthead .mark,
body.lectura .masthead .mark__name,
body.lectura .masthead .nav > a,
body.lectura .masthead .nav__lang,
body.lectura .masthead .nav-programmes__trigger,
body.lectura .masthead .navtoggle{ color:#FFFFFF }

body.lectura .site-foot{
  background:#132A22;
  background-color:#132A22;
  background-image:none;
  color:#FEFCF4;
  border-top:0;
  margin:0;
}
body.lectura .site-foot h2, body.lectura .site-foot h3,
body.lectura .site-foot p, body.lectura .site-foot li,
body.lectura .site-foot a, body.lectura .site-foot .foot-statement{ color:#FEFCF4 }
body.lectura .site-foot .foot-kicker,
body.lectura .site-foot .foot-place__title,
body.lectura .site-foot svg,
body.lectura .site-foot .foot-icon,
body.lectura .site-foot .foot-links a{ color:#CBA24E }
body.lectura .site-foot .foot-links a{ border-bottom-color:rgba(203,162,78,.4) }
body.lectura .site-foot,
body.lectura .site-foot .foot-links,
body.lectura .site-foot .foot-bottom{ border-color:rgba(254,252,244,.26) }
body.lectura .site-foot a:hover{ color:#FEFCF4; border-bottom-color:#FEFCF4 }


/* =====================================================================
   4 · LA PORTADA, EN VERDE
   =====================================================================
   Es la única página del sitio con el fondo en color. Un color que
   está en las 27 páginas es una pared; un color que está en una es una
   declaración. El hero es el de siempre: no se ha movido una medida.
   Solo se repintan los degradados, que estaban escritos a mano con el
   verde viejo y si no seguirían pintándolo encima del nuevo.
   ===================================================================== */

/* El hero NO lleva fondo propio, y es a propósito.
   Sus tres paños de textura van en mix-blend-mode:soft-light dentro de
   un contenedor con isolation:isolate. Si el hero tiene fondo opaco,
   esas capas se mezclan contra él y la escena se oscurece: medido, el
   verde pasaba de (35,58,50) a (23,51,42). Sin fondo, se mezclan contra
   el verde del body y sale la luz que tiene que salir. */
.hero-botanica{ background:transparent }
.hero-botanica__floor::after{
  background:linear-gradient(to bottom,
    rgba(31,64,53,1),rgba(31,64,53,.92) 8%,rgba(31,64,53,0) 34%);
}
/* el paño de sombra: el mismo verde en su escalón hondo, nunca negro */
.hero-botanica__veil{
  background:
    linear-gradient(97deg,rgba(19,42,34,.62),rgba(19,42,34,.4) 24%,
                    rgba(19,42,34,.08) 52%,transparent 66%),
    linear-gradient(to top,transparent 0 13%,rgba(19,42,34,.48) 15%,
                    rgba(19,42,34,.25) 23%,transparent 38%);
}
.hero-botanica__vignette{
  background:radial-gradient(120% 90% at 50% 42%,transparent 40%,
    rgba(11,26,21,.16) 68%,rgba(11,26,21,.38) 100%);
}
.hero-botanica__frame{
  border-color:var(--ocre-pleno);
  box-shadow:0 1.8rem 4.4rem rgba(11,26,21,.45),
             0 0 0 .18rem var(--ocre-o),
             inset 0 1.5rem 2.8rem rgba(19,42,34,.14);
}
.hero-botanica::after{
  background:linear-gradient(to bottom,rgba(19,42,34,.16),rgba(19,42,34,0));
}
.hero-botanica__bud circle[fill="#06291D"]{ fill:#132A22 }
.hero-botanica__line{ border-top-color:var(--ocre-pleno) }
.hero-botanica__line::before,
.hero-botanica__line::after{ background:var(--ocre-pleno) }
.hero-botanica__line::after{ box-shadow:0 0 0 1px var(--crema-pura) }
.hero-botanica__line span{ font-weight:700 }

/* --- la cabecera es el mismo plano que el hero ----------------------
   El hero no es verde plano: encima del color lleva tres paños de
   textura en soft-light y un velo en diagonal que oscurece la
   izquierda. La cabecera no llevaba nada de eso, y por eso se veía la
   costura. Aquí se pinta con el resultado EXACTO de esas capas, medido
   píxel a píxel en la primera fila del hero, con los topes en tanto
   por ciento para que aguante a cualquier ancho. Al hacer scroll el
   hero ya no está debajo: entonces vuelve al verde plano. */
/* Va con !important porque hero-botanica.css declara
   «background-image:none !important» sobre esta misma cabecera, y sus
   pseudoelementos intentan la textura con mix-blend-mode sobre un fondo
   ya opaco, que es lo que oscurecía en vez de igualar. */
.home-botanica .masthead::before,
.home-botanica .masthead::after{ display:none !important; content:none !important }
.home-botanica .masthead{
  background-color:var(--verde) !important;
  background-image:
    repeating-linear-gradient(0deg,rgba(254,252,244,.032) 0 1px,rgba(254,252,244,0) 1px 4px),
    repeating-linear-gradient(90deg,rgba(11,26,21,.030) 0 1px,rgba(11,26,21,0) 1px 5px),
    linear-gradient(90deg,
      rgb(34,58,50)   0%,
      rgb(39,64,56)  10%,
      rgb(44,69,61)  20%,
      rgb(48,73,64)  30%,
      rgb(50,75,66)  40%,
      rgb(51,76,66)  55%,
      rgb(51,78,69)  75%,
      rgb(50,77,67) 100%) !important;
  box-shadow:none !important;
}
.home-botanica .masthead__in{ border-bottom-color:transparent !important }
body.home-botanica[data-scrolled="true"] .masthead{
  background-image:none !important;
  background-color:var(--verde) !important;
  box-shadow:0 .65rem 1.8rem rgba(11,26,21,.32) !important;
}

/* --- el índice de servicios ------------------------------------------
   Tres puertas, tres filas, cada una a su página. Debajo ya no se
   repiten: quien quiera más entra. */
body:has(.hero-botanica) .mv h2:not(.kicker),
body:has(.hero-botanica) .coda h2:not(.kicker){
  font-size:clamp(2.45rem,5.1vw,3.9rem);
  line-height:1.015;
  letter-spacing:-.032em;
  max-width:15ch;
}
body:has(.hero-botanica) .movement__head{
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(1.4rem,4vw,4.5rem);
  align-items:end;
}
/* salvo cuando la columna derecha es una lista larga: entonces el
   titular caía hasta el fondo, descolgado de la primera pregunta */
body:has(.hero-botanica) .movement__head--flush,
.movement__head:has(.faq),
.movement__head--flush{ align-items:start }
.movement__head:has(.faq) > h2{ padding-top:.15em }

body:has(.hero-botanica) .door{
  grid-template-columns:minmax(0,1fr);
  padding-inline:clamp(.75rem,2vw,1.5rem);
  margin-inline:calc(-1 * clamp(.75rem,2vw,1.5rem));
  border-top:1px solid var(--rule-soft);
}
body:has(.hero-botanica) .door:last-of-type{ border-bottom:1px solid var(--rule-soft) }
body:has(.hero-botanica) .door__in{
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:.35rem clamp(2rem,5vw,5.5rem);
  align-items:start;
  padding-block:clamp(1.9rem,3.8vw,3rem);
}
body:has(.hero-botanica) .door h3{
  font-family:var(--serif);
  font-style:normal;
  font-weight:400;
  font-size:clamp(1.8rem,3.45vw,2.75rem);
  line-height:1.04;
  letter-spacing:-.024em;
  max-width:15ch;
}

/* El puntero sobre una puerta.
   Antes pintaba un rectángulo pálido de 880 × 260 px sobre una fila
   casi vacía: un olivo sucio que no está en la paleta, con los bordes
   cortados en el aire. Llamaba la atención sobre el hueco, no sobre el
   contenido.
   Ahora no se pinta ninguna superficie. Se mueve lo que ya significa
   acción: la semilla de oro crece, la raya de arriba se enciende y la
   flecha avanza. Nada cambia de color en masa. */
.door{
  transition:border-top-color .35s var(--e,ease);
}
body:has(.hero-botanica) .door:hover,
body:has(.hero-botanica) .door:focus-within{
  background-color:transparent;
  border-top-color:var(--ocre-pleno);
}
.door__in::before{
  background:var(--ocre-pleno);
  transition:transform .35s var(--e,ease), box-shadow .35s var(--e,ease);
}
.door:hover .door__in::before,
.door:focus-within .door__in::before{
  transform:scale(1.45);
  box-shadow:0 0 0 5px rgba(181,138,58,.18);
}
.door .tlink::after{
  display:inline-block;
  transition:transform .35s var(--e,ease);
}
.door:hover .tlink::after,
.door:focus-within .tlink::after{ transform:translateX(.45rem) }
.door:hover .tlink,
.door:focus-within .tlink{ border-bottom-color:var(--ocre) }
@media (prefers-reduced-motion:reduce){
  .door__in::before, .door .tlink::after, .door{ transition:none }
  .door:hover .door__in::before{ transform:none }
}

/* la tercera puerta lleva fuera, al Campus, que es donde se compra.
   Como enlace de texto se leía igual que las otras dos. */
.door[href*="campus."] .tlink{
  display:inline-block;
  width:max-content; max-width:100%;
  justify-self:start; align-self:start;
  margin-top:1.15rem;
  padding:.72rem 1.35rem;
  gap:0;
  background:var(--ocre-pleno);
  color:var(--ocre-tinta);
  border:1px solid transparent;
  font-family:var(--sans);
  font-size:.8125rem;
  font-weight:650;
  letter-spacing:.11em;
  text-transform:uppercase;
  transition:background-color .3s var(--e,ease);
}
.door[href*="campus."]:hover .tlink,
.door[href*="campus."]:focus-within .tlink{ background:#C89B45 }
.door[href*="campus."] .tlink::after{ display:none; content:none }

/* --- las colaboraciones: nueve filas en una línea corrida ----------- */
body:has(.hero-botanica) .reg{ display:block; max-width:58rem }
body:has(.hero-botanica) .reg li{
  display:inline; grid-template-columns:none; border:0; padding:0;
}
body:has(.hero-botanica) .reg li + li::before{
  content:"·"; display:inline;
  color:var(--ocre); padding:0 .62rem; font-weight:700;
}
body:has(.hero-botanica) .reg b{
  font-family:var(--serif); font-weight:400; color:var(--titulo);
  font-size:clamp(1.05rem,1.55vw,1.28rem); line-height:1.9;
}

/* un solo tallo por eje: dos en la misma vertical se leen como uno roto */
body:has(.hero-botanica) .mv:has(.door) > .wrap::before{ display:none }


/* =====================================================================
   5 · LAS INTERIORES, EN CREMA
   =====================================================================
   Dieciocho de las cuarenta páginas pasan de 900 palabras y los
   artículos llegan a 2.150. Sobre fondo oscuro eso se lee peor, y a
   quien tiene astigmatismo —entre un tercio y la mitad de la gente— le
   cuesta de verdad. Así que se dan la vuelta: mismos colores, mismo
   11,09:1, del derecho.
   ===================================================================== */

body.lectura{ background-color:#FEFCF4; color:#1F4035 }
body.lectura p, body.lectura li, body.lectura dd,
body.lectura td, body.lectura .lead{ font-weight:420 }


/* =====================================================================
   6 · EL RITMO DE LAS INTERIORES
   =====================================================================
   Una página larga toda en crema no se deja escanear: no hay dónde
   apoyar la vista. Dos apoyos por página, y solo dos:

     · UN panel de verde en el giro del argumento — la sección que
       responde a la objeción o suelta el dato que cambia la decisión.
       Ya venían marcadas en el HTML con .onwine: el diseño original
       las trataba como banda oscura.
     · EL CIERRE, también en verde, pegado al pie, porque la llamada y
       el «dónde encontrarnos» son la misma cosa.

   Y una excepción a propósito: la prueba de nivel se repite en tres
   páginas. Si también fuera verde habría tres paneles y ninguno
   mandaría. Se queda en claro con un velo de oro.
   ===================================================================== */

body.lectura .onwine,
body.lectura .score,
body.lectura .practice,
body.lectura .mv--wine,
body.lectura .fund-admin,
body.lectura .u-director,
body.lectura .next,
body.lectura .duo,
body.lectura .aside,
body.lectura .coda,
body.lectura .fund-coda,
body.lectura .article-cta,
body.lectura #preparation{
  background:var(--verde);
  background-image:none;
  color:#FEFCF4;
  border-color:rgba(254,252,244,.24);
  padding-block:clamp(3.5rem,7vw,6rem);
  margin-block:clamp(3rem,6vw,5.5rem);
  position:relative;
}
/* Estas tres bandas son secciones de primer nivel. Ya ocupan todo el
   viewport; el ancho y el margen negativos duplicaban el canal lateral
   de su .wrap interior y desalineaban el contenido respecto al resto. */
body.lectura .u-director,
body.lectura .fund-admin,
body.lectura .next{
  margin-inline:0;
  padding-inline:0;
  width:auto;
  max-width:none;
}
/* una línea de oro finísima marca dónde empieza el panel */
body.lectura .onwine::before,
body.lectura .mv--wine::before,
body.lectura .fund-admin::before,
body.lectura .u-director::before,
body.lectura .score::before,
body.lectura .practice::before,
body.lectura #preparation::before{
  content:""; display:block;
  position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--ocre-pleno); z-index:2;
}
/* El pie lleva también la clase .onwine, pero no es un panel: si se
   le aplican las medidas de panel se cuela una franja de crema de 77px
   entre el cierre y el pie, y la página entera crece 154px. */
body.lectura .site-foot{
  margin:0;
  background:#132A22;
  background-color:#132A22;
  background-image:none;
}
body.lectura .site-foot::before{ display:none; content:none }

/* el cierre y el pie se juntan en un solo bloque, separados por oro */
body.lectura .coda,
body.lectura .fund-coda,
body.lectura .article-cta{
  margin-bottom:0;
  padding-bottom:clamp(3rem,6vw,5rem);
}
body.lectura .coda::after,
body.lectura .fund-coda::after,
body.lectura .article-cta::after{
  content:""; display:block;
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:rgba(203,162,78,.45);
}
body.lectura main:not(:has(.coda)):not(:has(.fund-coda)):not(:has(.article-cta)) + .site-foot{
  border-top:2px solid var(--ocre-pleno);
}

/* la prueba de nivel: una tarjeta de oferta, no un panel */
body.lectura .placement-spot{
  background:rgba(181,138,58,.08);
  border-top:2px solid var(--ocre-pleno);
  border-bottom:1px solid rgba(181,138,58,.28);
  border-left:0; border-right:0;
}
body.lectura .placement-spot h2,
body.lectura .placement-spot p{ color:#1F4035 }
body.lectura .placement-spot .kicker{ color:#8A6318 }


/* =====================================================================
   7 · COMPONENTES
   ===================================================================== */

/* --- botones ---------------------------------------------------------
   El relleno es siempre el mismo, pero el filo salía de tres variables
   distintas según la página: tres botones diferentes con el mismo
   color de fondo. Perseguir el filo página por página es una carrera
   que no se gana, así que en un botón lleno el filo es transparente:
   el fondo se pinta por debajo del borde, el botón se ve macizo y ya
   no hay dos colores que puedan discrepar. */
.btn, .btn--onwine, .foot-cta, .hero-botanica__cta,
.btn-catalogo, button[type="submit"], [type="submit"].btn, #totop,
.theme-botanica .btn:not(.btn--ghost),
.theme-botanica .site-foot .foot-cta,
.sec--aula-virtual .btn{
  background:var(--ocre-pleno);
  border:1px solid transparent;
  color:var(--ocre-tinta);
}
.btn span, .foot-cta span,
.theme-botanica .btn span, .theme-botanica .foot-cta span{ color:var(--ocre-tinta) }
.btn:hover, .btn--onwine:hover, .foot-cta:hover, .hero-botanica__cta:hover,
.btn-catalogo:hover, #totop:hover,
.theme-botanica .btn:hover,
.theme-botanica .site-foot .foot-cta:hover,
.sec--aula-virtual .btn:hover{
  background:#C89B45; border-color:transparent; color:var(--ocre-tinta);
}

/* el de contorno: ahí el filo ES el botón */
.btn--ghost{
  background:transparent;
  border-color:currentColor;
  color:var(--ocre);
}
.btn--ghost:hover{ background:var(--ocre-pleno); color:var(--ocre-tinta); border-color:transparent }

/* sobre papel el botón principal es verde con letra crema: el mismo
   par de colores del resto de la web, del revés */
body.lectura .btn, body.lectura .btn--onwine,
body.lectura button[type="submit"], body.lectura [type="submit"].btn,
body.lectura #totop{
  background:var(--verde); color:#FEFCF4; border-color:transparent;
}
body.lectura .btn span{ color:#FEFCF4 }
body.lectura .btn:hover, body.lectura .btn--onwine:hover, body.lectura #totop:hover{
  background:#132A22; color:#FEFCF4;
}
body.lectura .btn--ghost{ background:transparent; border-color:#1F4035; color:#1F4035 }
body.lectura .btn--ghost:hover{ background:var(--verde); color:#FEFCF4 }

/* dentro de un panel verde vuelve el oro */
body.lectura .onwine .btn, body.lectura .score .btn,
body.lectura .practice .btn, body.lectura .mv--wine .btn,
body.lectura .fund-admin .btn, body.lectura .next .btn,
body.lectura .coda .btn, body.lectura .fund-coda .btn,
body.lectura .article-cta .btn, body.lectura .duo .btn,
body.lectura .site-foot .foot-cta{
  background:var(--ocre-pleno); color:var(--ocre-tinta); border-color:transparent;
}
body.lectura .onwine .btn *, body.lectura .coda .btn *,
body.lectura .fund-coda .btn *, body.lectura .article-cta .btn *,
body.lectura .mv--wine .btn *,
body.lectura .site-foot .foot-cta,
body.lectura .site-foot .foot-cta *{ color:var(--ocre-tinta) }
body.lectura .onwine .btn:hover, body.lectura .coda .btn:hover,
body.lectura .fund-coda .btn:hover, body.lectura .article-cta .btn:hover,
body.lectura .mv--wine .btn:hover{ background:#C89B45 }

/* --- enlaces de texto ------------------------------------------------ */
.tlink, .article-body a, .foot-links a, .crumbs a,
.i-crumbs a, .u-crumbs a, .c-crumbs a,
.theme-botanica .tlink{
  color:var(--ocre);
  border-bottom-color:color-mix(in srgb, var(--ocre) 45%, transparent);
  background:transparent;
}
.tlink:hover, .article-body a:hover, .foot-links a:hover, .crumbs a:hover{
  color:color-mix(in srgb, var(--ocre) 82%, #FEFCF4);
  border-bottom-color:currentColor;
  background:transparent;
}
body.lectura .tlink:hover,
body.lectura .article-body a:hover,
body.lectura .crumbs a:hover{ color:#6E5008; border-bottom-color:#6E5008 }

/* --- marcas gráficas -------------------------------------------------- */
/* el separador de la lista de clientes es un carácter, no una marca:
   si se le pinta el fondo sale un rectángulo de oro macizo */
.corr::after, .onwine .corr::after,
.mv > .wrap::after, .door__in::before,
.nivel-badge::before, .bar__fill{ background:var(--ocre-pleno) }
.stop__tick, .onwine .stop__tick{ background:var(--segundo) }
.c-meter, .i-meter{ background:rgba(254,252,244,.18) }
body.lectura .c-meter, body.lectura .i-meter{ background:rgba(31,64,53,.14) }
.c-meter span, .i-meter span{ background:var(--ocre-pleno) }
.faq summary::after, .faq summary .faq__mark{ color:var(--ocre) }

/* --- formularios -----------------------------------------------------
   Sobre papel crema bastaba una raya fina debajo de cada campo. Sobre
   el verde esa raya desaparece y el formulario parece vacío: no se ve
   dónde hay que escribir. */
.field input, .field select, .field textarea,
form input[type="text"], form input[type="email"], form input[type="tel"],
form input[type="number"], form input[type="date"], form select, form textarea{
  background:rgba(19,42,34,.55);
  border:1px solid rgba(254,252,244,.28);
  border-radius:.25rem;
  color:var(--titulo);
  padding:.7rem .85rem;
}
.field label{ color:var(--segundo) }
.field .hint{ color:var(--faint) }
.field input::placeholder, .field textarea::placeholder{ color:rgba(254,252,244,.5) }
.field input:hover, .field select:hover, .field textarea:hover{
  border-color:rgba(254,252,244,.45);
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--ocre-pleno);
  background:rgba(19,42,34,.8);
  outline:none;
}
.field select option{ background:#132A22; color:#FEFCF4 }
input[type="checkbox"], input[type="radio"]{ accent-color:var(--ocre-pleno) }

body.lectura .field input, body.lectura .field select, body.lectura .field textarea{
  background:#FFFFFF;
  border-color:rgba(31,64,53,.32);
  color:#1F4035;
}
body.lectura .field label{ color:#3A5A4E }
body.lectura .field input:focus,
body.lectura .field textarea:focus{
  border-color:#8A6318; background:#FFFFFF;
  box-shadow:0 0 0 2px rgba(138,99,24,.35);
}

/* el campo trampa antispam sigue fuera de la vista */
.hp-field, .hp-field input{
  position:absolute; left:-10000px;
  width:1px; height:1px; overflow:hidden; opacity:0;
  background:transparent; border:0;
}

/* --- tarjetas --------------------------------------------------------- */
.i-record, .brief, .opt label, .level, .c-report, .answer{
  background:rgba(19,42,34,.45);
  border-color:var(--rule);
}
body.lectura .i-record, body.lectura .brief, body.lectura .opt label,
body.lectura .level, body.lectura .c-report, body.lectura .answer{
  background:#FFFFFF;
  border:1px solid rgba(31,64,53,.18);
  color:#1F4035;
}
body.lectura .brief *, body.lectura .i-record *, body.lectura .level *,
body.lectura .opt label *, body.lectura .answer *{ color:#1F4035 }
body.lectura .brief .kicker, body.lectura .brief__label,
body.lectura .i-record .kicker, body.lectura .level .kicker,
body.lectura .brief em, body.lectura .i-record em{ color:#8A6318 }
.opt label:hover, .opt input:checked + label{
  background:rgba(19,42,34,.75); border-color:var(--ocre-pleno);
}
body.lectura .opt label:hover, body.lectura .opt input:checked + label{
  background:rgba(181,138,58,.10); border-color:var(--ocre-pleno);
}
.checkline input{ background:#FEFCF4; border-color:var(--rule) }

/* --- pastillas de nivel y modos de aula ------------------------------- */
.sec--aula-virtual .course__modes li{
  background:var(--ocre-pleno); color:var(--ocre-tinta); border-color:transparent;
}
.sec--aula-virtual .course__modes li:hover{
  background:transparent; color:var(--ocre); border-color:var(--ocre-pleno);
}


/* =====================================================================
   8 · LAS PÁGINAS QUE TRAEN SU HOJA DENTRO
   =====================================================================
   Fundae, Instituciones, los dos tests, contacto y los artículos del
   blog llevan estilos escritos DENTRO del HTML, y por tanto se aplican
   después de esta hoja. A esas solo se les gana con !important.

   Todo lo que necesita fuerza bruta vive aquí y solo aquí. Si algún
   día se limpian esos <style> del HTML, esta sección entera se borra y
   no pasa nada.
   ===================================================================== */

/* el fondo de la página, allí donde la hoja de dentro lo repinta */
html, body, body.institutions-clean, body.test-clean{ background-color:var(--fondo) !important }
body.lectura, html:has(body.lectura){ background-color:#FEFCF4 !important }

/* las bandas de papel de Instituciones */
body.institutions-clean .i-hero,
body.institutions-clean #formats,
body.institutions-clean #preparation,
body.institutions-clean #grouping,
body.institutions-clean #questions,
.fund-admin::before,
.placement-spot,
.section--alt{
  background:transparent !important;
  background-image:none !important;
}
body.lectura #preparation{
  background:var(--verde) !important;
  color:#FEFCF4 !important;
}
body.lectura #preparation *{ color:#FEFCF4 !important; border-color:rgba(254,252,244,.24) !important }
body.lectura #preparation .kicker,
body.lectura #preparation .spine__no,
body.lectura #preparation em,
body.lectura #preparation .tlink{ color:#CBA24E !important }
body.lectura .placement-spot{
  background:rgba(181,138,58,.08) !important;
  border-top:2px solid var(--ocre-pleno) !important;
}

/* toda la letra de dentro de un panel, y sus acentos */
body.lectura .onwine *, body.lectura .score *, body.lectura .practice *,
body.lectura .mv--wine *, body.lectura .fund-admin *,
body.lectura .u-director *, body.lectura .next *, body.lectura .duo *,
body.lectura .aside *, body.lectura .coda *, body.lectura .fund-coda *,
body.lectura .article-cta *{
  color:#FEFCF4 !important;
  border-color:rgba(254,252,244,.24) !important;
}
/* y menos los acentos del pie: lleva también la clase .onwine, así que
   la regla de arriba le forzaba TODO a crema y los enlaces perdían su
   oro y su respuesta al puntero */
body.lectura .site-foot .foot-links a,
body.lectura .site-foot .foot-bottom a,
body.lectura .site-foot .foot-kicker,
body.lectura .site-foot .foot-place__title,
body.lectura .site-foot svg,
body.lectura .site-foot .foot-icon{ color:#CBA24E !important }
body.lectura .site-foot .foot-links a{
  border-bottom-color:rgba(203,162,78,.4) !important;
}
body.lectura .site-foot .foot-links a:hover,
body.lectura .site-foot .foot-bottom a:hover{
  color:#FEFCF4 !important;
  border-bottom-color:#FEFCF4 !important;
}

/* menos los botones: su filo es su propio relleno, y con un filo de
   crema al 24% vuelven a ser dos colores discutiendo */
body.lectura .onwine .btn, body.lectura .score .btn,
body.lectura .practice .btn, body.lectura .mv--wine .btn,
body.lectura .fund-admin .btn, body.lectura .next .btn,
body.lectura .coda .btn, body.lectura .fund-coda .btn,
body.lectura .article-cta .btn, body.lectura .duo .btn,
body.lectura .site-foot .foot-cta,
body.lectura .btn, body.lectura .foot-cta,
body.lectura button[type="submit"]{
  border-color:transparent !important;
}
body.lectura .onwine .kicker, body.lectura .onwine .eyebrow,
body.lectura .onwine .es, body.lectura .onwine em, body.lectura .onwine i,
body.lectura .onwine .title-accent, body.lectura .onwine .tlink,
body.lectura .onwine .spine__no, body.lectura .onwine .figure__n,
body.lectura .score .kicker, body.lectura .score em, body.lectura .score .tlink,
body.lectura .practice .kicker, body.lectura .practice em,
body.lectura .mv--wine .kicker, body.lectura .mv--wine .es,
body.lectura .mv--wine em, body.lectura .mv--wine .tlink,
body.lectura .mv--wine .title-accent,
body.lectura .fund-admin .kicker, body.lectura .fund-admin .tlink,
body.lectura .u-director .kicker, body.lectura .u-director dt,
body.lectura .next .kicker, body.lectura .aside .aside__q,
body.lectura .coda .kicker, body.lectura .coda em, body.lectura .coda i,
body.lectura .fund-coda .kicker, body.lectura .fund-coda em,
body.lectura .article-cta .kicker, body.lectura .article-cta em{
  color:#CBA24E !important;
}
body.lectura .onwine .btn, body.lectura .onwine .btn *,
body.lectura .coda .btn, body.lectura .coda .btn *,
body.lectura .fund-coda .btn, body.lectura .fund-coda .btn *,
body.lectura .article-cta .btn, body.lectura .article-cta .btn *,
body.lectura .mv--wine .btn, body.lectura .mv--wine .btn *,
body.lectura .site-foot .foot-cta, body.lectura .site-foot .foot-cta *{
  color:var(--ocre-tinta) !important;
}

/* los botones de esas páginas pedían relleno de papel */
.mv--wine .btn, .feature .btn, .practice .btn,
.onwine .btn:not(.btn--ghost), .fund-admin .btn, .i-record .btn,
body.institutions-clean .btn:not(.btn--ghost),
a.btn.btn-catalogo,
body:has(.hero-botanica) #s05 .btn{
  background:var(--ocre-pleno) !important;
  border-color:transparent !important;
  color:var(--ocre-tinta) !important;
}
body.lectura .btn:not(.btn--ghost):not(.foot-cta):not([class*="onwine"]){
  background:var(--verde) !important; color:#FEFCF4 !important;
}

/* los formularios de contacto llevan su propia hoja */
.c-field input, .c-field select, .c-field textarea,
.contact-form .c-field input,
.contact-form .c-field select,
.contact-form .c-field textarea{
  background:rgba(19,42,34,.55) !important;
  border:1px solid rgba(254,252,244,.28) !important;
  border-radius:.25rem !important;
  color:var(--titulo) !important;
  padding:.7rem .85rem !important;
}
.c-field label, .checkline label{ color:var(--segundo) !important }
.c-field__hint, .form-status{ color:var(--parrafo) !important }
.c-field input:hover, .c-field select:hover, .c-field textarea:hover{
  border-color:rgba(254,252,244,.45) !important;
}
.c-field input:focus, .c-field select:focus, .c-field textarea:focus{
  background:rgba(19,42,34,.8) !important;
  border-color:var(--ocre-pleno) !important;
  box-shadow:0 0 0 2px rgba(181,138,58,.55) !important;
}
.c-field input:user-invalid, .c-field select:user-invalid, .c-field textarea:user-invalid{
  border-color:#E8907A !important; box-shadow:none !important;
}
body.lectura .c-field input, body.lectura .c-field select, body.lectura .c-field textarea{
  background:#FFFFFF !important;
  border-color:rgba(31,64,53,.32) !important;
  color:#1F4035 !important;
}
body.lectura .c-field label{ color:#3A5A4E !important }
body.lectura .c-field input:focus, body.lectura .c-field textarea:focus{
  border-color:#8A6318 !important;
  box-shadow:0 0 0 2px rgba(138,99,24,.35) !important;
}

/* Las hojas internas pintan estas piezas con var(--paper), que en
   modo lectura es la TINTA, no el papel. Salían en verde sobre verde o
   en gris sucio. Van con nombre completo y fuerza. */
.contact-hero{
  background:transparent !important;
  background-image:none !important;
}
.i-record, .brief, .level, .c-report, .answer,
.opt label, .checkline input,
.field input[type="text"], .field input[type="email"]{
  background:rgba(19,42,34,.45) !important;
  border-color:var(--rule) !important;
}
.checkline input{ background:#FEFCF4 !important }
.field input[type="text"], .field input[type="email"]{
  background:rgba(19,42,34,.55) !important;
  border:1px solid rgba(254,252,244,.28) !important;
  color:var(--titulo) !important;
}
.field input:focus{ background:rgba(19,42,34,.8) !important; border-color:var(--ocre-pleno) !important }
.opt label:hover, .opt input:checked + label{
  background:rgba(19,42,34,.75) !important; border-color:var(--ocre-pleno) !important;
}

body.lectura .i-record, body.lectura .brief, body.lectura .level,
body.lectura .c-report, body.lectura .answer, body.lectura .opt label,
body.lectura .field input[type="text"], body.lectura .field input[type="email"]{
  background:#FFFFFF !important;
  border:1px solid rgba(31,64,53,.18) !important;
  color:#1F4035 !important;
}
body.lectura .brief *, body.lectura .i-record *, body.lectura .level *,
body.lectura .opt label *, body.lectura .answer *{ color:#1F4035 !important }
body.lectura .brief .kicker, body.lectura .brief__label,
body.lectura .i-record .kicker, body.lectura .level .kicker,
body.lectura .brief em, body.lectura .i-record em{ color:#8A6318 !important }
body.lectura .opt label:hover, body.lectura .opt input:checked + label{
  background:rgba(181,138,58,.10) !important; border-color:var(--ocre-pleno) !important;
}
body.lectura .field input:focus{
  background:#FFFFFF !important; border-color:#8A6318 !important;
  box-shadow:0 0 0 2px rgba(138,99,24,.35) !important;
}
.c-meter, .i-meter{ background:rgba(254,252,244,.18) !important }
body.lectura .c-meter, body.lectura .i-meter{ background:rgba(31,64,53,.14) !important }
.c-meter span, .i-meter span{ background:var(--ocre-pleno) !important }

/* La entradilla y la etiqueta de sección. Las hojas internas bajan la
   entradilla a 20px —el encogimiento que ya se corrigió una vez— y
   sueltan la interlínea del kicker. Las dos son piezas de identidad y
   miden lo mismo en las 40 páginas. */
.kicker, .eyebrow, .foot-kicker,
.article-section .kicker, .u-section .kicker, .fund-hero .kicker,
.practice .kicker, .score .kicker, .calculation .kicker,
.placement-spot .kicker, .i-hero .kicker{
  font-family:var(--sans) !important;
  font-size:.75rem !important;
  line-height:1.5 !important;
  font-weight:600 !important;
  letter-spacing:.15em !important;
  text-transform:uppercase !important;
}
.lead, .movement__head .lead{
  font-size:clamp(1.25rem,2.1vw,1.5rem) !important;
  line-height:1.5;
  max-width:44ch;
}

/* la barra de avance del test */
.bar{ background:#132A22 !important; border-bottom:1px solid var(--rule) !important }
body.lectura .bar{ background:#FEFCF4 !important; border-bottom-color:rgba(31,64,53,.18) !important }
body.lectura .bar *{ color:#1F4035 !important }
.bar__fill{ background:var(--ocre-pleno) !important }

/* La portada también trae su <style> dentro, y ahí «.coda em» va en
   var(--wine-deep): #132A22 sobre el verde son 1,33:1, invisible. Es el
   remate del cierre de la página —«en 48 horas.»—, lo último que se
   puede perder. */
.coda em, .coda i,
.coda__say em, .coda__say i{ color:var(--ocre) !important; font-style:italic }
.coda__lead{ color:var(--parrafo) !important }

/* las etiquetas pequeñas de las fichas del blog */
.article-meta dt, .article-nav p, .article-nav span,
.sigue__label, .blog-margin__no,
.article-figure figcaption a, .article-body cite{
  color:var(--ocre) !important;
}

/* el oro viejo (#9A6712) estaba calculado sobre papel crema */
:root, body, .theme-botanica, .onwine, .site-foot{ --oro:var(--ocre) }


/* =====================================================================
   9 · ARREGLOS DE MAQUETA
   Tres fallos que venían en el original, en los dos idiomas.
   ===================================================================== */

/* · El panel de práctica del CCSE. Rejilla «minmax(0,1fr) auto» con un
     botón de 56 caracteres y white-space:nowrap: la columna del botón
     reclamaba 772px, la del texto se quedaba en 0 y el titular caía en
     una tira vertical de una letra por línea, con 8.688px de alto. La
     página medía 20.113px. */
.practice{
  grid-template-columns:minmax(0,1fr) !important;
  gap:1.5rem !important;
  align-items:start !important;
}
.practice .btn{
  white-space:normal !important;
  justify-self:start !important;
  max-width:44ch;
  text-align:left;
}
.practice h2{ max-width:22ch !important }
.practice p{ max-width:60ch !important }

/* · La lista .facts. Resto de la numeración decorativa que se quitó del
     HTML: la rejilla seguía reservando 3rem para un número que ya no
     existe, y el titular caía dentro de esos 48px, encima del texto. */
ol.facts li, ol.facts > li{
  grid-template-columns:minmax(11rem,.72fr) minmax(0,1.28fr) !important;
  gap:.35rem clamp(1.5rem,3vw,3rem) !important;
  align-items:start !important;
}
.facts li > h3{ max-width:22ch }
@media (max-width:52rem){
  ol.facts li, ol.facts > li{ grid-template-columns:minmax(0,1fr) !important }
}

/* · La tarjeta de canales directos mide 216px y el titular iba a 45px:
     «WhatsApp» no se puede partir y se salía 40px por la derecha. */
.direct h2, .contact-hero .direct h2{
  font-size:clamp(1.35rem,2vw,1.85rem) !important;
  line-height:1.12 !important;
  max-width:none !important;
  overflow-wrap:break-word;
  hyphens:auto;
}

/* · Las migas de instituciones llevaban opacity:.52 FIJA —no era un
     fundido de entrada— y sobre crema daban 2,43:1. */
.i-crumbs span, .crumbs span, .u-crumbs span, .c-crumbs span{
  opacity:1 !important;
  color:var(--segundo) !important;
}
.crumbs, .i-crumbs, .u-crumbs, .c-crumbs{ opacity:1 !important }


/* =====================================================================
   10 · ACCESIBILIDAD
   ===================================================================== */

:focus-visible{ outline:2px solid var(--ocre-pleno); outline-offset:2px }
body.lectura :focus-visible{ outline-color:#8A6318 }
::selection{ background:rgba(181,138,58,.3) }

/* Zonas de toque. Medidas: enlaces del pie a 20px de alto, conmutador
   de idioma a 23px de ancho, miga «Inicio» a 51×20 y el «EN» del test
   a 20×29. El mínimo son 24×24. Se agranda el área sensible sin mover
   el texto: relleno vertical y margen negativo que lo compensa. Los
   enlaces dentro de una frase quedan exentos por la propia norma. */
.foot-links a, .foot-bottom a, .foot-lang, .foot-lang a,
.nav__lang, .masthead .nav__lang,
.crumbs a, .i-crumbs a, .u-crumbs a, .c-crumbs a,
.language-switch a, .bar a{
  display:inline-block;
  min-height:24px;
  padding-block:.28rem;
  margin-block:-.28rem;
}
.nav__lang, .masthead .nav__lang, .language-switch a{
  min-width:24px; text-align:center;
  padding-inline:.25rem; margin-inline:-.25rem;
}

/* El enlace al Campus sale del sitio, a otra aplicación en otro
   dominio y sin vuelta atrás. Se abre en otra pestaña, y quien navega
   con lector de pantalla se entera. */
a[target="_blank"][data-externo]::after{
  content:" (" attr(data-externo) ")";
  position:absolute;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.door[href*="campus."] .tlink::after,
.masthead a[target="_blank"]::after{ content:none }


/* =====================================================================
   11 · IMPRESIÓN
   Las condiciones, el aviso legal y la privacidad se imprimen y se
   guardan en PDF. Sin esta hoja salían como bloque oscuro o —con los
   gráficos de fondo desactivados, que es lo que hace el navegador por
   defecto— como letra crema sobre papel blanco, es decir, invisible.
   ===================================================================== */

@media print{
  @page{ margin:18mm 16mm }

  html, body, body.lectura,
  main, section, article, .wrap, .article-shell, .article-body,
  .mv, .aside, .coda, .duo, .site-foot, .masthead{
    background:#FFFFFF !important;
    background-image:none !important;
    color:#1A1A18 !important;
    box-shadow:none !important;
  }
  body::before, body::after,
  .hero-botanica__veil, .hero-botanica__vignette,
  .hero-botanica__floor, .hero-botanica > .pintura,
  .hero-botanica > .brocha, .hero-botanica > .lienzo{ display:none !important }

  h1, h2, h3, h4, h5, h6,
  p, li, dd, dt, td, th, summary, blockquote, figcaption,
  .lead, .standfirst, .article-dek, .kicker, .eyebrow{
    color:#1A1A18 !important;
    text-shadow:none !important;
  }
  a, .tlink, .article-body a{
    color:#1A1A18 !important;
    text-decoration:underline;
    border:0 !important;
  }
  /* en papel un enlace no se pulsa: se escribe */
  .article-body a[href^="http"]::after,
  .policy-list a[href^="http"]::after{
    content:" (" attr(href) ")";
    font-size:.85em; word-break:break-all;
  }

  hr, table, th, td, .faq details, .faq summary,
  .article-nav, .article-nav li{ border-color:#B8B4AC !important }

  .masthead, .site-foot, #totop, .skip,
  .nav, .navtoggle, .navclose, .crumbs,
  .article-nav, .hero-botanica, .consent, .cookie,
  .sigue, .article-cta, .foot-cta{ display:none !important }

  details{ display:block !important }
  details > *{ display:block !important }
  .faq__a{ display:block !important; max-width:none !important }

  h1, h2, h3{ break-after:avoid-page }
  p, li, tr, figure, blockquote{ break-inside:avoid }

  main, .article-shell, .wrap{
    max-width:none !important; width:auto !important;
    padding:0 !important; margin:0 !important;
  }
  body{ font-size:11pt; line-height:1.45 }
}


/* =====================================================================
   12 · LAS INTERIORES DEJAN DE SER PLANAS
   =====================================================================
   Tres cambios, y ninguno añade nada: quitan.

   ─ A · LA TINTA NO ES VERDE, ES CARBÓN ──────────────────────────────
   El problema de las interiores no era que faltara color: era que
   sobraba. Con el texto en verde, los paneles en verde, la cabecera en
   verde y el pie en verde, todo estaba a la misma distancia del ojo y
   nada destacaba, porque no había con qué comparar. Un color que lo
   ocupa todo deja de ser un color.

   El texto corrido pasa a un carbón cálido, #3E3B3A —10,81:1, el mismo
   contraste que tenía el verde— y el verde se libera: solo aparece
   donde significa algo. Es lo que hace KEA: su verde sale una vez, en
   la portada, y el resto es carbón sobre marfil.

   ─ B · EL ESCALÓN QUE FALTABA ───────────────────────────────────────
   Medido en la página de KEA: titular a 100px, subtitular a 56px EN
   COLOR, texto a 17px. Aquí íbamos de 90px a 24px de golpe: un
   precipicio, y luego cuatro pantallas del mismo cuerpo. Lo que llena
   una página no es el titular, es el escalón intermedio.

   La entradilla pasa de 24px a tamaño de display y se pinta en verde
   inglés. Deja de ser un párrafo grande y pasa a ser la segunda voz.

   ─ C · UNA LÍNEA SOLO SEPARA FILAS ──────────────────────────────────
   Contadas: 73 líneas finas en empresas, 60 en un artículo, 55 en
   nosotros. La portada tiene 21. Y en cinco valores distintos, porque
   la mitad son restos del diseño en papel que nunca se convirtieron.

   La regla: una línea separa filas de una lista o celdas de una tabla.
   Entre secciones separa el aire. Todo lo demás se va.
   ===================================================================== */

/* --- A · la tinta ---------------------------------------------------- */
body.lectura{
  --carbon:#3E3B3A;
  --carbon-segundo:#5E5856;      /* 6,80:1 */
  --parrafo:#3E3B3A;
  --titulo:#3E3B3A;
  --segundo:#5E5856;
  --text:#3E3B3A;  --negro:#3E3B3A;  --body:#3E3B3A;
  --muted:#5E5856; --faint:#726B68;
  --rule:rgba(62,59,58,.16);
  --rule-soft:rgba(62,59,58,.09);
}
body.lectura{ color:var(--carbon) }

/* Va con :where(), que no suma especificidad. Así esta regla vale
   0-1-0 y cualquier regla de panel —que lleva dos clases— la gana sin
   pelear. Es lo que evita que el carbón se cuele dentro del verde. */
body.lectura :where(p, li, dd, dt, td, blockquote, figcaption, summary,
  h1, h2, h3, h4, h5, .article-body p, .article-body li, .faq__a,
  .faq summary, .standfirst, .article-dek,
  .placement-spot h2, .placement-spot p){
  color:var(--carbon) !important;
}
body.lectura :where(.kicker, .eyebrow, .crumbs, .crumbs span,
  .i-crumbs span, .article-meta, .article-meta dd, small, figcaption,
  .sigue__label, .foot-contact__heading){
  color:var(--carbon-segundo) !important;
}
body.lectura :focus-visible{ outline-color:#8A6318 }

/* el verde vuelve a ser un color: solo la segunda voz, los paneles,
   la cabecera y el pie. Y el ocre, solo la acción. */
body.lectura .tlink,
body.lectura .article-body a,
body.lectura .crumbs a, body.lectura .i-crumbs a,
body.lectura .article-nav a, body.lectura .article-nav p,
body.lectura .article-nav span, body.lectura .article-meta dt,
body.lectura .title-accent, body.lectura .es,
body.lectura main h1 em, body.lectura main h2 em,
body.lectura .policy-kicker, body.lectura .privacy-kicker,
body.lectura .blog-margin__no{ color:#8A6318 !important }

/* --- B · el escalón que faltaba -------------------------------------- */
/* Solo en la portadilla de cada página. Es el recurso que abre, no un
   ladrillo que se repita en cada sección: si sale dos veces por bloque
   deja de ser la segunda voz y se convierte en ruido. */
body.lectura .standfirst,
body.lectura .article-dek,
body.lectura .u-hero__lead, body.lectura .i-hero__lead,
body.lectura .c-hero__lead, body.lectura .fund-hero__lead,
body.lectura .contact-hero__lead, body.lectura .blog-hero__lead,
body.lectura .policy-hero .lead, body.lectura .article-hero .lead{
  font-family:var(--serif) !important;
  font-size:clamp(1.75rem,3vw,2.65rem) !important;
  line-height:1.18 !important;
  font-weight:400 !important;
  letter-spacing:-.014em;
  color:#1F4035 !important;
  max-width:21ch !important;
  margin-top:.6em;
}
/* la entradilla de una sección interior es un escalón intermedio, no
   una segunda portadilla: crece un punto y se queda en carbón */
body.lectura .u-section .lead,
body.lectura .mv .lead,
body.lectura .movement__head .lead{
  font-size:clamp(1.25rem,1.8vw,1.45rem) !important;
  line-height:1.5 !important;
  color:var(--carbon) !important;
  max-width:38ch !important;
}

/* dentro de un panel verde la segunda voz va en oro */
body.lectura .onwine .lead, body.lectura .mv--wine .lead,
body.lectura .coda .lead, body.lectura .fund-coda .lead,
body.lectura #preparation .lead{ color:#CBA24E !important }

/* --- C · las líneas ---------------------------------------------------
   Fuera las de sección: entre un capítulo y otro ya separa el aire. */
body.lectura section, body.lectura article,
body.lectura .u-section, body.lectura .article-section,
body.lectura .u-hero, body.lectura .i-hero, body.lectura .c-hero,
body.lectura .article-hero, body.lectura .policy-hero,
body.lectura .mv, body.lectura .movement__head,
body.lectura .article-shell, body.lectura .enquiry,
body.lectura .placement-spot{
  border-top:0 !important;
  border-bottom:0 !important;
}
/* la prueba de nivel se sostiene con su velo de oro, no con filetes */
body.lectura .placement-spot{
  border-top:2px solid var(--ocre-pleno) !important;
  border-bottom:0 !important;
}
/* y las que se quedan, todas del mismo valor */
body.lectura hr,
body.lectura .faq details, body.lectura .faq summary,
body.lectura li, body.lectura .reg li, body.lectura .time-lines li,
body.lectura .nivel-row, body.lectura .archive__row,
body.lectura table, body.lectura th, body.lectura td,
body.lectura .article-nav, body.lectura .article-nav li,
body.lectura .exam-table th, body.lectura .exam-table td{
  border-color:rgba(62,59,58,.16) !important;
}
body.lectura .article-meta{ border-left-color:rgba(62,59,58,.16) !important }
/* el aire que sustituye a las líneas */
body.lectura .u-section, body.lectura .article-section,
body.lectura .mv{ padding-block:clamp(2.5rem,5vw,4rem) }

/* --- el carbón es para el papel, no para los paneles ----------------
   La regla de arriba alcanza a todo el texto de una página clara,
   incluido el que va dentro de un panel verde y el del pie: carbón
   sobre verde da 1,03:1. Se reponen aquí, después. */
body.lectura .onwine *, body.lectura .score *, body.lectura .practice *,
body.lectura .mv--wine *, body.lectura .fund-admin *,
body.lectura .u-director *, body.lectura .next *, body.lectura .duo *,
body.lectura .aside *, body.lectura .coda *, body.lectura .fund-coda *,
body.lectura .article-cta *, body.lectura #preparation *,
body.lectura .site-foot *,
body.lectura .onwine, body.lectura .score, body.lectura .practice,
body.lectura .mv--wine, body.lectura .coda, body.lectura .site-foot{
  color:#FEFCF4 !important;
}
body.lectura .onwine .kicker, body.lectura .onwine .eyebrow,
body.lectura .onwine em, body.lectura .onwine i, body.lectura .onwine .es,
body.lectura .onwine .tlink, body.lectura .onwine .title-accent,
body.lectura .score .kicker, body.lectura .score em, body.lectura .score .tlink,
body.lectura .practice .kicker, body.lectura .practice em,
body.lectura .mv--wine .kicker, body.lectura .mv--wine em, body.lectura .mv--wine .tlink,
body.lectura .fund-admin .kicker, body.lectura .u-director .kicker,
body.lectura .u-director dt, body.lectura .next .kicker,
body.lectura .aside .aside__q, body.lectura #preparation .kicker,
body.lectura .coda .kicker, body.lectura .coda em,
body.lectura .fund-coda .kicker, body.lectura .article-cta .kicker,
body.lectura .site-foot .foot-kicker,
body.lectura .site-foot .foot-place__title,
body.lectura .site-foot .foot-links a,
body.lectura .site-foot .foot-bottom a,
body.lectura .site-foot svg, body.lectura .site-foot .foot-icon{
  color:#CBA24E !important;
}
body.lectura .site-foot .foot-cta,
body.lectura .site-foot .foot-cta *,
body.lectura .onwine .btn *, body.lectura .coda .btn *,
body.lectura .mv--wine .btn *{ color:var(--ocre-tinta) !important }
body.lectura .site-foot .foot-links a:hover,
body.lectura .site-foot .foot-bottom a:hover{ color:#FEFCF4 !important }

/* =====================================================================
   12 · SPECTRAL — VOZ EDITORIAL FINAL
   Spectral firma titulares, cifras y cursivas con una voz literaria y humana.
   Jakarta sigue encargándose de lectura, navegación y UI.
   ===================================================================== */

.aside__q,
.op h1 .b,
.coda__say em,
.fund-hero h1 em,
.fund-hero h2 em,
.article-hero h1 em,
.article-hero h2 em,
.policy-hero h1 em,
.policy-hero h2 em{
  font-family:var(--serif-italic) !important;
}

:is(.figure__n,.c-stat__value,.expiry__year,.level__code,.nivel-badge,
  .blog-margin__no),
.archive__row::before,
.editorial-lines li::before,
.credit-note::before,
.u-criteria li::before,
.u-decisions li::before,
.brief-list li::before{
  font-kerning:normal;
  font-variant-numeric:lining-nums tabular-nums;
}

main :is(h1,h2,h3,h4,.brandline,.coda__say,.movement__head){
  font-kerning:normal;
  font-variant-ligatures:common-ligatures;
}

/* --- y las líneas de sección, con nombre propio ---------------------
   Las hojas internas las escriben en rgba(10,58,42,.3), un verde que ya
   no existe en la paleta, y ganaban por ir dentro del HTML. */
body.lectura section, body.lectura article,
body.lectura .u-section, body.lectura .article-section,
body.lectura .u-hero, body.lectura .i-hero, body.lectura .c-hero,
body.lectura .fund-hero, body.lectura .policy-hero, body.lectura .blog-hero,
body.lectura .article-hero, body.lectura .contact-hero,
body.lectura .mv, body.lectura .movement__head, body.lectura .enquiry,
body.lectura .article-shell, body.lectura .u-about-facts,
body.lectura .calculation, body.lectura .credit-table{
  border-top-width:0 !important;
  border-bottom-width:0 !important;
}
body.lectura .placement-spot{
  border-top:2px solid var(--ocre-pleno) !important;
  border-bottom-width:0 !important;
}
/* las que se quedan —filas de lista, celdas de tabla, subrayados— van
   todas del mismo valor, no de cinco */
body.lectura li, body.lectura td, body.lectura th,
body.lectura hr, body.lectura .faq details, body.lectura .faq summary,
body.lectura .nivel-row, body.lectura .archive__row,
body.lectura .time-lines li, body.lectura .article-nav li,
body.lectura .exam-table th, body.lectura .exam-table td,
body.lectura table, body.lectura .article-meta{
  border-color:rgba(62,59,58,.16) !important;
}

/* =====================================================================
   13 · ARTÍCULOS — UNA PÁGINA EDITORIAL, NO UNA COLECCIÓN DE CAJAS

   Los artículos heredan de la portada la escala, la asimetría y un único
   giro de color. La navegación y las tablas conservan líneas porque
   ordenan información; metadatos y resúmenes no necesitan un marco falso.
   ===================================================================== */

body.lectura:has(.article-hero) .article-hero__grid{
  grid-template-columns:minmax(0,1.55fr) minmax(16rem,.45fr);
  gap:clamp(3.5rem,9vw,9rem);
  align-items:start;
}
body.lectura:has(.article-hero) .article-hero__grid > *,
body.lectura:has(.article-hero) .article-shell > *,
body.lectura:has(.article-hero) .article-cta__grid > *{min-width:0}

body.lectura:has(.article-hero) .article-meta{
  width:min(100%,20rem);
  justify-self:end;
  padding:clamp(2.5rem,5vw,5rem) 0 0;
  border:0 !important;
}

body.lectura:has(.article-hero) .answer{
  padding:clamp(1.6rem,3vw,2.4rem) 0 clamp(1.6rem,3vw,2.4rem) clamp(1.5rem,3vw,2.25rem);
  border:0 !important;
  border-left:.42rem solid var(--ocre-pleno) !important;
  background:transparent;
}
body.lectura:has(.article-hero) .answer__mark{color:#8A6318 !important}

body.lectura:has(.article-hero) .article-cta::after{display:none}

html[lang="es"] body.lectura:has(.article-hero) .article-hero h1{
  max-width:14ch;
  font-size:clamp(2.9rem,6.1vw,5.7rem);
}

@media(max-width:64rem){
  body.lectura:has(.article-hero) .article-hero__grid{grid-template-columns:1fr}
  body.lectura:has(.article-hero) .article-meta{
    width:min(100%,35rem);
    justify-self:end;
    padding-top:0;
  }
}

@media(max-width:44rem){
  body.lectura:has(.article-hero) .answer{
    padding-left:1.1rem;
    border-left-width:.3rem !important;
  }
  html[lang="es"] body.lectura:has(.article-hero) .article-hero h1{
    font-size:clamp(2.75rem,12.5vw,4.4rem);
  }
}