/* ============================================================
   Festival de las Flores 2025 · Madrid, Cundinamarca
   Estilos de la aplicación
   ============================================================ */

:root {
  font-synthesis-weight: none;   /* Lilita One ya es gruesa: nada de negritas falsas */
  --esq: clamp(46px, 5.6%, 68px);   /* margen lateral que pasa la página */
  /* La noche tejida del afiche: vino hondo, ámbar de pétalo, magenta de las fechas */
  --selva: #1b0911;
  --laguna: #4a1136;
  --laguna-claro: #66184a;
  --crema: #fff4e3;
  --luz: #ffeacb;
  --oro: #ffad1f;
  --oro-suave: #ffd27a;
  --tierra: #d81e8f;
  --agua: #2cc7c2;
  --viento: #e9cfdb;
  --texto: #f3e4d6;
  --texto-2: #cdaebc;
  --papel: #fff5e6;
  --papel-2: #f3e3cd;
  --tinta: #3a1230;
  --tinta-2: #6e4960;

  --display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --body: "Figtree", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --r-s: 10px;
  --r-m: 16px;
  --giro: .85s;
}

/* La identidad del festival es oscura: no cambia con el tema del sistema */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --selva: #1b0911; } }
:root[data-theme="dark"] { --selva: #1b0911; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }

body {
  margin: 0; min-height: 100svh;
  font-family: var(--body); font-size: 1.05rem; font-weight: 500; line-height: 1.55;
  color: var(--texto); background-color: var(--selva);
  overflow-x: hidden; -webkit-tap-highlight-color: transparent;
}
body.bloqueado { overflow: hidden; }

img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; border-radius: 6px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Fondo: el fondo real de las piezas, uniforme ----------
   Va en un elemento fijo propio: background-attachment:fixed no es fiable en iOS. */
#velo {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-color: var(--selva);
  background-image: url("fondo-pieza.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
#velo::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(75% 50% at 50% 0%, rgba(91, 20, 58, .35), transparent 72%),
    radial-gradient(95% 65% at 50% 100%, rgba(20, 5, 13, .55), transparent 70%);
}
#app { position: relative; z-index: 1; }

/* ============================================================
   1 · Pantalla de carga
   ============================================================ */
#carga {
  position: fixed; inset: 0; z-index: 100; overflow: hidden;
  background-color: var(--selva);
  background-image: url("fondo-pieza.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
#carga[hidden] { display: none; }
/* El fondo no espera a que carguen las capas: respira y suelta chispas
   doradas desde el primer instante, mientras la pieza se arma encima. */
#carga { animation: fondo-vivo 24s ease-in-out infinite alternate; }
@keyframes fondo-vivo {
  from { background-size: 112%; background-position: 46% 44%; }
  to   { background-size: 132%; background-position: 56% 58%; }
}
#carga::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 190%; z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(2.2px 2.2px at 11% 86%, rgba(253, 240, 190, .95), transparent 62%),
    radial-gradient(1.6px 1.6px at 23% 94%, rgba(243, 172, 46, .85), transparent 62%),
    radial-gradient(2px 2px at 37% 90%, rgba(253, 240, 190, .8), transparent 62%),
    radial-gradient(1.4px 1.4px at 52% 97%, rgba(247, 200, 126, .9), transparent 62%),
    radial-gradient(2.4px 2.4px at 64% 88%, rgba(253, 240, 190, .85), transparent 62%),
    radial-gradient(1.6px 1.6px at 78% 93%, rgba(243, 172, 46, .8), transparent 62%),
    radial-gradient(2px 2px at 88% 89%, rgba(253, 240, 190, .9), transparent 62%),
    radial-gradient(1.5px 1.5px at 95% 96%, rgba(247, 200, 126, .8), transparent 62%);
  animation: chispas-fondo 11s linear infinite;
}
@keyframes chispas-fondo {
  0%        { transform: translateY(0); opacity: 0; }
  10%, 72%  { opacity: .9; }
  100%      { transform: translateY(-52vh); opacity: 0; }
}
#carga::after {   /* la misma veladura del resto de la página */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(85% 60% at 50% 45%, transparent 40%, rgba(20, 5, 13, .55));
}

/* La pieza de entrada: lo más grande que quepa completa y centrada,
   dejando aire para las piezas que salen despedidas al desarmarse. */
.escena.cubrir {
  position: absolute; top: 50%; left: 50%; z-index: 1;
  transform: translate(-50%, -50%);
  width: min(92vw, calc(88svh * 0.71879));
  height: auto;
}

.carga-pie {
  position: absolute; z-index: 3; left: 0; right: 0;
  bottom: calc(1.6rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: .85rem;
  transition: opacity .4s ease;
}
#carga.terminando .carga-pie { opacity: 0; }

.barra-carga {
  width: min(62vw, 15rem); height: 3px; border-radius: 3px;
  background: rgba(247, 200, 126, .22); overflow: hidden;
}
.barra-carga i {
  display: block; height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--tierra), var(--oro));
  box-shadow: 0 0 12px rgba(243, 172, 46, .7);
  transition: width .3s ease;
}
.carga-texto {
  margin: 0; font-size: .95rem; letter-spacing: .04em; color: var(--crema);
  min-height: 1.4em; text-align: center; text-shadow: 0 2px 10px rgba(14, 3, 9, .9);
}

/* El brillo dorado que cierra el armado y da paso a la agenda */
#destello {
  position: fixed; inset: 0; z-index: 120; pointer-events: none; opacity: 0;
  background:
    radial-gradient(62% 46% at 50% 46%, rgba(255, 251, 233, 1), rgba(253, 209, 139, .85) 38%, rgba(243, 172, 46, .25) 72%),
    linear-gradient(rgba(247, 200, 126, .92), rgba(247, 200, 126, .92));
}
#destello::after {
  content: ""; position: absolute; left: 50%; top: 46%; width: 0; height: 0;
  border-radius: 50%; border: 2px solid rgba(253, 240, 190, .85);
  transform: translate(-50%, -50%);
}
#destello.encendido { animation: destellar 2s cubic-bezier(.25, .8, .3, 1) forwards; }
#destello.encendido::after { animation: onda 1.5s cubic-bezier(.15, .8, .3, 1) forwards; }
@keyframes destellar {
  0%   { opacity: 0; transform: scale(.5); }
  16%  { opacity: 1; transform: scale(1.04); }
  30%  { opacity: 1; transform: scale(1.1); }
  60%  { opacity: .55; transform: scale(1.28); }
  100% { opacity: 0; transform: scale(1.75); }
}
@keyframes onda {
  0%   { width: 0; height: 0; opacity: .9; border-width: 3px; }
  100% { width: 230vmax; height: 230vmax; opacity: 0; border-width: 0; }
}

/* ============================================================
   2 · La pieza viva por capas
   ============================================================ */
.escena {
  position: relative; aspect-ratio: 1002 / 1394; perspective: 1300px;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.lienzo { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.capa { position: absolute; transform-style: preserve-3d; pointer-events: none; }
.capa .pieza { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; will-change: transform; }
.capa img { width: 100%; height: 100%; -webkit-user-drag: none; will-change: transform; }
.capa canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.c-hoja-izq img { transform-origin: 20% 100%; }
.c-hoja-der img { transform-origin: 80% 100%; }
.c-helecho-izq img { transform-origin: 80% 0%; }
.c-helecho-der img { transform-origin: 20% 0%; }
.c-flores-izq img { transform-origin: 30% 100%; }
.c-flores-der img { transform-origin: 70% 100%; }
.c-flor img, .c-resplandor img { transform-origin: 50% 50%; }
/* Los helechos de arriba cuelgan: van volteados respecto a como se dibujan */
.c-helecho-izq .pieza { transform-origin: 50% 50%; }
.c-helecho-izq img { transform: scaleY(-1) rotate(8deg); }
.c-helecho-der img { transform: scale(-1, -1) rotate(8deg); }

.brillo {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  -webkit-mask: var(--mascara) center / 100% 100% no-repeat;
  mask: var(--mascara) center / 100% 100% no-repeat;
  background-repeat: no-repeat;
}
.c-titulo .brillo {
  background-image: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .8) 50%, transparent 65%);
  background-size: 60% 100%; background-position: -150% 0; mix-blend-mode: soft-light;
  animation: barrido 4s ease-in-out 1.6s infinite;
}
.c-flor .brillo {
  background-image: linear-gradient(100deg, transparent 30%, rgba(255, 246, 210, .55) 50%, transparent 70%);
  background-size: 45% 100%; background-position: -150% 0; mix-blend-mode: soft-light;
  animation: barrido 5.5s ease-in-out 2.5s infinite;
}
@keyframes barrido { 0% { background-position: -150% 0; } 35%, 100% { background-position: 250% 0; } }
@keyframes recorrido { 0% { background-position: 0 -60%; } 70%, 100% { background-position: 0 160%; } }

/* ============================================================
   3 · Mandos flotantes (la app ya no lleva cabecera)
   ============================================================ */
#mandos {
  position: fixed; z-index: 70;
  top: calc(.5rem + env(safe-area-inset-top)); left: .55rem;
  display: flex; gap: .4rem; align-items: center;
  opacity: 0; transform: translateY(-10px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.listo #mandos { opacity: 1; transform: none; }
#mandos[hidden] { display: none; }
.mando {
  display: inline-flex; align-items: center; gap: .3rem;
  border: 1px solid rgba(243, 172, 46, .4); border-radius: 999px; cursor: pointer;
  background: rgba(31, 7, 20, .82); color: var(--texto);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: .4rem .8rem .4rem .6rem; font-size: .84rem; font-weight: 700;
  box-shadow: 0 6px 18px rgba(14, 3, 9, .4);
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.mando:hover { background: var(--oro); color: var(--selva); border-color: var(--oro); }
.mando:active { transform: scale(.96); }
.mando.icono { padding: .42rem; width: 34px; height: 34px; justify-content: center; }
.mando.icono[aria-pressed="true"] { background: var(--oro); color: var(--selva); }
/* En pantalla completa manda el botón propio del libro: aquí solo queda volver */
body.inmersivo #pantalla { display: none; }


/* ============================================================
   4 · Pantallas
   ============================================================ */
.pantalla { display: none; }
.pantalla.activa { display: block; animation: entrar .45s ease both; }
@keyframes entrar { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.libro.activa {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: calc(100svh - var(--h-barra, 0px) - var(--h-pieweb, 0px));
}
.libro { position: relative; padding: .5rem clamp(.4rem, 1.4vw, 1rem) .6rem; }
/* Los mandos flotan encima: el libro empieza por debajo de ellos */
.libro.activa { padding-top: max(.5rem, var(--h-mandos, 0px)); }
/* Solo estos ocupan todo el ancho; el álbum conserva el suyo, que sale de --alto */
.libro.activa > .antes-album,
.libro.activa > .album-pie { width: 100%; }
/* La tira de días y los filtros se dibujan por encima del libro: la hoja,
   inclinada en 3D, asoma un poco hacia arriba y no debe taparlos */
.libro.activa > .antes-album, .libro.activa > .album-pie { position: relative; z-index: 20; }

/* Tira de días y filtros, encima del álbum */
.antes-album {
  max-width: 74rem; margin: 0 auto .4rem;
  display: flex; flex-direction: column; gap: .35rem;
  transition: opacity .4s ease, max-height .4s ease;
  overflow: hidden;
}
/* Solo la portada oculta los controles: ella misma es el llamado a abrir */
.libro.cerrado:not(.fin) .antes-album,
.libro.cerrado:not(.fin) .album-pie { opacity: 0; max-height: 0; margin-bottom: 0; pointer-events: none; }

.tira {
  display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; padding: .15rem .1rem .3rem;
  justify-content: center;
  justify-content: safe center;   /* centrado sin cortar el primer día al desplazar */
}
.tira::-webkit-scrollbar { display: none; }
.dia-btn {
  flex: none; cursor: pointer; border: 1px solid rgba(243, 172, 46, .3);
  background: rgba(69, 16, 44, .45); color: var(--texto);
  border-radius: var(--r-s); padding: .35rem .7rem; text-align: center; line-height: 1.08;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.dia-btn small { display: block; font-size: .64rem; letter-spacing: .1em; opacity: .8; font-weight: 700; }
.dia-btn b { display: block; font-family: var(--display); font-weight: 900; font-size: 1.2rem; }
/* Los elementos que trae ese día, en sus colores */
.dia-puntos { display: flex; justify-content: center; gap: 3px; margin-top: .22rem; }
.dia-puntos i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 0 1px rgba(31, 7, 20, .3);
}
/* El día de hoy, marcado en la tira */
.dia-btn.es-hoy { border-color: var(--oro); box-shadow: 0 0 0 1px rgba(243, 172, 46, .3); }
.dia-btn .hoy {
  display: block; margin-top: .2rem; padding: .02rem .3rem; border-radius: 999px;
  font-size: .5rem; font-weight: 900; letter-spacing: .12em;
  background: var(--oro); color: var(--selva);
}
.dia-btn[aria-current="true"] .hoy { background: var(--selva); color: var(--oro); }
.dia-btn:hover { background: var(--laguna); border-color: var(--oro-suave); }
.dia-btn[aria-current="true"] { background: var(--oro); color: var(--selva); border-color: var(--oro); }
.dia-btn[aria-current="true"] .dia-puntos i { box-shadow: 0 0 0 1px rgba(31, 7, 20, .55); }

.filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.filtro {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  border: 1px solid rgba(243, 172, 46, .28); background: rgba(69, 16, 44, .35); color: var(--texto-2);
  padding: .22rem .62rem .22rem .4rem; border-radius: 999px;
  font-size: .76rem; font-weight: 700; transition: all .18s ease;
}
.filtro .punto { width: .6rem; height: .6rem; border-radius: 50%; background: var(--c); flex: none; }
/* El nombre del elemento manda; la categoría lo acompaña */
.filtro-icono {
  width: 1.15rem; height: 1.15rem; flex: none; border-radius: 50%;
  display: grid; place-items: center; color: var(--c);
  border: 1.5px solid var(--c); background: rgba(31, 7, 20, .35);
}
.filtro-icono svg { width: 62%; height: 62%; }
.filtro b { color: var(--luz); letter-spacing: .01em; }
.filtro-cat { font-weight: 600; opacity: .78; }
.filtro[aria-pressed="true"] { color: var(--selva); background: var(--c); border-color: var(--c); }
.filtro[aria-pressed="true"] b { color: var(--selva); }
.filtro[aria-pressed="true"] .punto { background: rgba(31, 7, 20, .55); }
.filtro[aria-pressed="true"] .filtro-icono { color: var(--selva); border-color: rgba(31, 7, 20, .55); background: rgba(253, 252, 224, .5); }
@media (max-width: 620px) { .filtro-cat { display: none; } }

/* ---------- El festival se asoma al mapa: tinguas, plantas y chispas ----------
   Todo es decorativo y no recibe toques: se mueve por encima del satélite,
   por debajo de los marcadores. */
.mapa-vida { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
/* Solo las esquinas: plantas asomando, con un mecer muy leve. Nada cruza
   el mapa ni pasa por encima de los marcadores. */
.mv-planta {
  position: absolute; background-image: var(--img);
  background-repeat: no-repeat; background-size: contain;
  bottom: -2%; width: 22%; height: 20%; opacity: .2;
  animation: mecer 22s ease-in-out infinite;
}
.mv-planta.izq { left: -2%; background-position: left bottom; transform-origin: left bottom; }
.mv-planta.der { right: -2%; background-position: right bottom; transform-origin: right bottom; animation-duration: 26s; }
.mv-planta.alta {
  right: 4%; top: -3%; bottom: auto; width: 15%; height: 22%; opacity: .12;
  background-position: right top; transform-origin: right top; animation-duration: 30s;
}
.mv-planta.alta-izq {
  left: 3%; top: -2%; bottom: auto; width: 9%; height: 18%; opacity: .12;
  background-position: left top; transform-origin: left top; animation-duration: 34s;
}
/* El mecer: una inclinación mínima, como de brisa. Lo comparten las plantas
   del mapa y los adornos de las páginas, cada uno con su propio ritmo. */
@keyframes mecer {
  0%, 100% { transform: rotate(-1.1deg) translateY(0); }
  50%      { transform: rotate(1.2deg) translateY(-2px); }
}

/* ---------- Mi ubicación en el mapa ---------- */
.yo-aqui {
  position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none;
  transform: translate(-50%, -50%);
}
.yo-aqui[hidden] { display: none; }
.yo-punto {
  position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: #4fd1ff; border: 2px solid var(--crema);
  box-shadow: 0 2px 8px rgba(14, 3, 9, .6);
}
.yo-onda {
  position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: rgba(79, 209, 255, .45);
  animation: yo-late 2.4s ease-out infinite;
}
@keyframes yo-late {
  0%   { transform: scale(1); opacity: .75; }
  100% { transform: scale(4.2); opacity: 0; }
}
.mapa-ui button.buscando { opacity: .6; }
.mapa-ui button.buscando svg { animation: girar-buscando 1.1s linear infinite; }
@keyframes girar-buscando { to { transform: rotate(360deg); } }
.mapa-ui button.activo { background: var(--laguna-claro); box-shadow: 0 0 0 1px rgba(243, 172, 46, .6); }

/* ============================================================
   5 · El álbum: pila de hojas con dos caras
   ============================================================ */
.album {
  position: relative; margin: 0 auto;
  width: min(100%, calc(var(--alto) * var(--proporcion)));
  aspect-ratio: var(--proporcion);
  perspective: 2600px;
  --alto: min(82svh, 58rem);   /* lo ajusta el JS con el espacio real */
  --proporcion: 1.44;   /* dos páginas */
}
/* Capa intermedia: el vaivén del libro cerrado, sin estorbar el giro de hojas */
@property --flote { syntax: '<number>'; inherits: false; initial-value: 0; }
.flotante {
  position: absolute; inset: 0; transform-style: preserve-3d;
  --flote: 0; transition: --flote .9s cubic-bezier(.3, .8, .3, 1);
  animation: flotar 9s ease-in-out infinite;
}
.libro.cerrado .flotante { --flote: 1; }
/* La inclinación que llega del giroscopio del celular, que se suma al vaivén */
@property --gx { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --gy { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.album { --gx: 0deg; --gy: 0deg; transition: --gx .2s linear, --gy .2s linear; }
/* La portada cerrada no se queda quieta: gira en 3D como un libro suspendido */
@keyframes flotar {
  0%, 100% { transform: rotateY(calc(var(--flote) * -23deg + var(--gx))) rotateX(calc(var(--flote) * 8deg + var(--gy))) translateY(calc(var(--flote) * 9px)); }
  32%      { transform: rotateY(calc(var(--flote) * -5deg + var(--gx))) rotateX(calc(var(--flote) * -2deg + var(--gy))) translateY(calc(var(--flote) * -9px)); }
  64%      { transform: rotateY(calc(var(--flote) * 19deg + var(--gx))) rotateX(calc(var(--flote) * -7deg + var(--gy))) translateY(calc(var(--flote) * -17px)); }
}
/* Sin @property el vaivén se aplica igual, solo que el cambio es instantáneo */
@supports not (background: paint(x)) { .flotante { transition: none; } }

.pila {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform var(--giro) cubic-bezier(.4, .05, .2, 1);
}
/* Con el álbum cerrado, la tapa se centra */
.libro.cerrado .pila { transform: translateX(-25%); }
.libro.cerrado .hoja:not(:first-child) { box-shadow: 0 0 0 1px rgba(56, 23, 41, .1); }
.libro.cerrado.fin .pila { transform: translateX(25%); }
/* Sombra proyectada, acompasada con el vaivén */
.sombra-libro {
  position: absolute; left: 10%; right: 10%; bottom: -20px; height: 30px; z-index: 0;
  background: radial-gradient(60% 100% at 50% 0%, rgba(14, 3, 9, .8), transparent 72%);
  filter: blur(3px); pointer-events: none;
  animation: sombrear 9s ease-in-out infinite;
}
@keyframes sombrear {
  0%, 100% { transform: scale(1); opacity: .9; }
  50%      { transform: scale(.9); opacity: .6; }
}

.hoja {
  position: absolute; top: 0; right: 0; width: 50%; height: 100%;
  transform-origin: left center; transform-style: preserve-3d;
  transition: transform var(--giro) cubic-bezier(.4, .05, .2, 1);
}
.hoja.volteada { transform: rotateY(-180deg); }
/* La cara que mira hacia abajo no debe recibir clics ni desplazamientos */
.hoja .cara.reverso { pointer-events: none; }
.hoja.volteada .cara.reverso { pointer-events: auto; }
.hoja.volteada .cara.frente { pointer-events: none; }

.cara {
  position: absolute; inset: 0; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  /* Las páginas son las mismas fichas del festival: fondo verde con el patrón */
  background-color: var(--selva);
  background-image: url("fondo-pieza.webp");
  background-size: cover;
  background-position: center;
  display: flex; flex-direction: column;
  padding: clamp(.7rem, 4cqw, 1.7rem);
  padding-inline: calc(clamp(.5rem, 3cqw, 1.2rem) + var(--esq) * .7);
  container-type: inline-size;
}
.cara::before {   /* veladura verde, como en la agenda impresa */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(170deg, rgba(31, 7, 20, .82), rgba(49, 11, 31, .74) 55%, rgba(26, 6, 17, .88)),
    radial-gradient(90% 55% at 78% 8%, rgba(247, 200, 126, .12), transparent 65%);
}
.cara > * { position: relative; z-index: 1; }
/* Sombra del lomo: en la cara frontal entra por la izquierda, en el reverso por la derecha */
.cara::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 34px; z-index: 2; pointer-events: none;
  background: linear-gradient(var(--dir, 90deg), rgba(56, 23, 41, .26), transparent);
}
.cara.frente::after { left: 0; --dir: 90deg; }
.cara.frente { border-radius: 2px 14px 14px 2px; }
.cara.reverso { transform: rotateY(180deg); --lomo: 100%; border-radius: 14px 2px 2px 14px; }
.cara.reverso::after { right: 0; --dir: 270deg; }

/* Brillo del papel mientras la hoja gira */
.hoja.girando .cara { box-shadow: 0 0 60px rgba(14, 3, 9, .55); }
.hoja.girando .cara::after { background: linear-gradient(var(--dir, 90deg), rgba(56, 23, 41, .45), rgba(56, 23, 41,.06) 60%, transparent); }

/* La tapa lleva la portada oficial de la agenda */
.cara.tapa {
  padding: 0; background: var(--selva);
  border-radius: 5px 16px 16px 5px; overflow: hidden;
  container-type: size;   /* para encajar la pieza por alto y por ancho */
}
/* La pieza viva de la portada: entra completa, centrada y sin deformarse */
.tapa-pieza {
  position: absolute; top: 50%; left: 50%; z-index: 1;
  transform: translate(-50%, -50%);
  width: min(100cqw, calc(100cqh * 0.71879));
  height: auto;
}
.cara.tapa::before, .cara.tapa::after { display: none; }
/* La portada se ve completa en cualquier proporción; detrás, ella misma
   difuminada rellena lo que sobra sin barras vacías. */
.tapa-fondo {
  position: absolute; inset: -8%; z-index: 0;
  background-position: center; background-size: cover;
  filter: blur(22px) brightness(.45) saturate(1.1);
}
.portada-img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: contain;
}
.tapa-marco {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: 5px 16px 16px 5px;
  box-shadow:
    inset 0 0 0 1px rgba(243, 172, 46, .5),
    inset 10px 0 26px rgba(0, 0, 0, .55),
    inset -2px 0 10px rgba(253, 252, 224, .12);
}
/* Un destello dorado recorre la portada mientras el libro está cerrado */
.tapa-brillo {
  position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none;
  border-radius: 5px 16px 16px 5px; opacity: 0; transition: opacity .5s ease;
}
.libro.cerrado .tapa-brillo { opacity: 1; }
.tapa-brillo::after {
  content: ""; position: absolute; top: -35%; bottom: -35%; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(253, 252, 224, .2) 42%, rgba(253, 209, 139, .34) 55%, transparent);
  filter: blur(7px); animation: brillo-tapa 7s ease-in-out infinite;
}
@keyframes brillo-tapa {
  0%       { transform: translateX(-180%) rotate(9deg); }
  38%, 100% { transform: translateX(400%) rotate(9deg); }
}

/* Lomo del libro, sobre el borde izquierdo de la tapa */
.tapa-marco::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 9px;
  border-radius: 5px 0 0 5px;
  background: linear-gradient(90deg, rgba(14, 3, 9, .85), rgba(253, 252, 224, .18) 45%, rgba(14, 3, 9, .5));
}
.tapa-pie {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: 1.8rem .9rem .7rem; text-align: center; pointer-events: none;
  background: linear-gradient(to top, rgba(26, 6, 17, .8) 20%, transparent);
}
.tapa-pie b {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .9rem; font-weight: 800; color: var(--selva);
  background: var(--oro); padding: .5rem 1rem; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(14, 3, 9, .5);
}
.libro.cerrado .cara.tapa { cursor: pointer; }

/* Canto de las hojas, visible con el álbum cerrado */
.canto {
  position: absolute; top: 1.2%; bottom: 1.2%; right: 0; width: 16px; z-index: 0;
  transform: translateX(15px) rotateY(88deg); transform-origin: left center;
  background: repeating-linear-gradient(to right, #361024 0 2px, #45162f 2px 4px);
  border-radius: 0 4px 4px 0; opacity: 0; transition: opacity .3s ease;
  box-shadow: 0 0 10px rgba(14, 3, 9, .45);
}
.libro.cerrado:not(.fin) .canto { opacity: 1; }


/* El tipo de las páginas se mide contra el ancho de la PÁGINA (cqw), no
   contra el de la pantalla (vw). Es la diferencia entre un título que crece
   con la hoja donde vive y uno que crece con el monitor: con vw, en un
   portátil el título se iba a 46 px mientras los nombres de los eventos se
   quedaban en 16 y se partían en dos líneas.
   Cada tamaño está junto a su elemento, más abajo; aquí no va ninguno. */


/* ---------- Rótulos: cada botón dice qué hace ----------
   Aparecen al pasar el cursor o enfocar, y se presentan solos un momento
   al entrar, para que en celular también se sepa qué es cada uno. */
[data-rotulo] { position: relative; }
[data-rotulo]::after {
  content: attr(data-rotulo);
  position: absolute; z-index: 60;
  white-space: nowrap; font-family: var(--body);
  font-size: .66rem; font-weight: 700; letter-spacing: .02em; line-height: 1.5;
  padding: .16rem .5rem; border-radius: 7px;
  background: rgba(31, 7, 20, .94); color: var(--crema);
  border: 1px solid rgba(243, 172, 46, .4);
  box-shadow: 0 3px 10px rgba(14, 3, 9, .45);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.rot-izq::after, .mapa-ui button::after { right: calc(100% + .35rem); top: 50%; transform: translateY(-50%); }
.rot-abajo::after { top: calc(100% + .4rem); right: 0; }
#volver::after { top: calc(100% + .4rem); left: 0; }
[data-rotulo]:hover::after,
[data-rotulo]:focus-visible::after,
body.rotulos [data-rotulo]::after { opacity: 1; }

/* ---------- Adornos de la pieza en las esquinas, como en las fichas ----------
   Están vivos: las flores se mecen, el ave flota, los hilos brillan y suben
   chispas doradas, igual que en la pieza del festival. */
/* La escena con perspectiva: los adornos viven a distintas profundidades */
.adornos3d {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  perspective: 1500px; perspective-origin: 50% 45%;
}
.a3d-giro {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateY(calc(var(--gx, 0deg) * 1.15)) rotateX(calc(var(--gy, 0deg) * 1.15));
  transition: transform .2s linear;
}
.a3d-vaiven {
  position: absolute; inset: 0; transform-style: preserve-3d;
  animation: a3d-vaiven 17s ease-in-out infinite;
}
@keyframes a3d-vaiven {
  0%, 100% { transform: rotateY(-2.4deg) rotateX(1.3deg); }
  50%      { transform: rotateY(2.6deg) rotateX(-1.1deg); }
}
.adorno {
  position: absolute; pointer-events: none;
  transform: translateZ(var(--z, 0px));
}
.adorno i {
  position: absolute; inset: 0; display: block;
  background-image: var(--img); background-repeat: no-repeat; background-size: contain;
  opacity: .78; filter: saturate(.98) drop-shadow(0 6px 14px rgba(14, 3, 9, .35));
  /* Se desvanecen hacia los bordes en vez de cortarse contra ellos */
  -webkit-mask-image: radial-gradient(118% 118% at 50% 50%, #000 58%, rgba(0, 0, 0, .55) 82%, transparent);
  mask-image: radial-gradient(118% 118% at 50% 50%, #000 58%, rgba(0, 0, 0, .55) 82%, transparent);
}
.cara > .adorno, .cara > .adornos3d { z-index: 0; }

/* Cada adorno vive en su zona: abajo las plantas, a media altura el ave y
   los hilos. Ninguna zona se repite, así que no se tapan entre sí. */
.adorno.abajo-der, .adorno.abajo-izq { bottom: 1.5%; width: 34%; height: 26%; }
.adorno.abajo-der { right: 1.5%; }
.adorno.abajo-izq { left: 1.5%; }
.adorno.abajo-der i, .adorno.abajo-izq i {
  background-position: bottom;
  -webkit-mask-image: linear-gradient(to top, #000 40%, rgba(0, 0, 0, .45) 76%, transparent);
  mask-image: linear-gradient(to top, #000 40%, rgba(0, 0, 0, .45) 76%, transparent);
  animation: mecer 9s ease-in-out infinite;
}
.adorno.abajo-der i { background-position: right bottom; transform-origin: right bottom; }
.adorno.abajo-izq i { background-position: left bottom; transform-origin: left bottom; animation-duration: 10.5s; }

/* La tingua, a media altura, flotando como si volara */
/* La tingua, asomando por una esquina de arriba como en las fichas */
.adorno.arriba-der, .adorno.arriba-izq { top: 1.5%; width: 28%; height: 22%; }
.adorno.arriba-der { right: 1.5%; }
.adorno.arriba-izq { left: 1.5%; }
.adorno.arriba-der i, .adorno.arriba-izq i {
  opacity: .85; background-position: right top;
  animation: volar 7.5s ease-in-out infinite;
}
.adorno.arriba-izq i { background-position: left top; animation-duration: 8.6s; }
.hoja-agenda .adorno.arriba-der i, .hoja-agenda .adorno.arriba-izq i { opacity: .55; }

.adorno.medio-izq, .adorno.medio-der { top: 36%; width: 21%; height: 26%; }
.adorno.medio-izq { left: 1.5%; }
.adorno.medio-der { right: 1.5%; }
.adorno.medio-izq i { background-position: left bottom; transform-origin: left bottom; animation: mecer 12s ease-in-out infinite; }
.adorno.medio-der i { background-position: right bottom; transform-origin: right bottom; animation: mecer 13.5s ease-in-out infinite; }
@keyframes volar {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  35%      { transform: translate(-1.5%, -4%) rotate(-1.8deg); }
  70%      { transform: translate(1.2%, -1.8%) rotate(1.4deg); }
}
.adorno.tenue i { opacity: .3; }

/* Los hilos dorados, en la franja central del lado libre */
/* El hilo va en la franja de arriba, libre entre la fecha y el ave */
.adorno.hilo-izq-z, .adorno.hilo-der-z { top: 27%; width: 17%; height: 26%; }
.adorno.hilo-izq-z { left: 1.5%; }
.adorno.hilo-der-z { right: 1.5%; }
.adorno.hilo-izq-z i, .adorno.hilo-der-z i {
  opacity: .38;
  -webkit-mask-image: radial-gradient(90% 105% at 50% 50%, #000 40%, transparent 85%);
  mask-image: radial-gradient(90% 105% at 50% 50%, #000 40%, transparent 85%);
  animation: hilo-brilla 6s ease-in-out infinite;
}
.adorno.hilo-izq-z i { background-position: left center; }
.adorno.hilo-der-z i { background-position: right center; animation-duration: 7s; }
@keyframes hilo-brilla {
  0%, 100% { opacity: .18; filter: saturate(.85) brightness(1); }
  50%      { opacity: .36; filter: saturate(1) brightness(1.25); }
}

/* El sol de la pieza, detrás de la fecha */
.adorno.sol { right: 2%; top: 2%; width: 46%; height: 32%; }
.adorno.sol i {
  background: radial-gradient(closest-side, rgba(253, 240, 190, .26), rgba(247, 200, 126, .1) 58%, transparent 76%);
  opacity: 1; filter: none; mask-image: none; -webkit-mask-image: none;
  animation: latir-sol 9s ease-in-out infinite;
}
@keyframes latir-sol {
  0%, 100% { transform: scale(1); opacity: .85; }
  50%      { transform: scale(1.06); opacity: 1; }
}

/* Chispas doradas subiendo por la página */
.chispas-pagina {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.chispas-pagina::before, .chispas-pagina::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 200%;
  background-image:
    radial-gradient(1.8px 1.8px at 14% 88%, rgba(243, 172, 46, .85), transparent 60%),
    radial-gradient(1.4px 1.4px at 33% 95%, rgba(247, 200, 126, .8), transparent 60%),
    radial-gradient(2px 2px at 58% 91%, rgba(243, 172, 46, .7), transparent 60%),
    radial-gradient(1.5px 1.5px at 79% 96%, rgba(247, 200, 126, .75), transparent 60%),
    radial-gradient(1.7px 1.7px at 91% 89%, rgba(243, 172, 46, .8), transparent 60%);
  animation: chispas-pagina 14s linear infinite;
}
.chispas-pagina::after { animation-delay: -7s; opacity: .7; }
@keyframes chispas-pagina {
  0%       { transform: translateY(0); opacity: 0; }
  12%, 70% { opacity: .75; }
  100%     { transform: translateY(-58%); opacity: 0; }
}

/* Las portadas no llevan los adornos de página… salvo los sueltos, que son suyos */
.cara.tapa .adorno:not(.suelto), .cara.final .adorno:not(.suelto),
.cara.tapa .chispas-pagina, .cara.final .chispas-pagina { display: none; }

/* Aviso de que la lista sigue más abajo */
.aviso-lista {
  /* Justo encima de los logos del pie, para no taparlos */
  position: absolute; left: 0; right: 0; bottom: clamp(18px, 5.2cqw, 32px); z-index: 6;
  display: flex; align-items: flex-end; justify-content: center; gap: .3rem;
  padding: 1.6rem .5rem .5rem;
  font-size: clamp(.66rem, 2.9cqw, .78rem); font-weight: 700; letter-spacing: .02em;
  color: var(--oro-suave); text-align: center; pointer-events: none;
  background: linear-gradient(to top, rgba(26, 6, 17, .96) 34%, rgba(31, 7, 20, .8) 66%, transparent);
  opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease;
}
.aviso-lista svg { animation: bajar 1.8s ease-in-out infinite; }
@keyframes bajar { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
.cara.hay-mas .aviso-lista { opacity: 1; transform: none; }

/* ---------- Página de actividades: la ficha oficial, tal cual ----------
   Insignias de los elementos del día arriba, la fecha enorme en crema,
   filas con barra dorada y doble comilla, y los logos al pie. */
.dia-els {
  display: flex; gap: clamp(.25rem, 1.6cqw, .5rem); flex: none;
  margin-bottom: clamp(.3rem, 1.6cqw, .6rem);
}
.el-insignia {
  width: clamp(26px, 10cqw, 48px); aspect-ratio: 1;
  background: var(--img) center / contain no-repeat;
  filter: drop-shadow(0 2px 8px rgba(14, 3, 9, .45));
}

.dia-titulo {
  margin: 0; flex: none;
  font-family: var(--body); font-weight: 800; line-height: .98;
  text-transform: uppercase; letter-spacing: .005em;
  color: var(--luz); text-shadow: 0 3px 16px rgba(14, 3, 9, .55);
  font-size: clamp(1.5rem, 5.1cqw, 2.6rem);
}
.dia-titulo .num { color: inherit; }
.dia-resumen {
  margin: .1rem 0 .5rem; flex: none;
  font-size: clamp(.82rem, 2.1cqw, .95rem); font-weight: 700; letter-spacing: .04em;
  color: var(--oro-suave);
}

.lista {
  list-style: none; margin: 0; padding: 0 .4rem 0 0;
  overflow-y: auto; flex: 1 1 0; min-height: 0; scrollbar-width: thin;
  overscroll-behavior: contain;
}
.lista::-webkit-scrollbar { width: 5px; }
.lista::-webkit-scrollbar-thumb { background: rgba(243, 172, 46, .35); border-radius: 5px; }
/* Las actividades, con la misma retícula de las fichas oficiales:
   nombre · barra del elemento · sede · doble comilla dorada · hora */
.evento {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) auto;
  gap: .1rem .55rem;
  padding: .5rem .1rem;
  border-bottom: 1px solid rgba(243, 172, 46, .3);
  cursor: pointer; transition: background-color .18s ease;
}
.evento:hover, .evento.activo { background: rgba(243, 172, 46, .14); }
/* Cada evento lleva a la izquierda el icono de su elemento */
.ev-nombre { display: flex; align-items: flex-start; gap: clamp(.3rem, 1.6cqw, .5rem); min-width: 0; }
.ev-texto { flex: 1 1 auto; min-width: 0; }
.ev-el {
  flex: none; width: clamp(19px, 6.4cqw, 30px); aspect-ratio: 1;
  margin-top: .1em;
  background: var(--img) center / contain no-repeat;
  filter: drop-shadow(0 2px 7px rgba(14, 3, 9, .5));
}
.evento.destacado .ev-el { filter: drop-shadow(0 2px 6px rgba(14, 3, 9, .35)); }
.evento h3 {
  margin: 0; font-family: var(--body); font-weight: 600; line-height: 1.2; color: var(--luz);
  font-size: clamp(.9rem, 2.77cqw, 1.32rem);
}
.evento .sub {
  display: block; font-weight: 600; line-height: 1.2; color: var(--texto-2);
  font-size: clamp(.72rem, 1.95cqw, .92rem);
}
.ev-lugar {
  border-left: 3px solid var(--c, var(--oro)); padding-left: .55rem;
  color: var(--luz); font-weight: 500; line-height: 1.2;
  font-size: clamp(.82rem, 2.32cqw, 1.06rem);
}
.ev-hora {
  display: flex; align-items: center; gap: .3rem; white-space: nowrap;
  color: var(--luz); font-weight: 500; font-size: clamp(.82rem, 2.32cqw, 1.06rem);
}
.ev-hora .chev { color: var(--oro); font-weight: 900; font-size: 1.15em; }
/* Los imperdibles, en la cápsula verde de la agenda impresa */
.evento.destacado {
  background: linear-gradient(90deg, #a2166a, #c01b7e);
  border-radius: 999px; border-bottom-color: transparent;
  padding-left: .8rem; padding-right: .9rem;
}
.evento.destacado:hover, .evento.destacado.activo { background: linear-gradient(90deg, #b41976, #d3208b); }
.evento.destacado h3, .evento.destacado .ev-lugar, .evento.destacado .ev-hora { color: var(--crema); }
.evento.destacado .sub { color: rgba(253, 252, 224, .82); }
.evento.destacado .ev-lugar { border-left-color: rgba(253, 252, 224, .85); }
.evento.destacado .ev-hora .chev { color: var(--luz); }
/* En página angosta la sede y la hora bajan debajo del nombre */
/* En página ancha (computador) el renglón respira: menos quiebres.
   El nombre se lleva más columna porque es el que se parte en dos líneas
   —«Intercolegiados de Teatro», «Copa Isten Sport Colombia»— y el renglón
   crece de alto para que la lista llene la hoja en vez de dejar medio
   página en blanco. */
@container (min-width: 620px) {
  .evento {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, .85fr) auto;
    gap: .15rem 1rem; padding-block: clamp(.62rem, 1.5cqw, 1.05rem);
  }
  .ev-lugar { padding-left: .7rem; }
}
@container (max-width: 360px) {
  .evento { grid-template-columns: 1fr; }
  .evento.destacado { border-radius: 16px; }
  .ev-lugar { border-left: 0; padding-left: 0; color: var(--texto-2); }
  .ev-hora { color: var(--texto-2); }
  .evento.destacado .ev-lugar, .evento.destacado .ev-hora { color: rgba(253, 252, 224, .9); }
}

.mapa-caja {
  position: relative; flex: 1; border-radius: var(--r-m); overflow: hidden;
  background: #280f1c; touch-action: none; cursor: grab;
  box-shadow: inset 0 0 0 1px rgba(56, 23, 41, .25), 0 8px 24px rgba(14, 3, 9, .22);
}
.mapa-caja.arrastrando { cursor: grabbing; }
.mapa-caja::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(rgba(226, 197, 211, .07) 1px, transparent 1px) 0 0 / 100% 42px,
    linear-gradient(90deg, rgba(226, 197, 211, .07) 1px, transparent 1px) 0 0 / 42px 100%,
    radial-gradient(75% 60% at 50% 45%, #3a1428, #1e0a15);
}
.mapa-caja.sin-red .aviso-red { opacity: 1; }
.aviso-red {
  position: absolute; left: 50%; top: .5rem; transform: translateX(-50%); z-index: 3;
  font-size: .7rem; font-weight: 700; color: var(--viento); opacity: 0; transition: opacity .3s ease;
  background: rgba(31, 7, 20, .85); padding: .2rem .65rem; border-radius: 999px; pointer-events: none;
}
.tiles { position: absolute; inset: 0; }
.tiles img { position: absolute; width: 256px; height: 256px; }
.pines { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

.pin {
  position: absolute; pointer-events: auto; cursor: pointer;
  transform: translate(-50%, -100%); border: 0; background: transparent; padding: 0;
}
.pin i {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg); background: var(--c);
  box-shadow: 0 4px 12px rgba(14, 3, 9, .6), 0 0 0 2px rgba(253, 252, 224, .75);
}
.pin i svg { width: 14px; height: 14px; transform: rotate(45deg); }
.pin b {
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  white-space: nowrap; font-size: .74rem; font-weight: 700; padding: .18rem .5rem;
  border-radius: 999px; background: rgba(31, 7, 20, .92); color: var(--crema);
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
  box-shadow: 0 4px 12px rgba(14, 3, 9, .5);
}
.pin:hover b, .pin.activo b { opacity: 1; }
/* El marcador señalado se queda con un borde dorado fijo, sin parpadear */
.pin.activo { z-index: 4; }
.pin.activo i {
  /* Primero un filo oscuro y luego el dorado: así se ve sobre cualquier color */
  box-shadow: 0 6px 16px rgba(14, 3, 9, .6),
              0 0 0 2px rgba(31, 7, 20, .9),
              0 0 0 5px var(--oro),
              0 0 0 6.5px rgba(31, 7, 20, .5),
              0 0 20px 4px rgba(243, 172, 46, .55);
}
/* …y da un salto al señalarlo, para que se vea cuál es */
.pin.salta { animation: pin-salta .72s cubic-bezier(.28, .8, .3, 1) both; }
@keyframes pin-salta {
  0%   { transform: translate(-50%, -100%) translateY(0) scale(1); }
  22%  { transform: translate(-50%, -100%) translateY(-16px) scale(1.09); }
  44%  { transform: translate(-50%, -100%) translateY(0) scale(1); }
  58%  { transform: translate(-50%, -100%) translateY(0) scaleY(.9) scaleX(1.08); }
  74%  { transform: translate(-50%, -100%) translateY(-6px) scale(1.03); }
  100% { transform: translate(-50%, -100%) translateY(0) scale(1); }
}
.pin.provisional i { border: 2px dashed rgba(253, 252, 224, .9); }
.pin .cuenta {
  position: absolute; top: -5px; right: -7px; z-index: 2;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  display: grid; place-items: center; font-size: .65rem; font-weight: 800;
  background: var(--crema); color: var(--selva); box-shadow: 0 2px 6px rgba(14, 3, 9, .5);
}

.mapa-ui {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: .3rem; z-index: 4;
}
.mapa-ui button {
  position: relative;
  width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 9px; background: rgba(31, 7, 20, .82); color: var(--crema);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 3px 10px rgba(14, 3, 9, .5); transition: background-color .18s ease;
}
.mapa-ui button:hover { background: var(--laguna-claro); }
.mapa-ui.presentando button::after { opacity: 1; }
.mapa-credito {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: .3rem; z-index: 4;
  font-size: .62rem; color: rgba(253, 252, 224, .75); background: rgba(31, 7, 20, .6);
  padding: .08rem .35rem; border-radius: 5px; pointer-events: none;
}
.ficha {
  position: absolute; left: .5rem; right: .5rem; bottom: .5rem; z-index: 5;
  padding: .65rem .8rem; border-radius: var(--r-s);
  background: rgba(31, 7, 20, .93); color: var(--crema);
  border-left: 4px solid var(--c, var(--oro));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(14, 3, 9, .6);
  transform: translateY(140%); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.ficha.visible { transform: none; }
.ficha h4 { margin: 0 0 .1rem; font-family: var(--display); font-weight: 800; font-size: 1rem; line-height: 1.15; padding-right: 1.4rem; }
.ficha p { margin: 0; font-size: .82rem; color: var(--viento); }
.ficha .cerrar {
  position: absolute; top: .35rem; right: .35rem; width: 24px; height: 24px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(253, 252, 224, .12); color: var(--crema); cursor: pointer;
}
.ficha .cerrar:hover { background: rgba(253, 252, 224, .25); }
.aviso-prov { display: block; margin-top: .22rem; font-size: .7rem; font-weight: 700; color: var(--oro-suave); }

/* ---------- Cómo llegar: distancia y ruta en Waze o Maps ---------- */
.ficha-ir {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .35rem .6rem; margin-top: .5rem; padding-top: .45rem;
  border-top: 1px solid rgba(243, 172, 46, .25);
}
.ficha-ir[hidden] { display: none; }
.ficha-ir-titulo {
  display: flex; flex-basis: 100%; align-items: center; gap: .35rem; font-size: .7rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--oro);
}
.ficha-ir-titulo svg { width: 13px; height: 13px; }
.ficha-hoy { color: #db85b0; }
.ficha-dist { font-size: .74rem; font-weight: 600; color: var(--oro-suave); line-height: 1.35; }
.ficha-yo {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-weight: 800; color: var(--oro);
  text-decoration: underline; text-underline-offset: 2px;
}
.ficha-botones { display: flex; gap: .35rem; margin-left: auto; }
.ir {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .7rem; border-radius: 999px; text-decoration: none;
  font-size: .74rem; font-weight: 800; white-space: nowrap;
  background: var(--oro); color: var(--selva);
  box-shadow: 0 3px 10px rgba(14, 3, 9, .4);
  transition: transform .18s ease, filter .18s ease;
}
.ir svg { width: 1.05em; height: 1.05em; }
.ir:hover { transform: translateY(-1px); filter: brightness(1.07); }
.ir.ficha-waze { background: #33ccff; color: #29091a; }
.ir.ficha-maps { background: #fdfce0; color: #381729; }

@media (max-width: 400px) {
  .ficha-botones { width: 100%; margin-left: 0; }
  .ir { flex: 1 1 0; justify-content: center; }
}

/* ============================================================
   Cada día con el estilo de su ficha
   ============================================================ */

/* ---- Dónde van las insignias de los elementos ---- */
.ins-centro .dia-els { justify-content: center; }
.ins-izq .dia-els { justify-content: flex-start; }
.ins-der .dia-els { justify-content: flex-end; }
/* Las de la ficha del miércoles van abajo, junto a los logos */
.ins-abajo .dia-els {
  position: absolute; right: calc(clamp(.5rem, 3cqw, 1.2rem) + var(--esq) * .7);
  bottom: clamp(20px, 5.6cqw, 34px); margin: 0; z-index: 2;
}

/* ---- De qué lado va la fecha ---- */
.fecha-der .dia-titulo, .fecha-der .dia-resumen { text-align: right; }
.fecha-centro .dia-titulo, .fecha-centro .dia-resumen { text-align: center; }

/* ---- Tema sol (fichas del 28 y del 3): mismo verde que las demás, con un
   destello contenido y el paisaje asomando muy suave al pie, para que la
   doble página se lea pareja ---- */
.sol-escena { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sol-disco {
  position: absolute; left: 50%; top: 4%; width: 54%; aspect-ratio: 1;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(253, 240, 190, .26), rgba(247, 200, 126, .12) 58%, transparent 78%);
  animation: latir-sol 9s ease-in-out infinite;
}
.sol-monte {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  background-image: var(--img); background-size: cover; background-position: center bottom;
  opacity: .22;
  -webkit-mask-image: linear-gradient(to top, #000 22%, rgba(0, 0, 0, .35) 58%, transparent);
  mask-image: linear-gradient(to top, #000 22%, rgba(0, 0, 0, .35) 58%, transparent);
}
/* En estas fichas la fila va en dos líneas: nombre y debajo sede // hora */
.tema-sol .evento { grid-template-columns: auto 1fr; gap: 0 .45rem; }
.tema-sol .ev-nombre { grid-column: 1 / -1; }
.tema-sol .ev-lugar { grid-column: 1; border-left: 0; padding-left: 0; }
.tema-sol .ev-hora { grid-column: 2; justify-self: start; }
.tema-sol .ev-hora .chev { font-size: 0; }
.tema-sol .ev-hora .chev::before { content: "//"; font-size: .84rem; letter-spacing: -.02em; color: var(--oro); }

/* Cabecera de la página del mapa, con el mismo tono de las fichas */
.mapa-cabeza {
  flex: none; display: flex; align-items: baseline; flex-wrap: wrap;
  gap: .15rem .6rem; margin-bottom: clamp(.35rem, 2cqw, .7rem);
}
.mapa-cabeza h2 {
  margin: 0; font-family: var(--body); font-weight: 800; line-height: 1.06;
  text-transform: uppercase; color: var(--luz);
  font-size: clamp(1rem, 2.85cqw, 1.35rem); text-shadow: 0 3px 14px rgba(14, 3, 9, .5);
}
.mapa-cabeza span {
  font-size: clamp(.8rem, 1.9cqw, .95rem); font-weight: 700; color: var(--oro-suave);
}
.vacio { list-style: none; padding: 1.4rem .5rem; text-align: center; color: var(--texto-2); font-weight: 600; }
.mapa-hueco { position: relative; flex: 1 1 0; min-height: 0; display: flex; }

/* Los logos institucionales cierran cada página, como en las fichas */
.pagina-logos {
  flex: none; width: auto; height: clamp(14px, 4.4cqw, 26px);
  margin: .45rem auto 0; opacity: .8;
}

/* ---------- Contraportada: el fondo verde de Recrearte ---------- */
.cara.final {
  padding: 1rem; cursor: pointer;
  display: grid; place-items: center; text-align: center;
  background-color: var(--selva);
  background-image: url("fondo-pieza.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: normal;
}
/* Sin la veladura de papel y con el mismo degradado suave del fondo general */
.cara.final::before {
  background:
    radial-gradient(75% 50% at 50% 0%, rgba(91, 20, 58, .35), transparent 72%),
    radial-gradient(95% 65% at 50% 100%, rgba(20, 5, 13, .5), transparent 70%);
}
.cara.final::after { display: none; }
.final-centro { display: flex; flex-direction: column; align-items: center; gap: clamp(.6rem, 3cqw, 1rem); }
.final-aro {
  width: clamp(42px, 11cqw, 78px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; color: var(--luz);
  border: 1.5px solid rgba(243, 172, 46, .75); background: rgba(31, 7, 20, .45);
  animation: latir 2.8s ease-in-out infinite;
}
.final-aro svg { width: 44%; height: 44%; }
@keyframes latir {
  0%, 100% { box-shadow: 0 0 0 0 rgba(243, 172, 46, .5); }
  70%      { box-shadow: 0 0 0 15px rgba(243, 172, 46, 0); }
}
.final-centro p {
  margin: 0; max-width: 16rem;
  font-family: var(--display); font-weight: 800; line-height: 1.2;
  font-size: clamp(.85rem, 3.6cqw, 1.45rem); letter-spacing: .05em; text-transform: uppercase;
  color: var(--luz); text-shadow: 0 2px 12px rgba(14, 3, 9, .55);
}
.cara.final:hover .final-aro { border-color: var(--oro); background: rgba(69, 16, 44, .6); }


/* ---------- Pasar página: el margen vivo de la hoja ----------
   No es un botón puesto encima del papel: es el borde de la hoja, que se
   sombrea al acercarse, con un disco discreto de papel y filo dorado. */
.esquina {
  position: absolute; top: 50%; z-index: 25;
  transform: translateY(-50%);
  width: var(--esq); height: min(54%, 18rem);
  border: 0; padding: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
  color: var(--tinta);
  -webkit-tap-highlight-color: transparent;
  transition: opacity .25s ease;
}
/* La sombra que deja el canto del papel */
.esquina::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(var(--dir), rgba(56, 23, 41, .16), rgba(56, 23, 41, .03) 58%, transparent);
  opacity: .5; transition: opacity .25s ease;
}
.esq-izq { left: 0; --dir: to right; }
.esq-der { right: 0; --dir: to left; }
/* El disco con la flecha */
.esquina svg {
  position: relative; z-index: 1;
  width: clamp(26px, 62%, 42px); height: auto; padding: 25%;
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(253, 252, 224, .97), rgba(236, 228, 201, .92));
  box-shadow: 0 3px 12px rgba(14, 3, 9, .22), inset 0 0 0 1px rgba(243, 172, 46, .6);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}
.esquina:hover::before { opacity: 1; }
.esquina:hover svg { box-shadow: 0 6px 16px rgba(14, 3, 9, .3), inset 0 0 0 1px var(--oro); }
.esq-izq:hover svg { transform: translateX(-3px); }
.esq-der:hover svg { transform: translateX(3px); }
.esquina:active svg { transform: scale(.93); }
.esquina:disabled { opacity: 0; pointer-events: none; }
.libro.cerrado:not(.fin) .esq-izq,
.libro.cerrado:not(.fin) .esq-der { opacity: 0; pointer-events: none; }


/* ---------- Pantalla completa ---------- */

.salir-inmersivo {
  position: absolute; top: .4rem; right: .4rem; z-index: 30; display: none;
  width: 34px; height: 34px; place-items: center; cursor: pointer;
  border: 1px solid rgba(243, 172, 46, .45); border-radius: 50%;
  background: rgba(31, 7, 20, .85); color: var(--crema);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
body.inmersivo .salir-inmersivo { display: grid; }

body.inmersivo .libro.activa {
  position: fixed; inset: 0; z-index: 60; min-height: 0;
  justify-content: center;
  /* Reserva el sitio de las barras flotantes y de los mandos: el libro
     nunca queda debajo de ellos ni se sale por abajo */
  padding: max(var(--h-antes, 0px), var(--h-mandos, 0px)) .2rem
           calc(var(--h-pie, 0px) + var(--h-firma, 0px));
}
body.inmersivo .antes-album {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20; max-width: none;
  /* Deja libres las esquinas: a la izquierda el botón de menú, a la derecha
     el de salir de pantalla completa */
  margin: 0; padding: calc(.35rem + env(safe-area-inset-top)) 3rem .35rem 6.3rem;
  background: linear-gradient(to bottom, rgba(26, 6, 17, .9), rgba(26, 6, 17, .55) 70%, transparent);
}
body.inmersivo .album-pie {
  position: absolute; left: 0; right: 0; z-index: 20; margin: 0; max-width: none;
  bottom: .25rem;
}
body.inmersivo #album .album-pie { bottom: calc(.25rem + var(--h-firma, 0px)); }

/* ---------- Pie del álbum ---------- */
.album-pie {
  max-width: 74rem; margin: .5rem auto 0;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  transition: opacity .4s ease, max-height .4s ease;
}
.folio { font-size: .82rem; font-weight: 700; color: var(--texto-2); letter-spacing: .06em; text-align: center; }

/* ---------- Pie institucional: una franja compacta, siempre a la vista ---------- */
#pie {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(226, 197, 211, .12);
  padding: .5rem clamp(.8rem, 3vw, 2rem) calc(.55rem + env(safe-area-inset-bottom));
  background: rgba(23, 5, 15, .45);
}
.pie {
  max-width: 78rem; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .35rem clamp(.8rem, 2.5vw, 1.8rem);
}
.pie-logo { height: clamp(22px, 2.4vw, 30px); width: auto; flex: none; opacity: .95; }
.pie-datos { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.pie-copy {
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--texto-2);
}
.pie-contacto { font-size: .74rem; color: var(--texto-2); line-height: 1.35; }
.pie-sep { opacity: .5; margin: 0 .1rem; }
.pie-enlace { font-weight: 700; color: var(--luz); text-decoration: none; }
.pie-enlace:hover { color: var(--oro); text-decoration: underline; }
.pie-credito { font-size: .74rem; color: var(--texto-2); }
.pie-credito a { color: var(--oro-suave); font-weight: 700; text-decoration: none; }
.pie-credito a:hover { color: var(--luz); text-decoration: underline; }
.pie-credito { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; justify-content: center; }
.pie-firma {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  color: var(--oro); background: rgba(243, 172, 46, .1); transition: background .2s, transform .2s;
}
.pie-firma svg { width: 22px; height: 22px; }
.pie-credito a.pie-firma:hover { background: var(--oro); color: var(--selva); text-decoration: none; transform: scale(1.08); }
@media (max-width: 720px) {
  .pie { text-align: center; gap: .15rem .7rem; }
  .pie-datos { align-items: center; }
  .pie-contacto, .pie-larga { display: none; }   /* en el celular manda lo esencial */
  .pie-copy, .pie-credito { font-size: .68rem; }
}
/* En la agenda y el pasaporte el pie (con la firma) sigue a la vista:
   queda fijo abajo y el libro se acomoda por encima de él. */
body.inmersivo #pie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 62;
  background: rgba(22, 4, 14, .94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* ---------- Pantalla en preparación ---------- */

/* ============================================================
   Pantalla de entrada: ¿a dónde quieres ir?
   ============================================================ */
.inicio.activa {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100svh - var(--h-pieweb, 0px));
  padding: clamp(1.6rem, 6vw, 3rem) clamp(1rem, 4vw, 2.4rem);
  overflow: hidden;
}
.inicio-adornos { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.inicio-centro {
  position: relative; z-index: 2;
  width: min(100%, 54rem);
  display: flex; flex-direction: column; align-items: center; gap: clamp(.5rem, 2vw, .9rem);
  text-align: center;
}
.inicio-logo {
  height: auto;
  padding: .9rem 1.8rem;
  /* El mismo halo cálido que la pieza lleva detrás del título: claro en el
     centro para que las letras oscuras se lean, y fundido en los bordes */
  background: radial-gradient(50% 58% at 50% 47%,
    rgba(253, 252, 224, .98), rgba(246, 229, 174, .78) 44%, rgba(253, 252, 224, 0) 78%);
  filter: drop-shadow(0 0 16px rgba(253, 252, 224, .45)) drop-shadow(0 5px 14px rgba(14, 3, 9, .5));
}
.inicio-fechas {
  margin: 0; font-size: clamp(.74rem, 2.6vw, .92rem); font-weight: 600;
  letter-spacing: .04em; color: var(--texto-2);
  animation: inicio-entra .8s cubic-bezier(.2, .8, .2, 1) .1s both;
}
.inicio-pregunta {
  margin: clamp(.5rem, 2.4vw, 1.1rem) 0 0;
  font-family: var(--display); font-weight: 900; line-height: 1.1;
  font-size: clamp(1.5rem, 6.4vw, 2.8rem);
  color: var(--luz); text-wrap: balance;
  animation: inicio-entra .8s cubic-bezier(.2, .8, .2, 1) .18s both;
}
@keyframes inicio-entra {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.inicio-opciones {
  display: grid; gap: clamp(.7rem, 2.4vw, 1.1rem); width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin-top: clamp(.6rem, 2.6vw, 1.2rem);
}
.opcion {
  position: relative; overflow: hidden; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: .35rem;
  padding: clamp(1rem, 3.4vw, 1.5rem);
  border-radius: var(--r-m);
  border: 1px solid rgba(243, 172, 46, .3);
  background: linear-gradient(158deg, rgba(91, 20, 58, .72), rgba(31, 7, 20, .88));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 16px 34px rgba(14, 3, 9, .45);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), border-color .28s ease, box-shadow .28s ease;
  animation: inicio-entra .8s cubic-bezier(.2, .8, .2, 1) .28s both;
}
.opcion:nth-child(2) { animation-delay: .38s; }
.opcion:hover, .opcion:focus-visible {
  transform: translateY(-4px);
  border-color: var(--oro);
  box-shadow: 0 22px 44px rgba(14, 3, 9, .55);
}
.opcion:active { transform: translateY(-1px) scale(.995); }
/* Cada tarjeta lleva su propia pieza asomando al fondo */
.opcion-arte {
  position: absolute; right: -8%; bottom: -14%; width: 52%; aspect-ratio: 1;
  background-size: contain; background-repeat: no-repeat; background-position: bottom right;
  opacity: .16; pointer-events: none;
  transition: opacity .3s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.opcion:hover .opcion-arte { opacity: .26; transform: translateY(-6px) rotate(-3deg); }
.opcion b {
  position: relative; font-family: var(--display); font-weight: 900;
  font-size: clamp(1.25rem, 5vw, 1.8rem); color: var(--luz); line-height: 1.1;
}
.opcion small {
  position: relative; font-size: clamp(.76rem, 2.6vw, .88rem); line-height: 1.45;
  color: var(--texto-2); max-width: 26ch;
}
.opcion-ir {
  position: relative; margin-top: .5rem;
  display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start;
  font-size: .82rem; font-weight: 800; color: var(--selva);
  background: var(--oro); border-radius: 999px; padding: .42rem .9rem;
  box-shadow: 0 6px 16px rgba(14, 3, 9, .35);
}
.opcion-ir::after {
  content: ""; width: 7px; height: 7px; border-right: 2.4px solid currentColor;
  border-top: 2.4px solid currentColor; transform: rotate(45deg);
  transition: transform .25s ease;
}
.opcion:hover .opcion-ir::after { transform: rotate(45deg) translate(2px, -2px); }

/* ---------- El inicio, vivo: hilos de oro, chispas y giro ---------- */
/* Todo el decorado gira un poco hacia donde apunta el dedo o se inclina
   el teléfono: el mismo --gx/--gy que mueve las páginas del libro. */
#inicio { --gx: 0deg; --gy: 0deg; transition: --gx .35s ease-out, --gy .35s ease-out; }

.hilos-oro {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  pointer-events: none; opacity: .8;
}
.hilo {
  fill: none; stroke: url(#oro-hilo); stroke-width: 1.7; stroke-linecap: round;
  stroke-dasharray: 210 980;
  filter: drop-shadow(0 0 5px rgba(243, 172, 46, .55));
  animation: hilo-corre 15s linear infinite;
}
.hilo.h2 { stroke-width: 1.2; animation-duration: 20s; animation-delay: -7s; }
.hilo.h3 { stroke-width: 1.4; animation-duration: 25s; animation-delay: -14s; }
@keyframes hilo-corre { from { stroke-dashoffset: 1190; } to { stroke-dashoffset: 0; } }

/* Chispas doradas subiendo, como en las páginas de la agenda */
.chispas-inicio { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.chispas-inicio::before, .chispas-inicio::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 200%;
  background-image:
    radial-gradient(2px 2px at 9% 92%, rgba(243, 172, 46, .9), transparent 60%),
    radial-gradient(1.5px 1.5px at 24% 97%, rgba(247, 200, 126, .8), transparent 60%),
    radial-gradient(2.2px 2.2px at 41% 90%, rgba(246, 229, 174, .85), transparent 60%),
    radial-gradient(1.6px 1.6px at 57% 96%, rgba(243, 172, 46, .8), transparent 60%),
    radial-gradient(2px 2px at 73% 91%, rgba(247, 200, 126, .85), transparent 60%),
    radial-gradient(1.4px 1.4px at 88% 95%, rgba(243, 172, 46, .8), transparent 60%),
    radial-gradient(1.8px 1.8px at 96% 88%, rgba(246, 229, 174, .75), transparent 60%);
  animation: chispas-pagina 17s linear infinite;
}
.chispas-inicio::after { animation-delay: -8.5s; opacity: .65; }

/* ---------- El logo, una pieza en 3D ---------- */
.inicio-marca {
  position: relative; width: min(86%, 23rem);
  perspective: 900px;
  animation: inicio-entra .8s cubic-bezier(.2, .8, .2, 1) both;
}
.marca-giro {
  position: relative; transform-style: preserve-3d;
  animation: marca-flota 12s ease-in-out infinite;
}
@keyframes marca-flota {
  0%, 100% { transform: rotateY(calc(-6deg + var(--gx) * .55)) rotateX(calc(3deg + var(--gy) * .55)) translateY(0); }
  34%      { transform: rotateY(calc(5deg + var(--gx) * .55)) rotateX(calc(-2.4deg + var(--gy) * .55)) translateY(-9px); }
  67%      { transform: rotateY(calc(9.5deg + var(--gx) * .55)) rotateX(calc(2deg + var(--gy) * .55)) translateY(6px); }
}
/* Detrás del título, solo una luz cálida para que las letras se lean */
.marca-luz {
  position: absolute; left: 50%; top: 50%; width: 112%; aspect-ratio: 2.1;
  transform: translate(-50%, -50%) translateZ(-40px);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(50% 58% at 50% 50%,
    rgba(253, 252, 224, .9), rgba(247, 233, 186, .45) 46%, rgba(253, 252, 224, 0) 76%);
  filter: blur(14px);
}
/* El oro vive en las letras: el título respira un brillo dorado propio */
.inicio-logo {
  position: relative; width: 100%; transform: translateZ(30px);
  animation: letras-oro 6s ease-in-out infinite;
}
@keyframes letras-oro {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(243, 172, 46, .3)) drop-shadow(0 5px 14px rgba(14, 3, 9, .5)); }
  50%      { filter: drop-shadow(0 0 13px rgba(246, 229, 174, .8)) drop-shadow(0 5px 14px rgba(14, 3, 9, .5)); }
}
/* Y el destello recorre únicamente la forma del título, recortado con él */
.marca-destello {
  /* A la misma profundidad que el logo: si no, la perspectiva lo agranda
     y el destello se ve corrido respecto de las letras. */
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  transform: translateZ(30px);
  -webkit-mask-image: var(--marca); mask-image: var(--marca);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.marca-destello::after {
  content: ""; position: absolute; top: -45%; bottom: -45%; width: 26%;
  background: linear-gradient(100deg, transparent,
    rgba(253, 252, 224, .55) 38%, rgba(255, 240, 190, .95) 52%, rgba(243, 172, 46, .6) 64%, transparent);
  filter: blur(5px); mix-blend-mode: screen;
  animation: marca-destello 6s ease-in-out infinite;
}
@keyframes marca-destello {
  0%        { transform: translateX(-280%) rotate(9deg); }
  46%, 100% { transform: translateX(540%) rotate(9deg); }
}

/* ---------- Tarjetas con borde dorado vivo ---------- */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.opcion::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px;
  background: conic-gradient(from var(--ang),
    rgba(243, 172, 46, 0) 0 54%, rgba(243, 172, 46, .7) 66%, rgba(255, 245, 205, 1) 73%,
    rgba(243, 172, 46, .7) 80%, rgba(243, 172, 46, 0) 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .65; pointer-events: none; z-index: 3;
  animation: borde-gira 7s linear infinite;
  transition: opacity .3s ease;
}
@keyframes borde-gira { to { --ang: 360deg; } }
.opcion:hover::before, .opcion:focus-visible::before { opacity: 1; animation-duration: 2.8s; }
/* Y una luz dorada que sigue al dedo dentro de la tarjeta */
.opcion::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: radial-gradient(14rem 14rem at var(--px, 50%) var(--py, 50%),
    rgba(243, 172, 46, .22), rgba(243, 172, 46, .06) 42%, transparent 66%);
  opacity: 0; transition: opacity .35s ease;
}
.opcion:hover::after, .opcion:focus-visible::after { opacity: 1; }
.opcion b, .opcion small, .opcion-ir, .opcion-arte { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .hilo, .chispas-inicio::before, .chispas-inicio::after,
  .marca-giro, .inicio-logo, .marca-destello::after, .opcion::before { animation: none; }
  .inicio-marca { animation: none; }
}


/* ---------- Adornos sueltos: las piezas flotando en 3D ---------- */
.adornos3d.sueltos { z-index: 1; perspective: 1600px; }
.adorno.suelto {
  left: var(--x); top: var(--y); aspect-ratio: var(--ar, 1);
  /* El ancho se mide contra una referencia, no contra el contenedor a secas:
     así en el inicio se le puede poner tope y una palmera deja de crecer a
     partir de cierto monitor, en vez de terminar midiendo más que la pantalla. */
  width: calc(var(--w) / 100 * var(--ref, 100%));
  transform: translate(-50%, -50%) translateZ(var(--z, 0px));
  transform-style: preserve-3d;
}
.adorno.suelto > i {
  transform: rotate(var(--rot, 0deg));
  animation: vagar var(--dur, 15s) ease-in-out var(--ret, 0s) infinite alternate;
}
@keyframes vagar {
  0%   { transform: rotate(var(--rot)) translate3d(0, 0, 0) scale(1); }
  50%  { transform: rotate(calc(var(--rot) + 2.4deg)) translate3d(1.5%, -3.5%, 0) scale(1.035); }
  100% { transform: rotate(calc(var(--rot) - 2deg)) translate3d(-2%, 2.5%, 0) scale(.975); }
}
/* En la pantalla de entrada asoman fuertes; sobre las portadas, discretos */
.adornos3d.en-inicio .adorno.suelto > i { opacity: .7; }
/* Sobre la tapa del pasaporte las piezas van grabadas en dorado */
.adornos3d.oro { z-index: 2; }
.adornos3d.oro .adorno.suelto > i {
  opacity: .42; mix-blend-mode: soft-light;
  filter: sepia(1) saturate(2.8) hue-rotate(-12deg) brightness(1.25)
          drop-shadow(0 2px 6px rgba(14, 3, 9, .4));
}

@media (prefers-reduced-motion: reduce) {
  .adorno.suelto > i { animation: none; }
  .inicio-logo, .inicio-fechas, .inicio-pregunta, .opcion { animation: none; }
}
@media (max-width: 420px) {
  /* En pantallas muy angostas las piezas se retiran a los bordes */
  .adornos3d.en-inicio .adorno.suelto { opacity: .8; }
}

/* ============================================================
   Pasaporte: un libro con forma de pasaporte.
   Se activa con un registro y cada evento se sella con su QR.
   ============================================================ */

/* ---------- La franja de arriba: cuántos sellos se llevan ---------- */
.pp-antes { align-items: center; }
.pp-marcador { display: flex; flex-direction: column; gap: .3rem; width: min(100%, 26rem); }
.pp-cifra { display: flex; align-items: baseline; gap: .35rem; color: var(--oro-suave); }
.pp-cifra b { font-family: var(--body); font-weight: 800; font-size: 1.5rem; color: var(--oro); }
.pp-cifra small { font-size: .76rem; font-weight: 700; letter-spacing: .04em; }
.pp-barra { height: 5px; border-radius: 5px; background: rgba(243, 172, 46, .18); overflow: hidden; }
.pp-barra i {
  display: block; height: 100%; width: 0; border-radius: 5px;
  background: linear-gradient(90deg, var(--tierra), var(--oro));
  box-shadow: 0 0 10px rgba(243, 172, 46, .6);
  transition: width .5s cubic-bezier(.2, .8, .2, 1);
}

/* El pasaporte es más alto y angosto que la agenda */
#pasaporte .album { --proporcion: .70; }
#pasaporte.sencillo .album { --proporcion: .69; }

/* ---------- Las hojas: papel de seguridad ---------- */
#pasaporte .cara:not(.tapa):not(.final) {
  background-color: var(--papel);
  background-image:
    repeating-linear-gradient(62deg, rgba(91, 20, 58, .05) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-62deg, rgba(172, 23, 112, .045) 0 1px, transparent 1px 9px),
    radial-gradient(52% 40% at 50% 46%, rgba(172, 23, 112, .10), transparent 70%);
  color: var(--tinta);
}
#pasaporte .cara:not(.tapa):not(.final)::before {
  background:
    radial-gradient(70% 50% at 20% 0%, rgba(253, 252, 224, .8), transparent 60%),
    linear-gradient(160deg, rgba(255, 255, 255, .35), transparent 45%);
}
#pasaporte .cara::after { background: linear-gradient(var(--dir, 90deg), rgba(56, 23, 41, .2), transparent); }
.pp-vacia { }

/* ---------- La tapa ---------- */
.cara.pp-tapa {
  padding: 0;
  background:
    radial-gradient(75% 55% at 50% 12%, rgba(197, 30, 130, .16), transparent 62%),
    linear-gradient(168deg, #4a1230, #1f0714 62%, #18050f);
}
.cara.pp-tapa::before {
  display: block; content: ""; z-index: 0; opacity: .5;
  background:
    repeating-linear-gradient(45deg, rgba(253, 252, 224, .05) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, rgba(253, 252, 224, .04) 0 1px, transparent 1px 6px);
}
.pp-tapa-marco {
  position: absolute; inset: 4.5%; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2cqw; text-align: center; padding: 4cqw 3cqw;
  border: 1px solid rgba(243, 172, 46, .45);
  border-radius: 4px;
  box-shadow: inset 0 0 0 4px rgba(243, 172, 46, .12);
}
.pp-tapa-arriba {
  /* Baja lo justo para no quedar bajo el botón de volver al menú */
  position: absolute; top: 9cqw; left: 6cqw; right: 6cqw;
  font-size: clamp(.5rem, 2.5cqw, .72rem); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(247, 200, 126, .7);
}
.pp-tapa-escudo {
  width: clamp(54px, 34cqw, 150px); aspect-ratio: 2.6;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: brightness(0) invert(1) sepia(.6) saturate(4) hue-rotate(2deg) brightness(1.05);
  opacity: .95;
}
.pp-tapa h2 {
  margin: 0; font-family: var(--display); font-weight: 900;
  font-size: clamp(1.3rem, 11cqw, 3.4rem); line-height: 1; letter-spacing: .04em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #f6e5ae, var(--oro) 55%, #ce8017);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pp-tapa p {
  margin: 0; font-size: clamp(.62rem, 3.4cqw, 1rem); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--oro-suave);
}
/* Las letras oficiales del festival, recortadas con su propia forma:
   así se visten de oro sobre el verde y de verde sobre el oro. */
.pp-tapa-letras {
  display: block; width: 62%; aspect-ratio: 1.7735; margin: -1cqw 0 .4cqw;
  -webkit-mask-image: var(--marca); mask-image: var(--marca);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  background: linear-gradient(176deg, #fbf0c8 4%, #fcd292 26%, var(--oro) 52%, #df9521 74%, #9e610d);
  filter: drop-shadow(0 2px 7px rgba(14, 3, 9, .6));
  transition: background .5s ease, filter .5s ease;
}
/* Sobre la tapa dorada, las mismas letras en verde profundo */
.pp-tapa.oro .pp-tapa-letras {
  background: linear-gradient(176deg, #501936 4%, #3a1026 34%, #1f0714 74%, #18050f);
  filter: drop-shadow(0 1px 3px rgba(255, 250, 226, .65));
}
.pp-tapa-linea {
  width: 40%; height: 1px; background: linear-gradient(90deg, transparent, rgba(243, 172, 46, .7), transparent);
}
.pp-tapa small {
  font-size: clamp(.5rem, 2.6cqw, .74rem); color: rgba(226, 197, 211, .75);
  letter-spacing: .06em;
}
.pp-tapa-chip {
  position: absolute; bottom: 13cqw; left: 50%; transform: translateX(-50%);
  width: clamp(20px, 9cqw, 34px); aspect-ratio: 1.35; border-radius: 3px;
  background: linear-gradient(135deg, #e5bf7b, #aa7927);
  box-shadow: inset 0 0 0 1px rgba(14, 3, 9, .35);
}
.pp-tapa-chip::before, .pp-tapa-chip::after {
  content: ""; position: absolute; left: 12%; right: 12%; height: 1px;
  background: rgba(14, 3, 9, .35);
}
.pp-tapa-chip::before { top: 38%; }
.pp-tapa-chip::after { top: 62%; }

/* ---------- Página de datos ---------- */
.cara.pp-datos { padding-block: clamp(.6rem, 3.5cqw, 1.3rem); }
.pp-doc {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: 2.5cqw;
}
.pp-doc-cabeza {
  display: flex; align-items: center; gap: 2cqw;
  padding-bottom: 2cqw; border-bottom: 1.5px solid rgba(91, 20, 58, .3);
}
.pp-doc-escudo {
  width: clamp(38px, 20cqw, 88px); aspect-ratio: 2.6; flex: none;
  background-size: contain; background-repeat: no-repeat; background-position: left center;
  filter: grayscale(1) brightness(.35);
  opacity: .8;
}
.pp-doc-titulo { display: flex; flex-direction: column; line-height: 1.15; }
.pp-doc-titulo b {
  font-family: var(--body); font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; font-size: clamp(.6rem, 3.2cqw, .9rem); color: var(--tinta);
}
.pp-doc-titulo small { font-size: clamp(.5rem, 2.5cqw, .72rem); color: var(--tinta-2); }
.pp-doc-num {
  margin-left: auto; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: clamp(.55rem, 2.9cqw, .82rem); font-weight: 700; letter-spacing: .08em;
  color: #9a2b2b; border: 1px solid rgba(154, 43, 43, .4); border-radius: 3px;
  padding: .1em .45em; transform: rotate(-1.5deg);
}
.pp-doc-cuerpo { display: flex; gap: 3cqw; align-items: flex-start; }
.pp-foto {
  position: relative; flex: none;
  width: clamp(62px, 28cqw, 130px); aspect-ratio: .78;
  border: 1px solid rgba(91, 20, 58, .4); border-radius: 2px;
  background: repeating-linear-gradient(135deg, rgba(91, 20, 58, .07) 0 3px, transparent 3px 6px);
  display: grid; place-items: center; overflow: hidden; cursor: pointer;
}
.pp-foto img { width: 100%; height: 100%; object-fit: cover; display: none; }
.pp-foto.con-foto img { display: block; }
.pp-foto.con-foto .pp-foto-vacia { display: none; }
.pp-foto-vacia {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  color: rgba(56, 23, 41, .45); text-align: center; padding: .2rem;
}
.pp-foto-vacia svg { width: clamp(20px, 9cqw, 34px); height: auto; }
.pp-foto-vacia small { font-size: clamp(.45rem, 2.2cqw, .62rem); font-weight: 700; }
/* El sello seco cruza la foto, como en un pasaporte de verdad */
.pp-foto.con-foto::after {
  content: ""; position: absolute; right: -18%; bottom: -14%;
  width: 78%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid rgba(154, 43, 43, .35);
  box-shadow: inset 0 0 0 3px rgba(154, 43, 43, .12);
  pointer-events: none;
}
.pp-campos {
  flex: 1 1 auto; min-width: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw 3cqw; align-content: start;
}
.pp-campo { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.pp-campo.ancho { grid-column: 1 / -1; }
.pp-campo small {
  font-size: clamp(.45rem, 2.2cqw, .62rem); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-2);
}
.pp-campo b {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: clamp(.6rem, 3cqw, .88rem); font-weight: 700; color: var(--tinta);
  letter-spacing: .02em; overflow-wrap: anywhere; line-height: 1.25;
}
.pp-banda {
  margin-top: auto;
  background: repeating-linear-gradient(90deg, rgba(91, 20, 58, .07) 0 2px, transparent 2px 4px), #fbf8e8;
  border-top: 1px solid rgba(91, 20, 58, .25);
  padding: 1.6cqw 1cqw; overflow: hidden;
}
.pp-banda span {
  display: block; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: clamp(.42rem, 2.25cqw, .68rem); letter-spacing: .12em; color: var(--tinta);
  white-space: nowrap; overflow: hidden;
}
/* La zona central de la página de datos: marca de agua y advertencia */
.pp-doc-nota {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2cqw; text-align: center; padding: 3cqw 2cqw;
}
.pp-doc-marca {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%);
  width: min(62cqw, 15rem); aspect-ratio: 1;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  opacity: .085; filter: grayscale(1) brightness(.4); pointer-events: none;
}
.pp-doc-nota p {
  position: relative; margin: 0; max-width: 34ch;
  font-size: clamp(.5rem, 2.55cqw, .74rem); line-height: 1.5; color: var(--tinta-2);
}
.pp-doc-desde {
  position: relative; font-size: clamp(.46rem, 2.3cqw, .66rem);
  letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2);
}
.pp-doc-desde b { font-family: ui-monospace, Menlo, monospace; color: var(--tinta); text-transform: none; letter-spacing: 0; }
.pp-editar {
  position: relative; background: none; border: 0; cursor: pointer;
  font-size: clamp(.52rem, 2.5cqw, .72rem); font-weight: 700; color: var(--laguna-claro);
  text-decoration: underline; padding: 0;
}

/* ---------- Páginas de día ---------- */

.pp-rejilla {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 3cqw 1.5cqw; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(clamp(74px, 30cqw, 118px), 1fr));
  scrollbar-width: thin; padding-bottom: .4rem;
}
.pp-rejilla::-webkit-scrollbar { width: 5px; }
.pp-rejilla::-webkit-scrollbar-thumb { background: rgba(91, 20, 58, .3); border-radius: 6px; }


/* ---------- Las hojas del pasaporte, con el aire de la agenda ---------- */
/* Los mismos adornos de cada día, pero grabados en el papel */
.pp-dia-hoja .adornos3d .adorno i,
.pp-datos .adornos3d .adorno i,
.pp-cierre .adornos3d .adorno i {
  opacity: .17;
  filter: grayscale(1) sepia(.65) saturate(.9) brightness(.68) contrast(1.15);
}
.pp-dia-hoja .sol-escena, .pp-datos .sol-escena, .pp-cierre .sol-escena {
  opacity: .2; filter: grayscale(.6) sepia(.5) brightness(.9);
}
.pp-dia-hoja .chispas-pagina, .pp-datos .chispas-pagina, .pp-cierre .chispas-pagina { opacity: .45; }

/* Marco de visado: hilo fino y cantoneras doradas */
.pp-marco {
  position: absolute; inset: 2.6%; z-index: 1; pointer-events: none;
  border: 1px solid rgba(91, 20, 58, .28);
  box-shadow: inset 0 0 0 3px rgba(243, 172, 46, .12);
  border-radius: 2px;
  --g: linear-gradient(var(--oro), var(--oro));
  background:
    var(--g) left  top    / 16px 1.6px no-repeat, var(--g) left  top    / 1.6px 16px no-repeat,
    var(--g) right top    / 16px 1.6px no-repeat, var(--g) right top    / 1.6px 16px no-repeat,
    var(--g) left  bottom / 16px 1.6px no-repeat, var(--g) left  bottom / 1.6px 16px no-repeat,
    var(--g) right bottom / 16px 1.6px no-repeat, var(--g) right bottom / 1.6px 16px no-repeat;
  opacity: .75;
}

/* Cabecera del día: el mismo titular grande de la agenda, en tinta */
.cara.pp-dia-hoja { padding-block: clamp(.7rem, 4cqw, 1.5rem); }
.pp-dia-cabeza {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  gap: .25rem; padding-right: clamp(44px, 17cqw, 70px);
  padding-bottom: 1.8cqw; margin-bottom: 2.6cqw;
  border-bottom: 1.5px solid rgba(91, 20, 58, .3);
}
.pp-dia-els { display: flex; gap: .3rem; align-items: center; }
.pp-dia-els .el-insignia { width: clamp(16px, 5.4cqw, 24px); height: clamp(16px, 5.4cqw, 24px); }
.pp-dia-titulo {
  margin: 0; line-height: .95;
  font-family: var(--display); font-weight: 900; color: var(--tinta);
  text-transform: uppercase; letter-spacing: -.01em;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .1em .3em;
}
.pp-dia-titulo .nombre { font-size: clamp(1rem, 7.6cqw, 2.1rem); }
.pp-dia-titulo .num {
  font-size: clamp(1.2rem, 9cqw, 2.5rem); color: var(--laguna-claro);
  -webkit-text-stroke: .5px rgba(91, 20, 58, .35);
}
.pp-dia-titulo small {
  font-family: var(--body); font-weight: 700; font-size: clamp(.5rem, 2.6cqw, .74rem);
  letter-spacing: .12em; color: var(--tinta-2); text-transform: uppercase;
}
.pp-dia-cuenta {
  align-self: flex-start; margin-top: .1rem;
  font-size: clamp(.5rem, 2.5cqw, .74rem); font-weight: 800; letter-spacing: .05em; color: var(--tinta-2);
  padding: .1rem .45rem; border-radius: 999px; border: 1px solid rgba(91, 20, 58, .35);
}
.pp-dia-cuenta.completo { color: var(--papel); background: var(--tierra); border-color: var(--tierra); }
/* El cuño de visado, arriba a la derecha, como en un pasaporte sellado */
.pp-dia-sello {
  position: absolute; right: 0; top: 0; pointer-events: none;
  transform: rotate(-9deg);
}
.pp-visado {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: clamp(38px, 15cqw, 62px); aspect-ratio: 1.25; border-radius: 4px;
  border: 1.6px solid rgba(154, 43, 43, .42); color: rgba(154, 43, 43, .5);
  font-size: clamp(.36rem, 1.9cqw, .5rem); font-weight: 800; letter-spacing: .14em;
  box-shadow: inset 0 0 0 2.5px rgba(154, 43, 43, .12);
}
.pp-visado b {
  font-family: var(--display); font-size: clamp(.46rem, 2.3cqw, .64rem);
  letter-spacing: .02em; text-transform: none;
}
/* Los logos oficiales al pie de cada hoja, como en la agenda */
.pp-pagina-logos {
  position: absolute; left: 50%; bottom: 2.4cqw; transform: translateX(-50%);
  width: clamp(58px, 26cqw, 108px); height: auto; z-index: 2;
  opacity: .5; filter: grayscale(1) brightness(.25);
  pointer-events: none;
}
.pp-dia-hoja .pp-rejilla { padding-bottom: clamp(18px, 7cqw, 34px); }
.pp-dia-hoja .aviso-lista { bottom: clamp(20px, 7.5cqw, 38px); }
/* Los días de sol, con el papel más cálido */
.pp-tema-sol { background-color: #fbf3d8; }

/* ---------- El sello ---------- */
.sello {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  background: none; border: 0; padding: .2rem 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sello-disco {
  position: relative; width: clamp(50px, 21cqw, 86px); aspect-ratio: 1;
  display: grid; place-items: center;
  color: var(--c); transform: rotate(var(--giro, 0deg));
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.sello-disco svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.s-aro { fill: none; stroke: currentColor; stroke-width: 3.4; opacity: .85; }
.s-aro.fina { stroke-width: 1.4; stroke-dasharray: 2.5 4; }
.s-arco {
  fill: currentColor; font-family: var(--body); font-weight: 800;
  font-size: 11px; letter-spacing: .12em; text-anchor: middle;
}
.s-arco.baja { font-size: 9.5px; letter-spacing: .1em; }
.sello-icono { position: relative; width: 48%; height: auto; opacity: .95; }
/* La tinta del sello nunca queda perfecta: se marca un poco desigual */
.sello.puesto .sello-disco::after {
  content: ""; position: absolute; inset: -6%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(60% 55% at 32% 28%, rgba(31, 7, 20, .22), transparent 60%),
              radial-gradient(45% 40% at 74% 78%, rgba(31, 7, 20, .18), transparent 62%);
  mix-blend-mode: multiply;
}
.sello-nombre {
  font-size: clamp(.46rem, 2.4cqw, .7rem); font-weight: 700; line-height: 1.2; color: var(--tinta-2);
  text-align: center; max-width: 15ch; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.sello-hora { font-size: clamp(.42rem, 2.1cqw, .62rem); font-weight: 600; color: rgba(110, 73, 96, .8); }

/* Sin sellar: el disco está en hueco y esperando, pero ya se ve de qué
   elemento es: su color manda, apenas atenuado y con el aro punteado. */
.sello:not(.puesto) .sello-disco { color: var(--c); opacity: .62; transform: rotate(0deg); }
.sello:not(.puesto) .sello-disco::before {
  content: ""; position: absolute; inset: 5%; border-radius: 50%;
  background: currentColor; opacity: .09; pointer-events: none;
}
.sello:not(.puesto) .s-aro { stroke-dasharray: 5 5; stroke-width: 2.2; opacity: .9; }
.sello:not(.puesto) .s-aro.fina { display: none; }
.sello:not(.puesto) .s-arco { opacity: .8; }
.sello:not(.puesto) .sello-icono { filter: saturate(.95); opacity: .92; }
.sello:hover .sello-disco { transform: rotate(var(--giro, 0deg)) scale(1.06); }

/* Sellado: tinta puesta */
.sello.puesto .sello-disco { filter: drop-shadow(0 1px 3px rgba(56, 23, 41, .3)); }
/* Sobre papel crema los elementos claros —el oro del fuego, el verde pálido
   del viento— se perderían: la tinta se oscurece sin cambiar de color. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .sello.puesto .sello-disco { color: color-mix(in srgb, var(--c) 72%, #371226); }
  .sello:not(.puesto) .sello-disco { color: color-mix(in srgb, var(--c) 66%, #371226); }
}
.sello.puesto .sello-nombre { color: var(--tinta); }

/* La prensa baja, aprieta, y al levantarse queda la tinta */
.prensa {
  position: absolute; left: 50%; top: -76%; width: 147%;
  aspect-ratio: 100 / 118; z-index: 5; pointer-events: none;
  transform: translate(-50%, -78%);
  filter: drop-shadow(0 10px 16px rgba(14, 3, 9, .45));
}
.prensa svg { width: 100%; height: 100%; overflow: visible; }
.p-mango  { fill: #6d4d23; }
.p-brillo { fill: rgba(255, 246, 222, .32); }
.p-cuello { fill: #4a3416; }
.p-cuerpo { fill: #2f2a23; }
.p-aro    { fill: #1c1915; }
.p-goma   { fill: var(--c); }
/* Suelta sobre la pantalla, para que no la recorte la lista de sellos */
.prensa.suelta {
  position: fixed; top: 0; left: 0; z-index: 75;
  transform: translate(-50%, -78%); opacity: 0;
}
.prensa.suelta.va, .sello.sellando .prensa { animation: prensar 1.2s cubic-bezier(.3, .05, .2, 1) both; }
@keyframes prensar {
  0%   { transform: translate(-50%, -78%) rotate(-6deg); opacity: 0; }
  16%  { opacity: 1; }
  30%  { transform: translate(-50%, 0) rotate(0deg); }
  38%  { transform: translate(-50%, 3%) rotate(0deg) scaleY(.955); }
  50%  { transform: translate(-50%, -2%) rotate(0deg); }
  62%  { opacity: 1; }
  100% { transform: translate(-50%, -85%) rotate(4deg); opacity: 0; }
}
/* La tinta aparece justo cuando la goma toca el papel */
.sello.sellando .sello-disco { animation: tinta-baja .46s cubic-bezier(.2, .9, .25, 1.1) .34s both; }
@keyframes tinta-baja {
  0%   { transform: rotate(var(--giro)) scale(1.3); opacity: 0; filter: blur(2px); }
  55%  { transform: rotate(var(--giro)) scale(.96); opacity: 1; filter: blur(0); }
  78%  { transform: rotate(var(--giro)) scale(1.04); }
  100% { transform: rotate(var(--giro)) scale(1); opacity: 1; }
}
/* La onda de tinta que salta al golpear */
.sello-onda {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  border: 2px solid currentColor; opacity: 0;
}
.sello.sellando .sello-onda { animation: tinta .65s ease-out .4s both; }
@keyframes tinta {
  0%   { transform: scale(.7); opacity: .55; }
  100% { transform: scale(1.9); opacity: 0; }
}
/* Y el temblor del papel al recibir el golpe */
.sello.sellando { animation: golpe .4s ease-out .34s; }
@keyframes golpe {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(3px); }
  60%      { transform: translateY(-1px); }
}
.sello.quitando .sello-disco { animation: despegar .4s ease-in both; }
@keyframes despegar {
  0%   { transform: rotate(var(--giro)) scale(1); opacity: 1; }
  100% { transform: rotate(0deg) scale(.9); opacity: 1; }
}

/* ---------- Página de cierre ---------- */
.cara.pp-cierre { align-items: center; justify-content: center; text-align: center; }
.pp-cierre-centro { display: flex; flex-direction: column; align-items: center; gap: 3cqw; }
.pp-cierre-aro {
  width: clamp(72px, 34cqw, 140px); aspect-ratio: 1; border-radius: 50%;
  border: 3px double rgba(91, 20, 58, .45);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--tinta);
}
.pp-cierre-aro b { font-family: var(--display); font-weight: 900; font-size: clamp(1.4rem, 12cqw, 3rem); line-height: 1; }
.pp-cierre-aro small { font-size: clamp(.48rem, 2.4cqw, .68rem); letter-spacing: .12em; text-transform: uppercase; }
.pp-cierre-centro p { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(.85rem, 5cqw, 1.4rem); color: var(--tinta); }
.pp-cierre-nota { font-size: clamp(.55rem, 2.7cqw, .8rem); color: var(--tinta-2); }

/* ---------- Botones propios del pasaporte ---------- */
.pp-boton {
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--oro); color: var(--selva);
  font-weight: 800; font-size: .88rem; padding: .6rem 1.2rem;
  box-shadow: 0 6px 18px rgba(14, 3, 9, .35);
  transition: transform .18s ease, filter .18s ease;
}
.pp-boton:hover { transform: translateY(-1px); filter: brightness(1.06); }
.pp-boton.claro { background: rgba(91, 20, 58, .14); color: var(--laguna-claro); box-shadow: none; }
.cara.pp-cierre .pp-boton.claro { border: 1px solid rgba(91, 20, 58, .35); font-size: clamp(.58rem, 2.8cqw, .82rem); }


/* ============================================================
   El pasaporte VIP: un sello de oro y todo el libro cambia
   ============================================================ */
.pp-oro {
  border: 0; border-radius: 999px; cursor: pointer;
  font-size: clamp(.52rem, 2.5cqw, .74rem); font-weight: 800; letter-spacing: .04em;
  padding: .42em 1.1em; color: #2a2105;
  background: linear-gradient(140deg, #fdf3cf, #fabe60 42%, #d98e1b 72%, #fcd292);
  box-shadow: 0 4px 12px rgba(158, 97, 13, .35), inset 0 0 0 1px rgba(255, 255, 255, .5);
  transition: transform .2s ease, filter .2s ease;
}
.pp-oro:hover { transform: translateY(-1px); filter: brightness(1.07); }
.pp-oro.puesto {
  background: none; color: var(--tinta-2); box-shadow: inset 0 0 0 1px rgba(158, 97, 13, .45);
  font-weight: 700;
}
.pp-doc-acciones {
  position: relative; display: flex; flex-wrap: wrap; gap: .5rem 1rem;
  align-items: center; justify-content: center;
}

/* ---------- La ceremonia: una línea de oro recorre la portada ---------- */
/* Encima de la tapa nueva se pone una copia de la vieja; la línea va
   recortando esa copia, así que por donde pasa aparece el oro. */
/* La capa del cambio va junto a la tapa, recortada a su misma forma */
.pp-vip-capa {
  position: absolute; inset: 0; z-index: 9; overflow: hidden; pointer-events: none;
  border-radius: 5px 16px 16px 5px;
}
.pp-clon {
  position: absolute; inset: 0; z-index: 1; cursor: default; pointer-events: none;
  clip-path: polygon(-34% 0, 210% 0, 210% 100%, -14% 100%);
}
.pp-clon.va { animation: vip-corte 2.1s cubic-bezier(.45, .05, .35, 1) both; }
@keyframes vip-corte {
  from { clip-path: polygon(-34% 0, 210% 0, 210% 100%, -14% 100%); }
  to   { clip-path: polygon(116% 0, 210% 0, 210% 100%, 136% 100%); }
}
/* La línea: un filo brillante con su halo, inclinado igual que el corte */
.pp-linea-oro {
  position: absolute; top: -28%; bottom: -28%; left: -24%; z-index: 2;
  width: clamp(5px, 1.9cqw, 12px); pointer-events: none;
  transform: rotate(5.7deg); opacity: 0;
  background: linear-gradient(90deg,
    rgba(243, 172, 46, 0), rgba(246, 229, 174, .85) 34%,
    #fffdf2 50%, rgba(246, 229, 174, .85) 66%, rgba(243, 172, 46, 0));
  box-shadow:
    0 0 14px 4px rgba(246, 229, 174, .75),
    0 0 46px 14px rgba(243, 172, 46, .45),
    0 0 90px 30px rgba(243, 172, 46, .22);
}
.pp-linea-oro.va { animation: vip-linea 2.1s cubic-bezier(.45, .05, .35, 1) both; }
@keyframes vip-linea {
  0%        { left: -24%; opacity: 0; }
  8%        { opacity: 1; }
  88%       { opacity: 1; }
  100%      { left: 126%; opacity: 0; }
}

/* ---------- Ya dorado: la tapa ---------- */
.cara.pp-tapa.oro {
  background:
    radial-gradient(70% 48% at 50% 14%, rgba(255, 249, 224, .6), transparent 62%),
    linear-gradient(158deg, #f6e8b6 0%, #f2b03d 24%, #b67218 46%, #f2e0a6 60%, #df9521 80%, #9e610d 100%);
}
.cara.pp-tapa.oro::before { opacity: .22; }
.pp-tapa.oro .pp-tapa-marco {
  border-color: rgba(43, 33, 8, .45);
  box-shadow: inset 0 0 0 4px rgba(43, 33, 8, .14);
}
.pp-tapa.oro h2 {
  background: linear-gradient(180deg, #43142d, #1f0714 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pp-tapa.oro p { color: rgba(36, 8, 23, .85); }
.pp-tapa.oro small, .pp-tapa.oro .pp-tapa-arriba { color: rgba(30, 24, 4, .68); }
.pp-tapa.oro .pp-tapa-linea {
  background: linear-gradient(90deg, transparent, rgba(31, 7, 20, .55), transparent);
}
.pp-tapa.oro .pp-tapa-escudo { filter: brightness(0) saturate(0) invert(9%); opacity: .85; }
.pp-tapa.oro .pp-tapa-chip { background: linear-gradient(135deg, #fffbe9, #e5bf7b); }
.pp-tapa.oro .adornos3d.oro .adorno.suelto > i {
  mix-blend-mode: multiply; opacity: .34;
  filter: sepia(1) saturate(1.6) brightness(.55) contrast(1.1);
}
/* La banda VIP, en la esquina de la tapa */
.pp-tapa-vip {
  position: absolute; top: 6%; right: -9%; z-index: 4;
  width: 56%; padding: .3rem 0; text-align: center;
  transform: rotate(38deg); opacity: 0; pointer-events: none;
  font-family: var(--display); font-weight: 900; letter-spacing: .32em;
  font-size: clamp(.62rem, 3.4cqw, 1rem); color: #2a2105; text-indent: .32em;
  background: linear-gradient(140deg, #fdf3cf, #fabe60 45%, #d98e1b);
  box-shadow: 0 4px 14px rgba(14, 3, 9, .45);
  transition: opacity .5s ease .2s;
}
.pp-tapa.oro .pp-tapa-vip { opacity: 1; }

/* ---------- Ya dorado: la contraportada ---------- */
.libro.vip .cara.pp-contra {
  background-image: none;
  background:
    radial-gradient(72% 46% at 50% 22%, rgba(255, 249, 224, .6), transparent 64%),
    linear-gradient(158deg, #f6e8b6 0%, #f2b03d 24%, #b67218 46%, #f2e0a6 60%, #df9521 80%, #9e610d 100%);
}
.libro.vip .cara.pp-contra::before {
  background: linear-gradient(160deg, rgba(255, 255, 255, .22), transparent 48%);
}
.libro.vip .pp-contra .final-centro p {
  color: #24200a; text-shadow: 0 1px 6px rgba(255, 249, 224, .55);
}
.libro.vip .pp-contra .final-aro {
  color: #2a2105; border-color: rgba(43, 33, 8, .55); background: rgba(255, 249, 224, .35);
}
@keyframes latir-oro {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43, 33, 8, .35); }
  70%      { box-shadow: 0 0 0 15px rgba(43, 33, 8, 0); }
}
.libro.vip .pp-contra .final-aro { animation-name: latir-oro; }
.libro.vip .cara.pp-contra:hover .final-aro { border-color: #2a2105; background: rgba(255, 249, 224, .6); }

/* ---------- Ya dorado: las hojas ---------- */
.libro.vip .cara:not(.tapa):not(.final) { background-color: #fdf8e6; }
.libro.vip .pp-marco {
  opacity: 1; border-color: rgba(182, 114, 25, .55);
  box-shadow: inset 0 0 0 3px rgba(243, 172, 46, .32);
}
.libro.vip .pp-dia-cabeza, .libro.vip .pp-doc-cabeza { border-bottom-color: rgba(182, 114, 25, .45); }
.libro.vip .pp-dia-titulo .num { color: #ad6d14; -webkit-text-stroke-color: rgba(158, 97, 13, .35); }
.libro.vip .pp-doc-num { color: #9e610d; border-color: rgba(158, 97, 13, .55); }
.libro.vip .pp-banda { background-color: #fdf6de; border-top-color: rgba(182, 114, 25, .4); }
.libro.vip .sello.puesto .sello-disco { filter: drop-shadow(0 0 5px rgba(243, 172, 46, .75)); }
.libro.vip .pp-cierre-aro { border-color: rgba(182, 114, 25, .6); }
.libro.vip #pp-v-cat { color: #9e610d; }
/* El marcador de sellos, con el filo dorado */
#pasaporte.vip .pp-cifra b, #pasaporte.vip .pp-cifra small { color: var(--oro); }
#pasaporte.vip .pp-barra { background: rgba(243, 172, 46, .28); }

@media (prefers-reduced-motion: reduce) {
  .pp-clon.va, .pp-linea-oro.va { animation: none; }
  .pp-clon.va { display: none; }
}

/* ============================================================
   La puerta: sin registro el pasaporte no se abre
   ============================================================ */
#pasaporte.bloqueado .album,
#pasaporte.bloqueado .pp-antes,
#pasaporte.bloqueado .album-pie { filter: blur(6px) saturate(.7); pointer-events: none; user-select: none; }

.pp-puerta {
  position: absolute; inset: 0; z-index: 40;
  display: grid; place-items: center; padding: 1rem;
  opacity: 0; transition: opacity .35s ease;
}
.pp-puerta.visible { opacity: 1; }
.pp-forma {
  width: min(100%, 34rem); max-height: min(86svh, 44rem); overflow-y: auto;
  background: linear-gradient(165deg, rgba(69, 16, 44, .96), rgba(31, 7, 20, .97));
  border: 1px solid rgba(243, 172, 46, .35); border-radius: var(--r-m);
  box-shadow: 0 28px 60px rgba(14, 3, 9, .6);
  padding: clamp(1rem, 3vw, 1.6rem);
  display: flex; flex-direction: column; gap: .9rem;
  transform: translateY(14px); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.pp-puerta.visible .pp-forma { transform: none; }
.pp-forma-cabeza { display: flex; align-items: center; gap: .8rem; }
.pp-forma-escudo {
  width: 92px; aspect-ratio: 2.6; flex: none; opacity: .9;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.pp-forma-cabeza h3 {
  margin: 0; font-family: var(--display); font-weight: 900; color: var(--luz);
  font-size: clamp(1.1rem, 4vw, 1.5rem); line-height: 1.1;
}
.pp-forma-cabeza p { margin: .15rem 0 0; font-size: .82rem; color: var(--texto-2); }
.pp-forma-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem .7rem; }
.pp-f { display: flex; flex-direction: column; gap: .22rem; min-width: 0; }
.pp-f.ancho { grid-column: 1 / -1; }
.pp-f.corto { max-width: 8rem; }
.pp-f span {
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--oro-suave);
}
.pp-f span i { font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--texto-2); }
.pp-f input, .pp-f select, .pp-pide input {
  font: inherit; font-size: .92rem; color: var(--luz);
  background: rgba(14, 3, 9, .45); border: 1px solid rgba(226, 197, 211, .25);
  border-radius: var(--r-s); padding: .55rem .7rem; width: 100%;
  transition: border-color .2s ease, background .2s ease;
}
.pp-f input::placeholder, .pp-pide input::placeholder { color: rgba(195, 165, 180, .6); }
.pp-f input:focus, .pp-f select:focus, .pp-pide input:focus {
  outline: none; border-color: var(--oro); background: rgba(14, 3, 9, .7);
}
.pp-f select { appearance: none; -webkit-appearance: none; }
.pp-f select option { color: #270c1a; }
.pp-acepto {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .76rem; line-height: 1.45; color: var(--texto-2);
}
.pp-acepto input { margin-top: .2rem; accent-color: var(--oro); width: 1.05rem; height: 1.05rem; flex: none; }
.pp-error {
  margin: 0; font-size: .8rem; font-weight: 700; color: #ffcf8c;
  background: rgba(154, 43, 43, .28); border: 1px solid rgba(255, 207, 140, .35);
  border-radius: var(--r-s); padding: .45rem .6rem;
}
.pp-forma-pie { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.pp-forma-pie small { font-size: .7rem; color: var(--texto-2); }
.pp-puerta.temblor .pp-forma { animation: pp-temblar .4s ease; }
@keyframes pp-temblar {
  0%, 100% { transform: none; } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); }
}

/* El sello de activación cae sobre el formulario */
.pp-activando { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; }
.pp-puerta.activando .pp-forma { filter: blur(3px) brightness(.6); }
.pp-puerta.activando .pp-activando { opacity: 1; }
.pp-activando-sello {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: min(62vw, 17rem); aspect-ratio: 1; border-radius: 50%;
  border: 6px double var(--oro); color: var(--oro);
  background: rgba(31, 7, 20, .35); transform: rotate(-11deg);
  box-shadow: 0 0 40px rgba(243, 172, 46, .35);
}
.pp-puerta.activando .pp-activando-sello { animation: pp-activar .8s cubic-bezier(.2, .9, .25, 1.1) both; }
@keyframes pp-activar {
  0%   { transform: rotate(-32deg) scale(3); opacity: 0; }
  45%  { opacity: 1; }
  60%  { transform: rotate(-11deg) scale(.9); }
  80%  { transform: rotate(-11deg) scale(1.06); }
  100% { transform: rotate(-11deg) scale(1); opacity: 1; }
}
.pp-activando-sello b {
  font-family: var(--display); font-weight: 900; font-size: clamp(1.4rem, 8vw, 2.6rem);
  letter-spacing: .08em;
}
.pp-activando-sello small { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }

/* ============================================================
   Ventanas: ficha del evento, documento y hoja de códigos
   ============================================================ */
.pp-vidrio {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: 1rem;
  background: rgba(14, 3, 9, .72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .28s ease;
}
.pp-vidrio.visible { opacity: 1; }
.pp-tarjeta {
  position: relative; width: min(100%, 26rem); max-height: 88svh; overflow-y: auto;
  background: linear-gradient(165deg, rgba(69, 16, 44, .97), rgba(31, 7, 20, .98));
  border: 1px solid rgba(243, 172, 46, .3); border-radius: var(--r-m);
  box-shadow: 0 28px 60px rgba(14, 3, 9, .65);
  padding: clamp(1.1rem, 3vw, 1.7rem);
  display: flex; flex-direction: column; gap: .7rem; align-items: center; text-align: center;
  transform: translateY(14px) scale(.98); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.pp-vidrio.visible .pp-tarjeta { transform: none; }
.pp-hoja-qr .pp-tarjeta { width: min(100%, 52rem); }
.pp-cerrar {
  position: absolute; top: .55rem; right: .55rem;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(14, 3, 9, .5); border: 1px solid rgba(226, 197, 211, .22);
  color: var(--texto); cursor: pointer;
}
.pp-tarjeta h3 {
  margin: 0; font-family: var(--display); font-weight: 900; color: var(--luz);
  font-size: clamp(1.05rem, 4.4vw, 1.45rem); line-height: 1.15;
}
.pp-ficha-fecha {
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--oro-suave);
}
.pp-ficha-lugar { margin: 0; font-size: .84rem; color: var(--texto-2); }
.pp-ficha-nota { margin: 0; font-size: .82rem; color: var(--texto-2); line-height: 1.45; }
.pp-ficha-cod { margin: 0; font-size: .74rem; letter-spacing: .06em; color: var(--texto-2); }
.pp-ficha-cod b { font-family: ui-monospace, Menlo, monospace; color: var(--oro-suave); }
.pp-ficha-listo {
  margin: 0; font-size: .82rem; font-weight: 700; color: var(--selva);
  background: var(--oro); border-radius: 999px; padding: .35rem .9rem;
}
.pp-qr-caja {
  width: min(62%, 13rem); background: #fff; padding: .5rem; border-radius: 10px;
  box-shadow: 0 8px 22px rgba(14, 3, 9, .4);
}
.pp-qr-caja svg { width: 100%; height: auto; }
.pp-pide form { display: flex; flex-direction: column; gap: .6rem; width: 100%; }
.pp-pide input { text-align: center; letter-spacing: .06em; }

/* La hoja de todos los códigos, pensada para imprimir */
.pp-qr-hoja { width: 100%; text-align: left; }
.pp-qr-hoja h4 {
  margin: 1rem 0 .5rem; font-size: .8rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--oro-suave);
  border-bottom: 1px solid rgba(243, 172, 46, .25); padding-bottom: .25rem;
}
.pp-qr-fila { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .8rem; }
.pp-qr-item { margin: 0; display: flex; flex-direction: column; gap: .35rem; align-items: center; text-align: center; }
.pp-qr-item svg { width: 100%; background: #fff; border-radius: 6px; padding: 4px; }
.pp-qr-item figcaption { display: flex; flex-direction: column; }
.pp-qr-item b { font-size: .7rem; line-height: 1.2; color: var(--luz); }
.pp-qr-item small { font-size: .62rem; color: var(--texto-2); }
.pp-qr-enlace {
  margin-top: .2rem; font-size: .56rem; line-height: 1.3; color: var(--oro-suave);
  text-decoration: none; word-break: break-all;
  border-bottom: 1px dotted rgba(243, 172, 46, .45);
}
.pp-qr-enlace:hover { color: var(--oro); border-bottom-style: solid; }


/* ---------- El cartel de artistas dentro de cada concierto ---------- */
.cartel {
  display: flex; flex-wrap: wrap; gap: .28rem;
  margin-top: clamp(.2rem, 1.4cqw, .4rem);
}
.artista {
  display: inline-flex; align-items: center; gap: .32rem;
  border: 1px solid rgba(243, 172, 46, .4); border-radius: 999px;
  background: rgba(14, 3, 9, .38); color: var(--luz); cursor: pointer;
  padding: .16em .62em .16em .26em;
  font-family: var(--body); font-weight: 700; line-height: 1.35;
  font-size: clamp(.58rem, 2.5cqw, .74rem);
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
/* El disco verde se ve de lejos: es la señal de que ahí suena su música */
.artista .ico-sp {
  width: 1.55em; height: 1.55em; flex: none;
  filter: drop-shadow(0 1px 4px rgba(29, 185, 84, .6));
}
.artista:has(.ico-sp) { border-color: rgba(29, 185, 84, .6); }
.artista:has(.ico-sp):hover { border-color: var(--oro); }
.evento.destacado .artista:has(.ico-sp) { border-color: rgba(10, 70, 35, .5); }
.artista:not(:has(.ico-sp)) { padding-left: .6em; }
.artista:hover { background: var(--oro); color: var(--selva); border-color: var(--oro); transform: translateY(-1px); }
.evento.destacado .artista { border-color: rgba(31, 7, 20, .35); background: rgba(253, 252, 224, .22); color: var(--selva); }
.evento.destacado .artista:hover { background: var(--selva); color: var(--luz); border-color: var(--selva); }

/* ---------- La ficha del artista ---------- */
.art-ficha .pp-tarjeta { width: min(100%, 27rem); text-align: left; align-items: stretch; }
.art-cabeza { display: flex; align-items: center; gap: .9rem; padding-right: 2rem; }
.art-foto {
  position: relative; flex: none; width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(70% 70% at 35% 28%, rgba(197, 30, 130, .5), rgba(31, 7, 20, .9));
  border: 1px solid rgba(243, 172, 46, .5);
  box-shadow: 0 8px 20px rgba(14, 3, 9, .45);
}
.art-foto b {
  font-family: var(--display); font-weight: 900; font-size: 1.7rem; color: var(--oro-suave);
  letter-spacing: .02em;
}
/* Sin foto propia ni de Spotify: una pieza del festival hace de retrato */
.art-foto.con-pieza {
  background-image: var(--pieza),
    radial-gradient(70% 70% at 35% 28%, rgba(197, 30, 130, .5), rgba(31, 7, 20, .9));
  background-size: 68%, cover; background-position: center, center; background-repeat: no-repeat;
}
.art-foto.con-pieza b { display: none; }
.art-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art-foto.con-foto b { display: none; }
.art-quien { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.art-ficha h3 { margin: 0; text-align: left; }
.art-genero {
  font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--oro-suave);
}
.art-origen { font-size: .78rem; color: var(--texto-2); }
.art-nota { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--texto); }
.art-aclara { margin: -.2rem 0 0; font-size: .74rem; line-height: 1.45; color: var(--texto-2); font-style: italic; }
.art-enlace { align-self: center; text-align: center; }
.art-sp { border-radius: 12px; overflow: hidden; min-height: 80px; background: rgba(14, 3, 9, .5); }
.art-sp iframe { display: block; border: 0; }
.pp-boton.sp {
  display: inline-flex; align-items: center; gap: .45rem; align-self: center;
  text-decoration: none; background: #1DB954; color: #06240f;
}
.pp-boton.sp .ico-sp { width: 1.5em; height: 1.5em; filter: drop-shadow(0 1px 3px rgba(6, 36, 15, .45)); }
.pp-boton.sp:hover { filter: brightness(1.08); }

/* ---------- Aviso corto ---------- */
.pp-aviso {
  position: fixed; left: 50%; bottom: 1.4rem; z-index: 90;
  transform: translate(-50%, 14px); opacity: 0;
  max-width: min(92vw, 26rem); text-align: center;
  background: rgba(31, 7, 20, .95); color: var(--texto);
  border: 1px solid rgba(243, 172, 46, .3); border-radius: 18px;
  padding: .6rem 1.1rem; font-size: .86rem; font-weight: 600; line-height: 1.4;
  box-shadow: 0 14px 34px rgba(14, 3, 9, .55);
  transition: opacity .3s ease, transform .3s ease;
}
.pp-aviso.visible { opacity: 1; transform: translate(-50%, 0); }
.pp-aviso.bien { background: var(--oro); color: var(--selva); border-color: transparent; font-weight: 800; }

/* Al imprimir solo sale la hoja de códigos */
@media print {
  body.imprimiendo-qr > *:not(.pp-vidrio) { display: none !important; }
  body.imprimiendo-qr .pp-vidrio { position: static; background: none; backdrop-filter: none; padding: 0; }
  body.imprimiendo-qr .pp-tarjeta {
    width: 100%; max-height: none; background: #fff; border: 0; box-shadow: none; color: #000;
  }
  body.imprimiendo-qr .pp-cerrar, body.imprimiendo-qr #pp-imprimir, body.imprimiendo-qr .pp-ficha-nota { display: none; }
  body.imprimiendo-qr .pp-tarjeta h3, body.imprimiendo-qr .pp-qr-hoja h4 { color: #000; }
  body.imprimiendo-qr .pp-qr-item b { color: #000; }
  body.imprimiendo-qr .pp-qr-item small { color: #444; }
  body.imprimiendo-qr .pp-qr-enlace { color: #333; border-bottom-color: #bbb; }
  body.imprimiendo-qr .pp-qr-item { break-inside: avoid; }
}

@media (max-width: 560px) {
  .pp-forma-campos { grid-template-columns: 1fr; }
  .pp-f.corto { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sello.sellando .sello-disco, .sello.sellando, .sello.sellando .sello-onda,
  .sello.sellando .prensa { animation: none; }
  .prensa { display: none; }
}

/* ============================================================
   6 · Modo de una sola página (celular en vertical)
   ============================================================ */
.libro.sencillo .album { --proporcion: .74; --alto: min(70svh, 40rem); }
.libro.sencillo .hoja { width: 100%; }
.libro.sencillo .pila,
.libro.sencillo.cerrado .pila { transform: none; }
/* Cada página gira sobre el lomo como una hoja de libro. La cara oculta
   su reverso (backface-visibility) para que nunca se vea el texto en espejo. */
.libro.sencillo .cara {
  transform-origin: left center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 10px 40px rgba(14, 3, 9, .5);
}
/* Mientras gira sí se ve por detrás: el reverso lo tapa el papel en blanco */
.libro.sencillo .cara.girando { backface-visibility: visible; -webkit-backface-visibility: visible; }
/* La página que llega no enseña su contenido hasta que la hoja termina de dar
   la vuelta: mientras tanto solo se ve el papel. */
.cara > *:not(.adorno) { transition: opacity .26s ease; }
.cara.entrando > *:not(.adorno) { opacity: 0; transition: none; }
.dorso {
  position: absolute; inset: 0; z-index: 20; opacity: 0; pointer-events: none;
  transition: opacity .12s linear;
  background-color: var(--selva);
  background-image:
    radial-gradient(120% 90% at 0% 0%, rgba(243, 172, 46, .12), transparent 62%),
    url("fondo-pieza.webp");
  background-size: auto, cover;
  box-shadow: inset 0 0 60px rgba(14, 3, 9, .5);
}
.libro.sencillo .cara.reverso { transform: none; }
.libro.sencillo .canto { display: none; }
.libro.sencillo .cara::after { width: 18px; }
.libro.sencillo .folio { min-width: 5.5rem; }

/* En pantallas táctiles el disco se marca un poco más para no perderse */
@media (pointer: coarse) {
  :root { --esq: clamp(52px, 11%, 76px); }
  .esquina::before { opacity: .72; }
  .esquina svg { box-shadow: 0 4px 14px rgba(14, 3, 9, .3), inset 0 0 0 1.5px rgba(243, 172, 46, .85); }
}

@media (max-width: 560px) {
}

/* Pantallas bajas (celular en horizontal): el álbum se queda con el espacio */
@media (max-height: 560px) and (orientation: landscape) {
  .libro { padding: .2rem .5rem .5rem; }
  .antes-album { flex-direction: row; align-items: center; gap: .4rem; margin-bottom: .35rem; }
  .antes-album .tira { flex: 1 1 auto; padding-bottom: 0; }
  .antes-album .filtros { flex: 0 0 auto; flex-wrap: nowrap; }
  .filtro { font-size: 0; gap: 0; padding: .3rem; }
  .filtro .punto { width: .8rem; height: .8rem; }
  .dia-btn { padding: .22rem .5rem; }
  .dia-btn b { font-size: 1rem; }
  .dia-btn small { font-size: .56rem; }
  .antes-album { margin-bottom: .25rem; }
  .tira { gap: .25rem; }
  .dia-btn { padding: .18rem .45rem; }
  .dia-btn b { font-size: .95rem; }
  .dia-btn small:first-child { display: none; }
  .dia-btn small { font-size: .52rem; }
  .dia-titulo { font-size: clamp(1.2rem, 9cqw, 2rem); }

  .album-pie { margin-top: .25rem; }
  .folio { font-size: .72rem; }
  :root { --esq: clamp(40px, 7%, 56px); }
}


/* ============================================================
   7 · Pantalla completa de una página
   ============================================================ */
.expandir {
  position: absolute; top: .5rem; right: .5rem; z-index: 6;
  width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(243, 172, 46, .4); border-radius: 9px;
  background: rgba(31, 7, 20, .8); color: var(--crema);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background-color .18s ease, color .18s ease;
}
.expandir:hover { background: var(--laguna-claro); color: var(--crema); }
/* En pantalla completa, el botón de salir ocupa esa esquina: la lupa baja */
body.inmersivo .cara .expandir { top: calc(.5rem + 40px); }

#lupa {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center;
  padding: calc(.6rem + env(safe-area-inset-top)) .6rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(18, 4, 11, .93);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .25s ease;
}
#lupa[hidden] { display: none; }
#lupa.visible { opacity: 1; }
.lupa-caja {
  position: relative; width: min(100%, 64rem); height: 100%;
  border-radius: var(--r-m); overflow: hidden;
  box-shadow: 0 30px 80px rgba(14, 3, 9, .7);
}
.lupa-cerrar {
  position: absolute; top: calc(.7rem + env(safe-area-inset-top)); right: .7rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  padding: .5rem .9rem; border-radius: 999px; font-weight: 700; font-size: .9rem;
  border: 1px solid rgba(243, 172, 46, .5); background: rgba(31, 7, 20, .9); color: var(--crema);
}
.lupa-cerrar:hover { background: var(--laguna); border-color: var(--oro); }

/* La cara, ya fuera de su hoja, ocupa toda la caja */
.cara.en-lupa {
  position: absolute; inset: 0;
  transform: none !important; border-radius: 0;
  backface-visibility: visible; -webkit-backface-visibility: visible;
  pointer-events: auto !important;
  padding: clamp(1rem, 3vw, 2.2rem);
}
.cara.en-lupa::after { display: none; }
.cara.en-lupa .expandir { display: none; }
.cara.en-lupa .dia-titulo { font-size: clamp(2rem, 6cqw, 4rem); }
.cara.en-lupa .evento h3 { font-size: clamp(1rem, 2.6cqw, 1.3rem); }
.cara.en-lupa .ev-lugar, .cara.en-lupa .ev-hora { font-size: clamp(.82rem, 2.2cqw, 1rem); }
.cara.en-lupa .mapa-cabeza h2 { font-size: clamp(1.1rem, 3cqw, 1.6rem); }

@media (prefers-reduced-motion: reduce) { #lupa { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  .brillo { display: none; }
  .pin.salta, .final-aro { animation: none; }
  .tapa-brillo, .chispas-pagina, .mapa-vida { display: none; }
  .adorno i, .a3d-vaiven { animation: none !important; }
  .flotante, .sombra-libro { animation: none; }
  .telon i, .pila, .hoja { transition: none; }
  .pantalla.activa { animation: none; }
}

/* ==========================================================
   El pasaporte conectado al servidor del festival
   ========================================================== */

/* Un sello que la red no dejó enviar: queda marcado con línea
   punteada hasta que sale de verdad. Nada de fingir que ya está. */
.sello.pendiente .sello-disco {
  opacity: .82;
  color: color-mix(in srgb, var(--c) 60%, #7d8f8a);
}
.sello.pendiente .sello-disco::before {
  content: "";
  position: absolute; inset: 4%;
  border: 2px dashed currentColor;
  border-radius: 50%;
  opacity: .7;
  animation: espera-sello 2.4s linear infinite;
}
.sello.pendiente .sello-nombre::after {
  content: " · por enviar";
  color: var(--tinta-2);
  font-style: italic;
}
@keyframes espera-sello { to { transform: rotate(360deg); } }

/* «Ya me registré antes»: el camino de vuelta para quien cambió de
   teléfono o borró los datos del navegador. */
.pp-otro {
  background: none;
  border: none;
  color: var(--oro);
  font: inherit;
  font-size: .74rem;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
  padding: .2rem .1rem;
  flex: 1 0 100%;
  text-align: center;
  order: 3;
}
.pp-otro:hover { color: #ffc96d; }

.pp-pide form input + input { margin-top: 0; }
.pp-cierre-nota.chica {
  font-size: clamp(.5rem, 2.3cqw, .7rem);
  max-width: 24ch;
  margin: .5rem auto 0;
  line-height: 1.35;
  opacity: .85;
}

/* ============================================================
   Monitor: la misma página, en proporción
   ------------------------------------------------------------
   En una pantalla ancha, todo lo que se mide contra el viewport
   crece sin freno. Las palmeras del inicio llegaban a medir
   854 px de ancho y 1354 de alto en un monitor 4K —más altas que
   la pantalla— mientras el logo y las dos tarjetas se quedaban
   clavados en su tope de 377 y 423 px. El cuadro quedaba al
   revés: el decorado gritando y el contenido en miniatura.

   Aquí se frena lo decorativo y se deja crecer lo que se lee.
   Todos los valores arrancan justo donde estaban a 1000 px, así
   que al ensanchar la ventana nada pega un salto, y por debajo
   de 1000 px —donde está casi toda la gente— no cambia nada.
   ============================================================ */
@media (min-width: 1000px) {
  /* Las piezas enmarcan, no invaden: dejan de crecer en 1180 px
     de referencia, y como se posicionan en % siguen pegadas a
     los bordes por anchos que sean. */
  .adornos3d.en-inicio { --ref: min(100%, 1100px, 108vh); }

  /* Las flechas para pasar la hoja salen del libro al margen: así no tapan
     los eventos. El JS ya deja ese margen libre a cada lado. */
  #album-caja > .esquina, #pp-caja > .esquina { width: 56px; }
  #album-caja > .esq-izq, #pp-caja > .esq-izq { left: -62px; }
  #album-caja > .esq-der, #pp-caja > .esq-der { right: -62px; }
  #album-caja > .esquina::before, #pp-caja > .esquina::before { display: none; }
  #album-caja > .esquina svg, #pp-caja > .esquina svg { width: 44px; }

  /* …y el centro crece para equilibrar el cuadro */
  .inicio-centro { width: min(100%, clamp(54rem, 58vw, 64rem)); }
  .inicio-marca { width: min(86%, clamp(23rem, 30vw, 32rem)); }
  .inicio-fechas { font-size: clamp(.92rem, .8vw, 1.05rem); }
  .inicio-pregunta { font-size: clamp(2.8rem, 2.9vw, 3.5rem); }

  .inicio-opciones {
    gap: clamp(1.1rem, 1.1vw, 1.6rem);
    margin-top: clamp(1.2rem, 1.3vw, 1.9rem);
  }
  .opcion { padding: clamp(1.5rem, 1.5vw, 2rem); gap: .5rem; }
  .opcion b { font-size: clamp(1.8rem, 1.6vw, 2.2rem); }
  .opcion small { font-size: clamp(.88rem, .75vw, 1.05rem); max-width: 32ch; }
  .opcion-ir {
    font-size: clamp(.82rem, .7vw, .95rem);
    padding: clamp(.42rem, .5vw, .62rem) clamp(.9rem, 1vw, 1.3rem);
  }
}

/* ============================================================
   Marcadores del mapa, con el lenguaje de las piezas
   ------------------------------------------------------------
   Antes eran gotas de color con un ícono genérico. Ahora cada
   sede lleva la medalla de su elemento —la misma de las fichas
   impresas—, los conciertos llevan su cartel y la ruta lleva su
   hamburguesa con el número del puesto.
   ============================================================ */
.pin {
  display: flex; flex-direction: column; align-items: center;
  animation: pin-entra .45s cubic-bezier(.2, .9, .3, 1.2) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes pin-entra {
  from { opacity: 0; transform: translate(-50%, -100%) translateY(-10px) scale(.6); }
}
.pin-cabeza {
  position: relative; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #381126, #1f0714 72%);
  box-shadow: 0 6px 14px rgba(14, 3, 9, .6), 0 0 0 1.5px rgba(253, 252, 224, .55);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pin-cabeza img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.pin-cabeza i { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--c); }
.pin-cabeza i svg { width: 16px; height: 16px; }
/* La punta que clava el marcador en el sitio exacto */
.pin-punta {
  width: 0; height: 0; margin-top: -1px;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 9px solid var(--c, var(--oro));
  filter: drop-shadow(0 3px 3px rgba(14, 3, 9, .45));
}
.pin:hover .pin-cabeza { transform: scale(1.08); }
.pin .cuenta { top: -4px; right: -6px; }

/* Concierto: el cartel, más grande y enmarcado en oro */
.pin.con-cartel .pin-cabeza {
  width: 52px; height: 52px; border-radius: 12px;
  box-shadow: 0 8px 18px rgba(14, 3, 9, .65), 0 0 0 2px var(--oro), 0 0 0 3.5px rgba(31, 7, 20, .8);
}
.pin.con-cartel .pin-punta { border-top-color: var(--oro); }
.pin-sello {
  position: absolute; top: 44px; left: 50%; transform: translateX(-50%);
  font-size: .56rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  padding: .05rem .38rem; border-radius: 999px; background: var(--oro); color: var(--selva);
  box-shadow: 0 2px 6px rgba(14, 3, 9, .5); pointer-events: none;
}
.pin.con-cartel::after {           /* un brillo que recorre el cartel de vez en cuando */
  content: ""; position: absolute; top: 0; left: 50%; width: 52px; height: 52px;
  transform: translateX(-50%); border-radius: 12px; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 249, 224, .55) 50%, transparent 65%) -60px 0 / 200% 100% no-repeat;
  animation: cartel-brillo 4.8s ease-in-out infinite;
}
@keyframes cartel-brillo { 0%, 62% { background-position: -60px 0; } 100% { background-position: 60px 0; } }

/* Hamburguesa de la ruta */
.pin.hamb .pin-cabeza {
  width: 34px; height: 34px; color: #fff3d6;
  background: radial-gradient(circle at 50% 35%, #d9642b, #8e2f12 75%);
  box-shadow: 0 6px 14px rgba(40, 8, 0, .55), 0 0 0 1.5px #ffd79a;
}
.pin.hamb .pin-cabeza svg { width: 24px; height: 24px; }
.pin.hamb .pin-punta { border-top-color: #d9642b; }
.pin.hamb .cuenta { background: #ffd79a; color: #5a1d06; }

/* Señalado: aro dorado y salto (el salto ya existía) */
.pin.activo .pin-cabeza {
  transform: scale(1.12);
  box-shadow: 0 8px 18px rgba(14, 3, 9, .6),
              0 0 0 2px rgba(31, 7, 20, .9),
              0 0 0 5px var(--oro),
              0 0 22px 5px rgba(243, 172, 46, .55);
}
.pin.provisional .pin-cabeza { outline: 2px dashed rgba(253, 252, 224, .8); outline-offset: 2px; }
.pin.provisional i { border: 0; }

/* ---------- la ficha: cartel, puesto ---------- */
.ficha-cartel {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  margin: .45rem 0 .5rem; padding: .35rem; border-radius: var(--r-s);
  background: rgba(243, 172, 46, .12); border: 1px solid rgba(243, 172, 46, .4);
  color: var(--crema); cursor: pointer; text-align: left; font: inherit;
  transition: background .2s ease;
}
.ficha-cartel:hover { background: rgba(243, 172, 46, .22); }
/* En la ficha del artista, el cartel de su concierto */
.art-cartel {
  display: flex; align-items: center; gap: .7rem; width: 100%; margin-top: .6rem;
  padding: .4rem; border-radius: var(--r-s); cursor: pointer; text-align: left; font: inherit;
  background: rgba(243, 172, 46, .12); border: 1px solid rgba(243, 172, 46, .4); color: var(--crema);
  transition: background .2s ease;
}
.art-cartel:hover { background: rgba(243, 172, 46, .22); }
.art-cartel img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: none; }
.art-cartel b { display: block; font-size: .88rem; color: var(--oro); }
.art-cartel small { font-size: .74rem; color: var(--viento); }
.art-tributo {
  display: inline-block; margin: .1rem 0 .15rem; padding: .08rem .5rem; border-radius: 999px;
  font-size: .72rem; font-weight: 800; background: rgba(243, 172, 46, .2); color: var(--oro);
}
.artista small { font-weight: 600; opacity: .75; }
.ficha-cartel img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex: none; }
.ficha-cartel b { display: block; font-size: .86rem; color: var(--oro); }
.ficha-cartel small { font-size: .72rem; color: var(--viento); }
.ficha-puesto {
  display: inline-block; font-size: .7rem; font-weight: 900; letter-spacing: .05em;
  padding: .05rem .45rem; border-radius: 999px; background: #ffd79a; color: #5a1d06; margin-right: .2rem;
}
.ficha.es-hamb { border-left-color: #e8793a; }
.ficha.es-hamb b { color: #ffd79a; }

/* ============================================================
   Selector del mapa: Recrearte / Ruta de la Hamburguesa
   ============================================================ */
.modo-mapa {
  position: relative; z-index: 2; flex: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin-bottom: clamp(.35rem, 1.6cqw, .6rem); padding: 3px;
  border-radius: 999px; background: rgba(14, 3, 9, .55);
  border: 1px solid rgba(243, 172, 46, .35);
  box-shadow: inset 0 2px 8px rgba(14, 3, 9, .5);
}
.modo-mapa[hidden] { display: none; }
.modo-mapa button {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .35rem;
  border: 0; background: none; cursor: pointer; font: inherit;
  font-size: clamp(.68rem, 2.1cqw, .86rem); font-weight: 800; letter-spacing: .01em;
  color: var(--viento); padding: .42rem .6rem; border-radius: 999px; white-space: nowrap;
  transition: color .3s ease;
}
.modo-mapa button.activo { color: var(--selva); }
.mm-icono {
  width: 1.35em; height: 1.35em; flex: none; display: grid; place-items: center;
  background: center / contain no-repeat;
}
.mm-icono svg { width: 100%; height: 100%; }
.mm-deslizador {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  border-radius: 999px; z-index: 0;
  background: linear-gradient(135deg, #ffda98, var(--oro) 55%, #cd8417);
  box-shadow: 0 4px 14px rgba(243, 172, 46, .45);
  transition: transform .5s cubic-bezier(.65, 0, .25, 1.25), background .5s ease, box-shadow .5s ease;
}
.modo-mapa[data-modo="hamburguesa"] .mm-deslizador {
  transform: translateX(100%);
  background: linear-gradient(135deg, #ffd79a, #ef8a3c 50%, #c2451b);
  box-shadow: 0 4px 16px rgba(239, 138, 60, .55);
}
.modo-mapa[data-modo="hamburguesa"] button.activo { color: #3d1403; }
.cara-mapa.en-ruta .mapa-cabeza h2 { color: #ffd79a; }

/* ============================================================
   El cambio de capa con fuego
   ------------------------------------------------------------
   Nueve lenguas de fuego suben desde abajo, tapan el mapa y
   siguen subiendo hasta irse; detrás quedan brasas flotando.
   Todo es CSS con transform y opacity: lo mueve la tarjeta
   gráfica y no traba el teléfono.
   ============================================================ */
.fuego {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden;
  --c1: #fff6c8; --c2: #ffb13b; --c3: #e8531e; --c4: rgba(120, 20, 0, .0);
}
.fuego.dorado { --c1: #ffda98; --c2: #f3ac2e; --c3: #aa136d; --c4: rgba(56, 9, 34, 0); --nucleo: rgba(255, 250, 225, .55); }
.fuego-base {
  position: absolute; left: -10%; right: -10%; bottom: -45%; height: 45%;
  background: radial-gradient(60% 100% at 50% 100%, var(--c2), var(--c3) 45%, transparent 75%);
  filter: blur(16px); opacity: .7;
}
.fuego.va .fuego-base { animation: fuego-base 1.8s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes fuego-base {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-170%); }
  65%  { transform: translateY(-190%); opacity: .95; }
  100% { transform: translateY(-300%); opacity: 0; }
}
.llama {
  position: absolute; left: var(--x); bottom: 0; width: var(--w); height: var(--h);
  transform: translate(-50%, 100%);
  border-radius: 50% 50% 42% 42% / 72% 72% 28% 28%;
  background:
    radial-gradient(38% 30% at 50% 78%, var(--nucleo, rgba(255, 253, 240, .8)), transparent 70%),
    radial-gradient(52% 62% at 50% 72%, var(--c1), var(--c2) 36%, var(--c3) 62%, var(--c4) 78%);
  filter: blur(3.5px) saturate(1.2); mix-blend-mode: screen; opacity: 0;
}
.llama::before {            /* la punta que se retuerce */
  content: ""; position: absolute; left: 22%; right: 22%; top: -14%; height: 40%;
  border-radius: 50% 50% 30% 30% / 80% 80% 20% 20%;
  background: radial-gradient(50% 70% at 50% 90%, var(--c2), var(--c3) 55%, transparent 75%);
  animation: punta .22s ease-in-out infinite alternate;
}
@keyframes punta { from { transform: skewX(-9deg) scaleY(.9); } to { transform: skewX(9deg) scaleY(1.12); } }
.fuego.va .llama { animation: llama 1.55s cubic-bezier(.3, .1, .2, 1) var(--d) forwards; }
@keyframes llama {
  0%   { transform: translate(-50%, 100%) scaleX(.7); opacity: 0; }
  10%  { opacity: 1; }
  38%  { transform: translate(-50%, 6%) scaleX(1.12) scaleY(1.04); opacity: 1; }
  50%  { transform: translate(-50%, -2%) scaleX(.94) scaleY(1.14); }
  62%  { transform: translate(-50%, -12%) scaleX(1.06) scaleY(1.08); opacity: .95; }
  100% { transform: translate(-50%, -140%) scaleX(.5) scaleY(1.35); opacity: 0; }
}
/* un velo de humo tibio que sigue a las llamas y se disuelve */
.fuego::after {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -80%; height: 80%;
  background: linear-gradient(to top, transparent, rgba(40, 12, 4, .35) 40%, transparent);
  filter: blur(14px); opacity: 0;
}
.fuego.dorado::after { background: linear-gradient(to top, transparent, rgba(38, 7, 24, .45) 40%, transparent); }
.fuego.va::after { animation: humo 1.8s ease-out .25s forwards; }
@keyframes humo {
  0% { transform: translateY(0); opacity: 0; } 40% { opacity: 1; }
  100% { transform: translateY(-260%); opacity: 0; }
}
.brasa {
  position: absolute; left: var(--x); bottom: -4px; width: var(--s); height: var(--s);
  border-radius: 50%; background: var(--c1);
  box-shadow: 0 0 6px 2px var(--c2); opacity: 0;
}
.fuego.va .brasa { animation: brasa 1.3s ease-out var(--d) forwards; }
@keyframes brasa {
  0%   { transform: translate(0, 0); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(var(--dx), -320px); opacity: 0; }
}
/* Mientras arde, el mapa se calienta: un tinte y un leve temblor */
.mapa-caja:has(.fuego.va) .tiles,
.mapa-caja:has(.fuego.va) .pines { animation: calor 1.2s ease-in-out; }
@keyframes calor {
  0%, 100% { filter: none; transform: none; }
  45% { filter: sepia(.5) saturate(1.6) brightness(1.15); transform: scale(1.015); }
}

/* ============================================================
   Visor de carteles de los conciertos
   ============================================================ */
.cartel-vista {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  opacity: 0; transition: opacity .3s ease; perspective: 1400px;
}
.cartel-vista.visible { opacity: 1; }
.cv-fondo {
  position: absolute; inset: 0; background: rgba(14, 3, 9, .82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.cv-marco {
  position: relative; margin: 0; width: min(92vw, 30rem, calc((100svh - 10rem) * .8));
  transform: rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) scale(.86) translateY(20px);
  transition: transform .5s cubic-bezier(.2, .9, .3, 1.1);
  transform-style: preserve-3d;
}
.cartel-vista.visible .cv-marco { transform: rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); }
.cv-marco img {
  display: block; width: 100%; height: auto; border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 0 2px var(--oro), 0 0 0 5px rgba(31, 7, 20, .8);
}
.cv-brillo {
  position: absolute; inset: 0; border-radius: 14px; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(40% 50% at var(--bx, 30%) 20%, rgba(255, 255, 255, .55), transparent 70%);
}
.cv-marco figcaption {
  position: relative; margin-top: .8rem; text-align: center; color: var(--crema);
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
}
.cv-marco figcaption b { font-family: var(--display); font-weight: 900; font-size: 1.15rem; color: var(--oro); }
.cv-marco figcaption small { font-size: .8rem; color: var(--viento); }
.cv-artistas { margin-top: .3rem; }
.cv-artistas .cartel { justify-content: center; }
.cv-cerrar {
  position: absolute; top: max(1rem, env(safe-area-inset-top)); right: 1rem; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(243, 172, 46, .5);
  background: rgba(31, 7, 20, .85); color: var(--crema); display: grid; place-items: center; cursor: pointer;
}
.cv-cerrar:hover { background: var(--oro); color: var(--selva); }

@media (prefers-reduced-motion: reduce) {
  .pin, .pin.con-cartel::after { animation: none; }
  .mm-deslizador, .cv-marco { transition: none; }
}
.pin-cabeza i { transform: none; box-shadow: none; }

/* ============================================================
   La puerta del pasaporte: pregunta, entrar, registrarse
   ============================================================ */
.pp-forma { position: relative; width: min(100%, 36rem); }
.pp-vista { display: none; flex-direction: column; gap: .8rem; }
.pp-forma[data-vista="pregunta"] .pp-v-pregunta,
.pp-forma[data-vista="entrar"] .pp-v-entrar,
.pp-forma[data-vista="registro"] .pp-v-registro { display: flex; animation: vista-entra .35s ease both; }
@keyframes vista-entra { from { opacity: 0; transform: translateY(8px); } }
.pp-forma[data-vista="pregunta"], .pp-forma[data-vista="entrar"] { width: min(100%, 28rem); }

/* Los dos caminos: tarjetas grandes, fáciles de tocar */
.pp-camino {
  display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left;
  padding: .9rem 1rem; border-radius: var(--r-m); cursor: pointer; font: inherit;
  color: var(--luz); background: rgba(14, 3, 9, .38);
  border: 1px solid rgba(243, 172, 46, .35);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.pp-camino:hover, .pp-camino:focus-visible {
  transform: translateY(-2px); border-color: var(--oro); background: rgba(243, 172, 46, .1); outline: none;
}
.pp-camino.nuevo { background: linear-gradient(135deg, rgba(243, 172, 46, .18), rgba(14, 3, 9, .35)); }
.pp-camino-icono {
  flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--oro); color: var(--selva); box-shadow: 0 6px 16px rgba(243, 172, 46, .3);
}
.pp-camino-icono svg { width: 24px; height: 24px; }
.pp-camino b { display: block; font-size: 1rem; }
.pp-camino small { display: block; font-size: .8rem; color: var(--texto-2); margin-top: .1rem; }

.pp-boton.ancho { width: 100%; padding: .75rem 1.2rem; font-size: .95rem; }
.pp-boton:disabled { opacity: .7; cursor: progress; transform: none; }
.pp-cambio { margin: 0; text-align: center; font-size: .8rem; color: var(--texto-2); }
.pp-cambio button, .pp-error-accion {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 800;
  color: var(--oro); text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
}
.pp-error-accion { display: block; margin-top: .35rem; color: #ffe2b0; }
.pp-puerta-cerrar {
  position: absolute; top: .6rem; right: .6rem; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--texto);
  background: rgba(14, 3, 9, .5); border: 1px solid rgba(226, 197, 211, .22);
}
.pp-puerta-cerrar:hover { background: var(--oro); color: var(--selva); }
.pp-forma-cabeza { padding-right: 2rem; }

/* El registro, por grupos */
.pp-grupo { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: .55rem; }
.pp-grupo legend {
  padding: 0 0 .3rem; margin-bottom: .1rem; width: 100%;
  font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  color: var(--oro); border-bottom: 1px solid rgba(243, 172, 46, .25);
}
.pp-grupo legend i { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--texto-2); }
.pp-ayuda { margin: 0; font-size: .8rem; color: var(--texto-2); }

/* Las cuatro medallas de los elementos, para escoger */
.pp-elementos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.pp-el {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .6rem .3rem .55rem; border-radius: var(--r-s); cursor: pointer; text-align: center;
  background: rgba(14, 3, 9, .35); border: 1.5px solid rgba(226, 197, 211, .18);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.pp-el:hover { transform: translateY(-2px); }
.pp-el input { position: absolute; opacity: 0; pointer-events: none; }
.pp-el-medalla {
  width: clamp(40px, 11vw, 56px); aspect-ratio: 1; border-radius: 50%;
  background: center / contain no-repeat; transition: transform .3s cubic-bezier(.2, .9, .3, 1.4), filter .3s ease;
  filter: grayscale(.5) brightness(.85);
}
.pp-el-texto { display: flex; flex-direction: column; align-items: inherit; gap: .1rem; }
.pp-el b { font-size: .82rem; color: var(--luz); }
.pp-el small { font-size: .62rem; line-height: 1.2; color: var(--texto-2); }
.pp-el:has(input:checked) {
  border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, rgba(14, 3, 9, .5));
  box-shadow: 0 0 0 1px var(--c), 0 8px 20px color-mix(in srgb, var(--c) 30%, transparent);
}
.pp-el:has(input:checked) .pp-el-medalla { transform: scale(1.12) rotate(-6deg); filter: none; }
.pp-el:has(input:focus-visible) { outline: 2px solid var(--oro); outline-offset: 2px; }

/* El elemento en la página de datos, con su medallita */
.pp-el-mini {
  display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.25em; margin-right: .3em;
  background: center / contain no-repeat; border-radius: 50%;
}

/* Botones de dos en fila (confirmar / cancelar) */
.pp-dos { display: flex; gap: .6rem; width: 100%; justify-content: center; flex-wrap: wrap; }
.pp-dos .pp-boton { flex: 1 1 8rem; }
.pp-boton.claro { color: var(--luz); background: rgba(253, 252, 224, .1); border: 1px solid rgba(226, 197, 211, .3); }
.pp-salir-sesion { color: #b4331f; }

/* ---------- La pregunta del menú ---------- */
.menu-pregunta .pp-tarjeta { width: min(100%, 27rem); gap: .8rem; }
.mp-escudo {
  width: 140px; aspect-ratio: 2.6; background: center / contain no-repeat; opacity: .95;
}
.mp-caminos { display: flex; flex-direction: column; gap: .6rem; width: 100%; margin-top: .2rem; }

/* El mando de cerrar pasaporte, junto al de volver al menú */
#sesion[hidden] { display: none; }
#sesion span { white-space: nowrap; }
@media (max-width: 380px) { #sesion span { display: none; } #sesion { padding: .42rem .55rem; } }

@media (max-width: 520px) {
  .pp-elementos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-el { flex-direction: row; text-align: left; gap: .5rem; padding: .5rem .55rem; }
  .pp-el-medalla { width: 38px; flex: none; }
  .pp-el-texto { display: flex; flex-direction: column; }
}

/* ============================================================
   Todo el contenido a la vista, con el pie y la firma siempre abajo
   ------------------------------------------------------------
   En la agenda y el pasaporte del celular el pie se vuelve una sola
   línea (logos y firma), y con el celular acostado el inicio se
   compacta para que quepa entero sin desplazarse.
   ============================================================ */
@media (max-width: 720px), (max-height: 560px) {
  body.inmersivo #pie { padding: .28rem .8rem calc(.28rem + env(safe-area-inset-bottom)); }
  body.inmersivo #pie .pie-datos { display: none; }
  body.inmersivo #pie .pie { flex-wrap: nowrap; justify-content: space-between; gap: .6rem; }
  body.inmersivo #pie .pie-logo { height: 20px; }
  body.inmersivo #pie .pie-credito { flex-wrap: nowrap; white-space: nowrap; font-size: .64rem; }
}
@media (max-width: 480px) {
  body.inmersivo #pie .pie-por { display: none; }
  body.inmersivo #pie .pie-logo { height: 18px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  #pie .pie-contacto, #pie .pie-larga { display: none; }
  #pie { padding-top: .3rem; padding-bottom: calc(.3rem + env(safe-area-inset-bottom)); }
  .inicio.activa { padding: .5rem 1rem; }
  .inicio-centro { gap: .25rem; width: min(100%, 44rem); }
  .inicio-marca { width: min(38%, 12rem); }
  .inicio-logo { padding: .4rem 1rem; }
  .inicio-fechas { font-size: .68rem; }
  .inicio-pregunta { font-size: 1.3rem; margin-top: .15rem; }
  .inicio-opciones { grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .35rem; }
  .opcion { padding: .6rem .9rem; gap: .2rem; }
  .opcion b { font-size: 1.1rem; }
  .opcion small { display: none; }
}
#pp-forma button[type=submit]:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }

/* En el computador el botón «Menú» y la tira de días comparten la primera
   franja: la tira va centrada y deja libre la esquina del botón. */
@media (min-width: 1000px), (max-height: 560px) and (orientation: landscape) {
  .libro.activa { padding-top: .5rem; }
  .libro.activa > .antes-album { padding: 0 6.5rem; }
}

/* ---------- Completa tus datos (caracterización) ---------- */
.pp-completar { z-index: 45; }
.pp-forma[data-vista="completar"] .pp-v-completar { display: flex; animation: vista-entra .35s ease both; }
.pp-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.pp-chip { position: relative; cursor: pointer; }
.pp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pp-chip span {
  display: inline-block; padding: .38rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
  border: 1px solid rgba(243, 172, 46, .35); background: rgba(31, 7, 20, .55); color: var(--texto);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pp-chip:hover span { border-color: var(--oro); }
.pp-chip input:checked + span { background: var(--oro); color: var(--selva); border-color: var(--oro); }
.pp-chip input:focus-visible + span { outline: 2px solid var(--oro-suave); outline-offset: 2px; }
.pp-legal { margin: 0; font-size: .72rem; line-height: 1.45; color: var(--texto-2); }
/* Las puertas del pasaporte (entrar, registro, completar) empiezan debajo
   de los botones «Menú» y «Cerrar pasaporte», que flotan arriba */
.pp-puerta { padding-top: max(1rem, var(--h-mandos, 0px)); }
.pp-puerta .pp-forma { max-height: calc(100% - .5rem); }

/* ============================================================
   Conoce a los ganadores · las dos últimas páginas de la agenda
   ============================================================ */
/* En la tira de días, el atajo dorado al final */
.dia-btn.ganadores-btn { border-color: rgba(243, 172, 46, .7); color: var(--oro-suave);
  background: linear-gradient(160deg, rgba(243, 172, 46, .22), rgba(69, 16, 44, .5)); }
.ganadores-btn .gb-icono { display: block; width: 1.35rem; height: 1.35rem; margin: .05rem auto .12rem; }
.ganadores-btn .gb-icono svg { width: 100%; height: 100%; }
.ganadores-btn small { letter-spacing: .06em; }
.dia-btn.ganadores-btn[aria-current="true"] { color: var(--selva); background: var(--oro); border-color: var(--oro); }
.dia-btn.ganadores-btn:hover:not([aria-current="true"]) { background: rgba(243, 172, 46, .3); }

/* Índice: el mismo aire de las páginas de actividades */
.gan-sello {
  flex: none; width: clamp(34px, 10cqw, 52px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: clamp(.3rem, 1.6cqw, .6rem);
  color: var(--selva); background: radial-gradient(circle at 35% 30%, #fbeaa6, var(--oro) 62%, #cf8008);
  box-shadow: 0 0 0 3px rgba(243, 172, 46, .25), 0 6px 18px rgba(14, 3, 9, .5);
}
.gan-sello svg { width: 58%; height: 58%; }
.gan-h .nombre { display: block; font-size: .5em; letter-spacing: .12em; color: var(--oro-suave); margin-bottom: .1em; }
.gan-h .num { color: var(--luz); }
.gan-item { grid-template-columns: minmax(0, 1fr) auto; }
.gan-cat {
  display: inline-block; vertical-align: .12em; margin-left: .25rem; padding: .05rem .5rem; border-radius: 999px;
  font-style: normal; font-weight: 800; font-size: .62em; letter-spacing: .06em; text-transform: uppercase;
  color: var(--selva); background: color-mix(in srgb, var(--c, var(--agua)) 70%, var(--crema));
}
.gan-estado { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; min-width: 0; max-width: 42cqw; }
.gan-oro {
  flex: none; width: 1.45em; height: 1.45em; border-radius: 50%; display: grid; place-items: center;
  font: 900 .8em/1 var(--display); color: #422500;
  background: radial-gradient(circle at 35% 30%, #fbeaa6, var(--oro) 65%, #cf8008);
  box-shadow: 0 2px 6px rgba(14, 3, 9, .45);
}
.gan-quien {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 700; color: var(--oro-suave); font-size: clamp(.78rem, 2.2cqw, .98rem);
}
.gan-pendiente {
  padding: .12rem .55rem; border-radius: 999px; white-space: nowrap;
  font-size: clamp(.68rem, 1.9cqw, .8rem); font-weight: 700; color: var(--texto-2);
  border: 1px dashed rgba(243, 172, 46, .35);
}
.gan-item.activo { background: rgba(243, 172, 46, .16); box-shadow: inset 3px 0 0 var(--oro); }
.gan-item.publicada h3 { color: var(--crema); }

/* En las actividades de la agenda: el acceso al podio */
.ev-podio {
  display: inline-flex; align-items: center; gap: .25rem; margin-top: .25rem; padding: .12rem .55rem .12rem .4rem;
  border-radius: 999px; border: 1px solid rgba(243, 172, 46, .7); cursor: pointer;
  font: 800 clamp(.64rem, 1.8cqw, .76rem) var(--body); letter-spacing: .02em; color: var(--selva);
  background: linear-gradient(135deg, #ffd591, var(--oro));
}
.ev-podio svg { width: 1.15em; height: 1.15em; }
.ev-podio:hover { filter: brightness(1.06); }
.evento.destacado .ev-podio { border-color: var(--crema); }

/* La página del podio */
.gan-podio-caja {
  flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: .2rem .1rem 0;
}
.gan-volver {
  display: none; align-self: flex-start; align-items: center; gap: .3rem; margin-bottom: .5rem;
  padding: .3rem .7rem .3rem .45rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(243, 172, 46, .45); background: rgba(31, 7, 20, .55); color: var(--oro-suave);
  font: 700 .78rem var(--body);  white-space: nowrap;
}
#album.sencillo .gan-volver { display: inline-flex; }
.gan-ceja {
  margin: 0; font-size: clamp(.66rem, 2cqw, .8rem); font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--oro);
}
.gan-titulo {
  margin: .15rem 0 .35rem; font-family: var(--display); font-weight: 800; line-height: 1.08;
  font-size: clamp(1.25rem, 5.4cqw, 2.3rem); color: var(--luz); text-shadow: 0 3px 16px rgba(14, 3, 9, .55);
}
.gan-titulo .gan-cat { font-family: var(--body); font-size: .42em; vertical-align: .35em; }
.gan-fechas { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; margin-bottom: .4rem; }
.gan-fechas button {
  padding: .14rem .55rem; border-radius: 999px; cursor: pointer; text-transform: capitalize;
  border: 1px solid rgba(243, 172, 46, .35); background: rgba(69, 16, 44, .5); color: var(--luz);
  font: 700 clamp(.66rem, 1.9cqw, .78rem) var(--body);
}
.gan-fechas button:hover { border-color: var(--oro); background: rgba(243, 172, 46, .18); }

.gan-podio {
  list-style: none; margin: auto 0; padding: .4rem 0 0; width: min(100%, 560px);
  display: grid; grid-template-columns: 1fr 1.12fr 1fr; grid-template-areas: "dos uno tres";
  gap: clamp(.3rem, 1.6cqw, .7rem); align-items: end;
}
.gan-puesto { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.gan-puesto.p1 { grid-area: uno; } .gan-puesto.p2 { grid-area: dos; } .gan-puesto.p3 { grid-area: tres; }
.gan-gente { display: grid; gap: .35rem; margin-bottom: .4rem; justify-items: center; }
.gan-persona, .gan-equipo { display: grid; justify-items: center; gap: .12rem; min-width: 0; max-width: 100%; }
.gan-ficha {
  width: clamp(34px, 11cqw, 58px); aspect-ratio: 1; border-radius: 50%;
  background: var(--img) center / 72% no-repeat, radial-gradient(circle, rgba(31, 7, 20, .85), rgba(31, 7, 20, .55));
  box-shadow: 0 0 0 2px var(--anillo, rgba(243, 172, 46, .8)), 0 6px 16px rgba(14, 3, 9, .5);
}
.p1 .gan-ficha { width: clamp(42px, 14cqw, 72px); --anillo: var(--oro); }
.p2 .gan-ficha { --anillo: #e1d8dc; } .p3 .gan-ficha { --anillo: #d9a06a; }
.gan-persona b, .gan-equipo small {
  font-weight: 800; line-height: 1.15; color: var(--luz); overflow-wrap: anywhere;
  font-size: clamp(.74rem, 2.5cqw, 1.02rem);
}
.p1 .gan-persona b { font-size: clamp(.82rem, 2.9cqw, 1.16rem); color: var(--crema); }
.gan-equipo-nombre { font-family: var(--display); font-weight: 800; color: var(--oro-suave); line-height: 1.1;
  font-size: clamp(.86rem, 3cqw, 1.25rem); overflow-wrap: anywhere; }
.gan-equipo small { font-weight: 600; font-size: clamp(.64rem, 2cqw, .82rem); color: var(--texto-2); }
.gan-marca {
  font-style: normal; font-weight: 800; font-size: clamp(.64rem, 1.9cqw, .78rem); color: var(--selva);
  padding: .04rem .45rem; border-radius: 999px; background: var(--oro-suave);
}
.gan-libre {
  display: block; width: 100%; padding: .5rem .2rem; border-radius: 12px;
  font-size: clamp(.64rem, 1.9cqw, .78rem); font-weight: 700; color: var(--texto-2);
  border: 1.5px dashed rgba(243, 172, 46, .35);
}
.gan-escalon {
  display: grid; place-items: center; align-content: center; border-radius: 12px 12px 3px 3px;
  box-shadow: inset 0 -.4rem 0 rgba(0, 0, 0, .14), 0 10px 24px rgba(14, 3, 9, .35);
  transform-origin: bottom center;
}
.gan-escalon b { font: 900 clamp(1.4rem, 6cqw, 2.6rem)/1 var(--display); }
.gan-escalon small { font-weight: 800; font-size: clamp(.56rem, 1.7cqw, .72rem); letter-spacing: .1em; text-transform: uppercase; }
.p1 .gan-escalon { height: clamp(62px, 21cqw, 128px); color: #422500;
  background: linear-gradient(180deg, #fbeaa6, var(--oro) 55%, #cf8008); }
.p2 .gan-escalon { height: clamp(46px, 15cqw, 94px); color: #2a2025;
  background: linear-gradient(180deg, #f7f2f4, #b9c4c0 60%, #8c9a96); }
.p3 .gan-escalon { height: clamp(34px, 11cqw, 70px); color: #3f230b;
  background: linear-gradient(180deg, #f5d5b1, #d49a61 60%, #a8683a); }
.gan-podio:not(.con-ganadores) .gan-escalon { opacity: .55; filter: saturate(.5); }
.gan-nota { margin: .6rem 0 0; max-width: 30rem; font-size: clamp(.68rem, 2cqw, .84rem); font-weight: 600; color: var(--oro-suave); }
.gan-trofeo + .gan-podio { margin-top: 0; }
.gan-trofeo {
  flex: 1 1 auto; min-height: 0; display: grid; place-items: center; width: 100%;
  color: rgba(243, 172, 46, .22);
}
.gan-trofeo svg { width: clamp(48px, 22cqw, 150px); height: auto; max-height: 100%; }
.gan-vacio { margin: auto; display: grid; justify-items: center; gap: .6rem; color: var(--oro-suave); }
.gan-vacio svg { width: 48px; height: 48px; }

/* Cuando aparece un podio publicado: suben los escalones y luego la gente */
.gan-podio.entrando .gan-escalon { animation: escalon-sube .7s cubic-bezier(.2, .9, .3, 1.1) both; }
.gan-podio.entrando .p2 .gan-escalon { animation-delay: .12s; }
.gan-podio.entrando .p3 .gan-escalon { animation-delay: .22s; }
.gan-podio.entrando .gan-gente { animation: gente-llega .55s ease both .5s; }
.gan-podio.entrando .p1 .gan-gente { animation-delay: .75s; }
@keyframes escalon-sube { from { transform: scaleY(.1); } to { transform: none; } }
@keyframes gente-llega { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }

/* Celular acostado: la hoja es bajita y ancha. El título va a la izquierda
   y el podio a la derecha, para que quepa sin desplazarse */
@media (max-height: 560px) and (orientation: landscape) {
  #album.sencillo .gan-podio-caja {
    display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    grid-auto-rows: min-content; align-content: center; column-gap: 1rem; text-align: left;
  }
  #album.sencillo .gan-podio-caja > * { grid-column: 1; justify-self: start; }
  #album.sencillo .gan-podio-caja > .gan-podio { grid-column: 2; grid-row: 1 / span 6; align-self: center; margin: 0; }
  #album.sencillo .gan-podio-caja > .gan-trofeo { display: none; }
  #album.sencillo .gan-fechas { justify-content: flex-start; }
  #album.sencillo .ganadores-podio .pagina-logos { display: none; }
  .gan-titulo { font-size: clamp(1rem, 3.2cqw, 1.5rem); margin-bottom: .2rem; }
  .gan-podio { width: min(100%, 460px); }
  .p1 .gan-escalon { height: 54px; } .p2 .gan-escalon { height: 40px; } .p3 .gan-escalon { height: 30px; }
  .gan-escalon small { display: none; }
  .gan-ficha, .p1 .gan-ficha { width: 32px; }
  .gan-sello { display: none; }
}


/* ============================================================
   Festival de las Flores · lo propio de esta edición
   ============================================================ */
/* Los dos días del Pre Festival: en verde lima, como en el afiche */
.dia-btn.pre { border-color: rgba(155, 210, 26, .55); }
.dia-btn.pre .pre-marca {
  display: block; margin: .12rem auto 0; padding: 0 .3rem; border-radius: 4px; width: max-content;
  font-size: .5rem; font-weight: 900; letter-spacing: .12em; color: #1b0911; background: #9bd21a;
}
.dia-cinta {
  flex: none; align-self: flex-start; margin: -.2rem 0 .5rem; padding: .12rem .7rem; border-radius: 999px;
  font-size: clamp(.7rem, 2cqw, .84rem); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #1b0911; background: linear-gradient(90deg, #b6e63a, #7fbf10);
}
/* La portada es el afiche: llena la tapa sin deformarse */
.tapa-afiche {
  position: absolute; inset: 0; z-index: 1;
  background: center 40% / cover no-repeat;
}