/* ==========================================================================
   TEMA: XV AÑOS · VUELO DE MARIPOSAS — dirección de arte "ESTUDIO LILA"
   Creada el 7 de octubre de 2026. Primera invitación con fotos hechas en
   Blender (luz de estudio, metal, desenfoque). Abdiel: "sorpréndeme".

   LA IDEA: todo sale de una sola escena, para que la página viva en el mismo
   mundo que sus fotos. Se entra abriendo un joyero de terciopelo (dos toques:
   se asoma la luz, se abre y salen las mariposas). La portada es la foto del
   estudio, que se desvanece hacia el lila de la página; encima cruzan
   mariposas sueltas que aletean (tres aleteos tomados en Blender, movidos con
   CSS). Las secciones oscuras son de ciruela con polvo de oro; las tarjetas,
   blancas con filete dorado; el programa, un hilo de perlas.

   TEORÍA DEL COLOR: lila claro de base (60), ciruela en los bloques (30), oro
   solo en lo que se toca y en los filetes (10). Lila y oro son complementarios
   (violeta y amarillo): por eso el dorado brinca sin tener que gritar.
   Los colores de la portada están MEDIDOS en la foto: #988ABF arriba, #AEA0CB
   en medio y #CCBDDB abajo.

   CONTRASTE MEDIDO (fórmula WCAG):
     sobre lila claro #F3ECFB → tinta #2E1A47 13.4 · suave #5A4674 7.1 · ciruela #4B2A6E 9.8 · oro de letra #7A5612 5.7
     sobre ciruela #3A2058    → blanco 13.7 · lila claro #E6D9F7 10.2 · oro claro #F3D9A0 10.0
     tinta sobre el botón de oro #E3B55A → 8.1 · tinta sobre el lila de la portada #B9A4DC → 6.9
   ========================================================================== */
:root{
  --lila:#F3ECFB; --ciruela:#3A2058; --ciruela-hondo:#2A1542; --oro:#E3B55A; --oro-claro:#F3D9A0; --oro-letra:#7A5612;
  --papel:#F3ECFB;  --papel-hondo:#E6D9F7;
  --tinta:#2E1A47;  --tinta-suave:#5A4674;
  --marca:#2E1A47;  --marca-claro:#4B2A6E;
  --acento:#7A5612; --acento-hondo:#5A3F0C;
  --f-display:"Marcellus", Georgia, serif;
  --f-nombre:"Great Vibes", "Segoe Script", cursive;
  --f-texto:"Mulish", system-ui, sans-serif;
  --radio:18px;
  --sombra:0 10px 26px rgba(46,26,71,.14);
  --sombra-alta:0 18px 40px rgba(46,26,71,.26);
  --polvo:radial-gradient(circle at 12% 18%, rgba(243,217,160,.5) 0 1.2px, transparent 1.8px), radial-gradient(circle at 78% 30%, rgba(243,217,160,.4) 0 1px, transparent 1.6px), radial-gradient(circle at 34% 72%, rgba(243,217,160,.45) 0 1.3px, transparent 1.9px), radial-gradient(circle at 88% 84%, rgba(243,217,160,.35) 0 1px, transparent 1.6px), radial-gradient(circle at 56% 48%, rgba(255,255,255,.3) 0 .9px, transparent 1.5px);
  font-synthesis:none;
}
body{ background:var(--papel); }
h1, h2, .titulo, .portada__nombre, .entrada__nombre, .saludo__nombre, .pie__nombre, .dedicatoria__firma{ font-weight:400; }

/* ── las mariposas sueltas: una tira de tres aleteos ── */
.vuela{ position:absolute; display:block; width:64px; aspect-ratio:1; pointer-events:none; background:url(mariposa-oro.webp) 0 0 / 300% 100% no-repeat; animation:aletea .52s step-end infinite; }
.vuela:nth-child(even){ background-image:url(mariposa-lila.webp); animation-duration:.44s; }
@keyframes aletea{ 0%{ background-position:0 0; } 25%{ background-position:50% 0; } 50%{ background-position:100% 0; } 75%{ background-position:50% 0; } }

.seccion.alterna, .pie{ --tinta:#FFFFFF; --tinta-suave:#E6D9F7; --marca:#FFFFFF; --acento:#F3D9A0; color:var(--tinta); }
.seccion.alterna :is(.cuenta__caja, .tarjeta, .formulario, .notas__lista li, .faq__item, .buscar){ --tinta:#2E1A47; --tinta-suave:#5A4674; --marca:#2E1A47; --acento:#7A5612; color:var(--tinta); }

.etiqueta{ font-family:var(--f-texto); font-weight:800; font-size:.7rem; letter-spacing:.28em; color:var(--oro-letra); }
.seccion.alterna .etiqueta{ color:var(--oro-claro); }
.titulo{ font-family:var(--f-display); line-height:1.12; font-size:clamp(2rem,8.6vw,2.7rem); margin:.5rem 0 1.5rem; color:var(--tinta); }
.titulo::after{ content:""; display:block; width:44px; aspect-ratio:1; margin:.3rem auto 0; background:url(mariposa-oro.webp) 0 0 / 300% 100% no-repeat; }
.parrafo b{ color:var(--acento); }


/* ══════════════════════════════════════════════════════════════════════
   LA ENTRADA — el joyero. Dos toques: se asoma la luz, y a volar.
   (El motor quita la entrada 1.6 s después del último toque.)
   ══════════════════════════════════════════════════════════════════════ */
.entrada{ overflow:hidden; background:radial-gradient(ellipse 90% 60% at 50% 46%, #C9B8EA 0%, #9C8BC6 55%, #6E5AA6 100%); transition:opacity .45s ease .5s, visibility 0s linear .95s; }
.entrada::after{ content:""; position:absolute; inset:0; z-index:4; background:#FFF8E6; opacity:0; pointer-events:none; }
.entrada:has(.gancho.abre)::after{ animation:destello .7s ease-in .75s forwards; }
@keyframes destello{ to{ opacity:1; } }
.entrada > *{ position:relative; z-index:1; }
.entrada__vuelo{ position:absolute !important; inset:0; z-index:0 !important; }
.entrada__vuelo .vuela--1{ left:8%; top:16%; width:52px; animation:aletea .5s step-end infinite, flota-a 7s ease-in-out infinite; }
.entrada__vuelo .vuela--2{ right:9%; top:28%; width:40px; animation:aletea .44s step-end infinite, flota-b 8.5s ease-in-out infinite; }
.entrada__vuelo .vuela--3{ left:16%; bottom:15%; width:44px; animation:aletea .56s step-end infinite, flota-b 9s ease-in-out -3s infinite; }
@keyframes flota-a{ 0%,100%{ transform:translate(0,0) rotate(-8deg); } 50%{ transform:translate(26px,-34px) rotate(10deg); } }
@keyframes flota-b{ 0%,100%{ transform:translate(0,0) rotate(12deg); } 50%{ transform:translate(-30px,-22px) rotate(-10deg); } }
.entrada__para{ font-family:var(--f-texto); font-weight:800; letter-spacing:.3em; font-size:.7rem; color:#2E1A47; }
.entrada__nombre{ font-family:var(--f-nombre); font-size:clamp(2.3rem,10.5vw,3.1rem); line-height:1.1; margin:.1rem 0 .2rem; color:#FFFFFF; text-shadow:0 2px 14px rgba(46,26,71,.55); }
.gancho.joyero{ position:relative; width:min(108vw,440px); aspect-ratio:640/800; margin:-4.2rem -3rem -3.4rem; filter:drop-shadow(0 22px 18px rgba(46,26,71,.4)); animation:joyero-respira 3.2s ease-in-out infinite; }
@keyframes joyero-respira{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
.caja{ position:absolute; inset:0; width:100%; height:100%; transition:opacity .22s ease; }
.caja--2, .caja--3{ opacity:0; }
.gancho.joyero.golpe{ animation:joyero-brinca .45s ease; }
@keyframes joyero-brinca{ 0%,100%{ transform:scale(1); } 40%{ transform:scale(1.05) rotate(-1.5deg); } 70%{ transform:scale(.98) rotate(1deg); } }
.gancho.joyero.golpe .caja--1{ opacity:0; } .gancho.joyero.golpe .caja--2{ opacity:1; }
.gancho.joyero.abre{ animation:joyero-abre .5s ease; }
@keyframes joyero-abre{ 0%{ transform:scale(.96); } 60%{ transform:scale(1.06); } 100%{ transform:scale(1); } }
.gancho.joyero.abre .caja--1, .gancho.joyero.abre .caja--2{ opacity:0; }
.gancho.joyero.abre .caja--3{ opacity:1; }
/* las que salen: nacen en la boca del joyero y se abren en abanico */
.salen{ position:absolute; left:50%; top:52%; width:0; height:0; }
.salen .vuela{ left:-28px; top:-28px; width:56px; opacity:0; }
.gancho.joyero.abre .salen .vuela{ animation:aletea .4s step-end infinite, sale 1.25s cubic-bezier(.2,.7,.3,1) forwards; }
.salen .vuela--1{ --x:-150px; --y:-270px; --g:-24deg; } .salen .vuela--2{ --x:140px; --y:-300px; --g:20deg; animation-delay:0s,.05s !important; }
.salen .vuela--3{ --x:-60px; --y:-360px; --g:-8deg; animation-delay:0s,.1s !important; } .salen .vuela--4{ --x:70px; --y:-230px; --g:30deg; animation-delay:0s,.14s !important; }
.salen .vuela--5{ --x:-210px; --y:-170px; --g:-40deg; animation-delay:0s,.08s !important; } .salen .vuela--6{ --x:210px; --y:-190px; --g:38deg; animation-delay:0s,.18s !important; }
.salen .vuela--7{ --x:10px; --y:-430px; --g:6deg; animation-delay:0s,.2s !important; }
@keyframes sale{ 0%{ opacity:0; transform:translate(0,0) scale(.3) rotate(0); } 15%{ opacity:1; } 100%{ opacity:1; transform:translate(var(--x), var(--y)) scale(1.5) rotate(var(--g)); } }
.entrada__pista{
  margin-top:.6rem; padding:.62rem 1.7rem; border-radius:999px; background:linear-gradient(180deg, #F0CC7C, #D9A441); color:#2E1A47; box-shadow:0 8px 20px rgba(46,26,71,.35), inset 0 1px 0 rgba(255,255,255,.6);
  font-family:var(--f-display); font-size:1.05rem; letter-spacing:.08em;
  animation:pista-late 1.8s ease-in-out infinite;
}
@keyframes pista-late{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }
.entrada__marcador{ margin-top:.8rem; color:#FFFFFF; font-weight:800; letter-spacing:.16em; }


/* ══════════════════════════════════════════════════════════════════════
   LA PORTADA — la foto del estudio arriba; el nombre sobre su piso
   ══════════════════════════════════════════════════════════════════════ */
.portada{ overflow:hidden; gap:0; justify-content:flex-start; padding:0 1.5rem 3.4rem; background:linear-gradient(180deg, #988ABF 0%, #AEA0CB 38%, #CCBDDB 66%, #E6D9F7 100%); }
.escena{ position:relative; flex:none; width:100vw; max-width:560px; aspect-ratio:1080/1350; margin:0 -1.5rem -25%; background:url(portada.webp) center / cover no-repeat; -webkit-mask-image:linear-gradient(180deg, #000 72%, transparent 100%); mask-image:linear-gradient(180deg, #000 72%, transparent 100%); }
.escena .vuela--1{ left:6%; top:10%; width:54px; animation:aletea .5s step-end infinite, cruza-a 9s ease-in-out infinite; }
.escena .vuela--2{ right:8%; top:22%; width:42px; animation:aletea .44s step-end infinite, cruza-b 11s ease-in-out infinite; }
.escena .vuela--3{ left:14%; top:52%; width:38px; animation:aletea .56s step-end infinite, cruza-b 10s ease-in-out -4s infinite; }
.escena .vuela--4{ right:14%; top:60%; width:48px; animation:aletea .46s step-end infinite, cruza-a 12s ease-in-out -6s infinite; }
.escena .vuela--5{ left:44%; top:4%; width:34px; animation:aletea .5s step-end infinite, cruza-a 8s ease-in-out -2s infinite; }
@keyframes cruza-a{ 0%,100%{ transform:translate(0,0) rotate(-10deg); } 35%{ transform:translate(44px,-30px) rotate(12deg); } 70%{ transform:translate(14px,26px) rotate(-4deg); } }
@keyframes cruza-b{ 0%,100%{ transform:translate(0,0) rotate(14deg); } 40%{ transform:translate(-40px,-24px) rotate(-12deg); } 75%{ transform:translate(-10px,22px) rotate(6deg); } }
.portada > :not(.escena){ position:relative; z-index:2; }
.portada__arriba{ font-family:var(--f-texto); font-weight:800; font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:#2E1A47; }
.portada__nombre{ font-family:var(--f-nombre); line-height:1; font-size:clamp(4.4rem,23vw,6.6rem); margin:.2rem 0 .9rem; color:#2E1A47; text-shadow:0 2px 0 rgba(255,255,255,.55); }
.portada__fecha{ background:rgba(255,255,255,.82); border:1px solid var(--oro); border-radius:999px; box-shadow:var(--sombra); padding:.7rem 1.7rem; gap:1.1rem; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.portada__fecha .fcol{ color:var(--tinta); font-weight:800; letter-spacing:.16em; font-size:.7rem; }
.portada__fecha .fnum{ font-family:var(--f-display); font-size:2.6rem; color:var(--oro-letra); }
.portada__lugar{ margin-top:1.1rem; color:var(--tinta); font-weight:700; }
.portada__flecha span{ border-color:var(--ciruela); }
body.revelado .portada__nombre{ animation:nombre-llega 1s cubic-bezier(.2,.8,.3,1) 1.5s backwards; }
@keyframes nombre-llega{ from{ opacity:0; transform:translateY(18px) scale(.94); } }


/* ══════════════════════════════════════════════════════════════════════
   LAS SECCIONES — ciruela con polvo de oro, tarjetas con filete dorado
   ══════════════════════════════════════════════════════════════════════ */
.saludo__nombre{ font-family:var(--f-nombre); font-size:clamp(2.2rem,9.6vw,2.9rem); line-height:1.1; color:var(--tinta); }
.saludo__pases{ background:var(--ciruela); color:#FFFFFF; border-radius:999px; font-weight:700; }

.seccion.alterna{ background:var(--polvo), linear-gradient(180deg, var(--ciruela), var(--ciruela-hondo)); background-size:180px 180px, 220px 200px, 200px 240px, 260px 220px, 150px 170px, auto; }
.seccion.alterna .titulo{ color:#FFFFFF; }
.seccion.alterna .parrafo b{ color:var(--oro-claro); }

.momento{ padding-top:1.6rem; padding-bottom:3.2rem; }
.momento__foto{ border:0; border-radius:20px; box-shadow:0 0 0 1px var(--oro), 0 0 0 7px #FFFFFF, 0 0 0 8px var(--oro), var(--sombra-alta); }
.flotantes{ display:none; }

.cuenta__caja, .tarjeta, .notas__lista li, .formulario, .faq__item, .buscar{ background:#FFFFFF; border:1px solid var(--oro); border-radius:var(--radio); box-shadow:var(--sombra); }
.cuenta__caja .n{ font-family:var(--f-display); color:#7A5612; }
.cuenta__caja .l{ color:#5A4674; font-weight:800; }
.tarjeta__icono{ color:#4B2A6E; }
.tarjeta b{ font-family:var(--f-display); font-weight:400; font-size:1.2rem; line-height:1.15; color:#2E1A47; }

.dedicatoria__texto{ font-family:var(--f-display); font-size:1.24rem; line-height:1.6; color:var(--tinta); }
.dedicatoria__firma{ font-family:var(--f-nombre); font-size:2.1rem; line-height:1.15; color:var(--oro-letra); }

.galeria__grid{ gap:.8rem; }
.foto img{ border-radius:16px; box-shadow:0 0 0 1px var(--oro), var(--sombra); background:#B9A4DC; }
.foto--ancha img{ aspect-ratio:1100/620; }
.foto__hueco{ border:1.5px dashed var(--oro-letra); border-radius:16px; }

/* el programa: un hilo de perlas */
.linea::before{ width:1.5px; background:linear-gradient(180deg, transparent, var(--oro-claro) 12%, var(--oro-claro) 88%, transparent); left:5px; }
.linea__paso::before{ left:-8px; top:1.05rem; width:16px; height:16px; border:0; background:radial-gradient(circle at 34% 30%, #FFFFFF 0 18%, #E9DDF8 46%, #B79AE3 100%); box-shadow:0 2px 6px rgba(0,0,0,.35); }
.linea__paso.destaca::before{ width:20px; height:20px; left:-10px; background:radial-gradient(circle at 34% 30%, #FFF6DC 0 18%, #F0CC7C 46%, #B88A2E 100%); }
.linea__hora{ font-family:var(--f-display); font-size:1.25rem; color:var(--oro-claro); min-width:3.3rem; }
.linea__que b{ font-family:var(--f-display); font-weight:400; font-size:1.16rem; color:#FFFFFF; }

.lugares__hora{ font-weight:700; color:var(--acento); }
.mapa{ border-radius:18px; box-shadow:0 0 0 1px var(--oro), var(--sombra); }

.notas__lista{ margin-top:1.2rem; }
.notas__lista li{ border-left:1px solid var(--oro); }
.faq__item summary{ font-family:var(--f-display); font-weight:400; font-size:1.08rem; color:var(--tinta); }

.boton{
  background:linear-gradient(180deg, #F0CC7C, #D9A441); color:#2E1A47; border:0; border-radius:999px; box-shadow:0 8px 20px rgba(46,26,71,.25), inset 0 1px 0 rgba(255,255,255,.6);
  font-family:var(--f-display); font-weight:400; font-size:1.02rem; letter-spacing:.08em; text-transform:uppercase;
}
.boton:active{ transform:translateY(2px); }
.boton--linea{ background:#FFFFFF; color:var(--tinta); border:1px solid var(--oro); box-shadow:var(--sombra); font-size:.92rem; }

.formulario{ padding:1.6rem 1.2rem 1.7rem; }
.campo input, .campo select, .campo textarea, .buscar__entrada{ border:1px solid rgba(46,26,71,.4); border-radius:12px; background:#fff; color:#2E1A47; }
.rsvp__intro b{ color:var(--oro-claro); }

.pie{ background:var(--polvo), var(--ciruela-hondo); background-size:180px 180px, 220px 200px, 200px 240px, 260px 220px, 150px 170px, auto; }
.pie__nombre{ font-family:var(--f-nombre); font-size:3.4rem; line-height:1.1; color:var(--oro-claro); }

@media (prefers-reduced-motion:reduce){
  .vuela, .gancho.joyero, .entrada__pista{ animation:none !important; }
  body.revelado .portada__nombre{ animation:none; }
}