/*
Theme Name: Hogar del Niño
Theme URI: https://cliente89.artecagency.com/hdn/
Description: Tema del Hogar del Niño — dirección «Escuela a Mano Alzada». Vive en la misma red que el Patronato pero con su propio lenguaje visual: el sistema gráfico sale del trazo de crayón del logo de la escuela.
Author: Artec Agency
Template: hello-elementor
Version: 2.0.0
Text Domain: hdn-child
*/

/* ============================================================
   El logo de la escuela es un dibujo de crayón hecho por un niño.
   Todo lo de aquí abajo sale de ese trazo: bordes que nunca cierran
   igual dos veces, sombras sólidas desplazadas —como recortes pegados—
   y fotos ligeramente torcidas, como en un álbum escolar.

   Un solo mundo visual, claro, a propósito: es una escuela, y el papel
   de dibujo es el material. Por eso no hay variante oscura.
   ============================================================ */

:root{
  /* Los dos primeros salen literalmente del logo: el overol del niño
     y el vestido de la niña. El resto es la caja de crayones. */
  --rojo:#D54544;
  --rojo-osc:#A93636;
  --verde:#238E52;
  --verde-osc:#19673B;
  --amarillo:#F5B92E;
  --amarillo-osc:#C98A0B;
  --turquesa:#2FA8C4;
  --turquesa-osc:#12323B;

  /* Neutros: papel de dibujo, no gris. Sesgo cálido hacia el amarillo. */
  --papel:#FFF6E8;
  --papel-2:#FFEBD0;
  --tinta:#2C2420;
  --tinta-suave:#6E5C50;

  --ancho:1120px;

  /* Dos radios distintos que se alternan: si todas las cajas usaran el
     mismo, el «trazo a mano» se leería como una plantilla repetida. */
  --radio-mano:255px 14px 225px 16px/16px 225px 14px 255px;
  --radio-mano-2:14px 220px 18px 240px/230px 16px 250px 14px;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:"Nunito","Trebuchet MS",system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* clip y no hidden: hidden convierte el body en un contenedor de
     scroll —queda como «overflow: hidden auto»— y eso complica el
     position:sticky del portal. clip recorta sin crear ese contenedor. */
  overflow-x:clip;
}

h1,h2,h3,h4,.display{
  font-family:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.02em;
  text-wrap:balance;
  margin:0;
}

p{margin:0}
img{max-width:100%;height:auto}
a{color:inherit}

/* Hello Elementor pinta todo <button> con su magenta. Se neutraliza
   arriba del todo para que cualquier componente posterior le gane sin
   necesidad de !important. */
button,[type="button"],[type="submit"],[type="reset"],
button:hover,button:focus,
[type="button"]:hover,[type="button"]:focus,
[type="submit"]:hover,[type="submit"]:focus{
  background-color:transparent;
  border-color:transparent;
  color:inherit;
}

:focus-visible{outline:3px dashed var(--turquesa);outline-offset:4px}

.hdn-salto{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:200;
  background:var(--tinta);
  color:var(--papel);
  padding:12px 22px;
  font-family:"Fredoka",sans-serif;
}
.hdn-salto:focus{left:8px;top:8px}

.hdn-envoltura{
  width:100%;
  max-width:var(--ancho);
  margin:0 auto;
  padding:0 24px;
}

/* Etiqueta de sección. Siempre lleva delante un punto de crayón: sin él
   parecía una etiqueta de sistema, no un rótulo escrito a mano. */
.hdn-rotulo{
  font-family:"Fredoka",sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:18px;
}
.hdn-rotulo::before{
  content:"";
  width:12px;height:12px;
  background:currentColor;
  border-radius:60% 40% 55% 45%/45% 55% 40% 60%;
  flex:none;
}

/* ============================================================
   BOTONES
   La sombra sólida desplazada es la pieza clave: hace que el botón
   parezca recortado y pegado sobre el papel. Al pulsar, se hunde.
   ============================================================ */
.hdn-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:"Fredoka",sans-serif;
  font-weight:600;
  font-size:17px;
  padding:15px 30px;
  border:3px solid var(--tinta);
  border-radius:999px;
  background:var(--amarillo);
  color:var(--tinta);
  text-decoration:none;
  cursor:pointer;
  box-shadow:4px 5px 0 var(--tinta);
  transition:transform .14s ease,box-shadow .14s ease;
}
.hdn-btn:hover{transform:translate(2px,3px);box-shadow:1px 2px 0 var(--tinta)}
.hdn-btn:active{transform:translate(4px,5px);box-shadow:0 0 0 var(--tinta)}
.hdn-btn--rojo{background:var(--rojo);color:#FFF8EC}
.hdn-btn--papel{background:var(--papel)}
.hdn-btn--linea{
  background:transparent;
  box-shadow:none;
  border-radius:var(--radio-mano);
}
.hdn-btn--linea:hover{background:rgba(255,255,255,.18);transform:none;box-shadow:none}

/* ============================================================
   BARRA DE RED — lo único que se comparte visualmente con el resto
   de la red PBO: cruza los sitios del Patronato.
   ============================================================ */
.hdn-red{
  background:#454a7a;
  color:var(--papel);
  font-size:13.5px;
  /* Por encima de la cabecera: el líquido asoma unos píxeles hacia
     arriba para que su canto no deje ver una rendija. */
  position:relative;
  z-index:41;
}
.hdn-red .hdn-envoltura{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 22px;
  padding-top:9px;
  padding-bottom:9px;
}
.hdn-red__etq{
  font-family:"Fredoka",sans-serif;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-size:11.5px;
  opacity:.62;
}
.hdn-red ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.hdn-red a{
  text-decoration:none;
  opacity:.85;
  border-bottom:1.5px solid transparent;
  padding-bottom:1px;
}
.hdn-red a:hover{opacity:1;border-bottom-color:var(--amarillo)}
.hdn-red .current-menu-item > a,
.hdn-red__yo{opacity:1;color:var(--amarillo)}

/* ============================================================
   CABECERA
   ============================================================ */
.hdn-cabecera{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--papel);
  border-bottom:3px solid var(--tinta);
}
.hdn-cabecera .hdn-envoltura{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-top:13px;
  padding-bottom:13px;
}
.hdn-marca{display:flex;align-items:center;gap:12px;text-decoration:none}
.hdn-marca img{display:block;max-height:46px;width:auto}
.hdn-marca__txt{
  font-family:"Fredoka",sans-serif;
  font-weight:700;
  font-size:21px;
  line-height:.95;
  letter-spacing:-.02em;
}
.hdn-marca__txt small{
  display:block;
  font-family:"Nunito",sans-serif;
  font-weight:400;
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tinta-suave);
  margin-top:3px;
}

.hdn-nav{display:flex;align-items:center;gap:26px}
.hdn-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:26px}
.hdn-nav a{
  font-family:"Fredoka",sans-serif;
  font-weight:500;
  text-decoration:none;
  font-size:16.5px;
  padding-bottom:2px;
  border-bottom:2.5px solid transparent;
}
.hdn-nav a:hover,
.hdn-nav .current-menu-item > a{border-bottom-color:var(--rojo)}
.hdn-nav .hdn-btn{padding:11px 22px;font-size:15.5px;box-shadow:3px 4px 0 var(--tinta);border-bottom-width:3px}
.hdn-nav .hdn-btn:hover{border-bottom-color:var(--tinta)}

.hdn-burger{
  display:none;
  width:48px;height:44px;
  border:3px solid var(--tinta);
  border-radius:var(--radio-mano-2);
  background:var(--papel);
  cursor:pointer;
  padding:0;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}
.hdn-burger span{display:block;width:22px;height:3px;background:var(--tinta);border-radius:2px}

/* ============================================================
   CABECERA LÍQUIDA

   Al bajar, la barra se derrite hacia el centro y se queda en una
   cápsula con el logo. Al pulsarla —o al volver arriba— el líquido se
   extiende otra vez hasta los bordes.

   La forma no es la cabecera: son dos capas de gotas pintadas por
   debajo, una de tinta y otra de papel, cada una con un filtro «goo»
   (desenfoque + umbral de opacidad). Ese umbral es lo que hace que dos
   manchas cercanas se fundan como líquido. La capa de tinta va 3 px más
   grande que la de papel y así el borde de crayón sobrevive al filtro,
   que se comería un border normal.

   Sin JavaScript no se activa nada de esto: la clase .hdn-cab-liquida
   la pone el script, y hasta entonces la cabecera es la barra de siempre.
   ============================================================ */
.hdn-goo-defs{position:absolute;width:0;height:0;overflow:hidden}
.hdn-liquido{display:none}

.hdn-cabecera.hdn-cab-liquida{
  background:transparent;
  border-bottom:0;
  /* La franja fija ya no es opaca: que no se trague los clics del
     contenido que pasa por debajo. */
  pointer-events:none;
}
/* La cabecera flota por encima del contenido en vez de empujarlo. Antes
   seguía ocupando su franja y, al volverse cápsula transparente, esa
   franja quedaba como un hueco crema entre la barra de red y el hero.
   El margen negativo de su propia altura hace que lo siguiente suba por
   debajo; la altura la mide el script en --hdn-cab-alto. */
.hdn-cabecera.hdn-cab-liquida{margin-bottom:calc(-1 * var(--hdn-cab-alto, 0px))}

/* Páginas interiores: el contenido se aparta lo que mide la cabecera,
   para que la barra abierta no le tape el principio. */
.hdn-cab-liquida ~ #contenido{padding-top:var(--hdn-cab-alto, 0px)}

/* Portada: el hero sí sube por detrás —es la gracia—, y alarga su
   relleno lo mismo para que el titular no quede debajo de la barra. */
.hdn-cab-liquida ~ #contenido > .hdn-hero:first-child{
  margin-top:calc(-1 * var(--hdn-cab-alto, 0px));
  padding-top:calc(74px + var(--hdn-cab-alto, 0px));
}

.hdn-cab-liquida .hdn-envoltura{position:relative;z-index:1}
.hdn-cab-liquida .hdn-marca,
.hdn-cab-liquida .hdn-burger,
.hdn-cab-liquida .hdn-nav{pointer-events:auto}

.hdn-cab-liquida .hdn-liquido{
  display:block;
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  /* La barra abierta se dibuja 40 px más ancha por cada lado para que
     el filtro no redondee sus esquinas a la vista. Sin este recorte ese
     sobrante contaba como desborde lateral de la página. Solo en
     horizontal: en vertical la cápsula necesita sitio para su sombra. */
  overflow-x:clip;
  filter:drop-shadow(0 0 0 rgba(44,36,32,0));
  transition:filter .45s ease;
}
/* La sombra dura de recorte pegado solo cuando es cápsula: en la barra
   abierta se vería como un segundo borde. */
.hdn-cabecera.es-capsula .hdn-liquido{filter:drop-shadow(4px 5px 0 var(--tinta))}

.hdn-liquido__capa{position:absolute;inset:0;filter:url(#hdn-goo)}
.hdn-gota{position:absolute;display:block;border-radius:999px}
.hdn-liquido__capa--tinta .hdn-gota{background:var(--tinta)}
.hdn-liquido__capa--papel .hdn-gota{background:var(--papel)}

/* Botón real encima de la cápsula: el logo de debajo es un enlace a
   la portada, y aquí pulsar tiene que desplegar, no navegar. */
.hdn-capsula{
  position:absolute;
  z-index:2;
  pointer-events:auto;
  padding:0;
  border:0;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
}
.hdn-capsula[hidden]{display:none}
.hdn-capsula:focus-visible{outline:3px dashed var(--turquesa);outline-offset:6px}

/* ============================================================
   DIVISOR DE TRAZO — separa los bloques de color con una línea
   ondulada en vez de un canto recto.
   ============================================================ */
.hdn-trazo{display:block;width:100%;height:26px}
.hdn-trazo path{fill:none;stroke-width:4;stroke-linecap:round}

/* ============================================================
   BLOQUES DE COLOR
   ============================================================ */
.hdn-bloque{position:relative;padding:96px 0}
.hdn-bloque--papel{background:var(--papel)}
.hdn-bloque--crema{background:var(--papel-2)}
.hdn-bloque--verde{background:var(--verde);color:#FFF8EC}
.hdn-bloque--rojo{background:var(--rojo);color:#FFF8EC}
.hdn-bloque--turq{background:var(--turquesa);color:var(--turquesa-osc)}
.hdn-bloque--tinta{background:var(--tinta);color:var(--papel)}

/* ============================================================
   HERO
   ============================================================ */
.hdn-hero{
  position:relative;
  background:var(--verde-osc);
  color:#FFF8EC;
  overflow:hidden;
  padding:74px 0 82px;
}
.hdn-hero__foto{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center 34%;
  opacity:.42;
}
.hdn-hero__velo{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(25,103,59,.55) 0%,rgba(25,103,59,.34) 45%,rgba(25,103,59,.88) 100%);
}
.hdn-hero .hdn-envoltura{position:relative;z-index:2}
.hdn-hero h1{
  font-size:clamp(43px,7.6vw,92px);
  max-width:15ch;
  text-shadow:0 3px 24px rgba(12,52,30,.5);
}
.hdn-hero__sub{
  margin-top:26px;
  max-width:52ch;
  font-size:clamp(17.5px,2vw,21px);
  line-height:1.5;
  text-shadow:0 2px 14px rgba(12,52,30,.6);
}
/* La palabra subrayada a mano. El trazo es un SVG, no un border-bottom:
   una línea recta aquí rompería el lenguaje de toda la página. */
.hdn-acc{position:relative;display:inline-block;white-space:nowrap;color:var(--amarillo)}
.hdn-acc svg{position:absolute;left:-3%;bottom:-.2em;width:106%;height:.42em;overflow:visible}
.hdn-acc path{fill:none;stroke:var(--amarillo);stroke-width:9;stroke-linecap:round}
.hdn-hero__pie{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}

/* ============================================================
   GARABATOS FLOTANTES
   ============================================================ */
.hdn-garabato{position:absolute;pointer-events:none;z-index:1;opacity:.9}
.hdn-garabato svg{display:block}

/* ============================================================
   CIFRAS
   ============================================================ */
.hdn-cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hdn-cifra{
  background:var(--papel);
  border:3.5px solid var(--tinta);
  border-radius:var(--radio-mano);
  padding:26px 24px 24px;
  box-shadow:5px 6px 0 var(--tinta);
}
.hdn-cifra:nth-child(2n){border-radius:var(--radio-mano-2)}
.hdn-cifra__n{
  font-family:"Fredoka",sans-serif;
  font-weight:700;
  font-size:clamp(40px,4.6vw,56px);
  line-height:1;
  letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
  display:block;
}
.hdn-cifra:nth-child(4n+1) .hdn-cifra__n{color:var(--rojo)}
.hdn-cifra:nth-child(4n+2) .hdn-cifra__n{color:var(--verde)}
.hdn-cifra:nth-child(4n+3) .hdn-cifra__n{color:var(--turquesa)}
.hdn-cifra:nth-child(4n+4) .hdn-cifra__n{color:var(--amarillo-osc)}
.hdn-cifra__etq{display:block;margin-top:10px;font-size:15px;line-height:1.45;color:var(--tinta-suave)}
.hdn-cifra__etq b{
  display:block;
  font-family:"Fredoka",sans-serif;
  font-weight:600;
  font-size:15px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--tinta);
  margin-bottom:3px;
}

/* ============================================================
   TEXTO A DOS COLUMNAS
   ============================================================ */
.hdn-dos{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.hdn-dos h2{font-size:clamp(31px,3.9vw,46px)}
.hdn-dos p + p{margin-top:16px}
.hdn-entradilla{font-size:19.5px;line-height:1.55}

/* ============================================================
   FOTO ENMARCADA — pegada como en un álbum. Se endereza al pasar
   el cursor, que es el único premio que necesita.
   ============================================================ */
.hdn-marco{
  border:4px solid var(--tinta);
  border-radius:var(--radio-mano);
  overflow:hidden;
  box-shadow:8px 9px 0 var(--tinta);
  transform:rotate(-1.4deg);
  transition:transform .2s ease;
  background:var(--papel-2);
}
.hdn-marco--der{transform:rotate(1.6deg);border-radius:var(--radio-mano-2)}
.hdn-marco:hover{transform:rotate(0)}
.hdn-marco img{display:block;width:100%;height:100%;object-fit:cover}

/* ============================================================
   LOS ESPACIOS DE LA ESCUELA
   ============================================================ */
.hdn-pestanas{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.hdn-pestana{
  font-family:"Fredoka",sans-serif;
  font-weight:500;
  font-size:16px;
  padding:10px 20px;
  border:3px solid currentColor;
  border-radius:999px;
  background:transparent;
  color:inherit;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.hdn-pestana:hover{transform:translateY(-2px)}
.hdn-pestana[aria-selected="true"]{
  background:var(--tinta);
  color:var(--papel);
  border-color:var(--tinta);
}
.hdn-espacio{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
.hdn-espacio__media{
  aspect-ratio:4/3;
  border:4px solid var(--tinta);
  border-radius:var(--radio-mano);
  overflow:hidden;
  box-shadow:9px 10px 0 var(--tinta);
  display:grid;
  place-items:center;
  background:var(--amarillo);
}
.hdn-espacio__media img{width:100%;height:100%;object-fit:cover;display:block}
/* Espacio sin fotografía todavía: su color y su inicial, en vez de un hueco. */
.hdn-espacio__inicial{
  font-family:"Fredoka",sans-serif;
  font-weight:700;
  font-size:clamp(64px,11vw,132px);
  color:var(--tinta);
  letter-spacing:-.05em;
  line-height:1;
}
.hdn-espacio__n{
  font-family:"Fredoka",sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--tinta-suave);
}
.hdn-espacio h3{font-size:clamp(28px,3.4vw,40px);margin:8px 0 16px}
.hdn-espacio p{font-size:18.5px;max-width:44ch}
.hdn-espacio__dato{
  margin-top:22px;
  display:inline-block;
  font-family:"Fredoka",sans-serif;
  font-weight:600;
  font-size:15.5px;
  padding:8px 18px;
  border:3px solid var(--tinta);
  border-radius:var(--radio-mano-2);
  background:var(--papel);
}

/* ============================================================
   BANDA DE FOTOS A SANGRE
   ============================================================ */
.hdn-banda{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  border-top:4px solid var(--tinta);
  border-bottom:4px solid var(--tinta);
}
.hdn-banda img{display:block;width:100%;height:340px;object-fit:cover}
.hdn-banda__b{border-left:4px solid var(--tinta)}

/* ============================================================
   INCLUSIÓN — Escuela Nacional de Sordos
   ============================================================ */
.hdn-sordos{display:grid;grid-template-columns:1.15fr .85fr;gap:54px;align-items:center}
.hdn-sordos h2{font-size:clamp(32px,4.2vw,50px)}
.hdn-sordos p{margin-top:20px;font-size:19px;max-width:46ch}
.hdn-cero{
  border:4px solid #FFF8EC;
  border-radius:var(--radio-mano);
  padding:36px 30px;
  text-align:center;
}
.hdn-cero__n{
  font-family:"Fredoka",sans-serif;
  font-weight:700;
  font-size:clamp(76px,12vw,132px);
  line-height:.86;
  letter-spacing:-.05em;
  display:block;
  font-variant-numeric:tabular-nums;
}
.hdn-cero__t{display:block;margin-top:14px;font-size:17.5px;line-height:1.45}

/* ============================================================
   TESTIMONIOS
   ============================================================ */
.hdn-voces{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.hdn-voz{
  background:var(--papel);
  border:3.5px solid var(--tinta);
  border-radius:var(--radio-mano);
  padding:30px 28px;
  box-shadow:6px 7px 0 var(--tinta);
  display:flex;
  flex-direction:column;
  gap:16px;
  margin:0;
}
.hdn-voz:nth-child(3n+2){border-radius:var(--radio-mano-2)}
.hdn-voz__t{font-size:17px;line-height:1.6;font-style:italic;flex:1;margin:0}
.hdn-voz__q{font-family:"Fredoka",sans-serif;font-weight:700;font-size:44px;line-height:.6;height:20px}
.hdn-voz:nth-child(3n+1) .hdn-voz__q{color:var(--rojo)}
.hdn-voz:nth-child(3n+2) .hdn-voz__q{color:var(--verde)}
.hdn-voz:nth-child(3n+3) .hdn-voz__q{color:var(--turquesa)}
.hdn-voz__n{font-family:"Fredoka",sans-serif;font-weight:600;font-size:17.5px}
.hdn-voz__r{display:block;font-family:"Nunito",sans-serif;font-weight:400;font-size:14.5px;color:var(--tinta-suave);margin-top:2px}

/* ============================================================
   LLAMADA DE INGRESO
   ============================================================ */
.hdn-ingreso{text-align:center;max-width:640px;margin:0 auto}
.hdn-ingreso h2{font-size:clamp(33px,4.6vw,56px)}
.hdn-ingreso p{margin-top:20px;font-size:19px}
.hdn-ingreso .hdn-btn{margin-top:32px}

/* ============================================================
   PÁGINAS INTERIORES
   ============================================================ */
.hdn-pagina{padding:70px 0 96px}
.hdn-pagina__cab{
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:48px;
  align-items:center;
  margin-bottom:56px;
}
.hdn-pagina h1{font-size:clamp(36px,5.2vw,64px);margin-bottom:18px}
.hdn-entrada{max-width:68ch}
.hdn-entrada h2{font-size:clamp(26px,3.2vw,36px);margin:44px 0 14px}
.hdn-entrada h3{font-size:clamp(21px,2.4vw,26px);margin:32px 0 10px}
.hdn-entrada p{margin-bottom:16px}
.hdn-entrada ul,.hdn-entrada ol{margin:0 0 18px;padding-left:22px}
.hdn-entrada li{margin-bottom:7px}
.hdn-entrada strong{font-weight:700}
.hdn-entrada > p:first-child{font-size:19.5px;line-height:1.55}

/* ============================================================
   PIE
   ============================================================ */
.hdn-pie{background:var(--tinta);color:var(--papel);padding:64px 0 34px}
.hdn-pie__rejilla{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:44px;
  padding-bottom:38px;
  border-bottom:1px solid rgba(255,246,232,.2);
}
.hdn-pie h4{
  font-size:13px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--amarillo);
  margin:0 0 16px;
}
.hdn-pie ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.hdn-pie a{text-decoration:none;opacity:.86}
.hdn-pie a:hover{opacity:1;color:var(--amarillo)}
.hdn-pie__nota{font-size:15px;line-height:1.6;opacity:.8;max-width:38ch;margin-top:14px}
.hdn-pie__dir{opacity:.8;line-height:1.5}
.hdn-pie__legal{
  padding-top:22px;
  font-size:13.5px;
  opacity:.62;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}

/* ============================================================
   ADAPTACIÓN
   ============================================================ */
@media (max-width:900px){
  .hdn-cifras{grid-template-columns:repeat(2,1fr)}
  .hdn-dos,.hdn-espacio,.hdn-sordos,.hdn-pagina__cab{grid-template-columns:1fr;gap:36px}
  .hdn-voces{grid-template-columns:1fr}
  .hdn-banda{grid-template-columns:1fr}
  .hdn-banda__b{border-left:0;border-top:4px solid var(--tinta)}
  .hdn-banda img{height:250px}
  .hdn-pie__rejilla{grid-template-columns:1fr 1fr}
  .hdn-bloque{padding:70px 0}

  .hdn-burger{display:flex}
  .hdn-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--papel);
    border-bottom:3px solid var(--tinta);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px 24px 20px;
  }
  .hdn-nav[hidden]{display:none}
  .hdn-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .hdn-nav li{border-bottom:1px solid rgba(44,36,32,.12)}
  .hdn-nav a{display:block;padding:13px 0;font-size:18px;border-bottom:0}
  .hdn-nav .hdn-btn{margin-top:16px;justify-content:center}
}
@media (min-width:901px){
  .hdn-nav[hidden]{display:flex}
}
@media (max-width:560px){
  .hdn-cifras{grid-template-columns:1fr}
  .hdn-pie__rejilla{grid-template-columns:1fr}
  .hdn-red .hdn-envoltura{font-size:12.5px}
}

/* ============================================================
   VENTANA DE DONACIÓN
   El formulario de Zeffy encima de la página, en un <dialog> nativo:
   el navegador ya se ocupa de atrapar el foco y de cerrar con Esc.
   ============================================================ */
.hdn-donar{
  width:min(560px, calc(100vw - 28px));
  max-width:none;
  max-height:calc(100dvh - 28px);
  margin:auto;
  padding:0;
  border:0;
  background:transparent;
  color:var(--tinta);
  overflow:visible;
}
.hdn-donar::backdrop{background:rgba(44,36,32,.62);backdrop-filter:blur(3px)}
.hdn-donar__caja{
  display:flex;
  flex-direction:column;
  max-height:calc(100dvh - 28px);
  background:var(--papel);
  border:4px solid var(--tinta);
  /* Irregular como el resto, pero sin los radios gigantes de las
     tarjetas: en una caja tan alta se comerían las esquinas del formulario. */
  border-radius:26px 20px 30px 22px/22px 30px 20px 26px;
  box-shadow:9px 10px 0 var(--tinta);
  overflow:hidden;
}
.hdn-donar__cab{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding:22px 22px 16px 24px;
  border-bottom:3px solid var(--tinta);
}
.hdn-donar__cab .hdn-rotulo{margin-bottom:8px}
.hdn-donar__cab h2{font-size:clamp(26px,4vw,34px)}
.hdn-donar__nota{margin-top:8px;font-size:15px;line-height:1.5;color:var(--tinta-suave);max-width:42ch}

.hdn-donar__cerrar{
  flex:none;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  padding:0;
  border:3px solid var(--tinta);
  border-radius:999px;
  background:var(--papel);
  color:var(--tinta);
  cursor:pointer;
  box-shadow:3px 4px 0 var(--tinta);
  transition:transform .14s ease,box-shadow .14s ease;
}
/* El reset de botones del tema padre deja fondo y borde transparentes en
   :hover y :focus con más especificidad que una clase sola: se repiten aquí. */
.hdn-donar__cerrar:hover,
.hdn-donar__cerrar:focus{
  background-color:var(--papel);
  border-color:var(--tinta);
  color:var(--tinta);
}
.hdn-donar__cerrar:hover{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--tinta)}

.hdn-donar__marco{position:relative;flex:1;min-height:0;overflow:auto;background:#fff}
.hdn-donar__zeffy{display:block;width:100%;height:min(72dvh,860px);border:0}
.hdn-donar__cargando{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  margin:0;
  font-family:"Fredoka",sans-serif;
  font-weight:500;
  color:var(--tinta-suave);
  background:var(--papel);
}
.hdn-donar.esta-listo .hdn-donar__cargando{display:none}
.hdn-donar__alt{
  margin:0;
  padding:11px 24px 14px;
  font-size:14px;
  color:var(--tinta-suave);
  border-top:1px solid rgba(44,36,32,.14);
}
.hdn-donar__alt a{font-weight:600;color:var(--tinta)}

/* Mientras está abierta, la página de detrás no se desplaza. */
html.hdn-modal-abierto{overflow:hidden}

@media (max-width:560px){
  .hdn-donar__cab{padding:18px 16px 14px 18px}
  .hdn-donar__caja{box-shadow:6px 7px 0 var(--tinta)}
  .hdn-donar__zeffy{height:min(70dvh,760px)}
}

/* ============================================================
   MOVIMIENTO

   Las entradas, la apertura y los recorridos los lleva GSAP con
   ScrollTrigger desde assets/js/hdn.js. Aquí abajo solo queda lo que
   es estructura —el portal y el recorrido lateral— y el apagado para
   quien pide menos movimiento.

   A propósito no hay una sola regla que ponga opacity:0. GSAP parte del
   estado final y retrocede, así que si el script no llega la página se
   lee entera. Esconder desde CSS obligaría a que alguien lo deshaga.
   ============================================================ */

/* ---------- el portal del cero ----------
   El momento grande de la página. La sección mide tres pantallas de
   alto; dentro, una capa fija con el titular del hero se queda quieta
   mientras el 0 de «cero años» crece hasta que, a través de él, se ve
   la Sala de Infancia. Lo que el hero dice, el scroll lo demuestra.
   ------------------------------------------------------------ */
.hdn-portal{position:relative;height:300vh;background:var(--verde-osc)}
.hdn-portal__fijo{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
}
/* En iPhone 100vh cuenta la barra de Safari: el escenario fijo medía
   más que lo visible y el pie del portal quedaba tapado. svh es la
   altura con la barra desplegada; 100vh queda de respaldo. */
@supports (height:100svh){
  .hdn-portal__fijo{ height:100svh; }
}
/* Lo que se ve a través del agujero. */
.hdn-portal__fondo{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center center;
}
.hdn-portal__fondo::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(25,103,59,.24);
}
/* La cortina: un rectángulo del color del hero con el 0 recortado. */
.hdn-portal__svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
/* El cero se dibuja con dos elipses y no con tipografía a propósito.
   Como glifo, el «0» recorta en la máscara solo su trazo, y su hueco
   interior se queda tapado por la cortina: al crecer acabas viendo un
   disco verde en vez de la foto. Con dos elipses el hueco es el agujero
   de verdad, y el aro amarillo pasa por delante. */
.hdn-portal__hueco,
.hdn-portal__aro{transform-box:view-box}
.hdn-portal__pie{
  position:absolute;
  left:0;
  right:0;
  bottom:46px;
  text-align:center;
  color:#FFF8EC;
  font-family:"Fredoka",sans-serif;
  font-size:clamp(15px,2vw,19px);
  letter-spacing:.16em;
  text-transform:uppercase;
  text-shadow:0 2px 14px rgba(12,52,30,.7);
}

/* Sin JavaScript el portal sobra: la sección se queda en una franja
   normal con la foto y su frase, sin tres pantallas de scroll vacío. */
html:not(.hdn-js) .hdn-portal{height:auto}
html:not(.hdn-js) .hdn-portal__fijo{position:static;height:62vh}
html:not(.hdn-js) .hdn-portal__svg{display:none}

/* ============================================================
   EL RECORRIDO — los espacios de la escuela en horizontal

   La sección se queda fija y las nueve paradas pasan de lado mientras
   se baja. No es un efecto por el efecto: la escuela se recorre en ese
   orden, de la Sala de Infancia al Politécnico, y el scroll hace
   literalmente ese camino.
   ============================================================ */
.hdn-recorrido{
  background:var(--papel);
  padding:96px 0 0;
  overflow:hidden;
}
.hdn-recorrido__cab{margin-bottom:40px}
.hdn-recorrido__cab h2{font-size:clamp(32px,4.4vw,52px);max-width:20ch;margin-bottom:14px}
.hdn-recorrido__cab p{max-width:56ch;font-size:18.5px;color:var(--tinta-suave)}

.hdn-pista{
  display:flex;
  gap:36px;
  align-items:stretch;
  padding:0 max(24px,calc((100vw - var(--ancho)) / 2)) 96px;
  width:max-content;
}

/* Mientras la sección está clavada solo hay una pantalla de alto y la
   reparten tres piezas. Sin esto el titular se comía la mitad y las
   paradas salían cortadas por abajo. */
@media (min-width:901px){
  .hdn-recorrido{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:0;
  }
  .hdn-recorrido__cab{margin:0 auto 26px;flex:none}
  .hdn-recorrido__cab h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:8px}
  .hdn-recorrido__cab p{font-size:17px}
  .hdn-pista{padding-bottom:0;align-items:center;flex:none}
  .hdn-parada{max-height:min(60vh,520px)}
  .hdn-parada__media{max-height:44vh}

  /* Dentro del pin la regla es una fila más de la columna: pegarla abajo
     con sticky la sacaba del reparto y se montaba sobre las paradas. */
  .hdn-regla{position:static;flex:none;background:none;padding:22px 24px 0}
}

.hdn-parada{
  width:min(74vw,860px);
  flex:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px;
  align-items:center;
  background:var(--papel-2);
  border:4px solid var(--tinta);
  border-radius:var(--radio-mano);
  box-shadow:9px 10px 0 var(--tinta);
  padding:32px;
}
.hdn-parada:nth-child(2n){border-radius:var(--radio-mano-2);background:var(--papel)}

.hdn-parada__media{
  aspect-ratio:4/3;
  border:3.5px solid var(--tinta);
  border-radius:var(--radio-mano-2);
  overflow:hidden;
  display:grid;
  place-items:center;
  background:var(--amarillo);
}
.hdn-parada:nth-child(2n) .hdn-parada__media{border-radius:var(--radio-mano)}
.hdn-parada__media img{width:100%;height:100%;object-fit:cover;display:block}

.hdn-parada__paso{
  font-family:"Fredoka",sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tinta-suave);
  display:block;
}
.hdn-parada h3{font-size:clamp(25px,2.9vw,36px);margin:8px 0 14px}
.hdn-parada p{font-size:17.5px;line-height:1.55}
.hdn-parada__dato{
  margin-top:20px;
  display:inline-block;
  font-family:"Fredoka",sans-serif;
  font-weight:600;
  font-size:15px;
  padding:7px 17px;
  border:3px solid var(--tinta);
  border-radius:999px;
  background:var(--papel);
}
.hdn-parada__ir{
  display:inline-block;
  margin-top:18px;
  margin-left:10px;
  font-family:"Fredoka",sans-serif;
  font-weight:600;
  font-size:15px;
  border-bottom:2.5px solid var(--rojo);
  text-decoration:none;
  padding-bottom:1px;
}
.hdn-parada__ir:hover{color:var(--rojo)}

/* La regla del recorrido: nueve muescas, la del tramo actual encendida. */
.hdn-regla{
  position:sticky;
  bottom:0;
  display:flex;
  gap:7px;
  justify-content:center;
  align-items:center;
  padding:18px 24px 22px;
  background:linear-gradient(180deg,rgba(255,246,232,0) 0%,var(--papel) 46%);
  pointer-events:none;
}
.hdn-regla span{
  width:30px;
  height:7px;
  border-radius:999px;
  background:rgba(44,36,32,.17);
  transition:background .25s ease, transform .25s ease;
}
.hdn-regla span.es-aqui{background:var(--rojo);transform:scaleY(1.55)}

/* Sin JavaScript, o con menos movimiento: el recorrido se apila y se
   lee como una lista normal, sin pin ni desplazamiento lateral. */
html:not(.hdn-js) .hdn-pista,
.hdn-recorrido--quieto .hdn-pista{
  width:auto;
  flex-direction:column;
  padding-left:max(24px,calc((100vw - var(--ancho)) / 2));
  padding-right:max(24px,calc((100vw - var(--ancho)) / 2));
}
html:not(.hdn-js) .hdn-parada,
.hdn-recorrido--quieto .hdn-parada{width:auto}
html:not(.hdn-js) .hdn-regla,
.hdn-recorrido--quieto .hdn-regla{display:none}

@media (max-width:900px){
  .hdn-parada{grid-template-columns:1fr;width:min(86vw,520px);padding:22px}
  .hdn-pista{gap:22px}
}

/* ---------- banda con deriva ---------- */
.hdn-banda{overflow:hidden}
.hdn-banda img{will-change:transform}

/* ============================================================
   Quien pide menos movimiento lo recibe: sin entradas, sin apertura y
   sin portal de tres pantallas. El contenido queda idéntico.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .hdn-marco{transform:none}

  /* El portal deja de ser tres pantallas y se queda en una franja con
     la foto; el recorrido lateral se apila. Lo hace también el script,
     pero esto lo cubre aunque el script no llegue. */
  .hdn-portal{height:auto}
  .hdn-portal__fijo{position:static;height:62vh}
  .hdn-portal__svg{display:none}
}

/* ============================================================
   ANCLAS BAJO LA BARRA PEGAJOSA
   La cabecera mide 80px y se queda fija arriba. Sin margen de
   desplazamiento, al llegar desde un enlace con #ancla el titulo
   aterrizaba justo por encima del borde y quedaba tapado: quien
   pulsaba «Makerspace» en el menu caia en el parrafo siguiente,
   sin ver de que seccion se trataba.
   ============================================================ */
:where(h1, h2, h3, h4, section, article)[id]{
  scroll-margin-top:96px;
}