/* =================================================================
   Invitación Digital — Fanny & Cristóbal
   Scroll vertical · tarjetas (estilo TikTok) · paleta física
   ================================================================= */

/* ---------- Fonts ---------- */
@font-face{font-family:"Glacial Indifference";src:url("assets/fonts/GlacialIndifference-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Glacial Indifference";src:url("assets/fonts/GlacialIndifference-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap;}
/* EyesomeScript real (opcional): pon assets/fonts/EyesomeScript.woff2 y descomenta:
@font-face{font-family:"EyesomeScript";src:url("assets/fonts/EyesomeScript.woff2") format("woff2");font-display:swap;} */

/* ---------- Tokens ---------- */
:root{
  --surface:#EFE5E5;          /* fondo detrás de las tarjetas */
  --card:#FBF6F6;             /* tarjeta clara */
  --card-2:#F5ECEC;
  --burgundy:#7A2330;
  --burgundy-deep:#5E1A24;
  --gold:#C9A86A;
  --gold-deep:#A9854B;
  --ink:#3B3032;
  --muted:#9A8689;
  --cream:#F4E7E3;            /* texto sobre tarjeta oscura */
  --serif:"EB Garamond",Georgia,serif;
  --sans:"Glacial Indifference","Montserrat",system-ui,sans-serif;
  --rosario:"Rosario","Glacial Indifference",sans-serif;
  --script:"Great Vibes","EyesomeScript",cursive;
  --wrap:480px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
html,body{margin:0;}
/* EFECTOS DE FONDO (NUBES FLOTANTES REALES) */
.bg-clouds {
  position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
  background: linear-gradient(120deg, #FBF6F6, #EFE5E5, #F5ECEC, #FBF6F6);
  background-size: 300% 300%;
  animation: bg-drift 24s ease infinite;
}
.cloud-shape {
  position: absolute; background: rgba(255, 255, 255, 0.95);
  width: 300px; height: 100px; border-radius: 100px;
  filter: blur(8px); animation: cloud-drift 40s linear infinite;
  box-shadow: 0 15px 35px rgba(210,190,190,0.5), inset 0 -15px 30px rgba(235,220,220,1);
}
.cloud-shape::before, .cloud-shape::after {
  content: ""; position: absolute; background: inherit; border-radius: 50%;
}
.cloud-shape::before { width: 140px; height: 140px; top: -60px; left: 45px; }
.cloud-shape::after { width: 100px; height: 100px; top: -40px; right: 40px; }

.cl1 { top: 10%; left: -350px; animation-duration: 45s; transform: scale(1.3); }
.cl2 { top: 40%; left: -350px; animation-duration: 55s; animation-delay: -15s; transform: scale(0.9); opacity: 0.8; }
.cl3 { top: 70%; left: -350px; animation-duration: 38s; animation-delay: -30s; transform: scale(1.5); }
.cl4 { top: 25%; left: -350px; animation-duration: 65s; animation-delay: -45s; transform: scale(0.85); opacity: 0.9; }
.cl5 { top: 55%; left: -350px; animation-duration: 42s; animation-delay: -8s; transform: scale(1.1); }
.cl6 { top: 85%; left: -350px; animation-duration: 50s; animation-delay: -22s; transform: scale(1.4); opacity: 0.7; }
.cl7 { top: -5%; left: -350px; animation-duration: 60s; animation-delay: -35s; transform: scale(1.0); }

@keyframes cloud-drift {
  0% { left: -350px; }
  100% { left: 110vw; }
}

body{
  font-family:var(--serif);color:var(--ink);
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
}
body.locked{overflow:hidden;height:100%;position:fixed;width:100%;}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}

.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;z-index:0;border-radius:inherit;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}

/* =================================================================
   SOBRE
   ================================================================= */
#envelope-screen{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 30%,#FBF6F6 0%,#F4ECEC 55%,#EBDFE0 100%);transition:opacity .9s var(--ease);padding:24px;text-align:center;overflow:hidden;}
#envelope-screen.hidden{opacity:0;pointer-events:none;}
.env-guest{font-family:var(--sans);font-size:.75rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:28px;text-shadow:0 1px 2px rgba(255,255,255,0.8);}
.env-guest b{color:var(--burgundy);font-weight:700;letter-spacing:.2em;}
.envelope{position:relative;width:min(78vw,300px);aspect-ratio:3/2;filter:drop-shadow(0 22px 38px rgba(94,26,36,.18));cursor:pointer;transition:transform .5s var(--ease), filter .5s var(--ease);}
.envelope:hover{transform:scale(1.025);filter:drop-shadow(0 28px 46px rgba(94,26,36,.24));}
.envelope:active{transform:scale(.985);}
.env-back{position:absolute;inset:0;border-radius:8px;background:linear-gradient(160deg,#FFF8F8,#F7EDED);border:1px solid rgba(201,168,106,.28);box-shadow:inset 0 0 15px rgba(201,168,106,.05);z-index:1;}
.env-card{position:absolute;left:5%;right:5%;top:8%;bottom:8%;background:#FFFDFD;border:1px solid #EAE0E1;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.04);z-index:2;display:flex;align-items:center;justify-content:center;transform:translateY(68px);opacity:0;transition:transform 1.0s var(--ease), opacity 0.6s ease;}
.env-card-content{display:flex;flex-direction:column;align-items:center;gap:3px;}
.env-card-monogram{font-family:var(--serif);font-size:1.6rem;color:var(--burgundy);font-weight:500;line-height:1;}
.env-card-title{font-family:var(--sans);font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;}
.env-pocket{position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(180deg,#FFF5F5,#F5EAEB);border:1px solid rgba(201,168,106,.28);border-top:0;border-radius:0 0 8px 8px;clip-path:polygon(0 38%,50% 100%,100% 38%,100% 100%,0 100%);z-index:3;box-shadow:inset 0 10px 20px rgba(0, 0, 0, 0.02);}
.env-flap{position:absolute;left:0;right:0;top:0;height:64%;background:linear-gradient(180deg,#FFFDFD,#FAF2F3);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;transition:transform .8s var(--ease),opacity .4s ease .5s;z-index:4;backface-visibility:hidden;border-bottom:1.5px solid rgba(201,168,106,.38);filter:drop-shadow(0 2px 4px rgba(94, 26, 36, 0.06));}
.seal{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;z-index:5;background:radial-gradient(circle at 35% 30%,#F5D79A 0%,#C9A86A 35%,#A9854B 70%,#7A5B2C 100%);box-shadow:0 6px 16px rgba(94, 26, 36, 0.25), inset 0 2px 4px rgba(255, 255, 255, 0.4), inset 0 -3px 6px rgba(0, 0, 0, 0.3);display:flex;align-items:center;justify-content:center;transition:transform .6s var(--ease),opacity .5s ease;border:1px solid rgba(201,168,106,.5);animation:pulse-gold 2s infinite;}
.seal::before{content:"";position:absolute;inset:5px;border-radius:50%;border:1.5px solid rgba(94, 26, 36, 0.25);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);}
.seal svg{width:34px;height:34px;color:var(--burgundy-deep);opacity:.85;}
.env-hint{margin-top:30px;font-family:var(--sans);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep);animation:breathe 2.4s ease-in-out infinite;}
.env-hint .tap-ico{display:inline-block;margin-right:.5em;transform:translateY(2px);}
@keyframes breathe{0%,100%{opacity:.5}50%{opacity:1}}
#envelope-screen.opening .env-flap{transform:rotateX(178deg);opacity:0;}
#envelope-screen.opening .seal{transform:translate(-50%,-50%) scale(1.5);opacity:0;}
#envelope-screen.opening .env-card{transform:translateY(-55%) scale(1.02);opacity:1;box-shadow:0 12px 28px rgba(94,26,36,.12);}
#envelope-screen.opening .envelope{transform:translateY(12px) scale(1.025);}
#envelope-screen.opening .env-hint{opacity:0;}

/* Sparkles styling & animations */
.sparkle{position:absolute;color:rgba(201, 168, 106, 0.45);font-size:1.2rem;pointer-events:none;z-index:1;animation:float-sparkle 8s ease-in-out infinite alternate;}
.sparkle.s1{top:15%;left:10%;animation-delay:0s;font-size:1.5rem;}
.sparkle.s2{top:25%;right:12%;animation-duration:10s;animation-delay:1s;}
.sparkle.s3{bottom:20%;left:15%;animation-duration:9s;animation-delay:2s;}
.sparkle.s4{bottom:15%;right:18%;animation-duration:7s;animation-delay:0.5s;font-size:0.9rem;}
.sparkle.s5{top:60%;left:8%;animation-duration:11s;animation-delay:3s;}
.sparkle.s6{top:75%;right:8%;animation-duration:8s;animation-delay:1.5s;}

@keyframes float-sparkle {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-25px) rotate(180deg) scale(1.15);
    opacity: 0.3;
  }
}

/* =================================================================
   TARJETAS
   ================================================================= */
.invite{max-width:var(--wrap);margin:0 auto;padding:18px 14px 48px;}
.card{
  position:relative;overflow:hidden;isolation:isolate;transform:translateZ(0);text-align:center;
  background:linear-gradient(135deg, #FDFBFB 0%, #F5ECEC 50%, #FDFBFB 100%);
  border:1px solid rgba(201,168,106,.35);border-radius:30px;
  box-shadow:0 16px 34px rgba(94,26,36,.12);
  padding:95px 26px;margin-bottom:18px;
}
.card::before{
  content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(to right, transparent, rgba(255,255,255,0.9), transparent);
  transform:skewX(-25deg);animation:sweep-glare 8s infinite ease-in-out;
  z-index:1;pointer-events:none;mix-blend-mode:overlay;
}
.card.arch{border-radius:210px 210px 30px 30px;padding-top:140px;}
.card.dark{background:linear-gradient(165deg,var(--burgundy) 0%,var(--burgundy-deep) 100%);border-color:rgba(201,168,106,.45);color:var(--cream);box-shadow:0 16px 34px rgba(94,26,36,.26);}
.card > .content{position:relative;z-index:2;}

/* garlandas (clusters de esquina, PNG transparente) */
.gar{position:absolute;z-index:1;pointer-events:none;opacity:.96;}
.gar.tl{top:0;left:0;width:50%;scale:1 -1;}
.gar.tr{top:0;right:0;width:50%;scale:1 -1;}
.gar.bl{bottom:0;left:0;width:46%;opacity:.9;}
.gar.br{bottom:0;right:0;width:46%;opacity:.9;}

/* Animation for hero card corner flowers */
.hero .gar {
  opacity: 0;
  transition: transform 1.8s var(--ease) 0.2s, opacity 1.8s var(--ease) 0.2s;
}
.hero .gar.tl { transform: translate(-25px, -25px); }
.hero .gar.tr { transform: translate(25px, -25px); }
.hero .gar.bl { transform: translate(-25px, 25px); transition-delay: 0.4s; }
.hero .gar.br { transform: translate(25px, 25px); transition-delay: 0.4s; }

.hero.in .gar {
  opacity: 0.96;
  transform: translate(0, 0);
}
.hero.in .gar.bl, .hero.in .gar.br {
  opacity: 0.9;
}
.hero.in .gar.tl { animation: sway-tl 5s ease-in-out 1.8s infinite alternate; }
.hero.in .gar.tr { animation: sway-tr 5s ease-in-out 1.8s infinite alternate; }
.hero.in .gar.bl { animation: sway-bl 5s ease-in-out 2.2s infinite alternate; }
.hero.in .gar.br { animation: sway-br 5s ease-in-out 2.2s infinite alternate; }

/* Animation for non-hero card flowers on scroll */
.card:not(.hero) .gar {
  opacity: 0;
  transition: opacity 1.8s var(--ease) 0.3s;
}
.card:not(.hero).in .gar {
  opacity: 0.96;
}
.card:not(.hero).in .gar.bl, .card:not(.hero).in .gar.br {
  opacity: 0.9;
}
.card:not(.hero).in .gar.tl { animation: sway-tl 5s ease-in-out 0s infinite alternate; }
.card:not(.hero).in .gar.tr { animation: sway-tr 5s ease-in-out 0.5s infinite alternate; }
.card:not(.hero).in .gar.bl { animation: sway-bl 5s ease-in-out 1s infinite alternate; }
.card:not(.hero).in .gar.br { animation: sway-br 5s ease-in-out 1.5s infinite alternate; }

/* tipografía compartida */
.eyebrow{font-family:var(--sans);font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);}
.label{font-family:var(--sans);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep);}
.section-title{font-family:var(--serif);font-weight:500;letter-spacing:.18em;text-transform:uppercase;font-size:clamp(1.55rem,7vw,2.1rem);color:var(--burgundy);line-height:1.14;margin:.25em 0;}
.divider-orn{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px 0;color:var(--gold);font-size:.85rem;}
.divider-orn::before,.divider-orn::after{content:"";height:1px;width:46px;background:linear-gradient(90deg,transparent,var(--gold));}
.divider-orn::after{background:linear-gradient(90deg,var(--gold),transparent);}
.card.dark .section-title{color:#fff;}
.card.dark .label{color:var(--gold);}
.card.dark .eyebrow{color:#D9C2C0;}
.card.dark .divider-orn{color:var(--gold);}

/* reveal */
.reveal{opacity:0;transform:translateY(35px) scale(0.97);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0) scale(1);}
.reveal.d1{transition-delay:.10s;}.reveal.d2{transition-delay:.20s;}.reveal.d3{transition-delay:.30s;}.reveal.d4{transition-delay:.40s;}

/* =================================================================
   HERO
   ================================================================= */
.hero{padding-bottom:78px;}
.arch-title-svg{width:min(92%,340px);margin:48px auto -65px;display:block;overflow:visible;}
.arch-title-svg text{font-family:var(--sans);font-weight:600;font-size:20px;letter-spacing:3px;fill:var(--ink);opacity:1;transition:letter-spacing 1.5s var(--ease);}
.hero.in .arch-title-svg text{letter-spacing:5.5px;}
.nos{font-family:var(--serif);font-weight:400;letter-spacing:.05em;text-transform:uppercase;font-size:clamp(2.0rem,9vw,2.7rem);line-height:1.05;color:var(--ink);margin:0 auto 0;text-align:center;}

/* Staggered entrance animations for Hero elements */
.hero .content > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.hero.in .content > * {
  opacity: 1;
  transform: translateY(0);
}
.hero.in .arch-title-svg {
  transition-delay: 0.1s;
}
.hero.in .nos {
  transition-delay: 0.3s;
  animation: gentle-scale 1.5s var(--ease) 0.3s both;
}
.hero.in .acuarela {
  transition-delay: 0.5s;
  animation: watercolor-fade 1.8s var(--ease) 0.5s both, float-slow 6s ease-in-out 2.3s infinite alternate;
}
.hero.in .month {
  transition-delay: 0.7s;
}
.hero.in .date-row {
  transition-delay: 0.9s;
}
.hero.in .year {
  transition-delay: 1.0s;
}
.hero.in .venue {
  transition-delay: 1.1s;
}
.hero.in .personal {
  transition-delay: 1.2s;
}

@keyframes gentle-scale {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes watercolor-fade {
  0% {
    opacity: 0;
    transform: scale(0.96) translateY(15px);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

@keyframes float-slow {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  100% {
    transform: translateY(-12px) scale(1.04) rotate(1.5deg);
  }
}
.acuarela{width:90%;max-width:360px;margin:25px auto 25px;}
.month{font-family:var(--sans);letter-spacing:.34em;text-transform:uppercase;font-size:.82rem;color:var(--ink);margin-bottom:12px;}
.date-row{display:flex;align-items:center;justify-content:center;gap:16px;}
.date-side{font-family:var(--serif);font-style:italic;font-size:1.02rem;color:var(--ink);white-space:nowrap;}
.date-rules{display:flex;flex-direction:column;align-items:center;gap:7px;}
.date-rules .ln{height:1px;width:72px;background:var(--ink);opacity:.5;}
.date-big{font-family:var(--serif);font-size:clamp(2.8rem,16vw,3.5rem);font-weight:500;line-height:1;color:var(--ink);}
.year{font-family:var(--serif);letter-spacing:.3em;font-size:.92rem;color:var(--ink);margin-top:2px;}
.venue{font-family:var(--serif);font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:.96rem;line-height:1.75;color:var(--ink);margin-top:12px;}
.personal{margin-top:8px;font-family:var(--serif);font-style:italic;color:var(--muted);font-size:1rem;}
.personal b{font-style:normal;color:var(--burgundy);font-weight:600;}

/* =================================================================
   COUNTDOWN (tarjeta oscura)
   ================================================================= */
.cd-grid{display:flex;justify-content:center;gap:8px;margin:22px 0 8px;}
.cd-cell{min-width:60px;}
.cd-num{font-family:var(--serif);font-size:clamp(2.2rem,11vw,2.9rem);font-weight:500;color:#fff;line-height:1;font-variant-numeric:tabular-nums;}
.cd-lab{font-family:var(--sans);font-size:.57rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:9px;}
.cd-sep{font-family:var(--serif);font-size:2rem;color:var(--gold);align-self:flex-start;line-height:1.15;}
.cd-date{font-family:var(--serif);font-style:italic;color:var(--cream);font-size:1.02rem;}

/* =================================================================
   UBICACIÓN
   ================================================================= */
.map-wrap{width:100%;border-radius:18px;overflow:hidden;border:1px solid rgba(201,168,106,.4);box-shadow:0 10px 24px rgba(94,26,36,.12);margin:18px 0;aspect-ratio:4/3;background:var(--card-2);}
.map-wrap iframe{width:100%;height:100%;border:0;display:block;}

/* =================================================================
   BOTONES
   ================================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-family:var(--sans);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;padding:13px 30px;border-radius:999px;border:1px solid var(--gold-deep);background:transparent;color:var(--burgundy);transition:all .35s var(--ease);text-decoration:none;}
.btn:hover{background:var(--burgundy);border-color:var(--burgundy);color:#fff;}
.btn.solid{background:var(--burgundy);border-color:var(--burgundy);color:#FCF6F6;}
.btn.solid:hover{background:var(--burgundy-deep);}
.btn[disabled]{opacity:.55;pointer-events:none;}
.btn-sub{display:block;margin:14px auto 0;font-family:var(--sans);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);background:none;border:0;}
.btn-sub:hover{color:var(--burgundy);text-decoration:underline;}
.card.dark .btn.solid{background:var(--gold);border-color:var(--gold);color:#48141C;}
.card.dark .btn.solid:hover{background:#D8BC84;}
.card.dark .btn-sub{color:#E0CAC8;}

/* =================================================================
   RSVP
   ================================================================= */
.rsvp-state{min-height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;}
.rsvp-msg{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:1.04rem;line-height:1.55;}
.rsvp-msg b{font-style:normal;color:var(--burgundy);font-weight:600;}
.rsvp-done{font-family:var(--script);color:var(--burgundy);font-size:2.7rem;line-height:1;}
.check-ring{width:58px;height:58px;border-radius:50%;border:2px solid var(--gold-deep);display:flex;align-items:center;justify-content:center;color:var(--gold-deep);}
.spin{width:26px;height:26px;border:2px solid rgba(122,35,48,.25);border-top-color:var(--burgundy);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* =================================================================
   REGALO
   ================================================================= */
.gift-script{font-family:var(--script);color:var(--burgundy);font-size:clamp(2.2rem,12vw,3rem);line-height:1.05;}
.gift-sub{font-family:var(--sans);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:10px 0 4px;}
.gift-list{list-style:none;padding:0;margin:18px auto;max-width:300px;text-align:left;}
.gift-list li{display:flex;align-items:center;gap:14px;padding:12px 4px;border-bottom:1px solid rgba(201,168,106,.3);}
.gift-list li:last-child{border-bottom:0;}
.gift-ico{flex:0 0 26px;color:var(--gold-deep);}
.gift-k{font-family:var(--sans);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.gift-v{font-family:var(--rosario);font-size:1.04rem;letter-spacing:.05em;color:var(--ink);}
.copy-btn{margin-left:auto;background:none;border:0;color:var(--gold-deep);padding:6px;}
.copy-btn:active{transform:scale(.9);}
.copied-toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(10px);background:var(--burgundy);color:#fff;font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;padding:9px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:all .3s var(--ease);z-index:40;}
.copied-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* =================================================================
   GRACIAS (tarjeta oscura)
   ================================================================= */
.monogram{font-family:var(--serif);line-height:1;display:inline-flex;align-items:center;gap:.08em;font-size:clamp(3.2rem,16vw,4.4rem);font-weight:500;}
.monogram .amp{font-family:var(--script);font-size:.78em;transform:translateY(.06em);}
.card:not(.dark) .monogram{color:var(--burgundy);}
.card:not(.dark) .monogram .amp{color:var(--gold-deep);}
.card.dark .monogram{color:#fff;}
.card.dark .monogram .amp{color:var(--gold);}
.thanks-line{font-family:var(--serif);font-style:italic;font-size:1.18rem;line-height:1.6;margin-top:10px;}
.card:not(.dark) .thanks-line{color:var(--burgundy);}
.card.dark .thanks-line{color:var(--cream);}

/* =================================================================
   UI flotante
   ================================================================= */
.music-btn{position:fixed;top:16px;right:16px;z-index:30;width:44px;height:44px;border-radius:50%;border:1px solid var(--gold-deep);background:rgba(255,253,253,.82);backdrop-filter:blur(6px);color:var(--burgundy);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(94,26,36,.15);}
.music-btn svg{width:20px;height:20px;}
.music-btn .ico-pause{display:none;}
.music-btn.playing .ico-play{display:none;}
.music-btn.playing .ico-pause{display:block;}
.music-btn.playing::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--gold);opacity:.6;animation:ring 1.8s ease-out infinite;}
@keyframes ring{0%{transform:scale(.85);opacity:.6}100%{transform:scale(1.5);opacity:0}}
.scroll-hint{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:30;display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--sans);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);transition:opacity .5s ease;}
.scroll-hint.gone{opacity:0;pointer-events:none;}
.scroll-hint .chev{color:var(--gold-deep);font-size:1.1rem;animation:bob 1.5s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

@keyframes pulse-gold {
  0% { box-shadow: 0 6px 16px rgba(94, 26, 36, 0.25), 0 0 0 0px rgba(201, 168, 106, 0.45); }
  70% { box-shadow: 0 6px 16px rgba(94, 26, 36, 0.25), 0 0 0 12px rgba(201, 168, 106, 0); }
  100% { box-shadow: 0 6px 16px rgba(94, 26, 36, 0.25), 0 0 0 0px rgba(201, 168, 106, 0); }
}

@keyframes bg-drift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes sweep-glare {
  0% { left: -100%; }
  35% { left: 200%; }
  100% { left: 200%; }
}

@keyframes sway-tl {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-3px, -3px) rotate(-1.5deg); }
}
@keyframes sway-tr {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(3px, -3px) rotate(1.5deg); }
}
@keyframes sway-bl {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-3px, 3px) rotate(1.5deg); }
}
@keyframes sway-br {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(3px, 3px) rotate(-1.5deg); }
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;}.reveal{opacity:1;transform:none;transition:none;}}