/* Fuentes locales (SIL Open Font License), subconjunto latino: la invitación funciona sin internet */
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:300 700; font-display:swap; src:url(assets/fonts/cormorant-garamond.woff2) format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:300 700; font-display:swap; src:url(assets/fonts/cormorant-garamond-italic.woff2) format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:200 800; font-display:swap; src:url(assets/fonts/manrope.woff2) format('woff2'); }

:root {
  color-scheme: dark;
  --paper:#F4F5FD; --cream:#FBF7EC; --flash:#FBF1D3;
  --iris:#4655A6; --iris-deep:#2D3878; --iris-soft:#8D98D6;
  --night:#0F1336; --night-2:#1A2160; --night-3:#2A3584;
  --butter:#E8C86A; --butter-deep:#C9A43F; --butter-soft:#F6E7B8;
  --ink:#2C2F4A; --muted:rgba(244,245,253,.68); --line:rgba(246,231,184,.22);
  --serif:'Cormorant Garamond','Cormorant',Georgia,'Times New Roman',serif;
  --sans:'Manrope','Segoe UI',Arial,sans-serif;
  --emoji:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','Segoe UI Symbol',sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1);
  --ease-io:cubic-bezier(.6,0,.25,1);
  --shadow:0 50px 90px -40px rgba(0,0,0,.75),0 18px 36px -20px rgba(0,0,0,.55);
}
* { box-sizing:border-box; }
html { background:var(--night); }
body { margin:0; min-height:100svh; color:var(--paper); font-family:var(--sans); background:transparent; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.06; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.5' filter='url(%23n)'/%3E%3C/svg%3E"); }
[hidden] { display:none!important; }
button { font:inherit; cursor:pointer; }
button:focus-visible { outline:2px solid var(--butter); outline-offset:5px; }

/* ---------- Animaciones ---------- */
@keyframes draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes rise { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
@keyframes word { from { opacity:0; transform:translateY(.45em); filter:blur(8px); } to { opacity:1; transform:none; filter:none; } }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes fade-out { to { opacity:0; } }
@keyframes burst { 0% { opacity:0; transform:scale(.1); } 30% { opacity:.9; } 100% { opacity:0; transform:scale(1.6); } }
@keyframes twinkle { 0%,100% { opacity:.25; } 50% { opacity:.9; } }
@keyframes spin { to { rotate:360deg; } }
@keyframes drift { to { transform:translate3d(4vmax,3vmax,0) scale(1.1); } }
@keyframes float-up { from { transform:translateY(0); opacity:0; } 15%,80% { opacity:.8; } to { transform:translateY(-110vh); opacity:0; } }
@keyframes name-in { from { clip-path:inset(0 0 100% 0); transform:translateY(.35em); } to { clip-path:inset(-10% -5% -20% -5%); transform:none; } }
/* La instantánea cae sobre la mesa y la imagen se revela poco a poco */
@keyframes drop { 0% { opacity:0; transform:translate(-30px,-60px) rotate(-14deg) scale(1.06); } 60% { opacity:1; } 100% { opacity:1; transform:rotate(var(--tilt)); } }
@keyframes develop { 0% { filter:brightness(2.2) contrast(.35) saturate(0) sepia(.4); } 45% { filter:brightness(1.4) contrast(.7) saturate(.4) sepia(.3); } 100% { filter:none; } }
@keyframes tape { from { opacity:0; transform:var(--tape-t) scaleX(.2); } to { opacity:1; transform:var(--tape-t); } }
@keyframes stamp-in { 0% { opacity:0; transform:translateY(-14px) rotate(16deg) scale(1.35); } 65% { opacity:1; transform:rotate(4deg) scale(.95); } 100% { opacity:1; transform:rotate(7deg) scale(1); } }
@keyframes ink { 0% { opacity:0; transform:rotate(-14deg) scale(1.15); } 40% { opacity:.95; } 100% { opacity:.85; transform:rotate(-14deg) scale(1); } }
@keyframes sheen { from { transform:translateX(-130%) skewX(-18deg); } to { transform:translateX(230%) skewX(-18deg); } }

/* ---------- Piezas comunes ---------- */
.phrase { font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em; line-height:1.12; text-wrap:balance; }
/* Los emojis no deben heredar la cursiva: en celulares se inclinan y se deforman */
.emoji { display:inline-block; font-family:var(--emoji); font-style:normal; font-weight:400; font-synthesis:none; letter-spacing:0; line-height:1; font-size:.8em; vertical-align:.02em; white-space:nowrap; }
.eyebrow, .celebrate { display:flex; align-items:center; justify-content:center; gap:14px; font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.34em; text-transform:uppercase; color:var(--butter-soft); }
.eyebrow::before, .eyebrow::after, .celebrate::before, .celebrate::after { content:""; width:34px; height:1px; background:linear-gradient(90deg,transparent,var(--butter)); flex:none; }
.eyebrow::after, .celebrate::after { transform:scaleX(-1); }
.heart { fill:none; stroke:var(--butter); stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; }
.heart path, path.heart { stroke-dasharray:1; }

.button { position:relative; overflow:hidden; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:56px; padding:13px 13px 13px 30px; border:0; border-radius:999px; background:var(--butter); color:var(--night); font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; box-shadow:0 18px 40px -14px rgba(232,200,106,.5),inset 0 1px 0 rgba(255,255,255,.5); transition:transform .4s var(--ease),box-shadow .4s var(--ease); }
.button::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%); transform:translateX(-120%); transition:transform 1s var(--ease); }
.button:hover { transform:translateY(-2px); box-shadow:0 24px 50px -14px rgba(232,200,106,.7),inset 0 1px 0 rgba(255,255,255,.5); }
.button:hover::after { transform:translateX(120%); }
.button span { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--night); color:var(--butter); font-size:15px; font-weight:700; line-height:1; letter-spacing:0; transition:transform .4s var(--ease); }
.button:hover span { transform:rotate(45deg); }
.button:disabled { cursor:default; }

.stars { position:absolute; inset:0; pointer-events:none; background-repeat:repeat; animation:twinkle 5s ease-in-out infinite; }
.stars-a { background-image:radial-gradient(1.2px 1.2px at 20px 30px,#fff 50%,transparent 51%),radial-gradient(1px 1px at 120px 80px,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 70px 150px,var(--butter-soft) 50%,transparent 51%),radial-gradient(1px 1px at 160px 170px,#fff 50%,transparent 51%); background-size:190px 200px; }
.stars-b { background-image:radial-gradient(1px 1px at 40px 60px,#fff 50%,transparent 51%),radial-gradient(1.6px 1.6px at 210px 20px,#fff 50%,transparent 51%),radial-gradient(1px 1px at 150px 230px,var(--butter-soft) 50%,transparent 51%); background-size:270px 260px; animation-delay:-2.5s; animation-duration:7s; }

/* ---------- Entrada: dos caminos que coinciden ---------- */
.entry { position:relative; min-height:100svh; display:grid; place-items:center; padding:48px 24px; overflow:hidden; background:radial-gradient(120% 80% at 50% 115%,var(--night-3) 0%,var(--night-2) 42%,var(--night) 100%); }
.entry::before { content:""; position:absolute; left:50%; bottom:-38vmax; width:90vmax; height:60vmax; transform:translateX(-50%); border-radius:50%; background:radial-gradient(closest-side,rgba(232,200,106,.26),rgba(232,200,106,0)); pointer-events:none; }
/* Apertura: un destello cálido se expande desde el botón */
.entry::after { content:""; position:fixed; inset:0; z-index:50; background:radial-gradient(circle at var(--ox,50%) var(--oy,70%),#fff 0,var(--flash) 30%,var(--butter-soft) 100%); clip-path:circle(0 at var(--ox,50%) var(--oy,70%)); pointer-events:none; }
.entry.is-leaving::after { clip-path:circle(150vmax at var(--ox,50%) var(--oy,70%)); transition:clip-path .9s var(--ease-io); }
.entry.is-leaving .entry-content { opacity:0; transform:scale(.96); transition:opacity .45s ease,transform .6s var(--ease); }
.entry.is-leaving { pointer-events:none; }
.entry-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; animation:fade-in 1.4s ease both; }
/* Velo oscuro sobre el video para que la frase se lea con claridad */
.sky { position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 75% at 50% 45%,rgba(15,19,54,.35) 0%,rgba(15,19,54,.7) 70%,rgba(15,19,54,.9) 100%),linear-gradient(180deg,rgba(15,19,54,.45),rgba(15,19,54,.25) 40%,rgba(15,19,54,.75)); }
.sky .stars { opacity:.5; }
.entry-content { position:relative; z-index:1; width:min(100%,660px); text-align:center; }
.meeting { filter:drop-shadow(0 0 6px rgba(10,12,40,.8)); display:block; width:min(100%,420px); height:auto; margin:0 auto 18px; overflow:visible; }
.route { fill:none; stroke:rgba(246,231,184,.55); stroke-width:1; stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.7s var(--ease-io) forwards; }
.traveler { fill:var(--butter); filter:drop-shadow(0 0 6px rgba(232,200,106,.9)); animation:fade-out .3s 1.65s forwards; }
.burst { fill:none; stroke:var(--butter); stroke-width:1; opacity:0; transform-box:fill-box; transform-origin:center; animation:burst 1.1s 1.6s var(--ease) forwards; }
.meet-heart { stroke-width:1.9; stroke-dashoffset:1; animation:draw 1.3s 1.65s var(--ease) forwards; }
.entry-phrase { color:#fff; text-shadow:0 2px 24px rgba(10,12,40,.85),0 1px 3px rgba(10,12,40,.6); font-size:clamp(34px,5.8vw,60px); margin:0 auto 30px; max-width:600px; }
.w { display:inline-block; animation:word 1s calc(1.9s + var(--i) * .085s) var(--ease) both; }
.entry .eyebrow { text-shadow:0 1px 10px rgba(10,12,40,.9); margin:0 0 34px; animation:rise 1s 2.6s var(--ease) both; }
.entry .button { animation:rise 1s 2.8s var(--ease) both; }

/* ---------- Fondo de la portada (oscuro) ---------- */
.backdrop { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
/* Cielo pintado de fondo. En pantallas anchas la pintura recorre de arriba abajo al desplazarse. */
.backdrop { background:var(--night); }
.backdrop::after { content:""; position:absolute; inset:0; background:radial-gradient(70% 55% at 50% 50%,rgba(10,13,40,.32),rgba(10,13,40,0) 75%),linear-gradient(180deg,rgba(10,13,40,.12),rgba(10,13,40,.2)); }
.sky-art { --pan:0; position:absolute; left:50%; top:0; width:max(100vw,56.28vh); aspect-ratio:941/1672; background:url(assets/fondo-cielo.jpg) center/100% 100% no-repeat; translate:-50% calc(var(--pan) * (100vh - 100%)); transform-origin:50% 30%; animation:sky-breathe 34s ease-in-out infinite alternate; will-change:translate,scale; }
@keyframes sky-breathe { from { scale:1; } to { scale:1.045; } }
.sky-swirl { position:absolute; left:-4.46%; top:-2.63%; width:27.2%; aspect-ratio:1; background:url(assets/remolino.png) center/100% 100% no-repeat; animation:spin 70s linear infinite; }
/* Un brillo cálido recorre las pinceladas en diagonal */
.sky-glint { position:absolute; inset:0; background:url(assets/fondo-cielo.jpg) center/100% 100% no-repeat; filter:brightness(1.75) saturate(1.25); opacity:.55; -webkit-mask:linear-gradient(115deg,transparent 42%,#000 50%,transparent 58%) 0 0/100% 300% no-repeat; mask:linear-gradient(115deg,transparent 42%,#000 50%,transparent 58%) 0 0/100% 300% no-repeat; animation:glint 16s ease-in-out infinite; }
@keyframes glint { 0% { -webkit-mask-position:0 100%; mask-position:0 100%; } 70%,100% { -webkit-mask-position:0 0; mask-position:0 0; } }
.sky-dots i { position:absolute; left:var(--x); top:var(--y); width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:radial-gradient(circle,#FFF4CF 0,rgba(246,231,184,.7) 30%,rgba(232,200,106,0) 70%); box-shadow:0 0 14px 4px rgba(232,200,106,.35); opacity:.2; animation:twinkle 4.5s var(--d) ease-in-out infinite; }
.backdrop .glow, .backdrop .orbits { display:none; }
/* Los textos sobre la pintura llevan una sombra suave para leerse sobre las pinceladas */
.cover-phrase, .details h1, .celebrate, .letter-inner, .venue-info, .venue-food-caption { text-shadow:0 1px 3px rgba(8,10,34,.75),0 2px 18px rgba(8,10,34,.85); }
.venue-button { text-shadow:none; }
.backdrop .stars { opacity:.35; }
.glow { position:absolute; border-radius:50%; animation:drift 22s ease-in-out infinite alternate; }
.glow-a { width:50vmax; height:50vmax; top:-22vmax; left:-16vmax; background:radial-gradient(circle,rgba(232,200,106,.2),rgba(232,200,106,0) 66%); }
.glow-b { width:56vmax; height:56vmax; bottom:-26vmax; right:-18vmax; background:radial-gradient(circle,rgba(110,125,215,.32),rgba(110,125,215,0) 66%); animation-duration:26s; }
.orbits { position:absolute; inset:-10%; width:120%; height:120%; }
.orbit { transform-box:view-box; transform-origin:50% 50%; }
.orbit ellipse { fill:none; stroke:rgba(246,231,184,.1); stroke-width:1.2; }
.orbit circle { fill:var(--butter); opacity:.8; }
.orbit-a { transform:rotate(-18deg); animation:spin 90s linear infinite; }
.orbit-b { transform:rotate(24deg); animation:spin 110s linear infinite reverse; }
.motes i { position:absolute; left:var(--x); bottom:-12px; width:4px; height:4px; border-radius:50%; background:var(--butter); box-shadow:0 0 10px rgba(232,200,106,.9); animation:float-up var(--t) var(--d) linear infinite; }

/* ---------- Portada ---------- */
/* El destello de la apertura se disuelve y deja ver la portada */
.invitation::before { content:""; position:fixed; inset:0; z-index:50; background:radial-gradient(circle at 50% 70%,#fff 0,var(--flash) 30%,var(--butter-soft) 100%); pointer-events:none; }
.invitation.is-visible::before { animation:fade-out 1.1s .05s ease forwards; }
.invitation.is-visible .reveal { animation:rise 1s calc(.35s + var(--d,0) * .11s) var(--ease) both; }
.cover { width:min(100% - 96px,1120px); margin:auto; padding:44px 0 48px; }
.cover-phrase { color:#fff; max-width:780px; margin:0 auto 16px; text-align:center; font-size:clamp(30px,3.7vw,46px); outline:none; }
.ornament { display:flex; align-items:center; justify-content:center; gap:12px; margin:0 auto 46px; }
.ornament span { width:64px; height:1px; background:linear-gradient(90deg,transparent,var(--butter)); }
.ornament span:last-child { transform:scaleX(-1); }
.ornament svg { width:12px; height:12px; fill:var(--butter); animation:spin 12s linear infinite; }
.editorial { display:grid; grid-template-columns:1fr 1fr; gap:110px; align-items:center; }

/* Instantánea */
.portrait-wrap { --tilt:-3.5deg; position:relative; width:min(100%,410px); justify-self:end; margin-right:30px; transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .6s var(--ease); }
.portrait { position:relative; margin:0; padding:16px 16px 0; background:linear-gradient(180deg,#FFFEFB,var(--cream)); border-radius:4px; box-shadow:var(--shadow),inset 0 0 0 1px rgba(0,0,0,.04); transform:rotate(var(--tilt)); }
.invitation.is-visible .portrait { animation:drop 1.3s .3s var(--ease) both; }
.photo { position:relative; height:470px; overflow:hidden; border-radius:2px; background:var(--night-2); }
.photo::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),inset 0 0 50px rgba(0,0,0,.18); }
.photo::before { content:""; position:absolute; z-index:1; top:0; bottom:0; width:40%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); transform:translateX(-130%) skewX(-18deg); pointer-events:none; }
.invitation.is-visible .photo::before { animation:sheen 1.6s 2.6s var(--ease) both; }
.invitation.is-visible .photo img, .invitation.is-visible .photo-placeholder { animation:develop 3.2s .9s ease-out both; }
.photo img, .photo-placeholder { width:100%; height:100%; }
.photo img { object-fit:cover; display:block; }
.photo-placeholder { position:relative; display:flex; align-items:center; justify-content:center; text-align:center; background:radial-gradient(90% 60% at 50% 100%,rgba(232,200,106,.35),rgba(232,200,106,0) 70%),radial-gradient(80% 60% at 30% 10%,rgba(141,152,214,.4),rgba(141,152,214,0) 70%),linear-gradient(170deg,#2B367F,#151A4A); }
.placeholder-frame { position:absolute; inset:18px; border:1px solid rgba(246,231,184,.28); }
.placeholder-word { position:relative; color:var(--butter-soft); font-family:var(--serif); font-size:44px; line-height:1.02; }
.placeholder-word i { font-weight:400; }
.placeholder-note { position:absolute; bottom:40px; text-transform:uppercase; font-size:9px; font-weight:600; letter-spacing:.26em; color:rgba(246,231,184,.75); }
.photo-caption { display:block; padding:20px 8px 24px; text-align:center; font-family:var(--serif); font-style:italic; font-size:25px; line-height:1; color:var(--iris-deep); }
.tape { --tape-t:rotate(-38deg); position:absolute; z-index:2; top:-12px; left:-26px; width:104px; height:30px; background:linear-gradient(180deg,rgba(246,231,184,.82),rgba(232,200,106,.72)); box-shadow:0 4px 10px -4px rgba(0,0,0,.35); transform:var(--tape-t); opacity:0; -webkit-mask:linear-gradient(90deg,transparent 0,#000 4px,#000 calc(100% - 4px),transparent 100%); mask:linear-gradient(90deg,transparent 0,#000 4px,#000 calc(100% - 4px),transparent 100%); }
.tape-b { --tape-t:rotate(32deg); top:auto; left:auto; bottom:40px; right:-34px; }
.invitation.is-visible .tape { animation:tape .5s 1.25s var(--ease) both; }
.invitation.is-visible .tape-b { animation-delay:1.4s; }

/* Timbre y matasellos */
.postal { position:absolute; z-index:3; top:-34px; right:-62px; width:118px; }
.stamp { display:block; width:100%; height:auto; overflow:visible; filter:drop-shadow(0 12px 16px rgba(0,0,0,.45)); transform:rotate(7deg); opacity:0; }
.invitation.is-visible .stamp { animation:stamp-in .8s 1.7s var(--ease) both; }
.stamp-paper { fill:var(--butter); }
.stamp-inner { fill:none; stroke:var(--night); stroke-width:1; opacity:.55; }
.stamp-globe { fill:none; stroke:var(--night); stroke-width:1.6; opacity:.85; }
.stamp-heart { fill:#D9534F; stroke:var(--night); stroke-width:1.2; }
.stamp-spark { fill:var(--night); opacity:.75; }
.stamp-lines { stroke:var(--night); stroke-width:1.4; stroke-linecap:round; opacity:.45; }
.postmark { position:absolute; left:-96px; top:70px; width:178px; height:auto; overflow:visible; transform:rotate(-14deg); opacity:0; mix-blend-mode:screen; }
.invitation.is-visible .postmark { animation:ink .6s 2.25s ease-out both; }
.postmark circle { fill:none; stroke:var(--butter-soft); stroke-width:1.5; }
.postmark text { font-family:var(--sans); font-size:7.6px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; fill:var(--butter-soft); }
.postmark-star { fill:var(--butter-soft); }
.postmark-waves { fill:none; stroke:var(--butter-soft); stroke-width:1.5; stroke-linecap:round; }

/* Datos */
.details { position:relative; text-align:center; max-width:500px; }
.cover-heart { width:44px; height:41px; margin-bottom:12px; rotate:12deg; }
.invitation.is-visible .cover-heart path { stroke-dashoffset:1; animation:draw 1.8s .8s var(--ease) forwards; }
h1 { font-family:var(--serif); font-weight:500; font-size:clamp(52px,6vw,88px); line-height:.96; letter-spacing:-.025em; color:#fff; margin:0 auto 22px; overflow-wrap:anywhere; text-wrap:balance; text-shadow:0 10px 40px rgba(232,200,106,.18); }
.invitation.is-visible h1 { animation:name-in 1.3s .6s var(--ease) both; }
.celebrate { margin:0 0 30px; }

/* Fecha y hora como boleto */
/* Boleto con proporción de boleto real: cuerpo largo, perforación y talón */
.ticket { --cut:70%; position:relative; filter:drop-shadow(0 24px 30px rgba(0,0,0,.5)); margin:0 auto 34px; width:min(100%,500px); }
.date-time { position:relative; overflow:hidden; display:grid; grid-template-columns:var(--cut) 0 1fr; align-items:stretch; min-height:186px; border-radius:12px; background:repeating-linear-gradient(135deg,rgba(45,56,120,.035) 0 1px,transparent 1px 7px),linear-gradient(180deg,#FFFEFB,var(--cream)); -webkit-mask:radial-gradient(circle at var(--cut) 0,transparent 12px,#000 12.5px) top/100% 51% no-repeat,radial-gradient(circle at var(--cut) 100%,transparent 12px,#000 12.5px) bottom/100% 51% no-repeat; mask:radial-gradient(circle at var(--cut) 0,transparent 12px,#000 12.5px) top/100% 51% no-repeat,radial-gradient(circle at var(--cut) 100%,transparent 12px,#000 12.5px) bottom/100% 51% no-repeat; }
.date-time::before { content:""; position:absolute; inset:8px; border:1px solid rgba(201,164,63,.45); border-radius:7px; pointer-events:none; z-index:1; }
.date-time::after { content:""; position:absolute; z-index:2; top:0; bottom:0; width:40%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent); transform:translateX(-130%) skewX(-18deg); pointer-events:none; }
.invitation.is-visible .date-time::after { animation:sheen 1.6s 2.2s var(--ease) both; }
.ticket-main { position:relative; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; }
/* Franja superior azul con la ruta dorada */
.ticket-band { display:flex; align-items:center; justify-content:center; height:52px; padding:0 22px; background:radial-gradient(120% 140% at 50% 0%,var(--night-3),var(--night-2) 55%,var(--night)); }
.ticket-route { width:100%; max-width:250px; height:26px; overflow:visible; }
.ticket-route circle { fill:var(--butter); }
.route-line { fill:none; stroke:var(--butter); stroke-width:1.3; stroke-dasharray:.02 .018; }
.invitation.is-visible .route-line { animation:route-in 1.4s 1.5s var(--ease) both; }
.route-heart { fill:#E5625D; transform-box:fill-box; transform-origin:center; }
.invitation.is-visible .route-heart { animation:heart-pop .7s 2.5s var(--ease) both; }
@keyframes route-in { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }
@keyframes heart-pop { 0% { opacity:0; transform:scale(0); } 70% { opacity:1; transform:scale(1.35); } 100% { opacity:1; transform:scale(1); } }
.ticket-cell { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.ticket-date { flex:1; padding:18px 18px 22px; }
.date-time .ticket-date p { font-size:36px; }
.ticket-stub { position:relative; display:flex; align-items:center; justify-content:center; padding:18px 30px 18px 12px; background:linear-gradient(180deg,rgba(232,200,106,.2),rgba(232,200,106,.36)); }
.ticket-time { gap:10px; }
.date-time p { margin:0; font-family:var(--serif); font-size:28px; font-weight:600; line-height:1.05; color:var(--iris-deep); font-variant-numeric:lining-nums; white-space:nowrap; }
.dt-icon { width:20px; height:20px; flex:none; fill:none; stroke:var(--butter-deep); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
/* Código de barras vertical en el borde del talón */
.barcode { position:absolute; right:16px; top:50%; width:128px; height:15px; fill:var(--iris-deep); opacity:.7; transform:translate(50%,-50%) rotate(90deg); transform-origin:center; }
/* Detalles de boleto real */
.band-star { width:9px; height:9px; flex:none; fill:var(--butter); opacity:.8; }
.ticket-band { gap:10px; }
.guilloche { position:absolute; left:0; right:0; top:52px; bottom:0; width:100%; height:calc(100% - 52px); pointer-events:none; }
.guilloche path { fill:none; stroke:rgba(201,164,63,.16); stroke-width:.8; }
.ticket-date { position:relative; z-index:1; }
.ticket-label { display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-size:9px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--butter-deep); }
.ticket-label .dt-icon { width:14px; height:14px; }
/* Sello metálico con brillo giratorio */
.foil { position:absolute; z-index:1; right:16px; top:64px; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(from var(--foil-a,0deg),#F6E7B8,#C9A43F,#FFF6D8,#B8902E,#F6E7B8,#D9B85A,#F6E7B8); box-shadow:inset 0 0 0 2px rgba(255,255,255,.5),inset 0 0 0 4px rgba(150,115,20,.35),0 3px 8px rgba(120,90,10,.3); animation:foil 6s linear infinite; }
.foil svg { width:18px; height:17px; fill:none; stroke:var(--night); stroke-width:2.6; stroke-linejoin:round; opacity:.75; }
@property --foil-a { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes foil { to { --foil-a:360deg; } }
/* Microtexto de seguridad */
.microtext { position:absolute; z-index:1; left:14px; right:66px; bottom:11px; overflow:hidden; white-space:nowrap; font-family:var(--sans); font-size:6px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(45,56,120,.4); }
.ticket-stub { flex-direction:column; }
.admit { position:absolute; top:16px; left:12px; right:30px; text-align:center; font-family:var(--sans); font-size:8px; font-weight:800; letter-spacing:.28em; text-transform:uppercase; color:var(--iris-deep); opacity:.65; }
.admit::after { content:""; display:block; height:1px; margin:6px 8px 0; background:repeating-linear-gradient(90deg,rgba(45,56,120,.35) 0 3px,transparent 3px 6px); }
.stub-star { position:absolute; bottom:16px; left:calc(50% - 15px); width:10px; height:10px; fill:var(--butter-deep); }
.date-dot { position:relative; z-index:1; width:0; margin:18px 0; border-left:2px dotted rgba(45,56,120,.4); }

.share-button { width:100%; max-width:380px; justify-content:space-between; }
.share-button:hover span { transform:translateY(3px); }
.next-message { min-height:18px; font-family:var(--serif); font-style:italic; font-size:18px; line-height:1.4; color:var(--muted); margin:14px 0 0; }
.next-message:not(:empty) { animation:rise .7s var(--ease) both; }

/* ---------- Carta: una pausa emotiva ---------- */
.letter { position:relative; min-height:100svh; display:flex; align-items:center; padding:clamp(110px,16vh,180px) 32px clamp(130px,18vh,200px); outline:none; }
.letter::before { content:""; position:absolute; left:50%; top:50%; width:min(900px,100%); height:min(700px,90vh); transform:translate(-50%,-50%); background:radial-gradient(closest-side,rgba(232,200,106,.08),rgba(232,200,106,0)); pointer-events:none; }
.letter-inner { position:relative; width:min(100%,33rem); margin:0 auto; text-align:left; }
.letter-heart { display:block; width:30px; height:28px; margin:0 0 30px; rotate:-8deg; stroke-width:1.2; }
.letter-title { margin:0 0 30px; font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(42px,5.6vw,68px); line-height:1.02; letter-spacing:-.015em; color:#fff; text-wrap:balance; }
.letter-rule { display:block; width:64px; height:1px; margin:0 0 36px; background:var(--butter); transform-origin:left center; }
.letter-body p { margin:0 0 1.05em; font-family:var(--serif); font-weight:500; font-size:clamp(20px,1.75vw,23px); line-height:1.62; color:rgba(244,245,253,.86); text-wrap:pretty; }
.letter-body p:last-child { margin-bottom:0; color:#fff; }
.letter-signature { display:flex; flex-direction:column; gap:4px; margin:48px 0 0; }
.letter-closing { font-family:var(--serif); font-style:italic; font-size:21px; line-height:1.3; color:var(--muted); }
.letter-name { font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(42px,4.6vw,56px); line-height:1.05; color:var(--butter-soft); }
@media(prefers-reduced-motion:no-preference) {
  .letter .fade-up { opacity:0; transform:translateY(26px); transition:opacity 1.1s var(--ease) calc(var(--i,0) * .16s),transform 1.3s var(--ease) calc(var(--i,0) * .16s); }
  .letter.is-in .fade-up { opacity:1; transform:none; }
  .letter .letter-rule { transform:scaleX(0); transition:transform 1.2s var(--ease) .5s,opacity .6s ease .5s; }
  .letter.is-in .letter-rule { transform:scaleX(1); }
  .letter .letter-heart path { stroke-dashoffset:1; }
  .letter.is-in .letter-heart path { animation:draw 1.8s .15s var(--ease) forwards; }
}

/* ---------- Lugar: Doña Vero ---------- */
.venue { position:relative; padding:clamp(40px,8vh,96px) 0 clamp(150px,22vh,230px); }
.venue::before { content:""; position:absolute; left:-10vw; top:0; width:min(900px,90vw); height:min(900px,110%); background:radial-gradient(closest-side,rgba(110,125,215,.14),rgba(110,125,215,0)); pointer-events:none; }
/* Escritorio: fotografías a la izquierda, información a la derecha */
.venue-grid { position:relative; width:min(100% - 96px,1120px); margin:0 auto; display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,1fr); grid-template-areas:"main info" "food info"; column-gap:clamp(56px,8vw,120px); row-gap:56px; align-items:center; }
.venue-main { grid-area:main; position:relative; align-self:end; }
.venue-info { grid-area:info; align-self:center; text-align:left; }
.venue-food { grid-area:food; align-self:start; margin:0; }

/* Fotografías con borde fino y espacio provisional */
.venue-shot { position:relative; overflow:hidden; border-radius:2px; background:var(--night-2); }
.venue-shot::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(246,231,184,.16),inset 0 0 60px rgba(0,0,0,.22); }
.venue-shot img { position:absolute; inset:0; z-index:1; display:block; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .9s ease,transform 2.4s var(--ease); }
.venue-shot.has-photo img { opacity:1; }
.venue-shot-main { z-index:1; aspect-ratio:5/4; box-shadow:var(--shadow); }
.venue-frame { position:absolute; inset:-16px 16px 16px -16px; border:1px solid rgba(246,231,184,.32); border-radius:2px; pointer-events:none; }
.venue-frame-heart { position:absolute; z-index:2; top:-28px; left:-28px; width:24px; height:23px; fill:var(--night); stroke-width:3.4; rotate:-10deg; }
.venue-ph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; text-align:center; background:radial-gradient(90% 70% at 50% 115%,rgba(232,200,106,.2),rgba(232,200,106,0) 70%),radial-gradient(80% 60% at 15% 0%,rgba(141,152,214,.2),rgba(141,152,214,0) 70%),repeating-linear-gradient(135deg,rgba(246,231,184,.035) 0 1px,transparent 1px 9px),linear-gradient(160deg,#222B6C,#121646); transition:transform 2.4s var(--ease); }
.venue-ph-frame { position:absolute; inset:14px; border:1px solid rgba(246,231,184,.24); pointer-events:none; }
.venue-ph-name { font-family:var(--serif); font-style:italic; font-size:clamp(40px,4.4vw,58px); line-height:1; color:var(--butter-soft); }
.venue-ph-note { font-size:11px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:rgba(246,231,184,.72); }
.venue-ph-heart { width:30px; height:28px; stroke-width:2.6; }

/* Información sin tarjetas: líneas finas y aire */
.venue-eyebrow { display:flex; align-items:center; gap:12px; margin:0 0 22px; font-size:11px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--butter-soft); }
.venue-eyebrow .heart { width:16px; height:15px; flex:none; stroke-width:4.5; }
.venue-eyebrow::after { content:""; width:40px; height:1px; background:linear-gradient(90deg,var(--butter),transparent); }
.venue-title { margin:0 0 24px; font-family:var(--serif); font-weight:500; font-size:clamp(46px,5.2vw,72px); line-height:1; letter-spacing:-.02em; color:#fff; text-wrap:balance; }
.venue-title em { font-style:italic; font-weight:400; color:var(--butter-soft); }
.venue-nowrap { white-space:nowrap; }
.venue-description { max-width:30rem; margin:0 0 38px; font-family:var(--serif); font-weight:500; font-size:clamp(20px,1.7vw,22px); line-height:1.55; color:rgba(244,245,253,.86); text-wrap:pretty; }
.venue-facts { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); margin:0 0 32px; border-bottom:1px solid var(--line); }
.venue-fact { min-width:0; padding:18px 0 17px; border-top:1px solid var(--line); }
.venue-fact:nth-child(2) { padding-left:28px; background:linear-gradient(var(--line),var(--line)) left 18px / 1px calc(100% - 36px) no-repeat; }
.venue-fact-wide { grid-column:1 / -1; }
.venue-fact dt { display:flex; align-items:center; gap:9px; margin:0 0 8px; font-size:11px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--butter); }
.venue-icon { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.venue-fact dd { margin:0; font-family:var(--serif); font-weight:500; font-size:clamp(23px,2.1vw,27px); line-height:1.2; color:#fff; font-variant-numeric:lining-nums; overflow-wrap:break-word; text-wrap:balance; }
.venue-note { display:flex; align-items:flex-start; gap:14px; max-width:29rem; margin:0 0 36px; font-family:var(--serif); font-style:italic; font-size:21px; line-height:1.45; color:var(--butter-soft); }
.venue-note span { text-wrap:pretty; }
.venue-note .heart { width:18px; height:17px; flex:none; margin-top:.3em; stroke-width:4; }
.venue-button { padding-left:32px; text-decoration:none; }
.venue-button span svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.venue-button:hover span { transform:translate(2px,-2px); }
a.button:focus-visible { outline:2px solid var(--butter); outline-offset:5px; }

/* Cocina: dos fotografías pequeñas, los tacos al frente */
.venue-food-caption { display:flex; align-items:center; gap:12px; margin:0 0 18px; font-family:var(--serif); font-style:italic; font-size:20px; line-height:1.3; color:var(--muted); }
.venue-food-caption .heart { width:16px; height:15px; flex:none; stroke-width:4.5; }
.venue-food-caption::after { content:""; flex:1; min-width:24px; height:1px; background:linear-gradient(90deg,var(--line),transparent); }
.venue-food-shots { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:16px; align-items:end; }
.venue-shot-tacos { aspect-ratio:1; box-shadow:0 30px 50px -30px rgba(0,0,0,.7); }
.venue-shot-kitchen { aspect-ratio:4/5; box-shadow:0 30px 50px -30px rgba(0,0,0,.7); }
.venue-food .venue-ph { gap:12px; padding:16px; }
.venue-food .venue-ph-frame { inset:10px; }

@media(prefers-reduced-motion:no-preference) {
  .venue-info > *, .venue-food > * { opacity:0; transform:translateY(24px); transition:opacity 1s var(--ease) calc(var(--i,0) * .12s),transform 1.2s var(--ease) calc(var(--i,0) * .12s); }
  .venue-info.is-in > *, .venue-food.is-in > * { opacity:1; transform:none; }
  /* Las fotografías se revelan de abajo hacia arriba mientras la imagen se asienta */
  .venue-shot { clip-path:inset(100% 0 0 0); transition:clip-path 1.5s var(--ease-io) .1s; }
  .venue-food .venue-shot { transition-delay:.3s; }
  .venue-food .venue-shot-kitchen { transition-delay:.48s; }
  .is-in .venue-shot { clip-path:inset(-100px); }
  .venue-shot img, .venue-shot .venue-ph { transform:scale(1.12); }
  .is-in .venue-shot img, .is-in .venue-shot .venue-ph { transform:none; }
  .venue-frame { opacity:0; transform:translate(12px,12px); transition:opacity 1.2s ease .6s,transform 1.4s var(--ease) .6s; }
  .is-in .venue-frame { opacity:1; transform:none; }
  .venue-frame-heart path { stroke-dashoffset:1; }
  .is-in .venue-frame-heart path { animation:draw 1.6s 1.1s var(--ease) forwards; }
}

/* ---------- Control de música ---------- */
.music-control { position:fixed; bottom:max(18px,env(safe-area-inset-bottom)); right:20px; z-index:20; display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 18px 10px 14px; border:1px solid rgba(246,231,184,.25); border-radius:999px; background:rgba(15,19,54,.6); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 14px 30px -18px rgba(0,0,0,.7); color:var(--butter-soft); font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; transition:transform .3s var(--ease); }
.music-control:hover { transform:translateY(-2px); }
.music-icon { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.5; }
.eq { display:none; align-items:flex-end; gap:2px; width:16px; height:14px; }
.eq i { flex:1; height:100%; border-radius:2px; background:var(--butter); transform-origin:bottom; animation:eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay:-.4s; } .eq i:nth-child(3) { animation-delay:-.7s; } .eq i:nth-child(4) { animation-delay:-.2s; }
@keyframes eq { 0%,100% { transform:scaleY(.3); } 50% { transform:scaleY(1); } }
.music-control[aria-pressed="true"] .music-icon { display:none; }
.music-control[aria-pressed="true"] .eq { display:flex; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.noscript { text-align:center; padding:16px; }

/* ---------- Adaptación ---------- */
@media(min-width:850px) { .cover { min-height:100svh; display:flex; flex-direction:column; justify-content:center; } }
@media(max-width:849px) {
  .letter { min-height:auto; padding:96px 24px 128px; }
  .letter-heart { margin-bottom:24px; }
  .letter-title { font-size:clamp(38px,10.5vw,52px); margin-bottom:24px; }
  .letter-rule { margin-bottom:28px; }
  .letter-body p { font-size:20px; line-height:1.6; }
  .letter-signature { margin-top:38px; }
  .letter-closing { font-size:20px; }
  .letter-name { font-size:44px; }
  /* Celular: fotografía principal, datos del lugar y después la cocina */
  .venue { padding:36px 0 128px; }
  .venue-grid { width:min(100% - 48px,520px); grid-template-columns:minmax(0,1fr); grid-template-areas:"main" "info" "food"; row-gap:48px; }
  .venue-main { align-self:auto; }
  .venue-shot-main { aspect-ratio:1; }
  .venue-frame { inset:-12px 12px 12px -12px; }
  .venue-frame-heart { top:-22px; left:-22px; width:20px; height:19px; stroke-width:3.8; }
  .venue-title { font-size:clamp(40px,11vw,54px); margin-bottom:20px; }
  .venue-description { font-size:20px; margin-bottom:30px; }
  .venue-fact { padding:16px 0 15px; }
  .venue-fact:nth-child(2) { padding-left:20px; background-position:left 16px; background-size:1px calc(100% - 32px); }
  .venue-fact dd { font-size:23px; }
  .venue-note { font-size:20px; margin-bottom:30px; }
  .venue-button { width:100%; justify-content:space-between; }
  .venue-food-caption { align-items:flex-start; text-wrap:balance; }
  .venue-food-caption .heart { margin-top:.3em; }
  .venue-food-caption::after { display:none; }
  .venue-food-shots { gap:12px; }
  .entry { padding:32px 20px; }
  .meeting { width:min(100%,340px); margin-bottom:10px; }
  .entry-phrase { font-size:clamp(31px,9vw,44px); margin-bottom:26px; }
  .entry .eyebrow { margin-bottom:28px; }
  .eyebrow, .celebrate { font-size:9.5px; letter-spacing:.28em; gap:10px; }
  .eyebrow::before, .eyebrow::after, .celebrate::before, .celebrate::after { width:22px; }

  .cover { width:min(100% - 40px,460px); padding:24px 0 88px; }
  .cover-phrase { font-size:clamp(25px,7vw,32px); margin-bottom:10px; }
  .ornament { margin-bottom:30px; }
  .ornament span { width:44px; }
  .editorial { display:flex; flex-direction:column; gap:34px; }
  .portrait-wrap { --tilt:-3deg; width:min(80%,330px); align-self:center; margin:0 34px 0 0; transform:none; }
  .portrait { padding:11px 11px 0; }
  .photo { height:clamp(210px,34svh,330px); }
  .placeholder-frame { inset:12px; }
  .placeholder-word { font-size:32px; }
  .placeholder-note { bottom:24px; font-size:8px; }
  .photo-caption { font-size:20px; padding:14px 6px 17px; }
  .tape { width:78px; height:24px; left:-20px; top:-9px; }
  .tape-b { right:-24px; bottom:30px; left:auto; top:auto; }
  .postal { width:84px; top:-26px; right:-48px; }
  .postmark { width:130px; left:-70px; top:52px; }
  .details { width:100%; max-width:none; }
  .cover-heart { display:none; }
  h1 { font-size:clamp(42px,11.5vw,58px); max-width:calc(100% - 24px); margin-bottom:14px; }
  .celebrate { margin:0 0 20px; }
  .ticket { --cut:68%; margin-bottom:20px; width:100%; }
  .date-time { min-height:150px; }
  .ticket-band { height:40px; padding:0 14px; }
  .ticket-route { max-width:190px; height:20px; }
  .ticket-date { padding:12px 10px 16px; gap:6px; }
  .ticket-stub { padding:12px 22px 12px 8px; }
  .date-time p { font-size:22px; }
  .date-time .ticket-date p { font-size:27px; }
  .barcode { width:96px; height:11px; right:12px; }
  .guilloche { top:40px; height:calc(100% - 40px); }
  .foil { width:28px; height:28px; right:10px; top:48px; }
  .foil svg { width:13px; height:12px; }
  .microtext { left:10px; right:46px; bottom:8px; font-size:5px; }
  .admit { top:12px; font-size:7px; letter-spacing:.2em; right:24px; left:6px; }
  .stub-star { bottom:11px; left:calc(50% - 12px); }
  .dt-icon { width:17px; height:17px; }
  .share-button { max-width:none; }
  .music-control { right:12px; bottom:max(12px,env(safe-area-inset-bottom)); width:46px; height:46px; padding:0; justify-content:center; }
  .music-control #music-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
}
@media(max-width:849px) and (max-height:700px) {
  .meeting { width:min(100%,260px); }
  .cover { padding-top:16px; }
  .cover-phrase { font-size:23px; margin-bottom:6px; }
  .ornament { margin-bottom:22px; }
  .editorial { gap:30px; }
  .portrait-wrap { width:min(68%,280px); }
  .photo { height:clamp(150px,30svh,200px); }
  .placeholder-word { font-size:26px; }
  .photo-caption { font-size:17px; padding:10px 6px 12px; }
  .postal { width:70px; }
  .postmark { width:110px; left:-58px; top:42px; }
  h1 { font-size:38px; }
  .celebrate { margin-bottom:12px; }
  .ticket { margin-bottom:14px; }
  .date-time { min-height:118px; }
  .ticket-band { height:32px; }
  .ticket-route { height:16px; max-width:150px; }
  .ticket-date { padding:8px 8px 12px; gap:4px; }
  .date-time .ticket-date p { font-size:23px; }
  .date-time p { font-size:19px; }
  .barcode { width:76px; }
  .foil, .microtext, .stub-star, .ticket-label { display:none; }
  .admit { top:9px; }
}
@media(max-width:360px) {
  .date-time p { font-size:18px; }
  .date-time .ticket-date p { font-size:22px; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; }
  .route, .meet-heart, .invitation .cover-heart path { stroke-dashoffset:0!important; }
  .traveler { display:none; }
  .invitation::before { display:none; }
  .tape, .stamp, .postmark { opacity:1; }
  .postmark { opacity:.85; }
  .portrait-wrap { transform:none!important; }
  .button:hover, .music-control:hover { transform:none; }
}