/* ==========================================================================
   COFESAL 2026 — hoja de estilos única
   --------------------------------------------------------------------------
   El sitio es una sola página, así que un solo CSS es lo correcto: cero
   requests extra y cero reglas muertas. Está dividido en bloques con este
   mismo tipo de banner, en el orden en que aparecen en la página.
   ========================================================================== */


/* ==========================================================================
   1. Tokens
   --------------------------------------------------------------------------
   Los colores salieron de los 13 swatches propios del archivo de Illustrator,
   convertidos de CMYK a sRGB sin perfil de color. Son fieles pero no exactos:
   cuando llegue el export SVG hay que sustituirlos por los valores reales.
   ========================================================================== */
:root {
  /* Paleta cruda */
  --ciruela:       #4a0058;
  --magenta:       #e618e3;
  --magenta-vivo:  #ff12ff;
  --rosa:          #f56bde;
  --amarillo:      #f9f454;
  --oro:           #fcd417;
  --naranja:       #ff661f;
  --naranja-rojo:  #ff400d;
  --azul-claro:    #9de5f5;
  --lavanda:       #7dbfff;
  --azul:          #215cfc;
  --olivo:         #5f7e16;
  --crema:         #ffded6;
  --papel:         #fffdf5;

  /* Variantes oscuras de dos colores de la paleta, solo para cuando llevan
     texto encima. Los originales son de display y no llegan a contraste AA:
     el naranja sobre papel daba 3.44 (mínimo 4.5) y el blanco sobre el magenta
     de marca daba 3.75. Estos dos suben a 5.42 y 5.34 sin perder el tono. */
  --naranja-texto: #c23500;
  --magenta-ui:    #bd0eba;

  /* Roles semánticos. El cuerpo de texto SIEMPRE va en ciruela: es el único
     color de la paleta que pasa contraste AA sobre las zonas amarillas del
     fondo. El magenta queda reservado para display grande (24px+).
     No hay token de color de fondo: el fondo es la imagen continua de abajo.
     Los colores de la paleta que todavía no se usan (crema, lavanda, naranja,
     olivo…) están porque son los swatches del diseño y entran al construir
     las secciones que faltan. */
  --tinta:         var(--ciruela);
  --tinta-suave:   #6b3a7a;
  --acento:        var(--magenta);

  /* El fondo. En el diseño NO hay un degradado por sección: toda la página es
     una sola malla rasterizada continua. Va como imagen estirada sobre el
     documento entero, así que entre secciones no hay ningún corte.
     Los degradados de CSS que había aquí antes se quitaron: cada uno metía una
     costura donde empezaba la sección siguiente. */
  --fondo-pagina: image-set(url('../assets/fondo/pagina.avif') type('image/avif'),
                            url('../assets/fondo/pagina.webp') type('image/webp'));

  /* Tipografía fluida: un solo clamp por escalón, sin media queries. */
  --txt--1: clamp(0.78rem, 0.74rem + 0.18vw, 0.88rem);
  --txt-0:  clamp(0.95rem, 0.90rem + 0.22vw, 1.06rem);
  --txt-1:  clamp(1.15rem, 1.05rem + 0.45vw, 1.45rem);
  --txt-2:  clamp(1.45rem, 1.25rem + 0.90vw, 2.10rem);
  --txt-3:  clamp(1.90rem, 1.50rem + 1.80vw, 3.10rem);
  --txt-4:  clamp(2.60rem, 1.80rem + 3.60vw, 5.20rem);

  --fuente-texto: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Los títulos del diseño usan Neulis Cursive, que no se licencia para web.
     Se van a reemplazar por SVG (assets/titles/). Mientras tanto, esta pila
     aproxima el aire redondeado del original. */
  --fuente-display: 'Baloo 2', 'Poppins', system-ui, sans-serif;

  /* Ritmo y layout */
  --ancho:     1120px;
  --canal:     clamp(1.15rem, 5vw, 3rem);
  --aire:      clamp(3.5rem, 8vw, 7rem);
  --radio:     18px;
  --radio-xl:  32px;

  --sombra:    0 10px 30px -12px rgb(74 0 88 / 0.35);
  --sombra-sm: 0 4px 14px -6px rgb(74 0 88 / 0.28);
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);

  /* Breakpoints nombrados, para referencia al escribir media queries.
     (CSS no permite usar var() dentro de @media; están aquí como documentación
     de los tres únicos cortes que usa el sitio: 600, 900 y 1100.) */
  --bp-sm: 600px;
  --bp-md: 900px;
  --bp-lg: 1100px;
}


/* ==========================================================================
   2. Reset y base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* El fondo se declara también aquí para que el de body NO se propague al
     lienzo: cuando html no tiene fondo, el navegador sube el de body al canvas
     y background-size deja de resolverse contra la caja de body. */
  background-color: #fdf6c8;

  scroll-behavior: smooth;
  /* El hero no tiene nav fija encima, pero las anclas sí deben respirar. */
  scroll-padding-top: 5rem;

  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: var(--txt-0);
  line-height: 1.6;
  color: var(--tinta);

  /* La malla se estira sobre TODO el alto del documento, así el degradado
     acompaña a la página crezca lo que crezca y ninguna sección corta con la
     siguiente.

     Pero el hero se alarga para tener recorrido de entrada, y ese tramo es
     andamio, no contenido: si el degradado se estirara también sobre él, la
     banda magenta del diseño (que vive en la primera pantalla de la imagen)
     se repartiría sobre dos pantallas y el hero acabaría en crema. Por eso el
     fondo se dibuja como si el hero midiera una pantalla: --fondo-alto es el
     alto del documento SIN el recorrido, y --fondo-recorrido lo baja para que
     la fila 0 de la imagen caiga justo donde termina ese tramo.
     Las dos las mide hero.js; sin JS no hay recorrido y los valores de
     reserva dejan el comportamiento de siempre. */
  background: var(--fondo-pagina)
              0 var(--fondo-recorrido, 0px) / 100% var(--fondo-alto, 100%) no-repeat;
  /* clip, no hidden: "hidden" convierte a body en contenedor de scroll y eso
     rompe el position:sticky del escenario del hero. "clip" recorta igual
     pero no crea scrollport. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; height: auto; }

/* <picture> es solo un contenedor de decisión para el navegador; sin esto se
   interpone entre el contenedor y el <img>, y reglas como
   "height: 100%; object-fit: cover" no tienen contra qué resolverse. */
picture { display: contents; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--fuente-display);
  line-height: 1.05;
  margin: 0 0 0.4em;
  text-wrap: balance;
}

:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
  border-radius: 4px;
}

.salta-al-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.7rem 1.2rem;
  background: var(--ciruela);
  color: #fff;
  border-radius: 0 0 var(--radio) 0;
}
.salta-al-contenido:focus { left: 0; }

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ==========================================================================
   3. Layout
   ========================================================================== */
.contenedor {
  width: min(100% - var(--canal) * 2, var(--ancho));
  margin-inline: auto;
}

.seccion { padding-block: var(--aire); position: relative; }

.seccion__titulo {
  font-size: var(--txt-3);
  color: var(--acento);
  text-align: center;
  /* El magenta sobre amarillo se queda corto de contraste a tamaños chicos;
     a este tamaño es display y el trazo oscuro le da el peso que le falta. */
  -webkit-text-stroke: 1px var(--ciruela);
  paint-order: stroke fill;
}

.seccion__subtitulo {
  display: block;
  font-size: 0.62em;
  color: var(--ciruela);
  -webkit-text-stroke: 0;
}

.lugar__sub { display: block; font-weight: 400; font-size: 0.92em; }
.lugar__precio {
  margin: 0.15rem 0 0.3rem;
  font-size: var(--txt--1);
  font-weight: 600;
  color: var(--naranja-texto);
}

.seccion__intro {
  text-align: center;
  max-width: 46ch;
  margin: 0 auto 2.5rem;
  color: var(--tinta-suave);
}


/* ==========================================================================
   4. Reveal on scroll
   --------------------------------------------------------------------------
   Traído del sitio de casaalza, donde funcionó bien. La regla base deja el
   elemento invisible; js/reveal.js le pone .es-visible al entrar en pantalla y
   deja de observarlo. Sin JS, el <noscript> del head lo fuerza visible.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.es-visible { opacity: 1; transform: none; }


/* ==========================================================================
   5. Hero: pantalla de carga y entrada por scroll
   --------------------------------------------------------------------------
   Las piezas son las del diseño (logo y garabatos en SVG, fondo y marcos del
   contador como imagen), pero a mayor escala: el hero ocupa la pantalla
   completa en vez de una columna de 720 px.

   Proporciones que se conservan del diseño, medidas con getBBox() sobre
   _export/texto/diseno-texto.svg:
     logo             936.3 x 250.9  ->  relación 3.732
     caja del reloj   143.5 x 263    ->  todo lo del contador sale de su ancho
     racimo izquierdo [3657, 1607, 429, 337]
     racimo derecho   [4889, 1598, 344, 370]

   La entrada NO es una animación por tiempo: la maneja el scroll. js/hero.js
   escribe estas variables en el propio <header> en cada cuadro:
     --p    progreso general del recorrido, 0 (entrada) a 1 (estado del diseño)
     --pc   entrada de la cuenta regresiva, se despierta a media bajada
     --pg   opacidad del aviso de "baja", se apaga al primer empujón
   Todo lo demás sale de ahí con calc(), sin tocar el DOM por cuadro.

   Ojo con el valor por omisión: --p arranca en 1, o sea en el estado final.
   Así, si JS no corre (o falla), la página se queda en el diseño terminado en
   vez de esconder la cuenta para siempre. Es hero.js quien pide la entrada.
   ========================================================================== */

/* Tamaño del logo. Lo comparten el hero y la pantalla de carga para que el
   relevo entre uno y otro sea invisible. --logo-escala (cuánto más grande
   está el logo durante la entrada) la calcula hero.js: es una razón entre dos
   longitudes y eso CSS no lo sabe hacer. El valor de reserva es razonable
   para escritorio por si JS todavía no ha corrido. */
:root {
  --logo-ancho: min(80vw, 980px);
  --logo-escala: 1.3;
}

.hero {
  --p: 1;
  --q: calc(1 - var(--p));
  --pc: var(--p);
  --pg: 0;

  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding-block: clamp(2rem, 6vh, 5rem);
  /* Sin fondo propio: el hero se apoya en el degradado continuo de body, que
     arranca justo con el rosa y el naranja de esta zona del diseño. */
}

/* Con JS al mando el hero se estira: el tramo que sobra por encima de una
   pantalla es el recorrido de la entrada. 120svh dan margen para leer el
   movimiento sin obligar a un scroll largo. */
.hero.es-entrada {
  --p: 0;
  height: 180svh;
  padding-block: 0;
  display: block;
}


.hero__escenario {
  /* Tamaño base del que salen TODOS los garabatos, los de los racimos y los
     de relleno, para que crezcan juntos. */
  --D: clamp(104px, 23vw, 440px);
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100svh;
}
.hero.es-entrada .hero__escenario {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
  /* Durante el recorrido el escenario tapa la pantalla completa, así que el
     fondo de esta zona lo pinta él: la primera pantalla del degradado, quieta.
     Calza exactamente con lo que body dibuja debajo al terminar el recorrido
     (misma imagen, misma escala, fila 0 en el mismo sitio), así que no hay
     costura ni al llegar ni al pasar a la sección siguiente. */
  background: var(--fondo-pagina) 0 0 / 100% var(--fondo-alto, 100%) no-repeat;

  /* Nota anti-bug: aquí NO va overflow. Con overflow:clip (ni hablar de
     hidden, que además rompería el sticky) Chrome deja de pintar el degradado
     de body debajo del escenario pegado y sale una banda crema en la mitad de
     arriba. Recortar tampoco hace falta: lo que se sale por los lados ya lo
     corta el overflow-x de body, y lo que se sale por abajo cae sobre el
     propio hero, donde no hay nada que tapar. */
}

.hero__centro {
  /* El logo deja 10vw de aire a cada lado para que los garabatos tengan dónde
     entrar sin taparlo. --logo-alto se deriva de la proporción del original
     (936.3 / 250.9 = 3.732). */
  --logo-alto: calc(var(--logo-ancho) / 3.732);

  position: relative;
  /* Por encima de los garabatos: pueden rozar las cajas del reloj, pero nunca
     deben quedar encima de un dígito. */
  z-index: 2;
  width: var(--logo-ancho);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 5vh, 4rem);
}

.hero__logo { width: 100%; margin: 0; }
.hero__logo img {
  width: 100%;
  height: auto;
  /* Durante la entrada el logo sube lo necesario para quedar centrado en la
     pantalla: la columna reserva el hueco de la cuenta aunque esté invisible,
     así que su centro no es el del logo. hero.js mide ese desfase.

     Se mueve el logo y no la columna entera a propósito: así la cuenta —ocho
     cajas con degradado en el borde, lo más caro de repintar del hero— no
     queda dentro de un ancestro que se transforma en cada cuadro. Como de
     todos modos está invisible mientras eso pasa, moverla no aportaba nada.

     Y se escala, no se reajusta el ancho: así no hay reflujo por cuadro. */
  transform:
    translateY(calc(var(--dy-centro, 0px) * var(--q)))
    scale(calc(1 + (var(--logo-escala) - 1) * var(--q)));
  transform-origin: center;
}


/* --- Garabatos ---------------------------------------------------------
   Racimos anclados a las orillas de la PANTALLA, no del bloque central: como
   el escenario ocupa todo el ancho, calc(50% - 50vw) es justo la distancia de
   su borde al borde de la ventana. Cada racimo conserva la caja del diseño y
   se centra a lo alto; dentro, cada pieza va al porcentaje que ocupaba.
   El racimo derecho es más angosto que el izquierdo (344 contra 429), así que
   sale del mismo tamaño base multiplicado por esa proporción. */
.hero__racimo {
  position: absolute;
  top: 50%;
  z-index: 1;
  pointer-events: none;
}
.hero__racimo--izq {
  left: calc(50% - 50vw);
  width: var(--D);
  aspect-ratio: 429 / 337;
  transform: translateY(-50%);
}
.hero__racimo--der {
  right: calc(50% - 50vw);
  width: calc(var(--D) * 0.802);   /* 344 / 429 */
  aspect-ratio: 344 / 370;
  transform: translateY(-50%);
}

/* Los garabatos entran cuando el velo ya se fue, no de golpe con él: así el
   logo se queda solo un instante y la pantalla se puebla después. La opacidad
   va en los contenedores porque la de las piezas ya está ocupada por --q, y
   anidadas se multiplican solas. */
.hero.es-entrada .hero__racimo,
.hero.es-entrada .hero__extras {
  opacity: 0;
  transition: opacity 0.9s ease;
}
.hero.es-abierto .hero__extras { opacity: 1; transition-delay: 0.1s; }
.hero.es-abierto .hero__racimo { opacity: 1; transition-delay: 0.3s; }

/* Rendimiento: will-change SOLO en las siete piezas que cambian de escala.
   Un SVG que se reescala obliga a Chrome a volver a rasterizarlo en cada
   cuadro (Safari los cachea mejor, por eso ahí no se notaba); con capa propia
   rasteriza una vez y el resto lo resuelve el compositor.

   Nota anti-bug: aquí NO entra .hero__extras__grupo, aunque también se anime.
   Medido, darle capa a un elemento del tamaño de la pantalla subía el costo de
   estilo de 0.11 a 0.82 ms por cuadro: ocho veces más. Lo que solo se
   desvanece y encoge un poco no necesita capa.

   Va acotado a .es-entrada: fuera de ahí no hay animación que sostener. */
.hero.es-entrada .hero__racimo .garabato,
.hero.es-entrada .hero__logo img {
  will-change: transform;
}

.garabato {
  position: absolute;
  max-width: none;   /* el img{max-width:100%} global los aplastaría */
  height: auto;
}

/* Solo las seis piezas del diseño viajan por su cuenta: cada una viene de un
   lado distinto. --i* es de dónde sale durante la entrada; en el estado final
   (--q = 0) todos los términos se anulan y queda la posición del original. */
.hero__racimo .garabato {
  transform:
    translate(calc(var(--ix, 0vw) * var(--q)), calc(var(--iy, 0vh) * var(--q)))
    rotate(calc(var(--ir, 0deg) * var(--q)))
    scale(calc(1 + (var(--is, 1) - 1) * var(--q)));
}

/* Porcentajes dentro de cada racimo. left/width van contra el ancho de la
   caja y top contra su alto, por eso los dos denominadores son distintos. */
.garabato--estrella { left:  0.05%; top:  0.09%; width: 46.46%; --ix:  15vw; --iy: -29vh; --is: 1.55; --ir: -16deg; }
.garabato--langosta { left: 14.36%; top: 40.42%; width: 42.54%; --ix:   5vw; --iy:  27vh; --is: 1.45; --ir:  13deg; }
.garabato--garabato { left: 47.30%; top: 62.20%; width: 52.68%; --ix:  21vw; --iy:  23vh; --is: 1.35; --ir: -11deg; }
.garabato--rosa     { left: -0.03%; top: 56.24%; width: 50.44%; --ix: -19vw; --iy:  26vh; --is: 1.50; --ir:  15deg; }
.garabato--coral    { left: 39.91%; top: 28.97%; width: 45.96%; --ix:  -7vw; --iy: -27vh; --is: 1.45; --ir: -13deg; }
.garabato--cangrejo { left: 52.09%; top:  0.08%; width: 47.79%; --ix: -15vw; --iy: -25vh; --is: 1.55; --ir:  17deg; }

/* Los garabatos de relleno solo existen durante la entrada: los crea hero.js
   con su posición, tamaño y giro. Se van apagando y encogiendo conforme la
   pantalla se ordena. */
.hero__extras {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* El grupo es lo único que se mueve; las piezas de dentro tienen el estilo
   fijo que les escribe hero.js y no se enteran del scroll. */
.hero__extras__grupo {
  position: absolute;
  inset: 0;
  /* Solo opacidad: este elemento es del tamaño de la pantalla y transformarlo
     en cada cuadro es trabajo de GPU a pantalla completa para un matiz que no
     se alcanza a ver, porque lo que está haciendo es apagarse. */
  opacity: var(--q);
}


/* --- Aviso de bajar ----------------------------------------------------- */
.hero__guia {
  position: absolute;
  bottom: clamp(1rem, 4vh, 2.5rem);
  left: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.9rem;
  border: 0;
  background: none;
  color: var(--ciruela);
  cursor: pointer;
  opacity: var(--pg);
  transform: translateX(-50%);
  /* Cuando ya no se ve tampoco debe poder pulsarse ni recibir el foco. */
  visibility: hidden;
}
.hero.es-abierto .hero__guia { visibility: visible; }
.hero.es-final .hero__guia { visibility: hidden; }

.hero__guia-texto {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: var(--txt--1, 0.85rem);
  letter-spacing: 0.04em;
}
.hero__guia-flecha {
  width: 1.5rem;
  height: 1.5rem;
  animation: guia-rebote 1.8s ease-in-out infinite;
}
@keyframes guia-rebote {
  0%, 100% { transform: translateY(-15%); }
  50%      { transform: translateY(25%); }
}


/* --- Pantalla de carga --------------------------------------------------
   Cubre la pantalla con el mismo degradado de la página (cero destello) y
   enseña el logo en el punto exacto donde arranca el hero. Al retirarse solo
   se desvanece el velo: el logo de abajo ya está ahí, del mismo tamaño.

   La animación de seguridad es una red: si JS muriera antes de quitarla, a
   los 6 s se va sola y la página queda usable. */
.cargando {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--fondo-pagina) 0 0 / cover no-repeat, #fdf6c8;
  transition: opacity 0.55s ease;
  animation: carga-red 0.01s linear 6s forwards;
}
.cargando__caja {
  /* Mismo alto que el escenario del hero, para que el centro coincida. */
  height: 100svh;
  display: grid;
  place-items: center;
  /* --dy-velo corrige cuando el logo del hero NO queda en el centro de la
     pantalla (en la puente comparte columna con el reloj y la fecha, así que
     queda más arriba). Lo mide puente.js. Va aquí y no en .cargando__logo
     porque ese lleva una animación de entrada que también usa transform y
     pisaría este desplazamiento. */
  transform: translateY(var(--dy-velo, 0px));
}
.cargando__logo {
  width: var(--logo-ancho);
  height: auto;
  transform: scale(var(--logo-escala));
  animation: carga-logo 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes carga-logo {
  from { opacity: 0; transform: scale(calc(var(--logo-escala) * 0.9)); }
  to   { opacity: 1; transform: scale(var(--logo-escala)); }
}
@keyframes carga-red { to { opacity: 0; visibility: hidden; } }

.cargando.se-va { opacity: 0; }
.cargando.se-fue { display: none; }


/* ==========================================================================
   6. Cuenta regresiva
   --------------------------------------------------------------------------
   Cuatro pares de cajas separados por dos puntos. El diseño trae tres pares
   (sin segundos); el cuarto par reusa dos degradados espejeados.

   Todo se deriva de --caja, el ancho de una caja, con las proporciones del
   diseño. El ancho total son 8 cajas + 4 separaciones mínimas dentro de cada
   par + 3 huecos de dos puntos:
       8 + 4(0.00383) + 3(0.2540) = 8.7773 cajas
   ========================================================================== */
.cuenta {
  --ancho-cuenta: min(92vw, 1100px);
  --caja: calc(var(--ancho-cuenta) / 8.7773);
  width: var(--ancho-cuenta);
  display: flex;
  justify-content: center;
  align-items: flex-start;

  /* Entra a media bajada, cuando el logo ya va de salida hacia su sitio.
     --pc lo escribe hero.js; sin JS vale lo mismo que --p, o sea 1. */
  opacity: var(--pc);
  transform: translateY(calc(2.5rem * (1 - var(--pc))));
}

.cuenta__par { display: flex; position: relative; }

.cuenta__caja {
  width: var(--caja);
  height: calc(var(--caja) * 1.8328);          /* 263 / 143.5 */
  border: calc(var(--caja) * 0.1017) solid transparent;  /* 14.6 / 143.5 */
  border-radius: calc(var(--caja) * 0.2826);   /* 40.56 / 143.5 */
  display: grid;
  place-items: center;

  /* Borde con degradado: el relleno crema ocupa el padding-box y la imagen del
     marco ocupa el border-box, así que la imagen solo se ve en el anillo. */
  background:
    linear-gradient(#fde0ce, #fde0ce) padding-box,
    var(--marco) border-box;
  background-size: auto, 100% 100%;
}
.cuenta__caja + .cuenta__caja { margin-left: calc(var(--caja) * 0.00383); }

.cuenta__caja--1 { --marco: url('../assets/hero/marco-1.webp'); }
.cuenta__caja--2 { --marco: url('../assets/hero/marco-2.webp'); }
.cuenta__caja--3 { --marco: url('../assets/hero/marco-3.webp'); }
.cuenta__caja--4 { --marco: url('../assets/hero/marco-4.webp'); }
.cuenta__caja--5 { --marco: url('../assets/hero/marco-5.webp'); }
.cuenta__caja--6 { --marco: url('../assets/hero/marco-6.webp'); }
.cuenta__caja--7 { --marco: url('../assets/hero/marco-7.webp'); }
.cuenta__caja--8 { --marco: url('../assets/hero/marco-8.webp'); }

.cuenta__caja span {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: calc(var(--caja) * 1.0652);   /* 152.862 / 143.5 */
  line-height: 1;
  color: #5f0241;
  font-variant-numeric: tabular-nums;
  transform: translateY(2%);
}

/* Los dos puntos ocupan exactamente el hueco entre pares y no suman ancho:
   el glifo se desborda centrado sin empujar las cajas. */
.cuenta__dospuntos {
  flex: none;
  width: calc(var(--caja) * 0.254);        /* 36.45 / 143.5 */
  text-align: center;
  white-space: nowrap;
}
.cuenta__dospuntos span {
  display: block;
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: calc(var(--caja) * 0.5934);   /* 85.1545 / 143.5 */
  line-height: 1;
  color: #5f0241;
  margin-top: calc(var(--caja) * 0.6516);  /* línea base a 157.34 del borde */
}

.cuenta__etiqueta {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: calc(var(--caja) * 0.1328);
  font-family: var(--fuente-display);
  font-weight: 700;
  /* La proporción del diseño (0.2312) se calculó con seis cajas; con ocho
     quedaría en 8 px en un teléfono, así que lleva piso de 10 px. */
  font-size: max(calc(var(--caja) * 0.2312), 10px);
  line-height: 1;
  color: #5f0241;
  white-space: nowrap;
}

.cuenta--terminada .cuenta__caja span { color: #f2662a; }


/* ==========================================================================
   7. Tabs de día (compartidos por Agenda y Dresscode)
   ========================================================================== */
.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  padding: 0;
}

.tabs__btn {
  border: 2px solid var(--ciruela);
  background: var(--azul-claro);
  color: var(--ciruela);
  border-radius: 999px;
  padding: 0.4rem 1.05rem;
  font-size: var(--txt--1);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.tabs__btn:hover { transform: translateY(-2px); }
.tabs__btn[aria-selected='true'] {
  background: var(--magenta-ui);
  color: #fff;
}

.panel[hidden] { display: none; }


/* ==========================================================================
   8. Agenda
   ========================================================================== */
.dia__encabezado {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.dia__numero {
  font-family: var(--fuente-display);
  font-size: var(--txt-4);
  color: var(--ciruela);
  line-height: 1;
}
.dia__mes {
  font-family: var(--fuente-display);
  font-size: var(--txt-2);
  color: var(--naranja-texto);
}
.dia__etiqueta {
  font-family: var(--fuente-display);
  font-size: var(--txt-2);
  color: var(--ciruela);
}
.dia__insignia {
  align-self: center;
  background: var(--naranja-rojo);
  color: #fff;
  font-size: var(--txt--1);
  font-weight: 600;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  transform: rotate(-8deg);
}

/* La tarjeta imita el timbre postal del diseño. El borde dentado se dibuja con
   máscaras CSS, no con una imagen: pesa 0 bytes y se adapta a cualquier alto.
   Son cuatro capas, una por orilla. Cada una cubre TODA la tarjeta y solo es
   transparente en la fila de agujeros de su propio borde; al combinarlas con
   mask-composite: intersect, sobrevive únicamente lo que las cuatro dejan
   opaco, o sea el centro entero y los cuatro bordes perforados.
   (El primer intento usaba una sola capa repetida en X y en Y, y acababa
   perforando la tarjeta completa.) */
.tarjeta-timbre {
  --diente: 7px;
  --paso: 20px;
  background: var(--papel);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  filter: drop-shadow(0 10px 18px rgb(74 0 88 / 0.22));
  mask:
    radial-gradient(var(--diente) at 50% 0,    #0000 98%, #000) 50% 0    / var(--paso) 100% repeat-x,
    radial-gradient(var(--diente) at 50% 100%, #0000 98%, #000) 50% 100% / var(--paso) 100% repeat-x,
    radial-gradient(var(--diente) at 0 50%,    #0000 98%, #000) 0 50%    / 100% var(--paso) repeat-y,
    radial-gradient(var(--diente) at 100% 50%, #0000 98%, #000) 100% 50% / 100% var(--paso) repeat-y;
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

.agenda__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: clamp(1.5rem, 5vw, 3rem);
}
.agenda__item {
  break-inside: avoid;
  display: flex;
  gap: 0.7rem;
  padding: 0.45rem 0;
  border-bottom: 1px dashed rgb(74 0 88 / 0.25);
}
.agenda__hora {
  font-weight: 600;
  color: var(--naranja-texto);
  font-variant-numeric: tabular-nums;
  flex: none;
}

@media (max-width: 600px) {
  .agenda__lista { columns: 1; }
}


/* ==========================================================================
   9. Dresscode
   ========================================================================== */
.grupo-look { margin-bottom: 2.5rem; }

.grupo-look__titulo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--fuente-texto);
  font-size: var(--txt-1);
  font-weight: 600;
  color: var(--ciruela);
  margin-bottom: 1rem;
}
/* La viñeta de flor del diseño, hecha con un gradiente cónico en vez de un PNG. */
.grupo-look__titulo::before {
  content: '';
  flex: none;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: conic-gradient(var(--magenta) 0 25%, var(--oro) 0 50%, var(--magenta) 0 75%, var(--oro) 0);
}

.looks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(110px, 22vw, 165px), 1fr));
  gap: clamp(0.7rem, 2.5vw, 1.2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.look {
  border: 3px solid var(--magenta);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--azul-claro);
  aspect-ratio: 3 / 5;
}
.look img { width: 100%; height: 100%; object-fit: cover; }
.look:nth-child(even) { border-color: var(--azul); }


/* ==========================================================================
   10. Ponencias
   ========================================================================== */
.ponentes {
  display: grid;
  /* 180px para que los cuatro ponentes quepan en una sola fila en desktop.
     Con 200 el cuarto se caía al siguiente renglón: 4x200 + 3 gaps de 40 = 920
     y el contenedor da 904. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ponente { text-align: center; }

/* El marco de flor del diseño: un clip-path, no una imagen con alpha. */
.ponente__foto {
  width: clamp(120px, 26vw, 170px);
  aspect-ratio: 1;
  margin: 0 auto 0.8rem;
  background: var(--azul-claro);
  clip-path: polygon(
    50% 0%, 64% 12%, 83% 8%, 88% 27%, 100% 42%, 90% 58%,
    95% 77%, 76% 82%, 65% 97%, 50% 89%, 35% 97%, 24% 82%,
    5% 77%, 10% 58%, 0% 42%, 12% 27%, 17% 8%, 36% 12%
  );
}
.ponente__foto img { width: 100%; height: 100%; object-fit: cover; }

.ponente__nombre { font-size: var(--txt-1); color: var(--magenta); margin-bottom: 0.1em; }
.ponente__handle { font-size: var(--txt--1); color: var(--azul); }
.ponente__toggle {
  margin-top: 0.6rem;
  background: none;
  border: 0;
  border-bottom: 2px solid var(--magenta-ui);
  padding: 0 0 2px;
  font-size: var(--txt--1);
  font-weight: 600;
  font-style: italic;
  color: var(--magenta-ui);
  cursor: pointer;
}
.ponente__toggle:hover { color: var(--ciruela); border-color: var(--ciruela); }

.ponente__bio {
  font-size: var(--txt--1);
  color: var(--tinta-suave);
  text-align: left;
  margin-top: 0.8rem;
}
.ponente__bio[hidden] { display: none; }


/* ==========================================================================
   11. Recomendaciones
   ========================================================================== */
.lugares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 30vw, 240px), 1fr));
  gap: clamp(1rem, 3vw, 1.8rem);
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
}

/* Tarjeta polaroid: fondo blanco con más margen abajo, como el marco del diseño. */
.lugar {
  background: #fff;
  padding: 0.7rem 0.7rem 1.5rem;
  border-radius: 4px;
  box-shadow: var(--sombra);
  transition: transform 0.3s var(--ease);
}
.lugar:nth-child(odd)  { transform: rotate(-1.2deg); }
.lugar:nth-child(even) { transform: rotate(1deg); }
.lugar:hover { transform: rotate(0) translateY(-5px); }

.lugar img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.lugar__nombre { font-size: var(--txt-0); font-weight: 600; margin: 0.7rem 0 0.2rem; }
.lugar__desc { font-size: var(--txt--1); color: var(--tinta-suave); margin: 0; }
.lugar__maps {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: var(--txt--1);
  font-weight: 600;
  color: var(--azul);
}


/* ==========================================================================
   12. Don't forget
   ========================================================================== */
.packing {
  display: grid;
  /* Columnas fijas en vez de auto-fit: son seis objetos y auto-fit los dejaba
     en 5 + 1. Dos filas parejas se leen mucho mejor. */
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 4vw, 2.2rem);
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.packing img { height: clamp(90px, 20vw, 140px); width: auto; margin: 0 auto 0.6rem; object-fit: contain; }
.packing__nombre { font-family: var(--fuente-display); font-size: var(--txt-1); color: var(--naranja-texto); }

@media (min-width: 600px) {
  .packing { grid-template-columns: repeat(3, 1fr); }
}


/* ==========================================================================
   13. Links a formularios
   ========================================================================== */
.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.boton {
  display: inline-block;
  background: var(--oro);
  border: 3px solid var(--ciruela);
  border-radius: 999px;
  padding: 0.7rem 1.8rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--sombra-sm);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.boton:hover { transform: translateY(-3px); background: var(--rosa); }

.boton--inactivo {
  background: #e8e2d4;
  color: var(--tinta-suave);
  border-color: var(--tinta-suave);
  cursor: not-allowed;
  box-shadow: none;
}
.boton--inactivo:hover { transform: none; background: #e8e2d4; }

.links__nota { display: block; font-size: var(--txt--1); font-weight: 400; }


/* ==========================================================================
   14. Patrocinadores y pie
   ========================================================================== */
.patrocinadores__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 6vw, 4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.patrocinadores__lista img { max-height: 54px; width: auto; }
.patrocinadores__texto { font-family: var(--fuente-display); font-size: var(--txt-2); color: var(--ciruela); }

.pie {
  padding: var(--aire) var(--canal) 2.5rem;
  text-align: center;
}
.pie__organizadores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  list-style: none;
  margin: 1.5rem 0 2.5rem;
  padding: 0;
}
.pie__rol { display: block; font-size: var(--txt--1); color: var(--tinta-suave); }
.pie__correo { font-weight: 600; color: var(--ciruela); }
/* Era blanco porque el pie tenía un degradado olivo propio. Ahora cae sobre la
   parte clara del fondo continuo, así que va en tinta. */
.pie__legal { font-size: var(--txt--1); color: var(--tinta-suave); }


/* ==========================================================================
   Página puente (index.html)
   --------------------------------------------------------------------------
   Lo que está publicado mientras el sitio se termina: el hero del diseño en su
   estado final, una sola pantalla, sin entrada animada. No hace falta CSS de
   maquetación porque ese estado final YA es el valor por omisión de .hero
   (--p vale 1 hasta que hero.js diga otra cosa, y aquí no corre). Solo hay que
   corregir las dos cosas que sí daban por hecha la entrada.
   ========================================================================== */
.es-puente {
  /* 1. El velo de carga. --logo-escala existe para la entrada, donde el logo
        arranca más grande y va encogiendo. Sin entrada, el velo mostraría el
        logo a 1.3x y daría un salto al desvanecerse, justo lo que el relevo
        sin costura entre velo y hero está pensado para evitar. */
  --logo-escala: 1;

  /* 2. El degradado. La malla se estira sobre el alto del documento, así que
        con una sola pantalla de contenido el degradado de la página ENTERA se
        comprimiría aquí y el hero saldría crema en vez de magenta→naranja.
        En el sitio completo el hero ocupa el 13.47% de la imagen (fila 768 de
        5702, medido), o sea 1 / 0.1347 = 7.424 pantallas. Con eso la puente
        enseña exactamente la misma banda que el diseño. */
  --fondo-alto: calc(100svh * 7.424);
}

/* Aquí van tres bloques (logo, reloj y fecha) donde el hero espera dos, así
   que se aprieta el aire entre ellos: quien escanea un QR tiene que poder
   leerlo todo sin hacer nada más.

   Y el padding se va a cero. El escenario ya mide 100svh por su cuenta, así
   que el padding del hero se sumaba ENCIMA de esa pantalla y dejaba la página
   48 px más alta que la ventana: una barra de scroll por nada. */
.es-puente .hero { padding-block: 0; }
.es-puente .hero__centro { gap: clamp(1rem, 3.5vh, 2.5rem); }

.puente__cuando {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  /* Las etiquetas del reloj (Days, Hours…) van posicionadas fuera de la caja
     de .cuenta, así que el hueco del flex no las cuenta y este texto se les
     encimaría. */
  margin: clamp(0.75rem, 3vh, 2rem) 0 0;
  text-align: center;
  text-wrap: balance;
}

.puente__fechas {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: var(--txt-2);
  line-height: 1.1;
  color: #5f0241;   /* el mismo morado de los dígitos del reloj */
}

.puente__sede {
  font-weight: 600;
  font-size: var(--txt-0);
  color: var(--tinta);
}

/* El 404 reusa la maquetación de la puente; solo le falta el número grande. */
.error__codigo {
  margin: 0;
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: var(--txt-4);
  line-height: 1;
  color: #5f0241;
}

.puente__aviso {
  font-size: var(--txt--1);
  color: var(--tinta-suave);
}


/* ==========================================================================
   15. Movimiento reducido
   --------------------------------------------------------------------------
   Va al final para ganarle en especificidad a todo lo anterior.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }

  /* Sin recorrido de entrada: el hero se queda quieto en el estado del
     diseño. hero.js ya evita poner .es-entrada, esto es el cinturón por si
     la preferencia cambia con la página abierta. */
  .hero.es-entrada {
    --p: 1;
    height: auto;
    min-height: 100svh;
    display: grid;
    padding-block: clamp(2rem, 6vh, 5rem);
  }
  .hero.es-entrada .hero__escenario { position: relative; height: auto; min-height: 100svh; }
  .hero.es-entrada .hero__guia { visibility: hidden; }
  .hero__guia-flecha { animation: none; }
  .cargando { display: none; }
}