@charset "utf-8";
/* =========================================================================
   XI FILT 2026 — hoja del one-pager público

   La página es un escenario azul continuo donde la tipografía es la
   protagonista: frases cortas enormes que sangran al borde, con la rosa del
   manual superpuesta al texto en vez de puesta al lado. Las guillemets «»
   del lema hacen de firma tipográfica y abren cada sección.
   Cada tipo de actividad lleva su color como taxonomía, no como adorno.
   ========================================================================= */

/* ---------- tokens ---------- */
:root{
  /* color de marca, extraído de los originales del manual */
  --azul:#0098DA;
  --azul-flor:#45AFE0;
  --tinta:#002D63;
  /* el mismo azul en componentes: hace falta para darle alfa variable
     sin pasar por un pseudo-elemento (ver .nav). */
  --tinta-rgb:0 45 99;
  --tinta-hondo:#001C40;
  --verde:#47A53A;
  --verde-flor:#87C47E;
  --amarillo:#F9B234;
  --amarillo-flor:#FBCB76;
  --papel:#FAF2E4;
  --papel-sombra:#F0E4CC;
  --blanco:#fff;

  /* semánticos por defecto (lienzo oscuro) */
  --fondo:var(--tinta);
  --texto:var(--papel);
  --texto-suave:rgba(250,242,228,.62);
  --regla:rgba(250,242,228,.22);
  --regla-fuerte:rgba(250,242,228,.45);
  --acento:var(--amarillo);
  --chip-on-bg:var(--papel);
  --chip-on-fg:var(--tinta);

  --fuente:'Figtree',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* escala tipográfica: binaria a propósito — o es display, o es UI compacta */
  --t-display:clamp(3.2rem,min(13vw,15.5vh),13rem);
  --t-xxl:clamp(2.5rem,min(8vw,11vh),7rem);
  --t-xl:clamp(2rem,5vw,4rem);
  --t-lg:clamp(1.4rem,2.6vw,2.1rem);
  --t-num:clamp(3.4rem,11vw,10rem);
  --t-md:1.1875rem;
  --t-base:1.0625rem;
  --t-sm:.9375rem;
  --t-xs:.8125rem;

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem;
  --s6:3rem; --s8:4rem; --s12:6rem; --s16:8rem;
  --gutter:clamp(1.25rem,4vw,4.5rem);
  --ancho:96rem;
  --radio:12px;
  --radio-lg:28px;
  --pastilla:100px;

  --nav-h:60px;
  --z-nav:100; --z-modal:300; --z-loader:400;
  --ease:cubic-bezier(.22,1,.36,1);

  /* Taxonomía de actividades: cada tipo lleva su tono y no lo comparte con otro.
     Salen de la paleta del manual, aclarados lo justo para leerse sobre el azul
     profundo. El mismo tono vuelve en el filo izquierdo de cada actividad. */
  --tono-presentacion:#87C47E;
  --tono-conversatorio:#45AFE0;
  --tono-taller:#F9B234;
  --tono-infantil:#BCE7B3;
  --tono-cultural:#FBCB76;
  --tono-firma:#FAF2E4;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--tinta)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--fondo);color:var(--texto);
  font:400 var(--t-base)/1.6 var(--fuente);
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Cualquier `display` propio le gana al display:none que trae el atributo
   hidden, y el elemento se queda visible aunque el JS lo haya ocultado.
   Pasó con el botón de instalar. */
[hidden]{display:none !important}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1;text-wrap:balance}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
::selection{background:var(--amarillo);color:var(--tinta)}
:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px;border-radius:4px}

.env{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter)}
/* Etiquetas que solo existen para lectores de pantalla. Van con !important
   porque cualquier regla por etiqueta del entorno puede alcanzarlas y sacarlas
   a la vista: pasó con la del botón del menú, que se pintó como una rayita. */
.oculto-visual{position:absolute !important;width:1px !important;height:1px !important;
  margin:-1px !important;padding:0 !important;overflow:hidden !important;
  clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;
  white-space:nowrap !important;border:0 !important;background:none !important}
.nums{font-variant-numeric:tabular-nums}

/* ---------- el patrón de rosas ---------- */
/* Va incrustado y no como archivo suelto: un mask-image externo lo bloquea
   CORS al abrir el index con doble clic (file://). La fuente editable sigue
   en assets/img/patron/patron.svg. Una sola máscara; el color lo pone el
   background, así sirve para las tres variantes de marca. */
.rosal{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  /* nace oculto: el patrón llega en rosal.css, que carga aparte */
  visibility:hidden;
  -webkit-mask-image:var(--patron);mask-image:var(--patron);
  -webkit-mask-size:clamp(320px,40vw,620px) auto;mask-size:clamp(320px,40vw,620px) auto;
  -webkit-mask-repeat:repeat;mask-repeat:repeat}

/* ---------- firma tipográfica: «etiqueta» ----------
   Reemplaza al típico eyebrow en versalitas. Las guillemets vienen del lema
   de la feria, así que la marca ya las traía puestas. */
.marca-seccion{display:inline-flex;align-items:baseline;gap:.15em;
  font-size:var(--t-sm);font-weight:600;color:var(--texto-suave);margin:0}
.marca-seccion::before{content:"«"}
.marca-seccion::after{content:"»"}

/* ---------- controles: pastillas de contorno ----------
   Un solo control lleno en toda la página (el amarillo de marca); el resto son
   fantasmas para que nada compita con la tipografía. */
.pastilla-btn{display:inline-flex;align-items:center;gap:.5rem;
  font-weight:700;font-size:var(--t-sm);padding:.75rem 1.4rem;
  border-radius:var(--pastilla);border:1px solid currentColor;color:inherit;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.pastilla-btn:hover{opacity:.72;transform:translateY(-1px)}
.pastilla-btn--lleno{background:var(--amarillo);border-color:var(--amarillo);color:var(--tinta)}
.pastilla-btn--lleno:hover{opacity:1;background:var(--amarillo-flor);border-color:var(--amarillo-flor)}

/* =========================================================================
   Navegación
   ========================================================================= */
/* El fondo entra según lo que se ha bajado, no según hacia dónde se mueve la
   página: el JS escribe --nav-fondo de 0 a 1 en los primeros píxeles de scroll.
   Sin transición, porque el valor ya llega interpolado; una transición encima
   lo dejaría rezagado respecto del dedo.

   El color va en el PROPIO elemento, no en un ::before. Antes era un
   pseudo-elemento absoluto con `opacity`, y en el celular la franja azul
   desaparecía: iOS compone la barra fija en su propia capa y la capa del
   pseudo-elemento se queda sin repintar al desplazarse, así que el logotipo y
   la hamburguesa seguían ahí sobre el contenido, sin fondo. Con el alfa en el
   `background-color` del propio header no hay segunda capa que se pueda
   perder. Por lo mismo NO se le puede poner un `transform` a .nav para forzar
   la capa: .nav__links es `position:fixed` dentro y pasaría a colgar de la
   barra en vez del viewport.

   Y el nombre es --nav-fondo, no --fondo: ese ya existe en :root y es un
   COLOR (el del body). Heredado aquí como opacidad daba un valor inválido, y
   la barra nacía opaca del todo si el JS no llegaba a escribirlo. */
.nav{position:fixed;inset:0 0 auto;z-index:var(--z-nav);height:var(--nav-h);
  display:flex;align-items:center;color:var(--papel);
  background-color:rgb(var(--tinta-rgb)/var(--nav-fondo,0))}
/* Con el menú desplegado la barra va opaca sí o sí: el panel es oscuro y la
   barra transparente dejaría ver el contenido por encima de él. */
.nav.abierta{background-color:rgb(var(--tinta-rgb)/1)}
.nav__env{position:relative;display:flex;align-items:center;gap:var(--s4);width:100%}
.nav__marca{display:flex;align-items:center;gap:.625rem;margin-right:auto;padding-block:8px}
.nav__marca svg{height:30px;width:auto;color:currentColor}
.nav__marca b{font-weight:700;font-size:var(--t-sm);letter-spacing:-.01em}
.nav__links{display:flex;gap:var(--s3);align-items:center}
.nav__link{position:relative;font-size:var(--t-sm);font-weight:600;padding:10px 2px;opacity:.75}
.nav__link::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease)}
.nav__link:hover,.nav__link[aria-current="true"]{opacity:1}
.nav__link:hover::after,.nav__link[aria-current="true"]::after{transform:scaleX(1)}
.nav__cta{font-size:var(--t-sm);font-weight:700;padding:.55rem 1.15rem;
  border-radius:var(--pastilla);border:1px solid currentColor;
  transition:opacity .3s var(--ease)}
.nav__cta:hover{opacity:.7}
.nav__cta--app{display:inline-flex;align-items:center;gap:.45rem}
.nav__cta--app svg{flex:none}
.pasos{margin:.75rem 0 0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.6rem;
  font-size:var(--t-base)}
.pasos li{padding-left:.2rem}
.pasos b{font-weight:800}
.nav__hamb{display:none;width:44px;height:44px;margin-right:-10px;align-items:center;justify-content:center}
.nav__hamb__barra{display:block;width:22px;height:2px;background:currentColor;position:relative}
.nav__hamb__barra::before,.nav__hamb__barra::after{content:"";position:absolute;left:0;width:22px;height:2px;
  background:currentColor;transition:transform .35s var(--ease)}
.nav__hamb__barra::before{top:-7px}
.nav__hamb__barra::after{top:7px}
.nav.abierta .nav__hamb__barra{background:transparent}
.nav.abierta .nav__hamb__barra::before{transform:translateY(7px) rotate(45deg)}
.nav.abierta .nav__hamb__barra::after{transform:translateY(-7px) rotate(-45deg)}

@media (max-width:560px){.nav__marca b{display:none}}
@media (max-width:900px){
  .nav__hamb{display:flex}
  .nav__links{position:fixed;inset:var(--nav-h) 0 auto;flex-direction:column;align-items:stretch;
    gap:0;background:var(--tinta);color:var(--papel);padding:var(--s2) var(--gutter) var(--s4);
    clip-path:inset(0 0 100% 0);transition:clip-path .5s var(--ease)}
  .nav.abierta .nav__links{clip-path:inset(0 0 0 0)}
  .nav__link{font-size:var(--t-lg);font-weight:700;padding:14px 0;
    border-bottom:1px solid rgba(250,242,228,.14);opacity:1}
  .nav__link::after{display:none}
  .nav__cta{margin-top:var(--s3);text-align:center;justify-content:center;padding:14px}
}

/* =========================================================================
   Hero — la frase ocupa la pantalla; el logotipo cede el protagonismo
   ========================================================================= */
.hero{position:relative;background:var(--azul);color:var(--papel);
  padding-top:var(--nav-h);overflow:hidden;isolation:isolate}
.hero .rosal{background:var(--azul-flor);opacity:.5}

/* =========================================================================
   El hero está vivo: nada se queda quieto del todo.
   Tres capas de movimiento continuo, de la más callada a la más visible:
   1. el rosal de fondo se mece muy despacio, como un campo con viento;
   2. la rosa grande respira, sin llegar nunca a estarse quieta;
   3. y un puñado de rosas se abre y se cierra, cada una a su propio ritmo.
   Todo es transform y opacity, así que lo compone la GPU y no cuesta batería.
   Con prefers-reduced-motion se detiene entero.
   ========================================================================= */

/* 1. el rosal se mece */
.hero .rosal{inset:-14%;animation:vaiven 52s ease-in-out infinite alternate}
@keyframes vaiven{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-38px,-26px,0)}
}

/* 2. la rosa grande respira.
   El contenedor se lo queda el parallax del scroll; el SVG de adentro respira,
   así las dos transformaciones no se pisan. */
.hero__rosa{position:absolute;color:var(--azul-flor);pointer-events:none;
  width:min(72vw,56rem);right:-15vw;top:34%;transform:translateY(-50%);z-index:0}
.hero__rosa svg{fill:currentColor;width:100%;
  animation:respira 15s ease-in-out infinite alternate;
  transform-origin:60% 55%;will-change:transform}
@keyframes respira{
  from{transform:scale(1) rotate(-1.6deg)}
  to{transform:scale(1.045) rotate(1.6deg)}
}

/* 3. el jardín que no para de florecer */
.jardin{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.jardin__rosa{position:absolute;color:var(--azul-flor);fill:currentColor;opacity:0;
  transform-origin:center;will-change:transform,opacity;
  animation:florece var(--dura,13s) ease-in-out var(--espera,0s) infinite}
/* Abrir es crecer y girar a la vez: sin el giro el ojo no distingue la flor
   del patrón que tiene detrás, y el movimiento se pierde. */
@keyframes florece{
  0%   {opacity:0;             transform:scale(.55) rotate(calc(var(--giro,0deg) - 14deg))}
  24%  {opacity:var(--tope,.5);transform:scale(.98) rotate(var(--giro,0deg))}
  60%  {opacity:var(--tope,.5);transform:scale(1.05) rotate(calc(var(--giro,0deg) + 7deg))}
  100% {opacity:0;             transform:scale(1.2) rotate(calc(var(--giro,0deg) + 16deg))}
}
/* Dos de las cinco son color papel: leen como flores que dan la luz y atan el
   jardín con el logotipo, en vez de fundirse todas con el fondo. */
.jardin__rosa--clara{color:var(--papel)}

/* El rastro del puntero. La capa va por encima del contenido y no recibe
   eventos, así que las rosas se abren también sobre el logotipo sin estorbar
   ningún clic. Las coloca y las anima GSAP; acá solo el color y el giro. */
.estela{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.brote{position:absolute;color:var(--tinta);fill:currentColor;opacity:0;
  pointer-events:none;transform-origin:center;will-change:transform,opacity}
.brote--claro{color:var(--papel)}
@media (prefers-reduced-motion:reduce){.estela{display:none}}
.jardin__rosa--1{width:15vw;left:3%; top:10%; --dura:15s; --espera:0s;   --giro:-12deg; --tope:.55}
.jardin__rosa--2{width:10vw;left:27%;top:66%; --dura:18s; --espera:4s;   --giro:18deg;  --tope:.18}
.jardin__rosa--3{width:12vw;left:58%;top:6%;  --dura:13s; --espera:7s;   --giro:-6deg;  --tope:.42}
.jardin__rosa--4{width:8vw; left:76%;top:70%; --dura:20s; --espera:2s;   --giro:24deg;  --tope:.16}
.jardin__rosa--5{width:7vw; left:44%;top:36%; --dura:16s; --espera:10s;  --giro:-20deg; --tope:.38}

@media (max-width:900px){
  .hero__rosa{width:135vw;right:-45vw;top:30%;opacity:.5}
  /* en el celular bastan dos: menos capas que rasterizar en equipos modestos */
  .jardin__rosa--3,.jardin__rosa--4,.jardin__rosa--5{display:none}
  .jardin__rosa--1{width:40vw;left:-3%;top:6%}
  .jardin__rosa--2{width:28vw;left:58%;top:58%}
}
@media (prefers-reduced-motion:reduce){
  .jardin{display:none}
  .hero .rosal{inset:0}
}

/* PRIMERA PANTALLA: la marca de borde a borde, como en kolibri.
   El alto lo reparte una rejilla de tres filas para que el logotipo quede
   centrado y los datos anclados abajo, sin importar la altura del viewport. */
.hero__pantalla{position:relative;z-index:1;min-height:calc(100svh - var(--nav-h));
  display:grid;grid-template-rows:1fr auto 1fr;align-items:center;
  padding-bottom:var(--s4)}
.hero__alto{display:flex;align-items:flex-end;padding-bottom:var(--s4)}
.hero__sigla{width:100vw;margin-inline:calc(50% - 50vw);color:var(--papel);
  pointer-events:none;user-select:none}
.hero__datos{position:relative;z-index:1;display:flex;flex-wrap:wrap;
  gap:var(--s2) var(--s6);align-items:flex-end;align-self:end;
  padding-top:var(--s3);border-top:1px solid rgba(250,242,228,.4)}
.dato{display:flex;flex-direction:column;gap:2px}
.dato__k{font-size:var(--t-xs);font-weight:500;color:rgba(250,242,228,.72)}
.dato__v{font-size:var(--t-md);font-weight:700;letter-spacing:-.02em;color:var(--papel)}
.dato--ancho{margin-right:auto}
@media (max-width:620px){.dato--ancho{flex-basis:100%}}

/* Y a continuación, el lema */
.hero__lema{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--s3);
  padding-block:clamp(3rem,9vh,7rem) clamp(3.5rem,10vh,8rem)}
.hero__frase{font-size:var(--t-xxl);font-weight:900;line-height:.9;
  letter-spacing:-.045em;margin:0;max-width:15ch;color:var(--papel)}
.hero__frase .abre,.hero__frase .cierra{color:var(--tinta)}
.hero__lead{font-size:var(--t-lg);font-weight:500;line-height:1.3;max-width:30ch;
  color:var(--papel);margin:0}

/* En pantallas angostas el logotipo no puede crecer más que el ancho: repartir
   una pantalla entera entre tres filas deja demasiado aire. Acá el bloque se
   ajusta a su contenido y el lema entra en la primera pantalla. */
@media (max-width:700px){
  .hero__pantalla{min-height:0;grid-template-rows:auto auto auto;
    gap:clamp(1.75rem,6vh,3rem);padding-top:clamp(1.5rem,5vh,3rem)}
  .hero__alto{padding-bottom:0}
  .hero__lema{padding-block:clamp(2.25rem,6vh,4rem) clamp(3rem,8vh,5rem)}
}

.estado{display:inline-flex;align-items:center;gap:.7rem;align-self:flex-start;
  border:1px solid rgba(250,242,228,.5);border-radius:var(--pastilla);
  padding:.5rem 1.1rem;font-size:var(--t-sm);font-weight:600;color:var(--papel)}
.estado__punto{width:8px;height:8px;border-radius:50%;background:var(--amarillo);flex:none}
.estado--vivo .estado__punto{background:var(--verde-flor);animation:latido 2.4s var(--ease) infinite}
@keyframes latido{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
.estado b{font-weight:800}

/* =========================================================================
   Secciones y superficies
   ========================================================================= */
.seccion{position:relative;padding-block:clamp(4.5rem,11vw,var(--s16));isolation:isolate}
.seccion--tinta{background:var(--tinta);color:var(--papel)}
.seccion--honda{background:var(--tinta-hondo);color:var(--papel)}
.seccion--azul{background:var(--azul);color:var(--papel);
  --texto-suave:rgba(250,242,228,.85);--regla:rgba(250,242,228,.34)}
.seccion--papel{background:var(--papel);color:var(--tinta);
  --tono-presentacion:#47A53A;--tono-conversatorio:#0098DA;--tono-taller:#D8930F;
  --tono-infantil:#47A53A;--tono-cultural:#CD983C;--tono-firma:#002D63;
  --texto:var(--tinta);--texto-suave:#4C6A93;
  --regla:rgba(0,45,99,.16);--regla-fuerte:rgba(0,45,99,.36);
  --chip-on-bg:var(--tinta);--chip-on-fg:var(--papel)}
.seccion--tinta .rosal,.seccion--honda .rosal{background:rgba(250,242,228,.05)}
.seccion--azul .rosal{background:var(--azul-flor);opacity:.34}
.seccion--papel .rosal{background:var(--papel-sombra)}

/* la declaración: una frase corta y enorme, con su explicación al pie */
.declara{display:flex;flex-direction:column;gap:var(--s4);position:relative;z-index:1}
.declara__frase{font-size:var(--t-xxl);font-weight:800;line-height:.94;letter-spacing:-.04em;
  max-width:17ch;margin:0}
.declara__frase em{font-style:normal;color:var(--acento)}
.seccion--papel .declara__frase em{color:var(--azul)}
.declara__lead{font-size:var(--t-lg);font-weight:400;line-height:1.4;max-width:44ch;
  color:var(--texto-suave);margin:0}
.declara__acciones{display:flex;flex-wrap:wrap;gap:.75rem}

/* hilo de separación entre bloques, a todo el ancho */
.hilo{height:1px;background:var(--regla);border:0;margin:0}

/* cifras enormes */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));
  gap:var(--s4) var(--s6)}
.cifra{display:flex;flex-direction:column;gap:.25rem;padding-top:var(--s3);
  border-top:1px solid var(--regla)}
.cifra__n{font-size:var(--t-num);font-weight:900;letter-spacing:-.055em;line-height:.82;
  color:var(--papel)}
.seccion--papel .cifra__n{color:var(--tinta)}
.cifra__k{font-size:var(--t-md);color:var(--texto-suave)}

/* =========================================================================
   Programa — las seis palabras de color, y luego la grilla del día
   ========================================================================= */
.taxonomia{display:flex;flex-direction:column}
.taxo{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;
  padding:clamp(.6rem,1.4vw,1.1rem) 0;border-top:1px solid var(--regla);
  transition:opacity .3s var(--ease)}
.taxo:last-child{border-bottom:1px solid var(--regla)}
.taxo__n{font-size:clamp(2rem,6.4vw,5rem);font-weight:800;letter-spacing:-.04em;
  line-height:.95;color:var(--tono);
  transition:transform .4s var(--ease)}
.taxo:hover .taxo__n{transform:translateX(.35em)}
.taxo__c{margin-left:auto;font-size:var(--t-lg);font-weight:700;color:var(--texto-suave);
  font-variant-numeric:tabular-nums;flex:none}
.taxo[aria-pressed="true"] .taxo__n{transform:translateX(.35em)}
.taxo[aria-pressed="true"] .taxo__c{color:var(--tono)}
.taxonomia.hay-eleccion .taxo:not([aria-pressed="true"]){opacity:.38}

/* tira de días */
.dias{position:sticky;top:var(--nav-h);z-index:20;background:var(--papel);
  box-shadow:0 1px 0 var(--regla)}
@media (max-width:900px){
  .dias{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
}
.dias__pista{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;
  padding-block:.85rem;scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 3rem),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 3rem),transparent)}
.dias__pista::-webkit-scrollbar{display:none}
.dia{flex:none;scroll-snap-align:start;display:flex;flex-direction:column;gap:1px;
  min-width:4.6rem;padding:.55rem .85rem;border-radius:var(--radio);
  border:1px solid var(--regla);color:var(--texto);
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.dia:hover{border-color:var(--regla-fuerte)}
.dia__sem{font-size:var(--t-xs);color:var(--texto-suave)}
.dia__num{font-size:var(--t-lg);font-weight:800;letter-spacing:-.03em;line-height:1}
.dia__mes{font-size:var(--t-xs);color:var(--texto-suave)}
.dia[aria-selected="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.dia[aria-selected="true"] .dia__sem,.dia[aria-selected="true"] .dia__mes{color:rgba(250,242,228,.7)}
.dia--hoy .dia__num::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--verde);margin-left:4px;vertical-align:middle}

.programa{display:flex;flex-direction:column}
.acto{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:var(--s2) var(--s3);
  padding:1.15rem 0;border-top:1px solid var(--regla);align-items:start}
.acto__hora{font-size:var(--t-md);font-weight:800;letter-spacing:-.02em;line-height:1.2;
  font-variant-numeric:tabular-nums}
.acto__fin{display:block;font-size:var(--t-xs);font-weight:500;color:var(--texto-suave);
  font-variant-numeric:tabular-nums}
.acto__cuerpo{min-width:0;display:flex;flex-direction:column;gap:.3rem;
  border-left:3px solid var(--marca,var(--azul));padding-left:.9rem}
.acto__titulo{font-size:var(--t-lg);font-weight:700;letter-spacing:-.025em;line-height:1.12}
.acto__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .75rem;
  font-size:var(--t-sm);color:var(--texto-suave)}
.acto__tipo{font-weight:700;color:var(--marca,var(--azul))}
/* La descripción la escribe el panel en un <textarea>: con pre-line los saltos
   de línea que puso el organizador se respetan sin tener que aceptar HTML. */
.acto__desc{font-size:var(--t-sm);line-height:1.55;color:var(--texto-suave);
  max-width:62ch;margin-top:.25rem;white-space:pre-line;text-wrap:pretty}
.acto--destacada .acto__desc{font-size:var(--t-md);color:var(--texto)}
.acto__gente{display:flex;flex-wrap:wrap;gap:.2rem .75rem;margin-top:.35rem}
.acto__gente button{font-size:var(--t-sm);font-weight:600;color:var(--texto);
  border-bottom:1px solid var(--regla-fuerte);padding-bottom:1px;
  transition:border-color .25s var(--ease)}
.acto__gente button:hover{border-color:currentColor}
.acto--destacada{padding-block:1.8rem}
.acto--destacada .acto__titulo{font-size:var(--t-xl);font-weight:800}
.acto__cal{align-self:start;font-size:var(--t-xs);font-weight:600;margin-top:.15rem;
  color:var(--texto-suave);border-bottom:1px solid var(--regla);padding-bottom:1px;
  transition:border-color .25s var(--ease),color .25s var(--ease)}
.acto__cal:hover{border-color:var(--regla-fuerte);color:var(--texto)}
@media (max-width:640px){
  .acto{grid-template-columns:1fr;gap:.5rem}
  .acto__hora{display:flex;align-items:baseline;gap:.5rem}
  .acto__fin{font-size:var(--t-sm)}
}
.vacio{padding:var(--s6) 0;font-size:var(--t-lg);color:var(--texto-suave);max-width:38ch}

/* =========================================================================
   Invitados — una lista de nombres enormes, no una grilla de tarjetas
   ========================================================================= */
.filtros{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.chip{font-size:var(--t-sm);font-weight:600;padding:.45rem .95rem;border-radius:var(--pastilla);
  border:1px solid var(--regla);color:var(--texto-suave);
  transition:color .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease)}
.chip:hover{border-color:var(--regla-fuerte);color:var(--texto)}
.chip[aria-pressed="true"]{background:var(--chip-on-bg);border-color:var(--chip-on-bg);color:var(--chip-on-fg)}

.nombres{display:flex;flex-direction:column;position:relative;z-index:1}
.nombre{position:relative;display:flex;align-items:baseline;gap:var(--s3);width:100%;
  text-align:left;padding:clamp(.7rem,1.6vw,1.3rem) 0;border-top:1px solid var(--regla);
  transition:opacity .3s var(--ease)}
.nombre:last-child{border-bottom:1px solid var(--regla)}
.nombre__n{font-size:clamp(1.7rem,5.2vw,4.2rem);font-weight:800;letter-spacing:-.04em;
  line-height:.98;transition:transform .45s var(--ease),color .3s var(--ease)}
.nombre:hover .nombre__n,.nombre:focus-visible .nombre__n{transform:translateX(.3em)}
.nombre__meta{margin-left:auto;display:flex;align-items:baseline;gap:var(--s2);flex:none;
  font-size:var(--t-sm);color:var(--texto-suave);text-align:right}
.nombre__tipo{font-weight:700;color:var(--tono,var(--acento))}
@media (max-width:700px){
  .nombre{flex-direction:column;align-items:flex-start;gap:.25rem}
  .nombre__meta{margin-left:0;text-align:left}
}
/* el retrato sigue al cursor sobre la lista */
.retrato{position:fixed;top:0;left:0;width:15rem;aspect-ratio:4/5;border-radius:var(--radio);
  overflow:hidden;pointer-events:none;opacity:0;z-index:60;
  background:var(--azul);will-change:transform}
.retrato img{width:100%;height:100%;object-fit:cover}
.retrato__inicial{position:absolute;inset:0;display:grid;place-items:center;
  font-size:5rem;font-weight:900;color:rgba(250,242,228,.35);letter-spacing:-.05em}
.retrato .rosal{background:rgba(250,242,228,.12);
  -webkit-mask-size:150px auto;mask-size:150px auto}
@media (hover:none),(max-width:900px){.retrato{display:none}}

/* ficha en diálogo */
.ficha{position:fixed;inset:0;z-index:var(--z-modal);display:none;place-items:end center;
  padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%}
.ficha[open]{display:grid}
.ficha::backdrop{background:rgba(0,28,64,.72);backdrop-filter:blur(4px)}
.ficha__caja{width:min(48rem,100%);max-height:88svh;overflow:auto;overscroll-behavior:contain;
  background:var(--papel);color:var(--tinta);border-radius:var(--radio-lg) var(--radio-lg) 0 0;
  padding:var(--s6) var(--gutter);position:relative}
@media (min-width:720px){
  .ficha{place-items:center}
  .ficha__caja{border-radius:var(--radio-lg);max-height:82svh}
}
.ficha__cerrar{position:absolute;right:1rem;top:1rem;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:var(--papel-sombra);
  transition:background-color .25s var(--ease)}
.ficha__cerrar:hover{background:rgba(0,45,99,.14)}
.ficha__rol{font-size:var(--t-sm);color:#4C6A93;margin:0}
.ficha__nombre{font-size:var(--t-xl);margin:.2rem 0 var(--s2);letter-spacing:-.035em}
.ficha__bio{font-size:var(--t-md);max-width:52ch;line-height:1.5}
.ficha__actos{margin-top:var(--s4);border-top:1px solid rgba(0,45,99,.16);padding-top:var(--s2)}
.ficha__actos h4{font-size:var(--t-sm);font-weight:700;margin:0 0 .5rem;color:#4C6A93}
.ficha__acto{display:flex;gap:.75rem;padding:.55rem 0;border-top:1px solid rgba(0,45,99,.12);
  font-size:var(--t-sm)}
.ficha__acto:first-of-type{border-top:0}
.ficha__acto time{flex:none;font-weight:700;font-variant-numeric:tabular-nums;min-width:9rem}

/* =========================================================================
   Stands
   ========================================================================= */
.buscador{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.buscador input{flex:1 1 20rem;min-width:0;font:inherit;font-size:var(--t-lg);font-weight:600;
  padding:.85rem 1.3rem;border-radius:var(--pastilla);
  border:1px solid rgba(250,242,228,.45);background:transparent;color:var(--papel)}
.buscador input::placeholder{color:rgba(250,242,228,.6);font-weight:400}
.buscador input:focus{border-color:var(--papel);outline-offset:2px}
.buscador__n{font-size:var(--t-sm);color:var(--texto-suave)}

/* ---------- el plano del jirón ----------
   Reproduce la estructura del plano impreso del manual: la franja de los lotes
   con la Municipalidad arriba, el rótulo de la calle, la banda oscura donde se
   montan los stands, y la Plaza Mayor abajo con sus jardines. */
.calle{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding-block:var(--s2)}
.calle__tope{display:flex;align-items:center;gap:var(--s2) var(--s3);flex-wrap:wrap;
  margin-bottom:.4rem}
.calle__pista{margin:0;font-size:var(--t-sm);color:var(--texto-suave)}
.calle__pista::after{content:" →";font-weight:700}
.calle__abrir{margin-left:auto}
@media (max-width:900px){
  .calle__abrir{margin-left:0;width:100%;justify-content:center}
  .calle__pista{flex:1 1 100%}
}

/* ---------- el plano a pantalla completa ----------
   En un teléfono vertical el jirón no cabe a lo ancho: el plano se gira 90° y
   entonces la calle corre hacia abajo, que es como se desplaza un celular.
   Los números de los stands se contragiran para leerse derechos; los rótulos
   de las bandas se dejan girados, que es como se leen en cualquier plano. */
.plano{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;
  margin:0;padding:0;border:0;background:var(--tinta-hondo);color:var(--papel);
  display:none;flex-direction:column}
.plano[open]{display:flex}
.plano::backdrop{background:var(--tinta-hondo)}
.plano__barra{flex:none;display:flex;align-items:center;gap:var(--s2);
  padding:.85rem var(--gutter) .85rem;border-bottom:1px solid rgba(250,242,228,.2)}
.plano__barra b{font-size:var(--t-md);font-weight:800;letter-spacing:-.02em}
.plano__nota{font-size:var(--t-sm);color:rgba(250,242,228,.65);margin-left:auto;text-align:right}
.plano__cerrar{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(250,242,228,.35);transition:background-color .25s var(--ease)}
.plano__cerrar:hover{background:rgba(250,242,228,.14)}
.plano__scroll{flex:1;overflow:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:var(--s2);
  display:flex;align-items:safe center;justify-content:safe center}
.plano__caja{position:relative;margin-inline:auto}
.plano__caja .mapa{position:absolute;top:0;left:0;transform-origin:0 0;width:max-content;min-width:0}
@media (max-width:560px){
  .plano__barra{flex-wrap:wrap;padding-inline:var(--s2)}
  .plano__barra b{font-size:var(--t-sm)}
  .plano__cerrar{margin-left:auto;width:40px;height:40px}
  .plano__nota{flex:1 1 100%;order:3;margin-left:0;text-align:left;
    font-size:var(--t-xs);padding-top:.35rem}
}
.plano--vertical .stand span{display:block;transform:rotate(-90deg)}
.plano--vertical .stand:hover{transform:none}
.plano--vertical .stand--halo{transform:none}

.mapa{--cielo:#8FCAE9;--stand:#0F8FCE;--modulo:#E8F4FB;
  width:max-content;min-width:100%;border-radius:var(--radio);overflow:hidden;
  background:var(--cielo);color:var(--tinta);position:relative;isolation:isolate}

/* franja superior: los lotes del lado de la Municipalidad */
.mapa__lotes{position:relative;overflow:hidden;height:6rem;display:flex;align-items:flex-start;
  justify-content:flex-end;padding:.9rem 1.6rem}
.mapa__lotes::before{content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(to right,
    transparent 0 11.5rem, rgba(0,45,99,.42) 11.5rem 11.6rem)}
.mapa__lotes b{position:relative;font-size:var(--t-sm);font-weight:800;line-height:1.15;
  text-align:right;max-width:9rem}
/* En el plano impreso las rosas solo asoman por las esquinas, no tapan la franja.
   Se recorta el patrón contra un degradado para que se deshaga hacia el centro. */
/* Dos máscaras anidadas en vez de mask-composite, que no todos los motores
   aplican: la de fuera deshace el bloque hacia el centro, la de dentro dibuja
   las rosas. */
.esquina{position:absolute;top:0;bottom:0;width:26rem;pointer-events:none;z-index:0}
.esquina--izq{left:0;
  -webkit-mask-image:linear-gradient(to right,#000 4%,transparent 86%);
          mask-image:linear-gradient(to right,#000 4%,transparent 86%)}
.esquina--der{right:0;
  -webkit-mask-image:linear-gradient(to left,#000 4%,transparent 86%);
          mask-image:linear-gradient(to left,#000 4%,transparent 86%)}
.esquina i{position:absolute;inset:0;display:block;visibility:hidden;
  -webkit-mask-image:var(--patron);mask-image:var(--patron);
  -webkit-mask-size:230px auto;mask-size:230px auto;
  -webkit-mask-repeat:repeat;mask-repeat:repeat}
.mapa__lotes .esquina i{background:var(--tinta);opacity:.55}
.mapa__plaza .esquina i{background:var(--papel);opacity:.3}

/* rótulo de la calle */
.mapa__calle{display:grid;place-items:center;padding:.75rem;
  border-block:.55rem solid var(--tinta);background:var(--cielo)}
.mapa__calle b{font-size:var(--t-lg);font-weight:800;letter-spacing:-.02em}

/* la banda de la feria */
.mapa__feria{position:relative;background:var(--tinta);color:var(--papel);
  padding:1.5rem 1.6rem 1.6rem 8.5rem;display:flex;flex-direction:column;gap:1.4rem}
.mapa__ingreso{position:absolute;left:1.4rem;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;height:2.6rem;padding:0 .5rem 0 .9rem;
  background:var(--cielo);color:var(--tinta);font-size:var(--t-sm);font-weight:800;
  clip-path:polygon(0 0,calc(100% - 1.4rem) 0,100% 50%,calc(100% - 1.4rem) 100%,0 100%);
  padding-right:2rem}

.riel{display:flex;align-items:stretch;gap:1.5rem}
.riel>*{flex:none}
.riel--pegado{margin-top:-1rem}
.grupo{display:flex;gap:4px;flex:none}
.stand{position:relative;flex:none;width:3.1rem;height:2.5rem;border-radius:3px;background:var(--stand);
  color:#fff;display:grid;place-items:center;font-size:.9rem;font-weight:700;
  font-variant-numeric:tabular-nums;
  transition:background-color .25s var(--ease),transform .25s var(--ease),
             color .25s var(--ease),box-shadow .25s var(--ease)}
.stand:hover{transform:translateY(-3px);background:var(--azul-flor);color:var(--tinta)}
.stand--libre{background:rgba(143,202,233,.28);color:rgba(250,242,228,.75)}
.stand--halo{background:var(--amarillo);color:var(--tinta);transform:translateY(-4px);
  box-shadow:0 0 0 4px var(--amarillo-flor)}
.stand--apagado{opacity:.25}

/* el escenario y los módulos de servicio, como en el plano */
.hito{flex:none;display:grid;place-items:center;padding:0 1.2rem;border-radius:3px;
  background:var(--amarillo);color:var(--tinta);font-size:var(--t-sm);font-weight:800;
  text-align:center;line-height:1.15;position:relative;overflow:hidden}
.hito::before{content:"";position:absolute;inset:.5rem;opacity:.5;
  background-image:repeating-linear-gradient(to right,#B9720A 0 .35rem,transparent .35rem .8rem),
                   repeating-linear-gradient(to bottom,#B9720A 0 .3rem,transparent .3rem .6rem);
  background-blend-mode:multiply}
.hito b{position:relative}
.hito--servicios{background:var(--modulo);color:var(--tinta)}
.hito--servicios::before{inset:.4rem;opacity:.9;
  background-image:linear-gradient(to right,transparent 32%,rgba(0,45,99,.35) 32% 33%,transparent 33%),
                   linear-gradient(to bottom,transparent 48%,rgba(0,45,99,.35) 48% 49%,transparent 49%)}

/* la plaza, abajo */
.mapa__plaza{position:relative;overflow:hidden;background:var(--tinta);color:var(--papel);
  padding:1.4rem 1.6rem 1.8rem;display:flex;align-items:center;justify-content:center;gap:2rem;
  border-top:.9rem solid var(--cielo)}
.mapa__jardin{position:relative;z-index:1;flex:1 1 0;height:3.6rem;max-width:22rem;border-radius:1.7rem;
  border:.35rem solid var(--cielo);background:rgba(143,202,233,.22)}
.mapa__plaza b{position:relative;z-index:1;font-size:var(--t-sm);font-weight:800;
  text-align:center;line-height:1.2;flex:none;max-width:9rem}

@media (max-width:640px){
  .mapa__feria{padding-left:7rem}
}

.directorio{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));
  gap:.25rem var(--s3);border-top:1px solid var(--regla);padding-top:var(--s3)}
.expositor{display:flex;gap:.75rem;align-items:baseline;padding:.4rem 0;text-align:left;
  border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.expositor:hover{border-color:var(--regla)}
.expositor b{flex:none;font-variant-numeric:tabular-nums;font-weight:800;min-width:2ch}
.expositor span{font-size:var(--t-sm);min-width:0;overflow-wrap:anywhere;color:var(--texto)}
.expositor--oculto{display:none}

/* ---------- la sección sin plano ----------
   Cuando el panel apaga el mapa (la distribución del jirón todavía no está
   cerrada), el directorio deja de ser una tabla junto al plano y pasa a ser el
   muro de marcas confirmadas: nombres en pastilla, sin número de stand. */
.stands--sin-plano .directorio{display:flex;flex-wrap:wrap;gap:.6rem;
  border-top:0;padding-top:0}
.stands--sin-plano .expositor{padding:.6rem 1.15rem;border:1px solid rgba(250,242,228,.45);
  border-radius:999px;border-bottom-color:rgba(250,242,228,.45);
  transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.stands--sin-plano .expositor:hover{border-color:var(--papel);background:rgba(250,242,228,.08)}
.stands--sin-plano .expositor span{font-size:var(--t-md)}

/* =========================================================================
   Trujillo — foto grande a un lado, texto al otro
   ========================================================================= */
.caso{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr);
  gap:clamp(1.5rem,4vw,var(--s6));align-items:center;
  padding-block:clamp(2.5rem,6vw,var(--s12));border-top:1px solid var(--regla)}
.caso:first-of-type{border-top:0}
.caso--invertido>.caso__foto{order:2}
/* La foto se sale del contenedor por el lado de afuera y llega al borde de la
   página; el canto que da al texto conserva el radio. */
.caso__foto{position:relative;overflow:hidden;background:var(--papel-sombra);margin:0;
  border-radius:var(--radio)}
.caso__foto img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
@media (min-width:861px){
  .caso:not(.caso--invertido) .caso__foto{
    margin-left:calc(var(--gutter) * -1);border-radius:0 var(--radio) var(--radio) 0}
  .caso--invertido .caso__foto{
    margin-right:calc(var(--gutter) * -1);border-radius:var(--radio) 0 0 var(--radio)}
}
.caso__texto{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.caso__titulo{font-size:clamp(1.7rem,3.2vw,2.9rem);font-weight:800;
  letter-spacing:-.035em;line-height:1.04;max-width:14ch}
.caso__cuerpo{font-size:var(--t-md);line-height:1.5;color:var(--texto-suave);max-width:38ch}
@media (max-width:860px){
  .caso{grid-template-columns:1fr;gap:var(--s3)}
  .caso--invertido>.caso__foto{order:0}
}
/* una foto a sangre completa como respiro entre bloques */
.sangre{margin-inline:calc(50% - 50vw);width:100vw;position:relative;overflow:hidden}
.sangre img{width:100%;height:clamp(16rem,46vh,34rem);object-fit:cover}
.sangre figcaption{position:absolute;left:0;right:0;bottom:0;padding:5rem var(--gutter) 1.4rem;
  font-size:var(--t-md);font-weight:600;color:var(--papel);
  background:linear-gradient(to top,rgba(0,28,64,.85),transparent)}

.datos-visita{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:var(--s4);border-top:1px solid var(--regla);padding-top:var(--s4)}
.datos-visita h3{font-size:var(--t-sm);font-weight:700;margin:0 0 .35rem}
.datos-visita p{font-size:var(--t-md);color:var(--texto-suave);margin:0}

/* =========================================================================
   Recorrido — la sección de la portada
   Es la puerta: un riel de tarjetas numeradas y un botón. El recorrido de
   verdad se lee en el diálogo .ruta, a pantalla completa.
   ========================================================================= */
/* El único botón lleno de la página sigue siendo el amarillo del pie: este es
   grande pero de contorno, como «Ver el plano en grande». */
.pastilla-btn--grande{font-size:var(--t-md);padding:1rem 1.8rem}

.paradas{display:flex;gap:.9rem;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scrollbar-width:none;
  margin-inline:calc(var(--gutter) * -1);padding:.35rem var(--gutter) .8rem;
  margin-top:var(--s2)}
.paradas::-webkit-scrollbar{display:none}

.parada{position:relative;flex:none;scroll-snap-align:start;isolation:isolate;
  width:min(19rem,72vw);aspect-ratio:4/5;overflow:hidden;text-align:left;
  border-radius:var(--radio-lg);color:var(--papel);
  /* un velo claro y no un color fijo: así el canto de la tarjeta se ve tanto
     sobre el azul de la portada como sobre el azul hondo de la app */
  background:rgba(250,242,228,.07);box-shadow:inset 0 0 0 1px rgba(250,242,228,.16);
  transition:transform .4s var(--ease)}
.parada:hover,.parada:focus-visible{transform:translateY(-4px)}
/* Sin foto, la tarjeta es el patrón de rosas con el número encima. No es un
   hueco esperando una imagen: se sostiene sola. */
.parada .rosal{background:rgba(250,242,228,.09);z-index:0}
.parada__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.parada__velo{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(0,28,64,.9) 0 24%,rgba(0,28,64,.3) 58%,rgba(0,28,64,.05))}
.parada__txt{position:relative;z-index:2;display:flex;flex-direction:column;
  height:100%;justify-content:flex-end;gap:.1rem;padding:var(--s3)}
.parada__n{font-size:clamp(2.2rem,5vw,3.2rem);font-weight:900;line-height:.85;
  letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--papel)}
.parada__nombre{font-size:var(--t-md);font-weight:600;line-height:1.2;letter-spacing:-.02em;
  text-wrap:balance}
.parada__tramo{font-size:var(--t-xs);color:rgba(250,242,228,.7);margin-bottom:.35rem}
/* la que tiene narración lo dice de lejos */
.parada__oido{position:absolute;top:var(--s2);right:var(--s2);z-index:2;
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:rgba(250,242,228,.16);backdrop-filter:blur(6px);color:var(--papel)}

/* =========================================================================
   .ruta — el recorrido a pantalla completa
   Vive en el mismo index, pero es su propia app: barra, dos vistas y pie.
   ========================================================================= */
.ruta{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;
  border:0;margin:0;padding:0;overflow:hidden;
  background:var(--tinta-hondo);color:var(--papel);
  display:none;flex-direction:column}
.ruta[open]{display:flex}
.ruta::backdrop{background:var(--tinta-hondo)}

/* la barra es material translúcido: el contenido pasa por debajo */
.ruta__barra,.ruta__pie{flex:none;position:relative;z-index:5;
  display:flex;align-items:center;gap:.5rem;
  background:rgb(var(--tinta-rgb)/.66);
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}
.ruta__barra{padding:calc(env(safe-area-inset-top) + .5rem) var(--gutter) .5rem;
  border-bottom:1px solid rgba(250,242,228,.14)}
.ruta__rotulo{margin-right:auto;font-size:var(--t-md);font-weight:800;letter-spacing:-.025em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Los controles de la barra nacen con fondo propio, no solo al pasar el mouse:
   un ícono suelto sobre la foto no se lee como botón y salir del recorrido se
   volvía un acertijo. */
.ruta__icono{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  color:inherit;background:rgba(250,242,228,.16);
  box-shadow:inset 0 0 0 1px rgba(250,242,228,.28);
  transition:background-color .2s var(--ease),transform .12s var(--ease)}
.ruta__icono:hover{background:rgba(250,242,228,.3)}
.ruta__icono:active{transform:scale(.94)}
.ruta__texto{flex:none;display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
  padding:.5rem 1rem;border-radius:var(--pastilla);border:1px solid rgba(250,242,228,.45);
  font-size:var(--t-sm);font-weight:700;color:inherit;
  transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.ruta__texto:hover{background:rgba(250,242,228,.12);border-color:var(--papel)}
.ruta__texto:active{transform:scale(.97)}

/* «Salir del recorrido» va relleno en papel sobre el azul: es la ruta de escape
   y necesita el contraste más alto de la barra. No compite con el amarillo, que
   sigue siendo exclusivo del botón de la narradora. */
.ruta__salir{background:var(--papel);border-color:var(--papel);color:var(--tinta);
  font-weight:800}
.ruta__salir:hover{background:var(--blanco);border-color:var(--blanco);color:var(--tinta)}
.ruta__salir__corto{display:none}
/* En pantallas angostas la barra se aprieta. Se recorta el rótulo de Instalar,
   que es el secundario; el de «Inicio» se queda, porque es la salida y un botón
   solo con ícono no se entiende. */
@media (max-width:560px){
  .ruta__texto{padding:.5rem .8rem}
  #ruta-instalar span{display:none}
  .ruta__salir__largo{display:none}
  .ruta__salir__corto{display:inline}
}

/* ---------- vista índice ---------- */
.ruta__indice{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:0 0 calc(var(--s8) + env(safe-area-inset-bottom))}
.ruta.en-estacion .ruta__indice{display:none}

/* ---------- la portada del recorrido ----------
   El rosal se dibuja en un canvas (jardin.js) y el texto va encima. El
   degradado del final funde la escena con el índice, para que las tarjetas
   parezcan salir del mismo sitio en vez de empezar después de una foto. */
.ruta__portada{position:relative;isolation:isolate;
  min-height:min(30rem,74svh);display:flex;align-items:flex-end;
  padding:var(--s8) var(--gutter) var(--s6);margin-bottom:var(--s6);
  background:linear-gradient(180deg,var(--tinta-hondo) 0%,#002A5E 62%,#003C7F 100%)}
.ruta__portada::after{content:"";position:absolute;inset:auto 0 0;height:8rem;z-index:1;
  background:linear-gradient(to top,var(--tinta-hondo),transparent);pointer-events:none}
/* Un velo entre la escena y el texto. El rosal es bonito pero el título tiene
   que leerse al sol, con una mano, caminando: la legibilidad gana siempre. */
.ruta__portada::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(125% 85% at 50% 72%,
    rgba(0,28,64,.78) 0%, rgba(0,28,64,.42) 55%, rgba(0,28,64,0) 100%)}
/* `vivero` y no `jardin`: esa clase ya es el rosal animado del hero, y la
   media query de movimiento reducido la esconde entera. */
.vivero{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;
  touch-action:pan-y}
.ruta__portada .ruta__intro{position:relative;z-index:2}

.ruta__intro{max-width:46rem;margin:0 auto}
.ruta__titulo{font-size:clamp(2.2rem,6vw,4rem);font-weight:800;letter-spacing:-.04em;
  line-height:.98;margin:0 0 var(--s2)}
.ruta__bajada{font-size:var(--t-md);line-height:1.5;color:var(--texto-suave);max-width:48ch;margin:0}
.ruta__empezar{margin-top:var(--s4)}
/* sobre el rosal, la bajada necesita más cuerpo que el gris suave de siempre */
.ruta__portada .ruta__bajada{color:rgba(250,242,228,.86)}
.ruta__portada .marca-seccion{color:rgba(250,242,228,.72)}

.ruta__lista{display:grid;gap:.9rem;max-width:74rem;margin-inline:auto;
  padding-inline:var(--gutter);
  grid-template-columns:repeat(auto-fill,minmax(min(21rem,100%),1fr))}
.ruta__tramo{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:.15em .75rem;
  margin-top:var(--s4);padding-bottom:.55rem;border-bottom:1px solid var(--regla)}
.ruta__lista .ruta__tramo:first-child{margin-top:0}
.ruta__tramo b{font-size:var(--t-lg);font-weight:800;letter-spacing:-.03em}
.ruta__tramo span{font-size:var(--t-sm);color:var(--texto-suave)}
/* En el índice las tarjetas son anchas, como en la referencia; en la portada
   van de pie porque ahí se recorren de costado. */
.ruta__lista .parada{width:100%;aspect-ratio:16/9;scroll-snap-align:none}
@media (max-width:560px){.ruta__lista .parada{aspect-ratio:3/2}}

/* ---------- vista estación ----------
   Un carrusel horizontal con ajuste nativo: el navegador ya da seguimiento
   1:1, inercia y rebote en los extremos, y es interrumpible de fábrica.
   Nada de eso saldría tan bien reimplementado a mano. */
.ruta__pista{display:none;flex:1;min-height:0;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none}
/* Sin scroll-behavior:smooth en la hoja: con él, hasta una asignación directa
   de scrollLeft se anima, y el salto a una estación lejana quedaba a medio
   camino. El deslizamiento suave del «siguiente» lo pide el JS cuando toca. */
.ruta__pista::-webkit-scrollbar{display:none}
.ruta.en-estacion .ruta__pista{display:flex}

/* Sin scroll-snap-stop:always. Suena bien —impide pasarse de estación de un
   manotazo— pero también le pone tope a los saltos programáticos: con él,
   abrir #recorrido/23 aterrizaba en la 01, porque el navegador no deja cruzar
   más de un punto de ajuste por movimiento. */
.hoja{flex:0 0 100%;scroll-snap-align:center;
  height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.hoja__foto{position:relative;height:clamp(13rem,42svh,26rem);overflow:hidden;
  background:var(--tinta);isolation:isolate}
.hoja__foto--vacia{height:clamp(9rem,24svh,14rem)}
.hoja__foto img{width:100%;height:100%;object-fit:cover}
.hoja__foto .rosal{background:rgba(250,242,228,.08)}
.hoja__foto::after{content:"";position:absolute;inset:auto 0 0;height:45%;
  background:linear-gradient(to top,rgba(0,28,64,.6),transparent)}
/* el número, enorme, sobre la foto: dice dónde estás sin leer nada */
.hoja__n{position:absolute;left:var(--gutter);bottom:2.1rem;z-index:2;margin:0;
  font-size:clamp(3.4rem,14vw,7rem);font-weight:900;line-height:.8;letter-spacing:-.06em;
  font-variant-numeric:tabular-nums;color:var(--papel);opacity:.92}

/* la hoja de papel monta sobre la foto */
.hoja__cuerpo{position:relative;z-index:1;margin-top:-1.6rem;
  border-radius:var(--radio-lg) var(--radio-lg) 0 0;
  background:var(--papel);color:var(--tinta);
  padding:var(--s4) var(--gutter) var(--s8);
  min-height:calc(100% - clamp(13rem,42svh,26rem) + 1.6rem)}
.hoja__foto--vacia + .hoja__cuerpo{min-height:calc(100% - clamp(9rem,24svh,14rem) + 1.6rem)}
.hoja__env{max-width:44rem;margin-inline:auto}
.hoja__nombre{font-size:clamp(1.5rem,4.4vw,2.4rem);font-weight:800;letter-spacing:-.035em;
  line-height:1.04;margin:0;text-wrap:balance}
.hoja__donde{display:inline-flex;align-items:center;gap:.4rem;margin:.6rem 0 0;
  font-size:var(--t-sm);font-weight:600;color:#4C6A93}
.hoja__resumen{font-size:var(--t-md);line-height:1.55;margin:var(--s3) 0 0;max-width:46ch}
/* El guion es lo que dice el audio, palabra por palabra. Se muestra siempre:
   así la parada se entiende sin audífonos, sin señal o con el sonido apagado. */
.hoja__guion{margin:var(--s4) 0 0;padding:var(--s3) 0 0;border-top:1px solid rgba(0,45,99,.16)}
.hoja__guion>p:first-child{font-size:var(--t-lg);font-weight:500;line-height:1.35;
  letter-spacing:-.02em;max-width:34ch;margin:0}
.hoja__guion>p:first-child::before{content:"«"}
.hoja__guion>p:first-child::after{content:"»"}
.hoja__firma{margin:var(--s3) 0 0;font-size:var(--t-xs);color:#4C6A93}

/* ---------- pie de la estación ---------- */
.ruta__pie{justify-content:center;gap:var(--s4);
  padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  border-top:1px solid rgba(250,242,228,.14)}
.ruta__paso{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(250,242,228,.4);color:inherit;
  transition:background-color .2s var(--ease),opacity .2s var(--ease),transform .12s var(--ease)}
.ruta__paso:hover:not(:disabled){background:rgba(250,242,228,.14)}
.ruta__paso:active:not(:disabled){transform:scale(.93)}
.ruta__paso:disabled{opacity:.3;cursor:default}
.ruta__sinaudio{margin:0;font-size:var(--t-xs);color:var(--texto-suave);text-align:center;
  max-width:14rem}

/* el botón de la narradora: el anillo se llena mientras suena */
.oir{position:relative;flex:none;display:grid;place-items:center;
  width:56px;height:56px;border-radius:50%;
  background:var(--amarillo);color:var(--tinta);
  transition:transform .12s var(--ease),background-color .2s var(--ease)}
.oir:hover{background:var(--amarillo-flor)}
.oir:active{transform:scale(.94)}
/* El anillo rodea al disco sin tocarlo: 9 px de aire por lado.
   Dos trampas, las dos ya pisadas:
   · `max-width:none` hace falta. La regla base `img,svg{max-width:100%}` le
     pone tope al ancho en los 56 px del botón, el alto sí crece a 74 y el
     anillo sale ovalado y corrido nueve píxeles hacia la izquierda.
   · medidas explícitas y no un `inset` a secas: un <svg> es elemento
     reemplazado y con width:auto se queda en su tamaño propio. */
.oir__anillo{position:absolute;left:-9px;top:-9px;max-width:none;
  width:calc(100% + 18px);height:calc(100% + 18px);
  transform:rotate(-90deg);overflow:visible;pointer-events:none}
.oir__riel{fill:none;stroke:rgba(250,242,228,.22);stroke-width:3.5}
/* r=29 en un lienzo de 64 → la vuelta entera mide 2πr = 182.2 */
.oir__avance{fill:none;stroke:var(--papel);stroke-width:3.5;stroke-linecap:round;
  stroke-dasharray:182.2;stroke-dashoffset:calc(182.2 - 182.2 * var(--avance,0));
  transition:stroke-dashoffset .12s linear}
.oir__play{margin-left:3px}
.oir__pausa,.oir--sonando .oir__play{display:none}
.oir--sonando .oir__pausa{display:block}
.oir__play,.oir__pausa{position:relative;z-index:1}

@media (prefers-reduced-transparency:reduce){
  .ruta__barra,.ruta__pie{background:var(--tinta-hondo);-webkit-backdrop-filter:none;backdrop-filter:none}
  .parada__oido{background:var(--tinta);backdrop-filter:none}
}

/* =========================================================================
   Pie
   ========================================================================= */
.pie{position:relative;background:var(--tinta-hondo);color:var(--papel);overflow:hidden;
  padding-block:clamp(4rem,9vw,var(--s16)) var(--s4);isolation:isolate}
.pie .rosal{background:rgba(250,242,228,.05)}
.pie__catedral{position:absolute;left:calc(var(--gutter) * -1);bottom:-2%;
  width:min(34vw,26rem);opacity:.12;pointer-events:none;filter:brightness(0) invert(1);z-index:0}
.pie__env{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--s8)}
.pie__llamado{font-size:var(--t-xxl);font-weight:800;letter-spacing:-.04em;line-height:.94;
  max-width:13ch;margin:0}
.pie__acciones{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--s4)}
.pie__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--s4);
  border-top:1px solid rgba(250,242,228,.2);padding-top:var(--s4)}
.pie__col h3{font-size:var(--t-sm);font-weight:700;margin:0 0 .75rem;color:rgba(250,242,228,.6)}
.pie__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.pie__col a{font-size:var(--t-sm);opacity:.9;transition:opacity .2s}
.pie__col a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.pie__organizan{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.pie__organizan span{font-size:var(--t-sm);font-weight:700}
.pie__logo{width:min(100%,30rem);color:var(--papel);margin-top:var(--s2)}
.pie__base{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;
  border-top:1px solid rgba(250,242,228,.2);padding-top:var(--s3);
  font-size:var(--t-xs);color:rgba(250,242,228,.6)}

/* barra fija en móvil */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);display:none;
  padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  background:var(--tinta-hondo);
  transform:translateY(110%);transition:transform .45s var(--ease)}
.barra.visible{transform:none}
.barra a{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;
  border-radius:var(--pastilla);background:var(--amarillo);color:var(--tinta);font-weight:700}
@media (max-width:900px){.barra{display:block}}

/* =========================================================================
   Preloader
   ========================================================================= */
.cargador{position:fixed;inset:0;z-index:var(--z-loader);background:var(--azul);
  display:grid;place-items:center;color:var(--papel)}
.cargador__rosa{width:min(46vw,20rem);color:var(--azul-flor);fill:currentColor}
.cargador__n{position:absolute;right:var(--gutter);bottom:var(--s4);
  font-size:clamp(3rem,11vw,8rem);font-weight:900;letter-spacing:-.06em;
  font-variant-numeric:tabular-nums;color:var(--tinta);margin:0}
.cargador__barra{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left;
  transform:scaleX(0);background:var(--tinta)}
body.cargando{overflow:hidden}

/* =========================================================================
   Estados iniciales de animación
   ========================================================================= */
.anima .revela{opacity:0}
.anima .revela-y{opacity:0;transform:translateY(30px)}
.anima .corta{clip-path:inset(100% 0 0 0)}
.anima .linea{overflow:hidden;display:block}
#rosa-geo path{transform-box:fill-box;transform-origin:center}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .revela,.revela-y{opacity:1 !important;transform:none !important}
  .corta{clip-path:none !important}
  .cargador,.retrato{display:none}
  /* el carrusel del recorrido salta de estación en vez de deslizarse */
  .ruta__pista{scroll-behavior:auto !important}
}

/* impresión: el programa en papel */
@media print{
  .nav,.barra,.cargador,.hero__rosa,.rosal,.calle,.caso__foto,.sangre,
  .acto__cal,.retrato,.pie__catedral,.paradas,.ruta{display:none !important}
  body,.seccion,.hero,.pie{background:#fff !important;color:#000 !important}
  body{font-size:11pt}
  .seccion{padding-block:1rem}
  .acto{break-inside:avoid}
}