/* Camila & Bruno — protótipo da abertura (bike escreve os nomes + linha-guia) */
:root{
  --paper:#FCF4EA; --sand:#EFE3D0; --ink:#233B2D; --text:#24302A; --soft:#717A70; --sun:#D9823F; --line:rgba(35,59,45,.16);
  --serif:"Instrument Serif",Georgia,serif; --sans:"Instrument Sans",system-ui,sans-serif; --script:"Kristi",cursive;
  --top-h:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
main{position:relative;overflow-x:clip}
body{background:var(--paper);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{text-wrap:balance;font-weight:400}
p{text-wrap:pretty}
.wrap{width:min(1100px,100% - 48px);margin:0 auto}
.center{text-align:center}
.display{font-family:var(--serif);font-size:clamp(40px,4.6vw,66px);line-height:1.04;color:var(--ink);letter-spacing:-.01em}
.lede{font-size:clamp(17px,1.4vw,19px);color:var(--text);max-width:560px;margin-top:18px}
.lede.center{margin-left:auto;margin-right:auto}
.btn{font:600 15px/1 var(--sans);letter-spacing:.02em;padding:17px 30px;border-radius:999px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;transition:transform .25s,background .25s,color .25s}
.btn:hover{transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--ink)}

/* cabeçalho */
.top{position:fixed;left:0;right:0;top:0;height:var(--top-h);z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,3vw,40px);
  opacity:0;transform:translateY(-12px);transition:opacity .5s,transform .5s;pointer-events:none}
body.is-open .top{opacity:1;transform:none;pointer-events:auto;background:rgba(252,244,234,.94)}
.top__mono{font-family:var(--script);font-size:34px;color:var(--ink);text-decoration:none;line-height:1}
.top__mono span{font-family:var(--serif);font-style:italic;font-size:22px;margin:0 2px}
.top__nav{display:flex;gap:28px}
.top__nav a,.top__cta{font-size:14px;text-decoration:none;color:var(--ink)}
.top__cta{border:1.5px solid var(--ink);border-radius:999px;padding:9px 16px;font-weight:600}

/* abertura */
.opening{position:relative;height:100svh;overflow:hidden;z-index:3}
.road{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible;visibility:hidden}
.hero-canvas{position:absolute;left:0;top:0;z-index:3;pointer-events:none}
.names path{visibility:hidden}
.road path{stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hero-rider,.rider{position:absolute;left:0;top:0;width:clamp(116px,10.5vw,176px);transform-origin:0 0;will-change:transform;backface-visibility:hidden}
.hero-rider{z-index:5;pointer-events:none}
.bob{position:absolute;left:0;top:0;width:calc(clamp(116px,10.5vw,176px) * .5);aspect-ratio:300/232;background:url(img/bob-corre.webp?v=1794316243) 0 0/400% 100% no-repeat;transform-origin:0 0;will-change:transform;pointer-events:none}
.hero-bob{z-index:5}
#bob{opacity:0}#bob.is-on{opacity:1}
.hero-rider.is-idle{animation:idle .9s ease-in-out infinite}
@keyframes idle{50%{translate:0 -2px}}
.intro{position:absolute;left:0;right:0;top:18svh;z-index:6;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 20px;gap:10px}
.intro__name{font-family:var(--script);font-size:clamp(54px,6vw,86px);line-height:1;color:var(--ink);transform:rotate(-6deg);margin-bottom:6px}
.intro__hello{font-family:var(--serif);font-style:italic;font-size:clamp(26px,2.8vw,40px);color:var(--text);max-width:720px;text-wrap:balance}
.intro__go{margin-top:22px}
.intro__hint{margin-top:16px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);animation:pulse 2.2s infinite}
@keyframes pulse{50%{opacity:.35}}
.hero{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--top-h) + 10px) 20px 200px}
.hero__hello{position:absolute;top:calc(var(--top-h) + 14px);left:0;right:0;text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.8vw,24px);color:var(--ink);z-index:2}
.hero__names{width:min(860px,92vw,calc((100svh - 360px) * 1080 / 820));aspect-ratio:1080/820;color:var(--ink)}
.names{width:100%;height:100%;overflow:visible}
.pen{visibility:hidden}
.hero__date{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2vw,28px);color:var(--text);margin-top:8px;opacity:0}

/* linha-guia */
.guide{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:1}
.guide svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.guide path{stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.rider{opacity:0}
.rider.is-on{opacity:1}
.sec{position:relative;z-index:2}

/* ---------- utilidades de seção ---------- */
.tbc{color:var(--soft);font-size:.86em;white-space:nowrap}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .w > i{display:inline-block;font-style:inherit;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.split.is-in .w > i{transform:none}

/* ---------- convite + previsão ---------- */
.invite{padding:clamp(130px,14vw,190px) 0 clamp(90px,9vw,140px)}
.invite__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.invite__grid > *{min-width:0}
.swell{position:relative;background:var(--ink);color:var(--paper);border-radius:30px;padding:clamp(28px,3vw,42px) clamp(24px,3vw,40px) 70px;overflow:hidden}
.swell__h{font-family:var(--serif);font-style:italic;font-size:22px;opacity:.85;margin-bottom:18px}
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.count div{background:rgba(252,244,234,.08);border:1px solid rgba(252,244,234,.16);border-radius:16px;padding:16px 6px;text-align:center}
.count b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(36px,3.6vw,54px);line-height:1}
.count span{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.65}
.swell__rows{margin-top:22px;display:grid;gap:8px}
.swell__rows div{display:flex;justify-content:space-between;gap:16px;border-top:1px dashed rgba(252,244,234,.22);padding-top:8px;font-size:15px}
.swell__rows dt{opacity:.6;text-transform:uppercase;letter-spacing:.12em;font-size:12px;padding-top:3px}
.swell__rows dd{font-family:var(--serif);font-style:italic;font-size:19px;text-align:right}
.swell__wave{position:absolute;left:0;bottom:14px;width:200%;height:46px;animation:swell 7s linear infinite}
.swell__wave path{fill:none;stroke:var(--sun);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:40 26}
@keyframes swell{to{transform:translateX(-50%)}}

/* ---------- o caminho até aqui (mapa) ---------- */
.trip{height:440vh}
.trip__stage{position:sticky;top:0;height:100vh;height:100lvh;display:grid;grid-template-columns:minmax(320px,.8fr) 1.2fr;gap:clamp(24px,3vw,50px);align-items:center;
  width:min(1240px,100% - 2 * (clamp(116px,10.5vw,176px) * 1.15 + 22px));margin:0 auto;padding-top:var(--top-h)} /* margem livre pra bike da linha-guia */
.trip__stage > *{min-width:0}
.trip__side .display{font-size:clamp(40px,4vw,60px);margin-bottom:26px}
.trip__list{list-style:none;display:grid;gap:10px;counter-reset:p}
.stop{display:grid;grid-template-columns:34px 1fr;gap:4px 14px;align-items:start;width:100%;text-align:left;background:none;border:0;border-radius:18px;padding:12px 14px;cursor:pointer;font:inherit;color:var(--text);transition:background .4s}
.stop__n{grid-row:span 2;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font:600 13px var(--sans);color:var(--ink);transition:background .3s,color .3s}
.stop__t{font-family:var(--serif);font-size:clamp(22px,1.9vw,28px);line-height:1.1;color:var(--ink)}
.stop__t small{font-family:var(--sans);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-left:6px}
.stop__c{font-size:12.5px;letter-spacing:.08em;color:var(--soft)}
.stop__more{grid-column:2;display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.2,.8,.2,1)}
.stop__more > div{overflow:hidden}
.stop__more img{width:min(200px,62%);margin:8px 0 4px}
@media (max-height:820px) and (min-width:901px){.stop__more img{width:min(140px,50%)}.trip__side .display{margin-bottom:14px}.stop{padding:9px 12px}}
.stop__more p{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--sun);line-height:1.3}
.stop.is-on{background:#fffaf2;box-shadow:0 18px 36px -28px rgba(35,59,45,.5)}
.stop.is-on .stop__n{background:var(--ink);color:var(--paper)}
.stop.is-on .stop__more{grid-template-rows:1fr}
.trip__map{position:relative;height:min(78vh,720px);border-radius:30px;overflow:hidden;border:1.5px solid var(--ink);background:#F7EEDF;box-shadow:0 30px 60px -40px rgba(35,59,45,.5)}
.trip__map canvas{position:absolute;inset:0;width:100%;height:100%}
.trip__pins{position:absolute;inset:0;pointer-events:none}
.pin2{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;white-space:nowrap;transition:opacity .4s}
.pin2 i{width:14px;height:14px;border-radius:50%;background:var(--paper);border:2.5px solid var(--ink);box-shadow:0 0 0 6px rgba(217,130,63,.0);transition:box-shadow .4s,background .4s}
.pin2 b{font:600 13px var(--sans);color:var(--ink);background:rgba(252,244,234,.9);padding:4px 10px;border-radius:999px;opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .4s}
.pin2.is-on i{background:var(--sun);box-shadow:0 0 0 8px rgba(217,130,63,.22)}
.pin2.is-on b,.pin2.is-seen b{opacity:1;transform:none}
.pin2.is-left{flex-direction:row-reverse}
.trip__hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);background:rgba(252,244,234,.85);padding:6px 12px;border-radius:999px;white-space:nowrap;transition:opacity .5s}

/* ---------- o pedido ---------- */
.story{padding:clamp(90px,9vw,140px) 0}
.story__grid{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:clamp(40px,6vw,100px);align-items:center}
.story__grid > *{min-width:0}
.polaroid{background:#fff;padding:16px 16px 0;box-shadow:0 30px 60px -30px rgba(35,59,45,.45),0 2px 6px rgba(0,0,0,.06);transform:rotate(-4deg);transition:transform .6s cubic-bezier(.3,1.5,.5,1);cursor:grab;user-select:none;touch-action:none}
.polaroid:hover{transform:rotate(-1deg) scale(1.02)}
.polaroid__img{position:relative;aspect-ratio:4/5;overflow:hidden;background:#2a2418}
.polaroid__img img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.polaroid__dev{position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 40%,#5a4a32,#231c12);opacity:1;transition:opacity 3.2s cubic-bezier(.4,0,.2,1)}
.polaroid.is-dev .polaroid__dev{opacity:0}
.polaroid figcaption{font-family:var(--script);font-size:34px;color:var(--ink);text-align:center;padding:12px 0 16px;line-height:1.1}
.postcard{position:relative;display:grid;grid-template-columns:1.4fr 1fr;gap:28px;background:#fffaf2;border-radius:6px;padding:clamp(28px,3vw,44px);box-shadow:0 24px 50px -32px rgba(35,59,45,.4);
  background-image:repeating-linear-gradient(135deg,var(--sun) 0 14px,transparent 14px 28px,var(--ink) 28px 42px,transparent 42px 56px);background-size:100% 10px;background-repeat:no-repeat;background-position:0 0}
.postcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:inherit;background-position:0 0}
.postcard__msg{border-right:1.5px solid var(--line);padding-right:28px}
.postcard .display{font-size:clamp(36px,3.5vw,52px)}
.postcard__kick{font-family:var(--serif);font-style:italic;color:var(--sun);font-size:20px;margin-bottom:8px}
.postcard__side{display:flex;flex-direction:column;align-items:flex-end;gap:10px;position:relative}
.stamp{width:110px;padding:8px;background:var(--paper);color:var(--ink);text-align:center;transform:rotate(4deg);
  -webkit-mask:radial-gradient(circle 5px at 50% 0,#0000 98%,#000) 0 0/14px 51% repeat-x,radial-gradient(circle 5px at 50% 100%,#0000 98%,#000) 0 100%/14px 51% repeat-x;
  mask:radial-gradient(circle 5px at 50% 0,#0000 98%,#000) 0 0/14px 51% repeat-x,radial-gradient(circle 5px at 50% 100%,#0000 98%,#000) 0 100%/14px 51% repeat-x;outline:1.5px solid var(--ink);outline-offset:-8px}
.stamp svg{width:100%;display:block}
.stamp svg *{fill:none;stroke:var(--ink);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.stamp svg circle{fill:var(--sun);stroke:none}
.stamp span{font-family:var(--serif);font-style:italic;font-size:16px}
.postmark{position:absolute;right:70px;top:46px;width:120px;opacity:0;transform:scale(1.6) rotate(-30deg)}
.postmark svg *{fill:none;stroke:var(--sun);stroke-width:2.4}
.postmark text{fill:var(--sun);stroke:none;font:600 11px var(--sans);letter-spacing:.18em}
.postmark .pm-mid{font:400 22px var(--serif);font-style:italic;letter-spacing:0}
.postcard.is-in .postmark{animation:carimbo .5s .9s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes carimbo{to{opacity:.85;transform:scale(1) rotate(-14deg)}}
.postcard__to{margin-top:auto;width:100%;font-family:var(--serif);font-style:italic;font-size:19px;line-height:2;border-bottom:1px solid var(--line);
  background:repeating-linear-gradient(transparent 0 37px,var(--line) 37px 38px)}
.postcard__to b{font-weight:400;color:var(--ink)}

/* ---------- dois dias (cena presa) ---------- */
.days{height:520vh;background:var(--ink)}
.stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden}
.sky{position:absolute;inset:0;background:linear-gradient(#F6E7CF,#FCF4EA 70%)}
.sun{position:absolute;left:62%;top:14%;width:clamp(80px,9vw,140px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 40%,#F2A65A,var(--sun));box-shadow:0 0 0 18px rgba(217,130,63,.12),0 0 0 40px rgba(217,130,63,.06)}
.moon{position:absolute;left:24%;top:12%;width:clamp(50px,5vw,80px);aspect-ratio:1;border-radius:50%;box-shadow:inset -14px 6px 0 0 #F6EBD6;opacity:0;transform:rotate(-20deg)}
.stars{position:absolute;inset:0 0 45% 0;opacity:0}
.stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#FCF4EA;animation:tw 2.6s ease-in-out infinite}
@keyframes tw{50%{opacity:.25;transform:scale(.6)}}
.pano{position:absolute;left:50%;bottom:0;width:max(100vw,calc(100lvh * 2.3576));aspect-ratio:2400/1018;transform:translate(-50%,9%)}
.pano__day,.pano__night,.pano > svg{position:absolute;inset:0;width:100%;height:100%}
.pano__night{opacity:0}
.ground path{fill:#FCF4EA}
.turbines line,.turbines path,.turbines circle{stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;fill:none}
.turbines .blades path{fill:var(--paper)}
.turbines *{transition:stroke .6s,fill .6s}
.is-night .turbines path,.is-night .turbines circle{stroke:#FCF4EA}
.is-night .turbines .blades path,.is-night .turbines circle{fill:#16261D!important}
.lights{opacity:0}
.lights path{fill:none;stroke:#FCF4EA;stroke-width:2;opacity:.8}
.lights circle{fill:#5c5040;transition:fill .4s}
.lights circle.on{fill:#FFD38A;filter:drop-shadow(0 0 6px #FFC46B) drop-shadow(0 0 14px rgba(255,180,90,.8))}
.wake path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-dasharray:14 12;opacity:.55}
.el{position:absolute;transform-origin:50% 100%}
.el--jetski{width:11%;left:0;top:57%}
.el--wake{width:6.6%;left:0;top:55%}
.el--grill{width:5.2%;left:37.6%;top:73.4%}
.el--grill img{width:100%}
.smoke{position:absolute;left:46%;top:-6%;width:14%;height:60%;border-left:2.5px solid var(--ink);border-radius:50%;opacity:0;animation:smoke 3s linear infinite}
.smoke:nth-of-type(2){animation-delay:1s;left:34%}.smoke:nth-of-type(3){animation-delay:2s;left:58%}
@keyframes smoke{0%{transform:translateY(0) scaleY(.6) rotate(0);opacity:0}25%{opacity:.6}100%{transform:translateY(-120%) scaleY(1.2) rotate(18deg);opacity:0}}
.el--pagode{width:8.6%;left:44%;top:73%;background:none;border:0;padding:0;cursor:pointer}
.el--pagode img{width:100%}
.el--pagode.is-play img{animation:sambar .26s ease-in-out infinite alternate}
@keyframes sambar{to{transform:translateY(-4%) rotate(1.2deg)}}
.pagode__hint{position:absolute;left:50%;bottom:104%;transform:translateX(-50%);white-space:nowrap;font-family:var(--script);font-size:clamp(20px,1.7vw,28px);color:var(--ink);background:var(--paper);padding:2px 12px;border-radius:999px;box-shadow:0 6px 18px -8px rgba(0,0,0,.3)}
.note{position:absolute;font-family:var(--serif);color:var(--ink);font-size:clamp(18px,1.6vw,28px);pointer-events:none;animation:note 1.8s ease-out forwards}
@keyframes note{0%{opacity:0;transform:translate(0,0) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-160px) rotate(var(--r))}}
.el--arch{width:6.4%;left:66.4%;top:61%;opacity:0}
.ripples{position:absolute;left:0;right:0;top:52%;height:28%;pointer-events:none}
.ripple{position:absolute;width:10px;height:4px;border:1.5px solid var(--ink);border-radius:50%;transform:translate(-50%,-50%);animation:ripple 1.6s ease-out forwards;pointer-events:none}
.is-night .ripple{border-color:#FCF4EA}
@keyframes ripple{to{width:120px;height:26px;opacity:0}}
.days__copy{position:absolute;left:clamp(24px,5vw,80px);top:clamp(90px,14vh,150px);width:min(460px,40vw)}
.day{position:absolute;left:0;top:0;width:100%;opacity:0;transform:translateY(30px)}
.day__script{font-family:var(--script);font-size:clamp(84px,9vw,150px);line-height:.8;color:var(--ink);transform:rotate(-6deg);transform-origin:left bottom}
.day__date{font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.8vw,26px);color:var(--sun);margin:12px 0 10px}
.day__txt{font-size:clamp(17px,1.35vw,20px);color:var(--text);max-width:400px}
.day__tbc{margin-top:8px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.day--2 .day__script,.day--2 .day__txt{color:#FCF4EA}.day--2 .day__tbc{color:rgba(252,244,234,.6)}
.days__progress{position:absolute;right:clamp(20px,3vw,44px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.days__progress i{position:relative;width:2px;height:160px;background:var(--line);border-radius:2px;overflow:hidden}
.days__progress b{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--sun);transform-origin:top;transform:scaleY(0)}

/* ---------- o lugar ---------- */
.place{padding:clamp(40px,5vw,70px) 0 clamp(90px,9vw,140px);overflow:hidden}
.windrow{display:block;width:100%;height:clamp(150px,18vw,260px);margin-bottom:clamp(20px,3vw,40px)}
.windrow line,.windrow path,.windrow circle{stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;fill:none}
.windrow .blades path{fill:var(--paper)}
.windrow .ground{stroke-width:1.6;opacity:.5}
.place__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,5vw,80px);align-items:center}
.place__grid > *{min-width:0}
.place__addr{margin-top:18px;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--sun)}
.place__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.place__btns .btn{text-decoration:none;padding:14px 22px;font-size:14px}
.map{border-radius:28px;overflow:hidden;box-shadow:0 30px 60px -36px rgba(35,59,45,.5);border:1.5px solid var(--ink)}
.map__box{height:clamp(340px,34vw,460px);background:var(--sand)}
.map .leaflet-tile-pane{filter:grayscale(1) sepia(.35) hue-rotate(40deg) saturate(1.4) brightness(1.04) contrast(.92)}
.leaflet-container .leaflet-marker-pane img.map-bike{width:96px!important;height:auto!important}
.map-tag{background:var(--ink);color:var(--paper);font:600 13px var(--sans);padding:6px 12px;border-radius:999px;white-space:nowrap;box-shadow:0 8px 20px -10px rgba(0,0,0,.4)}

/* ---------- presentes: varal de etiquetas ---------- */
.gifts{padding:clamp(90px,9vw,140px) 0}
.varal{margin-top:40px;display:grid;gap:clamp(30px,4vw,56px)}
.varal__row{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,30px);padding:0 clamp(10px,2vw,30px)}
.varal__row > *{min-width:0}
.varal__corda{position:absolute;left:-2%;right:-2%;top:0;width:104%;height:46px;overflow:visible}
.varal__corda path{fill:none;stroke:#8A6A48;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1100;stroke-dashoffset:1100;transition:stroke-dashoffset 1.4s cubic-bezier(.5,0,.2,1)}
.varal__row.is-in .varal__corda path{stroke-dashoffset:0}
.tag{position:relative;display:block;width:100%;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:center;
  padding-top:calc(var(--y) + 4px);transform-origin:50% calc(var(--y) + 8px);opacity:0;transform:translateY(-40px) rotate(-14deg)}
.varal__row.is-in .tag{animation:pendura 1.5s var(--d) cubic-bezier(.3,1.6,.45,1) forwards}
@keyframes pendura{0%{opacity:0;transform:translateY(-40px) rotate(-14deg)}30%{opacity:1}55%{transform:translateY(0) rotate(7deg)}75%{transform:rotate(-3deg)}100%{opacity:1;transform:rotate(var(--r))}}
.tag:hover .tag__card,.tag:focus-visible .tag__card{animation:balanca 1.1s ease-in-out}
@keyframes balanca{20%{transform:rotate(6deg)}45%{transform:rotate(-4deg)}70%{transform:rotate(2deg)}}
.tag__peg{position:absolute;left:50%;top:calc(var(--y) - 12px);width:12px;height:30px;margin-left:-6px;border-radius:3px;background:linear-gradient(90deg,#C99A66,#A97A48);box-shadow:0 2px 3px rgba(0,0,0,.18);z-index:2}
.tag__peg::after{content:"";position:absolute;left:50%;top:12px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#6E5032}
.tag__card{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:14px;background:#fffaf2;border:1.5px solid var(--ink);border-radius:18px 18px 22px 22px;padding:24px 18px 20px;
  box-shadow:0 22px 36px -26px rgba(35,59,45,.55);transform-origin:50% -14px;transition:box-shadow .3s}
.tag:hover .tag__card{box-shadow:0 30px 44px -26px rgba(35,59,45,.6)}
.tag__hole{position:absolute;left:50%;top:10px;width:12px;height:12px;margin-left:-6px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper)}
.tag__card img{width:78%;max-width:170px;aspect-ratio:1;object-fit:contain;margin:6px 0 10px;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.tag:hover .tag__card img{transform:scale(1.07) rotate(-3deg)}
.tag__t{font-family:var(--serif);font-size:clamp(19px,1.5vw,23px);line-height:1.12;color:var(--ink);text-wrap:balance;min-height:2.3em;display:flex;align-items:center}
.tag__v{margin-top:6px;font-weight:600;color:var(--sun)}
.tag__go{margin-top:12px;font:600 13px var(--sans);letter-spacing:.06em;padding:9px 16px;border-radius:999px;border:1.5px solid var(--ink);color:var(--ink);transition:background .2s,color .2s}
.tag:hover .tag__go{background:var(--ink);color:var(--paper)}
.modal__board{width:150px;margin:0 auto 10px;transform:none}
.modal__board img{width:100%}

/* ---------- RSVP ---------- */
.rsvp{padding:clamp(90px,9vw,140px) 0}
.rsvp__wrap{max-width:720px}
.rsvp .display{font-family:var(--script);font-size:clamp(90px,10vw,150px);line-height:.9}
.rsvp__form{margin-top:36px;background:#fffaf2;border:1.5px solid var(--ink);border-radius:28px;padding:clamp(24px,3vw,40px);display:grid;gap:22px;box-shadow:0 30px 60px -40px rgba(35,59,45,.5)}
.fld{display:grid;gap:8px}
.fld > span{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.fld input,.fld textarea{font:inherit;font-size:17px;color:var(--text);background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;outline:none;transition:border-color .2s}
.fld input:focus,.fld textarea:focus{border-color:var(--ink)}
.choice{display:flex;flex-wrap:wrap;gap:10px}
.choice button{font:600 15px var(--sans);padding:13px 18px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:background .2s,color .2s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.choice button.is-on{background:var(--ink);color:var(--paper);transform:rotate(-2deg)}
.stepper{display:flex;align-items:center;gap:18px}
.stepper button{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--ink);background:none;font-size:22px;color:var(--ink);cursor:pointer}
.stepper b{font-family:var(--serif);font-weight:400;font-size:34px;min-width:30px;text-align:center}
.extra{display:grid;gap:12px}
.extra:empty{display:none}
.btn--big{justify-self:start;padding:19px 36px;font-size:16px}
.rsvp__form.is-no .only-yes{display:none}
.rsvp__err{color:#b0412a;font-size:14px}
.rsvp__ok{margin-top:40px;text-align:center}
.rsvp__okT{font-family:var(--script);font-size:clamp(70px,8vw,120px);line-height:1;color:var(--ink);transform:rotate(-4deg)}

/* efeitos fixos (bike cruzando a tela no RSVP) */
.fx{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.fx .ride{position:absolute;bottom:4vh;left:0;width:clamp(130px,12vw,190px)}
.fx .ride img{width:100%}
.fx .ride .bob{position:absolute;left:-46%;bottom:0;top:auto;width:50%;transform:none}
.fx .star{position:absolute;width:16px;height:16px;background:var(--sun);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}

/* ---------- rodapé ---------- */
.foot{position:relative;z-index:2;background:var(--ink);color:var(--paper);text-align:center;padding:90px 20px 40px}
.foot__names{font-family:var(--script);font-size:clamp(80px,10vw,150px);line-height:1}
.foot__bob{position:relative;margin:24px auto 0;display:block;width:clamp(200px,20vw,280px);background:none;border:0;cursor:pointer;padding:0}
.foot__bob img{width:100%;filter:drop-shadow(0 16px 20px rgba(0,0,0,.25))}
.foot__bob.is-up img{animation:pulo .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes pulo{40%{transform:translateY(-26px) rotate(-6deg)}}
.zzz{position:absolute;right:4%;top:-10%;font-family:var(--serif);font-style:italic;font-size:30px;color:var(--paper)}
.zzz i{display:inline-block;font-style:inherit;animation:zz 2.4s ease-in-out infinite}
.zzz i:nth-child(1){animation-delay:.4s;font-size:.8em}.zzz i:nth-child(2){animation-delay:.8s;font-size:.6em}
@keyframes zz{50%{transform:translateY(-10px);opacity:.4}}
.foot__bobTxt{margin-top:14px;font-family:var(--serif);font-style:italic;font-size:20px;opacity:.85}
.foot__credit{margin-top:50px;font-size:13px;opacity:.7}

/* Pix */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(20,32,25,.55);padding:20px}
.modal__box{position:relative;width:min(420px,100%);background:var(--paper);border-radius:28px;padding:34px 30px 28px;text-align:center;box-shadow:0 40px 80px -30px rgba(0,0,0,.5);animation:pop .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes pop{from{transform:translateY(30px) scale(.94);opacity:0}}
.modal__x{position:absolute;right:16px;top:12px;font-size:30px;background:none;border:0;color:var(--ink);cursor:pointer}

.modal__box h3{font-family:var(--serif);font-size:30px;color:var(--ink);line-height:1.1}
.modal__v{color:var(--sun);font-weight:600;margin:6px 0 16px}
.modal__free input{font:inherit;font-size:18px;margin-top:8px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--ink);width:100%;text-align:center;background:#fff}
.modal__qr{width:200px;margin:16px auto;background:#fff;padding:12px;border-radius:16px}
.modal__qr svg{display:block;width:100%;height:auto}
.modal__note{margin-top:12px;font-size:13px;color:var(--soft)}

@media (max-width:900px){
  .top__nav{display:none}
  .invite__grid,.story__grid,.place__grid,.postcard{grid-template-columns:1fr}
  .varal__row{grid-template-columns:repeat(2,1fr)}
  .display,.lede{text-align:center;margin-left:auto;margin-right:auto}
  .invite{padding:clamp(96px,22vw,130px) 0 64px}
  .story,.gifts,.rsvp{padding:64px 0}
  .story__grid{gap:44px}
  .polaroid{width:min(340px,86vw);margin:0 auto}
  .postcard{text-align:center}
  .postcard__msg{border-right:0;padding-right:0;border-bottom:1.5px solid var(--line);padding-bottom:26px}
  .postcard__side{align-items:center;min-height:250px}
  .postmark{right:auto;left:8%;top:30px}
  .postcard__to{text-align:center}
  .place{padding:20px 0 64px}
  .place__copy{text-align:center}
  .place__btns{justify-content:center}
  .days__copy{left:20px;right:20px;width:auto;top:clamp(76px,11svh,110px);text-align:center}
  .day__script{transform-origin:center bottom}
  .day__txt{margin:0 auto}
  .days__progress{display:none}
  .trip{height:460vh}
  .trip__stage{grid-template-columns:1fr;grid-template-rows:none;align-content:start;gap:12px;width:calc(100% - 2 * (clamp(116px,10.5vw,176px) * 1.15 + 22px));padding-top:calc(var(--top-h) + 6px);padding-bottom:14px}
  .trip__side{display:contents}
  .trip__side .display{font-size:clamp(34px,9vw,44px);margin:0;order:0}
  .trip__map{order:1;height:max(250px,calc(100svh - var(--top-h) - 330px));border-radius:22px}
  .trip__list{order:2;gap:0}
  .stop{display:none;text-align:center;grid-template-columns:1fr;padding:10px 6px 4px}
  .stop.is-on{display:grid;background:none;box-shadow:none}
  .stop__n{display:none}
  .stop__more{grid-column:1}
  .stop__more img{width:min(170px,46vw);margin:4px auto 2px}
  .stop__more p{font-size:17px}
  .sun{left:66%;top:36%}
  .moon{left:74%;top:38%}
  .btn--big{justify-self:center}
  .swell__h{text-align:center}
}
@media (max-width:700px){
  body::before{display:none}
  .rider,.hero-rider{width:86px}.bob{width:43px}
  .rider{width:58px}#bob{width:29px}
  .trip__stage{width:calc(100% - 116px)}
  .guide path{stroke-width:1.6;opacity:.7}
  .hero{padding:calc(var(--top-h) + 6px) 12px 150px}
  .hero__names{width:min(100vw,calc((100svh - 300px) * 1080 / 820))}
  .hero__date{font-size:19px;text-align:center;line-height:1.4;margin-top:4px}
  .hero__date span{display:block}.hero__date .sep{display:none}
  .intro{top:20svh}
  .day__script{font-size:clamp(70px,20vw,96px)}
  .day__date{font-size:19px;margin:8px 0 6px}
  .day__txt{font-size:16.5px;max-width:330px}
  .swell{padding:26px 18px 64px}
  .count{gap:7px}.count div{padding:13px 2px}
  .swell__rows dd{font-size:17px}
  .tag__card{padding:20px 10px 16px;border-radius:16px 16px 18px 18px}
  .tag__t{font-size:18px}
  .tag__go{padding:8px 13px;font-size:12.5px}
  .varal__row{gap:12px;padding:0 4px}
  .postcard{padding:26px 20px}
  .map__box{height:340px}
  .foot__names{font-size:clamp(76px,22vw,110px)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}