/* ==========================================================================
   Tu escalera · pulido editorial
   Capa de retoques sobre la web existente. No cambia textos ni estructura.
   Quita los recursos de plantilla que delatan una web generada:
   sombras, cristal, degradados, píldoras, tarjetas con elevación,
   iconos dentro de círculos y bordes decorativos.
   Para revertir por completo: borrar la línea <link> de pulido-editorial.css.
   ========================================================================== */

html body {
  --pulido-radio: 24px;      /* tarjetas y bloques: arista de peldaño gastado */
  --pulido-pildora: 999px;   /* botones, selectores, etiquetas */
  --pulido-campo: 14px;      /* campos de texto */
}

/* 1 · Sin cristal: cabecera opaca */
html body .nav {
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 2 · Sin sombras artificiales: solo filetes de 1 px */
html body .te-card,
html body .te-door,
html body .te-door-main,
html body .te-que-art,
html body .te-below-float,
html body .tg-fab,
html body .hero-tip,
html body .hstep a,
html body .ph.art img {
  box-shadow: none;
}

html body .hstep a:hover,
html body .hstep a:focus-visible {
  box-shadow: none;
  transform: none;
}

/* 3 · Tarjetas de esquina amplia (18 px), sin elevación al pasar el ratón */
html body .te-card,
html body .te-door,
html body .te-door-main,
html body .te-que-art {
  border-radius: var(--pulido-radio);
}

html body .te-card:hover,
html body .te-door:hover {
  transform: none;
}

/* 4 · Iconos en línea, sin círculos de color */
html body .te-ic {
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--accent);
}

html body .te-ic svg {
  width: 24px;
  height: 24px;
}

/* 5 · Botones y etiquetas: píldora completa, con filete de 1 px y sin sombra */
html body .btn,
html body .chip,
html body .te-chip,
html body .te-pill,
html body .te-pill-src,
html body .te-pill-n,
html body .te-ex-chips > *,
html body .tg-chips > *,
html body .tag,
html body .te-tag,
html body .te-below-float,
html body .te-que-art .hero-play {
  border-radius: var(--pulido-pildora);
}

/* 6 · Botón flotante "Te oriento": píldora, sin sombra */
html body .te-below-float,
html body .tg-fab {
  border-radius: var(--pulido-pildora);
  box-shadow: none;
}

html body .te-below-float:hover {
  border-color: var(--ink);
}

/* 7 · Borde rasgado de la sección "¿Qué necesitas hoy?" → corte recto.
      La escalera de la portada ya es el motivo; no hace falta un segundo gesto. */
html body .te-doors.te-cut {
  -webkit-mask: none;
  mask: none;
  clip-path: none;
}

/* 8 · Degradados: barra de lectura en color plano y sin trama de puntos */
html body .readbar {
  background: var(--accent);
}

html body .te-team-stage {
  background-image: none;
}

/* 9 · Botón principal de la portada: píldora, como el resto de botones */
html body .te-btn {
  border-radius: var(--pulido-pildora);
}

/* 10 · Fondo por defecto: Cal, el blanco de las paredes encaladas de una escalera.
       Blanco neutro con un levísimo calor hacia el granate: sin el amarillo del beis, sin verde
       y sin el frío del blanco de hospital.
       Sustituye al «Papel» #FFFFFF del selector; Lino y Kraft siguen disponibles. */
html[data-fondo="papel"],
:root:not([data-fondo]):not([data-theme="dark"]) {
  --bg: #FCFBFA;
  --surface: #FFFFFF;
  --card: #FFFFFF;
  --paper: #FCFBFA;
  --paper2: #F5F3F0;
  --te-warm: #F5F3F0;
  --grid: #F0EEEB;
  --rule: #E8E4E0;
  --rule-2: #CDC7C2;
  --muted: #55504D;
  --ink-2: #3A3634;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-fondo]):not([data-theme="light"]) {
    --bg: #151213;
    --surface: #1C1819;
    --card: #1C1819;
    --paper2: #1F1A1B;
    --te-warm: #1F1A1B;
    --grid: #2A2425;
    --rule: #2F2829;
    --rule-2: #4A4143;
    --muted: #BCB2AF;
    --ink-2: #D5CCC9;
  }
}

html[data-fondo="papel"] body,
:root:not([data-fondo]) body {
  background: var(--bg);
}

/* 11 · Un color por paso, sacado de su collage (decisión E20, 3 de noviembre).
       Los collages comparten un papel cálido; cada tinta sale de lo propio de cada uno:
       el mármol rosado de Aprender, el cielo pizarra de Prepararse, la piel y el barro
       de Cuidarse, la sepia de Comprender, el trazo azul de Archivo. Reducir se queda
       en granate porque la escalera es la reducción.
       El ocre y el verde bosque quedan reservados a "En debate" y "Experiencia".
       Contraste del texto en cal sobre cada tinta: 12 / 11,9 / 11,3 / 8,1 / 13,9 / 12,9 : 1. */
:root {
  --paso-1: #4A2A40;   /* Aprender · ciruela */
  --paso-2: #213A31;   /* Prepararse · abeto */
  --paso-3: #6A1B2A;   /* Reducir · granate de marca (la escalera) */
  --paso-4: #6F4239;   /* Cuidarse · arcilla rosa */
  --paso-5: #3A2520;   /* Comprender · nogal (la raíz) */
  --paso-6: #1E3048;   /* Archivo · azul pizarra */
  --marca: var(--paso-3);
  --te-panel-mezcla: 100%;
  --te-panel-ink: #FCFBFA;
  --c1i: var(--paso-1);
  --c2i: var(--paso-2);
  --c3i: var(--paso-4);
  --c4i: var(--paso-3);
  --c5i: var(--paso-5);
  --c6i: var(--paso-6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paso-1: #D9B8CE;
    --paso-2: #A8C7B6;
    --paso-3: #EBA9B5;
    --paso-4: #E6B4A6;
    --paso-5: #D9B99F;
    --paso-6: #A9BFDA;
    --te-panel-mezcla: 16%;
    --te-panel-ink: #F2EDEB;
    --c1i: var(--paso-1);
    --c2i: var(--paso-2);
    --c3i: var(--paso-4);
    --c4i: var(--paso-3);
    --c5i: var(--paso-5);
    --c6i: var(--paso-6);
  }
}

:root[data-theme="dark"] {
  --paso-1: #D9B8CE;
  --paso-2: #A8C7B6;
  --paso-3: #EBA9B5;
  --paso-4: #E6B4A6;
  --paso-5: #D9B99F;
  --paso-6: #A9BFDA;
  --te-panel-mezcla: 16%;
  --te-panel-ink: #F2EDEB;
  --c1i: var(--paso-1);
  --c2i: var(--paso-2);
  --c3i: var(--paso-4);
  --c4i: var(--paso-3);
  --c5i: var(--paso-5);
  --c6i: var(--paso-6);
}

/* 12 · "¿Qué quieres saber?" crece al pulsar el campo: la pregunta es la protagonista */
html body .te-search label {
  transition: font-size 0.45s var(--te-ease), letter-spacing 0.45s var(--te-ease);
}

html body .te-search:focus-within label {
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem);
  letter-spacing: -0.03em;
}

html body .te-search input#q-site {
  transition:
    min-height 0.45s var(--te-ease),
    font-size 0.45s var(--te-ease),
    border-color 0.3s var(--te-ease);
}

html body .te-search:focus-within input#q-site {
  min-height: 70px;
  font-size: 1.25rem;
}

html body .te-search:focus-within .te-btn {
  min-height: 70px;
}

/* Al acercarse, la pregunta se adelanta y se pone en el granate de la casa:
   la escalera invita a subir el primer peldaño. Crece con transform (sin mover
   nada de la página) y, al pulsar el campo, pasa al tamaño grande de arriba. */
html body .te-search label {
  transform-origin: left center;
  transition:
    font-size 0.45s var(--te-ease),
    letter-spacing 0.45s var(--te-ease),
    color 0.35s var(--te-ease),
    transform 0.5s var(--te-ease);
}

html body .te-search:focus-within label {
  color: var(--marca);
}

html body .te-search .te-field svg {
  transition: color 0.35s var(--te-ease), transform 0.5s var(--te-ease);
}

html body .te-search:focus-within .te-field svg {
  color: var(--marca);
}

html body .te-search:focus-within input#q-site {
  border-color: var(--marca);
  box-shadow: inset 0 0 0 1px var(--marca);
}

@media (hover: hover) {
  html body .te-search:hover:not(:focus-within) label {
    color: var(--marca);
  }

  html body .te-search:hover input#q-site {
    border-color: var(--marca);
  }

  html body .te-search:hover .te-field svg {
    color: var(--marca);
  }

  html body .te-search .te-chip:hover {
    border-color: var(--marca);
    color: var(--marca);
  }
}

@media (hover: hover) and (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  html body .te-search:hover:not(:focus-within) label {
    transform: scale(1.3);
  }

  html body .te-search:hover .te-field svg {
    transform: translateY(-50%) rotate(-12deg);
  }
}

html[data-calm] body .te-search label {
  transform: none;
}

/* 13 · Raíl de escalera: decorativo, solo en pantallas anchas.
       Enciende los peldaños recorridos y un punto camina por el peldaño actual. */
.rail-escalera {
  position: fixed;
  left: clamp(12px, 1.2vw, 28px);
  top: 50%;
  z-index: 20;
  display: none;
  box-sizing: border-box;
  width: 92px;
  padding: 12px 13px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--pulido-radio);
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--te-ease);
}

.rail-escalera.es-visible {
  opacity: 1;
}

@media (min-width: 88rem) {
  .rail-escalera {
    display: block;
  }
}

.rail-escalera svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.rail-escalera .base {
  fill: none;
  stroke: var(--rule-2);
  stroke-width: 1.5;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.rail-escalera .fill {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.rail-escalera .s1 { stroke: var(--paso-1); }
.rail-escalera .s2 { stroke: var(--paso-2); }
.rail-escalera .s3 { stroke: var(--paso-3); }
.rail-escalera .s4 { stroke: var(--paso-4); }
.rail-escalera .s5 { stroke: var(--paso-5); }
.rail-escalera .s6 { stroke: var(--paso-6); }

.rail-escalera .walker {
  stroke: var(--bg);
  stroke-width: 1.6;
}

@media print {
  .rail-escalera {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rail-escalera,
  html body .te-search label,
  html body .te-search input#q-site {
    transition: none;
  }
}

/* 14 · Páginas de cada paso: de banda granate recortada a página clara.
       El color del paso aparece en una raya de 4 px, el sobretítulo y el número.
       Los collages, con sus bordes de papel, se leen mejor sobre claro. */
/* Cada página de paso hereda la tinta de su paso (la misma de la escalera del inicio) */
html body section.page.cam-c1 { --hs: var(--c1i); }
html body section.page.cam-c2 { --hs: var(--c2i); }
html body section.page.cam-c3 { --hs: var(--c3i); }
html body section.page.cam-c4 { --hs: var(--c4i); }
html body section.page.cam-c5 { --hs: var(--c5i); }
html body section.page.cam-c6 { --hs: var(--c6i); }

html body section.page.group-page .phero {
  background: var(--bg);
  clip-path: none;
  border-top: 4px solid var(--hs, var(--accent));
  border-bottom: 1px solid var(--rule);
}

html body section.page.group-page .phero h1 {
  color: var(--ink);
}

html body section.page.group-page .phero .lead {
  color: var(--ink-2);
}

html body section.page.group-page .phero .eyebrow {
  color: var(--hs, var(--accent));
}

html body section.page.group-page .phero :focus-visible {
  outline-color: var(--te-focus, var(--hs, var(--accent)));
}

html body section.page.group-page .phero .te-now {
  background: color-mix(in srgb, var(--hs, var(--accent)) 14%, transparent);
  box-shadow: 0 0 0 0.4em color-mix(in srgb, var(--hs, var(--accent)) 14%, transparent);
}

/* Collage de la cabecera: como una foto rectangular, con esquina viva, sin borde rasgado,
   sin paspartú y sin inclinación, sobre cualquier papel (decisión de Pati, 3/11).
   La interfaz es redonda; las fotos, no: así se distinguen de botones y tarjetas. */
html body section.page.group-page .phero .sv-hcol {
  padding: 0;
  background: none;
  border: 0;
}

html body section.page.group-page .phero .sv-hcol img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  -webkit-mask: none;
  mask: none;
  border-radius: 0;
  transform: none;
}

html body section.page.group-page .phero .sv-hcol:hover img {
  transform: none;
}

/* 15 · "¿Qué necesitas hoy?" cambia de estación al pulsar "hoy".
       Un fondo propio por estación, todos oscuros y mates. Otoño: granate de marca; invierno: tierra
       oscura (la foto de rostro y ramas desnudas); primavera: musgo; verano: azul de mar (la mancha azul).
       Contraste del texto blanco y del acento sobre cada fondo: siempre ≥ 7:1. */
html body .te-doors {
  transition: background-color 0.9s var(--te-ease);
}

html body .te-doors[data-estacion="invierno"] { --te-band: #5F360F; --te-on: #F8E4C0; }
html body .te-doors[data-estacion="primavera"] { --te-band: #34432A; --te-on: #DDE9C6; }
html body .te-doors[data-estacion="verano"] { --te-band: #1F3A4D; --te-on: #D4E3F0; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .te-doors[data-estacion="invierno"] { --te-band: #4E2F0D; }
  :root:not([data-theme="light"]) .te-doors[data-estacion="primavera"] { --te-band: #263220; }
  :root:not([data-theme="light"]) .te-doors[data-estacion="verano"] { --te-band: #16293A; }
}

:root[data-theme="dark"] .te-doors[data-estacion="invierno"] { --te-band: #4E2F0D; }
:root[data-theme="dark"] .te-doors[data-estacion="primavera"] { --te-band: #263220; }
:root[data-theme="dark"] .te-doors[data-estacion="verano"] { --te-band: #16293A; }

.hoy-estacion {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  text-decoration-color: color-mix(in srgb, var(--te-on) 55%, transparent);
  transition: text-decoration-color 0.3s var(--te-ease);
}

.hoy-estacion:hover {
  text-decoration-style: solid;
  text-decoration-color: var(--te-on);
}

.hoy-estacion:focus-visible {
  outline: 3px solid var(--te-focus);
  outline-offset: 6px;
  border-radius: 2px;
}

.hoy-estacion.salta {
  display: inline-block;
  animation: hoy-peldano 0.55s var(--te-ease);
}

@keyframes hoy-peldano {
  0%   { transform: translate(0, 0); }
  40%  { transform: translate(0.16em, 0.11em); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html body .te-doors { transition: none; }
  .hoy-estacion.salta { animation: none; }
}

/* 16 · Migas de pan de la cabecera de cada paso: tinta sobre papel, no blanco sobre granate */
html body section.page.group-page .phero .te-crumbs,
html body section.page.group-page .phero .te-crumbs a,
html body section.page.group-page .phero .te-crumbs li {
  color: var(--ink-2);
}

html body section.page.group-page .phero .te-crumbs li:last-child,
html body section.page.group-page .phero .te-crumbs [aria-current] {
  color: var(--ink);
}

html body section.page.group-page .phero .te-crumbs svg {
  color: var(--ink-2);
  stroke: currentColor;
}

/* 17 · Etiqueta de estación sobre el collage: píldora con filete */
html body .sv-season {
  border-radius: var(--pulido-pildora);
  border: 1px solid var(--rule);
  padding: 5px 13px;
}

/* ==========================================================================
   18 · Selectores en píldora que se rellenan de color al pulsarse.
   «Sonido», «Ritmo» y los papeles son elecciones, no botones de acción:
   la forma redonda los distingue del resto y el relleno dice cuál está activo
   sin depender solo del filete. Contraste del texto activo sobre el relleno: ≥ 7:1.
   ========================================================================== */
html body .te-snd button,
html body .rhythms button,
html body .calm-toggle,
html body .sound-btn,
html body .mp-n {
  border-radius: var(--pulido-pildora);
  padding-inline: 1.05rem;
  transition: background-color 0.3s var(--te-ease), color 0.3s var(--te-ease),
    border-color 0.3s var(--te-ease);
}

html body .te-snd button[aria-pressed="true"],
html body .rhythms button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--te-sobre-acento, #FBF9F5);
}

html body .te-snd button[aria-pressed="true"]:hover,
html body .rhythms button[aria-pressed="true"]:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

:root { --te-sobre-acento: #FBF9F5; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --te-sobre-acento: #151213; }
}

:root[data-theme="dark"] { --te-sobre-acento: #151213; }

/* Círculos de los iconos de lista: se quedan, pero como peldaño redondeado */
html body .ilist-ico {
  border-radius: var(--pulido-radio);
}

/* ==========================================================================
   19 · La escalera como gesto: listas que se recorren peldaño a peldaño.
   Al pasar el ratón (o tabular) por una fila, esa fila y las anteriores quedan
   marcadas: lo recorrido se ve recorrido, igual que en el raíl lateral.
   Es la misma idea de arriba abajo que ordena toda la web.
   ========================================================================== */
html body ul.ilist > li,
html body .te-door-links > li > a {
  position: relative;
  transition: color 0.35s var(--te-ease), background-color 0.35s var(--te-ease);
}

html body ul.ilist[data-peldanos] > li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: -1px;
  width: 3px;
  background: var(--hs, var(--accent));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s var(--te-ease);
}

html body ul.ilist[data-peldanos] > li.pisado::after {
  transform: scaleY(1);
}

html body ul.ilist[data-peldanos] > li.pisado .ilist-ico {
  background: var(--hs, var(--accent));
  color: var(--te-sobre-acento);
}

html body ul.ilist[data-peldanos] > li {
  padding-left: 0.9rem;
  margin-left: -0.9rem;
}

@media (prefers-reduced-motion: reduce) {
  html body ul.ilist[data-peldanos] > li::after,
  html body ul.ilist[data-peldanos] > li,
  html body ul.ilist[data-peldanos] > li .ilist-ico {
    transition: none;
  }
}

/* ==========================================================================
   20 · Descansillo. Si la persona se queda quieta un rato, la web descansa con ella:
   el punto que camina por la escalera (en el raíl y en el logotipo) respira
   al ritmo «con pausa» de la propia web: 5 s tomar aire, 3 s sostener, 7 s soltar.
   En una escalera, el descansillo es donde se para sin dejar de subir.
   Decorativo; se detiene con cualquier gesto y no existe con movimiento reducido
   ni en «Modo día difícil».
   ========================================================================== */
@keyframes te-respira {
  0%      { transform: scale(1); }
  33.33%  { transform: scale(1.75); }
  53.33%  { transform: scale(1.75); }
  100%    { transform: scale(1); }
}

html.te-descansillo .rail-escalera .walker,
html.te-descansillo .brand .logo circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: te-respira 15s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  html.te-descansillo .rail-escalera .walker,
  html.te-descansillo .brand .logo circle {
    animation: none;
  }
}

/* ==========================================================================
   21 · Al pasar el ratón, las cosas responden: cambian al color de su paso
   y crecen un poco; al pulsar, ceden. Nada de cajas quietas.
   El color dice a qué peldaño lleva cada enlace; el tamaño, que está vivo.
   Solo con ratón (hover: hover). Con movimiento reducido cambia el color,
   pero nada crece ni se desplaza.
   ========================================================================== */
html body .te-door,
html body .te-stair > li > a,
html body .group-index > li > a,
html body .te-door-links a,
html body .te-mat,
html body .pager a,
html body .btn,
html body .te-btn,
html body .te-snd button,
html body .rhythms button {
  transition: background-color 0.35s var(--te-ease), border-color 0.35s var(--te-ease),
    color 0.35s var(--te-ease), transform 0.35s var(--te-ease);
}

/* Filas de índice y escalera de la portada: rectas en reposo (la línea separadora
   no se curva) y se redondean al pasar el ratón, como si se ablandaran. */
html body .te-stair > li > a,
html body .index.group-index > li > a,
html body .te-door-links a {
  border-radius: 0;
  transition: background-color 0.35s var(--te-ease), border-radius 0.35s var(--te-ease),
    border-color 0.35s var(--te-ease), transform 0.35s var(--te-ease);
}

@media (hover: hover) {
  html body .te-door:hover,
  html body .te-mat:hover {
    border-color: var(--hs, var(--accent));
    background-color: color-mix(in srgb, var(--hs, var(--accent)) 5%, var(--card));
  }

  html body .te-stair > li > a:hover,
  html body .index.group-index > li > a:hover,
  html body .te-door-links a:hover {
    background: color-mix(in srgb, var(--hs, var(--accent)) 8%, transparent);
    border-radius: var(--pulido-radio);
    border-color: transparent;
  }

  html body .index.group-index > li > a:hover :is(h2, h3, b, strong, .t),
  html body .te-door-links a:hover b {
    color: var(--hs, var(--accent));
  }

  html body .te-snd button[aria-pressed="false"]:hover,
  html body .rhythms button[aria-pressed="false"]:hover {
    background: color-mix(in srgb, var(--accent) 9%, transparent);
    border-color: var(--accent);
    color: var(--accent);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html body .te-door:hover,
  html body .te-mat:hover {
    transform: scale(1.015);
  }

  html body .te-stair > li > a:hover,
  html body .index.group-index > li > a:hover {
    transform: scale(1.01);
  }

  /* La flecha baja un peldaño: un paso a la derecha y uno abajo */
  html body .te-door-links a i,
  html body .index.group-index > li > a .ar {
    transition: transform 0.35s var(--te-ease), color 0.35s var(--te-ease);
  }

  html body .te-door-links a:hover i,
  html body .index.group-index > li > a:hover .ar {
    transform: translate(0.22em, 0.14em);
    color: var(--hs, var(--accent));
  }

  html body .btn:hover,
  html body .te-btn:hover,
  html body .te-snd button:hover,
  html body .rhythms button:hover,
  html body .pager a:hover {
    transform: scale(1.04);
  }

  html body .btn:active,
  html body .te-btn:active,
  html body .te-snd button:active,
  html body .rhythms button:active,
  html body .te-door:active,
  html body .index.group-index > li > a:active {
    transform: scale(0.97);
  }
}

/* ==========================================================================
   23 · Si el paso es azul, todo lo suyo es azul.
   Dentro de cada página de paso (y de sus páginas interiores), el acento de la web
   pasa a ser la tinta de ese paso: números, flechas, enlaces, botones y resaltados.
   Fuera de la página (barra de lectura y etiqueta que sigue al ratón) se usa
   --paso-actual, que escalera-gestos.js fija al cambiar de página.
   El granate sigue siendo el color de la casa en la portada y en «Te oriento».
   ========================================================================== */
html body section.page.group-page,
html body section.page[data-paso] {
  --accent: var(--hs);
  --hl: var(--hs);
  --btn-bg: var(--hs);
  --btn-ink: var(--te-sobre-acento);
  --btn-hover: color-mix(in srgb, var(--hs) 82%, var(--ink));
  --accent-soft: color-mix(in srgb, var(--hs) 9%, var(--bg));
}

html body .readbar {
  background: var(--paso-actual, var(--accent));
}

html body .sv-read {
  color: var(--paso-actual, var(--accent));
}

html body .te-cpill span {
  background: var(--paso-actual, var(--btn-bg));  color: var(--te-sobre-acento);
}

/* Escalera de la portada y menú: cada paso se tiñe de su tinta al pasar y al pulsar */
#te-stair a[href="#aprender"]   { --paso: var(--paso-1); }
#te-stair a[href="#prepararse"] { --paso: var(--paso-2); }
#te-stair a[href="#reducir"]    { --paso: var(--paso-3); }
#te-stair a[href="#cuidados"]   { --paso: var(--paso-4); }
#te-stair a[href="#comprender"] { --paso: var(--paso-5); }
#te-stair a[href="#archivo"]    { --paso: var(--paso-6); }

#te-stair a .t,
#te-stair a .n,
html body .menu-group > summary,
html body .menu-group > summary .cam-ic {
  transition: color 0.35s var(--te-ease);
}

#te-stair a:focus-visible .t,
#te-stair a:focus-visible .n,
#te-stair a:active .t,
#te-stair a:active .n {
  color: var(--paso);
}

html body .menu-group.c1 { --paso: var(--c1i); }
html body .menu-group.c2 { --paso: var(--c2i); }
html body .menu-group.c3 { --paso: var(--c3i); }
html body .menu-group.c4 { --paso: var(--c4i); }
html body .menu-group.c5 { --paso: var(--c5i); }
html body .menu-group.c6 { --paso: var(--c6i); }

/* Menú (auditoría, punto 6): cada apartado, siempre en su tinta. Número, título,
   icono, filete y el «+» llevan el color de su paso; así el menú ya enseña el mapa
   de colores de la web antes de entrar. Se hace cambiando el acento dentro de cada
   grupo, de modo que todo lo que ya usaba el acento hereda la tinta. */
html body .menu-grid .menu-group:is(.c1, .c2, .c3, .c4, .c5, .c6) {
  --accent: var(--paso);
  --hl: var(--paso);
  border-top-color: var(--paso);
}

html body .menu-grid .menu-group:is(.c1, .c2, .c3, .c4, .c5, .c6) > summary :is(h3, .mn, .cam-ic) {
  color: var(--paso);
}

/* Subapartados (punto 9): la letra crece al acercarse y más aún al pulsar.
   Crece con transform desde la izquierda, sin empujar a los vecinos. */
html body .menu-grid .menu-group li a {
  transform-origin: left center;
  transition: color 0.3s var(--te-ease), transform 0.45s var(--te-ease);
}

html body .menu-grid .menu-group li a[aria-current="page"] {
  color: var(--paso, var(--accent));
  font-size: 1.22rem;
}

@media (hover: hover) {
  html body .menu-grid .menu-group li a:hover {
    color: var(--paso, var(--accent));
  }
}

@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) {
    html body .menu-grid .menu-group li a:hover {
      transform: scale(1.12);
    }
  }

  html body .menu-grid .menu-group li a:active,
  html body .menu-grid .menu-group li a.pulsado {
    transform: scale(1.24);
  }
}

html body .menu-grid .menu-group li a:active,
html body .menu-grid .menu-group li a.pulsado {
  color: var(--paso, var(--accent));
}

html body .menu-group[open] > summary,
html body .menu-group[open] > summary .cam-ic,
html body .menu-group > summary:focus-visible {
  color: var(--paso, var(--accent));
}

@media (hover: hover) {
  #te-stair a:hover .t,
  #te-stair a:hover .n,
  html body .menu-group > summary:hover,
  html body .menu-group > summary:hover .cam-ic {
    color: var(--paso, var(--accent));
  }
}

/* El botón «Bajar…» del final de cada paso lleva texto blanco fijo: en modo noche,
   sobre la tinta clara del paso, pasa a texto oscuro. */
html body section.page .te-below-b {
  color: var(--te-sobre-acento);
}

/* 24 · Portada: la píldora de cada paso se tiñe de su propia tinta, no de granate.
   La vista previa del collage al pasar por un paso, como foto rectangular (E9). */
@media (hover: hover) {
  html body #te-stair > li > a:hover {
    background: color-mix(in srgb, var(--paso) 8%, transparent);
  }
}

html body .sv-peek img {
  -webkit-mask: none;
  mask: none;
  border-radius: 0;
}

html body .te-incol img {
  -webkit-mask: none;
  mask: none;
  border-radius: 0;
  transform: none;
}

/* 25 · Todas las cabeceras con collage (también las interiores, como el mapa):
   foto rectangular, sin rasgado ni inclinación, y el borde recto aunque lo de dentro
   se mueva al pasar el ratón (collages-vivos.js). */
html body .sv-hcol {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: none;
  border: 0;
}

html body .sv-hcol img {
  -webkit-mask: none;
  mask: none;
  border-radius: 0;
  transform: none;
}

html body .sv-hcol:hover img {
  transform: none;
}

/* ==========================================================================
   26 · Cada apartado, su habitación.
   Al entrar en un paso, la cabecera se pinta de su tinta plena (azul en Aprender,
   musgo en Prepararse, terracota en Cuidarse…) y el resto del apartado queda bajo
   un velo muy suave del mismo color: se nota que es la misma habitación, y el texto
   de lectura sigue sobre claro. En las páginas interiores de lectura larga, solo
   la cabecera lleva un velo. El granate sigue siendo el color de la casa:
   portada, «Te oriento» y botón principal.
   Texto sobre la tinta: cal en claro (8,4–15:1) y oscuro en modo noche (≥ 9:1).
   ========================================================================== */
html body section.page.group-page {
  background: var(--bg);
}

html body section.page.group-page .phero {
  background: var(--hs);
  border-top-color: var(--hs);
  border-bottom: 0;
}

html body section.page.group-page .phero h1,
html body section.page.group-page .phero .lead,
html body section.page.group-page .phero .eyebrow,
html body section.page.group-page .phero .te-crumbs,
html body section.page.group-page .phero .te-crumbs a,
html body section.page.group-page .phero .te-crumbs li,
html body section.page.group-page .phero .te-crumbs [aria-current],
html body section.page.group-page .phero .cam-ic,
html body section.page.group-page .phero .te-rt {
  color: var(--te-sobre-acento);
}

html body section.page.group-page .phero .te-crumbs svg,
html body section.page.group-page .phero .eyebrow svg {
  color: var(--te-sobre-acento);
  stroke: currentColor;
}

html body section.page.group-page .phero .te-crumbs a {
  text-decoration-color: color-mix(in srgb, var(--te-sobre-acento) 60%, transparent);
}

html body section.page.group-page .phero :focus-visible {
  outline-color: var(--te-sobre-acento);
}

/* La foto, sobre el color, con un filete fino de cal para que no se funda */
html body section.page.group-page .phero .sv-hcol {
  outline: 1px solid color-mix(in srgb, var(--te-sobre-acento) 22%, transparent);
  outline-offset: 0;
}

/* Páginas interiores: también la cabecera en la tinta plena de su paso */
html body section.page[data-paso] .phero {
  background: var(--hs);
  border-bottom: 0;
}

html body section.page[data-paso] .phero :is(h1, p, a, li, span, .lead, .eyebrow, .te-rt, .te-crumbs),
html body section.page[data-paso] .phero .te-crumbs [aria-current] {
  color: var(--te-sobre-acento);
}

html body section.page[data-paso] .phero svg {
  color: var(--te-sobre-acento);
}

html body section.page[data-paso] .phero .te-crumbs a {
  text-decoration-color: color-mix(in srgb, var(--te-sobre-acento) 60%, transparent);
}

html body section.page[data-paso] .phero :focus-visible {
  outline-color: var(--te-sobre-acento);
}

/* Botones dentro de una cabecera de color («Escuchar» y similares) */
html body section.page.group-page .phero button,
html body section.page[data-paso] .phero button {
  background: transparent;
  border-color: color-mix(in srgb, var(--te-sobre-acento) 55%, transparent);
  color: var(--te-sobre-acento);
}

@media (hover: hover) {
  html body section.page.group-page .phero button:hover,
  html body section.page[data-paso] .phero button:hover {
    background: color-mix(in srgb, var(--te-sobre-acento) 14%, transparent);
    border-color: var(--te-sobre-acento);
  }
}

html body section.page[data-paso] .phero .sv-hcol {
  outline: 1px solid color-mix(in srgb, var(--te-sobre-acento) 22%, transparent);
}

/* Las filas del índice, sobre el velo, se aclaran al pasar */
@media (hover: hover) {
  html body section.page.group-page .index.group-index > li > a:hover {
    background: color-mix(in srgb, var(--card) 75%, transparent);
  }
}

/* Migas de pan sobre la tinta del paso: también el paso actual, en claro */
html body section.page.group-page .phero .te-crumbs li:last-child,
html body section.page.group-page .phero .te-crumbs li[aria-current],
html body section.page.group-page .phero .te-crumbs [aria-current="page"] {
  color: var(--te-sobre-acento);
}

/* 27 · Cada página interior trae su paso en el HTML (data-paso): su color está
   desde el primer instante, sin destello granate mientras carga. */
html body section.page[data-paso="1"] { --hs: var(--paso-1); }
html body section.page[data-paso="2"] { --hs: var(--paso-2); }
html body section.page[data-paso="3"] { --hs: var(--paso-3); }
html body section.page[data-paso="4"] { --hs: var(--paso-4); }
html body section.page[data-paso="5"] { --hs: var(--paso-5); }
html body section.page[data-paso="6"] { --hs: var(--paso-6); }

/* La cortina que sube al cambiar de página toma el color del destino
   (escalera-gestos.js fija --cortina); a la portada vuelve en granate. */
html body .te-curtain-in {
  background: var(--cortina, var(--te-band));
}

html body .te-curtain-t {
  color: var(--cortina-texto, #fff);
}

/* ==========================================================================
   28 · La cabecera de color no es una caja: se funde con la pared blanca
   y, al bajar por la página, su color se va yendo (como el marrón de savvia).
   --salida (0 → 1) la fija escalera-gestos.js según lo que se ha bajado.
   Con movimiento reducido o «Modo día difícil», la cabecera queda quieta,
   con su fundido inferior, pero sin desvanecerse.
   ========================================================================== */
html body section.page.group-page .phero,
html body section.page[data-paso] .phero {
  --fundido: clamp(72px, 8vw, 132px);
  --tinta-viva: color-mix(in srgb, var(--hs) calc(100% - var(--salida, 0) * 100%), var(--bg));
  padding-bottom: var(--fundido);
  background: linear-gradient(to bottom,
    var(--tinta-viva) 0,
    var(--tinta-viva) calc(100% - var(--fundido)),
    var(--bg) 100%);
}

html body section.page.group-page .phero > .wrap,
html body section.page[data-paso] .phero > .wrap {
  opacity: max(0, calc(1 - var(--salida, 0) * 1.35));
}

/* Cursivas y negritas dentro de la cabecera de color, también en claro */
html body section.page.group-page .phero :is(em, i, strong, b, cite, mark),
html body section.page[data-paso] .phero :is(em, i, strong, b, cite, mark) {
  color: var(--te-sobre-acento);
  background: none;
}

/* ==========================================================================
   29 · El pie, en granate noche (decisión E21, 3 de noviembre).
   El nogal ya es la tinta de Comprender; el pie no puede repetirla. Pasa a un
   granate muy hondo, el de la escalera cuando se apaga la luz: la casa que
   sostiene todo lo de arriba y da sensación de suelo firme (auditoría, punto 2).
   El borde en peldaños y su espacio vacío se quitan (punto 1): la escalera ya está
   dibujada dentro del pie y no hace falta repetirla.
   Texto sobre granate noche: cal 15,6:1, secundario 13:1, apagado 9,7:1,
   rosa empolvado 10,4:1.
   ========================================================================== */
:root {
  --nogal: #3A2520;
  --granate-noche: #3B141C;
  --fondo-pagina: var(--bg);
}

html body .foot {
  --bg: var(--granate-noche);
  --surface: var(--granate-noche);
  --card: #4A1E27;
  --paper2: #4A1E27;
  --te-warm: #4A1E27;
  --ink: #FCFBFA;
  --ink-2: #EDE5E0;
  --muted: #D2C6BF;
  --rule: rgba(252, 251, 250, 0.18);
  --rule-2: rgba(252, 251, 250, 0.32);
  --accent: #EFC5CC;
  --hl: #EFC5CC;
  --hs: #EFC5CC;
  --sun-ink: #EFC5CC;
  --accent-soft: rgba(239, 197, 204, 0.14);
  --btn-bg: #EFC5CC;
  --btn-ink: #3B141C;
  --btn-hover: #F6D9DE;
  --te-sobre-acento: #3B141C;
  --te-focus: #EFC5CC;
  color: var(--ink);
}

/* Pie: granate noche a todo lo ancho, con borde recto y sin hueco encima */
html body .foot {
  background: var(--granate-noche);
  border-top: 0;
  padding-top: 0;
  clip-path: none;
}

html body .foot a {
  color: var(--ink);
}

html body .foot :is(h2, h3, h4, strong, b) {
  color: var(--accent);
}

/* ==========================================================================
   30 · Capítulos: al pasar de un capítulo (h2) al siguiente, el fondo de la
   página alterna entre la cal y un tinte muy leve de su paso (6 %).
   La página respira por tramos; el texto siempre queda sobre claro.
   --tono (0 | 1) lo fija escalera-gestos.js. En «Modo día difícil», sin tramos.
   ========================================================================== */
html body section.page.group-page,
html body section.page[data-paso] {
  background-color: color-mix(in srgb, var(--hs) calc(var(--tono, 0) * 6%), var(--bg));
  transition: background-color 0.9s var(--te-ease);
}

@media (prefers-reduced-motion: reduce) {
  html body section.page.group-page,
  html body section.page[data-paso] {
    transition: none;
  }
}

/* ==========================================================================
   32 · Al pinchar un apartado, se llena del color de su sección.
   Las filas del índice de cada paso (y los pasos de la escalera de la portada)
   están sobre blanco; al pulsarlas se llenan de la tinta de la cabecera, con el
   texto en cal, y la cortina sube del mismo color: el apartado parece abrirse.
   escalera-gestos.js mantiene la clase .pulsado mientras sube la cortina.
   ========================================================================== */
html body .index.group-index > li > a:active,
html body .index.group-index > li > a.pulsado {
  background: var(--hs);
  border-color: transparent;
  border-radius: var(--pulido-radio);
}

html body .index.group-index > li > a:active :is(.n, .t, .d, .ar, span, b, strong),
html body .index.group-index > li > a.pulsado :is(.n, .t, .d, .ar, span, b, strong) {
  color: var(--te-sobre-acento);
}

html body #te-stair > li > a:active,
html body #te-stair > li > a.pulsado {
  background: var(--paso);
}

html body #te-stair > li > a:active :is(.n, .t),
html body #te-stair > li > a.pulsado :is(.n, .t) {
  color: var(--te-sobre-acento);
}

/* ==========================================================================
   33 · Ajustes de lectura (auditoría, comentario de Vir: «demasiadas opciones
   arriba»). La barra superior entera se convierte en un solo botón «Aa» en la
   cabecera. Las letras «Aa» son el gesto universal de «cómo leer» (lo usan los
   lectores de libros): se entiende al pasar el ratón, sin explicarlo.
   Dentro: modo día difícil, tamaño del texto y fondo. Los botones son los mismos
   de siempre (la web les da su comportamiento al cargar); la barra antigua queda
   en el documento pero oculta, porque «Te oriento» la usa por dentro.
   ========================================================================== */
html body .te-util,
html body .nav .nav-ico-sun {
  display: none;
}

html body .te-lectura-w {
  position: relative;
  display: inline-flex;
}

html body .nav-ico-lectura .te-aa {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  transition: transform 0.45s var(--te-ease), color 0.3s var(--te-ease);
}

html body .nav-ico-lectura[aria-expanded="true"] {
  border-color: var(--rule-2);
}

html body .nav-ico-lectura[aria-expanded="true"] .te-aa {
  color: var(--paso-actual, var(--marca));
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html body .nav-ico-lectura:hover .te-aa {
    transform: scale(1.12);
  }
}

html body .te-lectura {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  display: grid;
  gap: 14px;
  width: min(21rem, calc(100vw - 32px));
  padding: 20px 20px 16px;
  border: 1px solid var(--rule-2);
  border-radius: var(--pulido-radio);
  background: var(--surface, var(--bg));
  color: var(--ink);
  text-align: left;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s var(--te-ease), transform 0.45s var(--te-ease);
}

html body .te-lectura[hidden] {
  display: none;
}

@starting-style {
  html body .te-lectura {
    opacity: 0;
    transform: translateY(-6px);
  }
}

html body .te-lectura-tit {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}

html body .te-lectura-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

html body .te-lectura-et {
  font-size: 0.95rem;
  color: var(--ink-2);
}

html body .te-lectura-ayuda,
html body .te-lectura-nota {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--muted);
}

html body .te-lectura .te-calm {
  min-height: 48px;
  padding: 0 4px;
  font-size: 0.95rem;
}

html body .te-lectura .size {
  display: inline-flex;
  gap: 2px;
}

html body .te-lectura .size button {
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--pulido-pildora);
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.3s var(--te-ease), color 0.3s var(--te-ease), border-color 0.3s var(--te-ease);
}

html body .te-lectura .size button:nth-child(1) { font-size: 0.875rem; }
html body .te-lectura .size button:nth-child(2) { font-size: 1.06rem; }
html body .te-lectura .size button:nth-child(3) { font-size: 1.25rem; }

html body .te-lectura .size button[aria-pressed="true"] {
  background: var(--marca);
  color: var(--te-sobre-acento);
}

@media (hover: hover) {
  html body .te-lectura .size button:not([aria-pressed="true"]):hover {
    border-color: var(--marca);
    color: var(--marca);
  }
}

html body .te-lectura .te-papel {
  min-height: 48px;
}

/* En el móvil la cabecera no tiene sitio para un icono más sin cortar «Secciones».
   Allí los ajustes de lectura viven en el menú, junto al modo día difícil y el
   fondo, donde ya estaban; se añade el tamaño del texto (sección 33 bis). */
@media (max-width: 900px) {
  html body .te-lectura-w {
    display: none;
  }
}

/* 33 bis · Tamaño del texto dentro del menú */
html body .menu-calm .te-menu-size {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 6px;
}

html body .menu-calm .te-menu-size > span {
  font-size: 0.95rem;
  color: var(--ink-2);
}

html body .menu-calm .te-menu-size .size {
  display: inline-flex;
  gap: 2px;
}

html body .menu-calm .te-menu-size .size button {
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--pulido-pildora);
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

html body .menu-calm .te-menu-size .size button:nth-child(1) { font-size: 0.875rem; }
html body .menu-calm .te-menu-size .size button:nth-child(2) { font-size: 1.06rem; }
html body .menu-calm .te-menu-size .size button:nth-child(3) { font-size: 1.25rem; }

html body .menu-calm .te-menu-size .size button[aria-pressed="true"] {
  background: var(--marca);
  color: var(--te-sobre-acento);
}

/* ==========================================================================
   34 · Lo que se resalta, en la tinta de su sección (auditoría, punto 14).
   Notas, avisos y las iniciales de las personas dejan el rosa genérico y toman
   el color del paso en el que están: la página entera habla el mismo color.
   El aviso conserva su filete grueso a la izquierda, que es lo que lo hace aviso.
   Texto sobre el tinte: 14:1 en cal; tinta sobre su tinte, 6,9:1 o más.
   ========================================================================== */
html body section.page .note,
html body section.page .pbody .note {
  background: color-mix(in srgb, var(--hs, var(--accent)) 7%, var(--bg));
}

html body section.page .note.warn,
html body section.page .pbody .note.warn {
  border-left: 3px solid var(--hs, var(--accent));
  background: color-mix(in srgb, var(--hs, var(--accent)) 10%, var(--bg));
}

html body section.page .note strong {
  color: var(--hs, var(--ink));
}

html body section.page .person:nth-child(n) .av {
  --av-bg: color-mix(in srgb, var(--hs, var(--accent)) 10%, var(--bg));
  --av-ink: var(--hs, var(--accent));
}

/* Los iconos de las listas se oscurecen al pulsar también con el dedo
   (con el ratón ya lo hacen al pasar, sección 19). */
html body ul.ilist > li:active .ilist-ico {
  background: var(--hs, var(--accent));
  color: var(--te-sobre-acento);
}

html body .nav-ico:active,
html body .te-search-link:active {
  background: color-mix(in srgb, var(--ink) 9%, transparent);
}

/* ==========================================================================
   35 · El buscador del Archivo, en la tinta del Archivo (auditoría, colores).
   Antes era granate, el color de otra sección. Ahora es azul pizarra, el del
   trazo de su collage. En modo noche, el panel es un tinte hondo de esa tinta
   con texto claro (una tinta clara de fondo con texto blanco no se leería).
   ========================================================================== */
html body section.page .te-ex.te-ex--full .te-ex-f {
  --panel: color-mix(in srgb, var(--hs, var(--te-band)) var(--te-panel-mezcla), var(--bg));
  background: var(--panel);
  color: var(--te-panel-ink);
}

html body section.page .te-ex.te-ex--full .te-ex-f :is(legend, label),
html body section.page .te-ex.te-ex--full .te-ex-fd > summary {
  color: var(--te-panel-ink);
}

html body section.page .te-ex.te-ex--full .te-ex-fd > summary {
  border-top-color: color-mix(in srgb, var(--te-panel-ink) 28%, transparent);
}

html body section.page .te-ex.te-ex--full .te-ex-fd .te-more-ic::before,
html body section.page .te-ex.te-ex--full .te-ex-fd .te-more-ic::after {
  border-top-color: var(--te-panel-ink);
}

html body section.page .te-ex.te-ex--full .te-rchip {
  border-color: color-mix(in srgb, var(--te-panel-ink) 50%, transparent);
  color: var(--te-panel-ink);
}

html body section.page .te-ex.te-ex--full .te-rchip span {
  color: color-mix(in srgb, var(--te-panel-ink) 85%, transparent);
}

html body section.page .te-ex.te-ex--full .te-rchip:hover {
  border-color: var(--te-panel-ink);
  background: color-mix(in srgb, var(--te-panel-ink) 8%, transparent);
}

html body section.page .te-ex.te-ex--full .te-rchip[aria-pressed="true"],
html body section.page .te-ex.te-ex--full .te-rchip[aria-pressed="true"] span {
  background: var(--te-panel-ink);
  border-color: var(--te-panel-ink);
  color: var(--panel);
}

html body section.page .te-ex.te-ex--full .te-ex-f :focus-visible {
  outline-color: var(--te-panel-ink);
}

html body section.page .te-ex.te-ex--full .te-ex-reset {
  border-color: var(--te-panel-ink);
  color: var(--te-panel-ink);
}

html body section.page .te-ex.te-ex--full .te-ex-reset:hover {
  background: var(--te-panel-ink);
  color: var(--panel);
}

/* ==========================================================================
   36 · Texto de los botones rellenos: nunca blanco fijo.
   Varios estados pulsados de la web original llevan texto blanco escrito a mano.
   Con la tinta de cada paso, en modo noche el relleno es claro y el blanco no se
   lee (1,9:1 en «Todos» del Archivo). Pasan a usar el texto «sobre acento», que es
   cal en modo claro y casi negro en modo noche: 8:1 o más en los dos.
   ========================================================================== */
html body section.page :is(
  .mp-btn[aria-pressed="true"], .mp-btn.is-in,
  .te-rchip[aria-pressed="true"], .chip[aria-pressed="true"],
  .seg button[aria-pressed="true"], .te-player-b[data-a="pause"],
  .route span, .te-below-float i
),
html body section.page .toc a:is(:hover, :focus-visible) {
  color: var(--btn-ink, var(--te-sobre-acento));
}

/* En «Modo día difícil» la letra crece, pero en la cabecera del móvil el nombre
   de la web se queda como estaba: si creciera, empujaría «Secciones» fuera de la
   pantalla (12 px, ya pasaba antes de esta tanda). */
@media (max-width: 480px) {
  html[data-calm] body .nav .brand b {
    font-size: 21px;
  }

  html[data-calm] body .nav .brand .logo {
    width: 35px;
  }

  html[data-calm] body .nav #menu-btn {
    font-size: 15.2px;
  }
}

/* ==========================================================================
   37 · «Bajar despacio» (E12), de Figma a código. Solo en «Cómo se reduce».
   Estructura del diseño: cabecera; escenario blanco con filete de 1 px y radio
   de 32 px; la escalera a la izquierda y la cartela a la derecha. La tinta es la
   del paso (en esta página, ciruela de Aprender); lo que vuelve atrás, granate.
   Los trazos no se escalan (vector-effect) para que midan lo mismo en el móvil.
   ========================================================================== */
html body .bd,
html body .pbody > section.bd {
  width: min(1200px, 100%);
  max-width: none;
  margin: clamp(3rem, 6vw, 5rem) auto;
}

html body .bd[hidden] {
  display: none;
}

html body .bd-sobre,
html body .bd-contador {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--hs, var(--accent));
}

html body .bd-tit,
html body .pbody .bd .bd-tit {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 1.8vw, 2.625rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

html body .bd-entr,
html body .pbody .bd .bd-entr {
  max-width: 700px;
  margin: 14px 0 40px;
  font-size: 1.1875rem;
  line-height: 31px;
  color: var(--ink-2);
}

html body .bd-con-dedo { display: none; }

@media (hover: none) {
  html body .bd-con-raton { display: none; }
  html body .bd-con-dedo { display: inline; }
}

html body .bd-escenario {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 40px;
  border: 1px solid var(--rule);
  border-radius: 32px;
  background: var(--card, var(--surface));
}

html body .bd-escalera {
  flex: 0 1 680px;
  min-width: 0;
  border-radius: 16px;
}

html body .bd-escalera:focus-visible {
  outline: 3px solid var(--te-focus, var(--hs));
  outline-offset: 6px;
}

html body .bd-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

html body .bd-svg path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke 0.45s var(--te-ease), stroke-width 0.45s var(--te-ease);
}

html body .bd-suelo { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 6; }
html body .bd-rellano { stroke: var(--hs, var(--accent)); stroke-width: 2.5; }
html body .bd-peldano { stroke: var(--rule-2); stroke-width: 1.5; }
html body .bd-peldano.es-pisado { stroke: var(--hs, var(--accent)); stroke-width: 2.5; }
html body .bd-peldano.es-vuelta { stroke: var(--marca); stroke-width: 2; stroke-dasharray: 5 5; }

html body .bd-punto { fill: var(--hs, var(--accent)); transition: fill 0.45s var(--te-ease); }
html body .bd-aliento {
  fill: var(--hs, var(--accent));
  opacity: 0.12;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 0.45s var(--te-ease), opacity 0.45s var(--te-ease);
}

html body .bd-descansillo {
  fill: var(--marca);
  font-family: var(--font-body);
  opacity: 0;
  transition: opacity 0.45s var(--te-ease);
}

html body .bd.es-sintomas .bd-punto,
html body .bd.es-sintomas .bd-aliento { fill: var(--marca); }
html body .bd.es-sintomas .bd-descansillo { opacity: 1; }

/* Al final, el punto respira en el descansillo (5 s tomar, 3 s sostener, 7 s soltar) */
html body .bd.es-final .bd-aliento {
  opacity: 0.16;
  animation: bd-respira 15s ease-in-out infinite;
}

@keyframes bd-respira {
  0%      { transform: scale(0.8); }
  33.33%  { transform: scale(1.25); }
  53.33%  { transform: scale(1.25); }
  100%    { transform: scale(0.8); }
}

@media (prefers-reduced-motion: reduce) {
  html body .bd.es-final .bd-aliento { animation: none; }
}

html[data-calm] body .bd.es-final .bd-aliento { animation: none; }

html body .bd-cartela {
  flex: 1 0 390px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

html body .bd-estado {
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: opacity 0.3s var(--te-ease), transform 0.4s var(--te-ease);
}

html body .bd-estado.es-cambio {
  opacity: 0;
  transform: translateY(4px);
}

html body .bd-estado p { margin: 0; }

html body .bd-paso-tit {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 300;
  line-height: 36px;
  letter-spacing: -0.005em;
  color: var(--ink);
}

html body .bd-paso-txt {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--ink-2);
}

html body .bd-controles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 12px;
}

/* Botón en píldora: cinco estilos, como el componente de Figma */
html body .bd-boton {
  min-height: 48px;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: var(--pulido-pildora, 999px);
  background: transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  transition: background-color 0.3s var(--te-ease), color 0.3s var(--te-ease),
    border-color 0.3s var(--te-ease), box-shadow 0.3s var(--te-ease), transform 0.35s var(--te-ease);
}

html body .bd-boton[hidden] { display: none; }

html body .bd-bajar { background: var(--hs, var(--accent)); color: var(--te-sobre-acento); }
html body .bd-subir { border-color: var(--rule-2); color: var(--ink); }
html body .bd-sintomas { border-color: var(--marca); color: var(--marca); }
html body .bd-estable { background: var(--marca); border-color: var(--marca); color: var(--te-sobre-acento); }

html body .bd-boton[aria-disabled="true"] {
  border-color: var(--rule);
  background: transparent;
  color: var(--muted);
  opacity: 0.55;
  cursor: not-allowed;
}

html body .bd-boton:focus-visible {
  outline: 3px solid var(--te-focus, var(--hs));
  outline-offset: 3px;
}

@media (hover: hover) {
  html body .bd-bajar:not([aria-disabled="true"]):hover {
    background: color-mix(in srgb, var(--hs, var(--accent)) 82%, var(--ink));
  }
  html body .bd-subir:not([aria-disabled="true"]):hover {
    border-color: var(--hs, var(--accent));
    box-shadow: inset 0 0 0 0.5px var(--hs, var(--accent));
    color: var(--hs, var(--accent));
  }
  html body .bd-sintomas:not([aria-disabled="true"]):hover {
    background: var(--marca);
    color: var(--te-sobre-acento);
  }
  html body .bd-estable:hover {
    background: color-mix(in srgb, var(--marca) 82%, var(--ink));
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html body .bd-boton:not([aria-disabled="true"]):hover { transform: scale(1.04); }
  html body .bd-boton:not([aria-disabled="true"]):active { transform: scale(0.97); }
}

html body .bd-aviso {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
  line-height: 22px;
  color: var(--muted);
}

/* Móvil: la escalera arriba, la cartela debajo y los botones a todo lo ancho */
@media (max-width: 900px) {
  html body .bd-escenario {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 24px 20px;
    border-radius: 24px;
  }

  html body .bd-escalera,
  html body .bd-cartela { flex: none; }
}

@media (max-width: 640px) {
  html body .bd-controles .bd-boton { flex: 1 1 100%; }
  html body .bd-paso-tit { font-size: 1.625rem; line-height: 1.2; }
  html body .bd-paso-txt { font-size: 1.0625rem; }
}

/* ==========================================================================
   38 · El umbral (decisión E27). La portada como el muestrario de una letra:
   el nombre en grande, un filete, qué es esto en un párrafo, la ficha con el
   manifiesto y, al final, algo pequeño y sutil: la escalera. Al pulsarla se
   despliegan los seis pasos, cada uno con su tinta; al pasar por un peldaño,
   la sala se tiñe de su color y su nombre aparece en grande.
   Letra: Cormorant Garamond (libre, SIL OFL), pariente de las romanas de
   Garamond como la Portrait de Commercial Type que Pati trajo de referencia.
   Solo para lo grande; el texto corrido sigue en Geist, que se lee mejor.
   Sin JavaScript, la escalera se ve ya abierta. Sin movimiento, sin dibujarse.
   ========================================================================== */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url("fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2-variations");
  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;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url("fonts/cormorant-garamond-latin-ext-wght-normal.woff2") format("woff2-variations");
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-display: swap;
  font-weight: 300 700;
  src: url("fonts/cormorant-garamond-latin-wght-italic.woff2") format("woff2-variations");
}

:root {
  --serif-fina: "Cormorant Garamond", "Iowan Old Style", Garamond, Georgia, serif;
}

html body .te-hero.tiene-umbral {
  padding: 0;
  border: 0;
  background: none;
}

html body .te-hero.tiene-umbral > .te-hero-in {
  display: none;
}

/* En la portada sobra el raíl lateral */
html body:has(#p-inicio:not([hidden])) .rail-escalera {
  display: none;
}

html body .umbral {
  --margen: clamp(20px, 4.5vw, 72px);
  --filete: color-mix(in srgb, var(--ink) 28%, var(--bg));
  padding: clamp(20px, 4vh, 40px) var(--margen) 0;
  color: var(--ink);
}

html body .um-fila {
  border-top: 1px solid var(--filete);
}

/* El nombre, como en un muestrario */
html body .um-titular {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 32px;
  padding: clamp(14px, 2.4vh, 26px) 0 clamp(36px, 9vh, 104px);
}

html body .um-tit {
  margin: 0;
  font-family: var(--serif-fina);
  font-size: clamp(4.25rem, 2rem + 9vw, 11rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--ink);
}

html body .um-tit:focus { outline: none; }

html body .um-lema {
  margin: 0;
  font-family: var(--serif-fina);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}

/* Qué es, en un párrafo grande */
html body .um-entrada {
  padding: clamp(16px, 2.6vh, 28px) 0 clamp(36px, 6vh, 64px);
}

html body .um-parrafo {
  max-width: 34em;
  margin: 0;
  font-family: var(--serif-fina);
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.25rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: pretty;
}

/* La ficha: datos a la izquierda, manifiesto a la derecha */
html body .um-ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: 28px clamp(28px, 5vw, 96px);
  padding: 22px 0 clamp(36px, 6vh, 64px);
}

html body .um-datos {
  display: grid;
  gap: 16px;
  align-content: start;
  margin: 0;
}

html body .um-datos dt,
html body .um-etq {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink);
}

html body .um-datos dd {
  margin: 2px 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-2);
}

html body .um-epigrafe {
  margin: 10px 0 14px;
  font-family: var(--serif-fina);
  font-size: clamp(1.4rem, 1.15rem + 0.7vw, 1.875rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.25;
}

html body .um-frases {
  max-width: 44em;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--serif-fina);
  font-size: clamp(1.15rem, 1rem + 0.35vw, 1.375rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}

/* las diez frases corren como un texto seguido, numeradas */
html body .um-frases li {
  display: inline;
}

html body .um-frases li + li::before {
  content: " ";
}

html body .um-num {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  vertical-align: 0.2em;
  color: var(--marca);
}

html body .um-mas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
  margin: 18px 0 0;
}

html body .um-mas a,
html body .um-web {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}

html body .um-mas a:hover { text-decoration-color: currentColor; }

/* El pie del muestrario: la escalera pequeña y la dirección */
html body .um-pie {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0 clamp(24px, 4vh, 40px);
}

html body .um-web {
  margin: 0;
  min-height: 0;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--muted);
}

html body .umbral-boton {
  display: inline-flex;
  align-items: flex-end;
  gap: 16px;
  padding: 10px 12px 10px 0;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  text-align: left;
}

html body .umbral-boton:focus-visible {
  outline: 3px solid var(--te-focus, var(--marca));
  outline-offset: 4px;
}

html body .umbral-mini {
  display: block;
  width: 92px;
  height: auto;
  overflow: visible;
}

html body .umbral-mini path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke 0.35s var(--te-ease), stroke-width 0.35s var(--te-ease);
}

html body .umbral-mini-punto { fill: var(--marca); }
html body .umbral-mini-halo {
  fill: var(--marca);
  opacity: 0.14;
  transform-box: fill-box;
  transform-origin: center;
  animation: te-respira 15s ease-in-out infinite;
}

html body .umbral-pista {
  padding-bottom: 2px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color 0.3s var(--te-ease);
}

html body .umbral-boton[aria-expanded="true"] .umbral-pista { color: var(--muted); }

html body .umbral-mini .p1 { --c: var(--paso-1); }
html body .umbral-mini .p2 { --c: var(--paso-2); transition-delay: 0.06s; }
html body .umbral-mini .p3 { --c: var(--paso-3); transition-delay: 0.12s; }
html body .umbral-mini .p4 { --c: var(--paso-4); transition-delay: 0.18s; }
html body .umbral-mini .p5 { --c: var(--paso-5); transition-delay: 0.24s; }
html body .umbral-mini .p6 { --c: var(--paso-6); transition-delay: 0.30s; }

/* Al acercarse (o abierta), la escalera pequeña enseña sus colores */
html body .umbral-boton[aria-expanded="true"] .umbral-mini path:not(.p0) {
  stroke: var(--c);
  stroke-width: 2;
}

@media (hover: hover) {
  html body .umbral-boton:hover .umbral-mini path:not(.p0) {
    stroke: var(--c);
    stroke-width: 2.25;
  }
  html body .umbral-boton:hover .umbral-pista { color: var(--marca); }
}

html body .umbral-boton:focus-visible .umbral-mini path:not(.p0) {
  stroke: var(--c);
  stroke-width: 2.25;
}

/* --- La sala: se abre al pulsar la escalera --- */
html body .umbral-escalera {
  margin: 0 calc(var(--margen) * -1);
  overflow: hidden;
  transition: height 0.8s var(--te-ease);
}

html body .umbral.es-cerrado .umbral-escalera {
  height: 0;
  visibility: hidden;
}

html body .um-sala {
  position: relative;
  height: clamp(520px, 78vh, 760px);
  padding: clamp(36px, 7vh, 72px) var(--margen) clamp(40px, 8vh, 80px);
  border-top: 1px solid var(--filete);
  background: var(--bg);
  transition: background-color 0.7s var(--te-ease), border-color 0.7s var(--te-ease);
}

html body .umbral-pasos {
  --landing: 8%;
  --tinta-sala: var(--ink);
  position: absolute;
  top: clamp(40px, 8vh, 84px);
  left: var(--margen);
  right: 12%;
  bottom: clamp(56px, 12vh, 128px);
  display: grid;
  grid-template-columns: var(--landing) repeat(6, 1fr);
  grid-template-rows: 1fr 0.86fr 0.74fr 0.64fr 0.55fr 0.47fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

html body .umbral-pasos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--landing);
  height: 2px;
  background: var(--tinta-sala);
  transform-origin: left;
  transition: transform 0.5s var(--te-ease), background-color 0.5s var(--te-ease);
}

html body .umbral-paso {
  --tinta: var(--paso-1);
  position: relative;
  grid-column: calc(var(--i) + 2);
  grid-row: calc(var(--i) + 1);
  min-width: 0;
}

html body .umbral-paso[data-paso="2"] { --tinta: var(--paso-2); }
html body .umbral-paso[data-paso="3"] { --tinta: var(--paso-3); }
html body .umbral-paso[data-paso="4"] { --tinta: var(--paso-4); }
html body .umbral-paso[data-paso="5"] { --tinta: var(--paso-5); }
html body .umbral-paso[data-paso="6"] { --tinta: var(--paso-6); }

html body .umbral-paso::before,
html body .umbral-paso::after {
  content: "";
  position: absolute;
  left: 0;
  background: var(--tinta);
  transition: transform 0.5s var(--te-ease), background-color 0.5s var(--te-ease), height 0.3s var(--te-ease), width 0.3s var(--te-ease);
}

html body .umbral-paso::before { top: 0; bottom: 0; width: 2px; transform-origin: top; }
html body .umbral-paso::after { right: 0; bottom: 0; height: 2px; transform-origin: left; }

html body .umbral-paso a {
  position: absolute;
  left: 16px;
  bottom: 12px;
  display: grid;
  gap: 2px;
  width: max-content;
  max-width: min(19rem, 26vw);
  padding: 4px 10px 4px 0;
  color: var(--tinta);
  text-decoration: none;
  border-radius: 10px;
  transition: color 0.5s var(--te-ease), opacity 0.5s var(--te-ease), transform 0.6s var(--te-ease);
}

html body .umbral-paso .n {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}

html body .umbral-paso .t {
  font-family: var(--serif-fina);
  font-size: clamp(1.6rem, 1rem + 1.4vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.015em;
}

html body .umbral-paso .d {
  max-height: 0;
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-2);
  opacity: 0;
  transition: max-height 0.5s var(--te-ease), opacity 0.4s var(--te-ease), color 0.5s var(--te-ease);
}

html body .umbral-paso a:focus-visible {
  outline: 3px solid var(--te-focus, var(--tinta));
  outline-offset: 4px;
}

html body .um-eco,
html body .um-orden {
  position: absolute;
  left: var(--margen);
  bottom: clamp(36px, 7vh, 72px);
  max-width: min(30rem, 42%);
  margin: 0;
}

html body .um-orden {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-2);
  transition: opacity 0.45s var(--te-ease);
}

html body .um-eco {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.45s var(--te-ease), transform 0.6s var(--te-ease);
}

html body .um-eco-n {
  display: block;
  font-family: var(--serif-fina);
  font-size: clamp(3.5rem, 1.5rem + 6vw, 8.5rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.025em;
}

html body .um-eco-d {
  display: block;
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.55;
}

html body .umbral-punto {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--marca);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--marca) 14%, transparent);
  pointer-events: none;
  transform: translate(var(--px, -100px), var(--py, -100px));
  transition: transform 0.7s var(--te-ease), background-color 0.5s var(--te-ease), box-shadow 0.5s var(--te-ease), opacity 0.4s;
}

/* cerrada: la escalera grande espera sin dibujar */
html body .umbral.es-cerrado .umbral-pasos::before { transform: scaleX(0); }
html body .umbral.es-cerrado .umbral-paso::before { transform: scaleY(0); }
html body .umbral.es-cerrado .umbral-paso::after { transform: scaleX(0); }
html body .umbral.es-cerrado .umbral-paso a { opacity: 0; transform: translateY(8px); }
html body .umbral.es-cerrado .umbral-punto,
html body .umbral.es-cerrado .um-orden { opacity: 0; }

/* al abrir, cada peldaño se dibuja después del anterior, bajando */
html body .umbral:not(.es-cerrado) .umbral-paso::before { transition-delay: calc(0.35s + var(--i) * 0.16s); }
html body .umbral:not(.es-cerrado) .umbral-paso::after { transition-delay: calc(0.47s + var(--i) * 0.16s); }
html body .umbral:not(.es-cerrado) .umbral-paso a { transition-delay: calc(0.6s + var(--i) * 0.16s); }
html body .umbral:not(.es-cerrado) .um-orden { transition-delay: 1.5s; }
html body .umbral.es-listo .umbral-paso::before,
html body .umbral.es-listo .umbral-paso::after,
html body .umbral.es-listo .umbral-paso a,
html body .umbral.es-listo .um-orden { transition-delay: 0s; }

/* pasar por un peldaño: la sala toma su color */
html body .um-sala.es-inundada {
  border-top-color: transparent;
  background: var(--inunda);
  color: var(--te-sobre-acento);
}

html body .um-sala.es-inundada .umbral-pasos { --tinta-sala: var(--te-sobre-acento); }
html body .um-sala.es-inundada .umbral-paso { --tinta: var(--te-sobre-acento); }
html body .um-sala.es-inundada .umbral-paso:not(.es-activo) a { opacity: 0.8; }
html body .um-sala.es-inundada .umbral-paso.es-activo::before { width: 3px; }
html body .um-sala.es-inundada .umbral-paso.es-activo::after { height: 3px; }
html body .um-sala.es-inundada .umbral-paso .d { color: var(--te-sobre-acento); }
html body .um-sala.es-inundada .um-orden { opacity: 0; }
html body .um-sala.es-inundada .um-eco { opacity: 1; transform: none; }
html body .um-sala.es-inundada .umbral-punto {
  background: var(--te-sobre-acento);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--te-sobre-acento) 22%, transparent);
}

@media (hover: hover) {
  html body .umbral-paso a:hover .d,
  html body .umbral-paso a:focus-visible .d {
    max-height: 5em;
    opacity: 1;
  }
}

/* sin movimiento: todo aparece de una vez */
@media (prefers-reduced-motion: reduce) {
  html body .umbral *,
  html body .umbral *::before,
  html body .umbral *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation: none !important;
  }
}

html[data-calm] body .umbral *,
html[data-calm] body .umbral *::before,
html[data-calm] body .umbral *::after {
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  animation: none !important;
}

/* móvil: todo en una columna; la escalera baja por la pantalla */
@media (max-width: 760px) {
  html body .um-ficha { grid-template-columns: 1fr; }
  html body .um-datos { grid-template-columns: 1fr 1fr; gap: 14px 20px; }

  html body .um-sala {
    height: auto;
    padding: 28px var(--margen) 32px;
  }

  html body .umbral-pasos {
    --landing: 0;
    position: static;
    display: block;
  }

  html body .umbral-pasos::before { display: none; }

  html body .umbral-paso {
    margin-left: calc(var(--i) * 7%);
    min-height: calc(76px - var(--i) * 5px);
  }

  html body .umbral-paso a {
    position: relative;
    left: auto;
    bottom: auto;
    max-width: none;
    padding: 12px 0 12px 16px;
  }

  html body .um-eco { display: none; }
  html body .um-orden {
    position: static;
    max-width: none;
    margin-top: 24px;
  }
  html body .umbral-punto { display: none; }
}

/* La cabecera, a la misma distancia del borde que el texto (Pati: «que los textos
   empiecen más a la izquierda»). En la portada, el nombre pequeño sobra: ya está
   en grande; queda solo la escalerita del logotipo. */
html body .nav .nav-in {
  max-width: none;
  padding-inline: clamp(20px, 4.5vw, 72px);
}

html body:has(#p-inicio:not([hidden])) .nav .brand-txt {
  display: none;
}

html body #p-inicio .te-wrap {
  max-width: none;
  padding-inline: clamp(20px, 4.5vw, 72px);
}

/* De primeras, solo el nombre (Pati, 3/11: «que de primeras solo ponga Tu escalera»).
   La primera pantalla es el nombre y nada más; lo demás empieza al bajar. */
html body .um-titular {
  min-height: calc(100svh - 81px - clamp(20px, 4vh, 40px));
  align-content: flex-end;
  align-items: flex-end;
  padding-bottom: clamp(56px, 16vh, 180px);
  box-sizing: border-box;
}

html body .um-tit {
  font-size: clamp(4.5rem, 1.5rem + 11vw, 13rem);
  line-height: 0.88;
}

html body .um-lema {
  padding-bottom: 0.6em;
}

@media (max-width: 760px) {
  html body .um-titular {
    min-height: calc(100svh - 68px - 20px);
    padding-bottom: 18vh;
  }
}

/* ==========================================================================
   39 · Los títulos de toda la web, en Cormorant Garamond (decisión E28, 3/11:
   «¡me gusta!»). Se declara como una familia aparte, «Cormorant Titulos»,
   agrandada un 9 % (size-adjust) para que su altura de x iguale la de Newsreader
   (0,386 frente a 0,426): así ningún título cambia de tamaño aparente y la
   maquetación de cada página se mantiene. La portada usa la Cormorant sin
   agrandar, porque sus tamaños ya están pensados para ella.
   ========================================================================== */
@font-face {
  font-family: "Cormorant Titulos";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  size-adjust: 109%;
  src: url("fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2-variations");
  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;
}

@font-face {
  font-family: "Cormorant Titulos";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  size-adjust: 109%;
  src: url("fonts/cormorant-garamond-latin-ext-wght-normal.woff2") format("woff2-variations");
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cormorant Titulos";
  font-style: italic;
  font-display: swap;
  font-weight: 300 700;
  size-adjust: 109%;
  src: url("fonts/cormorant-garamond-latin-wght-italic.woff2") format("woff2-variations");
}

:root {
  --font-display: "Cormorant Titulos", "Iowan Old Style", Garamond, Georgia, "Times New Roman", serif;
}

/* La Cormorant es más fina que la Newsreader al mismo grosor: los títulos grandes
   que iban en 300 pasan a 400 para conservar el mismo peso visual, sobre todo
   en blanco sobre la tinta de cada cabecera. */
html body section.page .phero h1,
html body section.page .pbody > h2,
html body section.page .pbody > section > h2,
html body section.page .sec h2,
html body .te-doors h2 {
  font-weight: 400;
}

/* ==========================================================================
   40 · «¿Qué necesitas hoy?» sin bloque granate (decisión E29, 3/11).
   De día, un tinte muy pálido del color de la estación (el 9 %), que cambia al
   pulsar «hoy»; de noche, carbón cálido. Sin cajas blancas: las puertas se
   separan con filetes finos, como el muestrario de la portada. El color lo pone
   el collage. Pati eligió «B de día y C de noche».
   ========================================================================== */
html body .te-doors,
html body .te-doors[data-estacion] {
  --te-on: var(--ink);
  --te-band-ink: var(--ink);
  --te-band-soft: var(--ink-2);
  --puerta-filete: color-mix(in srgb, var(--ink) 22%, transparent);
  background: color-mix(in srgb, var(--te-band) 9%, var(--bg));
  color: var(--ink);
  padding-top: clamp(64px, 8vw, 112px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body .te-doors,
:root:not([data-theme="light"]) body .te-doors[data-estacion] {
    --te-on: #FCFBFA;
    --te-band-ink: #FCFBFA;
    --te-band-soft: #E3DCD7;
    --puerta-filete: rgba(252, 251, 250, 0.22);
    background: #2A2624;
    color: #FCFBFA;
  }
}

:root[data-theme="dark"] body .te-doors,
:root[data-theme="dark"] body .te-doors[data-estacion] {
  --te-on: #FCFBFA;
  --te-band-ink: #FCFBFA;
  --te-band-soft: #E3DCD7;
  --puerta-filete: rgba(252, 251, 250, 0.22);
  background: #2A2624;
  color: #FCFBFA;
}

html body .te-doors .te-door {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--puerta-filete);
  border-radius: 0;
  padding: 22px 0 8px;
}

html body .te-doors .te-door-main {
  border-top: 0;
  padding: 0;
  overflow: visible;
}

html body .te-doors .te-door-main img {
  border-radius: 0;
}

html body .te-doors .te-door-b {
  padding: 22px 0 6px;
}

html body .te-doors .te-door-links,
html body .te-doors .te-door-links li {
  border-color: var(--puerta-filete);
}

html body .te-doors .te-door-links > li > a {
  padding-left: 0;
  padding-right: 0;
}

/* sin caja, el gesto al pasar el ratón está en el título y la flecha */
@media (hover: hover) {
  html body .te-doors .te-door:hover {
    background: transparent;
    border-color: var(--puerta-filete);
    transform: none;
  }

  html body .te-doors .te-door:hover h3 {
    color: var(--accent);
  }

  html body .te-doors .te-door-links a:hover {
    background: transparent;
    border-radius: 0;
  }
}

html body .te-doors .te-door h3 {
  transition: color 0.35s var(--te-ease);
}

/* =====================================================================
   Lote del 10/11/2026 · propuestas en vista previa (E30–E34, por decidir)
   ===================================================================== */
:root{
  --te-grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --te-vetas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' preserveAspectRatio='none'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045 .006' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .78 0 0 0 0 .86 0 0 0 0 .74 0 0 0 .5 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E");
}

/* E30 · Novedades como sala de prensa */
html body .news-filter{display:flex;flex-wrap:wrap;gap:.6rem;margin:2.2rem 0 .4rem;max-width:58rem}
html body .news-filter button{font:inherit;font-size:.98rem;min-height:48px;padding:.55rem 1.15rem;border-radius:999px;border:1px solid var(--rule-2,#CDC7C2);background:transparent;color:var(--ink);cursor:pointer;transition:background-color .35s cubic-bezier(.16,1,.3,1),color .35s cubic-bezier(.16,1,.3,1),border-color .35s}
html body .news-filter button .n{font-variant-numeric:tabular-nums;opacity:.75;margin-left:.15rem}
html body .news-filter button:hover{border-color:var(--accent)}
html body .news-filter button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--te-sobre-acento,#FCFBFA)}
html body .news-count{min-height:1.4em;margin:.3rem 0 0}
html body #p-novedades .news[data-sala]{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,56px);row-gap:0}
html body #p-novedades .news[data-sala] > .news-item{align-content:start;padding:1.6rem 0 1.8rem;border-top:1px solid var(--rule-2,#CDC7C2)}
html body #p-novedades .news[data-sala] > .news-item.news-lead:not([hidden]){grid-column:1 / -1;border-top:1px solid var(--ink);padding-top:2rem}
html body #p-novedades .news[data-sala].is-filtered > .news-item.news-lead{grid-column:auto;border-top-color:var(--rule-2,#CDC7C2)}
html body #p-novedades .news[data-sala] > .news-lead h3{font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.12;max-width:24ch}
html body #p-novedades .news[data-sala] > .news-lead > p:first-of-type{font-size:1.12rem;max-width:62ch}
html body #p-novedades .news[data-sala] .news-meta{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
html body .news-toggle{justify-self:start;display:inline-flex;align-items:center;gap:.55rem;min-height:48px;padding:.4rem 0;font:inherit;font-size:.98rem;background:none;border:0;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
html body .news-toggle i{width:.55rem;height:.55rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-.15rem) rotate(45deg);transition:transform .35s cubic-bezier(.16,1,.3,1)}
html body .news-toggle[aria-expanded="true"] i{transform:translateY(.1rem) rotate(-135deg)}
html body .news-more{display:grid;gap:.7rem}
@media (max-width:820px){ html body #p-novedades .news[data-sala]{grid-template-columns:1fr} }

/* E31 · Apartados con dibujo de línea (Arte y naturaleza) */
html body .te-ao{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(24px,4vw,64px);align-items:end;margin:2.6rem 0 3rem;padding:2.2rem 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule-2,#CDC7C2);max-width:var(--wide,72rem)}
html body .te-ao-draw{width:100%;height:auto;color:var(--accent);max-width:22rem}
html body .te-ao-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
html body .te-ao-col{display:grid;gap:.8rem;align-content:start;padding-left:1.1rem;border-left:1px solid var(--rule-2,#CDC7C2)}
html body .te-ao-k{display:flex;gap:.7rem;align-items:baseline;margin:0;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
html body .te-ao-k span{font-variant-numeric:tabular-nums}
html body .te-ao-col p:not(.te-ao-k){margin:0}
@media (max-width:760px){ html body .te-ao{grid-template-columns:1fr} html body .te-ao-cols{grid-template-columns:1fr} html body .te-ao-draw{max-width:16rem} }

/* E32 · Citas grandes sobre «sotobosque» (verde musgo con vetas y grano, hecho con código) */
html body .te-cita{position:relative;isolation:isolate;overflow:hidden;margin:3rem 0;padding:clamp(40px,7vw,96px) clamp(24px,6vw,88px);border-radius:0;color:#F4F1EC;
  background-color:#24392D;
  background-image:var(--te-grano),var(--te-vetas),radial-gradient(ellipse 60% 80% at 22% 30%,rgba(78,108,82,.55),transparent 70%),linear-gradient(90deg,#1E3127 0%,#2E4838 34%,#273F31 58%,#1B2B22 100%);
  background-size:220px 220px,100% 100%,100% 100%,100% 100%;background-blend-mode:soft-light,overlay,normal,normal}
html body .te-cita .te-cita-bg{position:absolute;inset:-12%;width:124%;height:124%;object-fit:cover;filter:blur(26px) saturate(.6);opacity:.22;mix-blend-mode:luminosity;z-index:-1}
html body .te-cita::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 70% 70% at 45% 50%,rgba(14,22,17,.45),transparent 75%)}
html body .te-cita blockquote{margin:0;max-width:62rem}
html body .te-cita blockquote p{margin:0;font-family:"Cormorant Titulos","Cormorant Garamond",Georgia,serif;font-weight:400;font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.06;text-align:left;text-wrap:balance;letter-spacing:-.005em}
html body .te-cita.te-cita--larga blockquote p{text-align:justify;text-align-last:left;text-wrap:pretty;hyphens:auto}
html body .te-cita figcaption{margin-top:1.8rem;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:#E3E8DF}

/* E33 · «Un respiro» sobre bruma (campos de color difuminados, de la paleta de los collages) */
html body .breath{
  background-color:#E7E1DB;
  background-image:var(--te-grano),
    radial-gradient(ellipse 120% 26% at 50% 57%,rgba(220,180,168,.7),transparent 70%),
    linear-gradient(180deg,#D6D2CE 0%,#E6E1DB 34%,#ECDDD5 49%,#E3C8BF 56%,#DDC1B7 66%,#D9BDB3 100%);
  --muted:#231F20;--ink-2:#231F20
  background-size:220px 220px,100% 100%,100% 100%;background-blend-mode:soft-light,normal,normal}
html[data-theme="dark"] body .breath{
  background-color:#1B1617;
  background-image:var(--te-grano),
    radial-gradient(ellipse 120% 24% at 50% 57%,rgba(108,44,56,.55),transparent 70%),
    linear-gradient(180deg,#1A1617 0%,#211B1C 38%,#2E1E21 52%,#26191B 64%,#1C1415 100%);--muted:#C9C0BD;--ink-2:#E2DAD7}
html body .breath .rhythms button:not([aria-pressed="true"]){background:rgba(252,251,250,.4)}
html[data-theme="dark"] body .breath .rhythms button:not([aria-pressed="true"]){background:rgba(21,18,19,.4)}

/* E34 · Mapa: senderos que se bifurcan al mover el ratón */
html body .mp-sendas{position:absolute;inset:0;z-index:0;pointer-events:none}
@media (prefers-reduced-motion: reduce){ html body .mp-sendas{display:none} }
html[data-calm] body .mp-sendas{display:none}

/* «Una cita para hoy»: el collage no desborda en pantallas estrechas (360 px) */
html body .te-today .te-today-img{max-width:100%}

/* =====================================================================
   Ajustes pedidos por Pati en la vista previa (10/11/2026, tarde)
   ===================================================================== */

/* E35 · El collage de la cabecera de cada paso ocupa su recuadro entero, sin margen de color */
@media (min-width:900px){
  html body section.page.group-page .phero{position:relative}
  html body section.page.group-page .phero .phero-in{position:static;display:block;padding-right:calc(min(42vw,680px) + 56px)}
  html body section.page.group-page .phero .phero-in > *:not(.sv-hcol){max-width:44rem}
  html body section.page.group-page .phero .sv-hcol{position:absolute;top:0;right:0;bottom:0;width:min(42vw,680px);margin:0;outline:0;transform:none;z-index:0}
  html body section.page.group-page .phero .sv-hcol img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
}
@media (max-width:899px){
  html body section.page.group-page .phero .phero-in{display:block}
  html body section.page.group-page .phero .sv-hcol{position:static;float:none;display:block;width:calc(100% + 2 * var(--te-gut, 20px));margin:1.6rem calc(-1 * var(--te-gut, 20px)) 0;outline:0;transform:none;max-width:none}
  html body section.page.group-page .phero .sv-hcol img{width:100%;aspect-ratio:4 / 5;object-fit:cover}
}

/* E36 · «Tu escalera: un recorrido en seis pasos»: al pasar por un paso, el bloque toma su color */
html body .menu-route{transition:background-color .45s cubic-bezier(.16,1,.3,1)}
html body .menu-route:has(.r1 a:hover, .r1 a:focus-visible){background-color:#4A2A40}
html body .menu-route:has(.r2 a:hover, .r2 a:focus-visible){background-color:#213A31}
html body .menu-route:has(.r3 a:hover, .r3 a:focus-visible){background-color:#6A1B2A}
html body .menu-route:has(.r4 a:hover, .r4 a:focus-visible){background-color:#6F4239}
html body .menu-route:has(.r5 a:hover, .r5 a:focus-visible){background-color:#3A2520}
html body .menu-route:has(.r6 a:hover, .r6 a:focus-visible){background-color:#1E3048}
@media (prefers-reduced-motion: reduce){ html body .menu-route{transition:none} }

/* E37 · Mapa del camino interior: un solo fondo de papel para toda la página, y cada territorio
   se enciende con su color al pasar el ratón o el foco (lavado, título en su tinta y subrayado que se dibuja) */
html body section#p-mapa{background-color:#F6F1EA;
  background-image:var(--te-grano),var(--mp-contour),radial-gradient(ellipse 80% 40% at 15% 20%,rgba(111,66,57,.07),transparent 70%),radial-gradient(ellipse 70% 50% at 90% 75%,rgba(30,48,72,.06),transparent 70%);
  background-size:220px 220px,100% 1100px,100% 100%,100% 100%;background-repeat:repeat,repeat-y,no-repeat,no-repeat;background-blend-mode:soft-light,normal,normal,normal}
html[data-theme="dark"] body section#p-mapa{background-color:#181415;background-blend-mode:overlay,normal,normal,normal}
html body #p-mapa .mp-terr{position:relative;isolation:isolate;--accent:var(--mp-c)}
html body #p-mapa .mp-terr::before{content:"";position:absolute;inset:0 -1.4rem;z-index:-1;pointer-events:none;opacity:0;
  background-image:radial-gradient(ellipse 60% 80% at 12% 25%,color-mix(in srgb,var(--mp-c) 18%,transparent),transparent 72%),
    radial-gradient(ellipse 60% 70% at 92% 85%,color-mix(in srgb,var(--mp-c) 10%,transparent),transparent 70%),
    linear-gradient(180deg,color-mix(in srgb,var(--mp-c) 7%,transparent),color-mix(in srgb,var(--mp-c) 4%,transparent));
  -webkit-mask-image:radial-gradient(ellipse 72% 95% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 72% 95% at 50% 50%,#000 55%,transparent 100%);
  transition:opacity .6s cubic-bezier(.16,1,.3,1)}
html body #p-mapa .mp-terr:hover::before,html body #p-mapa .mp-terr:focus-within::before{opacity:1}
html body #p-mapa .mp-terr:nth-of-type(1){--mp-c:#6F4239}
html body #p-mapa .mp-terr:nth-of-type(2){--mp-c:#4A2A40}
html body #p-mapa .mp-terr:nth-of-type(3){--mp-c:#6A1B2A}
html body #p-mapa .mp-terr:nth-of-type(4){--mp-c:#3A2520}
html body #p-mapa .mp-terr:nth-of-type(5){--mp-c:#213A31}
html body #p-mapa .mp-terr:nth-of-type(6){--mp-c:#1E3048}
html[data-theme="dark"] body #p-mapa .mp-terr:nth-of-type(1){--mp-c:#E6B4A6}
html[data-theme="dark"] body #p-mapa .mp-terr:nth-of-type(2){--mp-c:#D9B8CE}
html[data-theme="dark"] body #p-mapa .mp-terr:nth-of-type(3){--mp-c:#EBA9B5}
html[data-theme="dark"] body #p-mapa .mp-terr:nth-of-type(4){--mp-c:#D9B99F}
html[data-theme="dark"] body #p-mapa .mp-terr:nth-of-type(5){--mp-c:#A8C7B6}
html[data-theme="dark"] body #p-mapa .mp-terr:nth-of-type(6){--mp-c:#A9BFDA}
html body #p-mapa .mp-terr .mp-num{color:var(--mp-c)}
html body #p-mapa .mp-terr .mp-terr-h h2{width:fit-content;padding-bottom:.08em;background-image:linear-gradient(var(--mp-c),var(--mp-c));background-repeat:no-repeat;background-position:0 100%;background-size:0% 2px;transition:color .5s cubic-bezier(.16,1,.3,1),background-size .7s cubic-bezier(.16,1,.3,1)}
html body #p-mapa .mp-terr:hover .mp-terr-h h2,html body #p-mapa .mp-terr:focus-within .mp-terr-h h2{color:var(--mp-c);background-size:100% 2px}
html body #p-mapa .mp-terr:hover .mp-sub,html body #p-mapa .mp-terr:focus-within .mp-sub{color:var(--mp-c)}
html body #p-mapa .mp-terr .mp-n:hover,html body #p-mapa .mp-terr .mp-n:focus-visible{color:var(--mp-c)}
@media (prefers-reduced-motion: reduce){ html body #p-mapa .mp-terr::before,html body #p-mapa .mp-terr .mp-terr-h h2{transition:none} }
html[data-calm] body #p-mapa .mp-terr::before,html[data-calm] body #p-mapa .mp-terr .mp-terr-h h2{transition:none}

/* E32b · Citas grandes, más grandes y en más sitios: cada cita sobre la textura del color de su paso */
html body section.page .pbody > figure.te-cita{--g:clamp(16px,4vw,56px);width:calc(100vw - 2 * var(--g));max-width:none;margin-left:calc(50% - 50vw + var(--g));margin-right:0;transform:none;min-height:clamp(420px,68vh,760px);display:grid;align-content:center}
html body .te-cita blockquote p{font-size:clamp(2.5rem,6vw,5.4rem)}
html body section.page .pbody blockquote.pull,
html body section.page .pbody blockquote.quote,
html body section.page .pbody blockquote.voice{--cita-c:#24392D;position:relative;isolation:isolate;margin:3.2rem 0;padding:clamp(36px,6vw,80px) clamp(24px,5vw,72px);border:0;border-radius:0;color:#F4F1EC;
  background-color:var(--cita-c);
  background-image:var(--te-grano),var(--te-vetas),radial-gradient(ellipse 60% 80% at 20% 25%,rgba(255,255,255,.08),transparent 70%),linear-gradient(90deg,rgba(0,0,0,.18),rgba(255,255,255,.04) 40%,rgba(0,0,0,.22));
  background-size:220px 220px,100% 100%,100% 100%,100% 100%;background-blend-mode:soft-light,overlay,normal,normal;
  font-family:"Cormorant Titulos","Cormorant Garamond",Georgia,serif;font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.12;text-wrap:balance}
html body section.page .pbody blockquote.voice p{margin:0;font:inherit}
html body section.page .pbody blockquote.pull em,html body section.page .pbody blockquote.quote em{font-style:italic;color:inherit}
html body section.page .pbody blockquote.pull footer,
html body section.page .pbody blockquote.quote footer,
html body section.page .pbody blockquote.voice footer{margin-top:1.6rem;font-family:Geist,system-ui,sans-serif;font-size:.8rem;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:#E8E3DD}
html body section.page[data-paso="1"] .pbody blockquote{--cita-c:#4A2A40}
html body section.page[data-paso="2"] .pbody blockquote{--cita-c:#213A31}
html body section.page[data-paso="3"] .pbody blockquote{--cita-c:#6A1B2A}
html body section.page[data-paso="4"] .pbody blockquote{--cita-c:#6F4239}
html body section.page[data-paso="5"] .pbody blockquote{--cita-c:#3A2520}
html body section.page[data-paso="6"] .pbody blockquote{--cita-c:#1E3048}

/* E38 · Letra pequeña, como opción (Pati: «me gusta lo pequeño, pero no todo el que entra necesita lo que yo»).
   La letra normal sigue siendo la de partida; la pequeña reduce todo un 5 % (el texto corrido queda en unos 14 px). */
html[data-size="s"]{font-size:95%}
html body .size button[data-size="s"]{font-size:.75rem}
html body .size button[data-size="0"]{font-size:.875rem}
html body .size button[data-size="1"]{font-size:1.06rem}
html body .size button[data-size="2"]{font-size:1.25rem}

/* ==========================================================================
   E39 · Un solo eje (Pati: «no me gusta eso a la derecha y luego el texto en el centro;
   piensa cómo es más estético» y «mucho espacio a los lados en toda la web»).
   Todo arranca en la misma línea: el nombre de la web, el titular, el texto, las citas,
   los índices y la cronología. El marco se ensancha (120 rem) y su margen es el de la
   portada (4,5 % del ancho) hasta los 1920 px, así que se acaba el vacío a los lados y la
   cabecera, el titular y el texto empiezan siempre en la misma vertical. El texto corrido
   conserva su medida de lectura (42 rem, unos 70 caracteres) y lo ancho crece hacia
   la derecha. Quedan fuera la portada y el mapa, que tienen su propia composición.
   ========================================================================== */
html:root{--wide:120rem;--te-g:clamp(20px,4.5vw,72px)}
html body .wrap,
html body .pbody,
html body .te-wrap,
html body .menu-in{padding-inline:var(--te-g)}
html body .nav-in{padding-left:var(--te-g);padding-right:var(--te-g)}
html body section.page:not(:where(#p-inicio,#p-mapa)) .pbody > :where(:not(.te-chap,.te-cita,.toc)){margin-left:0;margin-right:auto}
html body section.page:not(:where(#p-inicio,#p-mapa)) .pbody > blockquote.pull{max-width:52rem}
html body section.page .page-photo .ph.art{box-sizing:border-box;max-width:var(--wide);margin-inline:auto;padding-left:var(--te-g);padding-right:var(--te-g);text-align:left}
html body section.page .page-photo .ph.art img{margin-left:0;margin-right:auto}

/* E40 · El índice «En esta página», al margen. En pantallas de 1200 px o más deja de ser
   una fila de botones al principio y pasa a la columna derecha: acompaña la lectura,
   marca dónde estás y ocupa con sentido el espacio que antes quedaba vacío. En las
   páginas con índice, todo lo demás se detiene antes de esa columna; las citas y bandas
   a todo lo ancho siguen pasando por debajo y el índice se aparta mientras tanto. */
html body section.page .pbody > nav.toc--margen{display:none}
@media (min-width:75em){
  html body section.page .pbody:has(> nav.toc){position:relative;--rail:15rem;--rail-gap:clamp(3rem,5vw,6rem)}
  html body section.page .pbody:has(> nav.toc) > :where(:not(.toc,.te-chap,.te-cita)){margin-right:calc(var(--rail) + var(--rail-gap))}
  html body section.page .pbody > nav.toc,
  html body section.page .pbody > nav.toc--margen{display:block;position:absolute;top:3rem;right:var(--te-g);bottom:5rem;width:var(--rail);max-width:none;margin:0;z-index:2;transition:opacity .35s var(--te-ease),visibility .35s}
  html body section.page .pbody > nav.toc.is-apartado{opacity:0;visibility:hidden}
  html body section.page .pbody > nav.toc .toc-in{position:sticky;top:112px;max-height:calc(100vh - 140px);overflow:auto;padding:2px 2px 2px 0}
  html body section.page .pbody > nav.toc h2{margin:0 0 .9rem;font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  html body section.page .pbody > nav.toc ol{display:block;margin:0;padding:0;list-style:none;border-left:1px solid var(--rule-2)}
  html body section.page .pbody > nav.toc li{margin:0;padding:0}
  html body section.page .pbody > nav.toc a{display:flex;align-items:center;min-height:44px;margin-left:-1px;padding:.35rem 0 .35rem 1.05rem;border:0;border-left:2px solid transparent;border-radius:0;background:none;color:var(--ink-2);font-size:.9rem;font-weight:400;line-height:1.35;text-wrap:pretty;transition:color .3s var(--te-ease),border-color .3s var(--te-ease)}
  html body section.page .pbody > nav.toc a:hover,
  html body section.page .pbody > nav.toc a:focus-visible{background:none;color:var(--ink);border-left-color:var(--ink-2)}
  html body section.page .pbody > nav.toc a[aria-current]{color:var(--accent);border-left-color:var(--accent);font-weight:500}
}
@media (prefers-reduced-motion:reduce){
  html body section.page .pbody > nav.toc,
  html body section.page .pbody > nav.toc a{transition:none}
}
html[data-calm] body section.page .pbody > nav.toc,
html[data-calm] body section.page .pbody > nav.toc a{transition:none}
/* E39 · Excepciones del eje: el buscador de fármacos y la escalera de «Bajar despacio» */
html body #p-farmacos .pbody > :is(.search,.count,#d-list,.empty){margin-left:0;margin-right:auto}
@media (min-width:75em){
  html body section.page .pbody:has(> nav.toc) > section.bd{width:auto}
}

/* ==========================================================================
   E41 · La escalera de la historia (Pati: «más dinámica y más completa»).
   Quince peldaños de 1904 a 2026, cada uno con su fuente al pie de la página. La lista
   es más ancha que el texto y baja hacia la derecha, como una escalera; los dos primeros
   peldaños enseñan cómo se anunciaban aquellos fármacos. Al bajar, cada huella se dibuja
   de izquierda a derecha y el texto aparece detrás; quieto con «Reducir movimiento» y en
   «Modo día difícil».
   ========================================================================== */
html body section.page .pbody > ol.te-time{max-width:58rem;margin-top:2rem}
@media (min-width:641px){
  html body .te-time li{margin-left:calc(var(--k) * 16px)}
  html body .te-time li.has-ad{grid-template-columns:5.2rem minmax(0,1fr) 6.25rem}
}
html body .te-time li::before{transform-origin:left center}
html body .te-time .te-time-ad{margin:0;align-self:start}
html body .te-time .te-time-ad img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:2px;filter:sepia(.15) saturate(.9);box-shadow:0 1px 0 var(--rule)}
html body .te-time .te-time-ad figcaption{margin-top:.4rem;font-size:.75rem;line-height:1.35;color:var(--muted)}
html body .te-time li:last-child::after{content:"";position:absolute;left:0;bottom:-1px;width:5.2rem;height:3px;background:var(--accent);opacity:.35}
html body .te-time.te-anim li{opacity:0;transform:translate3d(0,14px,0);transition:opacity .7s var(--te-ease),transform .7s var(--te-ease)}
html body .te-time.te-anim li::before{transform:scaleX(0);transition:transform .9s var(--te-ease) .08s}
html body .te-time.te-anim li.is-in{opacity:1;transform:none}
html body .te-time.te-anim li.is-in::before{transform:none}
@media (max-width:640px){
  html body .te-time li{margin-left:calc(var(--k) * 3px)}
  html body .te-time li.has-ad{grid-template-columns:4.2rem minmax(0,1fr)}
  html body .te-time li.has-ad .te-time-ad{grid-column:2;width:6.5rem;margin-top:.8rem}
}
@media (prefers-reduced-motion:reduce){
  html body .te-time.te-anim li,html body .te-time.te-anim li::before{opacity:1;transform:none;transition:none}
}
html[data-calm] body .te-time.te-anim li,html[data-calm] body .te-time.te-anim li::before{opacity:1;transform:none;transition:none}

/* ==========================================================================
   E42 · «Quién es quién», más grande y para explorar (Pati: «la lista de nombres más
   grande e interactiva»). Los nombres crecen hasta ocupar el ancho de la página y se
   pueden filtrar por grupo. Al pasar el ratón o con el teclado, el nombre elegido se
   adelanta, los demás se apagan y aparece un adelanto de su ficha. Con «Reducir
   movimiento» o en «Modo día difícil» no hay zoom: solo cambia el color.
   ========================================================================== */
html body section.page .pbody > nav.te-names{position:relative;max-width:none;margin-top:2rem;padding:1.4rem 0 2rem;font-size:clamp(1.6rem,1.15rem + 2.3vw,3.5rem);line-height:1.14;letter-spacing:-.022em}
html body .te-names .te-names-filtros{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.6rem;font-family:var(--font-body);font-size:1rem;letter-spacing:0;line-height:1.2}
html body .te-names .te-names-filtros button{min-height:44px;padding:0 1rem;border:1px solid var(--rule-2);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:.9rem;cursor:pointer;transition:background-color .3s var(--te-ease),border-color .3s var(--te-ease),color .3s var(--te-ease)}
html body .te-names .te-names-filtros button:hover{border-color:var(--ink-2)}
html body .te-names .te-names-filtros button[aria-pressed="true"]{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-ink,#FFFFFF)}
html body .te-names p{margin:0}
html body .te-names--viva a{display:inline-block;transition:color .35s var(--te-ease),opacity .35s var(--te-ease),transform .45s var(--te-ease);transform-origin:50% 75%}
html body .te-names--viva.is-mirando a:not(.is-on){opacity:.32}
html body .te-names--viva a.is-on{color:var(--accent);transform:scale(1.04);position:relative;z-index:1}
html body .te-names--viva a:focus-visible{outline-offset:6px}
html body .te-names .te-names-ficha{position:absolute;left:0;top:0;z-index:3;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem .9rem;width:min(24rem,100%);padding:1.1rem 1.25rem 1.15rem;border:1px solid var(--rule-2);border-radius:var(--rad-box,10px);background:var(--bg);box-shadow:0 18px 40px -24px rgba(20,16,18,.35);font-family:var(--font-body);font-size:.95rem;font-style:normal;letter-spacing:0;line-height:1.5;color:var(--ink);opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(0,6px,0);transition:opacity .25s var(--te-ease),transform .25s var(--te-ease),visibility .25s}
html body .te-names .te-names-ficha.is-on{opacity:1;visibility:visible;transform:none}
html body .te-names .te-names-ficha .av{grid-row:span 3;display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;background:var(--te-tint,var(--te-warm));color:var(--accent);font-size:.8rem;font-weight:600;letter-spacing:.04em}
html body .te-names .te-names-ficha .g{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
html body .te-names .te-names-ficha b{font-family:var(--font-display);font-size:1.35rem;font-weight:400;line-height:1.15;color:var(--ink)}
html body .te-names .te-names-ficha .r{color:var(--ink-2)}
html body .te-names .te-names-ficha .ir{grid-column:2;margin-top:.35rem;font-size:.82rem;color:var(--accent)}
@media (prefers-reduced-motion:reduce){
  html body .te-names--viva a,html body .te-names .te-names-ficha{transition:none}
  html body .te-names--viva a.is-on{transform:none}
  html body .te-names .te-names-ficha{transform:none}
}
html[data-calm] body .te-names--viva a,html[data-calm] body .te-names .te-names-ficha{transition:none}
html[data-calm] body .te-names--viva a.is-on{transform:none}