:root{
  --parchment:#efd7ab;
  --parchment-light:#fff0ca;
  --ink:#4a1c12;
  --wine:#7b0613;
  --wine-dark:#4e0209;
  --gold:#d5a94d;
  --gold-light:#f4d27c;
  --brown:#3c1d10;
  --black:#13080a;
  --cream:#fff6dc;
  --shadow: 0 28px 80px rgba(42, 8, 3, .28);
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  background:#16070a;
}

body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:"Cormorant Garamond", Georgia, serif;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 20% 0%, rgba(244,210,124,.15), transparent 30%),
    linear-gradient(180deg,#23080c,#170509 40%,#0b0305);
}

body.locked{overflow:hidden}

.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.19;
  z-index:1;
  background-image:
    repeating-radial-gradient(circle at 8% 18%, rgba(255,255,255,.15) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 1px, transparent 1px 6px);
  mix-blend-mode:soft-light;
}

.spark-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:20;
  overflow:hidden;
}

.spark{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--gold-light);
  box-shadow:0 0 14px var(--gold-light);
  opacity:.8;
  animation:floatSpark var(--dur,6s) linear infinite;
}

@keyframes floatSpark{
  from{transform:translateY(110vh) scale(.5);opacity:0}
  15%{opacity:.8}
  80%{opacity:.6}
  to{transform:translateY(-10vh) scale(1.2);opacity:0}
}

.gate{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,245,207,.85), rgba(239,215,171,.92) 38%, rgba(57,23,12,.92) 100%);
  transition:opacity .8s ease, visibility .8s ease;
}

.gate.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.gate-bg{
  position:relative;
  width:min(460px, 100%);
  min-height:78vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:34px 24px;
  border:1px solid rgba(90,37,16,.24);
  border-radius:28px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 10%, transparent 90%, rgba(0,0,0,.05)),
    radial-gradient(circle at 50% 40%, rgba(255,250,230,.72), rgba(239,214,170,.76));
  box-shadow:var(--shadow);
  overflow:hidden;
}

.gate-bg:before,
.gate-bg:after{
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  border:2px solid rgba(81,32,12,.24);
  opacity:.55;
}
.gate-bg:before{top:14px;left:14px;border-right:none;border-bottom:none;border-radius:18px 0 0 0}
.gate-bg:after{right:14px;bottom:14px;border-left:none;border-top:none;border-radius:0 0 18px 0}

.gate-kicker{
  font-family:"IM Fell English SC", serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--wine);
  margin:22px 0 8px;
  font-size:1rem;
}

.gate h1{
  max-width:350px;
  margin:0;
  font-family:"Cinzel", serif;
  font-size:clamp(2.3rem, 9vw, 4.2rem);
  line-height:.95;
  color:#3f160c;
  text-shadow:0 2px 0 rgba(255,255,255,.35);
}

.gate-copy{
  max-width:320px;
  font-size:1.2rem;
  line-height:1.35;
  margin:22px 0;
}

.open-btn,
.btn{
  border:none;
  border-radius:999px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  font-family:"Montserrat", sans-serif;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.open-btn{
  position:relative;
  padding:17px 26px;
  background:linear-gradient(135deg,#5a080e,#8d1120 45%,#bd7f33);
  color:#fff6dc;
  box-shadow:0 16px 40px rgba(91,6,16,.35);
}

.open-btn:hover{transform:translateY(-1px)}
.gate-note{font-size:.9rem;opacity:.72}

.sealed-scroll{
  position:relative;
  width:190px;
  height:98px;
  display:grid;
  place-items:center;
  margin-bottom:8px;
  transform-style:preserve-3d;
}
.sealed-scroll span{
  position:absolute;
  height:62px;
  background:linear-gradient(90deg,#c99b5f,#ffe6b3,#c48b4c);
  border:2px solid rgba(76,38,14,.35);
  box-shadow:0 14px 28px rgba(60,25,6,.28);
}
.sealed-scroll span:nth-child(1){width:155px;border-radius:60px;transform:rotate(-4deg)}
.sealed-scroll span:nth-child(2){left:10px;width:50px;border-radius:50%;background:radial-gradient(circle,#ffe9b8,#b77a35)}
.sealed-scroll span:nth-child(3){right:10px;width:50px;border-radius:50%;background:radial-gradient(circle,#ffe9b8,#b77a35)}

.invite{
  position:relative;
  z-index:2;
  width:100%;
  max-width:480px;
  margin:0 auto;
  background:#1b0709;
  box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 40px 90px rgba(0,0,0,.45);
}

.scene{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  padding:64px 24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  isolation:isolate;
}

.parchment{
  background:
    radial-gradient(circle at 50% 22%, rgba(255,253,230,.88), transparent 33%),
    radial-gradient(circle at 10% 10%, rgba(255,198,95,.22), transparent 18%),
    radial-gradient(circle at 96% 92%, rgba(171,83,28,.18), transparent 26%),
    linear-gradient(180deg, #f7e4b9 0%, #efcf98 100%);
}

.parchment:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg, rgba(70,27,10,.18), transparent 14%, transparent 86%, rgba(70,27,10,.16)),
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(72,31,12,.035) 10px 11px);
}

.parchment:after{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(88,42,14,.16);
  border-radius:22px;
  z-index:-1;
  box-shadow:inset 0 0 45px rgba(97,42,12,.18);
}

.crimson{
  background:
    radial-gradient(circle at 50% 22%, rgba(234, 99, 45, .22), transparent 30%),
    linear-gradient(180deg, var(--wine) 0%, var(--wine-dark) 100%);
  color:#f5d67b;
}

.crimson:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.08), transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.06), transparent 1px);
  background-size:70px 70px, 90px 90px;
}

.crimson:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.24;
  background-image:
    linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent),
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(255,255,255,.035) 31px 32px);
}

.castle-watermark,
.castle-faint{
  position:absolute;
  inset:auto 0 14%;
  height:40%;
  opacity:.13;
  z-index:-1;
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:90% auto;
  background-image:url("assets/img/castle.svg");
}

.castle-faint{
  inset:14% 0 auto;
  height:45%;
  opacity:.105;
}

.footprints{
  position:absolute;
  width:150px;
  height:190px;
  opacity:.18;
  background-image:url("assets/img/footprints.svg");
  background-size:contain;
  background-repeat:no-repeat;
  z-index:0;
}
.fp-one{left:4px;top:40px;transform:rotate(-24deg)}
.fp-two{right:-24px;bottom:20px;transform:rotate(150deg)}
.fp-top-left{top:20px;left:-25px;transform:rotate(-28deg);opacity:.22}
.fp-bottom-right{right:-30px;bottom:18px;transform:rotate(145deg);opacity:.18}

.ribbon-wrap{
  width:100%;
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:0;
  margin-bottom:30px;
  z-index:2;
}

.ribbon{
  width:100%;
  max-width:390px;
  height:auto;
  filter:drop-shadow(0 9px 12px rgba(60,18,8,.12));
}
.ribbon-small{
  max-width:315px;
  margin-top:-25px;
}
.ribbon-fill{fill:#f3d7a8}
.ribbon-line{
  fill:none;
  stroke:#3c1a0e;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ribbon text{
  font-family:"IM Fell English SC", serif;
  font-size:33px;
  fill:#5b0d17;
  letter-spacing:.035em;
}
.ribbon-small text{font-size:27px}

.hero-title{
  text-align:center;
  color:var(--wine);
  margin-top:8px;
}
.hero-title span,
.brand-mark span{
  display:block;
  font-family:"Great Vibes", cursive;
  font-size:2.15rem;
  line-height:.7;
  color:var(--wine);
}
.hero-title strong,
.brand-mark strong{
  display:block;
  font-family:"Cinzel", serif;
  font-size:clamp(3.4rem, 17vw, 5rem);
  line-height:.82;
  color:var(--wine);
}
.hero-title small,
.brand-mark small{
  display:block;
  font-family:"Cinzel", serif;
  font-size:1.05rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  margin-top:3px;
}

.main-name{
  font-family:"IM Fell English SC", serif;
  font-size:clamp(4.6rem, 22vw, 7rem);
  line-height:.9;
  text-align:center;
  color:var(--wine);
  margin:10px 0 0;
  text-shadow:0 4px 0 rgba(255,255,255,.28);
}

.magic-line{
  max-width:340px;
  margin:20px auto 0;
  font-size:1.22rem;
  text-align:center;
  line-height:1.35;
}

.scroll-cue{
  position:absolute;
  left:0;
  right:0;
  bottom:22px;
  text-align:center;
  font-family:"Montserrat", sans-serif;
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:rgba(74,28,18,.72);
}
.scroll-cue span{
  display:block;
  width:1px;
  height:38px;
  margin:0 auto 10px;
  background:linear-gradient(transparent,var(--wine),transparent);
  animation:pulseLine 1.4s ease infinite;
}
@keyframes pulseLine{50%{transform:scaleY(.45);opacity:.45}}

.crest{
  align-self:center;
  width:112px;
  height:132px;
  display:grid;
  place-items:center;
  color:var(--gold-light);
  font-family:"Cinzel", serif;
  font-size:2.4rem;
  font-weight:800;
  background:url("assets/img/crest.svg") center/contain no-repeat;
  margin-bottom:42px;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.25));
}

.crest.cup{
  width:140px;
  height:150px;
  background:url("assets/img/cup.svg") center/contain no-repeat;
}

.letter-text{
  max-width:390px;
  margin:0 auto;
  text-align:center;
}
.letter-text p{
  margin:0;
  font-family:"IM Fell English SC", serif;
  font-size:clamp(1.36rem, 6vw, 1.8rem);
  line-height:1.35;
  letter-spacing:.04em;
}

.parents,
.godparents{
  margin:42px auto 0;
  text-align:center;
}
.parents span,
.godparents span{
  display:block;
  font-family:"IM Fell English SC", serif;
  font-size:1.14rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.parents strong,
.godparents strong{
  display:block;
  font-family:"Great Vibes", cursive;
  font-size:clamp(2.4rem, 13vw, 3.6rem);
  line-height:1.05;
  color:#ffde85;
  font-weight:400;
  margin-top:8px;
}
.parents em,
.godparents em{
  display:block;
  font-style:normal;
  opacity:.7;
}

.mini-copy{
  max-width:340px;
  text-align:center;
  margin:26px auto 0;
  font-size:1.16rem;
  line-height:1.35;
}

.script-title,
.script-heading{
  margin:30px auto 0;
  text-align:center;
  font-family:"Great Vibes", cursive;
  color:#ffda7b;
  font-size:clamp(2.3rem, 12vw, 3.7rem);
  line-height:1;
  font-weight:400;
}

.script-heading{color:var(--wine);font-size:3.2rem}

.brand-mark{
  text-align:center;
  margin-bottom:36px;
}
.brand-mark strong{font-size:3.1rem}

.date-card{
  text-align:center;
  color:#4a1c12;
}
.date-card > span{
  font-family:"Cinzel", serif;
  font-size:2.2rem;
  font-weight:600;
  text-transform:capitalize;
}
.date-card div{
  margin:8px auto 16px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  max-width:390px;
}
.date-card em{
  font-family:"IM Fell English SC", serif;
  font-style:normal;
  font-size:1.5rem;
  border-top:2px solid rgba(72,28,14,.65);
  border-bottom:2px solid rgba(72,28,14,.65);
  padding:8px 4px;
}
.date-card strong{
  display:block;
  font-family:"Cinzel", serif;
  font-size:5rem;
  line-height:.95;
  color:#3b160b;
}

.countdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin:22px auto 28px;
  width:100%;
  max-width:390px;
}
.countdown div{
  border:1px solid rgba(74,28,18,.22);
  border-radius:18px;
  padding:13px 5px 10px;
  background:rgba(255,255,255,.22);
  text-align:center;
  box-shadow:inset 0 0 25px rgba(255,255,255,.22);
}
.countdown strong{
  display:block;
  font-family:"Cinzel", serif;
  font-size:1.45rem;
  color:var(--wine);
}
.countdown span{
  display:block;
  font-family:"Montserrat", sans-serif;
  font-size:.64rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-top:2px;
}

.event-box{
  width:100%;
  max-width:390px;
  margin:0 auto;
  text-align:center;
  padding:24px 18px;
  border-radius:28px;
  background:rgba(255,247,220,.58);
  border:1px solid rgba(74,28,18,.2);
  box-shadow:0 18px 38px rgba(80,32,13,.16);
}
.event-box.large{margin-top:20px}

.event-box h3{
  font-family:"Great Vibes", cursive;
  color:var(--wine);
  font-size:3.2rem;
  line-height:1;
  font-weight:400;
  margin:0 0 10px;
}

.event-box strong{
  display:inline-block;
  padding:7px 12px;
  margin:0 auto 12px;
  background:#3a160b;
  color:var(--cream);
  font-family:"IM Fell English SC", serif;
  font-size:1.35rem;
  line-height:1.18;
  letter-spacing:.04em;
}

.event-box span{
  display:block;
  width:88px;
  height:88px;
  margin:16px auto;
  border:2px solid rgba(64,23,9,.6);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:"Cinzel", serif;
  font-size:1.15rem;
  font-weight:700;
}

.event-box p,
.gift p,
.dress-copy,
.final-copy{
  font-size:1.18rem;
  line-height:1.35;
  margin:12px auto 0;
}

.btn{
  margin-top:18px;
  padding:13px 18px;
  background:#3a160b;
  color:#fff0c8;
  font-size:.78rem;
  box-shadow:0 12px 26px rgba(58,22,11,.18);
}

.btn.primary{
  background:linear-gradient(135deg,#5d0710,#941826);
  color:#fff3d2;
}
.btn.whatsapp{
  width:100%;
  background:linear-gradient(135deg,#154d2d,#278a55);
}
.btn.ghost{
  background:transparent;
  color:#4a1c12;
  border:1px solid rgba(74,28,18,.46);
}

.gift{
  width:100%;
  max-width:390px;
  margin:34px auto 0;
  text-align:center;
}
.gift h3{
  margin:0;
  font-family:"Great Vibes", cursive;
  color:var(--wine);
  font-size:3rem;
  font-weight:400;
}

.dress-icon{
  width:190px;
  margin:0 auto 10px;
  opacity:.72;
}
.dress-icon svg{
  width:100%;
  fill:none;
  stroke:#4a1c12;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.dress-copy{
  max-width:370px;
  text-align:center;
}

.whatsapp-card{
  width:100%;
  max-width:390px;
  margin:30px auto 0;
  padding:22px;
  border-radius:28px;
  background:rgba(65,25,11,.88);
  color:#fff2cc;
  text-align:center;
  box-shadow:0 18px 36px rgba(55,19,7,.2);
}
.whatsapp-card span{
  display:block;
  font-family:"IM Fell English SC", serif;
  font-size:1.1rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.whatsapp-card strong{
  display:block;
  font-family:"Cinzel", serif;
  font-size:2rem;
  color:var(--gold-light);
  margin:8px 0;
}
.whatsapp-card small{opacity:.86}

.gallery-scene{
  min-height:auto;
  padding-top:84px;
  padding-bottom:84px;
}
.gallery-scene .script-heading{color:#ffdc80}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  width:100%;
  max-width:390px;
  margin:28px auto 0;
}
.gallery-grid div{
  aspect-ratio:3/4;
  border:1px solid rgba(244,210,124,.45);
  border-radius:22px;
  display:grid;
  place-items:center;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(0,0,0,.12);
  color:#f6dd95;
  font-family:"IM Fell English SC", serif;
  font-size:1.2rem;
}

.final-title{
  font-family:"IM Fell English SC", serif;
  text-align:center;
  color:var(--wine);
  font-size:2rem;
  line-height:1.2;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.final-copy{text-align:center;max-width:330px}

.rsvp-form{
  width:100%;
  max-width:390px;
  margin:30px auto 0;
  padding:18px;
  border-radius:28px;
  background:rgba(255,255,255,.28);
  border:1px solid rgba(74,28,18,.18);
}
.rsvp-form label{
  display:block;
  margin-bottom:14px;
  font-family:"Montserrat", sans-serif;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.rsvp-form input,
.rsvp-form textarea{
  width:100%;
  margin-top:7px;
  border:1px solid rgba(74,28,18,.28);
  border-radius:14px;
  padding:13px 12px;
  font-family:"Montserrat", sans-serif;
  font-size:1rem;
  background:rgba(255,249,230,.78);
  color:#351309;
}
.rsvp-form textarea{min-height:92px;resize:vertical}
.rsvp-form .btn{width:100%}

.end-mark{
  text-align:center;
  font-family:"Montserrat", sans-serif;
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.68;
  margin-top:30px;
}

.music-toggle{
  position:fixed;
  z-index:80;
  right:16px;
  bottom:16px;
  width:52px;
  height:52px;
  border-radius:50%;
  border:1px solid rgba(244,210,124,.55);
  background:rgba(28,8,9,.86);
  color:var(--gold-light);
  font-size:1.4rem;
  box-shadow:0 15px 34px rgba(0,0,0,.32);
}

.music-toggle.paused{opacity:.55}

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}
.delay-1{transition-delay:.12s}
.delay-2{transition-delay:.22s}
.delay-3{transition-delay:.32s}
.delay-4{transition-delay:.42s}

body.opened .scene-intro{
  animation:paperOpen .9s cubic-bezier(.2,.9,.2,1) both;
}

@keyframes paperOpen{
  from{clip-path:inset(48% 0 48% 0 round 36px);filter:brightness(.8)}
  to{clip-path:inset(0 0 0 0 round 0);filter:brightness(1)}
}

@media (min-width:760px){
  .invite{max-width:720px}
  .scene{padding:78px 64px}
  .ribbon{max-width:560px}
  .ribbon-small{max-width:430px}
  .main-name{font-size:7.5rem}
  .event-box,
  .whatsapp-card,
  .rsvp-form,
  .gallery-grid,
  .countdown{max-width:520px}
}

@media (min-width:1100px){
  body{
    display:flex;
    justify-content:center;
    background:
      radial-gradient(circle at 15% 20%, rgba(213,169,77,.12), transparent 28%),
      radial-gradient(circle at 86% 14%, rgba(123,6,19,.24), transparent 30%),
      linear-gradient(120deg,#080304,#23080c);
  }
  .invite{
    max-width:860px;
  }
  .scene{
    min-height:900px;
  }
}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* V3 ajustes finos solicitados */
.ribbon text{
  font-size:28px;
}
.ribbon-small text{
  font-size:24px;
}
.ribbon-wrap{
  overflow:visible;
}
.ribbon{
  overflow:visible;
}

/* Pisadas de zapatos animadas, reemplazan huellas tipo mapa */
.shoeprints{
  position:absolute;
  width:170px;
  height:230px;
  opacity:.19;
  background-image:url("assets/img/shoeprints.svg");
  background-size:contain;
  background-repeat:no-repeat;
  z-index:0;
  animation:shoeWalk 4.8s ease-in-out infinite;
  transform-origin:center;
}
.fp-one{left:4px;top:40px;transform:rotate(-24deg)}
.fp-two{right:-24px;bottom:20px;transform:rotate(150deg);animation-delay:1.2s}
.fp-top-left{top:20px;left:-25px;transform:rotate(-28deg);opacity:.22;animation-delay:.5s}
.fp-bottom-right{right:-30px;bottom:18px;transform:rotate(145deg);opacity:.18;animation-delay:1.5s}

@keyframes shoeWalk{
  0%,100%{opacity:.12; filter:blur(.1px)}
  35%{opacity:.26; filter:blur(0)}
  50%{opacity:.20; transform:translateY(8px) rotate(var(--rot, -24deg))}
  75%{opacity:.28}
}

/* Castillos completos y más presentes, sin cortarse */
.castle-watermark,
.castle-faint{
  background-size:contain;
  background-position:center center;
  opacity:.145;
  pointer-events:none;
}

.castle-watermark{
  inset:8% 0 auto;
  height:58%;
}

.castle-faint{
  inset:7% 0 auto;
  height:58%;
}

.final-scene .castle-faint{
  inset:5% 0 auto;
  height:62%;
  opacity:.135;
}

/* Centrado y círculo de horario más grande */
.event-box{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.event-box span{
  width:112px;
  height:112px;
  padding:10px;
  text-align:center;
  line-height:1.15;
  white-space:normal;
}

.details-scene .event-box span{
  margin-left:auto;
  margin-right:auto;
  display:grid;
  place-items:center;
  font-size:1rem;
}

@media (max-width:420px){
  .ribbon text{font-size:25px}
  .ribbon-small text{font-size:22px}
  .event-box span{
    width:118px;
    height:118px;
    font-size:.98rem;
  }
  .castle-faint,
  .castle-watermark{
    background-size:96% auto;
  }
}

@media (prefers-reduced-motion: reduce){
  .shoeprints{animation:none!important}
}


/* V4 ajustes: listones más altos, menos aire arriba, recepción más compacta y dress code elegante */
.scene-intro{
  justify-content:flex-start;
  padding-top:26px;
}

.ribbon-wrap{
  margin-top:0;
  margin-bottom:18px;
}

.ribbon{
  max-width:430px;
  transform:scaleY(1.18);
  transform-origin:center;
}

.ribbon-small{
  max-width:355px;
  margin-top:-17px;
  transform:scaleY(1.22);
}

.ribbon text{
  font-size:26px;
}

.ribbon-small text{
  font-size:22px;
}

.hero-title{
  margin-top:0;
}

.main-name{
  margin-top:4px;
}

.magic-line{
  margin-top:12px;
}

.details-scene{
  justify-content:flex-start;
  padding-top:42px;
}

.details-scene .event-box.large{
  margin-top:0;
}

.dress-icon.elegant{
  width:210px;
  height:210px;
  display:grid;
  place-items:center;
  margin-bottom:8px;
  opacity:.9;
}

.dress-icon.elegant img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 14px 18px rgba(74,28,18,.16));
}

@media (max-width:420px){
  .scene-intro{
    padding-top:20px;
  }

  .ribbon{
    width:106%;
    margin-left:-3%;
  }

  .ribbon-small{
    width:92%;
  }

  .ribbon text{
    font-size:24px;
  }

  .ribbon-small text{
    font-size:21px;
  }

  .details-scene{
    padding-top:34px;
  }

  .dress-icon.elegant{
    width:190px;
    height:190px;
  }
}


/* FIX LISTONES SOBRE V4 - estable */
.ribbon-wrap{
  width:100%;
  max-width:440px;
  margin:0 auto 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  overflow:visible;
}

.ribbon-main-fixed{
  width:108%;
  max-width:470px;
  margin-left:-4%;
  height:auto;
  filter:drop-shadow(0 14px 16px rgba(63,24,9,.18));
  transform:none;
}

.ribbon-small-fixed{
  width:91%;
  max-width:370px;
  margin-top:-32px;
  height:auto;
  filter:drop-shadow(0 12px 14px rgba(63,24,9,.15));
  transform:none;
}

.ribbon-main-fixed .ribbon-back,
.ribbon-small-fixed .ribbon-back{
  fill:rgba(78,32,13,.20);
  transform:translateY(8px);
}

.ribbon-main-fixed .ribbon-face,
.ribbon-small-fixed .ribbon-face{
  fill:#f2d7a5;
  stroke:#4a2112;
  stroke-width:3.6;
  stroke-linejoin:round;
}

.ribbon-main-fixed .ribbon-light,
.ribbon-small-fixed .ribbon-light{
  fill:none;
  stroke:rgba(255,248,218,.65);
  stroke-width:8;
  stroke-linecap:round;
}

.ribbon-main-fixed text,
.ribbon-small-fixed text{
  font-family:"IM Fell English SC", serif;
  fill:#5b1324;
  paint-order:stroke;
  stroke:rgba(255,238,196,.72);
  stroke-width:2.2px;
  letter-spacing:.065em;
}

.ribbon-main-fixed text{
  font-size:31px;
}

.ribbon-small-fixed text{
  font-size:26px;
}

.scene-intro{
  padding-top:28px;
}

.hero-title{
  margin-top:2px;
}

@media (max-width:420px){
  .ribbon-wrap{
    max-width:100%;
    margin-bottom:4px;
  }

  .ribbon-main-fixed{
    width:116%;
    margin-left:-8%;
  }

  .ribbon-small-fixed{
    width:98%;
    margin-top:-29px;
  }

  .ribbon-main-fixed text{
    font-size:29px;
    letter-spacing:.045em;
  }

  .ribbon-small-fixed text{
    font-size:24px;
    letter-spacing:.038em;
  }

  .scene-intro{
    padding-top:20px;
  }
}


/* V4 listones curvos: texto moldeado al listón, sin tocar JS */
.ribbon-curved-wrap{
  max-width:470px;
  margin-top:0;
  margin-bottom:0;
  gap:0;
  overflow:visible;
}

.ribbon-main-curved{
  width:116%;
  max-width:530px;
  margin-left:-8%;
  height:auto;
  filter:drop-shadow(0 15px 18px rgba(63,24,9,.18));
  transform:none;
}

.ribbon-small-curved{
  width:100%;
  max-width:430px;
  margin-top:-54px;
  height:auto;
  filter:drop-shadow(0 12px 15px rgba(63,24,9,.16));
  transform:none;
}

.ribbon-main-curved .ribbon-back,
.ribbon-small-curved .ribbon-back{
  fill:rgba(78,32,13,.22);
  transform:translateY(9px);
}

.ribbon-main-curved .ribbon-face,
.ribbon-small-curved .ribbon-face{
  fill:#f3d8a7;
  stroke:#4a2112;
  stroke-width:3.5;
  stroke-linejoin:round;
}

.ribbon-main-curved .ribbon-light,
.ribbon-small-curved .ribbon-light{
  fill:none;
  stroke:rgba(255,249,222,.62);
  stroke-width:9;
  stroke-linecap:round;
}

.ribbon-text-curve{
  font-family:"IM Fell English SC", serif;
  fill:#5b1324;
  paint-order:stroke;
  stroke:rgba(255,238,196,.76);
  stroke-width:2.1px;
  letter-spacing:.075em;
  pointer-events:none;
}

.ribbon-text-main{
  font-size:34px;
}

.ribbon-text-small{
  font-size:29px;
}

.scene-intro{
  padding-top:18px;
}

.hero-title{
  margin-top:-6px;
}

@media (max-width:420px){
  .ribbon-curved-wrap{
    max-width:100%;
    margin-bottom:-4px;
  }

  .ribbon-main-curved{
    width:126%;
    margin-left:-13%;
  }

  .ribbon-small-curved{
    width:108%;
    margin-left:-4%;
    margin-top:-49px;
  }

  .ribbon-text-main{
    font-size:32px;
    letter-spacing:.055em;
  }

  .ribbon-text-small{
    font-size:27px;
    letter-spacing:.044em;
  }

  .hero-title{
    margin-top:-8px;
  }
}


/* V4 una línea en listones */
.ribbon-main-oneline{
  width:128%;
  max-width:620px;
  margin-left:-14%;
}

.ribbon-small-oneline{
  width:112%;
  max-width:500px;
  margin-left:-6%;
  margin-top:-58px;
}

.ribbon-text-curve.single-line{
  letter-spacing:.042em;
}

.ribbon-text-main.single-line{
  font-size:29px;
}

.ribbon-text-small.single-line{
  font-size:26px;
}

@media (max-width:420px){
  .ribbon-main-oneline{
    width:138%;
    margin-left:-19%;
  }
  .ribbon-small-oneline{
    width:122%;
    margin-left:-11%;
    margin-top:-52px;
  }
  .ribbon-text-main.single-line{
    font-size:27px;
    letter-spacing:.028em;
  }
  .ribbon-text-small.single-line{
    font-size:23px;
    letter-spacing:.022em;
  }
}


/* Ajuste final: centrar listones en móvil */
@media (max-width: 420px){
  .ribbon-curved-wrap{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:visible;
  }

  .ribbon-main-oneline,
  .ribbon-small-oneline{
    position:relative;
    left:50%;
    transform:translateX(-50%);
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .ribbon-main-oneline{
    width:130%;
    max-width:none;
  }

  .ribbon-small-oneline{
    width:114%;
    max-width:none;
    margin-top:-52px;
  }
}


/* Ajuste final móvil: listones más pequeños y centrados */
@media (max-width: 420px){
  .ribbon-curved-wrap{
    width:100%;
    max-width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:visible;
    margin-left:auto;
    margin-right:auto;
  }

  .ribbon-main-oneline,
  .ribbon-small-oneline{
    position:static !important;
    left:auto !important;
    transform:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    display:block;
  }

  .ribbon-main-oneline{
    width:108% !important;
    max-width:390px !important;
  }

  .ribbon-small-oneline{
    width:94% !important;
    max-width:345px !important;
    margin-top:-22px !important;
  }

  .ribbon-text-main.single-line{
    font-size:40px !important;
    letter-spacing:.018em !important;
  }

  .ribbon-text-small.single-line{
    font-size:35px !important;
    letter-spacing:.012em !important;
  }
}

@media (max-width: 360px){
  .ribbon-main-oneline{
    width:104% !important;
    max-width:350px !important;
  }

  .ribbon-small-oneline{
    width:91% !important;
    max-width:315px !important;
    margin-top:-25px !important;
    margin-bottom: 10px !important;
  }

  .ribbon-text-main.single-line{
    font-size:40px !important;
  }

  .ribbon-text-small.single-line{
    font-size:35px !important;
  }
}

/* Ajuste listones tablet / móvil ancho */
@media (min-width: 421px) and (max-width: 759px){
  .ribbon-curved-wrap{
    width:100%;
    max-width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    margin-left:auto;
    margin-right:auto;
    overflow:visible;
  }

  .ribbon-main-oneline,
  .ribbon-small-oneline{
    position:static !important;
    left:auto !important;
    transform:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    display:block;
  }

  .ribbon-main-oneline{
    width:110% !important;
    max-width:430px !important;
  }

  .ribbon-small-oneline{
    width:96% !important;
    max-width:385px !important;
    margin-top:-35px !important;
  }
}