/* =========================================================
   Elizabeth & Cristian · Invitación de boda
   Paleta: azul marino · dorado · crema
   ========================================================= */

:root{
  --navy:        #142344;
  --navy-hondo:  #0c1730;
  --navy-suave:  #1e3159;
  --crema:       #f7f2e7;
  --crema-hondo: #efe7d6;
  --oro:         #c9a227;
  --oro-claro:   #e0c37e;
  --oro-palido:  #f0dfb4;
  --tinta:       #22283c;
  --tinta-suave: #5a6076;
  --blanco-flor: #fbf9f4;

  --serif:  "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --script: "Great Vibes", "Segoe Script", cursive;
  --sans:   "Montserrat", "Segoe UI", system-ui, sans-serif;

  --ancho: 640px;
  --sep-y: clamp(3.5rem, 10vw, 6rem);
}

*,*::before,*::after{ box-sizing:border-box; }

/* Variables registradas: al declararlas con tipo se pueden transicionar,
   así el "reveal" y el parallax comparten el mismo transform sin pisarse. */
@property --py{ syntax:"<length>"; inherits:false; initial-value:0px; }
@property --ry{ syntax:"<length>"; inherits:false; initial-value:0px; }

html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  /* Las flores asoman por los lados; esto lo recorta sin crear scroll lateral
     ni romper el posicionamiento (a diferencia de overflow:hidden). */
  overflow-x:hidden;
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--navy-hondo);
  color:var(--tinta);
  font-family:var(--serif);
  font-size:clamp(1rem,1.6vw,1.125rem);
  line-height:1.65;
  overflow-x:hidden;
  overflow-x:clip;
}
body.is-locked{ overflow:hidden; height:100dvh; }

img{ max-width:100%; display:block; }
code{ font-family:ui-monospace,Consolas,monospace; font-size:.8em; }

/* ---------------------------------------------------------
   Ilustración floral (SVG)
   --------------------------------------------------------- */
/* Las reglas apuntan a los elementos de <defs>: los selectores descendentes
   no cruzan el shadow tree de <use>. El color se controla con variables
   heredadas desde .flor / .sobre-flores. */
.rosa ellipse, .rosa circle{ fill:var(--f1); stroke:var(--f2); stroke-width:1.1; }
.rosa .ln{ fill:none; stroke:var(--f2); stroke-width:1.3; stroke-linecap:round; }
.f-blanca{ --f1:var(--blanco-flor); --f2:#b9a06a; }
.f-azul  { --f1:#22406f;            --f2:#8fa6c4; }
.f-oro   { --f1:var(--oro-palido);  --f2:var(--oro); }

.tallos path{
  fill:none; stroke:var(--c-tallo); stroke-width:1.6; opacity:.85; stroke-linecap:round;
}
.hojas use{ fill:var(--c-hoja); stroke:var(--c-hoja-borde); stroke-width:1.2; }
.hoja-vena{ fill:none; stroke:var(--c-hoja-borde); stroke-width:.9; opacity:.8; }

.flor, .sobre-flores{
  --c-tallo:var(--oro);
  --c-hoja:#35558a;
  --c-hoja-borde:var(--oro-claro);
}
.clara .flor{
  --c-tallo:#a9862a;
  --c-hoja:#2c4c78;
  --c-hoja-borde:var(--oro);
}

.flor svg, .sobre-flores svg{ width:100%; height:100%; overflow:hidden; }

/* Versión en PNG de los ramos (si el archivo existe) */
.ramo-png{ width:100%; height:100%; object-fit:contain; }

/* Marco floral de la portada */
.marco{ margin:.6rem auto 0; max-width:min(92vw,520px); }
.marco img{ width:100%; height:auto; filter:drop-shadow(0 12px 30px rgba(0,0,0,.4)); }
/* El marco ya trae los nombres y la fecha dibujados: el texto se mantiene
   en el HTML por accesibilidad y buscadores, pero deja de verse. */
.con-marco .portada .nombres,
.con-marco .portada .fecha-portada,
.con-marco .portada .filete{
  position:absolute; width:1px; height:1px; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* Capas del parallax */
.flor, .foto img, .rejilla img{ will-change:transform; }
.velo{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background:var(--navy-hondo); opacity:var(--velo,0);
}

.flor{
  position:absolute; width:min(48vw,230px); aspect-ratio:1; pointer-events:none;
  opacity:.9; z-index:2;
  /* --py y --gy los escribe el parallax; el giro se conserva en --rot */
  transform:translate3d(var(--px,0px),var(--py,0px),0) rotate(calc(var(--rot,0deg) + var(--gy,0deg)));
}
.esq-tl{ --rot:180deg; top:-8%;  left:-14%; }
.esq-tr{ --rot:-90deg; top:-8%;  right:-14%; }
.esq-bl{ --rot:90deg;  bottom:-8%; left:-14%; }
.esq-br{ --rot:0deg;   bottom:-8%; right:-14%; }
@media (min-width:700px){ .flor{ width:270px; } }

/* ---------------------------------------------------------
   Sobre de entrada
   --------------------------------------------------------- */
.sobre-overlay{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  background:
    radial-gradient(120% 90% at 50% 20%, var(--navy-suave) 0%, var(--navy) 45%, var(--navy-hondo) 100%);
  transition:opacity .9s ease, visibility .9s;
}
.sobre-overlay.fuera{ opacity:0; visibility:hidden; }
.sobre-inner{ position:relative; text-align:center; padding:2rem; }
.sobre-flores{
  position:absolute; top:-30%; left:-14%; width:min(48vw,210px); aspect-ratio:1;
  transform:rotate(200deg); opacity:.95; pointer-events:none;
}

/* --- El sobre en 3D ------------------------------------- */
.escena{ perspective:1500px; perspective-origin:50% 42%; }

.sobre{
  position:relative; display:block; margin:0 auto;
  width:min(76vw,330px); aspect-ratio:3/2;
  border:0; padding:0; cursor:pointer; background:none;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
  /* Nada de filter/opacity aquí: aplanan el contexto 3D y el navegador
     dejaría de ordenar las piezas por profundidad. */
}
.sobre:hover{ transform:translateY(-7px) rotateX(5deg); }

/* Todas las piezas se dibujan en SVG para tener curvas de verdad
   y que escalen con el tamaño del sobre. */
.forro, .bolsillo, .solapa, .cara-fuera, .cara-dentro{ position:absolute; }
.forro svg, .bolsillo svg, .cara-fuera svg, .cara-dentro svg{
  width:100%; height:100%; display:block;
}

/* Interior */
.forro{ inset:0; transform:translateZ(1px); }

/* Frente del sobre. La sombra va aquí, no en .sobre. */
.bolsillo{
  inset:0; transform:translateZ(30px);
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.5));
}

/* Solapa: gira sobre el borde superior y tiene dos caras */
.solapa{
  inset:0 0 auto 0; height:56%;
  transform-origin:top center; transform:rotateX(0deg) translateZ(31px);
  transition:transform 1.15s cubic-bezier(.55,.03,.28,1);
  transform-style:preserve-3d;
}
.cara-fuera, .cara-dentro{ inset:0; backface-visibility:hidden; }
.cara-dentro{ transform:rotateX(180deg); }

/* Sello de lacre */
.sello{
  position:absolute; left:50%; top:47%; translate:-50% -50%;
  transform:translateZ(33px);
  width:27%; aspect-ratio:1;
  transition:transform .6s cubic-bezier(.5,-0.45,.6,1.5), opacity .55s ease;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.5));
}
.sello svg{ width:100%; height:100%; display:block; }
.monograma{
  font-family:var(--serif); font-size:23px; font-weight:600;
  letter-spacing:.5px; text-anchor:middle;
}

/* Foto polaroid que asoma del sobre */
.polaroid{
  position:absolute; left:15%; width:70%; bottom:7%; height:90%;
  display:flex; flex-direction:column;
  transform:translateZ(10px) translateY(0) rotate(0deg);
  transition:transform 1.15s cubic-bezier(.3,.72,.24,1);
  background:#fffdf7; padding:5% 5% 0; border-radius:2px;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
}
.polaroid .marco{ flex:1; overflow:hidden; background:#e8e2d6; }
.polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }
.polaroid .pie{
  display:grid; place-items:center; height:17%;
  font-family:var(--script); color:var(--navy);
  font-size:clamp(.7rem,3vw,1rem); line-height:1;
}

/* Tarjeta interior */
.carta{
  position:absolute; left:7%; width:86%; bottom:5%; height:92%;
  transform:translateZ(12px) translateY(0);
  transition:transform 1.15s cubic-bezier(.3,.72,.24,1);
  border-radius:3px; overflow:hidden;
  background:linear-gradient(170deg,#fffdf8,var(--crema-hondo));
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.carta-cara{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start; gap:.35rem;
  padding:11% 8% 0; text-align:center; color:var(--navy);
  border:1px solid rgba(201,162,39,.5); border-radius:3px;
  margin:4%;
}
.carta-cara small{
  font-family:var(--sans); font-size:clamp(.36rem,1.6vw,.5rem);
  letter-spacing:.24em; color:#6c6f80;
}
.carta-cara b{
  font-family:var(--script); font-weight:400; line-height:1.05;
  font-size:clamp(1.5rem,6.5vw,2.1rem);
}
.carta-cara b i{
  display:block; font-family:var(--serif); font-style:normal;
  font-size:.42em; color:var(--oro);
}
.carta-cara em{
  font-family:var(--sans); font-style:normal;
  font-size:clamp(.4rem,1.8vw,.56rem); letter-spacing:.24em; color:var(--oro);
}

/* --- Secuencia de apertura ------------------------------ */
/* 1· se rompe el lacre */
.sobre-overlay.paso-1 .sello{ transform:translateZ(33px) scale(1.45) rotate(16deg); opacity:0; }
.sobre-overlay.paso-1 .sobre{ transform:none; }

/* 2· se abre la solapa */
.sobre-overlay.paso-2 .solapa{ transform:rotateX(-168deg) translateZ(31px); }

/* 2b· asoma la polaroid, girada, por detrás de la tarjeta */
.sobre-overlay.paso-foto .polaroid{ transform:translateZ(40px) translate(-7%,-97%) rotate(-8.5deg); }

/* 3· sale la tarjeta
   Sale también hacia adelante en Z: al abrirse casi 180°, el plano de la
   solapa cruza el de la tarjeta y el navegador deja de ordenar por
   profundidad. Separándolos, la tarjeta queda limpiamente delante. */
.sobre-overlay.paso-3 .carta{ transform:translateZ(64px) translateY(-52%); }

/* 4· la tarjeta se acerca y todo se funde */
.sobre-overlay.paso-4 .sobre{ transform:translateY(16%) scale(1.4); }
.sobre-overlay.paso-4 .carta{ transform:translateZ(64px) translateY(-52%) scale(1.03); }
.sobre-overlay.paso-4 .polaroid{ transform:translateZ(40px) translate(-7%,-97%) rotate(-8.5deg); }
.sobre-overlay.paso-4 .bolsillo,
.sobre-overlay.paso-4 .solapa,
.sobre-overlay.paso-4 .forro{ opacity:0; transition:opacity .6s ease; }
.sobre-overlay.paso-4 .sobre-cta,
.sobre-overlay.paso-4 .corazon,
.sobre-overlay.paso-4 .sobre-flores{ opacity:0; transition:opacity .5s ease; }

.sobre-cta{
  margin:2rem 0 .4rem; font-family:var(--sans); font-size:.78rem;
  letter-spacing:.32em; color:var(--oro-claro);
}
.corazon{ margin:0; color:var(--oro-claro); font-size:1rem; animation:latir 2s ease-in-out infinite; }
@keyframes latir{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.22)} }

/* ---------------------------------------------------------
   Estructura de secciones
   --------------------------------------------------------- */
main{ opacity:0; transition:opacity 1s ease .2s; }
body.abierto main{ opacity:1; }

.pantalla{
  position:relative; overflow:visible;
  padding:var(--sep-y) 1.5rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
.portada{ min-height:100svh; }

/* --- Fondo continuo -------------------------------------
   Antes cada sección era una caja opaca y se veía el corte
   recto entre ellas. Ahora hay un único cielo fijo detrás de
   toda la página y las secciones claras son paneles de papel
   con los bordes difuminados que flotan encima. --------- */
.cielo{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(90% 55% at 20% 8%,  #24396a 0%, transparent 60%),
    radial-gradient(80% 50% at 85% 75%, #1c2f57 0%, transparent 60%),
    linear-gradient(170deg, var(--navy) 0%, var(--navy-hondo) 55%, #0a1428 100%);
}
.cielo .polvo{
  position:absolute; inset:-20% 0; display:block; opacity:.55;
  transform:translate3d(0,var(--py,0px),0);
  background-image:
    radial-gradient(1.6px 1.6px at 12% 14%, var(--oro-claro), transparent),
    radial-gradient(1.6px 1.6px at 78% 9%,  var(--oro-claro), transparent),
    radial-gradient(1px 1px   at 32% 24%,   var(--oro), transparent),
    radial-gradient(1px 1px   at 62% 33%,   var(--oro), transparent),
    radial-gradient(1.6px 1.6px at 88% 47%, var(--oro-claro), transparent),
    radial-gradient(1px 1px   at 22% 58%,   var(--oro), transparent),
    radial-gradient(1.4px 1.4px at 54% 68%, var(--oro-claro), transparent),
    radial-gradient(1px 1px   at 8%  81%,   var(--oro), transparent),
    radial-gradient(1.4px 1.4px at 70% 90%, var(--oro-claro), transparent);
}

/* Secciones oscuras: no pintan nada, dejan ver el cielo */
.oscura{ color:var(--crema); }

/* Secciones claras: panel de papel con los bordes disueltos */
.clara{ color:var(--tinta); }
.clara::before{
  content:""; position:absolute; inset:-1px 0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,var(--crema),var(--crema-hondo));
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
/* Dos paneles claros seguidos se funden en uno: sin corte intermedio */
.clara:has(+ .clara)::before{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 100%);
}
.clara + .clara::before{
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 92%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 92%,transparent 100%);
}
.clara + .clara:has(+ .clara)::before{
  -webkit-mask-image:none; mask-image:none;
}
.clara::after{
  content:""; position:absolute; inset:-10% 0; z-index:1; pointer-events:none; opacity:.3;
  transform:translate3d(0,var(--polvo,0px),0);
  background-image:
    radial-gradient(1px 1px at 20% 24%, #cbb375, transparent),
    radial-gradient(1px 1px at 70% 62%, #cbb375, transparent),
    radial-gradient(1px 1px at 44% 86%, #cbb375, transparent);
}

.bloque{ position:relative; z-index:4; width:100%; max-width:var(--ancho); }

/* Aparición al hacer scroll */
.rv{
  opacity:0; --ry:28px;
  transform:translate3d(0,calc(var(--py,0px) + var(--ry,0px)),0);
  transition:opacity 1s ease, --ry 1s cubic-bezier(.22,.61,.36,1);
}
.rv.visible{ opacity:1; --ry:0px; }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; --ry:0px; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .corazon{ animation:none; }
}

/* ---------------------------------------------------------
   Tipografía compartida
   --------------------------------------------------------- */
.sobretitulo{
  font-family:var(--sans); font-size:clamp(.68rem,2.4vw,.8rem);
  letter-spacing:.28em; line-height:2; margin:0 0 1.2rem;
  color:var(--crema);
}
.oscura .sobretitulo{ color:#e8dfc9; }
.sobretitulo.oro{ color:var(--oro-claro); }

.titulo{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.9rem,7vw,2.8rem); margin:.2rem 0 0; letter-spacing:.02em;
}
.tit-versalita{ font-size:clamp(1.5rem,5.5vw,2.1rem); letter-spacing:.22em; }
.titulo-script{ font-family:var(--script); font-weight:400; font-size:clamp(2.4rem,10vw,3.6rem); margin:.2rem 0 .4rem; color:var(--oro-claro); }

.filete{ display:flex; align-items:center; justify-content:center; gap:.7rem; margin:1.1rem 0; }
.filete span{ height:1px; width:min(28%,110px); background:linear-gradient(90deg,transparent,var(--oro)); }
.filete span:last-of-type{ background:linear-gradient(270deg,transparent,var(--oro)); }
.filete i{ color:var(--oro); font-style:normal; font-size:.75rem; }

.texto{ margin:1rem auto; max-width:34rem; font-size:clamp(1.02rem,2.5vw,1.2rem); }
.texto.pequeno{ font-size:1rem; opacity:.9; }
.corazon-oro{ color:var(--oro); font-size:1.1rem; margin:0 0 1rem; }

.ic-grande{ display:inline-grid; place-items:center; margin:.4rem 0 .2rem; }
.ic-grande svg{ width:56px; height:56px; fill:none; stroke:var(--oro-claro); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ic-grande.oscuro svg{ stroke:var(--oro); }

/* ---------------------------------------------------------
   Portada
   --------------------------------------------------------- */
.nombres{
  font-family:var(--script); font-weight:400;
  font-size:clamp(3rem,15vw,5.4rem); line-height:1.05;
  margin:.4rem 0; color:var(--crema);
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.nombres em{
  display:block; font-family:var(--serif); font-style:normal;
  font-size:.34em; color:var(--oro-claro); margin:.1em 0;
}
.nombres.pequenos{ font-size:clamp(2.4rem,11vw,3.6rem); }

.fecha-portada{
  font-family:var(--sans); font-size:clamp(.95rem,3.4vw,1.15rem);
  letter-spacing:.34em; color:var(--oro-claro); margin:.9rem 0 .3rem;
}
.lugar-portada{ font-family:var(--sans); font-size:.72rem; letter-spacing:.26em; opacity:.75; margin:0; }

.scroll-hint{
  position:absolute; bottom:2rem; left:50%; translate:-50% 0; z-index:3;
  width:22px; height:36px; border:1px solid var(--oro-claro); border-radius:12px;
}
.scroll-hint span{
  position:absolute; left:50%; top:8px; translate:-50% 0;
  width:3px; height:7px; border-radius:2px; background:var(--oro-claro);
  animation:baja 1.8s infinite;
}
@keyframes baja{ 0%{opacity:0;top:7px} 40%{opacity:1} 100%{opacity:0;top:20px} }

/* ---------------------------------------------------------
   Frase + foto
   --------------------------------------------------------- */
.frase-1{ font-family:var(--sans); font-size:clamp(.82rem,3vw,1rem); letter-spacing:.2em; line-height:2; margin:0; }
.frase-2{ font-family:var(--script); font-size:clamp(1.7rem,7vw,2.4rem); color:var(--oro); margin:.8rem 0 0; line-height:1.35; }

.foto{
  position:relative; z-index:4; margin:1.6rem 0 0; width:100%; max-width:var(--ancho);
  border-radius:2px; overflow:hidden;
  box-shadow:0 18px 40px rgba(20,35,68,.25);
}
.foto{ aspect-ratio:4/3; }
.foto img{
  position:absolute; inset:-12% 0; width:100%; height:124%; object-fit:cover;
  transform:translate3d(0,var(--py,0px),0);
}
.foto figcaption{
  display:none; padding:.9rem; font-family:var(--sans); font-size:.72rem;
  letter-spacing:.06em; color:var(--tinta-suave);
}
.foto.sin-foto{ box-shadow:none; aspect-ratio:16/10; }
.foto.sin-foto img{ display:none; }
.foto.sin-foto figcaption{
  display:grid; place-items:center; position:absolute; inset:0;
  border:1px dashed rgba(201,162,39,.6); border-radius:2px;
  background:rgba(255,255,255,.4);
}

/* ---------------------------------------------------------
   Cuenta atrás
   --------------------------------------------------------- */
.reloj{ display:flex; align-items:flex-start; justify-content:center; gap:.35rem; margin:1.4rem 0 1rem; }
.reloj .u{ min-width:clamp(58px,17vw,86px); }
.reloj b{
  display:block; font-family:var(--serif); font-weight:500;
  font-size:clamp(2.1rem,10vw,3.4rem); line-height:1; color:var(--oro-claro);
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}
.reloj small{
  display:block; margin-top:.55rem; font-family:var(--sans);
  font-size:clamp(.52rem,2vw,.62rem); letter-spacing:.16em; color:#cfc6ae;
}
.reloj .sep{ font-size:clamp(1.6rem,7vw,2.6rem); color:var(--oro); line-height:1; }

.fecha-script{ font-family:var(--script); font-size:clamp(1.6rem,6.5vw,2.2rem); color:var(--crema); margin:.6rem 0 1.4rem; }

/* ---------------------------------------------------------
   Calendario · Reserva la fecha
   --------------------------------------------------------- */
.titulo-script.oscuro{ color:var(--navy); }

.hoja-calendario{
  position:relative; margin:1.4rem auto 0; max-width:24rem;
  padding:1.6rem 1.1rem 1.9rem;
  background:linear-gradient(165deg,#fffdf8,#f3ece0);
  border-radius:2px;
  box-shadow:0 18px 40px rgba(20,35,68,.18), 0 1px 0 rgba(255,255,255,.9) inset;
}
/* Textura de papel prensado, muy sutil */
.hoja-calendario::before{
  content:""; position:absolute; inset:0; border-radius:2px; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(20,35,68,.05), transparent),
    radial-gradient(1px 1px at 64% 48%, rgba(20,35,68,.05), transparent),
    radial-gradient(1px 1px at 33% 77%, rgba(20,35,68,.05), transparent),
    radial-gradient(1px 1px at 86% 88%, rgba(20,35,68,.05), transparent);
}

.mes{
  font-family:var(--serif); font-size:clamp(1.1rem,4.4vw,1.45rem);
  letter-spacing:.16em; margin:0 0 1.1rem; color:var(--navy);
  font-variant-numeric:lining-nums;
}

.semana, .dias{ display:grid; grid-template-columns:repeat(7,1fr); }
.semana{ margin-bottom:.5rem; }
.semana span{
  font-family:var(--script); font-size:clamp(.9rem,3.6vw,1.15rem);
  color:var(--navy); opacity:.85;
}
.dias{ gap:.15rem .1rem; }
.dias span{
  display:grid; place-items:center; aspect-ratio:1;
  font-family:var(--serif); font-size:clamp(.85rem,3.4vw,1.05rem);
  color:#3a4258; font-variant-numeric:lining-nums;
}

/* El día de la boda: corazón azul con latido */
.dia.elegido{ position:relative; }
.dia.elegido b{
  position:relative; z-index:2; font-weight:500; color:var(--crema);
}
.corazon-dia{
  position:absolute; left:50%; top:50%; translate:-50% -52%;
  width:106%; height:106%; fill:var(--navy);
  filter:drop-shadow(0 3px 6px rgba(20,35,68,.35));
  animation:latido-dia 1.9s ease-in-out infinite;
  transform-origin:50% 52%;
}
@keyframes latido-dia{
  0%, 100%   { transform:scale(1); }
  14%        { transform:scale(1.16); }
  28%        { transform:scale(1.02); }
  42%        { transform:scale(1.11); }
  60%        { transform:scale(1); }
}
@media (prefers-reduced-motion:reduce){ .corazon-dia{ animation:none; } }

/* ---------------------------------------------------------
   Botones
   --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.9rem; border:0; cursor:pointer;
  font-family:var(--sans); font-size:.72rem; letter-spacing:.2em;
  border-radius:999px; text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-navy{ background:var(--navy); color:var(--crema); box-shadow:0 10px 22px rgba(20,35,68,.3); }
.btn-navy:hover{ background:var(--navy-suave); }
.btn-oro{
  background:linear-gradient(135deg,var(--oro-claro),var(--oro));
  color:#3b2d05; box-shadow:0 10px 22px rgba(201,162,39,.28);
}
.btn.ancho{ width:100%; padding:1.05rem; }
.btn .pin{ width:14px; height:14px; }

.pin{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; vertical-align:-2px; }
.clara .sede-nombre .pin{ stroke:var(--oro); }

/* ---------------------------------------------------------
   Dónde y cuándo
   --------------------------------------------------------- */
.sede{ margin:1.4rem 0; }
.sede-tipo{ font-family:var(--sans); font-size:.72rem; letter-spacing:.28em; color:var(--oro); margin:0 0 .5rem; font-weight:500; }
.sede-hora{
  font-family:var(--serif); font-size:clamp(1.5rem,6vw,2rem); margin:0 0 .3rem;
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;
}
.sede-nombre{ font-size:1.15rem; font-weight:600; margin:0 0 .25rem; }
.sede-dir{ margin:0 0 1.1rem; color:var(--tinta-suave); font-size:1rem; }
.divisor{ margin:1.6rem 0; color:var(--oro); }
.divisor i{ font-style:normal; }
.divisor::before, .divisor::after{ content:"— — —"; letter-spacing:.3em; opacity:.5; margin:0 .6rem; }

/* ---------------------------------------------------------
   Itinerario
   --------------------------------------------------------- */
.linea{
  position:relative; list-style:none;
  margin:2.4rem auto 0; padding:0; max-width:26rem;
}
/* Línea central */
.linea::before{
  content:""; position:absolute; left:50%; top:.6rem; bottom:.6rem;
  width:1px; translate:-50% 0;
  background:linear-gradient(180deg,transparent,var(--oro) 8%,var(--oro) 92%,transparent);
  opacity:.55;
}

.linea li{
  position:relative; display:flex; align-items:center; gap:.85rem;
  width:50%; padding:0 0 2.2rem;
}
.linea li:last-child{ padding-bottom:0; }

/* Impares a la derecha de la línea */
.linea li:nth-child(odd){ margin-left:50%; padding-left:1.1rem; text-align:left; }
/* Pares a la izquierda, con el orden invertido para que el icono
   quede siempre pegado a la línea */
.linea li:nth-child(even){
  margin-left:0; padding-right:1.1rem;
  flex-direction:row-reverse; text-align:right;
}

/* Guion que une la línea central con el icono */
.linea li::before{
  content:""; position:absolute; top:1.55rem; width:.9rem; height:1px;
  background:var(--oro); opacity:.6;
}
.linea li:nth-child(odd)::before{ left:0; }
.linea li:nth-child(even)::before{ right:0; }

/* Punto sobre la línea */
.linea li::after{
  content:""; position:absolute; top:1.3rem; width:7px; height:7px;
  border-radius:50%; background:var(--crema);
  border:1px solid var(--oro);
}
.linea li:nth-child(odd)::after{ left:-3.5px; }
.linea li:nth-child(even)::after{ right:-3.5px; }

.linea .ic{ display:grid; place-items:center; width:52px; height:52px; flex:none; }
.linea .ic svg{
  width:40px; height:40px; fill:none; stroke:var(--oro);
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.linea .txt{ display:block; }
.linea b{
  display:block; font-family:var(--serif); font-weight:500;
  font-size:clamp(1.15rem,4.6vw,1.45rem); line-height:1.15;
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;
}
.linea small{
  display:block; margin-top:.15rem; font-family:var(--sans);
  font-size:clamp(.56rem,2.2vw,.66rem); letter-spacing:.16em; color:var(--tinta-suave);
}

/* ---------------------------------------------------------
   Recomendaciones
   --------------------------------------------------------- */
.tarjetas{ display:grid; gap:1rem; margin-top:1.8rem; }
@media (min-width:560px){ .tarjetas{ grid-template-columns:1fr 1fr; } }
.tarjeta{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(201,162,39,.35);
  padding:1.6rem 1.2rem; border-radius:2px;
}
.tarjeta svg{ width:34px; height:34px; fill:none; stroke:var(--oro); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; margin-bottom:.6rem; }
.tarjeta h4{ font-family:var(--sans); font-size:.66rem; letter-spacing:.22em; margin:0 0 .5rem; font-weight:500; }
.tarjeta p{ margin:0; font-size:1rem; }
.tarjeta em{ color:var(--tinta-suave); font-size:.92em; }

/* ---------------------------------------------------------
   RSVP
   --------------------------------------------------------- */
.rsvp form{ margin:1.6rem auto 0; max-width:26rem; text-align:left; }
.rsvp label{
  display:block; margin-bottom:1.05rem;
  font-family:var(--sans); font-size:.68rem; letter-spacing:.16em; color:#d8cfb8;
}
.rsvp .opc{ opacity:.6; letter-spacing:0; }
.rsvp input[type=text], .rsvp select, .rsvp textarea{
  width:100%; margin-top:.5rem; padding:.85rem 1rem;
  font-family:var(--serif); font-size:1.05rem; color:var(--crema);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(224,195,126,.4); border-radius:2px;
  transition:border-color .25s, background .25s;
}
.rsvp textarea{ resize:vertical; }
.rsvp input::placeholder, .rsvp textarea::placeholder{ color:rgba(247,242,231,.4); }
.rsvp input:focus, .rsvp select:focus, .rsvp textarea:focus{
  outline:none; border-color:var(--oro-claro); background:rgba(255,255,255,.1);
}
.rsvp select option{ background:var(--navy); color:var(--crema); }
.rsvp input[aria-invalid="true"]{ border-color:#e07c7c; }

.rsvp fieldset{ border:0; padding:0; margin:0 0 1.05rem; }
.rsvp legend{ font-family:var(--sans); font-size:.68rem; letter-spacing:.16em; color:#d8cfb8; padding:0; margin-bottom:.6rem; }
.opciones{ display:grid; gap:.6rem; }
.rsvp .op{ margin:0; display:flex; align-items:center; gap:.7rem; cursor:pointer; }
.op input{ appearance:none; width:18px; height:18px; border:1px solid var(--oro-claro); border-radius:50%; display:grid; place-items:center; flex:none; }
.op input:checked::after{ content:""; width:9px; height:9px; border-radius:50%; background:var(--oro-claro); }
.op span{ font-family:var(--serif); font-size:1.05rem; letter-spacing:0; color:var(--crema); }

.nota{ font-family:var(--sans); font-size:.66rem; letter-spacing:.08em; text-align:center; color:#b8b09a; margin:.9rem 0 0; }
/* Campo trampa: fuera de pantalla, nunca visible ni enfocable con tabulador */
.trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Confirmación tras enviar */
.gracias{ margin:1.6rem auto 0; max-width:26rem; }
.gracias h3{
  font-family:var(--script); font-weight:400;
  font-size:clamp(2rem,8vw,2.8rem); color:var(--oro-claro); margin:.2rem 0 .6rem;
}
.gracias .btn{ margin-top:1.2rem; }
#btnEnviar[disabled]{ opacity:.6; cursor:progress; }
.nota.error{ color:#e5a49e; }

.limite{ font-family:var(--sans); font-size:.68rem; letter-spacing:.1em; margin-top:1.8rem; color:#cfc6ae; }
.limite b{ color:var(--oro-claro); }

/* ---------------------------------------------------------
   Galería
   --------------------------------------------------------- */
.rejilla{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:1.8rem; }
.rejilla figure{ position:relative; margin:0; aspect-ratio:1; overflow:hidden; background:rgba(20,35,68,.06); }
.rejilla img{
  position:absolute; inset:-11% 0; width:100%; height:122%; object-fit:cover;
  transform:translate3d(0,var(--py,0px),0);
}
.rejilla .sin-foto{
  position:relative;
  border:1px dashed rgba(201,162,39,.5);
  background:
    repeating-linear-gradient(45deg,rgba(201,162,39,.05) 0 8px,transparent 8px 16px);
}
.rejilla .sin-foto img{ display:none; }
.rejilla .sin-foto::after{
  content:"Tu foto aquí"; position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--sans); font-size:.66rem; letter-spacing:.18em;
  color:var(--tinta-suave); opacity:.7;
}

/* En pantallas estrechas el ramo superior derecho del cierre estorba */
@media (max-width:540px){ .cierre .esq-tr{ display:none; } }

/* ---------------------------------------------------------
   Cierre + música
   --------------------------------------------------------- */
.cierre{ padding-block:calc(var(--sep-y) * 1.1); }
/* ---------------------------------------------------------
   Animaciones de detalle
   --------------------------------------------------------- */
@keyframes subir{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
@keyframes brillo{ 0%{ left:-60%; } 38%,100%{ left:135%; } }
@keyframes flotar{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }

/* Entrada escalonada de la portada, al terminar de abrirse el sobre */
body.abierto .portada .sobretitulo  { animation:subir .9s ease both .15s; }
body.abierto .portada .filete       { animation:subir .9s ease both .35s; }
body.abierto .portada .marco,
body.abierto .portada .nombres      { animation:subir 1.2s cubic-bezier(.22,.61,.36,1) both .5s; }
body.abierto .portada .fecha-portada{ animation:subir .9s ease both .85s; }
body.abierto .portada .lugar-portada{ animation:subir .9s ease both 1s; }

/* Barrido de luz sobre los botones dorados */
.btn-oro{ position:relative; overflow:hidden; }
.btn-oro::after{
  content:""; position:absolute; top:0; left:-60%; width:38%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg); pointer-events:none;
  animation:brillo 5s ease-in-out infinite 1.8s;
}

/* Los iconos grandes flotan despacio */
.ic-grande{ animation:flotar 5.5s ease-in-out infinite; }

/* Latido del segundero */
.reloj b.late{ animation:latir .35s ease; }

@media (prefers-reduced-motion:reduce){
  body.abierto .portada *,
  .btn-oro::after, .ic-grande, .reloj b.late{ animation:none !important; }
}

.hashtag{ font-family:var(--sans); font-size:.7rem; letter-spacing:.22em; color:var(--oro-claro); margin-top:1.6rem; }

.musica{
  position:fixed; right:1rem; bottom:1rem; z-index:60;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(224,195,126,.6);
  background:rgba(20,35,68,.85); backdrop-filter:blur(6px);
  display:grid; place-items:center;
}
.musica svg{ width:20px; height:20px; fill:none; stroke:var(--oro-claro); stroke-width:1.6; stroke-linejoin:round; }
.musica.sonando{ animation:girar 6s linear infinite; }
@keyframes girar{ to{ transform:rotate(360deg); } }