/* ============================================================ fuentes */
@font-face { font-family: "Great Vibes"; src: url("../fonts/great-vibes-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: italic; src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: italic; src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-style: normal; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cinzel"; font-weight: 400; src: url("../fonts/cinzel-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cinzel"; font-weight: 600; src: url("../fonts/cinzel-latin-600-normal.woff2") format("woff2"); font-display: swap; }

/* ============================================================ base */
:root {
  --noche: #14143f;
  --lila: #b9a6f5;
  --lila-osc: #6f55c4;
  --tinta: #4a3a7a;
  --oro: #e3b85b;
  --oro-claro: #fff0b8;
  --oro-osc: #9c6b1e;
  --crema: #fbf4e6;
  --oro-grad: linear-gradient(135deg, #fff0b8 0%, #e3b85b 38%, #9c6b1e 68%, #f3d58a 100%);
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --caps: "Cinzel", "Cormorant Garamond", Georgia, serif;
  --script: "Great Vibes", "Brush Script MT", cursive;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100svh; background: var(--noche); color: #fff;
  font-family: var(--serif); font-weight: 500; font-size: 1.2rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.bloqueado { overflow: hidden; height: 100svh; }
img { max-width: 100%; display: block; }
h1, h2, p, figure, blockquote, ol { margin: 0; }
.script { font-family: var(--script); font-weight: 400; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 3px; }
[hidden] { display: none !important; }
.sin-js { position: fixed; inset: auto 0 20px; text-align: center; }

/* ============================================================ escena fija */
#escena { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--noche); contain: strict; }
/* Cielo de relleno: empalma con el borde superior de la foto (#0f1f3f en vertical, #0a1c3e en escritorio). */
.cielo { position: absolute; inset: 0; background: linear-gradient(180deg, #03061c 0%, #08123a 28%, #0f1f3f 52%, #0f1f3f 100%); }
#estrellas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Paisaje fotográfico (torre, luna y cascada). En móvil se ancla abajo y su borde superior se funde con el cielo;
   en pantallas apaisadas cubre toda la ventana. */
.paisaje {
  position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 780 / 941;
  background: url("../img/escena-vertical.jpg") left bottom / 100% 100% no-repeat; filter: brightness(.86) saturate(1.05);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%); mask-image: linear-gradient(to bottom, transparent 0, #000 26%);
}
/* Móviles altos y estrechos (relación < 0,59): la foto vertical se agranda hasta el 72 % de la altura para que quepan la
   torre y la luna a la vez, y se desplaza un poco a la izquierda para dejar aire a la luna en el borde derecho. */
@media (max-aspect-ratio: 59/100) {
  .paisaje { aspect-ratio: auto; height: 72vh; background-size: auto 100%; background-position: -16px bottom; }
}
@media (min-aspect-ratio: 1/1) {
  .paisaje { top: 0; aspect-ratio: auto; background: url("../img/escena.jpg") 12% center / cover no-repeat; -webkit-mask-image: none; mask-image: none; }
  .cielo { background: #0a1c3e; }
}

#faroles, #mariposas { position: absolute; inset: 0; pointer-events: none; }
.farol {
  position: absolute; left: var(--x); bottom: -24vh; width: var(--w); opacity: var(--o);
  animation: subir var(--d) linear var(--r) infinite; will-change: transform;
}
@keyframes subir {
  0%   { transform: translate3d(0, 0, 0) rotate(-2deg); }
  50%  { transform: translate3d(var(--sway), -78vh, 0) rotate(2deg); }
  100% { transform: translate3d(0, -156vh, 0) rotate(-2deg); }
}

/* Huevo de Pascua (huevo.js): el farolillo que se prende fuego y cae es una copia del que sustituye, colocada a mano. */
.farol-cae { left: 0; top: 0; bottom: auto; animation: none; will-change: transform, opacity; }
.ascua { position: absolute; left: 0; top: 0; width: 3px; height: 3px; border-radius: 50%; background: #ffc46a; box-shadow: 0 0 5px 1px rgba(255, 130, 30, .95); opacity: 0; pointer-events: none; }
/* Las llamas se dibujan sobre la mitad alta del papel; cada lengua parpadea a su ritmo. Los tamaños son porcentajes del farolillo. */
.fuego { position: absolute; left: 50%; top: -26%; width: 88%; height: 74%; translate: -50% 0; transform-origin: 50% 100%; opacity: 0; pointer-events: none; filter: drop-shadow(0 0 3px rgba(255, 80, 20, .9)); }
.lengua {
  position: absolute; bottom: 0; width: 48%; height: 100%; border-radius: 50% 50% 46% 46% / 72% 72% 28% 28%; transform-origin: 50% 100%; filter: blur(.4px);
  background: radial-gradient(ellipse at 50% 84%, #fff6c8 0 14%, #ffd04a 34%, #ff8a1f 60%, rgba(214, 52, 10, .85) 82%, rgba(214, 52, 10, 0) 100%);
  animation: llamear .22s ease-in-out infinite alternate;
}
.lengua.l1 { left: -3%; height: 68%; rotate: -19deg; animation-delay: -.07s; }
.lengua.l2 { left: 26%; animation-duration: .27s; }
.lengua.l3 { right: -3%; height: 58%; rotate: 21deg; animation-delay: -.13s; animation-duration: .19s; }
@keyframes llamear { from { scale: .8 .86; translate: -6% 0; } to { scale: 1.1 1.22; translate: 6% -8%; } }
.humo { position: absolute; left: 50%; top: 0; width: 70%; aspect-ratio: 1; translate: -50% -30%; border-radius: 50%; opacity: 0; pointer-events: none; background: radial-gradient(circle, rgba(78, 64, 100, .75), rgba(78, 64, 100, 0) 70%); }

/* --- Farolillo vivo (estructura creada por faroles.js) ---
   .farol-giro  cuelga y se balancea (como si girara sobre sí mismo)
   .farol-halo  resplandor que ilumina el entorno    .farol-luz  luz interior del papel
   .chispa      brasas que suben
   Cada farolillo recibe al azar un MODO de luz (clases m-firme, m-respira, m-titila, m-racha, m-vela) con su propio
   ritmo y profundidad, y lo cambia cada vez que vuelve a subir desde abajo. No hay llama visible: solo luz. */
.farol-giro { position: relative; transform-origin: 50% 8%; animation: balanceo var(--g, 6s) ease-in-out var(--gd, 0s) infinite alternate; }
@keyframes balanceo { from { transform: rotate(-3.5deg) scaleX(.82); } to { transform: rotate(3.5deg) scaleX(1); } }
.farol-cuerpo { display: block; position: relative; width: 100%; height: auto; filter: drop-shadow(0 0 5px rgba(255, 160, 60, .45)); }

.farol-halo {
  --k: 1; position: absolute; left: 50%; top: 52%; width: 300%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 200, 100, .62), rgba(255, 150, 50, .26) 44%, rgba(255, 130, 40, 0) 72%);
}
.farol-luz {
  --k: 1.37; position: absolute; left: 11%; right: 11%; top: 16%; bottom: 7%; pointer-events: none; mix-blend-mode: screen;
  border-radius: 46% 46% 42% 42% / 36% 36% 30% 30%;
  background: radial-gradient(ellipse at 50% 90%, rgba(255, 244, 190, .9) 0%, rgba(255, 205, 110, .38) 44%, rgba(255, 170, 70, 0) 76%);
}
/* El halo y la luz interior comparten los mismos modos pero con distinto ritmo (--k), así nunca laten a la vez. */
.farol-halo, .farol-luz { animation: ilum-vela calc(var(--f, .7s) * 3.4 * var(--k)) linear calc(var(--fd, 0s) * var(--k)) infinite; }
.m-firme :is(.farol-halo, .farol-luz)   { animation-name: ilum-firme;   animation-duration: calc(var(--f) * 9 * var(--k));   animation-timing-function: ease-in-out; animation-direction: alternate; }
.m-respira :is(.farol-halo, .farol-luz) { animation-name: ilum-respira; animation-duration: calc(var(--f) * 6 * var(--k));   animation-timing-function: ease-in-out; animation-direction: alternate; }
.m-titila :is(.farol-halo, .farol-luz)  { animation-name: ilum-titila;  animation-duration: calc(var(--f) * 2.4 * var(--k)); animation-timing-function: linear;      animation-direction: normal; }
.m-racha :is(.farol-halo, .farol-luz)   { animation-name: ilum-racha;   animation-duration: calc(var(--f) * 14 * var(--k));  animation-timing-function: ease-in-out; animation-direction: normal; }
.m-vela :is(.farol-halo, .farol-luz)    { animation-name: ilum-vela;    animation-duration: calc(var(--f) * 3.4 * var(--k));  animation-timing-function: linear;      animation-direction: normal; }

@keyframes ilum-firme   { from { opacity: .88; scale: 1; } to { opacity: 1; scale: 1.03; } }
@keyframes ilum-respira { from { opacity: var(--min, .6); scale: .93; } to { opacity: 1; scale: 1.08; } }
@keyframes ilum-titila {
  0% { opacity: 1; scale: 1; } 11% { opacity: .8; scale: .98; } 24% { opacity: .96; scale: 1.01; } 39% { opacity: var(--min, .6); scale: .96; }
  53% { opacity: .92; scale: 1.02; } 68% { opacity: .72; scale: .97; } 82% { opacity: 1; scale: 1.03; } 100% { opacity: .86; scale: 1; }
}
@keyframes ilum-racha { /* casi siempre firme y, de vez en cuando, una ráfaga de viento la apaga a medias y se recupera */
  0%, 60% { opacity: 1; scale: 1.02; } 66% { opacity: var(--min, .45); scale: .9; } 72% { opacity: .92; scale: 1; }
  78% { opacity: calc(var(--min, .45) + .15); scale: .93; } 88%, 100% { opacity: 1; scale: 1.02; }
}
@keyframes ilum-vela {
  0% { opacity: .9; scale: 1; } 16% { opacity: 1; scale: 1.04; } 33% { opacity: .7; scale: .96; } 47% { opacity: .97; scale: 1.02; }
  63% { opacity: var(--min, .6); scale: .95; } 81% { opacity: 1; scale: 1.05; } 100% { opacity: .88; scale: 1; }
}

.chispa {
  position: absolute; left: 50%; bottom: 3%; width: 3px; height: 3px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: #ffd98a; box-shadow: 0 0 5px 1px rgba(255, 165, 55, .95);
  animation: chispa var(--c, 3s) ease-out var(--cd, 0s) infinite;
}
@keyframes chispa {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(var(--dx, 8px), var(--dy, -70px)) scale(.15); opacity: 0; }
}

/* Profundidad de campo: los lejanos se apagan y se enfrían un poco; los muy cercanos salen como destellos desenfocados. */
.lejos .farol-cuerpo { filter: blur(1.2px) saturate(.8) brightness(.82); }
.cerca .farol-cuerpo { filter: blur(2.6px) drop-shadow(0 0 8px rgba(255, 170, 70, .6)); }
.cerca .chispa { filter: blur(1.6px); }

.vuelo { position: absolute; width: var(--w); left: 0; top: 0; animation: var(--ruta) var(--d) ease-in-out var(--r) infinite; will-change: transform; }
.vuelo img { width: 100%; animation: aleteo .5s ease-in-out infinite alternate; transform-origin: 50% 60%; }
@keyframes aleteo { from { transform: scaleX(1); } to { transform: scaleX(.28); } }
@keyframes ruta-a {
  0%   { transform: translate3d(-15vw, 78vh, 0) rotate(20deg); }
  25%  { transform: translate3d(30vw, 52vh, 0) rotate(-10deg); }
  50%  { transform: translate3d(70vw, 60vh, 0) rotate(25deg); }
  75%  { transform: translate3d(95vw, 30vh, 0) rotate(-15deg); }
  100% { transform: translate3d(118vw, 18vh, 0) rotate(10deg); }
}
@keyframes ruta-b {
  0%   { transform: translate3d(112vw, 20vh, 0) rotate(-20deg) scaleX(-1); }
  30%  { transform: translate3d(70vw, 36vh, 0) rotate(10deg) scaleX(-1); }
  60%  { transform: translate3d(32vw, 24vh, 0) rotate(-14deg) scaleX(-1); }
  100% { transform: translate3d(-18vw, 56vh, 0) rotate(12deg) scaleX(-1); }
}

/* ============================================================ botón de música */
.btn-musica {
  position: fixed; z-index: 30; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 46px; height: 46px; padding: 11px;
  border-radius: 50%; border: 1px solid rgba(255,240,184,.55); background: rgba(30,20,90,.55); color: var(--oro-claro);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; transition: transform .2s, background .2s;
}
.btn-musica:hover { transform: scale(1.08); background: rgba(60,40,140,.7); }
.btn-musica svg { width: 100%; height: 100%; display: block; }
.btn-musica[aria-pressed="true"] { box-shadow: 0 0 18px rgba(255,220,140,.55); }

/* ============================================================ portada: libro */
.portada {
  position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(18px, 4vh, 34px); padding: 20px; text-align: center; transition: opacity 1.2s ease, visibility 1.2s;
}
.portada.fin { opacity: 0; visibility: hidden; pointer-events: none; }
.portada-frase { font-family: var(--caps); font-size: clamp(.82rem, 3.6vw, 1.05rem); letter-spacing: .16em; text-transform: uppercase; line-height: 1.7; color: #fff; text-shadow: 0 2px 14px rgba(20,10,70,.9); }
.portada-toca { font-style: italic; font-size: 1.1rem; color: var(--oro-claro); text-shadow: 0 2px 10px rgba(20,10,70,.9); animation: latido 2.4s ease-in-out infinite; transition: opacity .5s; }
.portada.abierto .portada-toca, .portada.abierto .portada-frase { opacity: 0; }
@keyframes latido { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.escenario-libro { --W: min(66vw, 290px); position: relative; width: var(--W); aspect-ratio: 5 / 7; perspective: 1400px; }
/* Móviles altos: la frase arriba y el libro abajo, para dejar a la vista la luna y la punta de la torre del fondo. */
@media (max-aspect-ratio: 59/100) {
  .portada { justify-content: flex-start; padding: 11vh 20px 4vh; }
  .escenario-libro { margin-top: auto; }
}
.libro {
  position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; transform-style: preserve-3d;
  transform: rotateY(-8deg) rotateX(3deg); transition: transform 1.8s cubic-bezier(.5, 0, .2, 1); font: inherit; color: inherit;
}
.libro:hover { transform: rotateY(-2deg) rotateX(1deg) scale(1.02); }
.libro-halo { position: absolute; inset: -14%; border-radius: 40%; background: radial-gradient(closest-side, rgba(255,235,170,.55), rgba(190,160,255,.25) 60%, transparent); filter: blur(10px); animation: respira 3.6s ease-in-out infinite; transform: translateZ(-30px); }
@keyframes respira { 0%, 100% { opacity: .55; transform: translateZ(-30px) scale(.96); } 50% { opacity: 1; transform: translateZ(-30px) scale(1.04); } }
.libro-pagina {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 2px 8px 8px 2px; color: var(--tinta);
  background: linear-gradient(90deg, rgba(95,65,25,.34), rgba(95,65,25,0) 15%), url("../img/papel.webp") center / 240px, var(--crema);
  /* Los cantos escalonados de las hojas asoman por la derecha y por abajo; después, la sombra sobre la escena. */
  box-shadow: 1px 1px 0 #f4ecd8, 2px 2px 0 #cdbf9a, 3px 3px 0 #f4ecd8, 4px 4px 0 #c9ba94, 5px 5px 0 #f4ecd8, 6px 6px 0 #bfae86, 8px 14px 24px rgba(10,5,50,.5), 0 26px 50px rgba(10,5,50,.55);
  font-size: clamp(2rem, 11vw, 2.8rem);
}
/* Marcapáginas de raso que cuelga bajo el libro. */
.libro-pagina::after { content: ""; position: absolute; right: 10%; bottom: -24px; width: 13px; height: 34px; background: linear-gradient(90deg, #6f55c6, #b5a1f5 45%, #7459c9); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.tapa { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; transition: transform 1.9s cubic-bezier(.55, 0, .25, 1) .15s; }
.tapa-frente, .tapa-dorso { position: absolute; inset: 0; border-radius: 2px 8px 8px 2px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* Tapa de lila profundo con grano de cuero; el oro en relieve viene de img/portada-libro.svg. */
.tapa-frente {
  overflow: hidden; color: var(--oro-osc);
  background:
    url("../img/cuero.webp?v=2") 0 0 / 128px,
    linear-gradient(112deg, rgba(255,255,255,.3), rgba(255,255,255,0) 24%, rgba(255,255,255,0) 64%, rgba(25,8,80,.36)),
    radial-gradient(120% 78% at 28% 12%, rgba(255,255,255,.4), rgba(255,255,255,0) 60%),
    linear-gradient(150deg, #b9a8f7, #9078e2 52%, #6d55c6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.26), inset 0 0 22px rgba(30,10,100,.5), 0 0 0 1.5px #4d3a9f, 0 24px 50px rgba(10,5,50,.6);
}
.tapa-frente::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 15%; background: linear-gradient(90deg, rgba(25,8,80,.3), rgba(255,255,255,.1) 70%, rgba(255,255,255,0)); }
/* Reflejo de luz que cruza la tapa de vez en cuando. */
.tapa-frente::after {
  content: ""; position: absolute; top: -12%; bottom: -12%; left: -55%; width: 42%; pointer-events: none; transform: skewX(-16deg);
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.32) 46%, rgba(255,255,255,.1) 58%, rgba(255,255,255,0));
  animation: reflejo 7.5s ease-in-out 1.4s infinite;
}
@keyframes reflejo { 0% { transform: translateX(0) skewX(-16deg); } 34%, 100% { transform: translateX(540%) skewX(-16deg); } }
/* Guarda interior: papel de seda lila con filete dorado. */
.tapa-dorso { transform: rotateY(180deg); background: radial-gradient(circle at 50% 38%, #f6f0ff, #dcd0f9 66%, #c4b4f1); box-shadow: inset -9px 0 16px rgba(60,30,140,.3), inset 0 0 0 7px #e9e0fc, inset 0 0 0 8px rgba(190,140,50,.8), 0 0 0 1.5px #4d3a9f; }
.tapa-ornato { position: absolute; inset: 0; width: 100%; height: 100%; }
/* El sol de Rapunzel va en HTML (un SVG usado como imagen no puede cargar otras). Mide 57,03 % del ancho de la tapa (alcance de
   85 de 300 unidades) y está centrado en el disco: x = 161/300, y = 216/420. Gira muy despacio. */
.tapa-sol {
  position: absolute; left: 25.15%; top: 31.06%; width: 57.03%; height: auto; aspect-ratio: 1; pointer-events: none;
  filter: drop-shadow(0 0 7px rgba(255, 190, 60, .5)) drop-shadow(0 2px 3px rgba(30, 10, 90, .55));
  animation: gira-sol 140s linear infinite;
}
@keyframes gira-sol { to { transform: rotate(360deg); } }
/* Rótulos en pan de oro, centrados en el eje del dibujo (x = 161 de 300). */
.tapa-nombre, .tapa-mono, .tapa-sub {
  position: absolute; left: 3.67%; right: -3.67%; width: fit-content; margin: 0 auto; text-align: center; line-height: 1;
  /* Oro del color del sol (paleta medida en img/sol.webp: brillo #fce943, claro #fcc209, cuerpo #f29f05, oscuro #e38704). */
  background: linear-gradient(104deg, #f29f05 0%, #fcc209 16%, #fde24d 32%, #fff6a0 39%, #fdd21c 52%, #fcc209 66%, #fde05a 82%, #f29f05 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 .6px rgba(45,15,110,.9)) drop-shadow(0 1px 0 rgba(255,238,170,.35)) drop-shadow(0 2px 2px rgba(35,8,100,.6));
}
/* Relleno vertical de .2em: la cursiva sobresale 5 px por arriba y por abajo de una caja de una línea y el oro (background-clip: text)
   se recortaba. El margen negativo lo compensa para que el nombre no se mueva. */
.tapa-nombre { top: 11%; padding-block: .2em; margin-top: -.2em; font-size: calc(var(--W) * .15); -webkit-text-stroke: .5px rgba(214, 120, 0, .8); }
/* El monograma: una G capital de trazo firme (Cinzel), no la cursiva, que medía 1,21 veces su tamaño de alto. Va en violeta
   profundo sobre el disco dorado del sol, con un filete crema para despegarla. El desplazamiento centra la TINTA de la letra
   (medida con measureText), no su caja; el disco del sol mide 60 de 300 unidades, la G unos 36. */
.tapa-mono {
  display: none; /* DECIDIDO por Julio (3-nov-2026): la portada va solo con el sol, sin letra. Para devolver la G, borra solo esta línea */
  top: 51.43%; transform: translateY(-50%); translate: -.013em .045em;
  font-family: var(--caps); font-weight: 600; font-size: calc(var(--W) * .162);
  background: linear-gradient(160deg, #7a5fe0 0%, #4a34a6 48%, #2a1a78 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: .5px rgba(255, 238, 180, .9);
  filter: drop-shadow(0 0 3px rgba(255, 238, 180, .55)) drop-shadow(0 1px 0 rgba(255, 236, 170, .5));
}
/* El relleno vertical (.45em) es para la tilde de la Ñ: con "background-clip: text" el oro solo se pinta dentro de la caja, y la tilde
   sobresale 2 px por encima de una caja de una línea (se perdía y decía "XV ANOS"). Es simétrico, así que el texto sigue centrado. */
.tapa-sub { top: 81.9%; transform: translateY(-50%); padding: .45em 0 .45em .26em; font-family: var(--caps); font-weight: 600; font-size: calc(var(--W) * .044); letter-spacing: .22em; text-transform: uppercase; }

.portada.abierto .libro { transform: translateX(34%) rotateY(0) rotateX(0) scale(.68); }
.portada.abierto .tapa { transform: rotateY(-172deg); }
.portada.abierto .libro-halo { animation: none; opacity: .9; }

/* llave y etiqueta colgante */
.colgante { position: absolute; left: -29%; bottom: 4%; width: 62%; transform-origin: 31% 0; animation: columpio 4.5s ease-in-out infinite; z-index: 3; pointer-events: none; }
.llave-caja { position: relative; width: 42%; margin-left: 10%; }
.llave { display: block; width: 100%; height: auto; cursor: pointer; pointer-events: auto; transform-origin: 50% 24%; filter: drop-shadow(0 7px 8px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(255,214,120,.3)); }
@keyframes columpio { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.brillo { position: absolute; width: 24%; aspect-ratio: 1; opacity: 0; pointer-events: none; background: radial-gradient(circle, #fff 0 20%, #ffeaa6 21% 52%, #e3b85b 53%); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: centelleo 4.2s ease-in-out infinite; }
.brillo-1 { left: 8%; top: 9%; animation-delay: .5s; } .brillo-2 { left: 70%; top: 20%; width: 18%; animation-delay: 2s; } .brillo-3 { left: 62%; top: 66%; width: 20%; animation-delay: 3.3s; }
@keyframes centelleo { 0%, 62%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 78% { opacity: 1; transform: scale(1.15) rotate(40deg); } 90% { opacity: 0; transform: scale(.5) rotate(80deg); } }
/* Al tocar: el columpio se detiene, la llave se alza, gira como en una cerradura y se desvanece entre destellos. */
.portada.girando .colgante { animation-play-state: paused; }
.portada.girando .llave { animation: giro-llave .95s cubic-bezier(.5, 0, .3, 1) forwards; }
@keyframes giro-llave {
  0% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
  28% { transform: translateY(-12px) rotate(-6deg) scale(1.12); opacity: 1; }
  72% { transform: translateY(-12px) rotate(-96deg) scale(1.12); opacity: 1; }
  100% { transform: translateY(-2px) rotate(-104deg) scale(1); opacity: 0; }
}
.portada.girando .brillo { animation: destello .8s ease-out both; }
.portada.girando .brillo-2 { animation-delay: .12s; } .portada.girando .brillo-3 { animation-delay: .24s; }
@keyframes destello { 0% { opacity: 0; transform: scale(.2) rotate(0); } 35% { opacity: 1; transform: scale(1.9) rotate(50deg); } 100% { opacity: 0; transform: scale(.7) rotate(110deg); } }
.etiqueta {
  position: relative; margin: -4px 0 0 12%; width: 88%; padding: 18px 10px 16px; text-align: center; color: #fff; line-height: 1.15;
  background: linear-gradient(145deg, rgba(140,150,235,.88), rgba(110,110,200,.9)); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border-radius: 55% 45% 50% 50% / 45% 55% 45% 55%; box-shadow: 0 8px 20px rgba(10,5,50,.45), inset 0 0 0 1px rgba(255,255,255,.3);
}
.etiqueta small { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .9; font-family: var(--caps); }
.etiqueta strong { display: block; font-family: var(--script); font-weight: 400; font-size: 1.4rem; margin: 2px 0; overflow-wrap: anywhere; text-wrap: balance; }
.etiqueta span { font-size: .85rem; opacity: .95; }
.portada.abierto .colgante { opacity: 0; transition: opacity .6s; }

/* ============================================================ contenido */
main { position: relative; max-width: 560px; margin: 0 auto; padding: 0 18px 0; opacity: 0; transition: opacity 1.4s ease .2s; }
main.visible { opacity: 1; }
.seccion { padding: clamp(28px, 6vh, 56px) 0; }
.js [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.js [data-reveal].visto { opacity: 1; transform: none; }

.nombre { display: block; text-align: center; color: #fff; line-height: .95; text-shadow: 0 0 28px rgba(150,120,255,.95), 0 3px 10px rgba(10,5,50,.55); font-size: clamp(4.4rem, 22vw, 6.6rem); }
.nombre small { display: block; font-family: var(--caps); font-weight: 600; font-size: clamp(1.3rem, 6.4vw, 2rem); letter-spacing: .26em; margin-top: 4px; padding-left: .26em; text-shadow: 0 0 18px rgba(150,120,255,.95), 0 2px 8px rgba(10,5,50,.6); }

/* héroe */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 64px 0 28px; gap: 0; }
.arco {
  position: relative; width: min(74vw, 330px); aspect-ratio: 3 / 4; padding: 5px; border-radius: 999px 999px 14px 14px;
  background: var(--oro-grad); box-shadow: 0 20px 50px rgba(10,5,50,.6), 0 0 70px rgba(255,200,120,.28);
}
.arco > img:first-child { width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px 10px 10px; }
.mariposa-arco { position: absolute; width: 22%; top: 2%; right: -6%; animation: revolotea 6s ease-in-out infinite; transform-origin: 50% 70%; }
@keyframes revolotea { 0%, 100% { transform: translate(0, 0) rotate(8deg); } 50% { transform: translate(-6px, -10px) rotate(-8deg) scale(1.06); } }
.hero .nombre { margin-top: clamp(-70px, -9vh, -46px); position: relative; }
.desliza { margin-top: 26px; display: grid; justify-items: center; gap: 6px; font-family: var(--caps); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--oro-claro); }
.desliza i { width: 1px; height: 38px; background: linear-gradient(var(--oro-claro), transparent); animation: baja 2s ease-in-out infinite; transform-origin: top; }
@keyframes baja { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Lirios dorados de la película (lirios.js): la flor, un aura que late, un reflejo de luz que la recorre y destellos. */
.lirio { position: absolute; width: clamp(110px, 38%, 170px); aspect-ratio: 480 / 438; pointer-events: none; z-index: 1; animation: lirio-respira 6.5s ease-in-out infinite alternate; }
.lirio-ia { top: -14px; left: -12px; rotate: -12deg; }
.lirio-bd { bottom: -14px; right: -12px; rotate: 150deg; animation-delay: -3s; }
.lirio-flor { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 0 7px rgba(255, 190, 70, .6)); }
.lirio-aura {
  position: absolute; left: 50%; top: 52%; width: 150%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 205, 100, .5), rgba(255, 160, 50, .2) 52%, rgba(255, 140, 40, 0) 72%);
  animation: lirio-aura 4.4s ease-in-out infinite alternate;
}
@keyframes lirio-aura { from { opacity: .45; scale: .9; } to { opacity: 1; scale: 1.08; } }
@keyframes lirio-respira { from { transform: scale(1) rotate(-1.5deg); } to { transform: scale(1.035) rotate(1.5deg); } }
/* Reflejo: una franja de luz que cruza la flor, recortada con la silueta del propio lirio (máscara con la transparencia del webp). */
.lirio-brillo { position: absolute; inset: 0; overflow: hidden; -webkit-mask: url("../img/lirio.webp?v=2") center / 100% 100% no-repeat; mask: url("../img/lirio.webp?v=2") center / 100% 100% no-repeat; }
.lirio-brillo::before {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: -60%; width: 45%; transform: skewX(-18deg);
  background: linear-gradient(100deg, rgba(255, 250, 215, 0), rgba(255, 252, 225, .85) 48%, rgba(255, 240, 170, .35) 58%, rgba(255, 250, 215, 0));
  animation: lirio-reflejo 5.6s ease-in-out var(--rd, 0s) infinite;
}
@keyframes lirio-reflejo { 0% { transform: translateX(0) skewX(-18deg); } 42%, 100% { transform: translateX(480%) skewX(-18deg); } }
.lirio-chispa {
  position: absolute; left: var(--x); top: var(--y); width: var(--s, 12%); aspect-ratio: 1; translate: -50% -50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, #fff 0 20%, #fff0b0 21% 55%, #ffc94d 56%); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: lirio-centelleo var(--t, 3.8s) ease-in-out var(--d, 0s) infinite;
}
.lirio:not(.activo), .lirio:not(.activo) :is(.lirio-aura, .lirio-chispa), .lirio:not(.activo) .lirio-brillo::before { animation-play-state: paused; }
@keyframes lirio-centelleo { 0%, 58%, 100% { opacity: 0; scale: .3; rotate: 0deg; } 76% { opacity: 1; scale: 1.1; rotate: 40deg; } 92% { opacity: 0; scale: .5; rotate: 80deg; } }

/* ============================================================ pergamino
   Vara de madera con remates dorados, papel envejecido con textura y bordes irregulares (clip-path puesto por main.js),
   marco con esquinas doradas, marca de agua "XV", divisores, y lazo con sello de lacre. La tinta se "escribe" al entrar. */
.pergamino { position: relative; margin: 0 16px; padding: 0 6px 100px; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .5)); --rm: clamp(38px, 8.4vw, 64px); }
.pergamino::before { /* resplandor cálido de los farolillos detrás del pergamino */
  content: ""; position: absolute; z-index: -1; inset: 2% -12% 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, rgba(255, 196, 110, .34), rgba(255, 150, 60, .12) 48%, transparent 72%);
}
.js .perg-sec[data-reveal] { transition: opacity .5s ease, transform .7s cubic-bezier(.2, .7, .2, 1); } /* este bloque entra más rápido que el resto */

.rollo {
  position: relative; z-index: 3; height: 40px; margin: 0 -8px; border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .05) 26%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .5) 100%),
    repeating-linear-gradient(90deg, rgba(40, 18, 4, 0) 0 9px, rgba(40, 18, 4, .2) 9px 10px, rgba(40, 18, 4, 0) 10px 23px),
    linear-gradient(180deg, #a06a32 0%, #7a4a1c 50%, #4a2a0e 100%);
}
.rollo::after { /* destello que recorre la vara de vez en cuando */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .4) 50%, transparent 62%); background-size: 260% 100%; background-position: 130% 0;
  animation: brillo 7s ease-in-out 2.4s infinite;
}
@keyframes brillo { 0% { background-position: 130% 0; } 38%, 100% { background-position: -30% 0; } }
.remate { position: absolute; top: 50%; translate: 0 -50%; width: var(--rm); height: calc(var(--rm) * .889); background: url("../img/remate.svg") center / contain no-repeat; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .4)); }
.remate-izq { left: calc(var(--rm) * -.66); }
.remate-der { right: calc(var(--rm) * -.66); transform: scaleX(-1); }

.papel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 1.5s cubic-bezier(.22, .8, .3, 1) .05s; margin: 0 14px; position: relative; z-index: 1; }
.visto .papel, .papel.visto { grid-template-rows: 1fr; }
.papel-int {
  position: relative; min-height: 0; overflow: hidden; text-align: center; color: #46365a; font-size: clamp(1.15rem, 3.6vw, 1.4rem);
  background:
    radial-gradient(ellipse at 14% 6%, rgba(255, 238, 196, .62), transparent 46%), /* luz de los farolillos, arriba a la izquierda */
    linear-gradient(90deg, rgba(70, 38, 8, .36) 0, rgba(70, 38, 8, 0) 7.5%, rgba(70, 38, 8, 0) 92.5%, rgba(70, 38, 8, .36) 100%), /* curvatura de cilindro */
    url("../img/papel.webp") 0 0 / 460px auto, linear-gradient(#f6e9c8, #e9d3a3);
}
.papel-int::before { /* sombra que proyectan las varas sobre el papel */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(50, 25, 5, .55) 0, rgba(50, 25, 5, .18) 22px, transparent 54px), linear-gradient(0deg, rgba(50, 25, 5, .55) 0, rgba(50, 25, 5, .18) 22px, transparent 54px);
}
.papel-int::after { /* bordes envejecidos y tostados */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 22px rgba(120, 66, 18, .46), inset 0 0 70px rgba(150, 100, 40, .2);
}
.esq-p { position: absolute; z-index: 2; width: clamp(44px, 11%, 66px); aspect-ratio: 1; background: url("../img/esquina-tinta.svg") center / contain no-repeat; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .55)); }
.ep-1 { top: 10px; left: 10px; } .ep-2 { top: 10px; right: 10px; transform: scaleX(-1); }
.ep-3 { bottom: 10px; left: 10px; transform: scaleY(-1); } .ep-4 { bottom: 10px; right: 10px; transform: scale(-1); }
.marca { position: absolute; inset: 0; display: grid; place-items: center; z-index: 0; font: 600 clamp(7rem, 34vw, 14rem)/1 var(--caps); letter-spacing: .04em; color: rgba(130, 85, 30, .08); pointer-events: none; user-select: none; }

.texto { position: relative; z-index: 1; padding: clamp(46px, 9vw, 64px) clamp(26px, 9%, 76px) clamp(50px, 9vw, 68px); }
.texto::before { /* marco de doble línea */
  content: ""; position: absolute; inset: 16px; border: 1px solid rgba(140, 95, 40, .5); outline: 1px solid rgba(140, 95, 40, .22); outline-offset: 4px; pointer-events: none;
}
.texto > * { opacity: 0; }
.cabecera { display: block; width: min(210px, 58%); height: 46px; margin: 0 auto 8px; background: url("../img/cabecera.svg") center / contain no-repeat; }
.divisor { display: block; height: 26px; width: min(230px, 62%); margin: 12px auto; background: url("../img/divisor.svg") center / contain no-repeat; }
/* Los nombres llevan un degradado violeta (claro arriba, profundo abajo): tinta con cuerpo, no un color plano. */
.padres, .quince {
  background: linear-gradient(180deg, #6a49d2 0%, #5535b8 50%, #46299c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.padres { font-size: clamp(1.9rem, 6.4vw, 2.45rem); line-height: 1.22; white-space: pre-line; text-wrap: balance; }
.invita { line-height: 1.55; max-width: 30ch; margin: 0 auto; text-wrap: balance; }
.quince { font-size: clamp(2.1rem, 7.2vw, 2.8rem); line-height: 1.18; text-wrap: balance; }

/* Entrada de la tinta, en unos 3 s: el papel se desenrolla (1,5 s) y la escritura arranca mientras se abre. */
.visto .texto > * { animation: aclara .8s ease both; }
.visto .texto > .script { animation: escribe 1.1s cubic-bezier(.3, .1, .3, 1) both; -webkit-mask: linear-gradient(90deg, #000 40%, transparent 60%) 100% 0 / 260% 100%; mask: linear-gradient(90deg, #000 40%, transparent 60%) 100% 0 / 260% 100%; }
.visto .texto > :nth-child(1) { animation-delay: .3s; }   /* cabecera */
.visto .texto > :nth-child(2) { animation-delay: .5s; }   /* padres */
.visto .texto > :nth-child(3) { animation-delay: .95s; }  /* divisor */
.visto .texto > :nth-child(4) { animation-delay: 1.05s; } /* invitación */
.visto .texto > :nth-child(5) { animation-delay: 1.4s; }  /* divisor */
.visto .texto > :nth-child(6) { animation-delay: 1.5s; animation-duration: 1.3s; } /* nombre de la quinceañera */
@keyframes aclara { from { opacity: 0; filter: blur(3px); translate: 0 5px; } to { opacity: 1; filter: blur(0); translate: 0 0; } }
@keyframes escribe { from { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { opacity: 1; -webkit-mask-position: 0 0; mask-position: 0 0; } }

/* Lazo lila con sello de lacre y la inicial */
.lazo { position: absolute; left: 50%; bottom: 12px; width: 0; height: 108px; z-index: 4; }
.cinta { /* satén lila con destello; cuelga y se mece muy suavemente */
  position: absolute; top: 0; width: 25px; height: 100px; transform-origin: 50% 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
  background: linear-gradient(90deg, #47309c 0%, #8c73e4 24%, #cdbdff 40%, #7a5fd8 58%, #47309c 100%); animation: mece 5.5s ease-in-out infinite alternate;
}
.cinta-1 { left: -28px; transform: rotate(9deg); } .cinta-2 { left: 3px; transform: rotate(-8deg); animation-duration: 6.4s; animation-delay: -2.4s; }
@keyframes mece { from { rotate: -2.4deg; } to { rotate: 2.4deg; } }
.sello {
  position: absolute; left: -35px; top: -22px; width: 70px; height: 70px; display: grid; place-items: center; z-index: 2;
  border-radius: 50% 46% 52% 48% / 48% 52% 46% 50%;
  background: radial-gradient(circle at 36% 30%, #b49af3 0%, #7b58d6 38%, #4a2c9a 78%, #3a2180 100%);
  box-shadow: 0 6px 9px rgba(0, 0, 0, .5), inset 0 -5px 9px rgba(0, 0, 0, .38), inset 0 3px 5px rgba(255, 255, 255, .25);
}
.sello::before { content: ""; position: absolute; inset: 7px; border-radius: inherit; border: 1.6px solid rgba(255, 255, 255, .24); box-shadow: inset 0 0 0 3px rgba(40, 18, 110, .25); }
.sello::after { content: ""; position: absolute; left: 15%; top: 9%; width: 44%; height: 28%; border-radius: 50%; transform: rotate(-32deg); background: radial-gradient(ellipse, rgba(255, 255, 255, .5), transparent 72%); }
.sello b { font: 400 2.2rem/1 var(--script); color: #e3d6ff; text-shadow: 0 -1px 0 rgba(255, 255, 255, .35), 0 2px 2px rgba(0, 0, 0, .55); }

/* Flores sobre las esquinas del papel */

/* fecha y cuenta regresiva */
.fecha { text-align: center; }
/* SVG sin tamaño que solo aporta el degradado dorado (#oroM) a los anillos de la cuenta regresiva. */
.defs-svg { position: absolute; width: 0; height: 0; overflow: hidden; }


.divisor-claro { display: block; height: 26px; width: min(230px, 62%); margin: 18px auto 2px; background: url("../img/divisor.svg") center / contain no-repeat; }
.fecha-txt { margin: 6px auto 22px; max-width: 34ch; font-style: italic; text-wrap: balance; text-shadow: 0 2px 10px rgba(10, 5, 50, .85); }

/* Cuenta regresiva: cuatro anillos de luz que se van vaciando, dentro de un panel con doble marco dorado. */
.cuenta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 20px 6px 16px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(36, 24, 118, .56), rgba(16, 10, 64, .66)); border: 1px solid rgba(255, 225, 150, .55);
  box-shadow: inset 0 0 0 4px rgba(16, 10, 64, .4), inset 0 0 0 5px rgba(255, 225, 150, .22), 0 14px 34px rgba(5, 3, 30, .5);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.unidad { display: grid; justify-items: center; gap: 8px; min-width: 0; }
.anillo { position: relative; display: grid; place-items: center; width: min(100%, 82px); aspect-ratio: 1; }
.anillo svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.pista { fill: none; stroke: rgba(255, 225, 150, .18); stroke-width: 3; }
.prog { fill: none; stroke: url(#oroM); stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 219.9; stroke-dashoffset: 0; filter: drop-shadow(0 0 3px rgba(255, 200, 90, .85)); transition: stroke-dashoffset .95s linear; }
.anillo b { position: relative; font: 600 clamp(1.3rem, 6.4vw, 1.8rem)/1 var(--caps); font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(170, 140, 255, .8); }
.anillo b.tic { animation: tic .5s ease-out; }
@keyframes tic { from { opacity: .2; transform: translateY(-38%) scale(.86); filter: blur(2px); } to { opacity: 1; transform: none; filter: blur(0); } }
.unidad small { font: 400 .64rem/1 var(--caps); letter-spacing: .16em; text-transform: uppercase; color: var(--oro-claro); }
.cuenta.final { grid-template-columns: 1fr; padding: 18px; font-family: var(--script); font-size: 1.7rem; }

/* ============================================================ galería (publicación al estilo de una red social)
   Cabecera con avatar, fotos a todo el ancho que se deslizan con el dedo y SE REPITEN SIN FIN (galeria.js añade una copia de la
   última al inicio y de la primera al final), corazón con doble toque, puntitos y pie de foto. Todo dentro del panel de cristal
   con doble marco dorado de las demás secciones. */
.galeria { text-align: center; }
.galeria-titulo { font-size: clamp(2.4rem, 10vw, 3.2rem); line-height: 1; margin-bottom: 10px; text-shadow: 0 0 22px rgba(160, 130, 255, .9), 0 2px 8px rgba(10, 5, 50, .6); }
.post {
  max-width: min(100%, 420px); margin: 0 auto; padding: 6px; border-radius: 22px; text-align: left; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, rgba(36, 24, 118, .58), rgba(16, 10, 64, .72)); border: 1px solid rgba(255, 225, 150, .55);
  box-shadow: inset 0 0 0 4px rgba(16, 10, 64, .4), inset 0 0 0 5px rgba(255, 225, 150, .22), 0 14px 34px rgba(5, 3, 30, .5);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.post-cab { display: flex; align-items: center; gap: 11px; padding: 10px 10px 11px; }
.post-avatar { flex: none; width: 44px; height: 44px; padding: 2.5px; border-radius: 50%; background: conic-gradient(from 210deg, #f3d58a, #b49af3, #e3b85b, #f3d58a); } /* aro de "historia" */
.post-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 2px solid #1a1050; box-sizing: border-box; background: #9b84e0; }
.post-quien { display: grid; min-width: 0; line-height: 1.2; }
.post-quien b { font: 600 .95rem var(--caps); letter-spacing: .07em; }
.post-quien small { font-size: .95rem; font-style: italic; opacity: .8; }

.carrusel { position: relative; border-radius: 14px; overflow: hidden; }
.galeria-pista {
  display: flex; aspect-ratio: 4 / 5; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; background: #1a1050; outline-offset: -4px;
}
.galeria-pista::-webkit-scrollbar { display: none; }
.diapo { flex: 0 0 100%; width: 100%; height: 100%; margin: 0; position: relative; scroll-snap-align: center; scroll-snap-stop: always; cursor: pointer; user-select: none; -webkit-user-select: none; }
.diapo img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }

/* Flechas: solo en dispositivos con ratón, y solo al pasar por encima (en el móvil se desliza con el dedo). */
.flecha { position: absolute; z-index: 5; top: 50%; translate: 0 -50%; width: 38px; height: 38px; border-radius: 50%; border: 0; display: none; place-items: center; background: rgba(255, 255, 255, .85); color: #2a1a78; font-size: 1.7rem; line-height: 1; padding: 0 0 4px; cursor: pointer; opacity: 0; transition: opacity .25s; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.flecha.izq { left: 10px; } .flecha.der { right: 10px; }
@media (hover: hover) { .flecha { display: grid; } .carrusel:hover .flecha, .flecha:focus-visible { opacity: 1; } }

/* Corazón grande del doble toque */
.corazon-grande { position: absolute; z-index: 6; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; color: #fff; opacity: 0; pointer-events: none; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .5)); }
.corazon-grande svg { display: block; width: 100%; height: 100%; }
.corazon-grande.pop { animation: corazon-pop .95s ease both; }
@keyframes corazon-pop { 0% { opacity: 0; scale: .3; } 18% { opacity: 1; scale: 1.25; } 34% { scale: .95; } 50% { scale: 1.05; opacity: 1; } 100% { opacity: 0; scale: 1.2; } }

.post-acc { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 8px 0; }
.post-corazon { justify-self: start; width: 42px; height: 42px; padding: 6px; border: 0; background: none; color: #fff; cursor: pointer; transition: color .2s; }
.post-corazon svg { display: block; width: 100%; height: 100%; }
.post-corazon[aria-pressed="true"] { color: #ff5c8a; }
.post-corazon.pop { animation: latido .5s ease; }
@keyframes latido { 0% { scale: 1; } 30% { scale: 1.35; } 60% { scale: .92; } 100% { scale: 1; } }
.post-puntos { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 14px; }
.punto { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .38); transition: transform .3s, background .3s; }
.punto[aria-current="true"] { background: var(--oro-claro); transform: scale(1.4); }
.foto-pie { margin: 4px 12px 10px; font-size: 1.05rem; line-height: 1.35; }
.foto-pie b { margin-right: .5em; font: 600 .9rem var(--caps); letter-spacing: .06em; }
.foto-pie.cambia { animation: aclara .7s ease both; }

/* Visor a pantalla completa */
.visor { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(6, 4, 28, .94); color: #fff; overflow: hidden; }
.visor::backdrop { background: rgba(6, 4, 28, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.visor[open] { animation: aclara .35s ease both; }
.visor-img { position: absolute; inset: 64px 12px 96px; width: calc(100% - 24px); height: calc(100% - 160px); object-fit: contain; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-drag: none; border-radius: 6px; }
.visor-cerrar, .visor-nav { position: absolute; z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 225, 150, .5); background: rgba(20, 10, 70, .6); color: var(--oro-claro); font-size: 2rem; line-height: 1; padding: 0 0 4px; cursor: pointer; display: grid; place-items: center; }
.visor-cerrar { top: max(14px, env(safe-area-inset-top)); right: 14px; font-size: 2.2rem; padding-bottom: 6px; }
.visor-nav { top: 50%; translate: 0 -50%; } .visor-ant { left: 10px; } .visor-sig { right: 10px; }
.visor-pie { position: absolute; left: 0; right: 0; bottom: 56px; text-align: center; font-size: 1.9rem; line-height: 1.1; padding: 0 20px; }
.visor-cont { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; font: 400 .8rem/1 var(--caps); letter-spacing: .34em; color: var(--oro-claro); }

/* hora y lugar */
.lugar {
  position: relative; max-width: 430px; margin-inline: auto; border-radius: 6px; padding: 8px; text-align: center; /* sin overflow:hidden: los lirios de las esquinas sobresalen enteros */
  background: url("../img/lago.svg") center / cover, #6b4fb8; box-shadow: 0 20px 50px rgba(10,5,50,.55);
}
.lugar::before { content: ""; position: absolute; inset: 14px; border: 3px solid transparent; border-image: var(--oro-grad) 1; pointer-events: none; z-index: 2; }
.lugar::after { content: ""; position: absolute; inset: 22px; border: 1px solid rgba(255,240,184,.6); pointer-events: none; z-index: 2; }
.esq { position: absolute; width: 60px; z-index: 3; }
.esq-1 { top: 6px; left: 6px; } .esq-2 { top: 6px; right: 6px; transform: scaleX(-1); }
.esq-3 { bottom: 6px; left: 6px; transform: scaleY(-1); } .esq-4 { bottom: 6px; right: 6px; transform: scale(-1); }
.lugar .lirio { width: 27%; z-index: 4; }
.lugar .lirio-ia { top: -26px; left: -22px; } .lugar .lirio-bd { bottom: -40px; right: -34px; width: 23%; }
.tarjeta .lirio { width: clamp(76px, 25%, 118px); }
/* En pantallas estrechas el panel llega casi al borde: los lirios se pegan a su esquina para no quedar recortados. */
@media (max-width: 600px) { .lugar .lirio-ia { left: 0; } .lugar .lirio-bd { right: -6px; } }
.mini-farol { position: absolute; width: 36px; z-index: 5; animation: flota 5s ease-in-out infinite; }
.mf-1 { top: 1%; right: 9%; } .mf-2 { top: 33%; right: 3%; width: 28px; animation-delay: -2s; }
@keyframes flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.lugar-int {
  position: relative; z-index: 3; margin: 46px 22px 36px; padding: 0 14px 28px;
  background: linear-gradient(rgba(35, 20, 95, .5), rgba(35, 20, 95, .68)); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
/* Medallón de la iglesia, a caballo sobre el borde superior del panel, como un sello. */
.lugar-icono {
  display: grid; place-items: center; width: 56px; height: 56px; margin: -28px auto 6px; border-radius: 50%; color: var(--oro-claro);
  background: radial-gradient(circle at 36% 28%, #5d41c6, #2a1a78 75%);
  box-shadow: 0 0 0 3px #e3b85b, 0 0 0 5px rgba(20, 12, 70, .95), 0 8px 18px rgba(0, 0, 0, .5), 0 0 26px rgba(255, 205, 120, .4);
}
.lugar-icono svg { width: 29px; height: 29px; }
/* El nombre del acto, ahora la línea principal del panel (el título «Hora y lugar» se retiró): más grande, y si no cabe en una línea
   se parte en dos equilibradas. */
.lugar-evento { margin-top: 14px; font: 600 clamp(1.02rem, 4.7vw, 1.3rem)/1.35 var(--caps); letter-spacing: .14em; text-wrap: balance; text-transform: uppercase; color: var(--oro-claro); text-shadow: 0 0 14px rgba(255, 205, 120, .35); }
.lugar-evento:empty { display: none; }
.lugar .divisor-claro { margin: 6px auto 2px; }

/* Cuándo, como en la referencia del cliente: dos bloques de tres líneas (palabra en cursiva, NÚMERO grande, palabra en cursiva) separados
   por una barrita dorada vertical. Las palabras van en blanco y los números («21» y la hora) en dorado. El número dorado usa
   background-clip:text, que solo pinta dentro de la caja: de ahí el relleno vertical, que se pone a AMBOS números para que las dos
   columnas midan lo mismo y sus palabras queden alineadas. Lo usan los dos paneles (misa y recepción). */
.lugar-cuando { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: clamp(12px, 4vw, 22px); margin: 8px 0 4px; text-align: center; }
.lc-col { display: grid; justify-items: center; line-height: 1.1; }
.lc-pal { font-family: var(--script); font-weight: 400; font-size: clamp(1.35rem, 6vw, 1.8rem); line-height: 1.25; color: #fff; text-shadow: 0 0 18px rgba(170, 140, 255, .9), 0 2px 8px rgba(10, 5, 50, .6); white-space: nowrap; }
.lc-num { padding-block: .12em; font: 600 clamp(2.1rem, 9.5vw, 2.9rem)/1.05 var(--caps); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 18px rgba(170, 140, 255, .8), 0 2px 8px rgba(10, 5, 50, .6); white-space: nowrap; }
.lc-oro {
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none;
  background: linear-gradient(180deg, #fff6d2 0%, #f0cf7a 52%, #c9993a 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 14px rgba(255, 205, 120, .4));
}
.lc-barra { width: 2px; align-self: stretch; min-height: 96px; border-radius: 2px; background: linear-gradient(180deg, rgba(240, 207, 122, 0), #f0cf7a 22%, #fce943 50%, #f0cf7a 78%, rgba(240, 207, 122, 0)); box-shadow: 0 0 10px rgba(255, 205, 120, .45); }

/* Dónde: nombre y dirección del lugar (el alfiler con onda se retiró a petición del cliente). */
.lugar-sitio { display: grid; justify-items: center; gap: 2px; margin: 22px 0 14px; }
.lugar-nombre { font: 600 1.02rem/1.3 var(--caps); letter-spacing: .08em; text-wrap: balance; }
.lugar-dir { margin: 0; font-style: italic; opacity: .95; font-size: 1rem; }
.lugar-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lugar-botones .boton { flex: 0 1 auto; min-width: 170px; padding-inline: 22px; }

/* Entrada en cascada de los elementos del panel */
.js .lugar-int > * { opacity: 0; translate: 0 14px; transition: opacity .7s ease, translate .7s cubic-bezier(.2, .7, .2, 1); }
.visto .lugar-int > * { opacity: 1; translate: 0 0; }
.visto .lugar-int > :nth-child(2) { transition-delay: .1s; } .visto .lugar-int > :nth-child(3) { transition-delay: .2s; }
.visto .lugar-int > :nth-child(4) { transition-delay: .3s; } .visto .lugar-int > :nth-child(5) { transition-delay: .4s; }
.visto .lugar-int > :nth-child(6) { transition-delay: .6s; } .visto .lugar-int > :nth-child(7) { transition-delay: .75s; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 8px 26px; margin: 4px 0; cursor: pointer;
  font: 600 .88rem/1 var(--caps); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: #3a2a6a;
  background: linear-gradient(135deg, #fff6d2, #f0cf7a 50%, #d9a441); border: 1px solid #fff0b8; border-radius: 4px;
  box-shadow: 0 6px 16px rgba(10,5,50,.4); transition: transform .2s, box-shadow .2s;
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(10,5,50,.5); }
.boton svg { width: 20px; height: 20px; flex: none; }
.boton-sec { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,240,184,.7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* itinerario */
/* Línea de tiempo: panel de cristal con doble marco dorado (como la cuenta regresiva); la línea dorada se dibuja al entrar
   y cada actividad aparece a su paso, con un medallón del mismo estilo que el de la iglesia. */
.itinerario {
  padding: 40px 22px 38px; border-radius: 22px; text-align: center; color: #fff;
  background: linear-gradient(180deg, rgba(36, 24, 118, .58), rgba(16, 10, 64, .7)); border: 1px solid rgba(255, 225, 150, .55);
  box-shadow: inset 0 0 0 4px rgba(16, 10, 64, .4), inset 0 0 0 5px rgba(255, 225, 150, .22), 0 14px 34px rgba(5, 3, 30, .5);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.itinerario h2 { font-size: clamp(2.6rem, 12vw, 3.3rem); line-height: 1; text-shadow: 0 0 22px rgba(160, 130, 255, .85), 0 2px 8px rgba(10, 5, 50, .6); }
.itinerario .divisor-claro { margin: 10px auto 20px; }
.linea { --nodo: 56px; position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; text-align: left; }
.linea::before { /* el hilo dorado */
  content: ""; position: absolute; z-index: 0; left: calc(var(--nodo) / 2 - 1px); top: calc(var(--nodo) / 2); bottom: calc(var(--nodo) / 2); width: 2px;
  background: linear-gradient(180deg, #f3d58a, #c9993a 62%, rgba(201, 153, 58, .25)); box-shadow: 0 0 9px rgba(255, 205, 120, .55);
  transform-origin: top; scale: 1 1;
}
.js .linea::before { scale: 1 0; transition: scale 1.9s cubic-bezier(.4, 0, .2, 1) .25s; }
.visto .linea::before { scale: 1 1; }
.hito { position: relative; z-index: 1; display: grid; grid-template-columns: var(--nodo) 1fr; gap: 18px; align-items: center; }
.js .hito { opacity: 0; translate: -14px 0; }
.visto .hito { opacity: 1; translate: 0 0; transition: opacity .8s ease, translate .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * .38s + .45s); }
.nodo {
  display: grid; place-items: center; width: var(--nodo); height: var(--nodo); border-radius: 50%; color: var(--oro-claro);
  background: radial-gradient(circle at 36% 28%, #5d41c6, #2a1a78 75%);
  box-shadow: 0 0 0 2.5px #e3b85b, 0 0 0 4.5px rgba(20, 12, 70, .95), 0 6px 14px rgba(0, 0, 0, .45), 0 0 18px rgba(255, 205, 120, .28);
}
.nodo svg { width: 30px; height: 30px; }
.hito-txt { display: grid; gap: 2px; min-width: 0; }
.hito time {
  font: 600 1.3rem/1.1 var(--caps); letter-spacing: .06em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff6d2 0%, #f0cf7a 55%, #c9993a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; width: fit-content;
}
.hito time small { margin-left: .5em; font: 400 .66rem var(--caps); letter-spacing: .26em; text-transform: uppercase; -webkit-text-fill-color: var(--oro-claro); color: var(--oro-claro); }
.hito-t { margin: 0; font-size: 1.22rem; line-height: 1.3; text-wrap: balance; }
.hito-d { margin: 0; font-style: italic; font-size: 1.02rem; opacity: .82; }
/* El día de la fiesta, la actividad en curso late con luz propia. */
.hito.ahora .nodo { animation: nodo-late 2.2s ease-in-out infinite; }
.hito.ahora .hito-t::after { content: "En curso"; margin-left: .7em; padding: 2px 9px; border-radius: 99px; font: 600 .62rem/1 var(--caps); letter-spacing: .16em; text-transform: uppercase; vertical-align: middle; color: #3a2a6a; background: var(--oro-grad); }
@keyframes nodo-late { 0%, 100% { box-shadow: 0 0 0 2.5px #e3b85b, 0 0 0 4.5px rgba(20, 12, 70, .95), 0 6px 14px rgba(0, 0, 0, .45), 0 0 18px rgba(255, 205, 120, .28); } 50% { box-shadow: 0 0 0 2.5px #fff0b8, 0 0 0 4.5px rgba(20, 12, 70, .95), 0 6px 14px rgba(0, 0, 0, .45), 0 0 34px rgba(255, 215, 130, .8); } }

/* fotos */
.seccion-foto { display: grid; gap: 18px; }
.foto-ancha { border-radius: 22px; padding: 4px; background: var(--oro-grad); box-shadow: 0 18px 44px rgba(10,5,50,.55); }
.foto-ancha img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 19px; background: #9b84e0; }
.frase { padding: 32px 26px; border-radius: 26px; text-align: center; font-style: italic; font-size: 1.25rem; color: #fff; background: linear-gradient(160deg, rgba(190,170,250,.92), rgba(150,125,230,.94)); box-shadow: 0 18px 44px rgba(10,5,50,.5), inset 0 0 0 1px rgba(255,255,255,.3); }
.frase p::before { content: "\201C"; } .frase p::after { content: "\201D"; }

/* tarjetas */
.tarjetas { display: grid; gap: 22px; }
.tarjeta {
  position: relative; padding: 58px 28px 54px; text-align: center; color: var(--tinta); /* sin overflow:hidden: los lirios sobresalen enteros */ border-radius: 30px 30px 30px 30px / 40px 40px 30px 30px;
  background: radial-gradient(ellipse at 18% 8%, #fff, transparent 55%), radial-gradient(ellipse at 90% 100%, rgba(185,166,245,.4), transparent 55%), linear-gradient(#fffaf0, #f1eaff);
  box-shadow: 0 18px 44px rgba(10,5,50,.5);
}
.tarjeta h2 { position: relative; z-index: 2; font-size: 2.8rem; line-height: 1; color: #7d62d1; margin-bottom: 14px; }
.tarjeta p { position: relative; z-index: 2; font-weight: 600; }
.vestimenta-codigo { font-family: var(--caps); letter-spacing: .24em; text-transform: uppercase; font-size: 1.15rem; margin-bottom: 8px; }
.muestra { display: block; width: 46px; height: 46px; margin: 18px auto 0; border-radius: 50%; position: relative; z-index: 2; background: var(--muestra, #8f72e6); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--oro), 0 8px 18px rgba(80,50,170,.4); }

/* confirmación */
.confirmar { text-align: center; }
.confirmar-int { padding: 44px 22px 36px; border-radius: 26px; background: rgba(24,14,78,.58); border: 1px solid rgba(255,240,184,.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 18px 44px rgba(10,5,50,.5); }
.confirmar h2 { font-size: clamp(2.2rem, 10.5vw, 2.9rem); line-height: 1; margin-bottom: 16px; text-shadow: 0 0 22px rgba(160,130,255,.9); }
.despedida { font-size: clamp(2.2rem, 10vw, 3rem); line-height: 1.1; margin-top: 34px; text-shadow: 0 0 22px rgba(160,130,255,.95), 0 2px 8px rgba(10,5,50,.6); }
.cargando { font-style: italic; opacity: .8; }
.rsvp-saludo { margin-bottom: 18px; } .rsvp-saludo strong { font-family: var(--script); font-weight: 400; font-size: 1.9rem; color: var(--oro-claro); display: block; }
.rsvp-form { display: grid; gap: 18px; text-align: left; }
.rsvp-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.rsvp-form legend { padding: 0; margin-bottom: 8px; font-family: var(--caps); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-claro); }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opcion span { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 8px 16px; text-align: center; border-radius: 14px; border: 1px solid rgba(255,240,184,.5); background: rgba(255,255,255,.08); transition: background .25s, border-color .25s, transform .2s; }
.opcion input:checked + span { background: linear-gradient(135deg, #fff6d2, #f0cf7a 55%, #d9a441); color: #3a2a6a; border-color: #fff0b8; font-weight: 600; }
.opcion input:focus-visible + span { outline: 2px solid #fff; outline-offset: 3px; }
.rsvp-form input[type="text"][name="nombre"] { width: 100%; min-height: 52px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(255,240,184,.5); background: rgba(255,255,255,.1); color: #fff; font: inherit; font-size: 1.15rem; }
.rsvp-form input[type="text"][name="nombre"]::placeholder { color: rgba(255,255,255,.6); font-style: italic; }
.rsvp-nombre { font-family: var(--script); font-size: 2rem; line-height: 1.1; }
.rsvp-nota { font-size: .95rem; font-style: italic; opacity: .85; max-width: 28ch; }
/* Acompañantes: una fila por persona (nombre y apellido) con botón para quitarla, hasta el máximo permitido. */
.acomp-lista { display: grid; gap: 10px; }
.acomp-lista:empty { display: none; }
.acomp-fila { display: grid; grid-template-columns: 1fr 46px; gap: 8px; align-items: center; }
.acomp-fila input { width: 100%; min-height: 52px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(255, 240, 184, .5); background: rgba(255, 255, 255, .1); color: #fff; font: inherit; font-size: 1.12rem; }
.acomp-fila input::placeholder { color: rgba(255, 255, 255, .6); font-style: italic; }
.acomp-quitar { width: 46px; height: 46px; padding: 0 0 3px; border-radius: 50%; border: 1px solid rgba(255, 240, 184, .5); background: rgba(255, 255, 255, .08); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.acomp-quitar:hover { background: rgba(255, 255, 255, .18); }
.boton-agregar { justify-self: stretch; margin-top: 2px; }
.acomp-nota { margin: 4px 0 0; font-size: .95rem; font-style: italic; opacity: .8; }
.rsvp-form textarea { width: 100%; min-height: 96px; resize: vertical; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,240,184,.5); background: rgba(255,255,255,.1); color: #fff; font: inherit; }
.rsvp-form textarea::placeholder { color: rgba(255,255,255,.6); font-style: italic; }
.rsvp-form .boton { justify-self: center; }
.rsvp-form .boton[disabled] { opacity: .6; cursor: progress; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rsvp-aviso { min-height: 1.5em; text-align: center; font-style: italic; }
.rsvp-aviso.error { color: #ffc4d0; }
.rsvp-gracias { display: grid; gap: 14px; justify-items: center; }
.rsvp-gracias .gracias { font-family: var(--script); font-size: 2.6rem; line-height: 1.1; color: var(--oro-claro); }
.rsvp-gracias .rsvp-agradece { white-space: pre-line; margin-top: 4px; font-family: var(--script); font-size: clamp(1.55rem, 6.4vw, 1.9rem); line-height: 1.3; text-wrap: balance; color: #f0cf7a; text-shadow: 0 0 14px rgba(255, 205, 120, .4), 0 2px 8px rgba(10, 5, 50, .5); }
.rsvp-gracias .resumen { padding: 14px 18px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,240,184,.35); }

/* final */
.final { padding: 10px 0 80px; }
.foto-final { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 44px rgba(10,5,50,.55); }
.foto-final img { width: 100%; aspect-ratio: 4 / 5.2; object-fit: cover; background: #9b84e0; }
.foto-final figcaption { position: absolute; inset: auto 0 6% 0; }
.foto-final::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(30,20,90,.55)); pointer-events: none; }
.foto-final figcaption { z-index: 2; }
/* Sin la foto final (main.js: fotosExtra), el nombre queda como cierre sobre el cielo, sin marco. */
.foto-final.sin-foto { overflow: visible; border-radius: 0; box-shadow: none; padding: 30px 0 6px; }
.foto-final.sin-foto::after, .foto-final.sin-foto img { display: none; }
.foto-final.sin-foto figcaption { position: static; }
.creditos { margin-top: 18px; text-align: center; font-size: .95rem; font-style: italic; opacity: .85; }

/* ============================================================ escritorio */
@media (min-width: 900px) {
  main { max-width: 600px; }
  .btn-musica { top: 22px; right: 26px; }
}

/* ============================================================ modo ligero (móviles modestos) */
.ligero * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.ligero .vuelo, .ligero .libro-halo, .ligero .brillo, .ligero .tapa-frente::after { display: none; }
.ligero .tapa-sol { animation: none; } .ligero .lirio { animation: none; } .ligero .lirio-aura, .ligero .lirio-brillo, .ligero .lirio-chispa { display: none; }
.ligero .farol:nth-child(n+8) { display: none; }
.ligero .farol.farol-cae { display: block; }   /* la copia que arde al TOCAR un farolillo va al final de la lista y debe verse también en modo ligero */
:root.farol-sobre, :root.farol-sobre * { cursor: pointer; }   /* huevo.js: mano al pasar el ratón sobre un farolillo que se puede tocar */
.ligero .chispa, .ligero .farol-luz { display: none; }
.ligero .farol-cuerpo, .ligero .lejos .farol-cuerpo, .ligero .cerca .farol-cuerpo { filter: none; }

/* ============================================================ movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; transition-delay: 0s !important; }
  .farol { animation: none !important; bottom: var(--b); }
  .vuelo { display: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .papel { grid-template-rows: 1fr; }
  .texto > *, .visto .texto > * { opacity: 1; animation: none; -webkit-mask: none; mask: none; filter: none; translate: none; }
  .rollo::after { animation: none; }
  .brillo, .tapa-frente::after { display: none; }
  .lirio, .lirio-aura, .tapa-sol { animation: none; } .lirio-brillo, .lirio-chispa { display: none; }
}