/* Invitación XV · María José
   Concepto "noche de linternas": un cielo violeta fijo con linternas que suben (y se mueven en
   profundidad al hacer scroll) queda detrás de toda la invitación. Encima flotan tarjetas de
   pergamino lila con marco dorado y ramos de flores lila, como las del vestido. El oro es la luz de
   las linternas; la trenza dorada con florecitas cose las secciones. Look único (no cambia con el
   modo oscuro del teléfono). */
:root{
  --noche:#1A1030;
  --noche-2:#291A45;
  --noche-3:#432C6B;
  --lila:#C4A3E3;
  --lila-claro:#E8DCF6;
  --papel:#F8F4FC;
  --tarjeta:#FFFDFF;
  --ciruela:#33204F;
  --ciruela-suave:#6A5787;
  --borde:#DCCDEC;
  --oro:#E2B45A;
  --oro-claro:#F7DE9E;
  --oro-oscuro:#A8772B;
  --luz:#F5EEFC;
  --luz-suave:#C2B2DA;
  --error:#9B2C4A;

  --f-script:"Pinyon Script","Snell Roundhand","Apple Chancery",cursive;
  --f-caps:"Marcellus","Cormorant SC","Trajan Pro",Georgia,serif;
  --f-texto:"EB Garamond",Garamond,"Iowan Old Style",Georgia,serif;

  --cielo:radial-gradient(140% 55% at 50% 108%,#7A5AAE 0%,#4A3279 30%,#2A1A4B 62%,#170D2B 100%);
  --oro-grad:linear-gradient(100deg,#C4913A 0%,#F7DE9E 25%,#E2B45A 50%,#FFF0C4 75%,#C4913A 100%);
  --pergamino:
    radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 60%),
    linear-gradient(165deg,#FBF8FE 0%,#F2EAFB 55%,#E4D4F5 100%);
  --trenza-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Cg fill='%23E2B45A' stroke='%23A8772B' stroke-width='.6'%3E%3Cellipse cx='0' cy='9.3' rx='6.3' ry='2.7' transform='rotate(24 0 9.3)'/%3E%3Cellipse cx='12' cy='9.3' rx='6.3' ry='2.7' transform='rotate(24 12 9.3)'/%3E%3Cellipse cx='6' cy='4.7' rx='6.3' ry='2.7' transform='rotate(-24 6 4.7)'/%3E%3C/g%3E%3C/svg%3E");
  --trenza-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cg transform='translate(14 0) rotate(90)' fill='%23E2B45A' stroke='%23A8772B' stroke-width='.6'%3E%3Cellipse cx='0' cy='9.3' rx='6.3' ry='2.7' transform='rotate(24 0 9.3)'/%3E%3Cellipse cx='12' cy='9.3' rx='6.3' ry='2.7' transform='rotate(24 12 9.3)'/%3E%3Cellipse cx='6' cy='4.7' rx='6.3' ry='2.7' transform='rotate(-24 6 4.7)'/%3E%3C/g%3E%3C/svg%3E");
  --flor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg fill='%23F1E6FB' stroke='%239E7CC6' stroke-width='.7'%3E%3Cellipse cy='-5.6' rx='3.4' ry='5.4'/%3E%3Cellipse cy='-5.6' rx='3.4' ry='5.4' transform='rotate(72)'/%3E%3Cellipse cy='-5.6' rx='3.4' ry='5.4' transform='rotate(144)'/%3E%3Cellipse cy='-5.6' rx='3.4' ry='5.4' transform='rotate(216)'/%3E%3Cellipse cy='-5.6' rx='3.4' ry='5.4' transform='rotate(288)'/%3E%3C/g%3E%3Ccircle r='2.6' fill='%23E2B45A'/%3E%3C/svg%3E");
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .12 0 0 0 0 .32 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  color-scheme:light;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--noche);color:var(--ciruela);
  font-family:var(--f-texto);font-size:1.125rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
body.sellado{overflow:hidden}
img,video{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit}
p{margin:0}

.envoltura{
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
.contenedor{max-width:620px;margin-inline:auto}
.contenedor.ancho{max-width:980px}
.centro{text-align:center}

/* ---------- Cielo fijo ---------- */
.cielo{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:0;background:var(--cielo);pointer-events:none}
.cielo canvas{display:block;width:100%;height:100%}
main{position:relative;z-index:1}

/* ---------- Tipografía ---------- */
.eyebrow{
  font-family:var(--f-caps);font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ciruela-suave);text-wrap:balance;
}
.titulo{
  font-family:var(--f-script);font-weight:400;
  font-size:clamp(3rem,12vw,4.4rem);line-height:1.15;
  margin:.05em 0 .25em;padding:.08em .2em;text-wrap:balance;color:var(--ciruela);
}
.titulo--xl{font-size:clamp(4.6rem,21vw,8rem)}

/* Sobre el cielo: oro y luz */
.banda,.hero,.sobre{color:var(--luz)}
.banda .eyebrow,.hero .eyebrow,.sobre .eyebrow{color:var(--oro-claro)}
.banda .titulo{
  background:var(--oro-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 14px rgba(226,180,90,.25));
}
.eyebrow--suave{color:var(--luz-suave)!important}

/* ---------- Pergamino (tarjetas lila) ---------- */
.pergamino{
  position:relative;color:var(--ciruela);
  padding:clamp(56px,11vw,80px) clamp(22px,6vw,56px) clamp(48px,9vw,68px);
  border-radius:30px;background:var(--grano),var(--pergamino);
  box-shadow:0 50px 90px -40px rgba(5,2,15,.9),0 0 80px -14px rgba(196,163,227,.5);
}
.pergamino::before,.pergamino::after{content:"";position:absolute;pointer-events:none}
.pergamino::before{inset:10px;border:1px solid rgba(168,119,43,.55);border-radius:22px}
.pergamino::after{inset:15px;border:1px solid rgba(168,119,43,.2);border-radius:18px}
.pergamino .eyebrow{color:var(--ciruela-suave)}
.pergamino .titulo{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--ciruela);filter:none}

/* ---------- Ramos de flores (SVG generado en app.js) ---------- */
.ramo{position:absolute;z-index:3;pointer-events:none;width:clamp(120px,34vw,180px);filter:drop-shadow(0 6px 8px rgba(30,12,60,.28))}
.ramo svg{display:block;width:100%;height:auto;overflow:visible}
.ramo--tl{top:-30px;left:-12px}
.ramo--tr{top:-30px;right:-12px;transform:scaleX(-1)}
.ramo--bl{bottom:-30px;left:-12px;transform:scaleY(-1)}
.ramo--br{bottom:-30px;right:-12px;transform:scale(-1,-1)}
.ramo--cima{top:-44px;left:50%;width:min(86%,340px);transform:translateX(-50%)}
.pergamino > .ramo--bl,.pergamino > .ramo--br{bottom:-62px}
.pergamino > .ramo--tl,.pergamino > .ramo--tr{top:-38px}

/* ---------- Trenza dorada (divisor) ---------- */
.trenza{position:relative;width:min(280px,74%);height:14px;margin:0 auto 36px}
.trenza::before{
  content:"";position:absolute;inset:0;background:var(--trenza-h) repeat-x center/12px 14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);
}
.trenza::after{
  content:"";position:absolute;left:0;right:0;top:-7px;bottom:-7px;
  background:var(--flor) 50% 50%/28px no-repeat,var(--flor) 30% 50%/15px no-repeat,var(--flor) 70% 50%/15px no-repeat;
}

/* ---------- Bandas ---------- */
.banda{position:relative;padding-block:clamp(84px,14vw,136px)}

/* ---------- Botones ---------- */
.acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 22px;border-radius:999px;
  font-family:var(--f-caps);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  color:var(--ciruela);background:transparent;border:1px solid var(--oro-oscuro);cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,background-position .4s ease;
}
.boton:hover{transform:translateY(-1px)}
.boton:focus-visible,.carta:focus-visible,.foto:focus-visible,.musica:focus-visible,.visor__btn:focus-visible,.hero__bajar:focus-visible{
  outline:2px solid var(--oro);outline-offset:4px;
}
.boton--oro{
  background:var(--oro-grad);background-size:200% 100%;border-color:transparent;color:#3A2608;
  box-shadow:0 10px 24px -12px rgba(168,119,43,.9),inset 0 1px 0 rgba(255,255,255,.5);
}
.boton--oro:hover{background-position:100% 0}
.boton--claro{color:var(--oro-claro);border-color:rgba(226,180,90,.55);background:rgba(26,16,48,.25)}
.boton--claro:hover{background:rgba(226,180,90,.12)}
.boton--ancho{width:100%}

/* ============ SOBRE ============ */
.sobre{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;overflow:hidden;
  background:var(--cielo);
  padding:calc(24px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px))
          calc(24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  transition:opacity 1s ease,visibility 0s linear 1s;
}
.sobre .linternas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sobre.fuera{opacity:0;visibility:hidden}
.sobre__contenido{position:relative;z-index:2;display:grid;justify-items:center;gap:18px;text-align:center}
.sobre__textos{display:grid;justify-items:center;gap:16px;transition:opacity .5s ease,transform .7s ease}
.sobre__para{display:grid;gap:0}
.sobre__invitado{font-family:var(--f-script);font-size:clamp(2.3rem,10vw,3.1rem);line-height:1.25;color:var(--oro-claro);text-wrap:balance}
.sobre__pista{
  font-family:var(--f-caps);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--luz-suave);
  animation:respira 2.6s ease-in-out infinite;transition:opacity .3s;
}

.carta{
  position:relative;width:min(82vw,360px);aspect-ratio:1.45;margin-top:60px;
  padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .9s cubic-bezier(.3,.7,.2,1);
}
.carta:hover{transform:translateY(-3px)}
.carta__fondo,.carta__hoja,.carta__frente,.carta__solapa,.carta__flores,.sello{position:absolute;display:block}
.carta__fondo{
  inset:0;border-radius:8px;z-index:0;
  background:linear-gradient(165deg,#C9AEEA,#A485D1);
  box-shadow:0 44px 70px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08);
}
.carta__hoja{
  left:7%;right:7%;top:6%;height:88%;z-index:1;border-radius:4px;
  display:grid;align-content:start;justify-items:center;gap:2px;padding-top:6%;
  background:var(--grano),var(--papel);color:var(--ciruela);
  box-shadow:inset 0 0 0 5px var(--papel),inset 0 0 0 6px rgba(168,119,43,.45);
  transition:transform 1s cubic-bezier(.2,.75,.2,1) .7s;
}
.carta__sol{width:36px;height:36px;color:var(--oro)}
.carta__xv{font-family:var(--f-caps);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ciruela-suave);margin-top:4px}
.carta__nombre{font-family:var(--f-script);font-size:2.1rem;line-height:1.25}
.carta__frente{
  inset:0;z-index:2;border-radius:8px;
  background:
    linear-gradient(to top right,rgba(60,30,100,.12),transparent 50%),
    linear-gradient(to top left,rgba(60,30,100,.12),transparent 50%),
    linear-gradient(200deg,#D9C4F2 0%,#B999E0 100%);
  clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);
}
.carta__solapa{
  left:0;right:0;top:0;height:62%;z-index:3;
  background:linear-gradient(180deg,#CDB3EE 0%,#B190DC 100%);
  clip-path:polygon(0 0,100% 0,50% 100%);border-radius:8px 8px 0 0;
  transform-origin:50% 0;
  transition:transform .7s cubic-bezier(.45,0,.2,1) .25s,z-index 0s linear .6s;
}
.carta__flores{left:50%;top:52%;width:96%;z-index:4;transform:translate(-50%,-50%);filter:drop-shadow(0 4px 6px rgba(40,15,70,.35));transition:opacity .4s ease,transform .5s ease}
.carta__flores svg{display:block;width:100%;height:auto;overflow:visible}
.sello{
  left:50%;top:60%;z-index:5;width:28%;aspect-ratio:1;
  transform:translate(-50%,-50%);display:grid;place-items:center;
  border-radius:48% 52% 50% 50%/50% 47% 53% 50%;
  background:radial-gradient(circle at 34% 28%,#FCE9B4 0%,#E2B45A 42%,#A8772B 100%);
  box-shadow:0 6px 14px rgba(20,8,40,.45),inset 0 0 0 3px rgba(255,240,200,.3),inset 0 -5px 10px rgba(110,70,15,.45);
  transition:transform .45s ease,opacity .45s ease;
}
.sello::after{
  content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(247,222,158,.7);
  animation:aro 2.6s ease-out infinite;
}
.sello svg{position:absolute;inset:7%;width:86%;height:86%;color:rgba(122,82,18,.5)}
.sello__ini{position:relative;font-family:var(--f-script);font-size:clamp(1.5rem,6.4vw,2rem);line-height:1;color:#5E3E0C;padding-top:.08em}

.sobre.abierto .sobre__textos{opacity:0;transform:translateY(-16px)}
.sobre.abierto .carta{transform:translateY(clamp(50px,11vh,110px))}
.sobre.abierto .sello{transform:translate(-50%,-50%) scale(1.3);opacity:0}
.sobre.abierto .sello::after{animation:none;opacity:0}
.sobre.abierto .carta__flores{opacity:0;transform:translate(-50%,-50%) scale(1.15)}
.sobre.abierto .carta__solapa{transform:rotateX(180deg);z-index:0}
.sobre.abierto .carta__hoja{transform:translateY(-62%)}
.sobre.abierto .sobre__pista{opacity:0}

/* ============ PORTADA ============ */
.hero{
  position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;overflow:hidden;text-align:center;
  padding-block:calc(76px + env(safe-area-inset-top,0px)) calc(96px + env(safe-area-inset-bottom,0px));
}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__velo{position:absolute;inset:0;pointer-events:none}
.hero__video:not([hidden]) ~ .hero__velo{
  background:linear-gradient(180deg,rgba(26,16,48,.6) 0%,rgba(26,16,48,.2) 38%,rgba(26,16,48,.35) 62%,rgba(26,16,48,.95) 100%);
}
.hero .linternas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero__envoltura{position:relative;z-index:2;width:100%}
.hero__arco{position:relative;width:min(100%,520px);margin-inline:auto}
.hero__contenido{
  position:relative;display:grid;justify-items:center;gap:8px;
  padding:clamp(92px,22vw,124px) 20px 60px;
  border-radius:50% 50% 26px 26px/250px 250px 26px 26px;
  background:linear-gradient(180deg,rgba(23,13,43,.12) 0%,rgba(23,13,43,.42) 100%);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  box-shadow:inset 0 0 0 1px rgba(226,180,90,.65),0 0 90px -20px rgba(226,180,90,.28);
}
.hero__contenido::before{
  content:"";position:absolute;inset:9px;pointer-events:none;
  border:1px solid rgba(226,180,90,.3);border-radius:50% 50% 18px 18px/241px 241px 18px 18px;
}
.hero .ramo--bl,.hero .ramo--br{bottom:-36px;width:clamp(120px,36vw,170px)}
.hero .ramo--bl{left:-18px}
.hero .ramo--br{right:-18px}

.emblema{position:relative;width:104px;aspect-ratio:1;color:var(--oro);margin-bottom:8px;filter:drop-shadow(0 0 22px rgba(226,180,90,.5))}
.emblema svg{width:100%;height:100%;animation:girar 90s linear infinite}
.emblema span{
  position:absolute;inset:0;display:grid;place-items:center;padding-left:.12em;
  font-family:var(--f-caps);font-size:1.05rem;letter-spacing:.12em;color:var(--oro-claro);
}
.nombre{
  font-family:var(--f-script);font-weight:400;font-size:clamp(4.6rem,22vw,9rem);line-height:1;
  margin:0;text-wrap:balance;filter:drop-shadow(0 2px 22px rgba(226,180,90,.4));
}
.nombre span{
  display:inline-block;padding:.12em .14em .08em;
  background:var(--oro-grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:brillo 9s linear infinite;
}
.apellidos{
  font-family:var(--f-caps);font-size:clamp(.8rem,3.4vw,1rem);letter-spacing:.42em;text-transform:uppercase;
  padding-left:.42em;color:var(--luz);margin-top:-.1em;
}
.fecha{
  display:flex;align-items:center;justify-content:center;gap:16px;margin-top:28px;
  font-family:var(--f-caps);font-size:.8rem;letter-spacing:.26em;text-transform:uppercase;
}
.fecha span{min-width:7.4em;padding-block:7px;border-block:1px solid rgba(226,180,90,.6)}
.fecha strong{
  font-family:var(--f-texto);font-weight:400;font-size:3.6rem;line-height:1;letter-spacing:0;
  font-variant-numeric:lining-nums;color:var(--oro-claro);
}
.anio{font-family:var(--f-caps);letter-spacing:.5em;padding-left:.5em;font-size:.9rem;color:var(--luz-suave)}

.hero__bajar{
  position:absolute;z-index:2;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);width:28px;height:52px;display:grid;justify-items:center;
}
.hero__bajar::before{content:"";width:1px;height:100%;background:linear-gradient(rgba(247,222,158,0),rgba(247,222,158,.8))}
.hero__bajar span{position:absolute;top:0;width:5px;height:5px;border-radius:50%;background:var(--oro-claro);animation:bajar 2.2s ease-in-out infinite}

/* Entrada de la portada al abrir el sobre */
main.intro .hero .anim{opacity:0}
main.intro .nombre span{clip-path:inset(-30% 100% -30% -10%)}
main.intro.abierta .hero .anim{animation:subir 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
main.intro.abierta .nombre span{
  animation:escribir 1.3s cubic-bezier(.55,.05,.35,1) calc(.75s + var(--i,0) * .95s) both,brillo 9s linear 3s infinite;
}

/* ============ MENSAJE Y FAMILIA ============ */
.mensaje{
  font-size:clamp(1.3rem,4.8vw,1.65rem);font-style:italic;line-height:1.55;
  max-width:28ch;margin-inline:auto;text-wrap:balance;
}
.firma{font-family:var(--f-script);font-size:2.7rem;line-height:1.3;color:var(--oro-oscuro);margin-top:10px}
.padres{margin-top:60px;display:grid;gap:14px}
.padres__nombres{font-size:1.5rem;line-height:1.35}
.amp{display:block;font-family:var(--f-script);font-size:2.2rem;line-height:1.1;color:var(--oro-oscuro)}
.padrinos{margin-top:56px}
.padrinos .trenza{margin-bottom:30px}
.padrinos__lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:24px 26px;margin-top:22px}
.padrino{display:grid;gap:4px}
.padrino .eyebrow{font-size:.64rem;letter-spacing:.22em}
.padrino p:last-child{font-size:1.2rem}

/* ============ CUENTA REGRESIVA ============ */
.cuenta{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:460px;margin:24px auto 0}
.cuenta div{
  display:grid;justify-items:center;gap:6px;padding:20px 2px 14px;min-width:0;
  border:1px solid rgba(226,180,90,.4);background:rgba(23,13,43,.45);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  border-radius:50% 50% 14px 14px/38px 38px 14px 14px;
  box-shadow:0 0 30px -10px rgba(226,180,90,.3);
}
.cuenta b{
  font-family:var(--f-texto);font-weight:400;font-size:clamp(2rem,9vw,3rem);line-height:1;
  font-variant-numeric:lining-nums tabular-nums;color:var(--oro-claro);
}
.cuenta small{font-family:var(--f-caps);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--luz-suave);padding-left:.2em}
.cuenta__fecha{font-style:italic;color:var(--luz-suave);margin-top:24px;font-size:1.15rem}

/* ============ DÓNDE Y CUÁNDO ============ */
.lugares{display:grid;gap:72px;margin-top:56px}
@media (min-width:760px){.lugares{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px}}
.arco{
  position:relative;display:grid;justify-items:center;gap:8px;color:var(--ciruela);
  padding:76px 22px 26px;background:var(--grano),var(--pergamino);
  border-radius:50% 50% 24px 24px/170px 170px 24px 24px;
  box-shadow:0 50px 90px -40px rgba(5,2,15,.9),0 0 70px -14px rgba(196,163,227,.5);
}
.arco::before{
  content:"";position:absolute;inset:9px;pointer-events:none;border:1px solid rgba(168,119,43,.5);
  border-radius:50% 50% 17px 17px/162px 162px 17px 17px;
}
.arco .ramo--cima{top:-40px;width:min(78%,300px)}
.arco .eyebrow{color:var(--ciruela-suave)}
.arco__icono{width:30px;height:30px;color:var(--oro-oscuro);margin-bottom:4px}
.arco__lugar{font-family:var(--f-texto);font-weight:500;font-size:1.55rem;line-height:1.2;margin:4px 0 0;text-wrap:balance}
.arco__hora{font-family:var(--f-caps);font-size:1.2rem;letter-spacing:.12em;color:var(--oro-oscuro);font-variant-numeric:lining-nums}
.arco__dir{color:var(--ciruela-suave);font-size:1.05rem;line-height:1.45;max-width:26ch}
.arco .acciones{margin-top:12px}
.arco__mapa{
  position:relative;width:100%;aspect-ratio:4/3;margin-top:16px;border-radius:16px;overflow:hidden;
  border:1px solid rgba(168,119,43,.4);background:var(--lila-claro);
}
.arco__mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.programa{max-width:620px;margin:96px auto 0}
.programa .ramo--bl{bottom:-58px;width:clamp(110px,30vw,160px)}
.itinerario{list-style:none;margin:18px auto 0;padding:0;max-width:440px;position:relative;display:grid;gap:30px;text-align:left}
.itinerario::before{
  content:"";position:absolute;top:4px;bottom:4px;left:calc(5.4em + 14px + 16px - 7px);width:14px;
  background:var(--trenza-v) repeat-y center/14px 12px;
  -webkit-mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent);
}
.itinerario li{display:grid;grid-template-columns:5.4em 32px 1fr;align-items:center;gap:0 14px;position:relative}
.itinerario .hora{
  text-align:right;font-family:var(--f-caps);font-size:.95rem;letter-spacing:.06em;color:var(--oro-oscuro);
  font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;
}
.itinerario .punto{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#F4EDFB;box-shadow:0 0 0 3px #F4EDFB}
.itinerario .punto svg{width:28px;height:28px}
.itinerario .que{font-size:1.25rem;line-height:1.3;min-width:0}

/* ============ GALERÍA ============ */
.galeria{
  display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:160px;grid-auto-flow:dense;gap:10px;margin-top:22px;
}
@media (min-width:760px){.galeria{grid-template-columns:repeat(3,1fr);grid-auto-rows:220px;gap:14px}}
.foto{
  position:relative;padding:0;border:0;border-radius:18px;overflow:hidden;cursor:zoom-in;min-width:0;
  background:var(--noche-3);box-shadow:0 20px 40px -24px rgba(0,0,0,.8);
}
.foto::after{content:"";position:absolute;inset:6px;border:1px solid rgba(247,222,158,.35);border-radius:13px;pointer-events:none}
.foto.alta{grid-row:span 2}
.foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.foto:hover img{transform:scale(1.04)}
.foto.vacia{
  cursor:default;display:grid;place-content:center;justify-items:center;gap:4px;color:var(--oro-claro);
  background:
    radial-gradient(90% 70% at 50% 110%,rgba(226,180,90,.22),transparent 70%),
    linear-gradient(160deg,rgba(196,163,227,.28),rgba(67,44,107,.55));
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.foto.vacia svg{width:54px;height:54px;color:var(--oro);opacity:.9}
.foto.vacia p{font-family:var(--f-script);font-size:2.3rem;line-height:1.2}
.foto.vacia small{font-family:var(--f-caps);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--luz-suave)}

.visor{
  padding:0;margin:0;border:0;background:transparent;color:var(--luz);
  width:100vw;max-width:100vw;height:100vh;height:100dvh;max-height:none;
}
.visor[open]{display:grid;place-items:center}
.visor::backdrop{background:rgba(14,8,28,.94)}
.visor img{max-width:calc(100vw - 32px);max-height:calc(100dvh - 140px);object-fit:contain;border-radius:10px;touch-action:pan-y}
.visor__btn{
  position:absolute;width:48px;height:48px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(226,180,90,.5);background:rgba(26,16,48,.7);color:var(--oro-claro);
  font-size:1.9rem;line-height:1;display:grid;place-items:center;padding:0 0 4px;
}
.visor__cerrar{top:calc(16px + env(safe-area-inset-top,0px));right:calc(16px + env(safe-area-inset-right,0px))}
.visor__prev{left:calc(12px + env(safe-area-inset-left,0px));top:50%;transform:translateY(-50%)}
.visor__sig{right:calc(12px + env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%)}

/* ============ VESTIMENTA Y REGALOS ============ */
.detalles{display:grid;gap:80px}
@media (min-width:780px){.detalles{grid-template-columns:1fr 1fr;gap:32px;align-items:stretch}}
.detalle{display:grid;justify-items:center;align-content:start;gap:6px;text-align:center}
.detalle__icono{width:52px;height:52px;fill:none;stroke:var(--oro-oscuro);stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round;margin-bottom:8px}
.detalle__texto{max-width:34ch;font-size:1.15rem;line-height:1.55;text-wrap:pretty}
.detalle .boton{margin-top:16px}
.reservado{
  display:flex;align-items:center;gap:14px;margin-top:8px;padding:10px 20px 10px 10px;text-align:left;
  border-radius:999px;background:var(--tarjeta);box-shadow:0 14px 30px -20px rgba(51,32,79,.5);max-width:100%;
}
.reservado p{font-size:1.02rem;line-height:1.35;min-width:0}
.muestra{
  flex:none;width:46px;height:46px;border-radius:50%;position:relative;
  background:radial-gradient(circle at 34% 28%,#EBDDF9 0%,#C4A3E3 55%,#9E7CC6 100%);
  box-shadow:inset 0 0 0 2px #fff,0 0 0 1px rgba(106,87,135,.35);
}
.muestra::after{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:2px;background:rgba(51,32,79,.55);transform:translateX(-50%) rotate(45deg);border-radius:2px}

/* ============ CONFIRMACIÓN ============ */
.pase{
  display:inline-block;margin:6px auto 14px;padding:10px 22px;border-radius:999px;
  background:var(--ciruela);color:var(--luz);font-size:1.1rem;
}
.pase strong{color:var(--oro-claro);font-weight:500}
.nota{color:var(--ciruela-suave);font-style:italic}
.rsvp{display:grid;gap:20px;margin-top:28px;text-align:left}
.campo{display:grid;gap:8px;position:relative}
.campo label,.campo__etiqueta{
  font-family:var(--f-caps);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ciruela-suave);
}
.campo em{text-transform:none;letter-spacing:.02em;font-family:var(--f-texto);font-size:.95rem}
.campo input,.campo select,.campo textarea{
  width:100%;min-height:50px;padding:12px 16px;font:inherit;color:var(--ciruela);
  background:rgba(255,255,255,.85);border:1px solid var(--borde);border-radius:14px;
  transition:border-color .2s,box-shadow .2s;
}
.campo textarea{resize:vertical;min-height:90px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--oro);box-shadow:0 0 0 3px rgba(226,180,90,.3)}
.opciones{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opcion{position:relative;display:block}
.opcion input{position:absolute;opacity:0;inset:0;margin:0}
.opcion span{
  display:flex;align-items:center;justify-content:center;min-height:50px;padding:6px 12px;text-align:center;line-height:1.2;
  border:1px solid var(--borde);border-radius:999px;cursor:pointer;background:rgba(255,255,255,.85);
  transition:background-color .2s,color .2s,border-color .2s;
}
.opcion input:checked + span{background:var(--ciruela);border-color:var(--ciruela);color:var(--luz)}
.opcion input:focus-visible + span{outline:2px solid var(--oro);outline-offset:3px}
.error{color:var(--error);font-size:1rem}
.gracias{display:grid;justify-items:center;gap:14px;margin-top:20px}

/* ============ CIERRE ============ */
.final{overflow:hidden;padding-bottom:0;background:linear-gradient(180deg,transparent 0%,rgba(122,90,174,.25) 70%,rgba(122,90,174,.4) 100%)}
.final__texto{position:relative;z-index:2;padding-bottom:min(42vw,230px)}
.final__nombre{font-family:var(--f-caps);letter-spacing:.32em;text-transform:uppercase;font-size:.85rem;color:var(--luz);padding-left:.32em}
.hashtag{margin-top:26px;color:var(--luz-suave);font-style:italic}
.hashtag strong{font-family:var(--f-caps);font-style:normal;font-weight:400;letter-spacing:.12em;color:var(--oro-claro)}
.torre{position:absolute;left:0;bottom:0;z-index:1;display:block;width:100%;height:min(40vw,220px)}

/* ============ MÚSICA ============ */
.musica{
  position:fixed;z-index:40;width:52px;height:52px;border-radius:50%;cursor:pointer;
  right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;justify-content:center;gap:3px;padding:0;
  border:1px solid rgba(226,180,90,.6);background:rgba(26,16,48,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 10px 24px -10px rgba(0,0,0,.6);
}
.musica span{width:3px;height:7px;border-radius:2px;background:var(--oro-claro)}
.musica.sonando span{animation:eq .8s ease-in-out infinite alternate}
.musica.sonando span:nth-child(2){animation-delay:-.3s}
.musica.sonando span:nth-child(3){animation-delay:-.55s}

/* ============ Movimiento ============ */
@keyframes brillo{to{background-position:-200% 0}}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes respira{50%{opacity:.45}}
@keyframes aro{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.35);opacity:0}}
@keyframes bajar{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(46px);opacity:0}}
@keyframes eq{from{height:5px}to{height:20px}}
@keyframes subir{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes escribir{from{clip-path:inset(-30% 100% -30% -10%)}to{clip-path:inset(-30% -10% -30% -10%)}}
@keyframes aparecer{from{opacity:0;transform:translateY(30px) scale(.98)}to{opacity:1;transform:none}}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .revelar{animation:aparecer linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  }
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
}

@media (max-width:380px){
  .fecha{gap:12px;font-size:.72rem}
  .fecha span{min-width:6.6em}
  .itinerario li{grid-template-columns:4.8em 32px 1fr;gap:0 10px}
  .itinerario::before{left:calc(4.8em + 10px + 16px - 7px)}
}

/* Botón del día del evento hacia el muro de fotos */
.sube-fotos{
  position:fixed;z-index:40;left:calc(14px + env(safe-area-inset-left,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 20px;border-radius:999px;text-decoration:none;
  font-family:var(--f-caps);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#3A2608;
  background:var(--oro-grad);box-shadow:0 14px 30px -12px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.5);
}