/* Duda & Gui — casamento anos 70 (disco/groovy) na Pampulha, BH. Laranja queimado, mostarda, chocolate, rosa-chiclete e creme.
   Layout: entrada (vitrola vista de cima, o disco com o seu nome gira com a rolagem, a bola espelhada desce e o convite surge como capa de LP)
   → capa → história + relógio flip → tracklist → traje → mapa com discos → viagem → caixote de discos → RSVP em fita cassete → pista de dança que acende. */
:root{
  --choc:#2B1610; --choc2:#4A2618; --choc3:#6b3a24; --laranja:#D9622B; --laranja2:#B84A1C; --mostarda:#E3A72F; --rosa:#F28DB2; --rosa2:#E56A98;
  --creme:#F6E7CB; --creme2:#FBF1DE; --oliva:#8A8B3C; --tinta:#2B1610; --muted:#6e4c3b; --linha:rgba(43,22,16,.15);
  --display:"Shrikhand", "Cooper Black", Georgia, serif;
  --soft:"Fraunces", "Cooper Black", Georgia, serif;
  --sans:"Outfit", "Helvetica Neue", Arial, sans-serif;
  --top-h:70px; --wrap:min(1120px, calc(100% - 40px));
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .09 0 0 0 0 .06 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --wavy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60'%3E%3Cg fill='none' stroke-width='9'%3E%3Cpath stroke='%23D9622B' d='M0 12 Q30 0 60 12 T120 12 T180 12 T240 12'/%3E%3Cpath stroke='%23E3A72F' d='M0 24 Q30 12 60 24 T120 24 T180 24 T240 24'/%3E%3Cpath stroke='%23F28DB2' d='M0 36 Q30 24 60 36 T120 36 T180 36 T240 36'/%3E%3Cpath stroke='%234A2618' d='M0 48 Q30 36 60 48 T120 48 T180 48 T240 48'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--creme2);color:var(--tinta);font:400 17px/1.65 var(--sans);overflow-x:hidden;text-wrap:pretty}
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;background:var(--grain);opacity:.22;mix-blend-mode:multiply}
[hidden]{display:none!important}
img{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{font-weight:400;text-wrap:balance}
a{color:inherit}
.wrap{width:var(--wrap);margin-inline:auto}
:focus-visible{outline:2px solid var(--laranja);outline-offset:3px}

.kicker{font:800 13px/1.2 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--laranja)}
.kicker--pink{color:var(--rosa2)}
.kicker--mustard{color:var(--mostarda)}
.h2{font:900 clamp(38px,5.2vw,66px)/1.02 var(--soft);color:var(--tinta);margin-top:10px;letter-spacing:-.015em}
.h2--light{color:var(--creme)}
.lede{max-width:58ch;margin-top:18px;color:var(--muted);font-size:clamp(16.5px,1.3vw,18.5px);font-weight:300}
.lede--light{color:rgba(246,231,203,.84)}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;padding:17px 32px;font:800 13px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:transform .3s ease,background .3s,box-shadow .3s}
.btn:hover{transform:translateY(-2px)}
.btn--disco{background:var(--laranja);color:var(--creme2);box-shadow:4px 4px 0 var(--mostarda),8px 8px 0 var(--rosa)}
.btn--disco:hover{background:var(--laranja2);box-shadow:5px 5px 0 var(--mostarda),10px 10px 0 var(--rosa)}
.btn--wide{width:100%}
.lnk{border:0;background:none;padding:0 0 5px;font:700 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:inherit;border-bottom:1px solid currentColor;cursor:pointer;opacity:.85}
.lnk:hover{opacity:1}
.wavy{height:60px;background:var(--wavy) repeat-x center/240px 60px}

/* vinil (sulcos) reaproveitado em vários lugares */
.vinyl__grooves{position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle,transparent 0 53.6%,rgba(255,255,255,.07) 54%,transparent 54.8%),
    radial-gradient(circle,transparent 0 68.6%,rgba(255,255,255,.07) 69%,transparent 69.8%),
    radial-gradient(circle,transparent 0 83.6%,rgba(255,255,255,.06) 84%,transparent 84.8%),
    radial-gradient(circle,transparent 0 96%,#0b0808 96.5%),
    repeating-radial-gradient(circle,#161111 0 1.6px,#221b19 1.6px 3.2px);
  box-shadow:inset 0 0 0 2px #050404}

/* =================== ENTRADA =================== */
.stage{position:fixed;inset:0;z-index:100;overflow:hidden;background:radial-gradient(70% 60% at 50% 45%,#5a2d1a 0%,var(--choc) 70%)}
.stage::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;background:var(--grain);opacity:.35;mix-blend-mode:overlay}
.stage__stripes{position:absolute;left:50%;top:45%;width:260vmax;height:260vmax;translate:-50% -50%;background:repeating-conic-gradient(from 0deg,rgba(246,231,203,.045) 0 6deg,transparent 6deg 12deg);will-change:transform}
.waves{position:absolute;left:50%;top:45%;width:240vmax;height:240vmax;translate:-50% -50%;pointer-events:none;overflow:visible}
.waves path{fill:none;stroke-linecap:round;vector-effect:none}
.spots{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;mix-blend-mode:screen}
.deck{position:absolute;left:0;top:0;z-index:3;width:800px;aspect-ratio:1600/1229;will-change:transform;transform-origin:50% 50%}
.deck__plinth{width:100%;height:100%;filter:drop-shadow(0 40px 50px rgba(0,0,0,.55)) drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.vinyl{position:absolute;left:calc(var(--cx) - var(--r));top:calc(var(--cy) - var(--r));width:calc(var(--r) * 2);aspect-ratio:1;border-radius:50%;container-type:inline-size;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.vinyl__spin{position:absolute;inset:0;border-radius:50%;will-change:transform}
.vinyl__label{position:absolute;inset:31.5%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--choc);
  background:radial-gradient(circle,var(--creme2) 0 3.2%,var(--choc) 3.4% 4.6%,transparent 4.8%),radial-gradient(circle,transparent 0 86%,var(--mostarda) 86.5% 92%,var(--rosa) 92.5%),var(--laranja);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.vinyl__side{position:absolute;top:11%;font:800 1.75cqw/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--creme2)}
.vinyl__head{position:absolute;left:7%;right:7%;bottom:54%;display:flex;flex-direction:column;align-items:center;gap:.9cqw}
.vinyl__for{font:700 1.6cqw/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--choc)}
.vinyl__name{display:block;white-space:nowrap;max-width:100%;font:400 4.4cqw/1.02 var(--display);color:var(--creme2);text-shadow:.25cqw .25cqw 0 var(--choc2);overflow-wrap:anywhere}
.vinyl__by{position:absolute;top:63%;font:800 1.75cqw/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--choc);max-width:80%}
.vinyl__label::after{content:"";position:absolute;left:50%;top:76%;width:22%;height:3px;margin-left:-11%;border-radius:3px;background:linear-gradient(90deg,var(--mostarda) 0 33%,var(--creme2) 33% 66%,var(--rosa) 66%)}
.vinyl__sheen{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:conic-gradient(from 20deg,transparent 0deg,rgba(255,240,220,.16) 25deg,transparent 55deg,transparent 180deg,rgba(255,240,220,.12) 205deg,transparent 235deg);mix-blend-mode:screen;-webkit-mask:radial-gradient(circle,transparent 0 31%,#000 31.5%);mask:radial-gradient(circle,transparent 0 31%,#000 31.5%)}
.arm{position:absolute;z-index:2;will-change:transform}
.arm img{width:100%;filter:drop-shadow(var(--sh,6px) var(--sh,6px) var(--bl,6px) rgba(0,0,0,.45))}
.ball{position:absolute;left:50%;top:0;z-index:7;width:min(210px,30vw);aspect-ratio:1;translate:-50% 0;will-change:transform;pointer-events:none}
.ball__chain{position:absolute;left:50%;bottom:98%;width:3px;height:100vh;margin-left:-1.5px;background:repeating-linear-gradient(180deg,#d9d2c8 0 5px,#8e857a 5px 7px)}
.ball__cv{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 30px rgba(255,220,180,.35))}
.sleeve{position:absolute;left:50%;top:50%;z-index:8;width:min(600px,74svh,88vw);aspect-ratio:1;pointer-events:none;opacity:0;will-change:transform}
.sleeve__disc{position:absolute;inset:2%;border-radius:50%;z-index:-1;transform:translateX(calc(var(--d,0) * 40%)) rotate(calc(var(--d,0) * 140deg));filter:drop-shadow(0 20px 30px rgba(0,0,0,.5))}
.sleeve__disc > i{position:absolute;inset:33%;border-radius:50%;background:radial-gradient(circle,var(--creme2) 0 4%,transparent 4.5%),radial-gradient(circle,transparent 0 80%,var(--rosa) 81%),var(--mostarda)}
.sleeve__cover{position:absolute;inset:0;overflow:hidden;border-radius:3px;background:var(--creme2);box-shadow:0 40px 80px -30px rgba(0,0,0,.8),inset 0 0 0 1px rgba(43,22,16,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8% 9% 9%;gap:clamp(4px,1.3svh,12px);container-type:inline-size}
.sleeve__cover::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.5;mix-blend-mode:multiply;pointer-events:none}
.sleeve__cover::after{content:"";position:absolute;left:0;right:0;top:0;height:5.5%;background:linear-gradient(180deg,var(--laranja) 0 33%,var(--mostarda) 33% 66%,var(--rosa) 66%)}
.sleeve__cover > *{position:relative;z-index:1}
.sleeve__rainbow{position:absolute!important;z-index:0!important;right:-22%;bottom:-22%;width:62%;aspect-ratio:1;opacity:.95}
.sleeve__rainbow i,.hero__rainbow i{position:absolute;border-radius:50%;border:solid transparent}
.sleeve__rainbow i{inset:calc(var(--k) * 9%);border-width:4.6cqw;border-color:var(--c)}
.sleeve__rainbow i:nth-child(1){--k:0;--c:var(--laranja)}.sleeve__rainbow i:nth-child(2){--k:1;--c:var(--mostarda)}.sleeve__rainbow i:nth-child(3){--k:2;--c:var(--rosa)}.sleeve__rainbow i:nth-child(4){--k:3;--c:var(--choc2)}
.sleeve__sticker{position:absolute!important;left:6%;top:10%;width:15%;aspect-ratio:1;border-radius:50%;background:var(--rosa);color:var(--choc);display:grid;place-items:center;font:400 3.3cqw/.95 var(--display);rotate:-14deg;box-shadow:0 4px 0 rgba(43,22,16,.18);text-align:center}
.sleeve__hi{display:flex;flex-direction:column;align-items:center;font:800 clamp(11px,2.4cqw,15px)/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--laranja)}
.sleeve__hi b{display:block;font:400 clamp(34px,10cqw,66px)/1.02 var(--display);letter-spacing:0;text-transform:none;color:var(--choc);margin-top:6px;text-shadow:3px 3px 0 var(--mostarda)}
.sleeve__p{font:400 clamp(13.5px,3.2cqw,19px)/1.35 var(--sans);color:var(--choc);max-width:30ch}
.sleeve__names{font:400 clamp(40px,11.5cqw,76px)/1 var(--display);color:var(--laranja);text-shadow:3px 3px 0 var(--choc);margin:2px 0}
.sleeve__names i{font-style:normal;color:var(--rosa2);padding:0 .06em}
.sleeve__date{font:800 clamp(9.5px,2cqw,12.5px)/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--choc2);max-width:34ch}
.stage__cta::before{content:"";position:absolute;left:-10vw;right:-10vw;bottom:-6vh;height:150%;z-index:-1;background:radial-gradient(60% 70% at 50% 75%,rgba(20,10,6,.72),transparent 75%);pointer-events:none}
.stage__cta{position:absolute;left:0;right:0;bottom:max(24px,4.5vh);z-index:10;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:0 16px;animation:in 1.2s .8s backwards}
.stage__for{display:flex;flex-direction:column;align-items:center;font:800 13px/1.2 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--mostarda)}
.stage__for b{display:block;font:400 clamp(48px,6.6vw,88px)/1.05 var(--display);letter-spacing:0;text-transform:none;color:var(--creme2);text-shadow:4px 4px 0 var(--laranja),8px 8px 0 rgba(242,141,178,.85);margin-top:8px;animation:nameIn 1.4s .4s cubic-bezier(.2,.9,.2,1) backwards,float 4s 2s ease-in-out infinite}
.stage__hint{font:600 15px var(--sans);letter-spacing:.06em;color:var(--creme);opacity:.9;animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.4}}
@keyframes in{from{opacity:0;transform:translateY(14px)}}
@keyframes nameIn{from{opacity:0;transform:translateY(20px) scale(.9);filter:blur(6px)}}
@keyframes float{50%{transform:translateY(-6px) rotate(-1.2deg)}}

/* =================== CABEÇALHO =================== */
.top{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--top-h);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 clamp(16px,3vw,40px);background:rgba(43,22,16,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--creme);transform:translateY(-110%);transition:transform .6s cubic-bezier(.2,.9,.2,1)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;background:linear-gradient(180deg,var(--laranja) 0 33%,var(--mostarda) 33% 66%,var(--rosa) 66%)}
body.is-open .top{transform:none}
.top__mono{font:400 28px/1 var(--display);text-decoration:none;color:var(--creme2)}
.top__mono i{font-style:normal;color:var(--mostarda);margin:0 3px}
.top__nav{display:flex;gap:28px}
.top__nav a{font:700 12px var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;opacity:.85}
.top__nav a:hover{opacity:1;color:var(--mostarda)}
.top__cta{font:800 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:11px 16px;border-radius:999px;background:var(--laranja);color:var(--creme2)}
@media (max-width:900px){.top__nav{display:none}.top__cta{padding:9px 12px;font-size:10.5px}.top{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(43,22,16,.97)}}

/* =================== CAPA =================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:calc(var(--top-h) + 30px) 0 90px;background:var(--choc)}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;transform-origin:70% 50%;animation:breeze 26s ease-in-out infinite alternate}
@keyframes breeze{to{transform:scale(1.06)}}
.hero__veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,13,9,.9) 0%,rgba(26,13,9,.62) 36%,rgba(26,13,9,0) 64%),linear-gradient(0deg,rgba(26,13,9,.5),transparent 30%)}
.hero__in{position:relative;z-index:2;width:var(--wrap);margin-inline:auto;color:var(--creme)}
.hero__in .kicker{color:var(--mostarda)}
.hero__names{font:400 clamp(78px,11vw,158px)/.95 var(--display);color:var(--creme2);display:flex;flex-direction:column;margin:16px 0 24px;text-shadow:4px 4px 0 var(--laranja),9px 9px 0 var(--rosa)}
.hero__names i{font-style:normal;font-size:.55em;color:var(--mostarda);padding-left:.4em;margin:-.02em 0;text-shadow:3px 3px 0 var(--choc)}
.hero__sub{font:300 clamp(19px,1.9vw,23px)/1.4 var(--sans);color:var(--creme);max-width:28ch;margin-bottom:34px}
.hero__rainbow{position:absolute;left:0;right:0;bottom:-2px;z-index:2;height:60px;background:var(--wavy) repeat-x center/240px 60px}
.hero__rainbow i{display:none}

/* =================== HISTÓRIA + RELÓGIO FLIP =================== */
.story{padding:clamp(90px,12vw,160px) 0 clamp(70px,9vw,110px);position:relative}
.story__grid{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(30px,6vw,90px);align-items:center}
.story__grid > *{min-width:0}
.story__il{width:min(320px,100%);justify-self:center;rotate:-4deg}
.clock{margin-top:clamp(60px,8vw,100px);background:var(--choc);color:var(--creme);border-radius:28px;padding:clamp(24px,3.6vw,44px);position:relative;overflow:hidden;box-shadow:0 30px 60px -40px rgba(43,22,16,.8)}
.clock::before{content:"";position:absolute;right:-150px;bottom:-150px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,transparent 0 30%,var(--rosa) 30% 40%,transparent 40% 48%,var(--mostarda) 48% 58%,transparent 58% 66%,var(--laranja) 66% 76%,transparent 76%);opacity:.9}
.clock__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 20px;position:relative}
.clock__title{font:400 clamp(24px,2.8vw,34px)/1.1 var(--display);color:var(--mostarda)}
.clock__day{font:800 12px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--creme);opacity:.8}
.flips{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:12px;margin-top:28px;position:relative}
.flipu{display:flex;flex-direction:column;align-items:center;gap:10px}
.flipu > span{font:700 11px var(--sans);letter-spacing:.28em;text-transform:uppercase;color:rgba(246,231,203,.7)}
.flip{--h:1.18em;position:relative;height:var(--h);width:1.5em;font:800 clamp(52px,7.4vw,104px)/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--creme2);perspective:500px;border-radius:.1em;box-shadow:0 .08em 0 #120805,0 .12em .25em rgba(0,0,0,.4)}
.flip[data-k="d"]{width:2.15em}
.flip > span{position:absolute;left:0;right:0;height:50%;overflow:hidden;text-align:center;background:linear-gradient(180deg,#5a3020,#4a2618);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip__t,.flip__ft{top:0;line-height:var(--h);border-radius:.1em .1em 0 0}
.flip__b,.flip__fb{bottom:0;line-height:0;border-radius:0 0 .1em .1em;background:linear-gradient(180deg,#43221a,#3a1e15)!important}
.flip__ft{z-index:2;transform-origin:50% 100%}
.flip__fb{z-index:2;transform-origin:50% 0;transform:rotateX(90deg)}
.flip::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#1a0c08;z-index:3}
.flip.go .flip__ft{animation:flipT .32s ease-in forwards}
.flip.go .flip__fb{animation:flipB .32s .32s ease-out forwards}
@keyframes flipT{to{transform:rotateX(-90deg)}}
@keyframes flipB{from{transform:rotateX(90deg)}to{transform:rotateX(0)}}
.clock__facts{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:30px;padding-top:22px;border-top:2px dashed rgba(246,231,203,.2);position:relative}
.clock__facts li{font-size:14.5px;color:rgba(246,231,203,.8);min-width:0}
.clock__facts b{display:block;font:400 30px/1.1 var(--display);color:var(--rosa)}
@media (max-width:700px){
  .story__grid{grid-template-columns:1fr}.story__il{width:210px;order:-1}
  .flips{grid-template-columns:repeat(2,auto);justify-content:space-around;row-gap:22px}
  .flip{font-size:62px}
  .clock__facts{grid-template-columns:1fr 1fr}
  .clock::before{display:none}
  .clock__title{max-width:12ch}
  .clock__day{margin-right:0}
}

/* =================== PROGRAMAÇÃO (tracklist / contracapa do LP) =================== */
.prog{position:relative;padding:clamp(80px,10vw,150px) 0;background:radial-gradient(80% 60% at 50% 0%,#6a341d 0%,transparent 70%),var(--choc);color:var(--creme);overflow:hidden}
.prog::before{content:"";position:absolute;left:50%;top:0;width:220vmax;height:220vmax;translate:-50% -50%;background:repeating-conic-gradient(from 0deg,rgba(246,231,203,.035) 0 5deg,transparent 5deg 10deg);pointer-events:none}
.prog > .wrap{position:relative}
.back{position:relative;margin-top:clamp(46px,6vw,76px)}
.back__disc{position:absolute;width:min(520px,60vw);aspect-ratio:1;right:-6%;top:-90px;border-radius:50%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
.back__disc > i{position:absolute;inset:33%;border-radius:50%;background:radial-gradient(circle,var(--creme2) 0 4%,transparent 4.5%),radial-gradient(circle,transparent 0 82%,var(--mostarda) 83%),var(--rosa)}
.back__cols{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);background:var(--creme2);color:var(--choc);border-radius:6px;padding:clamp(28px,4vw,52px);box-shadow:0 40px 70px -30px rgba(0,0,0,.7)}
.back__cols::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.45;mix-blend-mode:multiply;border-radius:6px;pointer-events:none}
.back__cols::after{content:"";position:absolute;left:0;right:0;top:0;height:10px;border-radius:6px 6px 0 0;background:linear-gradient(90deg,var(--laranja) 0 33%,var(--mostarda) 33% 66%,var(--rosa) 66%)}
.side{position:relative;min-width:0}
.side__t{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;font:400 clamp(22px,2.2vw,28px)/1.1 var(--soft);font-weight:800;font-style:italic;color:var(--choc2);margin-bottom:18px}
.side__t span{font:400 clamp(22px,2.2vw,28px)/1 var(--display);font-style:normal;background:var(--laranja);color:var(--creme2);padding:8px 16px 10px;border-radius:999px}
.side + .side .side__t span{background:var(--rosa2)}
.tracks{list-style:none;display:grid}
.track{position:relative;display:grid;grid-template-columns:46px 1fr auto;gap:14px;align-items:start;padding:16px 10px 16px 6px;border-top:1.5px dashed rgba(43,22,16,.2);cursor:pointer;border-radius:10px;transition:background .3s}
.track:hover,.track:focus-visible{background:rgba(242,141,178,.18)}
.track__n{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--choc);color:var(--mostarda);font:800 14px var(--sans);letter-spacing:.04em;position:relative}
.track:hover .track__n{animation:spinN 1.6s linear infinite}
@keyframes spinN{to{transform:rotate(360deg)}}
.track h4{font:800 clamp(18px,1.6vw,21px)/1.2 var(--soft);color:var(--choc)}
.track p{font-size:14.5px;line-height:1.45;color:var(--muted);margin-top:4px;font-weight:300}
.track__time{text-align:right;font:600 13px/1.3 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.track__time b{display:block;font:400 21px/1.1 var(--display);color:var(--laranja)}
.track--hit::before{content:"hit";position:absolute;left:30px;top:6px;z-index:1;font:400 12px/1 var(--display);background:var(--mostarda);color:var(--choc);padding:4px 6px 5px;border-radius:999px;rotate:-12deg}
.bonus{position:relative;margin-top:22px;background:var(--mostarda);color:var(--choc);border:0;border-radius:16px;padding:18px 20px 18px 16px;box-shadow:0 30px 50px -30px rgba(0,0,0,.7)}
.bonus .track__n{background:var(--choc);color:var(--rosa);font-size:18px}
.bonus p{color:rgba(43,22,16,.75)}
.bonus .track__time,.bonus .track__time b{color:var(--choc)}
.bonus:hover{background:#efb440}
@media (max-width:820px){
  .back__cols{grid-template-columns:1fr}
  .back__disc{display:none}
}
@media (max-width:520px){
  .track{grid-template-columns:40px 1fr;gap:12px;padding:14px 4px}
  .track__n{width:36px;height:36px;font-size:13px}
  .track__time{grid-column:2;grid-row:1;text-align:left;display:flex;gap:10px;align-items:baseline}
  .track__time b{display:inline;font-size:18px}
  .track > div{grid-column:2}
  .track--hit::before{left:24px}
}

/* =================== TRAJE (paleta em discos coloridos) =================== */
.dress{padding:clamp(80px,10vw,140px) 0}
.dress__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,90px);align-items:center}
.dress__grid > *{min-width:0}
.dress__tips{list-style:none;margin-top:24px;display:grid;gap:14px;color:var(--muted);font-size:16px}
.dress__tips li{display:flex;align-items:center;gap:16px}
.dress__tips img{width:72px;flex:none}
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.sw{display:flex;flex-direction:column;align-items:center;gap:10px}
.sw i{display:block;width:100%;aspect-ratio:1;border-radius:50%;position:relative;background:radial-gradient(circle,var(--creme2) 0 5%,var(--choc) 5.5% 7%,transparent 7.5%),radial-gradient(circle,transparent 0 28%,rgba(0,0,0,.18) 29%,transparent 30%),repeating-radial-gradient(circle,rgba(0,0,0,.08) 0 1.2px,transparent 1.2px 3px),var(--c);box-shadow:inset 0 0 0 2px rgba(0,0,0,.15),0 16px 24px -16px rgba(43,22,16,.6);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.sw i::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent,rgba(255,255,255,.28) 12%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 62%,transparent 75%)}
.sw:hover i{transform:rotate(360deg)}
.sw span{font:400 16px var(--display);color:var(--muted)}
@media (max-width:800px){.dress__grid{grid-template-columns:1fr}.swatches{max-width:440px}}
@media (max-width:400px){.sw span{font-size:13.5px}}

/* =================== MAPA =================== */
.mapsec{padding:clamp(80px,10vw,140px) 0;background:var(--creme)}
.mapsec__grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(20px,3vw,40px);margin-top:44px;align-items:start}
.mapsec__grid > *{min-width:0}
.map{height:min(70vh,600px);border-radius:22px;border:3px solid var(--choc);z-index:1;background:#e8dcc4}
.map .leaflet-tile-pane{filter:saturate(.65) sepia(.35) hue-rotate(-8deg) brightness(1.02)}
.leaflet-container{font-family:var(--sans)}
.pin{position:relative;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,transparent 0 30%,#0b0808 30.5% 32%,transparent 32.5%),repeating-radial-gradient(circle,#161111 0 1.4px,#2a2220 1.4px 2.8px);box-shadow:0 8px 12px rgba(0,0,0,.4),inset 0 0 0 2px #050404;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.pin span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--pc,var(--laranja));color:var(--creme2);font:400 12px var(--display)}
.pin.is-on{transform:scale(1.3);animation:pinSpin 2s linear infinite}
@keyframes pinSpin{to{rotate:360deg}}
.places{list-style:none;display:grid;gap:12px}
.place{background:var(--creme2);border:2px solid transparent;border-radius:18px;padding:18px 18px 18px 20px;cursor:pointer;transition:border-color .3s,box-shadow .3s;box-shadow:0 10px 24px -20px rgba(43,22,16,.6)}
.place.is-on{border-color:var(--laranja);box-shadow:5px 5px 0 var(--mostarda)}
.place__day{font:800 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--laranja)}
.place h3{font:800 23px/1.15 var(--soft);margin:6px 0 2px}
.place p{font-size:14.5px;color:var(--muted)}
.place__go{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.place__go a{font:700 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:7px 11px;border:1.5px solid var(--linha);border-radius:999px}
.place__go a:hover{background:var(--choc);color:var(--creme)}
.places__hint{display:none}
@media (max-width:900px){
  .mapsec__grid{grid-template-columns:1fr;width:100%;gap:14px}
  .mapbox{padding:0 16px}
  .map{height:min(56svh,440px)}
  .places{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 7vw 12px;scroll-padding:0 7vw;scrollbar-width:none;overscroll-behavior-x:contain}
  .places::-webkit-scrollbar{display:none}
  .place{flex:none;width:84vw;max-width:400px;scroll-snap-align:center}
  .places__hint{display:block;text-align:center;font:600 14px var(--sans);letter-spacing:.04em;color:var(--laranja)}
}

/* =================== VIAGEM =================== */
.trip{padding:clamp(80px,10vw,140px) 0}
.trip__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,36px);margin-top:46px}
.trip__item{min-width:0}
.trip__il{height:110px;width:auto;margin-bottom:16px}
.trip__item h3{font:800 25px/1.1 var(--soft);color:var(--choc)}
.trip__item p{margin-top:8px;font-size:15.5px;color:var(--muted);font-weight:300}
@media (max-width:900px){.trip__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.trip__grid{grid-template-columns:1fr}}

/* =================== PRESENTES (caixote de discos) =================== */
.gifts{position:relative;padding:clamp(80px,10vw,140px) 0;background:radial-gradient(70% 50% at 50% 0%,rgba(227,167,47,.25),transparent 70%),linear-gradient(180deg,var(--laranja2),#7a2f12 55%,var(--choc));color:var(--creme);overflow:hidden}
.crates{margin-top:56px;display:grid;gap:clamp(40px,5vw,60px)}
.crate{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.2vw,30px);align-items:start}
.lp{position:relative;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;text-align:left;padding:0;color:inherit;min-width:0}
.lp__box{position:relative;width:100%;aspect-ratio:1/1.08;display:flex;align-items:flex-end}
.lp__box::after{content:"";position:absolute;left:calc(clamp(14px,2.2vw,30px) / -2 - 1px);right:calc(clamp(14px,2.2vw,30px) / -2 - 1px);bottom:-12px;height:38%;z-index:3;background:repeating-linear-gradient(180deg,transparent 0 46%,rgba(0,0,0,.22) 46% 50%,transparent 50%),repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 2px,transparent 2px 36px),linear-gradient(180deg,#c48a55,#a06a3c 60%,#86552d);box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 18px 26px -12px rgba(0,0,0,.6)}
.crate .lp:first-child .lp__box::after{border-radius:8px 0 0 8px;left:-10px}
.crate .lp:last-child .lp__box::after{border-radius:0 8px 8px 0;right:-10px}
.lp__sleeve{position:relative;width:100%;aspect-ratio:1;transition:transform .55s cubic-bezier(.3,1.5,.5,1);z-index:2}
.lp__sleeve img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:2px;box-shadow:0 10px 20px -8px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.2)}
.lp__disc{position:absolute;inset:3%;border-radius:50%;z-index:0;transition:transform .7s cubic-bezier(.3,1.3,.5,1)}
.lp__disc > i{position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle,var(--creme2) 0 5%,transparent 5.5%),var(--lc,var(--mostarda))}
.lp__price{position:absolute;z-index:4;right:-6px;top:-10px;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;text-align:center;background:var(--rosa);color:var(--choc);font:400 14px/1 var(--display);rotate:12deg;box-shadow:0 6px 0 rgba(43,22,16,.25)}
.lp:nth-child(even) .lp__price{background:var(--mostarda);rotate:-10deg}
.lp:hover .lp__sleeve,.lp:focus-visible .lp__sleeve{transform:translateY(-14%) rotate(-2deg)}
.lp:hover .lp__disc,.lp:focus-visible .lp__disc{transform:translateY(-30%) rotate(120deg)}
.lp__info{margin-top:26px;padding:0 2px}
.lp__kind{display:block;font:800 11.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--mostarda)}
.lp h3{font:800 clamp(18px,1.6vw,21px)/1.18 var(--soft);margin:6px 0 4px;color:var(--creme2)}
.lp p{font-size:13.5px;line-height:1.4;color:rgba(246,231,203,.78)}
@media (max-width:760px){
  .crate{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .crate .lp:nth-child(2) .lp__box::after{border-radius:0 8px 8px 0;right:-10px}
  .crate .lp:nth-child(3) .lp__box::after{border-radius:8px 0 0 8px;left:-10px}
  .lp__price{width:52px;height:52px;font-size:12.5px}
}

/* modal Pix */
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px}
.modal__bg{position:absolute;inset:0;background:rgba(26,13,9,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal__box{position:relative;width:min(400px,100%);max-height:92svh;overflow:auto;background:var(--creme2);border-radius:22px;padding:34px 28px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:6px 6px 0 var(--mostarda),12px 12px 0 var(--rosa)}
.modal__x{position:absolute;top:10px;right:16px;border:0;background:none;font-size:30px;cursor:pointer;color:var(--choc);z-index:1}
.pix__il{width:96px;height:96px;object-fit:cover;border-radius:3px;box-shadow:0 8px 16px -8px rgba(0,0,0,.5);rotate:-4deg}
.pix__title{font:800 25px/1.15 var(--soft);color:var(--choc)}
.pix__amount{font:400 32px var(--display);color:var(--laranja)}
.pix__val{display:flex;align-items:center;gap:8px;font:400 28px var(--display);color:var(--laranja)}
.pix__val input{width:140px;border:0;border-bottom:2px solid var(--laranja);background:none;text-align:center;font:inherit;outline:0}
.pix__qr{width:190px;height:190px;background:#fff;padding:10px;border-radius:8px}
.pix__qr svg{width:100%;height:100%}
.pix__demo{font-size:12.5px;color:var(--muted);max-width:30ch}

/* =================== RSVP =================== */
.rsvp{position:relative;padding:clamp(80px,10vw,140px) 16px;background:var(--creme2);display:grid;place-items:center;overflow:hidden}
.rsvp::before{content:"";position:absolute;left:0;right:0;top:0;height:60px;background:var(--wavy) repeat-x center/240px 60px;rotate:180deg;opacity:.9}
.rsvp__card{position:relative;width:min(620px,100%);background:#fffaf0;border-radius:26px;padding:clamp(40px,6vw,64px) clamp(24px,5vw,56px);box-shadow:8px 8px 0 var(--mostarda),16px 16px 0 var(--rosa),0 40px 80px -40px rgba(43,22,16,.5);border:2px solid var(--choc)}
.rsvp__form,.rsvp__done{position:relative;display:flex;flex-direction:column;gap:20px}
.rsvp__form .h2{font-size:clamp(34px,4.6vw,52px)}
.rsvp__deadline{color:var(--muted);margin-top:-6px}
.fld{display:flex;flex-direction:column;gap:4px;font:800 12px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--laranja2)}
.fld input,.fld textarea,.fld select{font:400 17px var(--sans);letter-spacing:0;text-transform:none;color:var(--tinta);padding:10px 2px;border:0;border-bottom:1.5px solid rgba(43,22,16,.3);background:transparent;outline:0;border-radius:0;resize:vertical}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--laranja)}
fieldset{border:0}
legend{font:800 12px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--laranja2);margin-bottom:10px}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice legend{grid-column:1/-1}
.choice input,.chips input{position:absolute;opacity:0;pointer-events:none}
.choice span{display:block;text-align:center;padding:14px 10px;border:2px solid rgba(43,22,16,.25);border-radius:999px;cursor:pointer;font:800 18px var(--soft);transition:all .3s}
.choice input:checked + span{background:var(--choc);color:var(--mostarda);border-color:var(--choc)}
.choice input:focus-visible + span,.chips input:focus-visible + span{outline:2px solid var(--laranja);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips legend{width:100%}
.chips span{display:inline-block;padding:9px 14px;border:1.5px solid rgba(43,22,16,.25);border-radius:999px;cursor:pointer;font-size:14.5px;transition:all .25s}
.chips input:checked + span{background:rgba(242,141,178,.25);border-color:var(--rosa2)}
.stepper{display:flex;align-items:center;border:2px solid rgba(43,22,16,.25);border-radius:999px;width:max-content}
.stepper button{width:46px;height:44px;border:0;background:none;font-size:22px;cursor:pointer;color:var(--choc)}
.stepper output{min-width:40px;text-align:center;font:400 22px var(--display);color:var(--laranja)}
#fAcomp{display:flex;flex-direction:column;gap:14px}
#fAcomp:empty{display:none}
.rsvp__err{color:#a23b2a;font-size:14px}
.rsvp__err:empty{display:none}
.rsvp__done{align-items:center;text-align:center}
.rsvp__done p{color:var(--muted);max-width:40ch}
.wa-bubble{align-self:stretch;text-align:left;background:var(--creme);color:var(--choc);border-radius:16px 16px 4px 16px;padding:14px 16px;font-size:14.5px;line-height:1.5;white-space:pre-line;max-width:440px;margin:0 auto;border-left:5px solid var(--laranja)}
.rsvp__demo{font-size:13px!important}
/* a resposta vira uma fita cassete: grava e ejeta */
.tape{position:fixed;inset:0;z-index:90;pointer-events:none;visibility:hidden;display:grid;place-items:center;background:radial-gradient(60% 60% at 50% 50%,rgba(74,38,24,.92),rgba(26,13,9,.96))}
.tape__deck{display:flex;flex-direction:column;align-items:center;gap:18px;width:min(440px,86vw)}
.tape__rec{display:flex;align-items:center;gap:10px;font:800 13px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--creme)}
.tape__rec i{width:12px;height:12px;border-radius:50%;background:#ff3b2f;box-shadow:0 0 12px #ff3b2f;animation:breathe .8s steps(2) infinite}
.cassette{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.cassette__side{font:400 30px var(--display);fill:var(--laranja)}
.cassette__label{font:400 22px var(--display);fill:var(--choc)}
.tape__bar{width:70%;height:6px;border-radius:9px;background:rgba(246,231,203,.15);overflow:hidden}
.tape__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--laranja),var(--mostarda),var(--rosa))}

/* =================== FIM: a pista de dança que acende =================== */
.end{position:relative;min-height:100svh;overflow:hidden;color:var(--creme);background:radial-gradient(60% 45% at 50% 18%,rgba(217,98,43,.28),transparent 70%),radial-gradient(80% 60% at 50% 100%,rgba(242,141,178,.18),transparent 70%),#1a0d09;touch-action:pan-y}
.end__spots{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen}
.end__beam{position:absolute;left:0;top:0;width:0;height:0;z-index:2;pointer-events:none}
.end__beam::before{content:"";position:absolute;left:-60px;top:0;width:120px;height:var(--len,0px);background:linear-gradient(180deg,rgba(255,240,220,.28),rgba(255,240,220,0));clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);transform-origin:50% 0;rotate:var(--ang,0deg)}
.end__ball{position:absolute;left:50%;top:0;z-index:4;width:min(170px,30vw);aspect-ratio:1;translate:-50% 0;margin-top:clamp(10px,4vh,40px);pointer-events:none}
.end__in{position:absolute;z-index:5;top:calc(var(--top-h) + clamp(150px,22vh,220px));left:0;right:0;text-align:center;padding:0 20px;pointer-events:none}
.end__big{font:400 clamp(58px,9.4vw,136px)/1 var(--display);color:var(--creme2);margin-top:8px;text-shadow:4px 4px 0 var(--laranja),9px 9px 0 var(--rosa2)}
.end__hint{margin-top:16px;font:600 16px var(--sans);letter-spacing:.04em;color:var(--mostarda)}
.floor__wrap{position:absolute;left:-30%;right:-30%;bottom:0;height:46%;z-index:3;perspective:620px;perspective-origin:50% -40%;pointer-events:none}
.floor{position:absolute;left:0;right:0;bottom:-6%;height:150%;display:grid;grid-template-columns:repeat(var(--cols,16),1fr);grid-auto-rows:1fr;gap:4px;transform:rotateX(62deg);transform-origin:50% 100%;pointer-events:auto}
.tile{border-radius:3px;background:rgba(246,231,203,.05);box-shadow:inset 0 0 0 1px rgba(246,231,203,.08);transition:background-color 1.6s ease-out,box-shadow 1.6s ease-out}
.tile.on{transition:none;background:var(--c);box-shadow:0 0 34px 6px var(--c),inset 0 0 0 1px rgba(255,255,255,.4)}
.end__foot{position:absolute;z-index:6;bottom:16px;left:16px;right:16px;text-align:center;font:400 11.5px var(--sans);letter-spacing:.06em;color:rgba(246,231,203,.9);text-shadow:0 1px 8px rgba(0,0,0,.8);pointer-events:none}
.end__foot a{color:#fff;pointer-events:auto}

.demo-tag{position:fixed;z-index:60;left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));font:400 11px var(--sans);letter-spacing:.1em;text-decoration:none;background:rgba(43,22,16,.92);color:var(--creme);padding:8px 12px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .4s}
body.is-open .demo-tag{opacity:1;pointer-events:auto}
body.at-end .demo-tag{opacity:0;pointer-events:none}
.toast{position:fixed;left:50%;bottom:24px;translate:-50% 220%;background:var(--choc);color:var(--creme);padding:12px 20px;border-radius:999px;font-size:14px;z-index:140;transition:translate .4s ease;visibility:hidden}
.toast.is-on{translate:-50% 0;visibility:visible}

.reveal-words .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.18em .04em .1em;margin:-.18em -.04em -.1em}
.reveal-words .w > span{display:inline-block}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== celular ===== */
@media (max-width:700px){
  .hero__veil{background:linear-gradient(180deg,rgba(26,13,9,.55) 0%,rgba(26,13,9,.82) 30%,rgba(26,13,9,.7) 62%,rgba(26,13,9,.15) 88%)}
  .hero{align-items:flex-start;padding-top:calc(var(--top-h) + 40px)}
  .hero__bg img{object-position:72% 50%}
  .story,.dress,.trip,.mapsec{padding-block:56px}
  .prog,.gifts{padding-block:64px}
  .rsvp{padding-block:70px}
  .trip__grid{gap:26px;margin-top:30px}
  .trip__item{display:grid;grid-template-columns:84px 1fr;column-gap:16px;align-items:start}
  .trip__il{grid-row:span 2;height:auto;width:84px;margin:0}
  .trip__item p{margin-top:2px}
  .choice span{font-size:16px;padding:12px 8px}
  .rsvp__card{box-shadow:5px 5px 0 var(--mostarda),10px 10px 0 var(--rosa)}
  .sleeve{width:min(88vw,74svh)}
  .sleeve__disc{transform:translateY(calc(var(--d,0) * -30%)) rotate(calc(var(--d,0) * 140deg))}
  .sleeve__cover{padding:9% 7% 8%;gap:5px}
  .sleeve__sticker{top:9%;left:5%}
  .floor__wrap{height:44%}
}