/* =========================================================
   XV Años · Azul noche y oro
   Todo usa "cqw" (1cqw = 1% del ancho de la invitación): se ve IGUAL
   en celular, tablet, laptop, PC y TV; solo escala.
   Las animaciones usan solo transform/opacity (fluidas, sin trabarse).
   ========================================================= */
:root{
  --oro-1:#fbe9ad; --oro-2:#e2b95a; --oro-3:#9a6b1f; --oro-linea:#d6a94c;
  --marfil:#f3ead6;
  --oro:linear-gradient(180deg,#fbe9ad 0%,#e8c26a 32%,#b8832a 62%,#f3d78a 100%);
  --f-caps:'Cinzel',serif;
  --f-script:'Pinyon Script',cursive;
  --f-ital:'Playfair Display',serif;
  --f-texto:'Cormorant Garamond',serif;
  --ease:cubic-bezier(.22,.9,.28,1);
  --ease-suave:cubic-bezier(.45,.05,.2,1);
  --terciopelo:
     repeating-radial-gradient(circle at 30% 20%,rgba(255,255,255,.028) 0 .25cqw,transparent .25cqw .6cqw),
     linear-gradient(160deg,#17397f 0%,#0c2552 55%,#0a1d45 100%);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100dvh;
  background:radial-gradient(120% 70% at 50% 0%,#0f2556 0%,#07122f 55%,#030814 100%);
  color:var(--marfil);font-family:var(--f-texto);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--oro-2);outline-offset:3px}

.oro{
  background:var(--oro);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* ---------- Contenedor ---------- */
.pagina{display:flex;justify-content:center}
.invitacion{
  --hueco:50cqw;                       /* espacio extra cuando se abre la carta */
  container-type:inline-size;
  position:relative;
  width:min(100%,clamp(30rem,62vh,58rem));
  padding-bottom:16cqw;overflow:hidden;
  background:
    radial-gradient(70% 22% at 50% 0%,rgba(30,70,150,.25),transparent 70%),
    linear-gradient(180deg,#00122b 0%,#021a38 40%,#031a38 70%,#02152f 100%);
  box-shadow:0 0 0 1px rgba(214,169,76,.22),0 4vh 12vh rgba(0,0,0,.65);
}
.invitacion::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.8;
  background-image:
    radial-gradient(.25cqw .25cqw at 14% 24%,#e8c76a,transparent),
    radial-gradient(.2cqw .2cqw at 83% 32%,#e8c76a,transparent),
    radial-gradient(.3cqw .3cqw at 26% 47%,#e8c76a,transparent),
    radial-gradient(.2cqw .2cqw at 90% 52%,#e8c76a,transparent),
    radial-gradient(.25cqw .25cqw at 8% 63%,#e8c76a,transparent),
    radial-gradient(.2cqw .2cqw at 72% 70%,#e8c76a,transparent),
    radial-gradient(.3cqw .3cqw at 40% 14%,#e8c76a,transparent),
    radial-gradient(.2cqw .2cqw at 60% 40%,#e8c76a,transparent),
    radial-gradient(.25cqw .25cqw at 94% 80%,#e8c76a,transparent),
    radial-gradient(.2cqw .2cqw at 18% 86%,#e8c76a,transparent);
}

/* ---------- Esquinas con rosas reales ---------- */
.esq{position:absolute;pointer-events:none;z-index:1;height:auto}
.esq--tl{left:1.1cqw;top:4.3cqw;width:27.3cqw}
.esq--tr{right:1.1cqw;top:4.3cqw;width:27.3cqw}
.esq--bl{left:1.1cqw;bottom:0;width:21cqw}
.esq--br{right:1.1cqw;bottom:0;width:21cqw}

/* ---------- Cabecera ---------- */
.cabecera{position:relative;z-index:2;text-align:center;padding-top:6cqw}
.corona{
  display:block;width:42.6cqw;height:auto;margin:0 auto;
  filter:drop-shadow(0 0 2.6cqw rgba(240,200,100,.4));
  animation:entra-corona 1.6s var(--ease) .1s both;
}
.nos{
  margin-top:7cqw;
  font:500 4.3cqw/1.3 var(--f-caps);
  letter-spacing:.05em;text-transform:uppercase;color:#e9d9ac;
  animation:sube 1.1s var(--ease) .5s both;
}
.titulo{margin-top:6cqw;font-weight:400;line-height:1;position:relative}
.quince{font:italic 500 19cqw/1 var(--f-ital);display:inline-block;animation:entra-quince 1.5s var(--ease) .8s both}
.anios{font:9.5cqw/1 var(--f-script);display:inline-block;margin-left:1.2cqw;transform:translateY(1cqw);animation:entra-anios 1.2s var(--ease) 1.2s both}

/* El nombre se "escribe" de izquierda a derecha y luego brilla de vez en cuando */
.nombre{
  display:block;font:var(--tam,17.5cqw)/1.15 var(--f-script);margin-top:-1cqw;padding:0 2cqw;
  background:
    linear-gradient(100deg,transparent 42%,rgba(255,250,222,.95) 50%,transparent 58%) 200% 0/250% 100% no-repeat,
    var(--oro);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 44%,transparent 56%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 44%,transparent 56%,transparent 100%);
  -webkit-mask-size:260% 100%;mask-size:260% 100%;
  -webkit-mask-position:100% 0;mask-position:100% 0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:escribir 2.8s var(--ease-suave) 1.5s both, brillo 8s ease-in-out 5s infinite;
}
.adorno{display:block;width:46cqw;margin:1.5cqw auto 0;overflow:visible}
.adorno path:first-child{stroke-dasharray:1;stroke-dashoffset:1;animation:trazo-linea 1.8s var(--ease-suave) 3.6s forwards}
.adorno__rombo{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:pop 1s var(--ease) 4.4s forwards}

@keyframes entra-corona{from{opacity:0;transform:translateY(-3cqw) scale(.94)}to{opacity:1;transform:none}}
@keyframes sube{from{opacity:0;transform:translateY(2cqw)}to{opacity:1;transform:none}}
@keyframes entra-quince{from{opacity:0;transform:scale(.8) translateY(2cqw)}to{opacity:1;transform:none}}
@keyframes entra-anios{from{opacity:0;transform:translate(-2cqw,1cqw)}to{opacity:1;transform:translateY(1cqw)}}
@keyframes escribir{
  from{-webkit-mask-position:100% 0;mask-position:100% 0}
  to{-webkit-mask-position:0 0;mask-position:0 0}
}
@keyframes brillo{
  0%,55%{background-position:200% 0,0 0}
  100%{background-position:-100% 0,0 0}
}
@keyframes trazo-linea{to{stroke-dashoffset:0}}
@keyframes pop{to{transform:scale(1)}}

/* =========================================================
   SOBRE  (todo se mueve con transform/opacity)
   ========================================================= */
.zona-sobre{position:relative;z-index:3}
.rama{position:absolute;height:auto;pointer-events:none;z-index:1}
.rama--izq{left:0;top:-14cqw;width:10cqw}
.rama--izq2{left:6cqw;top:30cqw;width:7cqw;opacity:.55;transform:scaleY(-1) rotate(8deg)}
.rama--der{right:0;top:-14cqw;width:16cqw}
.rama--espejo{right:0;top:12cqw;width:10cqw;transform:scaleX(-1)}

.escena{position:relative;width:77cqw;margin:9cqw auto 0}
.abierta .escena{margin-bottom:var(--hueco)}   /* se compensa con transform: no hay salto visual */

.sobre{position:relative;width:100%;aspect-ratio:545/420;perspective:140cqw;will-change:transform}
.sobre__atras{position:absolute;inset:0;background:var(--terciopelo);box-shadow:0 2.5cqw 5cqw rgba(0,0,0,.55);
  background-blend-mode:normal}
.sobre__atras::after{content:"";position:absolute;inset:0;background:#020a24;opacity:.35}
.sobre__frente{position:absolute;inset:0;z-index:3}
.sobre__frente i{position:absolute;inset:0;background:var(--terciopelo)}
.sobre__frente i:nth-child(1){clip-path:polygon(0 0,52% 52%,0 100%)}
.sobre__frente i:nth-child(2){clip-path:polygon(100% 0,48% 52%,100% 100%);background:linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.07)),var(--terciopelo)}
.sobre__frente i:nth-child(3){clip-path:polygon(0 100%,50% 46%,100% 100%);background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)),var(--terciopelo)}
.sobre__solapa{
  position:absolute;left:0;right:0;top:0;height:52%;z-index:5;
  transform-origin:50% 0;will-change:transform;backface-visibility:visible;
  background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)),var(--terciopelo);
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.sobre__solapa::after{content:"";position:absolute;inset:0;background:#020a24;opacity:0}

/* Carta que sale del sobre */
.carta{
  position:absolute;left:14%;width:72%;top:6%;height:88%;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  padding-top:2.5cqw;text-align:center;color:var(--marfil);
  background:
    radial-gradient(80% 60% at 50% 30%,rgba(40,90,190,.35),transparent 70%),
    linear-gradient(180deg,#0d2556,#07173d);
  box-shadow:inset 0 0 0 .3cqw var(--oro-linea),inset 0 0 0 .8cqw #07173d,inset 0 0 0 1cqw rgba(214,169,76,.7);
  will-change:transform;
}
.ramo{position:relative;width:36cqw;height:27cqw;flex:none}
.ramo .rosa{
  position:absolute;height:auto;aspect-ratio:1;
  left:calc(var(--x)*1% - var(--s)*.5cqw);top:calc(var(--y)*1% - var(--s)*.5cqw);
  width:calc(var(--s)*1cqw);
  transform:scale(0) rotate(-50deg);will-change:transform;
}
.ramo .hoja-ramo{position:absolute;width:7cqw;aspect-ratio:60/100;left:calc(50% - 3.5cqw);top:10cqw;transform-origin:50% 100%;opacity:0}
.ramo .h1{transform:rotate(-62deg)}.ramo .h2{transform:rotate(-28deg)}
.ramo .h3{transform:rotate(28deg)}.ramo .h4{transform:rotate(62deg)}
.carta__nombre{
  font:9cqw/1.1 var(--f-script);margin-top:.5cqw;padding:0 1cqw;
  background:var(--oro);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.carta__txt{font:italic 500 3.3cqw/1.2 var(--f-texto);margin-top:1cqw;color:#e9dcb4}

/* Ornamento + sello */
.ornamento{position:absolute;left:50%;top:54%;width:88%;translate:-50% -50%;z-index:6;pointer-events:none}
.sello,.sello-mitad{position:absolute;left:50%;top:54%;width:39%;aspect-ratio:1;translate:-50% -50%;z-index:8}
.sello{padding:0;border:0;background:none;animation:latido 3s ease-in-out infinite;will-change:transform}
.sello::before,.sello-mitad::before{      /* sombra barata (sin filtros) */
  content:"";position:absolute;inset:6% -4% -10% 2%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);
}
.sello-cara{position:absolute;inset:0;display:grid;place-items:center}
.sello-cara svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sello-v{position:absolute;font:19cqw/1 var(--f-script);color:rgba(110,70,10,.4);transform:translate(-1cqw,-.5cqw)}
.sello-texto{
  position:relative;font:600 3.4cqw/1 var(--f-caps);letter-spacing:.03em;text-transform:uppercase;
  color:#4a3008;text-shadow:0 .1cqw 0 rgba(255,235,170,.7);
}
@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

/* Sello partido */
.sello-mitad{pointer-events:none;will-change:transform,opacity}
.sello-mitad--izq .sello-cara{clip-path:polygon(0 0,52% 0,45% 18%,55% 36%,46% 54%,54% 72%,48% 100%,0 100%)}
.sello-mitad--der .sello-cara{clip-path:polygon(52% 0,100% 0,100% 100%,48% 100%,54% 72%,46% 54%,55% 36%,45% 18%)}
.sello-mitad--izq{animation:parte-izq 1.1s var(--ease-suave) forwards}
.sello-mitad--der{animation:parte-der 1.1s var(--ease-suave) forwards}
@keyframes parte-izq{0%{transform:none;opacity:1}22%{transform:translate(-2cqw,0) rotate(-6deg);opacity:1}100%{transform:translate(-9cqw,18cqw) rotate(-38deg);opacity:0}}
@keyframes parte-der{0%{transform:none;opacity:1}22%{transform:translate(2cqw,0) rotate(6deg);opacity:1}100%{transform:translate(9cqw,20cqw) rotate(34deg);opacity:0}}

.chispa{
  position:absolute;left:50%;top:54%;z-index:9;pointer-events:none;
  width:var(--t);height:var(--t);border-radius:50%;
  background:radial-gradient(circle,#fff8d6 0,#f1cf70 45%,transparent 70%);
  opacity:0;will-change:transform,opacity;
  animation:chispa 1.5s ease-out var(--r) forwards;
}
@keyframes chispa{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.4)}
  15%{opacity:1}
  100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) scale(1)}
}

/* Secuencia de apertura: el sobre baja, la solapa se abre y la carta sube */
.is-open .ornamento{opacity:0;transition:opacity .5s ease}
.is-open .sobre{animation:bajar-sobre 1.5s var(--ease-suave) .2s both}
.is-open .sobre__solapa{animation:solapa 1.1s var(--ease-suave) .55s both}
.is-open .sobre__solapa::after{animation:oscurecer 1.1s ease .55s both}
.is-open .carta{animation:carta 1.5s var(--ease) 1.15s both}
.is-open .ramo .rosa{animation:florecer 1s cubic-bezier(.2,1.4,.4,1) calc(2s + var(--d)*.14s) both}
.is-open .ramo .hoja-ramo{animation:aparecer .7s ease 2.2s both}
.abierta .detalles{animation:bajar-detalles 1.7s var(--ease-suave) .2s both}
@keyframes bajar-sobre{from{transform:translateY(0)}to{transform:translateY(31cqw)}}
@keyframes bajar-detalles{from{transform:translateY(calc(var(--hueco)*-1))}to{transform:none}}
@keyframes solapa{
  0%{transform:rotateX(0);z-index:5}
  49%{z-index:5}
  50%{z-index:1}
  100%{transform:rotateX(180deg);z-index:1}
}
@keyframes oscurecer{to{opacity:.38}}
@keyframes carta{from{transform:translateY(0)}to{transform:translateY(-64%)}}
@keyframes florecer{from{transform:scale(0) rotate(-50deg)}to{transform:scale(1) rotate(var(--rot,0deg))}}
@keyframes aparecer{to{opacity:1}}

.escena__accion{
  position:absolute;left:0;right:0;top:calc(100% + 36cqw);text-align:center;
  opacity:0;pointer-events:none;
}
.abierta .escena__accion{pointer-events:auto;animation:aparece-btn 1s var(--ease) 3.2s both}
@keyframes aparece-btn{from{opacity:0;transform:translateY(2cqw)}to{opacity:1;transform:none}}

/* Pétalos que caen */
.petalo{
  position:absolute;top:-18cqw;left:var(--x);width:var(--w);aspect-ratio:1/1.3;z-index:7;pointer-events:none;
  background:radial-gradient(120% 90% at 30% 20%,#6c9cff,#1c48c2 55%,#07215f);
  border-radius:100% 0 100% 0;opacity:0;will-change:transform,opacity;
  animation:caer var(--dur) linear var(--del) forwards;
}
@keyframes caer{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}
  12%{opacity:.95}
  85%{opacity:.8}
  100%{opacity:0;transform:translate3d(var(--dx),115cqw,0) rotate(var(--giro))}
}

/* =========================================================
   DETALLES
   ========================================================= */
.detalles{position:relative;z-index:4;margin:7cqw 5cqw 0;will-change:transform}
.trio{position:absolute;left:50%;top:-11cqw;width:53cqw;height:auto;translate:-50% 0;z-index:3;pointer-events:none}

.marco{
  position:relative;padding:11cqw 4cqw 8cqw;text-align:center;
  border:.4cqw solid var(--oro-linea);border-radius:7cqw 7cqw 5cqw 5cqw;
  box-shadow:inset 0 0 0 1cqw #07143a,inset 0 0 0 1.25cqw rgba(214,169,76,.55);
  background:linear-gradient(180deg,rgba(14,34,87,.35),rgba(6,16,48,.1));
}
.fecha-larga{font:500 3.9cqw/1.2 var(--f-caps);letter-spacing:.02em;white-space:nowrap}

/* Dos casillas: hora de la misa y hora de la fiesta */
.tira{
  position:relative;margin:3.5cqw 0 3cqw;padding:3.5cqw 0;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  background:
    linear-gradient(90deg,transparent,rgba(214,169,76,.85),transparent) top/100% 1px no-repeat,
    linear-gradient(90deg,transparent,rgba(214,169,76,.85),transparent) bottom/100% 1px no-repeat;
}
.hora{display:flex;flex-direction:column;align-items:center;line-height:1}
.hora__tit{font:italic 500 5cqw/1 var(--f-texto);color:#e7cd8b;letter-spacing:.04em}
.hora__num{font:500 10cqw/1.05 var(--f-caps);margin-top:1cqw;
  background:var(--oro);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hora__ampm{font:500 3cqw/1 var(--f-caps);letter-spacing:.3em;color:#cdb87d;margin-top:1cqw;padding-left:.3em}
.tira__rosa{width:11cqw;height:auto;aspect-ratio:1;margin:0 2cqw}

/* Lugares: tipografía fina y hover elegante */
.lugar{
  position:relative;display:grid;grid-template-columns:11cqw 1fr;gap:3cqw;align-items:center;
  margin-top:2cqw;padding:2cqw 2.5cqw;border-radius:3cqw;
  color:inherit;text-decoration:none;
  transition:transform .6s var(--ease),background-color .6s ease;
}
.lugar::before{                           /* resplandor dorado al pasar el cursor */
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none;
  background:radial-gradient(70% 140% at 50% 50%,rgba(226,185,90,.16),transparent 75%);
  box-shadow:inset 0 0 0 1px rgba(226,185,90,.35);
  transition:opacity .6s ease;
}
.lugar__icono{
  width:11cqw;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,#133a86,#0a2152);
  border:.3cqw solid var(--oro-linea);box-shadow:inset 0 0 0 .55cqw #0a1d4a;
  transition:transform .7s var(--ease),box-shadow .7s ease;
}
.lugar__icono svg{width:60%}
.lugar__txt{display:flex;flex-direction:column;align-items:center;gap:.5cqw}
.lugar__tit{font:500 3.1cqw/1 var(--f-caps);letter-spacing:.34em;text-transform:uppercase;color:#d9c58f;padding-left:.34em}
.lugar__nom{
  position:relative;display:inline-block;padding:.4cqw 1cqw;
  font:italic 600 5.7cqw/1.15 var(--f-texto);letter-spacing:.01em;
  transition:transform .7s var(--ease);
}
.lugar__nom::after{                       /* línea dorada que se dibuja */
  content:"";position:absolute;left:8%;right:8%;bottom:-.2cqw;height:1px;
  background:linear-gradient(90deg,transparent,#f3d78a,transparent);
  transform:scaleX(0);transition:transform .7s var(--ease);
}
.lugar__mapa{
  font:italic 400 2.9cqw/1 var(--f-texto);letter-spacing:.08em;color:#cdb87d;
  opacity:.55;transform:translateY(-.3cqw);transition:opacity .6s ease,transform .6s var(--ease);
}
@media (hover:hover){
  .lugar:hover{transform:translateY(-.5cqw)}
  .lugar:hover::before{opacity:1}
  .lugar:hover .lugar__icono{transform:scale(1.08) rotate(-6deg);box-shadow:inset 0 0 0 .55cqw #0a1d4a,0 0 3cqw rgba(240,200,100,.45)}
  .lugar:hover .lugar__nom{transform:translateY(-.2cqw)}
  .lugar:hover .lugar__nom::after{transform:scaleX(1)}
  .lugar:hover .lugar__mapa{opacity:1;transform:none}
}
.lugar:focus-visible::before{opacity:1}
.lugar:active{transform:scale(.985)}

/* =========================================================
   LLUVIA DE SOBRES
   ========================================================= */
.lluvia{position:relative;margin-top:5cqw;padding-top:7cqw;text-align:center;overflow:hidden;isolation:isolate}
.lluvia::before{                           /* separador: línea + rombo */
  content:"";position:absolute;left:12%;right:12%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(214,169,76,.85),transparent);
}
.lluvia::after{
  content:"";position:absolute;left:50%;top:-.9cqw;width:1.8cqw;height:1.8cqw;
  background:#0a1a45;border:1px solid var(--oro-linea);transform:translateX(-50%) rotate(45deg);
}
.lluvia__sobre{display:block;width:13cqw;margin:0 auto;filter:drop-shadow(0 .8cqw 1cqw rgba(0,0,0,.45))}
.lluvia__tit{font:400 9cqw/1.1 var(--f-script);margin:1cqw 0 2.2cqw;padding:0 1cqw}
.lluvia__txt{
  max-width:64cqw;margin:0 auto;
  font:italic 500 4cqw/1.5 var(--f-texto);letter-spacing:.01em;color:#eadfbf;
  text-wrap:balance;
}
.llueve{
  position:absolute;top:0;left:var(--x);width:var(--w);height:auto;z-index:-1;opacity:0;
  will-change:transform,opacity;animation:llover var(--dur) linear var(--del) infinite paused;
}
.lluvia.visible .llueve{animation-play-state:running}
@keyframes llover{
  0%{opacity:0;transform:translate3d(0,-4cqw,0) rotate(var(--r0))}
  14%{opacity:.85}
  80%{opacity:.7}
  100%{opacity:0;transform:translate3d(var(--dx),42cqw,0) rotate(var(--r1))}
}

/* =========================================================
   BOTONES
   ========================================================= */
.btn-oro,.btn-linea{
  display:inline-block;text-decoration:none;text-align:center;
  font:600 max(.95rem,3.6cqw)/1 var(--f-caps);letter-spacing:.06em;
  padding:1.1em 1.9em;border-radius:999px;
}
.btn-oro{
  border:1px solid #f6df9a;color:#3b2607;
  background:linear-gradient(180deg,#fbe9ad,#e0b650 45%,#b8832a);
  box-shadow:0 .5rem 1.4rem rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .2s,filter .2s;
}
.btn-oro:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-oro:disabled{opacity:.6;cursor:wait}
.btn-oro--full{width:100%}
.dlg .btn-oro,.dlg .btn-linea{font-size:1rem}
.btn-linea{background:none;border:1px solid var(--oro-linea);color:#ecd9a3}
.btn-linea:hover{background:rgba(214,169,76,.12)}

/* =========================================================
   FORMULARIO (modal nativo <dialog>)
   ========================================================= */
.dlg{
  width:min(32rem,calc(100% - 1.5rem));max-height:92dvh;overflow:auto;
  margin:auto;padding:2rem 1.5rem 1.75rem;
  color:var(--marfil);font-family:var(--f-texto);font-size:1.15rem;
  background:
    radial-gradient(90% 40% at 50% 0%,rgba(40,80,170,.3),transparent 70%),
    linear-gradient(180deg,#0a1b48,#061030);
  border:1px solid var(--oro-linea);border-radius:1.4rem;
  box-shadow:inset 0 0 0 .35rem #061030,inset 0 0 0 .4rem rgba(214,169,76,.45),0 2rem 5rem rgba(0,0,0,.7);
}
.dlg::backdrop{background:rgba(2,6,20,.72);}
.dlg[open]{animation:subir .7s cubic-bezier(.2,.9,.2,1)}
@keyframes subir{from{opacity:0;transform:translateY(3rem) scale(.96)}to{opacity:1;transform:none}}
.dlg__cerrar{position:absolute;top:.6rem;right:.9rem;background:none;border:0;font-size:2rem;line-height:1;color:#e7cd8b}
.dlg__vista{text-align:center}
.dlg__titulo{font:400 clamp(2.2rem,8vw,2.9rem)/1.1 var(--f-script);padding:.1em .2em}
.dlg__sub{margin:.4rem 0 1.4rem;color:#d9ceb0;font-size:1.15rem;line-height:1.4}
.dlg__sub strong{color:#f1d98a}

.campo{text-align:left;margin-bottom:1.2rem}
.campo label{display:block;font:500 1.05rem/1.2 var(--f-caps);color:#ecd9a3;margin-bottom:.35rem}
.opc{font-family:var(--f-texto);font-style:italic;color:#a9a58f;font-size:.95rem}
.campo input,.campo textarea{
  width:100%;padding:.55rem .15rem;font:inherit;font-size:max(16px,1.2rem);color:var(--marfil);
  background:transparent;border:0;border-bottom:1px solid rgba(214,169,76,.6);border-radius:0;resize:vertical;
}
.campo input:focus,.campo textarea:focus{outline:none;border-bottom-color:#f6df9a;box-shadow:0 1px 0 #f6df9a}
.ayuda{display:block;margin-top:.3rem;color:#a9a58f;font-style:italic}

.opciones{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;border:0;padding:0;margin:0 0 1.4rem}
.opcion{position:relative;cursor:pointer}
.opcion input{position:absolute;opacity:0;inset:0}
.opcion span{
  display:block;padding:.8rem .5rem;text-align:center;border-radius:.8rem;
  border:1px solid rgba(214,169,76,.5);font-size:1.05rem;line-height:1.15;transition:.2s;
}
.opcion input:checked+span{background:linear-gradient(180deg,#fbe9ad,#d9aa48);color:#3b2607;border-color:#f6df9a;font-weight:600}
.opcion input:focus-visible+span{outline:2px solid var(--oro-2);outline-offset:3px}

.stepper{display:flex;align-items:center;justify-content:center;gap:1.4rem}
.stepper button{
  width:3rem;height:3rem;border-radius:50%;font-size:1.7rem;line-height:1;
  background:#0c2152;border:1px solid var(--oro-linea);color:#f1d98a;
}
.stepper button:disabled{opacity:.35;cursor:not-allowed}
.stepper output{min-width:3rem;text-align:center;font:500 2.4rem/1 var(--f-caps);color:#f1d98a}

.nombres{display:grid;gap:.4rem}
.nombres input{animation:entra .35s ease both}
@keyframes entra{from{opacity:0;transform:translateY(-.4rem)}to{opacity:1;transform:none}}

.error{margin:0 0 1rem;padding:.6rem .8rem;border-radius:.6rem;background:rgba(190,40,60,.18);border:1px solid rgba(255,120,130,.5);color:#ffd5d9;font-size:1.05rem;text-align:left}

.check{width:5rem;margin:0 auto .4rem;display:block}
.check circle{stroke-dasharray:145;stroke-dashoffset:145;animation:trazo .8s ease forwards}
.check path{stroke-dasharray:40;stroke-dashoffset:40;animation:trazo .5s ease .6s forwards}
@keyframes trazo{to{stroke-dashoffset:0}}
.acciones{display:grid;gap:.7rem;margin-top:1rem}

/* =========================================================
   Pantallas grandes / TV, y accesibilidad
   ========================================================= */
@media (min-width:1800px){.dlg{font-size:1.35rem;width:38rem}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .sello,.mano{animation:none}
}

/* Botón de música */
.musica{
  position:fixed;z-index:50;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));
  width:3.1rem;height:3.1rem;border-radius:50%;padding:0;display:grid;place-items:center;
  background:radial-gradient(circle,#133a86,#0a2152);
  border:1px solid var(--oro-linea);box-shadow:0 .4rem 1.2rem rgba(0,0,0,.5),inset 0 0 0 .2rem #0a1d4a;
  transition:transform .4s var(--ease),box-shadow .4s ease;
}
.musica:hover{transform:scale(1.08);box-shadow:0 .4rem 1.2rem rgba(0,0,0,.5),0 0 1.2rem rgba(240,200,100,.45),inset 0 0 0 .2rem #0a1d4a}
.musica svg{width:1.5rem}
.musica__barras rect{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.35)}
.musica.suena .musica__barras rect{animation:barra 1.1s ease-in-out infinite}
.musica.suena .musica__barras rect:nth-child(2){animation-delay:-.4s}
.musica.suena .musica__barras rect:nth-child(3){animation-delay:-.8s}
.musica.suena .musica__barras rect:nth-child(4){animation-delay:-.2s}
.musica__raya{position:absolute;width:62%;height:1.5px;background:#e8c26a;transform:rotate(-45deg);transition:opacity .3s}
.musica.suena .musica__raya{opacity:0}
/* Letrero: "Toca para activar la música" */
.musica-aviso{
  position:fixed;z-index:50;right:calc(max(1rem,env(safe-area-inset-right)) + 3.9rem);bottom:calc(max(1rem,env(safe-area-inset-bottom)) + .55rem);
  padding:.55rem 1rem;border-radius:999px;white-space:nowrap;
  font:italic 500 1.05rem/1 var(--f-texto);color:#f3e3b0;letter-spacing:.02em;
  background:rgba(7,20,58,.92);border:1px solid var(--oro-linea);box-shadow:0 .4rem 1.2rem rgba(0,0,0,.5);
  opacity:0;transform:translateX(.6rem);pointer-events:none;
  transition:opacity .5s ease,transform .6s var(--ease);
}
.musica-aviso.ver{opacity:1;transform:none}
@keyframes barra{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* =========================================================
   PORTADA DE BIENVENIDA
   Se escala con la dimensión más chica de la pantalla (--u),
   así cabe igual en celular vertical, laptop, TV, etc.
   ========================================================= */
body.con-portada{overflow:hidden}
.con-portada .cabecera *{animation-play-state:paused}   /* el título espera a que se abra la portada */

.portada{
  position:fixed;inset:0;z-index:100;container-type:size;overflow:hidden;
  display:grid;place-items:center;cursor:pointer;touch-action:manipulation;
}
.portada > *{--u:min(1cqw,.64cqh)}
.portada__puerta{
  position:absolute;top:0;bottom:0;width:50.2%;z-index:1;overflow:hidden;will-change:transform;
  background:linear-gradient(180deg,#00122b 0%,#021a38 45%,#02152f 100%);
}
.portada__puerta::before{                  /* luz azul y polvo de oro (continúa entre ambas puertas) */
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(.25cqmin .25cqmin at 20% 18%,#e8c76a,transparent),
    radial-gradient(.2cqmin .2cqmin at 72% 30%,#e8c76a,transparent),
    radial-gradient(.3cqmin .3cqmin at 40% 62%,#e8c76a,transparent),
    radial-gradient(.2cqmin .2cqmin at 86% 78%,#e8c76a,transparent),
    radial-gradient(.25cqmin .25cqmin at 12% 84%,#e8c76a,transparent),
    var(--luz);
}
.portada__puerta--izq{left:0;--luz:radial-gradient(150% 70% at 100% 30%,rgba(30,70,150,.5),transparent 70%)}
.portada__puerta--der{right:0;--luz:radial-gradient(150% 70% at 0% 30%,rgba(30,70,150,.5),transparent 70%)}
.pt-esq{position:absolute;height:auto;width:calc(30*var(--u));pointer-events:none}
.portada__puerta--izq .pt-esq{left:calc(1*var(--u))}
.portada__puerta--der .pt-esq{right:calc(1*var(--u))}
.pt-esq--arriba{top:calc(2*var(--u))}
.pt-esq--abajo{bottom:0;width:calc(23*var(--u))}
.portada::after{                           /* línea dorada donde se juntan las puertas */
  content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(214,169,76,.35),transparent);
}

.portada__centro{
  position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:calc(2*var(--u)) calc(4*var(--u));
}
.pt-item{animation:pt-sube 1.1s var(--ease) calc(.25s + var(--i)*.22s) both}
@keyframes pt-sube{from{opacity:0;transform:translateY(calc(3*var(--u)))}to{opacity:1;transform:none}}

.pt-corona{width:calc(46*var(--u));height:auto;filter:drop-shadow(0 0 calc(3*var(--u)) rgba(240,200,100,.4))}
.pt-nos{margin-top:calc(4*var(--u));font:500 calc(3.6*var(--u))/1.3 var(--f-caps);letter-spacing:.05em;text-transform:uppercase;color:#e9d9ac}
.pt-quince{margin-top:calc(4*var(--u));line-height:1}
.pt-15{font:italic 500 calc(14*var(--u))/1 var(--f-ital)}
.pt-anios{font:calc(7*var(--u))/1 var(--f-script);margin-left:calc(1*var(--u))}
.pt-nombre{
  font:calc(var(--tam)*var(--u))/1.15 var(--f-script);padding:0 calc(2*var(--u));margin-top:calc(-1*var(--u));
  background:
    linear-gradient(100deg,transparent 42%,rgba(255,250,222,.95) 50%,transparent 58%) 200% 0/250% 100% no-repeat,
    var(--oro);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 44%,transparent 56%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 44%,transparent 56%,transparent 100%);
  -webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:escribir 2.8s var(--ease-suave) .9s both, brillo 8s ease-in-out 4.5s infinite;
}
.pt-adorno{width:calc(40*var(--u));margin-top:calc(1*var(--u));overflow:visible}
.pt-adorno path:first-child{stroke-dasharray:1;stroke-dashoffset:1;animation:trazo-linea 1.8s var(--ease-suave) 2.8s forwards}

.pt-sello{
  position:relative;width:calc(30*var(--u));aspect-ratio:1;margin-top:calc(5*var(--u));padding:0;border:0;background:none;
  animation:pt-sube 1.1s var(--ease) calc(.25s + var(--i)*.22s) both, latido 3s ease-in-out 2s infinite;
  will-change:transform;
}
.pt-sello::before{content:"";position:absolute;inset:6% -4% -10% 2%;border-radius:50%;z-index:-1;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent)}
.pt-sello::after{                          /* onda dorada que invita a tocar */
  content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(240,200,100,.8);
  animation:onda 2.6s ease-out 2.2s infinite;pointer-events:none;
}
@keyframes onda{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.75);opacity:0}}
.portada .sello-v{font:calc(18*var(--u))/1 var(--f-script)}
.portada .sello-texto{font:600 calc(4.2*var(--u))/1 var(--f-caps);letter-spacing:.08em}
.pt-hint{margin-top:calc(4.5*var(--u));font:italic 500 calc(3.4*var(--u))/1.2 var(--f-texto);letter-spacing:.04em;color:#cdb87d}

/* Al tocar: el contenido se desvanece y las puertas se abren */
.abriendo{pointer-events:none}
.abriendo .portada__centro{animation:pt-sale .8s ease forwards}
.abriendo::after{animation:pt-sale .5s ease forwards}
.abriendo .portada__puerta--izq{animation:puerta-izq 1.6s var(--ease-suave) .5s forwards}
.abriendo .portada__puerta--der{animation:puerta-der 1.6s var(--ease-suave) .5s forwards}
@keyframes pt-sale{to{opacity:0;transform:scale(1.07)}}
@keyframes puerta-izq{to{transform:translateX(-102%)}}
@keyframes puerta-der{to{transform:translateX(102%)}}

[hidden]{display:none!important}


[hidden]{display:none!important}