/* ===================== TOKENS ===================== */
:root{
  --navy:#22304f; --navy-deep:#0f1830; --navy-soft:#3a4d72;
  --silver:#d6deef; --silver-soft:#9aa8c8;
  --cream:#f7f5ee; --ink:#293349; --line:rgba(120,150,200,.40);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{max-width:100%; overflow-x:hidden}
body{font-family:"Cormorant Garamond",Georgia,serif; color:var(--ink); -webkit-font-smoothing:antialiased;
  background:#cdd8ec url(../assets/bg-water.jpg) center top/cover fixed;}
img{max-width:100%}
h2{font-family:"Cormorant Garamond",serif; font-weight:600; font-size:2.5rem; line-height:1.05; text-align:center; color:var(--navy)}
.sec h2{margin-bottom:6px}
.sec h2::after{content:"\2766"; display:block; font-size:1.05rem; color:var(--silver-soft); margin:8px auto 20px; opacity:.8}

/* ===================== NAV (pílula condensável) ===================== */
#nav{position:fixed; top:0; left:0; right:0; z-index:60; padding:16px 22px; transition:padding .4s ease}
.nav-inner{display:flex; align-items:center; gap:16px; max-width:1080px; margin:0 auto;
  padding:8px 10px; border-radius:40px; background:transparent; transition:background .4s ease, box-shadow .4s ease, padding .4s ease}
.nav-logo{text-decoration:none; display:flex; align-items:center}
.nav-logo img{height:38px; width:auto; filter:brightness(0) invert(1); opacity:.9; transition:filter .3s,opacity .3s}

.nav-toggle{display:none; background:none; border:0; color:#fff; font-size:1.5rem; cursor:pointer}
#navlinks{list-style:none; display:flex; gap:16px; align-items:center; margin-left:auto}
#navlinks a{color:rgba(255,255,255,.92); text-decoration:none; font-size:1.05rem; transition:color .2s}
#navlinks a:hover{color:#fff}
.nav-cta{background:linear-gradient(180deg,#6a86b6,#3f5c91); color:#fff !important; padding:8px 18px; border-radius:30px;
  box-shadow:0 4px 12px rgba(20,40,90,.3)}
#nav.shrink{padding:10px 16px}
#nav.shrink .nav-inner{background:rgba(255,255,255,.95); box-shadow:0 8px 26px rgba(30,50,100,.18); padding:8px 18px; backdrop-filter:blur(6px)}
#nav.shrink .nav-logo img{filter:saturate(.4) brightness(.5); opacity:.85}
#nav.shrink .nav-toggle{color:var(--navy)}
#nav.shrink #navlinks a{color:var(--navy-soft)}
#nav.shrink #navlinks a.nav-cta{color:#fff !important}

/* ===================== HERO ===================== */
.hero{position:relative; height:100vh; min-height:560px; overflow:hidden;
  display:flex; align-items:center; justify-content:center}
.hero-stage{position:relative; width:100%; height:100%}
.collage{position:absolute; inset:0; z-index:3; pointer-events:none}
.cphoto{position:absolute; border-radius:14px; box-shadow:0 18px 42px rgba(20,40,90,.32);
  object-fit:cover; opacity:0; will-change:transform,opacity; aspect-ratio:4/3}
.p1{width:19vw; min-width:150px; left:3vw; top:16vh}
.p2{width:14vw; min-width:120px; left:7vw; bottom:13vh; aspect-ratio:3/4}
.p3{width:17vw; min-width:140px; right:4vw; top:20vh}
.p4{width:13vw; min-width:120px; right:8vw; bottom:16vh; aspect-ratio:3/4}
.p5{width:12vw; min-width:108px; left:15vw; top:7vh}
.p6{width:12vw; min-width:108px; right:15vw; bottom:7vh}
.hero-photo{position:absolute; inset:0; margin:0; z-index:5; overflow:hidden;
  transform-origin:center center; will-change:transform; border-radius:0}
.hero-photo img{width:100%; height:100%; object-fit:cover; display:block}
.hero-photo::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,24,48,.42), rgba(15,24,48,.05) 32%, rgba(15,24,48,.5))}
.hero-names{position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); z-index:6; text-align:center;
  font-family:"Cormorant Garamond",serif; font-style:italic; font-weight:500; color:#fff;
  font-size:clamp(2.8rem,10vw,6.5rem); line-height:1; text-shadow:0 4px 30px rgba(0,0,0,.45); padding:0 .3em}
.scroll-hint{position:absolute; bottom:24px; left:0; right:0; text-align:center; z-index:7;
  color:rgba(255,255,255,.85); font-family:"Cormorant SC",serif; letter-spacing:.26em;
  text-transform:uppercase; font-size:.76rem}

/* ===================== STORY (pinada) ===================== */
.story{position:relative; background:transparent}
.story-pin{position:relative; height:100vh; min-height:600px; overflow:hidden}
.story-title{position:absolute; top:7vh; left:0; right:0; text-align:center; z-index:1;
  font-family:"Cormorant Garamond",serif; font-weight:700; color:var(--navy);
  font-size:clamp(2.6rem,9vw,5.4rem); opacity:.92}
.chapter{position:absolute; top:32%; width:min(78vw,290px); z-index:2; opacity:0; will-change:opacity,transform}
.chapter[data-side=left]{left:6vw; text-align:left}
.chapter[data-side=right]{right:6vw; text-align:right}
.ch-label{display:block; font-family:"Cormorant SC",serif; letter-spacing:.14em; text-transform:uppercase;
  font-size:.9rem; color:var(--navy); margin-bottom:8px;
  text-shadow:0 1px 6px rgba(247,245,238,.9), 0 0 16px rgba(247,245,238,.7)}
.chapter p{font-size:1.3rem; line-height:1.55; color:var(--navy); font-weight:500;
  text-shadow:0 1px 6px rgba(247,245,238,.9), 0 0 16px rgba(247,245,238,.7)}
.stack{position:absolute; left:50%; top:54%; transform:translate(-50%,-50%); width:min(72vw,340px); z-index:3}
.sphoto{position:absolute; left:50%; top:50%; width:100%; margin:0; background:#fff; padding:10px 10px 14px;
  border-radius:5px; box-shadow:0 22px 46px rgba(20,40,90,.32); opacity:0; will-change:transform,opacity}
.sphoto img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-radius:2px}
.sphoto figcaption{text-align:center; font-style:italic; color:#7a8197; margin-top:9px; font-size:1.02rem}

/* ===================== SEÇÕES (painéis) ===================== */
.sec{position:relative; max-width:600px; margin:30px auto; padding:42px 30px;
  background:rgba(255,255,255,.93); border-radius:22px; box-shadow:0 16px 44px rgba(40,70,130,.16)}
.sec::before{content:""; position:absolute; inset:9px; border:1px solid rgba(130,160,205,.45); border-radius:15px; pointer-events:none}
.sec > *{position:relative; max-width:520px; margin-left:auto; margin-right:auto}
.sec p{font-size:1.28rem; line-height:1.6; text-align:center; margin:0 auto 15px; color:var(--ink)}
.muted{font-size:1.04rem !important; color:#7a8298 !important}
.lead-it{font-style:italic; font-size:1.5rem !important; color:var(--navy-soft)}
#contagem{margin-top:30px}
.countdown{display:flex; justify-content:center; gap:18px; margin:6px auto 0}
.countdown div{display:flex; flex-direction:column; align-items:center; min-width:52px}
.countdown b{font-size:2.1rem; font-weight:600; line-height:1; color:var(--navy)}
.countdown span{font-family:"Cormorant SC",serif; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--navy-soft); margin-top:6px}

/* ===================== CRONOGRAMA (pinado) ===================== */
#cronograma{position:relative; background:transparent}
.cron-pin{position:relative; height:100vh; min-height:600px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:64px 20px 30px}
/* sobrescreve o absolute do .story-title quando dentro do cronograma */
.cron-pin .story-title{position:relative; top:auto; left:auto; right:auto;
  font-size:clamp(2rem,6vw,3.8rem); flex-shrink:0}
.sched{position:relative; width:min(80vw,340px)}
.sched-rail{position:absolute; left:calc(50% - 1px); top:6px; bottom:6px; width:2px;
  background:var(--navy); opacity:.4; transform:scaleY(0); transform-origin:top center}
.si{display:grid; grid-template-columns:1fr 24px 1fr; align-items:center; gap:14px; padding:9px 0}
.si-ic{display:flex; align-items:center; justify-content:flex-end}
.si-ic svg{width:28px; height:28px; color:var(--navy); flex-shrink:0}
.si-dot{width:10px; height:10px; border-radius:50%; background:var(--navy);
  border:2.5px solid #f7f5ee; box-shadow:0 0 0 1.5px var(--navy); justify-self:center}
.si-txt{display:flex; flex-direction:column; gap:2px}
.si-txt b{font-size:1.22rem; font-weight:600; color:var(--navy); line-height:1; font-family:"Cormorant Garamond",serif}
.si-txt span{font-size:.98rem; color:var(--navy-soft)}

.cards{display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:540px}
.card-info{background:#f7f4ec; border:1px solid var(--line); border-radius:14px; padding:18px 16px}
.card-info h3{font-weight:600; font-size:1.4rem; color:var(--navy); margin-bottom:5px}
.card-info p{font-size:1.08rem; text-align:left; line-height:1.45; margin:0; color:var(--ink)}

.venue{font-size:1.9rem !important; color:var(--navy); margin-bottom:2px !important; font-weight:600}
.maplink{display:block; max-width:520px; margin:6px auto 18px; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 10px 26px rgba(40,70,130,.18)}
.maplink img{display:block; width:100%}

.btn{display:inline-block; text-align:center; text-decoration:none; cursor:pointer;
  font-family:"Cormorant Garamond",serif; font-weight:500; font-size:1.3rem; letter-spacing:.03em;
  padding:13px 32px; border-radius:12px; border:1px solid #2f486f; transition:filter .2s, transform .12s}
.btn:active{transform:translateY(1px)}
.btn.primary{color:#eef2fb; background:linear-gradient(180deg,#6a86b6,#3f5c91);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22), 0 6px 16px rgba(20,40,90,.28)}
.btn.primary:hover{filter:brightness(1.06)}
.sec .btn{display:block; width:max-content; margin:0 auto}

/* Botões ornamentados (imagem com fundo transparente) */
.btn-ornate{background:none; border:none; box-shadow:none; padding:0; cursor:pointer;
  display:block; margin:8px auto 0; text-decoration:none; transition:opacity .2s, transform .14s}
.btn-ornate:hover{opacity:.82}
.btn-ornate:active{transform:scale(.96); opacity:.9}
.btn-ornate img{display:block; width:100%; max-width:300px; height:auto; margin:0 auto}

.form{max-width:440px; margin:0 auto; display:flex; flex-direction:column; gap:13px; text-align:left}
.form label{display:flex; flex-direction:column; font-size:1.12rem; color:var(--ink); gap:5px}
.form input:not([type="radio"]), .form select, .form textarea{font-family:inherit; font-size:1.1rem; padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); width:100%; appearance:none; -webkit-appearance:none}
.form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa8c8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; padding-right:34px; cursor:pointer}
.form .row{display:flex; gap:14px}
.form .row label{flex:1; min-width:0}
.choice{border:0; display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:1.12rem}
.choice span{font-weight:600}
.choice label{flex-direction:row; align-items:center; gap:6px}
.form .btn{margin-top:6px}
.form-msg{min-height:1.2em; text-align:center; font-style:italic; color:var(--navy-soft)}

.gifts{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; max-width:540px}
.gift{background:#f7f4ec; border:1px solid var(--line); border-radius:14px; text-align:center; overflow:hidden; display:flex; flex-direction:column}
.gift-img{width:100%; aspect-ratio:4/3; overflow:hidden; flex-shrink:0}
.gift-img img{width:100%; height:100%; object-fit:cover; display:block}
.gift-body{padding:18px 14px; flex:1; display:flex; flex-direction:column; align-items:center}
.gift h3{font-weight:600; font-size:1.32rem; color:var(--navy); margin-bottom:3px}
.gift p{font-size:.98rem !important; color:#7a8298; line-height:1.35; margin:0 0 8px; min-height:38px; text-align:center}
.gift .val{font-size:1.4rem; color:var(--navy); display:block; margin-bottom:9px; font-weight:600}
.gift button{font-family:inherit; cursor:pointer; font-size:1.05rem; color:#3f5c91; background:#fff; border:1.5px solid #6a86b6; border-radius:22px; padding:7px 16px; transition:.2s}
.gift button:hover{background:#eef2fb}
.gift.selected{outline:2px solid #6a86b6}
.gift.selected button{background:linear-gradient(180deg,#6a86b6,#3f5c91); color:#fff; border-color:#36507e}
.cart{max-width:440px; margin:24px auto 0; background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 20px; box-shadow:0 10px 28px rgba(40,70,130,.16)}
.cart-head{display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:1.25rem; color:var(--navy); margin-bottom:8px}
.cart-head button{background:none;border:0;color:#9aa8c8;cursor:pointer;font-family:inherit;font-size:1rem}
#cartItems{list-style:none; margin:0 0 8px}
#cartItems li{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line); font-size:1.08rem}
.cart-total{display:flex; justify-content:space-between; font-weight:600; font-size:1.25rem; color:var(--navy); padding:8px 0}
.cart-name{display:flex; flex-direction:column; gap:5px; font-size:1.08rem; margin-bottom:12px}
.cart-name input{font-family:inherit;font-size:1.08rem;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.cart .btn{width:100%}

.mural{list-style:none; max-width:520px; margin:28px auto 0; display:flex; flex-direction:column; gap:12px}
.mural li{background:#f7f4ec; border:1px solid var(--line); border-radius:13px; padding:13px 17px}
.mural .m-nome{font-weight:600; color:var(--navy); font-size:1.18rem}
.mural .m-txt{font-size:1.1rem; line-height:1.45; color:var(--ink); margin-top:3px; font-style:italic}

.foot{text-align:center; padding:40px 20px 60px; color:var(--navy-soft)}
.foot-mono{width:110px; margin-bottom:12px; filter:saturate(.6) brightness(.7)}
.foot p{font-size:1.12rem; margin:2px 0; color:var(--navy-soft)}
.foot .tiny{font-size:.92rem; color:#8893ad; font-style:italic; margin-top:8px}

.toast{position:fixed; left:50%; bottom:30px; transform:translateX(-50%); z-index:80;
  background:#1d2a47; color:#eaf0fb; padding:14px 22px; border-radius:30px; font-size:1.1rem;
  box-shadow:0 10px 30px rgba(0,0,0,.4); border:1px solid rgba(150,170,210,.3)}

/* reveal (seções abaixo da história) */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i,0)*90ms)}
.reveal.in{opacity:1; transform:none}

/* ===================== RESPONSIVO ===================== */
/* Desktop: capítulo encosta na polaroid (20px de gap), sem espaço vazio no centro */
@media (min-width:960px){
  .chapter[data-side=left]{ left:calc(50% - 480px) }
  .chapter[data-side=right]{ right:calc(50% - 480px) }
}
@media (max-width:760px){
  .chapter{left:8vw !important; right:auto !important; top:15%; width:84vw; text-align:center !important}
  .stack{top:56%; width:78vw}
  .p5,.p6{display:none}
}
@media (max-width:620px){
  h2{font-size:2.1rem}
  .sec{margin:20px 14px; padding:34px 20px}
  .cards{grid-template-columns:1fr}
  .sched{width:88vw}
  .si{gap:10px; padding:7px 0}
  .si-ic svg{width:24px; height:24px}
  .si-txt b{font-size:1.1rem}
  .si-txt span{font-size:.9rem}
  .nav-toggle{display:block; margin-left:auto}
  #navlinks{display:none; position:absolute; top:100%; left:14px; right:14px; flex-direction:column; gap:10px;
    background:rgba(255,255,255,.97); border-radius:16px; padding:16px; box-shadow:0 10px 30px rgba(30,50,100,.2)}
  #navlinks.open{display:flex}
  #navlinks a{color:var(--navy-soft) !important}
  #navlinks a.nav-cta{color:#fff !important; text-align:center}
  .countdown{gap:12px}
  .countdown b{font-size:1.7rem}
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

/* ===================== FALLBACK (sem GSAP) ===================== */
body.no-anim .hero-photo{position:relative}
body.no-anim .cphoto{opacity:1; position:static; display:inline-block; width:30%; margin:4px}
body.no-anim .collage{position:static; text-align:center; padding:10px}
body.no-anim .story-pin{height:auto; padding:50px 0 20px}
body.no-anim .story-title{position:static; margin-bottom:24px}
body.no-anim .chapter{position:static; opacity:1; width:auto; max-width:480px; margin:0 auto 14px; text-align:center; transform:none}
body.no-anim .stack{position:static; transform:none; width:auto; height:auto; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; max-width:580px; margin:10px auto 0}
body.no-anim .sphoto{position:static; opacity:1; transform:none; width:min(46vw,200px)}
body.no-anim .cron-pin{height:auto}
body.no-anim .sched-rail{transform:scaleY(1); opacity:.4}
body.no-anim .si{opacity:1}