/* ==================================================================
   Luciana · XV años — "La torre de los faroles" (cliente real)
   Diseño propio: Rapunzel como cuento clásico, en lila y dorado. La torre
   al anochecer con la trenza dorada, un farol de papel que se enciende y
   sube hasta un cielo lleno de faroles.
   Tipografías: Gwendolyn (su nombre y los títulos), Bellefair (texto y
   cifras) y Questrial (rótulos y botones).
   Lenguaje: faroles que suben (los del cielo de cada sección de noche y uno
   por cada clic o toque), destellos dorados que deja el cursor y una trenza
   dorada que se teje bajo cada título.
   ================================================================== */

:root{
  --crema:#FBF8FF;
  --lila-1:#F3EAFB;
  --lila-2:#E7D8F6;
  --lila:#C6A6E8;
  --morado:#7B4FB3;
  --morado-osc:#55308C;
  --uva:#3A2466;
  --noche:#1F1238;
  --noche-2:#2C1A52;
  --tinta:#3B2A55;
  --tinta-suave:#7A6A93;
  --oro:#D2A245;
  --oro-claro:#F2D898;
  --oro-osc:#A27527;
  --papel:#FFE9B8;
  --letra-oro:linear-gradient(180deg,#FFF6DC 0%,#F6DC9C 38%,#D2A245 64%,#F9E7B8 92%);
  --placa:rgba(31,18,56,.84);
  --script:'Gwendolyn','Great Vibes','Snell Roundhand',cursive;
  --serif:'Bellefair','Cormorant Garamond','Georgia','Times New Roman',serif;
  --sans:'Questrial','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --pad:22px;
  --arriba:env(safe-area-inset-top,0px);
  --abajo:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--noche)}
body{
  background:var(--crema);
  color:var(--tinta);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.cerrado{overflow:hidden;height:100%;background:var(--noche)}
img{max-width:100%;height:auto;display:block}
b,strong{font-weight:400}
[hidden]{display:none!important}
.defs{position:absolute;width:0;height:0;overflow:hidden}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
:focus-visible{outline:2px solid var(--morado);outline-offset:3px}
.noche :focus-visible{outline-color:var(--oro-claro)}

.valle{position:relative;z-index:1;opacity:0;transition:opacity .7s ease}
body.abierto .valle{opacity:1}

/* ------------------------------------------------------------------
   MARCA DE AGUA · solo en la vista previa (clase "vista-previa" en <html>)
   ------------------------------------------------------------------ */
.marca-agua{display:none}
html.vista-previa .marca-agua{
  display:block;
  position:fixed;
  inset:0;
  z-index:200;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Cg transform='rotate(-27 150 100)' font-family='Arial,Helvetica,sans-serif' font-weight='700' text-anchor='middle' fill='%23fff' fill-opacity='.3' stroke='%231F1238' stroke-opacity='.3' stroke-width='.7' paint-order='stroke'%3E%3Ctext x='150' y='96' font-size='17' letter-spacing='4'%3EVISTA PREVIA%3C/text%3E%3Ctext x='150' y='118' font-size='11' letter-spacing='5'%3ETARJETA VIVA%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-size:300px 200px;
}

/* ------------------------------------------------------------------
   FAROLES QUE SUBEN (secciones de noche) y FLORECITAS QUE CAEN (de día).
   Solo se mueven con su sección a la vista (.viva) o en la portada.
   ------------------------------------------------------------------ */
.faroles,.florecitas{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.farol-sube{
  position:absolute;
  bottom:-90px;
  left:var(--x,50%);
  width:var(--t,34px);
  opacity:0;
  animation:subir-farol var(--d,16s) linear var(--r,0s) infinite;
  animation-play-state:paused;
  will-change:transform,opacity;
}
.farol-sube img{width:100%;height:auto;filter:drop-shadow(0 0 10px rgba(255,205,120,.75))}
@keyframes subir-farol{
  0%{transform:translate3d(0,0,0) rotate(var(--g0,-4deg));opacity:0}
  9%{opacity:var(--o,.9)}
  50%{transform:translate3d(var(--x1,26px),calc(var(--alto,800px) * -.5),0) rotate(var(--g1,5deg))}
  86%{opacity:var(--o,.9)}
  100%{transform:translate3d(var(--x2,-20px),calc(var(--alto,800px) * -1),0) rotate(var(--g0,-4deg));opacity:0}
}
.florecita{
  position:absolute;
  top:-40px;
  width:var(--t,16px);
  height:var(--t,16px);
  background:url(assets/flor.webp) center/contain no-repeat;
  opacity:0;
  animation:caer-flor var(--d,13s) linear var(--r,0s) infinite;
  animation-play-state:paused;
}
@keyframes caer-flor{
  0%{transform:translate3d(0,0,0) rotate(var(--g0,0deg));opacity:0}
  10%{opacity:var(--o,.8)}
  50%{transform:translate3d(var(--x1,30px),calc(var(--alto,900px) * .5),0) rotate(calc(var(--g0,0deg) + 160deg))}
  88%{opacity:var(--o,.8)}
  100%{transform:translate3d(var(--x2,-20px),var(--alto,900px),0) rotate(calc(var(--g0,0deg) + 320deg));opacity:0}
}
.viva > .faroles .farol-sube,.viva > .florecitas .florecita,
body.cerrado .faroles--portada .farol-sube{animation-play-state:running}
html.viajando .faroles--portada .farol-sube{animation-play-state:paused}
/* el farol que suelta cada clic o toque, y los que salen en la portada (los crea y los borra faroles.js) */
.capa-clic{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.farol-clic{position:absolute;left:0;top:0;width:var(--t,44px);margin:calc(var(--t,44px) * -.75) 0 0 calc(var(--t,44px) * -.5);will-change:transform,opacity}
.farol-clic img{width:100%;height:auto;filter:drop-shadow(0 0 12px rgba(255,205,120,.85))}

/* ------------------------------------------------------------------
   PORTADA · la torre al anochecer (fotograma 0 del video)
   ------------------------------------------------------------------ */
.portada{position:fixed;inset:0;z-index:60;overflow:hidden;background:var(--noche)}
body.abierto .portada{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease,visibility 0s linear .6s}
.mundo{position:absolute;inset:0;visibility:hidden}
.portada.lista .mundo{visibility:visible}
.panel{position:absolute;inset:0;will-change:transform}
.panel__arte{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.panel--fin{opacity:0}

.portada__bruma{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(31,18,56,.8) 0%,rgba(31,18,56,.5) 11%,rgba(31,18,56,.1) 22%,rgba(31,18,56,0) 29%),
    linear-gradient(0deg,rgba(20,10,40,.86) 0%,rgba(20,10,40,.46) 12%,rgba(20,10,40,0) 23%);
}

/* el farol vive: un resplandor dorado que late y tres destellos (su sitio lo pone faroles.js desde COORDS) */
.farol-vivo{position:absolute;left:0;top:0;z-index:4;width:0;height:0;pointer-events:none;visibility:hidden}
.portada.lista .farol-vivo{visibility:visible}
.farol-vivo__luz{
  position:absolute;
  left:calc(-96px * var(--k,1));
  top:calc(-96px * var(--k,1));
  width:calc(192px * var(--k,1));
  height:calc(192px * var(--k,1));
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,208,.9) 0%,rgba(255,200,110,.5) 30%,rgba(255,200,110,0) 66%);
  mix-blend-mode:screen;
  animation:late 2.6s ease-in-out infinite;
}
@keyframes late{0%,100%{transform:scale(.66);opacity:.45}50%{transform:scale(1.1);opacity:1}}
.glint{
  position:absolute;
  left:0;
  top:0;
  width:22px;
  height:22px;
  margin:-11px 0 0 -11px;
  background:#FFF6DC;
  clip-path:polygon(50% 0,56% 44%,100% 50%,56% 56%,50% 100%,44% 56%,0 50%,44% 44%);
  opacity:0;
  animation:glint 3.4s ease-in-out infinite;
}
.glint--1{transform:translate(calc(-54px * var(--k,1)),calc(-46px * var(--k,1)))}
.glint--2{transform:translate(calc(58px * var(--k,1)),calc(-30px * var(--k,1)));animation-delay:-1.2s}
.glint--3{transform:translate(calc(8px * var(--k,1)),calc(-84px * var(--k,1)));animation-delay:-2.3s}
@keyframes glint{0%,70%,100%{opacity:0;scale:.3}82%{opacity:1;scale:1}}
.chispas{position:absolute;inset:0;z-index:5;pointer-events:none}
.chispa{position:absolute;left:0;top:0;width:var(--s,14px);height:var(--s,14px);margin:calc(var(--s,14px) / -2) 0 0 calc(var(--s,14px) / -2);color:var(--c,#fff);opacity:0}
.chispa svg{display:block;width:100%;height:100%;filter:drop-shadow(0 0 6px var(--c,rgba(255,225,160,.95)))}
/* los destellos del toque van en una capa del tamaño de la página que recorta (no la ensanchan en los bordes) */
body{position:relative}
.magia{position:absolute;inset:0;z-index:30;overflow:hidden;pointer-events:none}
.chispa--suelta{position:absolute;z-index:30;pointer-events:none}
html.viajando .glint,html.viajando .farol-vivo__luz,
body.abierto .glint,body.abierto .farol-vivo__luz,body.abierto .portada__pista::before,body.abierto .portada__pista .pista__mano{animation-play-state:paused}

/* cabecera: su nombre en oro */
.portada__cabecera{
  position:absolute;
  left:0;
  right:0;
  top:0;
  z-index:6;
  height:var(--cielo,21vh);
  min-height:168px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:calc(var(--arriba) + 12px) 12px 0;
  text-align:center;
  pointer-events:none;
  visibility:hidden;
}
.portada.lista .portada__cabecera{visibility:visible}
.portada__sobre{
  display:block;
  margin:0 0 0 .38em;
  font-family:var(--sans);
  font-size:clamp(11.5px,3.1vw,14px);
  line-height:1.4;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:var(--oro-claro);
}
.portada__nombres{
  display:inline-block;
  padding:.08em .2em .12em .14em;
  font-family:var(--script);
  font-weight:700;
  font-size:max(84px,min(27vw,calc((var(--cielo,220px) - 36px) * .98),210px));
  line-height:.9;
  white-space:nowrap;
  background:var(--letra-oro);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 3px 12px rgba(20,8,44,.9)) drop-shadow(0 0 2px rgba(20,8,44,.7));
}
.portada__para{
  margin-top:2px;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  max-width:calc(100vw - 40px);
  padding:7px 20px 6px;
  border-radius:14px;
  background:rgba(251,248,255,.95);
  color:var(--tinta);
}
.portada__para small{font-family:var(--sans);font-size:9.5px;line-height:1.5;letter-spacing:.26em;text-transform:uppercase;color:var(--morado);margin-left:.26em}
.portada__para b{font-family:var(--serif);font-size:clamp(19px,5.6vw,26px);line-height:1.2}
html.invitado .portada__cabecera{justify-content:flex-start;height:auto;padding-top:calc(var(--arriba) + clamp(8px,1.6vh,22px))}
html.invitado .portada__nombres{font-size:max(76px,min(23vw,170px))}

/* el toque: botón a pantalla completa; abajo, la fecha y el llamado con la manito */
.portada__tap{
  position:absolute;
  inset:0;
  z-index:7;
  width:100%;
  border:0;
  margin:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:11px;
  padding:0 16px calc(var(--abajo) + clamp(14px,3vh,40px));
  font:inherit;
  color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.portada__tap:focus-visible{outline:none}
.portada__fecha{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:2px 10px;
  max-width:100%;
  padding:8px 16px 8px;
  border-radius:999px;
  background:rgba(251,248,255,.96);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:clamp(12.5px,3.5vw,16.5px);
  line-height:1.3;
}
.portada__sep{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--oro)}
.portada__pista{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:0 26px 0 20px;
  border-radius:999px;
  border:1.5px solid var(--oro);
  background:var(--oro);
  color:var(--noche);
  font-family:var(--sans);
  font-size:13.5px;
  line-height:1.2;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}
.portada__pista::before{
  content:'';
  position:absolute;
  inset:-7px;
  border-radius:999px;
  border:1.5px solid var(--oro-claro);
  animation:anillo 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes anillo{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.08,1.3);opacity:0}}
.pista__mano{width:22px;height:22px;flex:0 0 auto;animation:toque 1.8s ease-in-out infinite}
@keyframes toque{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(4px) scale(.88)}70%{transform:translateY(0) scale(1)}}
@media (hover:hover) and (pointer:fine){
  .portada__tap:hover .portada__pista,
  .portada__tap:focus-visible .portada__pista{background:var(--crema);color:var(--morado-osc);border-color:var(--crema)}
}
/* en horizontal el farol queda más abajo: la fecha y el llamado van uno al lado del otro, bien al pie */
html.horizontal .portada__tap{flex-direction:row;align-items:flex-end;justify-content:center;gap:14px;padding-bottom:calc(var(--abajo) + clamp(10px,2.2vh,26px))}
html.horizontal .portada__fecha{min-height:46px}
html.horizontal .portada__pista{min-height:46px}

.velo{
  position:absolute;
  inset:0;
  z-index:9;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:radial-gradient(circle at 50% 42%,#FFF6DC 0%,#F2D898 46%,#7B4FB3 100%);
}

/* ------------------------------------------------------------------
   EL RECORRIDO · video, su foto en el marco redondo y las placas
   ------------------------------------------------------------------ */
.viaje{position:absolute;inset:0;z-index:4;opacity:0;visibility:hidden;pointer-events:none}
.viaje__video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;background:var(--noche);opacity:0}
/* la foto ocupa el interior del círculo y sigue al video cuadro a cuadro */
.viaje__foto{position:absolute;left:0;top:0;width:0;height:0;opacity:0;overflow:hidden;border-radius:50%;background:var(--lila-1)}
.viaje__foto img{width:100%;height:100%;max-width:none;object-fit:cover}
.viaje__foto::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  background:radial-gradient(circle at 50% 46%,rgba(255,255,255,.98) 0%,rgba(255,240,205,.75) 52%,rgba(255,240,205,0) 90%);
  opacity:0;
  pointer-events:none;
}
.viaje__foto--luz::after{animation:destello-foto 1.6s ease-out 1}
@keyframes destello-foto{0%{opacity:1}100%{opacity:0}}

.viaje__texto,.viaje__final,html.horizontal .viaje__placa{
  background:var(--placa);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1.5px rgba(242,216,152,.6);
}
.viaje__texto{
  position:absolute;
  left:6%;
  right:6%;
  bottom:calc(var(--abajo) + 10%);
  z-index:2;
  margin:0;
  padding:15px 20px 14px;
  border-radius:18px;
  text-align:center;
  text-wrap:balance;
  font-family:var(--serif);
  font-size:clamp(20px,5.6vw,26px);
  line-height:1.3;
  color:#FFF6E4;
  opacity:0;
}
.viaje__final{
  position:absolute;
  left:6%;
  right:6%;
  bottom:calc(var(--abajo) + 3%);
  z-index:2;
  padding:2px 16px 14px;
  border-radius:18px;
  text-align:center;
  opacity:0;
}
.viaje__placa{position:relative;margin:0}
.viaje__nombre{display:inline-block;padding:.06em .18em .1em .12em;font-family:var(--script);font-weight:700;font-size:clamp(78px,24vw,118px);line-height:.96;white-space:nowrap;background:var(--letra-oro);-webkit-background-clip:text;background-clip:text;color:transparent}
.viaje__invita{display:block;margin-top:-4px;text-wrap:balance;font-family:var(--sans);font-size:clamp(11.5px,3.2vw,13.5px);line-height:1.7;letter-spacing:.2em;text-transform:uppercase;color:#FFF6E4}
.viaje__invita b{color:var(--oro-claro)}

html.horizontal .viaje__texto{
  left:0;
  right:0;
  width:fit-content;
  max-width:88vw;
  margin:0 auto;
  bottom:calc(var(--abajo) + 6%);
  padding:15px 34px 14px;
  font-size:clamp(20px,2vw,32px);
}
html.horizontal .viaje__final{inset:0;padding:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;--sep:clamp(90px,max(11.6vw,19.6vh),240px);--lado:calc(var(--m-left,38vw) - var(--sep) - 12px)}
html.horizontal .viaje__placa{
  position:absolute;
  top:var(--m-mid,46vh);
  transform:translateY(-50%);
  width:min(30vw,460px,var(--lado));
  padding:14px 22px 16px;
  border-radius:18px;
  text-align:center;
}
html.horizontal .viaje__placa--nombre{right:calc(100% - var(--m-left,38vw) + var(--sep))}
html.horizontal .viaje__placa--invita{left:calc(var(--m-right,62vw) + var(--sep));padding:20px 22px 18px}
html.horizontal .viaje__nombre{font-size:clamp(44px,min(9vw,calc((var(--lado) - 50px) / 2.7)),170px)}
html.horizontal .viaje__invita{margin-top:0;font-size:clamp(11.5px,1vw,14.5px);line-height:1.9}
html.horizontal .viaje__invita b{display:block;font-family:var(--serif);font-size:2.3em;letter-spacing:.02em;text-transform:none;line-height:1.2;margin-top:4px}

/* ------------------------------------------------------------------
   BOTONES FIJOS · volver y música
   ------------------------------------------------------------------ */
.volver-fijo{
  position:fixed;
  left:calc(12px + env(safe-area-inset-left,0px));
  top:calc(var(--arriba) + 12px);
  z-index:40;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:0 16px 0 10px;
  border:1px solid var(--oro-claro);
  border-radius:999px;
  background:rgba(251,248,255,.95);
  color:var(--tinta);
  font:400 12px/1 var(--sans);
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transition:opacity .5s ease,visibility 0s linear .5s,background-color .3s ease,color .3s ease;
}
.volver-fijo svg{width:18px;height:18px}
body.abierto .volver-fijo{opacity:1;visibility:visible;transition:opacity .5s ease .5s,visibility 0s,background-color .3s ease,color .3s ease}
.volver-fijo:hover,.volver-fijo:focus-visible{background:var(--morado);color:#fff}
.musica-flotante{
  position:fixed;
  right:calc(14px + env(safe-area-inset-right,0px));
  bottom:calc(var(--abajo) + 16px);
  z-index:70;
  display:none;
  align-items:center;
  gap:8px;
  height:52px;
  padding:0 16px 0 12px;
  border:1px solid var(--oro-claro);
  border-radius:999px;
  background:rgba(31,18,56,.92);
  color:var(--oro-claro);
  cursor:pointer;
}
html.musica .musica-flotante{display:inline-flex}
/* durante el recorrido no se ve (taparía las placas); en la portada, solo el farol */
html.viajando .musica-flotante{visibility:hidden}
body.cerrado .musica-flotante{padding:0 14px}
body.cerrado .musica-flotante__ondas{display:none}
.musica-flotante__farol{width:22px;display:flex;align-items:center}
.musica-flotante__farol img{width:100%;height:auto}
.musica-flotante--tocando .musica-flotante__farol{animation:late-farol 1.8s ease-in-out infinite}
@keyframes late-farol{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.musica-flotante__ondas{display:inline-flex;align-items:flex-end;gap:3px;height:18px}
.musica-flotante__ondas i{width:3px;height:6px;border-radius:2px;background:currentColor}
.musica-flotante--tocando .musica-flotante__ondas i{animation:onda 1s ease-in-out infinite}
.musica-flotante--tocando .musica-flotante__ondas i:nth-child(2){animation-delay:-.3s}
.musica-flotante--tocando .musica-flotante__ondas i:nth-child(3){animation-delay:-.6s}
.musica-flotante--tocando .musica-flotante__ondas i:nth-child(4){animation-delay:-.15s}
@keyframes onda{0%,100%{height:5px}50%{height:18px}}

/* ------------------------------------------------------------------
   PIEZAS COMUNES · secciones, cabezas, trenzas, botones
   ------------------------------------------------------------------ */
.valle > section{position:relative;padding:clamp(66px,11vw,112px) var(--pad);overflow:hidden}
.valle > section > header,
.valle > section > p,
.valle > section > a,
.valle > section > h2,
.valle > section > button,
.valle > section > .luces,
.valle > section > .pase,
.valle > section > .atuendos,
.valle > section > .reservado,
.valle > section > .sobres,
.valle > section > .contador,
.valle > section > .respuestas,
.valle > section > .luciana__dentro,
.valle > section > .puntual__dentro,
.valle > section > .fecha__dentro{position:relative;z-index:1}
.noche{
  color:#FFF6E4;
  background:
    linear-gradient(180deg,rgba(31,18,56,.9) 0%,rgba(31,18,56,.62) 42%,rgba(31,18,56,.9) 100%),
    var(--noche) url(assets/noche.webp) center/cover no-repeat;
}

.esquina{position:absolute;z-index:0;width:min(44vw,290px);pointer-events:none;opacity:.94}
.esquina--a{left:-4%;top:-2%}
.esquina--b{right:-4%;top:-2%;transform:scaleX(-1)}

.cabeza{text-align:center;margin:0 auto 26px;max-width:760px}
.rotulo{
  margin:0 0 2px .3em;
  font-family:var(--sans);
  font-size:12.5px;
  line-height:1.6;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--morado);
}
.rotulo--claro{color:var(--oro-claro)}
.rotulo--chico{font-size:11.5px;margin-top:26px}
.titulo{
  margin:0;
  padding:.06em .1em .1em;
  font-family:var(--script);
  font-weight:700;
  font-size:clamp(58px,16.5vw,98px);
  line-height:1;
  color:var(--morado-osc);
  text-wrap:balance;
}
.titulo--claro{background:var(--letra-oro);-webkit-background-clip:text;background-clip:text;color:transparent}
/* un título que es una frase entera (la de la sección de regalos): más chico, en dos o tres líneas */
.titulo--frase{font-size:clamp(42px,11.6vw,72px);line-height:1.06}
/* la trenza dorada bajo cada título: se teje del centro hacia los lados */
.trenza{display:block;width:min(64vw,300px);margin:6px auto 0}
.trenza img{width:100%;height:auto;clip-path:inset(0 50% 0 50%);transition:clip-path 1.2s cubic-bezier(.3,.7,.2,1)}
.trenza.tejida img{clip-path:inset(0 0 0 0)}
html:not(.js) .trenza img,html.suave .trenza img{clip-path:none}

.revela{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.revela.vista{opacity:1;transform:none}
html:not(.js) .revela,html.suave .revela{opacity:1;transform:none}

.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:54px;
  padding:0 28px;
  border-radius:999px;
  border:1.5px solid var(--morado);
  background:var(--morado);
  color:#fff;
  font-family:var(--sans);
  font-size:13.5px;
  line-height:1.2;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}
.boton svg{width:21px;height:21px;flex:0 0 auto}
.boton:hover,.boton:focus-visible{background:var(--uva);border-color:var(--uva)}
.boton--no,.boton--claro{background:transparent;color:var(--morado-osc);border-color:var(--lila)}
.boton--no:hover,.boton--no:focus-visible,.boton--claro:hover,.boton--claro:focus-visible{background:var(--uva);border-color:var(--uva);color:#fff}

/* ------------------------------------------------------------------
   LUCIANA
   ------------------------------------------------------------------ */
.luciana{background:radial-gradient(120% 60% at 50% 0%,#FFFFFF 0%,var(--crema) 50%,var(--lila-1) 100%);padding-top:clamp(74px,12vw,120px)}
.luciana__dentro{max-width:1060px;margin:0 auto;display:grid;gap:8px;justify-items:center;text-align:center}
.marco{position:relative;margin:0;width:min(86vw,420px);aspect-ratio:var(--marco-ratio,1.0045)}
.marco__arte{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
.marco__foto{position:absolute;z-index:1;left:15%;top:15%;width:70%;height:70%;border-radius:50%;overflow:hidden;background:var(--lila-2)}
.marco__foto img{width:100%;height:100%;max-width:none;object-fit:cover}
.luciana__texto{max-width:560px}
.luciana__nombre{
  margin:0;
  padding:.04em .1em .08em;
  font-family:var(--script);
  font-weight:700;
  font-size:clamp(84px,26vw,190px);
  line-height:.9;
  color:var(--morado-osc);
  white-space:nowrap;
}
.luciana__saludo{margin:12px 0 0;color:var(--morado)}
.luciana__dedicatoria{margin:18px auto 0;max-width:29em;text-wrap:pretty}
.luciana__firma{margin:10px 0 0;font-family:var(--script);font-weight:700;font-size:56px;line-height:1;color:var(--oro-osc)}

/* ------------------------------------------------------------------
   MI FAMILIA · dos faroles de papel que se encienden
   ------------------------------------------------------------------ */
.familia{text-align:center}
.luces{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,4vw,34px);max-width:640px;margin:8px auto 0;align-items:start}
.luz{position:relative;margin:0;display:flex;flex-direction:column;align-items:center}
.luz__papel{
  position:relative;
  width:100%;
  min-height:clamp(230px,62vw,300px);
  padding:34px 10px 40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  border-radius:48% 48% 34% 34% / 34% 34% 20% 20%;
  background:linear-gradient(180deg,#8E7BA8 0%,#77648F 100%);
  color:#2B1B45;
  box-shadow:inset 0 0 0 1.5px rgba(242,216,152,.35);
  transition:background 1.2s ease,box-shadow 1.2s ease;
}
.luz__papel::before{content:'';position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(90deg,rgba(60,30,90,0) 0 24%,rgba(60,30,90,.1) 24% 24.6%);pointer-events:none}
.luz.encendida .luz__papel{
  background:radial-gradient(90% 70% at 50% 82%,#FFF9E6 0%,#FFE7AE 42%,#F6C870 100%);
  box-shadow:inset 0 0 0 1.5px rgba(242,216,152,.9),0 0 46px rgba(255,205,120,.55),0 0 110px rgba(255,190,100,.3);
}
.luz__rol{position:relative;font-family:var(--sans);font-size:10.5px;line-height:1.5;letter-spacing:.26em;text-transform:uppercase;color:var(--morado-osc);margin:0 0 4px .26em}
.luz__nombre{position:relative;font-family:var(--serif);font-size:clamp(17px,4.9vw,24px);line-height:1.2;text-wrap:balance}
.luz__y{position:relative;font-family:var(--script);font-weight:700;font-size:30px;line-height:.8;color:var(--oro-osc)}
.luz__llama{position:relative;width:38%;height:16px;margin-top:-3px;border-radius:0 0 12px 12px;background:linear-gradient(180deg,#5A4576,#3A2A55);box-shadow:inset 0 0 0 1px rgba(242,216,152,.3)}
.luz.encendida .luz__llama{background:linear-gradient(180deg,#F6C870,#D2A245);box-shadow:0 8px 22px rgba(255,200,110,.7)}
.viva .luz.encendida{animation:flota-farol 5.4s ease-in-out infinite alternate}
.viva .luz.encendida:nth-child(2){animation-delay:-2.2s}
@keyframes flota-farol{from{translate:0 0;rotate:-1.2deg}to{translate:0 -12px;rotate:1.2deg}}
.familia__nota{margin:30px auto 0;max-width:26em;text-wrap:balance;color:#F3E9FF}

/* ------------------------------------------------------------------
   LA FECHA · video de fondo y cuenta regresiva
   ------------------------------------------------------------------ */
.valle > .fecha{
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:var(--noche) url(assets/fondo-poster.jpg) center/cover no-repeat;
}
.valle .fecha__video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.valle .fecha__velo{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at 50% 46%,rgba(26,14,50,.34) 0%,rgba(26,14,50,.7) 74%),linear-gradient(180deg,rgba(26,14,50,.6) 0%,rgba(26,14,50,0) 22%,rgba(26,14,50,0) 78%,rgba(26,14,50,.66) 100%)}
.fecha__dentro{z-index:2!important;width:100%;max-width:620px}
.fecha__grande{display:flex;flex-direction:column;align-items:center;margin-top:8px}
.fecha__dia{font-family:var(--sans);font-size:15.5px;line-height:1.4;letter-spacing:.44em;text-transform:uppercase;margin-left:.44em}
.fecha__num{
  font-family:var(--serif);
  font-size:clamp(136px,41vw,206px);
  line-height:.96;
  background:var(--letra-oro);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 6px 22px rgba(12,4,30,.7));
}
.fecha__mes{font-family:var(--serif);font-size:clamp(22px,6vw,28px);line-height:1.3}
.fecha__hora{
  margin-top:14px;
  padding:9px 22px 8px;
  border-radius:999px;
  border:1px solid rgba(242,216,152,.8);
  font-family:var(--sans);
  font-size:14.5px;
  line-height:1.3;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.cuenta{display:flex;justify-content:center;gap:clamp(8px,2.6vw,16px);margin-top:10px}
.cuenta__dato{
  flex:0 1 84px;
  padding:13px 4px 10px;
  border-radius:18px;
  border:1px solid rgba(242,216,152,.5);
  background:rgba(60,36,102,.34);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
}
.cuenta__n{display:block;font-family:var(--serif);font-size:clamp(29px,8.6vw,39px);line-height:1.05;font-variant-numeric:tabular-nums}
.cuenta__t{display:block;margin-top:3px;font-family:var(--sans);font-size:10.5px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:var(--oro-claro)}
.cuenta__hoy{margin:16px 0 0;font-family:var(--script);font-weight:700;font-size:56px;line-height:1}

/* ------------------------------------------------------------------
   EL LUGAR
   ------------------------------------------------------------------ */
.lugar-sec{background:linear-gradient(180deg,var(--crema) 0%,var(--lila-1) 100%);text-align:center}
.lugar{
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:440px;
  margin:0 auto;
  padding:34px 22px 28px;
  border-radius:220px 220px 28px 28px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 58%,var(--lila-1) 100%);
  box-shadow:inset 0 0 0 1.5px var(--oro),inset 0 0 0 7px #FFF,inset 0 0 0 8px rgba(210,162,69,.4),0 24px 44px -30px rgba(85,48,140,.6);
  color:var(--tinta);
  text-decoration:none;
  text-align:center;
  -webkit-tap-highlight-color:transparent;
}
.lugar__pin{width:86px;height:auto;margin:6px 0 10px;transform-origin:50% 100%}
.viva .lugar__pin{animation:flota 3.6s ease-in-out infinite alternate}
@keyframes flota{from{translate:0 0}to{translate:0 -7px}}
.lugar__tipo{font-family:var(--sans);font-size:11.5px;line-height:1.6;letter-spacing:.3em;text-transform:uppercase;color:var(--morado);margin-left:.3em}
.lugar__nombre{margin-top:2px;font-family:var(--serif);font-size:clamp(26px,7.4vw,32px);line-height:1.18;color:var(--morado-osc);text-wrap:balance}
.lugar__sitio{margin-top:8px;line-height:1.4}
.lugar__ref{margin-top:12px;padding:10px 14px;border-radius:14px;background:var(--lila-1);font-size:17px;line-height:1.4;text-wrap:balance}
.lugar__ref b{display:block;font-family:var(--sans);font-size:10.5px;line-height:1.7;letter-spacing:.24em;text-transform:uppercase;color:var(--morado)}
.lugar__hora{margin-top:14px;padding-top:12px;border-top:1px solid var(--oro-claro);line-height:1.4}
.lugar__hora b{font-family:var(--sans);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--morado)}
.lugar__ir{
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:50px;
  padding:0 24px 0 18px;
  border-radius:999px;
  background:var(--morado);
  color:#fff;
  font-family:var(--sans);
  font-size:13px;
  line-height:1.2;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:background-color .3s ease;
}
.lugar__ir .pista__mano{animation-play-state:paused}
.viva .lugar__ir .pista__mano{animation-play-state:running}
.lugar:hover .lugar__ir,.lugar:focus-visible .lugar__ir{background:var(--uva)}

/* ------------------------------------------------------------------
   A LA HORA EXACTA · un reloj cuyas agujas corren hasta la hora de la fiesta (las 6:00)
   ------------------------------------------------------------------ */
.puntual{background:var(--lila-1);text-align:center}
.puntual__dentro{max-width:720px;margin:0 auto;display:grid;gap:18px;justify-items:center}
.reloj{display:block;width:min(52vw,210px)}
.reloj svg{display:block;width:100%;height:auto;overflow:visible}
.reloj__aro{fill:#FFF;stroke:var(--oro);stroke-width:3}
.reloj__aro--fino{fill:none;stroke:var(--oro-claro);stroke-width:1.2}
.reloj__marcas line{stroke:var(--oro-osc);stroke-width:2;stroke-linecap:round}
.reloj__marcas line.meta{stroke:var(--morado);stroke-width:4.5}
.reloj__hora{stroke:var(--morado-osc);stroke-width:6;stroke-linecap:round;transform-origin:100px 100px}
.reloj__min{stroke:var(--morado);stroke-width:3.5;stroke-linecap:round;transform-origin:100px 100px}
.reloj__eje{fill:var(--oro)}
.puntual__titulo{margin:0;padding:.04em .1em .08em;font-family:var(--script);font-weight:700;font-size:clamp(58px,16.5vw,92px);line-height:1;color:var(--morado-osc)}
/* 8-oct: en vez del título en letra de carta va su frase ("Recomendación general: llegar a la hora solicitada...") */
.puntual__rotulo{font-weight:400}
.puntual__frase{margin:10px auto 0;max-width:15em;font-family:var(--serif);font-size:clamp(26px,7.2vw,36px);line-height:1.2;color:var(--morado-osc);text-wrap:balance}
.puntual__nota{margin:14px auto 0;max-width:22em;text-wrap:balance}
.puntual__nota b{color:var(--morado-osc);box-shadow:inset 0 -.42em 0 rgba(242,216,152,.75)}

/* ------------------------------------------------------------------
   TU PASE · un solo acompañante por invitado
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   ITINERARIO · el camino de los faroles: un hilo dorado y, en cada momento, un farol de papel. Los faroles
   esperan apagados y se encienden uno tras otro al llegar (clase "encendido", la pone faroles.js)
   ------------------------------------------------------------------ */
.camino{position:relative;z-index:1;list-style:none;margin:14px auto 0;padding:0;width:min(100%,340px)}
.momento{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr);column-gap:18px;padding:0 0 30px}
.momento:last-child{padding-bottom:0}
/* el hilo baja del farol de un momento al del siguiente; se dora cuando su farol ya se encendió */
.momento::before{content:'';position:absolute;left:28px;top:78px;bottom:2px;width:2px;border-radius:2px;background:repeating-linear-gradient(180deg,rgba(242,216,152,.22) 0 5px,rgba(242,216,152,0) 5px 11px)}
.momento::after{content:'';position:absolute;left:28px;top:78px;bottom:2px;width:2px;border-radius:2px;background:repeating-linear-gradient(180deg,var(--oro-claro) 0 5px,rgba(242,216,152,0) 5px 11px);opacity:0;transition:opacity 1s ease .25s}
.momento:last-child::before,.momento:last-child::after{display:none}
.momento.encendido::after{opacity:1}
.momento__farol{grid-row:1 / span 2;align-self:start;display:block;width:48px;margin:0 auto;filter:brightness(.4) saturate(.3);transform:translateY(8px) scale(.9);transition:filter 1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.momento__farol img{display:block;width:100%;height:auto}
.momento.encendido .momento__farol{filter:drop-shadow(0 0 12px rgba(255,205,120,.85));transform:none}
.viva .momento.encendido .momento__farol img{animation:mece-farolito 4.6s ease-in-out infinite alternate}
.viva .momento:nth-child(even).encendido .momento__farol img{animation-delay:-2.1s}
@keyframes mece-farolito{from{translate:0 0;rotate:-2deg}to{translate:0 -5px;rotate:2deg}}
.momento__hora{align-self:end;padding-top:6px;font-family:var(--sans);font-size:12px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--oro-claro);opacity:.45;transition:opacity .9s ease}
.momento__hora b{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1;letter-spacing:.02em;color:#FFF6E4;margin-right:5px}
.momento__que{align-self:start;font-family:var(--serif);font-size:clamp(22px,6vw,27px);line-height:1.15;color:#FFF6E4;opacity:.45;transition:opacity .9s ease}
.momento.encendido .momento__hora,.momento.encendido .momento__que{opacity:1}
@media (max-width:360px){.momento__hora{font-size:11px;letter-spacing:.07em}}
html:not(.js) .momento .momento__farol{filter:none;transform:none}
html:not(.js) .momento .momento__hora,html:not(.js) .momento .momento__que,html:not(.js) .momento::after{opacity:1}

.pase-sec{text-align:center}
.pase{
  position:relative;
  overflow:hidden;
  max-width:400px;
  margin:6px auto 0;
  padding:34px 22px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  border-radius:26px;
  background:linear-gradient(150deg,#FFF9E6 0%,#F6DC9C 34%,#FFF3CF 54%,#E3B757 80%,#F9E7B8 100%);
  color:var(--noche);
  box-shadow:0 0 0 1px rgba(255,246,220,.7),0 0 54px rgba(255,205,120,.4);
}
.pase::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 100%);animation:barrido 3.8s ease-in-out infinite;animation-play-state:paused}
.viva .pase::after{animation-play-state:running}
@keyframes barrido{0%,55%{left:-60%}100%{left:130%}}
.pase__flor{width:54px;margin-bottom:6px}
.pase > b{font-family:var(--script);font-weight:700;font-size:clamp(62px,18vw,84px);line-height:.95;color:var(--uva)}
.pase__detalle{margin-top:4px;font-family:var(--sans);font-size:14px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--uva)}
.pase__detalle b{color:var(--morado)}
.pase__corte{display:block;width:100%;margin:18px 0 12px;border-top:2px dashed rgba(58,36,102,.4)}
.pase__pie{font-family:var(--sans);font-size:11px;line-height:1.5;letter-spacing:.2em;text-transform:uppercase;color:rgba(58,36,102,.85)}

/* ------------------------------------------------------------------
   CÓDIGO DE VESTIMENTA
   ------------------------------------------------------------------ */
.vestir{background:linear-gradient(180deg,var(--lila-1) 0%,var(--crema) 100%);text-align:center}
.atuendos{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:540px;margin:0 auto}
.atuendo{margin:0}
.atuendo__arco{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  height:clamp(240px,66vw,340px);
  padding:26px 14px 16px;
  border-radius:999px 999px 22px 22px;
  background:linear-gradient(180deg,#FFFFFF 0%,var(--lila-1) 100%);
  box-shadow:inset 0 0 0 1.5px var(--oro),inset 0 0 0 7px #FFF,inset 0 0 0 8px rgba(210,162,69,.4);
}
.atuendo__arco img{width:auto;max-width:100%;max-height:100%;object-fit:contain}
.atuendo figcaption{margin-top:10px;font-family:var(--script);font-weight:700;font-size:44px;line-height:1;color:var(--morado-osc)}
.reservado{max-width:460px;margin:26px auto 0;display:flex;flex-direction:column;align-items:center;gap:12px}
.reservado__tonos{display:flex;gap:7px}
.reservado__tonos i{width:30px;height:30px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(58,36,102,.2),inset -4px -5px 8px -5px rgba(58,36,102,.45)}
.reservado__texto{margin:0;text-wrap:balance}
.reservado__texto b{color:var(--morado-osc)}

/* ------------------------------------------------------------------
   ENCIENDE UN FAROL (sección única)
   ------------------------------------------------------------------ */
.deseos{text-align:center;min-height:92svh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.deseos__texto{margin:0 auto;max-width:24em;text-wrap:balance;color:#F3E9FF}
.deseos__farol{position:relative;z-index:1;display:block;width:min(40vw,170px);margin:30px auto 0;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.deseos__farol img{position:relative;width:100%;height:auto}
.viva .deseos__farol img{animation:flota-farol 4.6s ease-in-out infinite alternate}
.deseos__halo{position:absolute;left:50%;top:50%;width:230%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,214,140,.5) 0%,rgba(255,214,140,0) 62%);pointer-events:none}
.viva .deseos__halo{animation:late 2.8s ease-in-out infinite}
.deseos__guia{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;margin:20px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--oro-claro)}
.deseos__guia .pista__mano{width:20px;height:20px;animation-play-state:paused}
.viva .deseos__guia .pista__mano{animation-play-state:running}
.deseos__cuenta{position:relative;z-index:1;margin:20px 0 0;font-family:var(--sans);font-size:13px;line-height:1.5;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-claro)}
.deseos__cuenta b{color:#FFF}
.deseos__gracias{position:relative;z-index:1;margin:6px 0 0;font-family:var(--script);font-weight:700;font-size:clamp(50px,14vw,72px);line-height:1;background:var(--letra-oro);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;transform:scale(.9);transition:opacity 1s ease,transform 1.2s cubic-bezier(.3,1.4,.5,1)}
.deseos__gracias.vista{opacity:1;transform:none}

/* ------------------------------------------------------------------
   LLUVIA DE SOBRES
   ------------------------------------------------------------------ */
.regalos{background:var(--crema);text-align:center}
.regalos__intro{margin:0 auto;max-width:25em;text-wrap:balance}
/* "Regalo en mano" (lo pidió sumar el 8-oct): una tarjetita blanca con filo dorado y un regalo dibujado a línea */
.regalos__mano{display:flex;align-items:center;gap:14px;max-width:440px;margin:22px auto 0;padding:15px 20px 15px 16px;border-radius:22px;background:#FFF;box-shadow:inset 0 0 0 1.5px var(--oro-claro),0 14px 22px -18px rgba(58,36,102,.5);text-align:left}
.regalos__mano svg{flex:none;width:38px;height:38px;color:var(--oro-osc)}
.regalos__mano b{font-weight:400;color:var(--morado-osc)}
.sobres{
  position:relative;
  overflow:hidden;
  max-width:520px;
  margin:28px auto 0;
  padding:34px 22px 30px;
  border-radius:30px;
  background:linear-gradient(180deg,#FFFFFF 0%,var(--lila-2) 100%);
  box-shadow:inset 0 0 0 1.5px var(--oro),inset 0 0 0 7px #FFF,inset 0 0 0 8px rgba(210,162,69,.4);
}
.sobres__lluvia{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sobre-cae{
  position:absolute;
  top:-60px;
  width:var(--t,34px);
  aspect-ratio:520 / 460;
  background:url(assets/sobre.webp) center/contain no-repeat;
  opacity:0;
  animation:cae-sobre var(--d,8s) linear var(--r,0s) infinite;
  animation-play-state:paused;
}
.viva .sobre-cae{animation-play-state:running}
@keyframes cae-sobre{
  0%{transform:translate3d(0,0,0) rotate(var(--g0,0deg));opacity:0}
  12%{opacity:.5}
  85%{opacity:.5}
  100%{transform:translate3d(var(--x2,20px),var(--alto,620px),0) rotate(calc(var(--g0,0deg) + var(--g1,120deg)));opacity:0}
}
.sobres > :not(.sobres__lluvia){position:relative}
/* el nombre de la opción, arriba de la tarjeta (8-oct): hace pareja con "Regalo en mano:" */
.sobres__titulo{margin:0 0 12px;font-family:var(--serif);font-size:clamp(23px,6.2vw,28px);line-height:1.2;color:var(--morado-osc)}
.sobres__ico{width:124px;margin:0 auto 4px}
.sobres__texto{margin:6px auto 0;max-width:22em;text-wrap:balance}
.sobres__qr{margin:16px auto 0;width:min(66vw,230px)}
.sobres__codigo{display:block;position:relative;aspect-ratio:1;border-radius:20px;overflow:hidden;border:1.5px solid var(--oro-claro);background:#FFF}
.sobres__codigo img{width:100%;height:100%;object-fit:contain}
.sobres__qr figcaption{margin-top:10px;font-family:var(--sans);font-size:14px;line-height:1.4;letter-spacing:.04em;color:var(--uva)}

/* REGALOS (la versión que eligió la clienta el 8-oct, como la sección del modelo egipcio que mandó, con sus
   colores): un arco de noche con la caja de regalo ("Regalo en mano") y un arco grande de noche con el sobre, el
   título, el texto y el QR ("Lluvia de sobres"). Las reglas .regalos__mano y .sobres de arriba son de la versión 1
   (guardada en clientes_reales/xv-luciana/respaldo/). */
.arco-regalo{margin:26px auto 0;max-width:320px;text-align:center}
.arco-regalo__arco{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  width:min(56vw,214px);
  aspect-ratio:214 / 196;
  margin:0 auto;
  padding-bottom:14px;
  border-radius:50% 50% 5px 5px / 55% 55% 5px 5px;
  background:linear-gradient(180deg,var(--noche-2) 0%,var(--noche) 100%);
  box-shadow:inset 0 0 0 1.5px var(--oro),inset 0 0 0 6px var(--noche-2),inset 0 0 0 7px rgba(242,216,152,.4),0 18px 26px -18px rgba(31,18,56,.7);
}
.arco-regalo__arco img{width:60%;height:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.5));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.arco-regalo figcaption{margin-top:12px}
.arco-regalo b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(24px,6.6vw,29px);line-height:1.2;color:var(--morado-osc)}
.arco-regalo figcaption span{display:block;margin:4px auto 0;max-width:17em;font-size:17px;line-height:1.45;text-wrap:balance}
@media (hover:hover) and (pointer:fine){.arco-regalo:hover .arco-regalo__arco img{transform:translateY(-6px) scale(1.05)}}
.junto{
  position:relative;
  overflow:hidden;
  max-width:560px;
  margin:34px auto 0;
  padding:clamp(40px,11vw,62px) clamp(20px,5.4vw,42px) clamp(30px,7vw,42px);
  border-radius:clamp(150px,44vw,280px) clamp(150px,44vw,280px) 34px 34px;
  background:linear-gradient(180deg,var(--noche-2) 0%,var(--noche) 100%);
  box-shadow:inset 0 0 0 1.5px var(--oro),inset 0 0 0 8px var(--noche-2),inset 0 0 0 9px rgba(242,216,152,.45),0 26px 40px -24px rgba(31,18,56,.75);
  color:#FFF6E4;
  text-align:center;
}
.junto > :not(.sobres__lluvia){position:relative}
.junto__ico{width:min(38vw,150px);margin:0 auto 8px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.junto__titulo{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(32px,9vw,46px);line-height:1.15;color:var(--oro-claro)}
.junto__intro{margin:8px auto 0;max-width:20em;text-wrap:balance}
.junto .sobres__qr{margin-top:20px}
.junto .sobres__qr figcaption{color:var(--oro-claro)}

/* ------------------------------------------------------------------
   CONFIRMAR ASISTENCIA
   ------------------------------------------------------------------ */
.confirmar{background:linear-gradient(180deg,var(--crema) 0%,var(--lila-1) 100%);text-align:center}
.confirmar__texto{margin:0 auto;max-width:25em;text-wrap:balance}
.confirmar__texto b{color:var(--morado-osc)}
.contador{display:flex;align-items:center;justify-content:center;gap:16px;margin:22px auto 0}
.contador__btn{
  width:52px;
  height:52px;
  border-radius:50%;
  border:1.5px solid var(--lila);
  background:#FFF;
  color:var(--morado-osc);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease,opacity .3s ease;
}
.contador__btn svg{width:22px;height:22px}
.contador__btn:hover:not(:disabled),.contador__btn:focus-visible{background:var(--morado);border-color:var(--morado);color:#FFF}
.contador__btn:disabled{opacity:.35;cursor:default}
.contador__n{min-width:8.4em;font-size:20px;line-height:1.2}
.contador__n b{font-family:var(--serif);font-size:42px;line-height:1;color:var(--morado-osc);vertical-align:-4px;margin-right:4px}
.respuestas{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:24px}
.respuestas .boton{width:min(100%,330px)}

/* ------------------------------------------------------------------
   MI CANCIÓN
   ------------------------------------------------------------------ */
.cancion{text-align:center}
.cancion .cabeza{margin-bottom:6px}
.cancion__artista{margin:0;font-size:22px;color:#F3E9FF}
.gramo{position:relative;z-index:1;display:block;width:min(56vw,230px);margin:26px auto 0;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gramo__halo{position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,214,140,.4) 0%,rgba(255,214,140,0) 64%);opacity:.5;transition:opacity .6s ease}
.gramo__img{position:relative;width:100%;height:auto;transform-origin:50% 100%}
.tocando .gramo__halo{opacity:1}
.viva.tocando .gramo__halo{animation:late 2.4s ease-in-out infinite}
.viva.tocando .gramo__img{animation:mece 2.6s ease-in-out infinite alternate}
@keyframes mece{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
.gramo__notas{position:absolute;left:0;right:0;top:0;height:60%;pointer-events:none}
.nota{position:absolute;bottom:20%;width:var(--s,20px);height:var(--s,20px);color:#FFE9B8;opacity:0}
.nota svg{display:block;width:100%;height:100%}
.viva.tocando .nota{animation:sube-nota var(--d,3s) ease-out var(--r,0s) infinite}
@keyframes sube-nota{0%{transform:translate(0,20px) rotate(-10deg);opacity:0}18%{opacity:.95}100%{transform:translate(var(--x,10px),-130px) rotate(14deg);opacity:0}}
.cancion__pista{margin:18px 0 0;font-family:var(--sans);font-size:13px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--oro-claro)}
.cancion__pista a{color:#FFF}
.yt-oculto{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

/* ------------------------------------------------------------------
   CIERRE
   ------------------------------------------------------------------ */
.cierre{background:radial-gradient(120% 70% at 50% 100%,var(--lila-2) 0%,var(--lila-1) 46%,var(--crema) 100%);text-align:center;padding-bottom:clamp(76px,12vw,120px)}
.cierre__ramo{position:relative;z-index:1;width:min(40vw,170px);margin:0 auto 12px}
.cierre__titulo{position:relative;z-index:1;margin:0;padding:.04em .1em .08em;font-family:var(--script);font-weight:700;font-size:clamp(72px,21.5vw,160px);line-height:1;color:var(--morado-osc);white-space:nowrap}
.cierre__texto{margin:6px auto 0;max-width:22em;text-wrap:balance}
.cierre__firma{margin:14px 0 22px;font-family:var(--sans);font-size:12.5px;line-height:1.5;letter-spacing:.3em;text-transform:uppercase;color:var(--morado)}

/* ------------------------------------------------------------------
   CRÉDITOS
   ------------------------------------------------------------------ */
.creditos{position:relative;z-index:1;padding:46px 22px calc(var(--abajo) + 40px);background:var(--noche);color:#F3E9FF;text-align:center;font-family:var(--sans)}
.creditos__pregunta{margin:0 0 16px;font-family:var(--serif);font-size:22px;line-height:1.3}
.creditos__wa{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  padding:0 24px;
  border-radius:999px;
  border:1.5px solid var(--oro-claro);
  color:#F3E9FF;
  font-size:13px;
  line-height:1.2;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background-color .3s ease,color .3s ease;
}
.creditos__wa svg{width:20px;height:20px}
.creditos__wa:hover,.creditos__wa:focus-visible{background:var(--oro-claro);color:var(--noche)}
.creditos__correo{display:table;margin:20px auto 0;color:#F3E9FF;font-size:15px;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;transition:background-size .4s ease}
.creditos__correo:hover,.creditos__correo:focus-visible{background-size:100% 1px}
.creditos__extras{display:none;max-width:520px;margin:18px auto 0;font-size:13.5px;line-height:1.5;opacity:.8}
.creditos__marca{margin:30px 0 0}
.creditos__logo{display:block;font-family:var(--serif);font-size:21px;line-height:1.3;letter-spacing:.04em}
.creditos__lema{display:block;margin-top:3px;font-size:11px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;opacity:.8}

/* ------------------------------------------------------------------
   PANTALLAS ANCHAS
   ------------------------------------------------------------------ */
@media (min-width:720px){
  body{font-size:20px}
  .respuestas{flex-direction:row;justify-content:center}
  .respuestas .boton{width:auto;min-width:250px}
  .luz__papel{min-height:320px}
  .camino{width:400px}
  .momento{grid-template-columns:70px minmax(0,1fr);column-gap:22px;padding-bottom:34px}
  .momento::before,.momento::after{left:34px;top:94px}
  .momento__farol{width:58px}
  .momento__hora{font-size:13px}
  .momento__hora b{font-size:31px}
  .momento__que{font-size:29px}
  .puntual__dentro{grid-template-columns:auto minmax(0,1fr);gap:44px;align-items:center;text-align:left;justify-items:start}
  .puntual__nota,.puntual__frase{margin-left:0}
  .reloj{width:220px}
}
@media (min-width:900px){
  .cabeza{max-width:980px}
  .luciana__dentro{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:56px;align-items:center}
  .luciana__nombre{font-size:clamp(120px,12vw,190px)}
  .esquina{width:min(26vw,360px)}
}

/* ------------------------------------------------------------------
   MENOS MOVIMIENTO
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .farol-sube,.florecita,.sobre-cae,.glint,.farol-vivo__luz,.portada__pista::before,.pista__mano,.nota,.gramo__img,.gramo__halo,.luz,.momento__farol img,.lugar__pin,.pase::after,.deseos__farol img,.deseos__halo,.musica-flotante__ondas i{animation:none!important}
}