:root{
  --superficie:#FDFDFA; --pergaminho:#F8F7F2; --linho:#EDEAE4; --areia:#D8D6CE; --neblina:#A4A39D;
  --pedra:#6B6A65; --grafite:#43423E; --tinta:#1D1D1C;
  --noite:#1A1024; --ameixa:#3B2150; --malva:#8E5C88; --coral:#F2735F; --damasco:#FFB070; --mel:#FFD89A;
  --lavanda:#B9A2F0; --coral-profundo:#C2412F; --verde:#17743F;
  --lavanda-nevoa:#F1EBFB; --damasco-nevoa:#FFF1E3;
  --ceu:linear-gradient(180deg,#1A1024 0%,#3B2150 34%,#8E5C88 56%,#F2735F 72%,#FFB070 86%,#FFD89A 100%);
  --f-display:"Fraunces","New Kansas",Georgia,"Times New Roman",serif;
  --f-ui:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease-saida:cubic-bezier(.19,1,.22,1); --ease-suave:cubic-bezier(.23,1,.32,1);
  --ease-mola:cubic-bezier(.34,1.56,.64,1); --ease-dialogo:cubic-bezier(.16,1,.3,1); --ease-padrao:cubic-bezier(.4,0,.2,1);
  --sombra-borda:0 0 0 1px #EDEAE4,0 1px 1px -.5px rgb(29 29 28/.04),0 3px 3px -1.5px rgb(29 29 28/.04),0 6px 6px -3px rgb(29 29 28/.04),0 12px 12px -6px rgb(29 29 28/.04);
  --sombra-borda-forte:0 0 0 1px #D8D6CE,0 1px 1px -.5px rgb(29 29 28/.06),0 3px 3px -1.5px rgb(29 29 28/.06),0 6px 6px -3px rgb(29 29 28/.06),0 12px 12px -6px rgb(29 29 28/.06);
  --sombra-foto:0 16px 40px -12px rgb(26 16 36/.55);
  --sombra-foto-hover:0 24px 56px -14px rgb(26 16 36/.65);
  --sombra-ceu:0 0 0 1px rgb(255 255 255/.5),0 10px 26px -10px rgb(26 16 36/.7);
  --adesivo:drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 12px 22px rgb(26 16 36/.32));
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
*{box-sizing:border-box}
html{color-scheme:light}
body{background-color:var(--pergaminho); background-image:linear-gradient(rgb(29 29 28/.045) 1px,transparent 1px),linear-gradient(90deg,rgb(29 29 28/.045) 1px,transparent 1px); background-size:24px 24px; background-position:center top; color:var(--tinta); font-family:var(--f-ui); font-size:16px; line-height:1.5; letter-spacing:-.011em; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0; text-wrap:balance}
p{margin:0}
button{font:inherit; letter-spacing:inherit}
:focus-visible{outline:2px solid var(--tinta); outline-offset:3px}
.ceu :focus-visible,.painel-noite :focus-visible{outline-color:#fff}
.wrap{max-width:1200px; margin-inline:auto; padding-inline:clamp(16px,4vw,32px)}
.marcadores{position:fixed; right:0; top:50%; z-index:50; display:grid; justify-items:end; gap:5px; transform:translate(110%,-50%); transition:transform .5s var(--ease-mola)}
.marcadores.visivel,.marcadores:focus-within{transform:translate(0,-50%)}
.marcador{display:flex; align-items:center; height:28px; padding:0 14px 0 12px; border-radius:14px 0 0 14px; background-color:var(--aba); background-image:linear-gradient(180deg,rgb(255 255 255/.3),rgb(255 255 255/0) 60%); color:var(--tinta); font-family:var(--f-ui); font-size:12px; font-weight:800; text-decoration:none; white-space:nowrap; box-shadow:inset 0 1px 0 rgb(255 255 255/.5),-2px 3px 8px -3px rgb(26 16 36/.35); transform:translateX(calc(100% - 20px)); transition:transform .35s var(--ease-mola)}
.marcador:hover,.marcador:focus-visible,.marcador.atual{transform:translateX(0)}
.marcador span{opacity:0; transition:opacity .2s var(--ease-padrao)}
.marcador:hover span,.marcador:focus-visible span,.marcador.atual span{opacity:1}
.marcador:focus-visible{outline-offset:-3px}
html{scroll-behavior:smooth}
h2[id]{scroll-margin-top:110px}
@media (max-width:1279px){.marcadores{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.display{font-family:var(--f-display); font-weight:400; font-variation-settings:"SOFT" 100,"WONK" 0; font-optical-sizing:auto}
.tab{font-variant-numeric:tabular-nums}

/* ---------- cabeçalho do documento ---------- */
.mast{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding-block:14px; font-size:13px; color:var(--pedra)}
.mast b{color:var(--tinta); font-weight:800}
.marca-lock{display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:17px; letter-spacing:-.02em; color:inherit}
.sol-svg{width:26px; height:26px; flex:none}

/* ---------- botões, chips ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 20px; border-radius:12px; border:0; cursor:pointer; text-decoration:none; font-family:var(--f-ui); font-weight:600; font-size:16px; line-height:1; transition:transform .15s var(--ease-suave),box-shadow .2s var(--ease-suave),background-color .2s var(--ease-padrao)}
.btn:active{transform:scale(.98)}
.btn .seta{display:inline-block; transition:transform .2s var(--ease-suave)}
.btn:hover .seta{transform:translateX(4px)}
.btn-tinta{background:var(--tinta); color:#FDFDFA; box-shadow:0 1px 2px rgb(29 29 28/.2),0 6px 14px -6px rgb(29 29 28/.45)}
.btn-tinta:hover{background:#2C2B29}
.btn-noite{background:#2A1A3A; color:#FDFDFA; box-shadow:inset 0 0 0 1px rgb(255 255 255/.2)}
.btn-noite:hover{background:#34214A}
.btn-branco{background:#fff; color:var(--tinta); box-shadow:var(--sombra-borda-forte)}
.btn-ceu{background:#fff; color:var(--tinta); box-shadow:0 0 0 1px rgb(255 255 255/.5),0 10px 26px -10px rgb(26 16 36/.7)}
.btn-sm{height:36px; padding:0 14px; font-size:14px; border-radius:10px}
.chip{display:inline-flex; align-items:center; height:36px; padding:0 14px; border-radius:999px; border:0; background:var(--superficie); color:var(--tinta); box-shadow:var(--sombra-borda-forte); font-family:var(--f-ui); font-weight:600; font-size:14px; cursor:pointer; transition:background-color .2s var(--ease-padrao)}
.chip[aria-pressed="true"]{background:var(--tinta); color:#FDFDFA; box-shadow:none; animation:chip .35s var(--ease-mola)}
@keyframes chip{0%{transform:scale(.92)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
.chips{display:flex; flex-wrap:wrap; gap:8px}

/* ---------- seções ---------- */
.secao{padding-block:clamp(56px,8vw,112px)}
/* seções seguidas não somam o espaço de cima; .respiro mantém o espaço inteiro */
.secao + .secao:not(.respiro){padding-top:0}
.secao-head{position:relative; display:grid; gap:12px; max-width:720px; margin-bottom:clamp(28px,4vw,48px); padding-top:26px}
.secao-head::before{content:""; position:absolute; z-index:2; left:0; right:0; top:0; height:4px; border-radius:0 3px 3px 0; background:var(--aba,#FFB070); box-shadow:0 2px 4px -2px rgb(29 29 28/.32)}
.eyebrow,.aba{position:relative; z-index:1; display:inline-flex; align-items:center; height:30px; padding:0 16px; border-radius:10px 10px 0 0; background-color:var(--aba,#FFB070); background-image:linear-gradient(180deg,rgb(255 255 255/.28),rgb(255 255 255/0) 55%); color:var(--tinta); font-family:var(--f-ui); font-size:13px; font-weight:800; line-height:1; letter-spacing:.01em; white-space:nowrap; box-shadow:inset 0 1px 0 rgb(255 255 255/.5),0 4px 0 var(--aba,#FFB070); transition:transform .25s var(--ease-mola)}
.eyebrow::before,.eyebrow::after,.aba::before,.aba::after{content:""; position:absolute; bottom:-4px; width:10px; height:14px}
.eyebrow::before,.aba::before{left:-10px; background:radial-gradient(circle at 0 0,transparent 9.5px,var(--aba,#FFB070) 10px)}
.eyebrow::after,.aba::after{right:-10px; background:radial-gradient(circle at 100% 0,transparent 9.5px,var(--aba,#FFB070) 10px)}
.eyebrow{justify-self:start; margin-top:-56px; margin-left:calc(12px + var(--pos,0) * clamp(30px,8vw,120px))}
.eyebrow + *{margin-top:14px}
.secao-head:hover .eyebrow,.aba-linha:hover .aba{transform:translateY(-4px)}
@keyframes aba-sobe{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.secao-head.play .eyebrow{animation:aba-sobe .55s var(--ease-mola) .05s backwards}
.titulo{font-size:clamp(34px,4.6vw,52px); line-height:1.15; letter-spacing:-.018em}
.lede{font-size:18px; line-height:1.56; color:var(--grafite); max-width:62ch}
.cartao{background:var(--superficie); border-radius:16px; box-shadow:var(--sombra-borda); padding:24px}
.nota{font-size:13px; color:var(--pedra); line-height:1.45}
.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}

/* ---------- foto (placeholder desenhado) ---------- */
.foto{position:relative; margin:0; overflow:hidden; aspect-ratio:4/5; background:var(--scene); isolation:isolate; border-radius:9px}
.foto::before{content:""; position:absolute; inset:-4%; background:var(--figs); filter:blur(var(--blur,2.5px)); z-index:0}
.foto::after{content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.26; mix-blend-mode:overlay; pointer-events:none; z-index:2}
.foto > *{position:absolute; z-index:3}
.foto--praia{--scene:radial-gradient(55% 38% at 72% 26%,#FFE3AE 0%,rgba(255,220,160,0) 70%),linear-gradient(180deg,#F1B37C 0%,#E48B5E 36%,#B96B53 56%,#5B4038 76%,#2E2522 100%);
  --figs:radial-gradient(ellipse 9.5% 7.8% at 41% 37%,#7A513B 0 55%,transparent 74%),radial-gradient(ellipse 8.8% 7.2% at 58% 40%,#3F2B22 0 55%,transparent 74%),radial-gradient(ellipse 18% 34% at 40% 80%,#2C2020 0 55%,transparent 76%),radial-gradient(ellipse 17% 32% at 59% 82%,#1F1718 0 55%,transparent 76%)}
.foto--estudio{--scene:radial-gradient(70% 55% at 42% 32%,#E9E2D6 0%,#CFC4B4 55%,#A89A87 100%);
  --figs:radial-gradient(ellipse 9.5% 7.8% at 41% 36%,#CFA07E 0 55%,transparent 74%),radial-gradient(ellipse 9% 7.4% at 58% 39%,#7B5441 0 55%,transparent 74%),radial-gradient(ellipse 18% 34% at 40% 80%,#F7F3EC 0 55%,transparent 76%),radial-gradient(ellipse 17% 32% at 59% 82%,#2A2A2E 0 55%,transparent 76%)}
.foto--cidade{--scene:radial-gradient(circle at 18% 22%,rgba(255,196,120,.85) 0 2.5%,transparent 5%),radial-gradient(circle at 78% 18%,rgba(255,150,170,.7) 0 3%,transparent 6%),radial-gradient(circle at 64% 30%,rgba(255,214,150,.75) 0 2%,transparent 4.5%),radial-gradient(circle at 30% 12%,rgba(190,170,255,.6) 0 2.5%,transparent 5%),radial-gradient(circle at 88% 40%,rgba(255,190,120,.6) 0 2%,transparent 4.5%),linear-gradient(180deg,#2B2A4A 0%,#1A1830 60%,#121022 100%);
  --figs:radial-gradient(ellipse 9.5% 7.8% at 41% 38%,#C48F6C 0 55%,transparent 74%),radial-gradient(ellipse 9% 7.4% at 58% 41%,#5A3B2D 0 55%,transparent 74%),radial-gradient(ellipse 18% 34% at 40% 81%,#3A2F4A 0 55%,transparent 76%),radial-gradient(ellipse 17% 32% at 59% 83%,#1B1D26 0 55%,transparent 76%)}
.foto--campo{--scene:radial-gradient(50% 30% at 30% 16%,#FFF1D6 0%,rgba(255,241,214,0) 70%),linear-gradient(180deg,#F6D7B0 0%,#F1B98B 30%,#D7AE78 52%,#9A9458 74%,#66703C 100%);
  --figs:radial-gradient(ellipse 9.5% 7.8% at 41% 37%,#E0B08C 0 55%,transparent 74%),radial-gradient(ellipse 9% 7.4% at 58% 40%,#8F5E44 0 55%,transparent 74%),radial-gradient(ellipse 18% 34% at 40% 80%,#F3EEE6 0 55%,transparent 76%),radial-gradient(ellipse 17% 32% at 59% 82%,#6E7F9A 0 55%,transparent 76%)}
.foto--antes{--blur:4.5px; --scene:radial-gradient(30% 26% at 50% 38%,rgba(255,248,205,.55),transparent 70%),linear-gradient(180deg,#6A6340 0%,#4A4630 50%,#2B2A1E 100%);
  --figs:radial-gradient(ellipse 10% 8% at 42% 40%,#B69C70 0 55%,transparent 74%),radial-gradient(ellipse 9.5% 7.6% at 58% 42%,#8A7150 0 55%,transparent 74%),radial-gradient(ellipse 19% 34% at 41% 82%,#3D3A2C 0 55%,transparent 76%),radial-gradient(ellipse 18% 32% at 59% 84%,#34311F 0 55%,transparent 76%)}

/* impressão (foto com borda branca) e adesivo */
.print-in{padding:6px; background:#fff; border-radius:14px; box-shadow:var(--sombra-foto); transform:rotate(var(--r,0deg)); transition:transform .2s var(--ease-suave),box-shadow .2s var(--ease-suave)}
.print:hover .print-in{transform:rotate(0deg) scale(1.04); box-shadow:var(--sombra-foto-hover)}
/* adesivo = .cola (gira, anima, guarda o verso dobrado) > .adesivo (a face impressa) */
@property --dobra{syntax:"<percentage>"; inherits:true; initial-value:100%}
@property --folga{syntax:"<length>"; inherits:true; initial-value:4px}
@property --ergue{syntax:"<angle>"; inherits:true; initial-value:-180deg}
@property --verso{syntax:"<number>"; inherits:true; initial-value:0}
@property --sombra-y{syntax:"<length>"; inherits:true; initial-value:12px}
@property --sombra-blur{syntax:"<length>"; inherits:true; initial-value:22px}
@property --sombra-a{syntax:"<number>"; inherits:true; initial-value:.32}
.cola{position:relative; display:inline-grid; rotate:var(--r,0deg); filter:drop-shadow(0 var(--sombra-y) var(--sombra-blur) rgb(26 16 36/var(--sombra-a))); transition:--dobra .35s var(--ease-suave),--folga .35s var(--ease-suave),--ergue .35s var(--ease-suave),--verso .35s var(--ease-padrao)}
.cola > .adesivo{grid-area:1/1; clip-path:inset(-3px calc(100% - var(--dobra) - var(--folga)) -3px -3px)}
.cola::after{content:""; grid-area:1/1; pointer-events:none; border-radius:999px; opacity:var(--verso);
  background:linear-gradient(90deg,transparent var(--dobra),#FFFFFF var(--dobra),#D6CEC0 calc(var(--dobra) + 6px),#ECE7DE calc(var(--dobra) + 28%),#FDFCF9);
  clip-path:inset(-12px -12px -16px var(--dobra)); transform-origin:var(--dobra) 50%;
  transform:perspective(220px) rotateY(var(--ergue)); filter:drop-shadow(0 3px 3px rgb(26 16 36/.3))}
.cola:has(> .etiqueta)::after{border-radius:8px}
.cola:has(> .sol-ad)::after{margin:5%}
.cola:has(> .bandeira)::after{border-radius:3px; margin:14% 4%}
@media (hover:hover){ .cola:hover{--dobra:84%; --folga:-2px; --ergue:-146deg; --verso:1} }
.adesivo{display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px; font-family:var(--f-ui); font-weight:800; font-size:14px; color:var(--tinta); white-space:nowrap;
  filter:drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff)}
.adesivo.mel{background:var(--mel)}
.adesivo.coral{background:var(--coral)}
.adesivo.lavanda{background:var(--lavanda)}
.adesivo.sol-ad{padding:0; width:52px; height:52px; background:transparent}
.adesivo.preco{background:#fff; font-family:var(--f-display); font-weight:500; font-size:18px; font-variation-settings:"SOFT" 100}

/* ---------- motion: só roda com .play (estado de repouso é o final) ---------- */
@keyframes palavra{from{opacity:0; filter:blur(10px); transform:translateY(20px)} to{opacity:1; filter:blur(0); transform:none}}
@keyframes sobe{from{opacity:0; filter:blur(4px); transform:translateY(16px)} to{opacity:1; filter:blur(0); transform:none}}
@keyframes espalha{from{opacity:0; transform:translateY(28px) scale(.92)} to{opacity:1; transform:none}}
/* cola: chega no ar com a ponta dobrada → encosta → é alisado da esquerda para a direita → aperta */
@keyframes cola{
  0%{opacity:0; translate:-4px -26px; rotate:calc(var(--r,0deg) - 9deg); scale:1.22; --dobra:60%; --folga:-2px; --ergue:-136deg; --verso:1; --sombra-y:38px; --sombra-blur:30px; --sombra-a:.16; animation-timing-function:cubic-bezier(.22,.8,.3,1)}
  10%{opacity:1}
  32%{translate:0 0; rotate:var(--r,0deg); scale:1; --dobra:60%; --ergue:-156deg; --sombra-y:12px; --sombra-blur:22px; --sombra-a:.32; animation-timing-function:cubic-bezier(.5,0,.2,1)}
  74%{scale:1; --dobra:100%; --folga:-2px; --ergue:-180deg; --verso:1; animation-timing-function:cubic-bezier(.3,0,.4,1)}
  78%{--verso:0}
  85%{scale:.965; animation-timing-function:var(--ease-mola)}
  100%{opacity:1; translate:0 0; rotate:var(--r,0deg); scale:1; --dobra:100%; --folga:4px; --ergue:-180deg; --verso:0; --sombra-y:12px; --sombra-blur:22px; --sombra-a:.32}
}
@keyframes nasce{from{opacity:.2; transform:translate(-50%,38%)} to{opacity:1; transform:translate(-50%,0)}}
@keyframes deriva{from{transform:translateX(-5%)} to{transform:translateX(5%)}}
@keyframes flutua{0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}}
@keyframes aparece{from{opacity:0} to{opacity:1}}
.palavra{display:inline-block}
.play .palavra{animation:palavra .5s var(--ease-saida) both; animation-delay:calc(var(--base,0ms) + var(--i,0) * 25ms)}
.play .sobe{animation:sobe .7s var(--ease-saida) both; animation-delay:var(--d,300ms)}
.play .print{animation:espalha .6s var(--ease-saida) both; animation-delay:calc(var(--base,650ms) + var(--i,0) * 70ms)}
.play .cola{animation:cola .95s linear backwards; animation-delay:calc(var(--base,1050ms) + var(--i,0) * 130ms)}
.flutua{animation:flutua 6s ease-in-out infinite}


@media (max-width:960px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
}