/* ==================================================================
   Mis XV años · Valentina — el palacio de las mariposas (xv-princesa)
   Paleta única: perla, niebla lila, glicina, violeta, tinta ciruela y oro.
   Tipografías: Allura (el nombre), Noto Serif Display (títulos y cifras),
   Albert Sans (texto). Forma propia: el arco de medio punto con doble filete
   dorado. Lenguaje: cristal empañado que se aclara, listones que se desatan,
   destellos que recorren las líneas doradas y cascadas de pétalos de glicina.
   ================================================================== */

:root{
  --perla:#FBF8FC;
  --perla-2:#F6F1FA;
  --niebla:#F1EAF7;
  --niebla-2:#E7DDF2;
  --glicina:#B89BDC;
  --glicina-viva:#9C79CC;
  --violeta:#6A4A9C;
  --violeta-osc:#4A2F74;
  --tinta:#2C1D40;
  --tinta-suave:#584A6C;
  --noche:#221633;
  --noche-2:#2E1F45;
  --oro:#C6A15B;
  --oro-claro:#E7D09A;
  --oro-vivo:#F4E3B5;
  --oro-osc:#8A6A2C;
  --crema:#FFF7EA;
  --lila-texto:#CDBBE6;
  --script:'Allura','Snell Roundhand',cursive;
  --display:'Noto Serif Display','Didot','Bodoni 72','Times New Roman',serif;
  --sans:'Albert Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --arriba:env(safe-area-inset-top,0px);
  --abajo:env(safe-area-inset-bottom,0px);
  --izq:env(safe-area-inset-left,0px);
  --der:env(safe-area-inset-right,0px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--perla)}
body{
  background:var(--perla);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.cerrado{overflow:hidden;height:100%}
img{max-width:100%;height:auto;display:block}
b,strong{font-weight:600;color:var(--violeta-osc)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
.defs{position:absolute;width:0;height:0;overflow:hidden}
:focus-visible{outline:2px solid var(--violeta);outline-offset:3px}
[hidden]{display:none!important}

/* ------------------------------------------------------------------
   PORTADA · la entrada del túnel de glicinas (el fotograma 0 del video)
   ------------------------------------------------------------------ */
.portada{position:fixed;inset:0;z-index:60;overflow:hidden;background:var(--niebla)}
body.abierto .portada{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease,visibility 0s linear .6s}
.portada__fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* la mariposa: caja por left/top/width/height en píxeles reales (sin escalar: nítida) */
.escena{position:absolute;inset:0;z-index:2;pointer-events:none;visibility:hidden}
.portada.lista .escena{visibility:visible}
.mariposa{position:absolute;left:0;top:0;width:0;height:0}
.mariposa__ala{
  position:absolute;
  left:-20%;
  right:-20%;
  top:-20%;
  bottom:-20%;
  transform-origin:50% 50%;
  filter:var(--brillo,none);
  will-change:transform;
}
.mariposa__ala img{position:absolute;left:14.2857%;top:14.2857%;width:71.4286%;height:71.4286%;max-width:none}
.mariposa__ala--izq{clip-path:inset(0 50% 0 0)}
.mariposa__ala--der{clip-path:inset(0 0 0 50%)}
/* polen dorado que sube y pétalos que cruzan */
.polen{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.mota{
  position:absolute;
  bottom:-10px;
  width:var(--t,3px);
  height:var(--t,3px);
  border-radius:50%;
  background:#FFF1C8;
  box-shadow:0 0 7px 2px rgba(255,222,150,.75);
  opacity:0;
  animation:subir-mota var(--d,12s) linear var(--r,0s) infinite;
}
@keyframes subir-mota{
  0%{transform:translate3d(0,0,0);opacity:0}
  15%{opacity:.95}
  55%{opacity:.4}
  75%{opacity:.85}
  100%{transform:translate3d(var(--x,20px),-105vh,0);opacity:0}
}

/* cabecera: nombre arriba (vertical) o a la izquierda de la mariposa (horizontal) */
.portada__cabecera{
  position:absolute;
  left:0;
  right:0;
  top:calc(var(--arriba) + clamp(22px,5.2vh,58px));
  z-index:5;
  padding:0 max(16px,var(--izq)) 0 max(16px,var(--der));
  text-align:center;
  pointer-events:none;
  visibility:hidden;
}
.portada.lista .portada__cabecera,.portada.lista .portada__fecha{visibility:visible}
.portada__titular{position:relative;display:flex;flex-direction:column;align-items:center}
/* bruma clara detrás del nombre: se lee sobre cualquier parte del arte */
.portada__titular::before{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:130%;
  height:170%;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(255,252,246,.78),rgba(255,252,246,.42) 55%,rgba(255,252,246,0));
  z-index:-1;
}
.portada__sobre{
  display:block;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(12px,3.4vw,15px);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--violeta-osc);
  margin:0 0 0 .42em;
  text-shadow:0 0 4px #FFFFFF,0 0 10px rgba(255,255,255,.95),0 0 22px rgba(255,252,244,.9);
}
.portada__nombre{
  display:block;
  font-family:var(--script);
  font-weight:400;
  font-size:min(24vw,11.6vh,128px);
  line-height:1.08;
  padding:0 .12em;
  color:var(--violeta-osc);
  text-shadow:0 0 6px rgba(255,255,255,.9),0 0 18px rgba(255,255,255,.95),0 0 42px rgba(255,248,236,.85);
}
/* la fecha va justo debajo de la mariposa (vertical) o a su derecha (horizontal) */
.portada__fecha{
  position:absolute;
  left:0;
  right:0;
  top:calc(var(--m-bottom,64vh) + clamp(12px,2.4vh,26px));
  z-index:5;
  width:fit-content;
  max-width:calc(100% - 32px);
  margin:0 auto;
  padding:9px 20px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:4px 12px;
  pointer-events:none;
  visibility:hidden;
  border-radius:999px;
  border:1px solid rgba(198,161,91,.9);
  background:rgba(251,248,252,.72);
  -webkit-backdrop-filter:blur(8px) saturate(1.1);
  backdrop-filter:blur(8px) saturate(1.1);
  color:var(--tinta);
  font-weight:500;
  font-size:clamp(13px,3.6vw,15.5px);
  line-height:1.35;
  letter-spacing:.02em;
  box-shadow:0 6px 22px rgba(74,47,116,.18),inset 0 0 0 3px rgba(251,248,252,.5),inset 0 0 0 4px rgba(198,161,91,.35);
}
.portada__sep{display:inline-block;width:6px;height:6px;transform:rotate(45deg);background:var(--oro)}
.portada__fecha .solo-anio{display:none}
html.horizontal .portada__fecha .solo-anio{display:inline}

/* horizontal (escritorio, celular echado): nombre a la izquierda y fecha a la derecha de la mariposa */
html.horizontal .portada__cabecera{top:0;bottom:0;padding:0}
html.horizontal .portada__titular{
  position:absolute;
  right:calc(100% - var(--m-left,40vw) + 2.6vw);
  top:var(--m-mid,50vh);
  transform:translateY(-50%);
  width:calc(var(--m-left,40vw) - 4vw);
  align-items:flex-end;
  text-align:right;
}
html.horizontal .portada__titular::before{width:128%;height:190%;left:58%;background:radial-gradient(closest-side,rgba(255,252,246,.9),rgba(255,252,246,.6) 50%,rgba(255,252,246,0))}
/* en horizontal el rótulo cae sobre las glicinas del arco: va en una píldora de cristal esmerilado */
html.horizontal .portada__sobre{
  margin:0 .6em 10px 0;
  padding:7px 14px 7px calc(14px + .42em);
  border-radius:999px;
  border:1px solid rgba(198,161,91,.7);
  background:rgba(251,248,252,.74);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  font-size:clamp(14px,1.15vw,20px);
  font-weight:700;
  text-shadow:none;
}
html.horizontal .portada__nombre{font-size:min(9.4vw,17vh,168px);padding:0}
html.horizontal .portada__fecha{
  right:auto;
  left:calc(var(--m-right,60vw) + 2.8vw);
  top:var(--m-mid,50vh);
  transform:translateY(-50%);
  width:auto;
  max-width:min(36vw,560px);
  margin:0;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  padding:16px 28px 18px;
  border-radius:22px;
  font-size:clamp(15px,1.45vw,22px);
  text-align:left;
  white-space:nowrap;
}
html.horizontal .portada__sep{width:48px;height:1px;transform:none}
@media (orientation:landscape) and (max-height:500px){
  .portada__tap{padding-bottom:calc(var(--abajo) + 12px)}
  html.horizontal .portada__nombre{font-size:min(8vw,15vh,120px)}
}

/* el toque: botón a pantalla completa, píldora abajo con la manito */
.portada__tap{
  position:absolute;
  inset:0;
  z-index:6;
  width:100%;
  border:0;
  margin:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  padding:0 16px calc(var(--abajo) + clamp(24px,5.6vh,58px));
  font:inherit;
  color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.portada__tap:focus-visible{outline:none}
.portada__pista{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:0 26px 0 20px;
  border-radius:999px;
  border:1px solid var(--oro-vivo);
  background:linear-gradient(135deg,#E9D29C 0%,#C6A15B 55%,#B38B45 100%);
  color:var(--tinta);
  font-family:var(--sans);
  font-weight:600;
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  box-shadow:0 8px 26px rgba(74,47,116,.28);
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}
.portada__pista::before{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:999px;
  border:1.5px solid rgba(255,244,214,.95);
  animation:anillo 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes anillo{0%{transform:scale(1);opacity:.95}70%,100%{transform:scale(1.14,1.5);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)}}
/* el hover lo invierte (con mouse nace llamativo, como en táctil) */
.portada__tap:hover .portada__pista,
.portada__tap:focus-visible .portada__pista{background:var(--violeta-osc);color:var(--oro-vivo);border-color:var(--oro-claro)}
@media (min-width:1100px){
  .portada__pista{min-height:62px;padding:0 36px 0 28px;font-size:16px;gap:12px}
  .pista__mano{width:26px;height:26px}
}
@media (min-width:1600px){
  .portada__pista{min-height:70px;padding:0 44px 0 34px;font-size:18px;gap:14px}
  .pista__mano{width:30px;height:30px}
}

.velo{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:radial-gradient(circle at 50% 44%,#FFFDF8 0%,var(--perla) 45%,var(--niebla) 100%);
}

/* ------------------------------------------------------------------
   EL RECORRIDO · video, foto en el arco y textos en placas
   ------------------------------------------------------------------ */
.viaje{position:absolute;inset:0;z-index:4;opacity:0;visibility:hidden;pointer-events:none}
.viaje__video,.viaje__fin{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--niebla)}
.viaje__fin{opacity:0}
.viaje__foto{
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:0;
  overflow:hidden;
  opacity:0;
  z-index:1;
  background:#2B1846;
}
.viaje__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;max-width:none}
.viaje__foto::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,238,196,.7),inset 0 0 26px rgba(43,24,70,.35);
}
.viaje__foto--luz::after{animation:fogonazo 1.8s ease-out 1}
@keyframes fogonazo{0%{box-shadow:inset 0 0 0 1px rgba(255,244,214,.95),inset 0 0 90px 40px rgba(255,246,222,.95)}100%{box-shadow:inset 0 0 0 1px rgba(255,238,196,.7),inset 0 0 26px rgba(43,24,70,.35)}}

/* placas: ciruela translúcida con filete dorado */
.viaje__texto,.viaje__placa{
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
}
.viaje__texto{
  position:absolute;
  left:6%;
  right:6%;
  bottom:calc(var(--abajo) + 11%);
  z-index:2;
  margin:0;
  padding:12px 18px 14px;
  border-radius:18px;
  text-align:center;
  text-wrap:balance;
  background:rgba(44,29,64,.6);
  box-shadow:inset 0 0 0 1px rgba(231,208,154,.75),inset 0 0 0 5px rgba(44,29,64,.12),inset 0 0 0 6px rgba(231,208,154,.3);
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(25px,7vw,40px);
  line-height:1.2;
  color:var(--crema);
  opacity:0;
}
.viaje__final{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none}
.viaje__placa{
  position:absolute;
  left:6%;
  right:6%;
  margin:0;
  padding:8px 16px 10px;
  border-radius:18px;
  text-align:center;
  background:rgba(44,29,64,.58);
  box-shadow:inset 0 0 0 1px rgba(231,208,154,.75),inset 0 0 0 5px rgba(44,29,64,.12),inset 0 0 0 6px rgba(231,208,154,.3);
}
/* celular: el nombre sobre el arco y la invitación debajo */
.viaje__placa--nombre{bottom:calc(100% - var(--a-top,30vh) + 12px)}
.viaje__placa--invita{top:calc(var(--a-bottom,86vh) + 10px);bottom:auto}
.viaje__nombre{display:block;font-family:var(--script);font-size:clamp(50px,15vw,80px);line-height:1.08;color:var(--crema)}
.viaje__invita{display:block;font-family:var(--sans);font-weight:500;font-size:clamp(12.5px,3.6vw,15px);letter-spacing:.18em;text-transform:uppercase;color:var(--oro-vivo)}
.viaje__invita b{display:block;margin-top:2px;font-family:var(--display);font-weight:500;font-size:2em;letter-spacing:.06em;line-height:1.2;text-transform:none;color:var(--crema)}

html.horizontal .viaje__texto{
  left:0;
  right:0;
  width:fit-content;
  max-width:88vw;
  margin:0 auto;
  bottom:calc(var(--abajo) + 7%);
  padding:12px 36px 15px;
  font-size:clamp(28px,3vw,46px);
}
html.horizontal .viaje__placa{
  top:var(--a-mid,50vh);
  bottom:auto;
  left:auto;
  right:auto;
  transform:translateY(-50%);
  width:min(27vw,420px);
  padding:20px 22px 22px;
}
/* las placas van por fuera de las glicinas del arco (el panel mide ~la mitad del arco con sus flores) */
html.horizontal .viaje__placa--nombre{right:calc(100% - var(--a-left,40vw) + 10vw)}
html.horizontal .viaje__placa--invita{left:calc(var(--a-right,60vw) + 10vw)}
html.horizontal .viaje__nombre{font-size:clamp(56px,5.6vw,104px)}
html.horizontal .viaje__invita{font-size:clamp(13px,1.2vw,17px);line-height:1.9}
html.horizontal .viaje__invita b{font-size:2.1em;letter-spacing:.08em;line-height:1.25;margin-top:6px}

/* ------------------------------------------------------------------
   BOTONES FIJOS · volver y música
   ------------------------------------------------------------------ */
.volver-fijo{
  position:fixed;
  top:calc(var(--arriba) + 12px);
  left:calc(var(--izq) + 12px);
  z-index:70;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:0 18px 0 12px;
  border-radius:999px;
  border:1px solid rgba(198,161,91,.8);
  background:rgba(251,248,252,.8);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:var(--violeta-osc);
  font-family:var(--sans);
  font-weight:600;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background-color .35s ease,color .35s ease,opacity .4s ease,visibility 0s;
}
.volver-fijo svg{width:16px;height:16px}
.volver-fijo:hover,.volver-fijo:focus-visible{background:var(--violeta-osc);color:var(--oro-vivo)}
body.cerrado .volver-fijo{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s linear .3s}

.musica-flotante{
  position:fixed;
  right:calc(var(--der) + 14px);
  bottom:calc(var(--abajo) + 14px);
  z-index:70;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:54px;
  padding:5px 16px 5px 6px;
  border-radius:999px;
  border:1px solid rgba(198,161,91,.85);
  background:rgba(251,248,252,.85);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:var(--violeta);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  box-shadow:0 6px 20px rgba(74,47,116,.2);
  transition:opacity .4s ease,visibility 0s linear .4s,transform .4s ease,background-color .35s ease,border-color .35s ease;
}
html.musica .musica-flotante{opacity:1;visibility:visible;transform:none;transition:opacity .4s ease,visibility 0s,transform .4s ease,background-color .35s ease,border-color .35s ease}
/* durante el recorrido las placas van abajo: el botón se aparta y vuelve al terminar */
html.musica.viajando .musica-flotante{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s linear .3s}
/* en la portada (sin viaje) va arriba a la derecha para no pisar la píldora de toque */
body.cerrado .musica-flotante{top:calc(var(--arriba) + 12px);bottom:auto}
.musica-flotante:hover,.musica-flotante:focus-visible{background:var(--niebla-2);border-color:var(--oro)}
.musica-flotante__mariposa{position:relative;display:block;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle,rgba(255,236,190,.8),rgba(255,236,190,0) 70%);perspective:120px}
.musica-flotante__mariposa img{position:absolute;left:50%;top:50%;width:32px;height:auto;margin:-13px 0 0 -16px;transform-origin:50% 50%}
.musica-flotante--tocando .musica-flotante__mariposa img{animation:aletear-chico 1.1s ease-in-out infinite}
@keyframes aletear-chico{0%,100%{transform:scaleX(1)}45%{transform:scaleX(.42)}}
.musica-flotante__ondas{display:inline-flex;align-items:flex-end;gap:3px;height:18px}
.musica-flotante__ondas i{display:block;width:3px;height:6px;border-radius:2px;background:currentColor}
.musica-flotante--tocando .musica-flotante__ondas i{animation:onda-sonido .9s ease-in-out infinite}
.musica-flotante--tocando .musica-flotante__ondas i:nth-child(2){animation-delay:.15s}
.musica-flotante--tocando .musica-flotante__ondas i:nth-child(3){animation-delay:.3s}
.musica-flotante--tocando .musica-flotante__ondas i:nth-child(4){animation-delay:.45s}
@keyframes onda-sonido{0%,100%{height:6px}50%{height:18px}}
.musica-flotante:not(.musica-flotante--tocando){color:rgba(106,74,156,.55)}
.musica-flotante:not(.musica-flotante--tocando) .musica-flotante__mariposa img{filter:grayscale(.6) opacity(.75)}

/* ------------------------------------------------------------------
   CUERPO · piezas comunes
   ------------------------------------------------------------------ */
.palacio{position:relative;z-index:1;opacity:0;transition:opacity .7s ease}
body.abierto .palacio{opacity:1}
section{position:relative;overflow:hidden}
.rotulo{
  margin:0 0 8px;
  font-family:var(--sans);
  font-weight:600;
  font-size:12.5px;
  line-height:1.6;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--violeta);
  text-align:center;
  text-wrap:balance;
}
.rotulo--claro{color:var(--oro-claro)}
.rotulo--chico{margin-top:30px}
.titulo{
  position:relative;
  margin:0 auto;
  max-width:15em;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(38px,10.4vw,58px);
  line-height:1.08;
  letter-spacing:-.005em;
  color:var(--tinta);
  text-align:center;
  text-wrap:balance;
}
.titulo--claro{color:var(--crema)}
.revela{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .95s cubic-bezier(.2,.7,.2,1)}
.revela.vista{opacity:1;transform:none}
html:not(.js) .revela{opacity:1;transform:none}

/* cabecera de sección: el listón que se desata sobre el título */
.cabeza{position:relative;text-align:center;margin:0 auto 34px}
.cabeza__titulo{position:relative;display:inline-block;max-width:100%;padding:0 6px}
.liston{position:absolute;left:-7%;right:-7%;top:50%;height:0;pointer-events:none;z-index:2}
.liston__banda{
  position:absolute;
  top:-10px;
  height:20px;
  width:52%;
  background:linear-gradient(180deg,#DCCBF1 0%,#BFA3E2 30%,#A583D1 52%,#B998DF 74%,#D8C6EE 100%);
  box-shadow:0 3px 8px rgba(74,47,116,.25);
}
.liston__banda--izq{left:0;border-radius:3px 0 0 3px;transform-origin:0 50%}
.liston__banda--der{right:0;border-radius:0 3px 3px 0;transform-origin:100% 50%}
.liston__lazo{position:absolute;left:50%;top:-30px;width:70px;height:auto;margin-left:-35px;transform-origin:50% 22%;filter:drop-shadow(0 4px 6px rgba(74,47,116,.3));max-width:none}
html:not(.js) .liston,html.suave .liston{display:none}
/* filete dorado con rombo: se dibuja y lo recorre un destello */
.filete{display:block;width:min(280px,72%);height:auto;margin:14px auto 0;overflow:visible}
.dorada path,.dorada rect,.dorada line{fill:none;stroke:var(--oro);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.dorada .segunda{stroke:var(--oro-claro);stroke-width:1}
.dorada .destello{stroke:#FFFBEE;stroke-width:2.6;filter:drop-shadow(0 0 3px rgba(255,246,214,.95)) drop-shadow(0 0 7px rgba(255,226,160,.8))}
.cabeza--noche .filete path,.velas .dorada path,.cancion .dorada path,.fecha-sec .dorada path{stroke:var(--oro-claro)}

/* cristal empañado: una capa esmerilada sobre la foto que se aclara desde el centro */
.empanado{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:rgba(251,248,252,.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.05);
  backdrop-filter:blur(16px) saturate(1.05);
  -webkit-mask-image:radial-gradient(circle at 50% 42%,transparent var(--claro,0%),#000 calc(var(--claro,0%) + 26%));
  mask-image:radial-gradient(circle at 50% 42%,transparent var(--claro,0%),#000 calc(var(--claro,0%) + 26%));
}
html:not(.js) .empanado,html.suave .empanado{display:none}

/* pétalos de glicina que caen (CSS; se pausan fuera de la vista) */
.petalos{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.petalo{
  position:absolute;
  top:-40px;
  width:var(--t,16px);
  height:calc(var(--t,16px) * 1.35);
  background:url(assets/petalo.webp) center/contain no-repeat;
  opacity:0;
  animation:caer-petalo var(--d,12s) linear var(--r,0s) infinite;
}
.petalos--noche .petalo{filter:brightness(1.05) saturate(1.1)}
.petalos.pausa .petalo,.polen.pausa .mota{animation-play-state:paused}
@keyframes caer-petalo{
  0%{transform:translate3d(0,0,0) rotate(var(--g0,0deg)) rotateX(0deg);opacity:0}
  10%{opacity:var(--o,.85)}
  50%{transform:translate3d(var(--x1,30px),calc(var(--alto,900px) * .5),0) rotate(calc(var(--g0,0deg) + 140deg)) rotateX(160deg)}
  88%{opacity:var(--o,.85)}
  100%{transform:translate3d(var(--x2,-20px),var(--alto,900px),0) rotate(calc(var(--g0,0deg) + 300deg)) rotateX(360deg);opacity:0}
}
.rafaga{position:absolute;width:16px;height:22px;background:url(assets/petalo.webp) center/contain no-repeat;pointer-events:none;z-index:5}
/* en las cabeceras los pétalos pasan por detrás del título: nunca lo tapan */
.cabeza .rafaga{z-index:0}
.cabeza > .rotulo,.cabeza__titulo,.cabeza > .filete{position:relative;z-index:1}

.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 28px;
  border-radius:999px;
  border:1px solid var(--violeta);
  background:transparent;
  color:var(--violeta-osc);
  font-family:var(--sans);
  font-weight:600;
  font-size:14px;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}
.boton svg{width:20px;height:20px;flex:0 0 auto}
.boton:hover,.boton:focus-visible{background:var(--violeta-osc);color:var(--oro-vivo);border-color:var(--violeta-osc)}

/* ------------------------------------------------------------------
   LA QUINCEAÑERA
   ------------------------------------------------------------------ */
.quince{
  padding:calc(var(--arriba) + 86px) 22px 86px;
  background:
    radial-gradient(ellipse 80% 45% at 50% 16%,rgba(184,155,220,.28) 0%,rgba(184,155,220,0) 70%),
    linear-gradient(180deg,var(--perla) 0%,var(--perla-2) 100%);
}
.quince__dentro{position:relative;z-index:1;display:grid;gap:40px;justify-items:center;max-width:1080px;margin:0 auto}
.retrato{position:relative;width:min(76vw,330px);aspect-ratio:3/4.1;margin:10px 0 0}
.retrato__arco{
  position:absolute;
  inset:14px;
  z-index:1;
  overflow:hidden;
  border-radius:50% 50% 0 0 / 37% 37% 0 0;
  background:var(--niebla-2);
}
.retrato__arco img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.retrato__linea{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none}
.retrato__glicina{position:absolute;z-index:3;top:-6%;width:21%;pointer-events:none;transform-origin:50% 0}
.retrato__glicina img{width:100%;height:auto}
.retrato__glicina--izq{left:4%}
.retrato__glicina--der{right:4%}
.retrato__glicina--der img{transform:scaleX(-1)}
.quince__texto{text-align:center;max-width:580px}
.quince__nombre{
  margin:0;
  font-family:var(--script);
  font-weight:400;
  font-size:clamp(76px,23vw,140px);
  line-height:1.05;
  color:var(--violeta-osc);
  text-shadow:0 0 30px rgba(184,155,220,.35);
}
.quince__apellidos{margin:0;font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:.34em;text-transform:uppercase;color:var(--oro-osc)}
.quince__dedicatoria{margin:18px auto 0;max-width:33em;text-align:left;font-size:17px;color:var(--tinta-suave)}
.capitular{
  float:left;
  margin:6px 12px 0 0;
  font-family:var(--display);
  font-weight:500;
  font-size:74px;
  line-height:.78;
  color:var(--violeta);
}
.quince__firma{margin:12px 0 0;font-family:var(--script);font-size:52px;line-height:1.1;color:var(--violeta)}

/* ------------------------------------------------------------------
   MI FAMILIA · dos glorietas de glicinas
   ------------------------------------------------------------------ */
.familia{
  padding:88px 20px 84px;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%,rgba(255,255,255,.7),rgba(255,255,255,0) 70%),
    linear-gradient(180deg,var(--niebla) 0%,var(--niebla-2) 100%);
}
.familia__arcos{display:grid;gap:30px;justify-items:center;max-width:860px;margin:0 auto}
.glorieta{margin:0;width:min(86vw,330px)}
.glorieta__cuerpo{position:relative;aspect-ratio:300/350}
.glorieta__linea{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.glorieta__cuerpo::before{
  content:'';
  position:absolute;
  inset:9px;
  border-radius:50% 50% 0 0 / 40% 40% 0 0;
  background:radial-gradient(ellipse 80% 60% at 50% 70%,rgba(255,255,255,.85),rgba(251,248,252,.55) 70%);
}
.glorieta__racimos{position:absolute;inset:0;pointer-events:none}
.racimo{position:absolute;width:11%;height:auto;margin-left:-5.5%;transform-origin:50% 0}
/* cada racimo cuelga justo de la curva interior del arco (medida para aspect-ratio 300/350) */
.racimo:nth-child(1){left:24%;top:8.2%;width:9.5%;margin-left:-4.75%}
.racimo:nth-child(2){left:37%;top:3.6%}
.racimo:nth-child(3){left:50%;top:2.2%;width:13%;margin-left:-6.5%}
.racimo:nth-child(4){left:63%;top:3.6%}
.racimo:nth-child(5){left:76%;top:8.2%;width:9.5%;margin-left:-4.75%}
.glorieta__nombres{
  position:absolute;
  left:10%;
  right:10%;
  bottom:9%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.glorieta__rol{margin-bottom:6px;font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--violeta)}
.glorieta__nombre{font-family:var(--display);font-weight:500;font-size:clamp(23px,6.6vw,28px);line-height:1.15;color:var(--tinta)}
.glorieta__y{font-family:var(--script);font-size:36px;line-height:1;color:var(--oro-osc)}
.familia__nota{margin:34px auto 0;max-width:28em;text-align:center;color:var(--tinta-suave);text-wrap:balance}

/* ------------------------------------------------------------------
   LA FECHA · el salón de cristal y el vitral con la cuenta regresiva
   ------------------------------------------------------------------ */
.fecha-sec{
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:86px 20px;
  background:var(--noche);
}
.fecha-sec__fondo{
  position:absolute;
  inset:-4%;
  background:url(assets/llegada-movil.webp) center/cover no-repeat;
  filter:blur(3px) saturate(.95);
  transform-origin:50% 45%;
}
@media (orientation:landscape){.fecha-sec__fondo{background-image:url(assets/llegada-desktop.webp)}}
.fecha-sec::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%,rgba(34,22,51,.25) 0%,rgba(34,22,51,.62) 100%),
    linear-gradient(180deg,rgba(34,22,51,.66) 0%,rgba(34,22,51,.2) 45%,rgba(34,22,51,.72) 100%);
  pointer-events:none;
}
.fecha-sec .petalos{z-index:1}
.fecha-sec__dentro{position:relative;z-index:2;text-align:center;width:100%;max-width:660px}
.vitral{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:min(80vw,330px);
  margin:8px auto 0;
  padding:78px 18px 34px;
  border-radius:50% 50% 16px 16px / 34% 34% 16px 16px;
  background:rgba(251,248,252,.14);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  backdrop-filter:blur(10px) saturate(1.1);
  overflow:hidden;
}
.vitral__linea{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.vitral .empanado{background:rgba(251,248,252,.34);border-radius:inherit}
.fecha__dia{position:relative;font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.42em;text-transform:uppercase;color:var(--oro-vivo);margin-left:.42em}
.fecha__num{position:relative;font-family:var(--display);font-weight:500;font-size:clamp(118px,34vw,168px);line-height:.95;color:var(--crema);text-shadow:0 0 40px rgba(244,227,181,.35);font-variant-numeric:lining-nums}
.fecha__mes{position:relative;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(25px,7.2vw,33px);line-height:1.15;color:var(--crema)}
.fecha__hora{
  position:relative;
  margin-top:18px;
  padding:10px 20px 11px;
  border-radius:999px;
  background:linear-gradient(135deg,#E9D29C 0%,#C6A15B 60%,#B38B45 100%);
  color:var(--tinta);
  font-weight:600;
  font-size:14px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.cuenta{display:flex;justify-content:center;gap:clamp(8px,2.4vw,16px)}
.cuenta__dato{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:clamp(68px,19vw,92px);
  padding:12px 6px 10px;
  border-radius:16px;
  border:1px solid rgba(231,208,154,.55);
  background:rgba(251,248,252,.12);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.cuenta__n{font-family:var(--display);font-weight:500;font-size:clamp(34px,10vw,50px);line-height:1;color:var(--crema);font-variant-numeric:tabular-nums lining-nums;min-width:1.4em}
.cuenta__t{margin-top:6px;font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--oro-claro)}
.cuenta__hoy{margin:12px 0 0;font-family:var(--script);font-size:54px;color:var(--crema)}

/* ------------------------------------------------------------------
   CEREMONIA Y RECEPCIÓN · cada tarjeta es el botón al mapa
   ------------------------------------------------------------------ */
.lugares{padding:90px 20px 88px;background:var(--perla)}
.lugares__lista{display:grid;gap:26px;max-width:880px;margin:0 auto}
.lugar{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  width:100%;
  max-width:400px;
  margin:0 auto;
  padding:68px 24px 32px;
  overflow:hidden;
  border-radius:50% 50% 20px 20px / 160px 160px 20px 20px;
  text-align:center;
  text-decoration:none;
  color:var(--tinta);
  background:linear-gradient(180deg,#FFFFFF 0%,var(--niebla) 100%);
  box-shadow:0 14px 40px rgba(74,47,116,.12);
  transition:background-color .4s ease;
}
.lugar__luz{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle 240px at var(--lx,50%) var(--ly,22%),rgba(198,161,91,.18),rgba(198,161,91,0) 70%);
}
.lugar__linea{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.lugar__ico{position:relative;width:auto;height:74px;margin-bottom:10px;filter:drop-shadow(0 8px 12px rgba(74,47,116,.2))}
.lugar__tipo{position:relative;font-weight:600;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--violeta)}
.lugar__nombre{position:relative;font-family:var(--display);font-weight:500;font-size:clamp(29px,8vw,36px);line-height:1.12;color:var(--tinta);text-wrap:balance}
.lugar__sitio{position:relative;margin-top:6px;font-size:16.5px;line-height:1.5;color:var(--tinta-suave)}
.lugar__hora{position:relative;margin-top:8px;font-size:16px;line-height:1.5;color:var(--tinta-suave)}
.lugar__hora b{color:var(--violeta-osc)}
.lugar__ir{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:48px;
  margin-top:18px;
  padding:0 24px 0 18px;
  border-radius:999px;
  border:1px solid var(--violeta);
  color:var(--violeta-osc);
  font-weight:600;
  font-size:13.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:background-color .35s ease,color .35s ease;
}
.lugar:hover,.lugar:focus-visible{background:linear-gradient(180deg,#FFFFFF 0%,var(--niebla-2) 100%)}
.lugar:hover .lugar__ir,.lugar:focus-visible .lugar__ir{background:var(--violeta-osc);color:var(--oro-vivo)}
@media (hover:none){
  .lugar__ir{background:var(--violeta-osc);color:var(--oro-vivo)}
}

/* ------------------------------------------------------------------
   ITINERARIO · el hilo dorado baja con el scroll y lo recorre un destello
   ------------------------------------------------------------------ */
.programa{
  padding:90px 20px 86px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%,rgba(184,155,220,.25),rgba(184,155,220,0) 70%),
    var(--niebla);
}
.programa__cuerpo{position:relative;max-width:560px;margin:0 auto}
.programa__lista{position:relative;list-style:none;margin:0;padding:0}
.programa__hilo{position:absolute;left:21px;top:30px;width:3px;height:calc(100% - 60px);overflow:visible}
.programa__hilo line{stroke:var(--oro);stroke-width:2}
.programa__hilo .programa__brillo{stroke:#FFFBEE;stroke-width:3;filter:drop-shadow(0 0 4px rgba(255,236,190,.95))}
.programa__cuerpo::before{content:'';position:absolute;left:21.5px;top:30px;bottom:30px;width:1px;background:rgba(138,106,44,.25)}
.momento{position:relative;display:grid;grid-template-columns:44px 1fr;column-gap:16px;align-items:center;padding:12px 0 16px}
.momento__marca{grid-row:span 2;display:flex;align-items:center;justify-content:center;width:44px;height:44px}
.momento__marca i{
  display:block;
  width:18px;
  height:18px;
  transform:rotate(45deg);
  border:1.5px solid var(--oro);
  background:var(--perla);
  transition:background-color .5s ease,box-shadow .5s ease;
}
.momento--vivo .momento__marca i{background:var(--glicina);box-shadow:0 0 0 4px rgba(184,155,220,.25),0 0 16px 3px rgba(198,161,91,.5)}
.momento__hora{align-self:end;font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--oro-osc)}
.momento__que{align-self:start;font-family:var(--display);font-weight:500;font-size:clamp(23px,6.6vw,29px);line-height:1.18;color:var(--tinta);text-wrap:balance}

/* ------------------------------------------------------------------
   LAS 15 VELAS
   ------------------------------------------------------------------ */
.velas{
  padding:92px 16px 88px;
  text-align:center;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%,rgba(106,74,156,.45),rgba(106,74,156,0) 70%),
    linear-gradient(180deg,var(--noche-2) 0%,var(--noche) 100%);
}
.velas__resplandor{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% 55%,rgba(255,196,110,.3),rgba(255,196,110,0) 70%);
  opacity:0;
  transition:opacity .8s ease;
}
.velas > *:not(.velas__resplandor){position:relative;z-index:1}
.velas__intro{margin:0 auto;max-width:28em;color:var(--lila-texto);text-wrap:balance}
.velas__lista{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px 8px;
  max-width:980px;
  margin:38px auto 0;
  padding:0;
  list-style:none;
}
.vela{position:relative;display:flex;flex-direction:column;align-items:center}
.vela__num{font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.14em;color:var(--oro-claro);opacity:.8}
.vela__cuerpo{position:relative;display:block;width:54px;height:150px;margin:4px 0 8px}
.vela__cuerpo svg{position:absolute;left:0;bottom:0;width:100%;height:100%;overflow:visible}
.vela__halo{opacity:0;transition:opacity .6s ease}
.vela__llama{opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.vela--encendida .vela__halo{opacity:1}
.vela--encendida .vela__llama{opacity:1;animation:titilar var(--ti,1.7s) ease-in-out var(--tr,0s) infinite}
@keyframes titilar{
  0%,100%{transform:scale(1,1) skewX(0deg)}
  25%{transform:scale(.94,1.06) skewX(-3deg)}
  50%{transform:scale(1.04,.95) skewX(2deg)}
  75%{transform:scale(.97,1.04) skewX(-1deg)}
}
.vela__nombre{font-family:var(--display);font-weight:500;font-size:19px;line-height:1.2;color:#A898BF;transition:color .6s ease,text-shadow .6s ease}
.vela__rel{display:block;margin-top:2px;font-size:13px;line-height:1.3;color:#8E7FA6;transition:color .6s ease;text-wrap:balance}
.vela--encendida .vela__nombre{color:var(--crema);text-shadow:0 0 14px rgba(255,214,140,.55)}
.vela--encendida .vela__rel{color:var(--oro-claro)}
.velas__cuenta{margin:34px 0 0;font-size:15px;letter-spacing:.06em;color:var(--lila-texto)}
.velas__cuenta b{font-family:var(--display);font-weight:500;font-size:28px;color:var(--oro-vivo);font-variant-numeric:lining-nums}
.velas__final{
  margin:6px 0 0;
  font-family:var(--script);
  font-size:clamp(62px,17vw,112px);
  line-height:1.1;
  color:#8E7FA6;
  opacity:.5;
  transition:color 1s ease,opacity 1s ease,text-shadow 1s ease;
}
.velas--completas .velas__final{color:var(--oro-vivo);opacity:1;text-shadow:0 0 28px rgba(255,214,140,.65),0 0 60px rgba(255,196,110,.35)}

/* ------------------------------------------------------------------
   CÓDIGO DE VESTIMENTA
   ------------------------------------------------------------------ */
.vestir{padding:90px 20px 86px;background:var(--perla);text-align:center}
.atuendos{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:600px;margin:0 auto;align-items:start}
.atuendo{margin:0;display:flex;flex-direction:column;align-items:center}
.atuendo__arco{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  width:100%;
  max-width:250px;
  height:min(78vw,380px);
  padding:22px 10px 12px;
  overflow:hidden;
  border-radius:50% 50% 16px 16px / 27% 27% 16px 16px;
  background:linear-gradient(180deg,var(--niebla) 0%,var(--niebla-2) 100%);
  box-shadow:inset 0 0 0 1px rgba(198,161,91,.55),inset 0 0 0 6px var(--niebla),inset 0 0 0 7px rgba(198,161,91,.3);
}
.atuendo__arco img{height:100%;width:auto;max-width:100%;object-fit:contain;transform-origin:50% 0;filter:drop-shadow(0 12px 14px rgba(44,29,64,.18))}
.atuendo figcaption{margin-top:12px;display:flex;flex-direction:column;align-items:center}
.atuendo figcaption b{font-family:var(--display);font-weight:500;font-size:28px;line-height:1.15;color:var(--tinta)}
.atuendo figcaption span{font-size:15.5px;line-height:1.45;color:var(--tinta-suave);text-wrap:balance}
.reservado{
  display:flex;
  align-items:center;
  gap:18px;
  max-width:560px;
  margin:34px auto 0;
  padding:18px 22px;
  border-radius:24px;
  text-align:left;
  background:linear-gradient(135deg,var(--niebla) 0%,#FFFFFF 100%);
  box-shadow:inset 0 0 0 1px rgba(198,161,91,.5);
}
.reservado__muestra{position:relative;flex:0 0 auto;width:74px;height:74px}
.reservado__muestra i{position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#E4D5F4 0%,#B89BDC 45%,#7E5CB2 100%);box-shadow:0 0 0 3px var(--perla),0 0 0 4px var(--oro)}
.reservado__muestra img{position:absolute;left:8%;top:-8%;width:84%;height:auto}
.reservado__texto{margin:0;font-size:16px;line-height:1.55;color:var(--tinta-suave)}

/* ------------------------------------------------------------------
   GALERÍA · arcos de medio punto
   ------------------------------------------------------------------ */
.galeria-sec{padding:90px 20px 70px;background:linear-gradient(180deg,var(--niebla) 0%,var(--perla-2) 100%)}
.galeria__guia{display:flex;align-items:center;justify-content:center;gap:8px;margin:-14px 0 0;font-size:15px;color:var(--tinta-suave)}
.guia__mano{width:22px;height:22px;color:var(--violeta);animation:deslizar 2.2s ease-in-out infinite}
@keyframes deslizar{0%,100%{transform:translateX(6px)}50%{transform:translateX(-8px) rotate(-8deg)}}
.galeria{
  display:flex;
  gap:18px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:22px 15vw 14px;
  margin:6px -20px 0;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.galeria::-webkit-scrollbar{display:none}
.foto{position:relative;flex:0 0 70vw;max-width:330px;margin:0;scroll-snap-align:center;transition:opacity .45s ease}
.foto__arco{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:50% 50% 14px 14px / 37% 37% 14px 14px;
  background:var(--niebla-2);
  box-shadow:0 14px 34px rgba(74,47,116,.16);
}
.foto__arco::after{
  content:'';
  position:absolute;
  inset:7px;
  border-radius:50% 50% 10px 10px / 37% 37% 10px 10px;
  box-shadow:inset 0 0 0 1px rgba(255,241,210,.85);
  pointer-events:none;
  z-index:3;
}
.foto__arco img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.foto figcaption{margin-top:14px;text-align:center;font-family:var(--display);font-style:italic;font-weight:500;font-size:19px;color:var(--violeta-osc);transition:color .35s ease}
.puntos{display:flex;justify-content:center;margin-top:8px}
.punto{position:relative;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
.punto::before{content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;transform:rotate(45deg);border:1px solid var(--violeta);transition:background-color .35s ease}
.punto--activo::before{background:var(--violeta)}

/* ------------------------------------------------------------------
   MESA DE REGALOS · lluvia de sobres
   ------------------------------------------------------------------ */
.regalos{padding:90px 20px 90px;background:var(--perla);text-align:center}
.regalos__intro{margin:0 auto;max-width:30em;color:var(--tinta-suave);text-wrap:balance}
.regalos__lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px;list-style:none;margin:34px auto 0;padding:0;max-width:780px}
.regalo{display:flex;flex-direction:column;align-items:center;text-align:center}
.regalo__arco{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  width:100%;
  max-width:190px;
  height:170px;
  padding:20px 10px 14px;
  overflow:hidden;
  border-radius:50% 50% 14px 14px / 44% 44% 14px 14px;
  background:linear-gradient(180deg,#FFFFFF 0%,var(--niebla) 100%);
  box-shadow:inset 0 0 0 1px rgba(198,161,91,.55),inset 0 0 0 6px #FFFFFF,inset 0 0 0 7px rgba(198,161,91,.28);
  transition:background-color .4s ease;
}
.regalo__arco img{max-height:124px;width:auto;max-width:78%;object-fit:contain;transition:transform .6s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 8px 10px rgba(44,29,64,.18))}
.regalo b{display:block;margin-top:12px;font-family:var(--display);font-weight:500;font-size:21px;line-height:1.2;color:var(--tinta)}
.regalo small{display:block;margin-top:2px;font-size:14.5px;line-height:1.4;color:var(--tinta-suave)}
.sobres{
  position:relative;
  max-width:540px;
  margin:54px auto 0;
  padding:74px 24px 34px;
  overflow:hidden;
  border-radius:50% 50% 24px 24px / 190px 190px 24px 24px;
  color:var(--tinta);
  background:linear-gradient(180deg,#FFFFFF 0%,var(--niebla) 100%);
  box-shadow:0 16px 44px rgba(74,47,116,.13);
}
.sobres__linea{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sobres__lluvia{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sobre-cae{
  position:absolute;
  top:-60px;
  width:var(--t,34px);
  height:auto;
  opacity:.22;
  animation:caer-sobre var(--d,9s) linear var(--r,0s) infinite;
}
@keyframes caer-sobre{0%{transform:translate3d(0,0,0) rotate(var(--g0,-12deg))}100%{transform:translate3d(var(--x,20px),780px,0) rotate(var(--g1,18deg))}}
.sobres.pausa .sobre-cae{animation-play-state:paused}
.sobres__ico{position:relative;width:84px;height:auto;margin:0 auto 8px;filter:drop-shadow(0 8px 12px rgba(44,29,64,.2))}
.sobres__titulo{position:relative;margin:0;font-family:var(--display);font-weight:500;font-size:34px;line-height:1.1;color:var(--tinta)}
.sobres__texto{position:relative;margin:8px auto 0;max-width:26em;font-size:16px;color:var(--tinta-suave);text-wrap:balance}
.sobres__qr{position:relative;margin:20px auto 0;display:flex;flex-direction:column;align-items:center}
.sobres__qr img{width:190px;height:190px;padding:10px;border-radius:14px;background:var(--perla);box-shadow:0 0 0 1px rgba(198,161,91,.55),0 0 0 6px var(--perla),0 0 0 7px var(--oro)}
.sobres__qr figcaption{margin-top:16px;max-width:19em;font-size:14.5px;line-height:1.5;color:var(--tinta-suave);text-wrap:balance}

/* ------------------------------------------------------------------
   CONFIRMAR
   ------------------------------------------------------------------ */
.confirmar{
  padding:90px 20px 90px;
  text-align:center;
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%,rgba(198,161,91,.18),rgba(198,161,91,0) 70%),
    linear-gradient(180deg,var(--niebla) 0%,var(--niebla-2) 100%);
}
.confirmar > *:not(.petalos){position:relative;z-index:1}
.confirmar__texto{margin:0 auto;max-width:28em;color:var(--tinta-suave);text-wrap:balance}
.contador{display:flex;align-items:center;justify-content:center;gap:18px;margin:26px 0 24px}
.contador__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  padding:0;
  border:1px solid var(--violeta);
  border-radius:50%;
  background:rgba(255,255,255,.6);
  color:var(--violeta-osc);
  cursor:pointer;
  transition:background-color .3s ease,color .3s ease;
}
.contador__btn svg{width:20px;height:20px}
.contador__btn:hover,.contador__btn:focus-visible{background:var(--violeta-osc);color:var(--oro-vivo)}
.contador__n{min-width:8.5em;font-size:16px;color:var(--tinta-suave)}
.contador__n b{display:block;font-family:var(--display);font-weight:500;font-size:54px;line-height:1;color:var(--tinta);font-variant-numeric:lining-nums}
.boton--wa{background:var(--violeta-osc);border-color:var(--violeta-osc);color:var(--crema);box-shadow:none}
.boton--wa:hover,.boton--wa:focus-visible{background:var(--oro);border-color:var(--oro);color:var(--tinta);box-shadow:none}

/* ------------------------------------------------------------------
   MI CANCIÓN · la cajita de música
   ------------------------------------------------------------------ */
.cancion{
  padding:92px 20px 86px;
  text-align:center;
  background:
    radial-gradient(ellipse 60% 45% at 50% 62%,rgba(198,161,91,.2),rgba(198,161,91,0) 70%),
    linear-gradient(180deg,var(--noche) 0%,var(--noche-2) 100%);
}
.cancion > *:not(.petalos){position:relative;z-index:1}
.cancion .cabeza{margin-bottom:10px}
.cancion__artista{margin:0;font-weight:600;font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:var(--oro-claro)}
.cajita{
  position:relative;
  display:block;
  width:min(46vw,200px);
  margin:30px auto 0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.cajita img{position:relative;z-index:1;width:100%;height:auto;filter:drop-shadow(0 16px 26px rgba(0,0,0,.45))}
.cajita__halo{
  position:absolute;
  left:50%;
  top:40%;
  width:150%;
  aspect-ratio:1;
  margin:-75% 0 0 -75%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,226,160,.4) 0%,rgba(255,226,160,0) 65%);
  opacity:.4;
  transition:opacity .5s ease;
}
.cajita:hover .cajita__halo,.cajita:focus-visible .cajita__halo,.cancion.tocando .cajita__halo{opacity:1}
.cajita__notas{position:absolute;left:40%;top:0;z-index:2;width:40%;height:40%;pointer-events:none}
.cajita__notas i{position:absolute;left:calc(var(--i,0) * 22%);bottom:0;width:8px;height:8px;border-radius:50%;background:var(--oro-vivo);box-shadow:0 0 8px rgba(255,226,160,.9);opacity:0}
.cajita__notas i:nth-child(1){--i:0}.cajita__notas i:nth-child(2){--i:1}.cajita__notas i:nth-child(3){--i:2}.cajita__notas i:nth-child(4){--i:3}
.cancion.tocando .cajita__notas i{animation:nota 2.2s ease-out infinite}
.cancion.tocando .cajita__notas i:nth-child(2){animation-delay:.55s}
.cancion.tocando .cajita__notas i:nth-child(3){animation-delay:1.1s}
.cancion.tocando .cajita__notas i:nth-child(4){animation-delay:1.65s}
@keyframes nota{0%{transform:translate(0,0) scale(.6);opacity:0}20%{opacity:1}100%{transform:translate(18px,-90px) scale(1.2);opacity:0}}
.cancion__pista{margin:18px 0 0;font-size:15.5px;color:var(--lila-texto)}
.cancion__pista a{color:var(--oro-vivo)}
.yt-oculto{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;left:-9999px}

/* ------------------------------------------------------------------
   CIERRE
   ------------------------------------------------------------------ */
.cierre{
  padding:96px 22px 92px;
  text-align:center;
  background:
    radial-gradient(ellipse 70% 50% at 50% 32%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%),
    linear-gradient(180deg,var(--perla) 0%,var(--niebla-2) 100%);
}
.cierre > *:not(.cierre__lluvia){position:relative;z-index:1}
.cierre__lluvia{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.cierre__mariposa{width:min(34vw,150px);height:auto;margin:0 auto 14px;filter:drop-shadow(0 0 14px rgba(255,226,160,.8));animation:flotar-mariposa 3.2s ease-in-out infinite}
@keyframes flotar-mariposa{0%,100%{transform:translateY(0) scaleX(1)}20%{transform:translateY(-6px) scaleX(.55)}35%{transform:translateY(-10px) scaleX(1)}70%{transform:translateY(-4px) scaleX(1)}}
.cierre__titulo{margin:0;font-family:var(--script);font-weight:400;font-size:clamp(84px,25vw,160px);line-height:1.05;color:var(--violeta-osc)}
.cierre__texto{margin:8px auto 0;max-width:22em;font-size:18px;color:var(--tinta-suave);text-wrap:balance}
.cierre__firma{margin:16px 0 28px;font-family:var(--display);font-style:italic;font-weight:500;font-size:26px;line-height:1.2;color:var(--violeta)}
.boton--claro{background:rgba(255,255,255,.6)}

/* ------------------------------------------------------------------
   CRÉDITOS · pie común
   ------------------------------------------------------------------ */
.creditos{
  padding:56px 24px calc(var(--abajo) + 104px);
  text-align:center;
  background:var(--tinta);
  color:var(--crema);
}
.creditos__pregunta{margin:0 auto 18px;max-width:18em;font-family:var(--display);font-weight:500;font-size:clamp(23px,6.4vw,30px);line-height:1.25;color:var(--crema);text-wrap:balance}
.creditos__wa{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:0 26px;
  border-radius:999px;
  background:linear-gradient(135deg,#E9D29C 0%,#C6A15B 60%,#B38B45 100%);
  color:var(--tinta);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  letter-spacing:.1em;
  text-transform:uppercase;
  box-shadow:none;
  transition:background-color .35s ease,color .35s ease;
}
.creditos__wa svg{width:20px;height:20px}
.creditos__wa:hover,.creditos__wa:focus-visible{background:var(--glicina);color:var(--tinta);box-shadow:none}
.creditos__correo{
  display:table;
  margin:20px auto 0;
  padding:12px 2px;
  color:var(--lila-texto);
  font-size:14.5px;
  text-decoration:none;
  background:linear-gradient(var(--oro),var(--oro)) no-repeat 0 calc(100% - 9px)/0 1px;
  transition:background-size .4s ease,color .35s ease;
}
.creditos__correo:hover,.creditos__correo:focus-visible{background-size:100% 1px;color:var(--oro-vivo)}
.creditos__extras{display:none}
.creditos__marca{margin:28px auto 0;padding-top:20px;max-width:420px;border-top:1px solid rgba(231,208,154,.3);display:flex;flex-direction:column;gap:4px}
.creditos__logo{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.16em;color:var(--oro-vivo)}
.creditos__lema{font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--lila-texto)}

/* celulares angostos: los botones no se parten en dos líneas */
@media (max-width:380px){
  .boton,.creditos__wa,.lugar__ir,.portada__pista{letter-spacing:.06em}
  .boton,.creditos__wa{padding:0 18px}
  .portada__pista{padding:0 18px 0 14px;font-size:13px}
  .velas__lista{gap:22px 4px}
  .vela__nombre{font-size:17.5px}
  .vela__rel{font-size:12.5px}
}

/* ------------------------------------------------------------------
   ESCRITORIO
   ------------------------------------------------------------------ */
@media (min-width:768px){
  body{font-size:18px}
  .titulo{font-size:clamp(52px,5.4vw,76px)}
  .rotulo{font-size:13px}
  .quince{padding:120px 48px 100px}
  .quince__dentro{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:80px;align-items:center;justify-items:start}
  .retrato{width:380px;margin:30px 0 0}
  .quince__texto{text-align:left}
  .quince__texto .rotulo{text-align:left}
  .quince__texto .filete{margin-left:0}
  .quince__nombre{font-size:clamp(110px,11vw,170px)}
  .quince__dedicatoria{margin-left:0}

  .familia{padding:104px 40px 96px}
  .familia__arcos{grid-template-columns:1fr 1fr;gap:56px}
  .glorieta{width:min(40vw,360px)}

  .fecha__num{font-size:190px}
  .vitral{width:380px;padding:92px 24px 40px}
  .cuenta__dato{min-width:104px}
  .cuenta__n{font-size:56px}

  .lugares{padding:104px 40px 100px}
  .lugares__lista{grid-template-columns:1fr 1fr;gap:36px}
  .lugar{padding:78px 34px 38px}

  .programa{padding:104px 40px 96px}
  .programa__cuerpo{max-width:880px}
  .programa__hilo{left:50%;margin-left:-1.5px}
  .programa__cuerpo::before{left:50%;margin-left:-.5px}
  .momento{grid-template-columns:1fr 44px 1fr;column-gap:30px;padding:14px 0 20px}
  .momento__marca{grid-column:2;grid-row:1 / span 2}
  .momento__hora,.momento__que{grid-column:3;text-align:left}
  .momento:nth-child(even) .momento__hora,.momento:nth-child(even) .momento__que{grid-column:1;text-align:right}
  .momento__hora{grid-row:1}
  .momento__que{grid-row:2}

  .velas{padding:104px 40px 96px}
  .velas__lista{grid-template-columns:repeat(5,minmax(0,1fr));gap:40px 18px}
  .vela__cuerpo{width:60px;height:168px}

  .vestir{padding:104px 40px 96px}
  .atuendos{gap:44px}
  .atuendo__arco{height:400px}

  .galeria-sec{padding:104px 40px 90px}
  .galeria__guia{display:none}
  .galeria{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:44px 34px;
    overflow:visible;
    padding:10px 8px 0;
    margin:10px auto 0;
    max-width:1040px;
  }
  .foto{flex:none;max-width:none}
  .puntos{display:none}
  /* el cursor apaga a las otras y acerca la FOTO (la caja nunca se mueve) */
  .galeria:has(.foto:hover) .foto{opacity:.5}
  .galeria:has(.foto:hover) .foto:hover{opacity:1}
  .foto:hover .foto__arco img{transform:scaleX(1.03) scaleY(1.017)}
  .foto:hover figcaption{color:var(--violeta)}

  .regalos{padding:104px 40px 96px}
  .regalos__lista{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 26px}
  .regalo__arco{max-width:210px;height:190px}
  .regalo:hover .regalo__arco{background:linear-gradient(180deg,#FFFFFF 0%,var(--niebla-2) 100%)}
  .regalo:hover .regalo__arco img{transform:scale(1.07)}
  .sobres{padding:84px 48px 42px}

  .confirmar{padding:104px 40px 96px}
  .cancion{padding:104px 40px 96px}
  .cierre{padding:110px 40px 100px}
}
@media (min-width:1100px){
  .quince__dentro{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:100px}
  .retrato{width:420px}
}

/* ------------------------------------------------------------------
   MOVIMIENTO REDUCIDO
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .revela{opacity:1;transform:none;transition:none}
  .mota,.petalo,.sobre-cae,.portada__pista::before,.pista__mano,.guia__mano,.cajita__notas i,.musica-flotante__ondas i,.musica-flotante__mariposa img,.cierre__mariposa,.vela__llama{animation:none!important}
  .liston,.empanado{display:none}
}