/* ============================================================
   VAMU! — Landing Page
   Sistema visual derivado da identidade dos criativos sociais
   ============================================================ */

:root{
  --pink:   #E0197D;
  --pink-d: #B31163;
  --yellow: #F9B916;
  --purple: #4B1B57;
  --blue:   #6EC1E4;
  --ink:    #111111;
  --paper:  #FFFFFF;
  --mute:   #6B6B6B;

  --burst: polygon(50.0% -0.3%, 58.4% 18.5%, 74.7% 7.1%, 73.6% 26.4%, 94.6% 24.3%, 81.1% 41.7%, 101.4% 50.0%, 82.8% 58.8%, 92.6% 74.6%, 73.1% 73.1%, 74.8% 92.9%, 58.7% 82.4%, 50.0% 101.2%, 41.3% 82.4%, 25.7% 92.1%, 27.4% 72.6%, 6.9% 74.9%, 17.7% 58.7%, -0.3% 50.0%, 18.6% 41.6%, 8.0% 25.7%, 26.6% 26.6%, 25.5% 7.6%, 41.3% 17.3%);

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-hand: 'Caveat', cursive;

  /* curvas: as nativas do CSS são fracas demais para parecerem intencionais */
  --ease-out:    cubic-bezier(.23,1,.32,1);
  --ease-in-out: cubic-bezier(.77,0,.175,1);
  --ease-pop:    cubic-bezier(.34,1.5,.64,1);

  --pad-sec: clamp(72px, 8.5vw, 132px);
  --radius: 18px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:clamp(1rem,.96rem + .25vw,1.12rem);
  line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:400; letter-spacing:-.01em; line-height:.97}
p{margin:0 0 1em}
button,input,select,textarea{font:inherit; color:inherit}

:focus-visible{outline:3px solid var(--purple); outline-offset:3px; border-radius:4px}
.sec-pink :focus-visible{outline-color:var(--yellow)}

/* grão de impressão — dá o acabamento de cartaz colado */
body::after{
  content:''; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ---------- layout ---------- */
main{overflow-x:clip}   /* contém o ticker rotacionado, que sangra 6% além da viewport */
.wrap{width:min(1180px,92vw); margin-inline:auto; position:relative; z-index:2}
.sec{position:relative; padding:var(--pad-sec) 0; overflow:hidden; scroll-margin-top:76px}
.sec-yellow{background:var(--yellow); color:var(--ink); --scribble:var(--purple); --eyebrow:var(--pink); --card-sh:var(--ink)}
.sec-pink{background:var(--pink); color:#fff;      --scribble:var(--yellow); --eyebrow:var(--yellow); --card-sh:var(--yellow)}
.sec-white{background:#fff; color:var(--ink);      --scribble:var(--purple); --eyebrow:var(--pink); --card-sh:var(--pink)}

h1{font-size:clamp(2.8rem, 1.4rem + 5.9vw, 5.5rem)}
h2{font-size:clamp(2.1rem, 1.2rem + 4.2vw, 4.05rem)}
h3{font-size:clamp(1.25rem, 1.05rem + .8vw, 1.7rem)}

.lead{font-size:clamp(1.1rem,1.02rem + .5vw,1.38rem); line-height:1.5; font-weight:500}
h2 + .lead{margin-top:.85em}
/* o rabisco é absoluto e desce .42em abaixo da linha: reserva esse espaço no próprio título,
   senão ele risca o parágrafo seguinte (o :has cobre; o margin é a garantia se faltar suporte) */
h2:has(.grifo),.fecho:has(.grifo){padding-bottom:.55em}
h2:has(.grifo) + .lead,h2:has(.grifo) + p{margin-top:1.1em}
.eyebrow{
  font-family:var(--font-body); font-weight:800; font-size:.78rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--eyebrow); margin:0 0 14px;
}
.fecho{
  font-family:var(--font-display); font-size:clamp(1.5rem,1.1rem + 1.9vw,2.5rem);
  line-height:1.06; text-align:center; margin:clamp(44px,6vw,70px) auto 0; max-width:30ch;
}

/* ---------- marcações da marca ---------- */
.tarja{
  display:inline-block; background:var(--pink); color:#fff;
  line-height:.84; padding:.14em .16em .16em;
}
.amarelo{color:var(--yellow)}
.grifo{position:relative; white-space:nowrap}
.grifo .under{
  position:absolute; left:-2%; width:104%; top:100%; height:.42em; overflow:visible;
  fill:none; stroke:var(--scribble); stroke-width:5; stroke-linecap:round;
}
.hand{font-family:var(--font-hand); font-weight:700; font-style:normal; color:var(--purple); line-height:1}
.hand-big{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.6rem); transform:rotate(-3deg); display:inline-block; margin-top:.4em}
.chip{
  display:inline-block; font-size:.74rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  background:var(--ink); color:var(--yellow); padding:9px 16px; border-radius:999px; margin:0 0 22px;
}
.ph{border-bottom:2px dashed currentColor; padding-bottom:1px; opacity:.85; cursor:help}
.só-mobile{display:none}

.burst{position:absolute; clip-path:var(--burst); background:var(--pink); display:block}
.burst-spin{animation:spin 46s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.deco-dots{
  position:absolute; width:190px; height:190px; opacity:.4; pointer-events:none;
  background-image:radial-gradient(currentColor 2.2px, transparent 2.3px);
  background-size:14px 14px; color:var(--ink); will-change:transform;
}

/* ---------- botões ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-weight:800; font-size:1.02rem; text-decoration:none; cursor:pointer;
  padding:1.05em 1.9em; border-radius:999px; border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .16s var(--ease-out), box-shadow .16s var(--ease-out), background .18s ease;
}
.btn:hover{transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink)}
.btn:active{transform:translate(5px,5px) scale(.985); box-shadow:0 0 0 var(--ink)}
.btn-pink{background:var(--pink); color:#fff}
.btn-pink:hover{background:var(--pink-d)}
.btn-black{background:var(--ink); color:#fff; box-shadow:5px 5px 0 var(--yellow)}
.btn-black:hover{box-shadow:2px 2px 0 var(--yellow)}
.btn-sm{padding:.7em 1.25em; font-size:.9rem; border-width:2px; box-shadow:3px 3px 0 var(--ink)}
.btn-block{width:100%; margin-top:8px}

/* brilho que atravessa o CTA principal de tempos em tempos */
.btn-glow{overflow:hidden; isolation:isolate}
.btn-glow::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:linear-gradient(100deg,transparent 34%,rgba(255,255,255,.38) 50%,transparent 66%);
  transform:translateX(-130%); animation:shine 6.5s ease-in-out 2.2s infinite;
}
@keyframes shine{0%,76%{transform:translateX(-130%)} 100%{transform:translateX(130%)}}

/* ---------- cards ---------- */
.card{
  background:#fff; color:var(--ink); border:3px solid var(--ink);
  border-radius:var(--radius); padding:clamp(22px,2.4vw,30px); box-shadow:7px 7px 0 var(--card-sh);
}
@media (hover:hover) and (pointer:fine){
  .card{transition:transform .24s var(--ease-out), box-shadow .24s var(--ease-out)}
  .card:hover{transform:translate(-3px,-3px); box-shadow:11px 11px 0 var(--card-sh)}
}

/* ---------- progresso + header ---------- */
.progress{position:fixed; inset:0 0 auto; height:4px; z-index:55; background:transparent}
.progress i{display:block; height:100%; width:0; background:var(--pink)}
.hd{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:2px solid var(--ink);
  transition:box-shadow .3s ease;
}
.hd.scrolled{box-shadow:0 10px 24px -14px rgba(17,17,17,.5)}
.hd-in{display:flex; align-items:center; gap:26px; padding:12px 0; min-height:64px}
.hd-logo img{height:26px; width:auto; transition:transform .25s var(--ease-out)}
.hd-logo:hover img{transform:rotate(-3deg) scale(1.04)}
.hd-nav{display:flex; gap:26px; margin-left:auto; font-weight:600; font-size:.95rem}
.hd-nav a{text-decoration:none; position:relative; padding:4px 0}
.hd-nav a::after{content:''; position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--pink); transition:width .22s var(--ease-out)}
.hd-nav a:hover::after{width:100%}

/* ============ 1. HERO ============ */
.hero{padding-top:clamp(48px,6vw,84px); padding-bottom:clamp(60px,7vw,110px)}
.hero-dots{top:8%; left:-60px; color:var(--pink); opacity:.35}
.hero-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(28px,4vw,60px); align-items:center}
.hero h1{margin-bottom:.32em}
.hero .lead{max-width:34ch; margin-bottom:1.5em}
.cta-row{display:flex; align-items:center; gap:clamp(18px,2.5vw,32px); flex-wrap:wrap}
.trust{margin-top:2em; font-size:.92rem; font-weight:600; opacity:.9}
.trust b{color:var(--pink)}

.hero-art{position:relative; aspect-ratio:1; max-width:475px; width:100%; margin-inline:auto}
.hero-art .burst{inset:0}
.hero-mark{position:absolute; top:50%; left:50%; width:52%; transform:translate(-50%,-50%); z-index:2}
.smiley{position:absolute; display:block}
.smiley-hero{width:104px; top:-4%; right:-4%; z-index:3; filter:drop-shadow(4px 4px 0 rgba(17,17,17,.9)); animation:bob 3s var(--ease-in-out) infinite alternate}
@keyframes bob{from{transform:rotate(8deg) translateY(0)} to{transform:rotate(15deg) translateY(-9px)}}
.smiley svg{width:100%; height:auto}
.scribble-note{position:absolute; left:-9%; bottom:-3%; z-index:3; display:flex; flex-direction:row-reverse; align-items:center; gap:6px}
.scribble-note .hand{font-size:2rem; transform:rotate(-7deg)}
.scribble-note .arrow{width:80px; height:58px; fill:none; stroke:var(--purple); stroke-width:5; stroke-linecap:round; transform:scaleY(-1) rotate(8deg)}

/* ============ 2. DORES ============ */
.dor-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:22px; margin-top:clamp(34px,4vw,54px)}
.dor{font-family:var(--font-display); font-size:clamp(1.15rem,1rem + .7vw,1.5rem); line-height:1.1}
.aspas{display:block; font-family:var(--font-display); font-size:3.4rem; line-height:.55; color:var(--pink); margin-bottom:.18em}

/* ---------- ticker ---------- */
.ticker{background:var(--ink); color:var(--yellow); overflow:hidden; transform:rotate(-1.6deg); width:106%; margin:-26px -3% -22px; padding:16px 0; position:relative; z-index:3}
.ticker-run{display:flex; width:max-content; animation:marquee 34s linear infinite}
.ticker-run span{font-family:var(--font-display); font-size:clamp(1.1rem,.9rem + .9vw,1.7rem); text-transform:uppercase; padding-right:1.4em; white-space:nowrap}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============ 3. AGÊNCIA ============ */
.split{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(34px,5vw,72px); align-items:center}
.polas{position:relative; min-height:430px}
.pola{margin:0; position:absolute; background:#fff; border:3px solid var(--ink); border-radius:8px; padding:11px 11px 34px; box-shadow:8px 8px 0 var(--pink); z-index:2}
.pola img{border-radius:3px}
.pola-a{width:73%; top:0; left:-2%; transform:rotate(-4deg)}
.pola-b{width:53%; bottom:1%; right:-5%; transform:rotate(5deg); box-shadow:8px 8px 0 var(--yellow); z-index:3}
@media (hover:hover) and (pointer:fine){
  .pola{transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out)}
  .pola:hover{transform:rotate(0deg) scale(1.03); z-index:4; box-shadow:12px 12px 0 var(--pink)}
  .pola-b:hover{box-shadow:12px 12px 0 var(--yellow)}
}
.burst-sm{width:150px; height:150px; background:var(--yellow); right:6%; top:12%; z-index:1}

/* ============ 4. SERVIÇOS / 6. NÚMEROS ============ */
.serv-dots{right:-50px; bottom:6%; color:var(--pink); opacity:.3}
.serv-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; margin-top:clamp(34px,4vw,54px)}
.serv .num{display:block; font-family:var(--font-display); font-size:3.2rem; line-height:.8; color:var(--pink); margin-bottom:.14em}
.serv h3{margin-bottom:.25em}
.serv-head{font-weight:800; color:var(--purple); margin-bottom:1em}
.serv > p:not(.serv-head){margin:0; font-size:1rem; line-height:1.5}
.ticks li{position:relative; padding-left:26px; margin-bottom:.55em; font-size:.98rem; line-height:1.42}
.ticks li::before{content:'✓'; position:absolute; left:0; top:-1px; color:var(--pink); font-weight:900}

/* ============ 5. VITRINE DE CONTEÚDO ============ */
.sec-dark{background:var(--ink); color:#fff; --scribble:var(--yellow); --eyebrow:var(--yellow); --card-sh:var(--pink)}
.reels{
  display:grid; grid-template-columns:repeat(3,minmax(0,268px)); justify-content:center;
  gap:clamp(18px,3vw,42px); margin-top:clamp(34px,4vw,52px);
}
.reel{margin:0; position:relative}
.reel video{
  display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; background:#000;
  border:3px solid #fff; border-radius:16px; cursor:pointer;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.reel:nth-child(1) video{box-shadow:9px 9px 0 var(--pink)}
.reel:nth-child(2) video{box-shadow:9px 9px 0 var(--yellow)}
.reel:nth-child(3) video{box-shadow:9px 9px 0 var(--pink)}
@media (hover:hover) and (pointer:fine){
  .reel video:hover{transform:translate(-3px,-3px)}
  .reel:nth-child(1) video:hover{box-shadow:13px 13px 0 var(--pink)}
  .reel:nth-child(2) video:hover{box-shadow:13px 13px 0 var(--yellow)}
  .reel:nth-child(3) video:hover{box-shadow:13px 13px 0 var(--pink)}
}
.reel figcaption{margin-top:14px; font-size:.86rem; font-weight:600; color:rgba(255,255,255,.72)}
.som{
  position:absolute; right:12px; top:12px; width:44px; height:44px; border-radius:50%;
  border:3px solid var(--ink); background:var(--pink); color:#fff;
  cursor:pointer; display:grid; place-items:center; padding:0; box-shadow:3px 3px 0 var(--ink);
  transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .2s ease, color .2s ease;
}
.som svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round}
.som svg .alto{fill:currentColor; stroke-width:1.6}
.som:hover{transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink)}
.som .ico-on{display:none}
.som[aria-pressed="true"]{background:var(--yellow); color:var(--ink)}
.som[aria-pressed="true"] .ico-on{display:block}
.som[aria-pressed="true"] .ico-off{display:none}
.reels-nota{margin:clamp(26px,3vw,38px) 0 0; text-align:center; font-size:.92rem; color:rgba(255,255,255,.65)}

/* ============ 7. POSICIONAMENTO: comparativo ============ */
.versus{
  display:grid; grid-template-columns:1fr 1fr; margin-top:clamp(34px,4vw,52px);
  border:3px solid var(--ink); border-radius:var(--radius); overflow:hidden;
  box-shadow:8px 8px 0 var(--pink);
}
.versus > *{margin:0; padding:clamp(14px,1.5vw,20px) clamp(16px,2vw,26px); font-size:1.02rem; line-height:1.35}
.versus .vs-a{color:var(--mute); border-right:3px solid var(--ink)}
.versus .vs-b{background:#FFF7E2; font-weight:600}
.versus p{border-top:2px solid rgba(17,17,17,.12)}
.vs-h{
  font-family:var(--font-body); font-weight:800; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; background:var(--ink); color:#fff;
}
.vs-h.vs-b{background:var(--pink); color:#fff; border-right:0}
.vs-h.vs-a{color:rgba(255,255,255,.75)}
.versus .vs-b::before{content:'✓'; color:var(--pink); font-weight:900; margin-right:.5em}
.vs-h.vs-b::before{content:none}

/* ============ 5. MÉTODO ============ */
.passos{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:clamp(48px,6vw,72px)}
.passo{position:relative; background:#fff; color:var(--ink); border:3px solid var(--ink); border-radius:var(--radius); padding:44px 24px 26px; box-shadow:7px 7px 0 var(--yellow)}
.passo-n{
  position:absolute; top:-28px; left:22px; width:56px; height:56px; border-radius:50%;
  background:var(--yellow); border:3px solid var(--ink); display:grid; place-items:center;
  font-family:var(--font-display); font-size:1.6rem; color:var(--ink);
  transform:scale(.5); opacity:0;
  transition:transform .55s var(--ease-pop) calc(var(--d,0s) + .18s), opacity .3s ease calc(var(--d,0s) + .18s);
}
.passo.in .passo-n{transform:scale(1); opacity:1}
.passo h3{margin-bottom:.3em}
.passo p{margin:0; font-size:.98rem; line-height:1.45}
.passo:not(:last-child)::after{
  content:'→'; position:absolute; right:-27px; top:-4px; width:30px; text-align:center;
  font-size:1.75rem; font-weight:800; color:#fff; z-index:6; line-height:1;
}
@media (hover:hover) and (pointer:fine){
  .passo{transition:transform .24s var(--ease-out), box-shadow .24s var(--ease-out)}
  .passo:hover{transform:translate(-3px,-3px); box-shadow:11px 11px 0 var(--yellow)}
}

/* ============ 7. RESULTADOS ============ */
.depos{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:24px; margin-top:clamp(34px,4vw,52px)}
.depo{margin:0; position:relative; padding-top:clamp(26px,2.6vw,34px)}
.tag{
  display:inline-block; font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  background:var(--yellow); border:2px solid var(--ink); border-radius:999px; padding:4px 11px; margin-bottom:16px;
}
.depo blockquote{margin:0 0 22px; font-size:1.1rem; line-height:1.5; color:#4A4A4A; font-style:italic}
.depo figcaption{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center; font-size:.92rem}
.ava{grid-row:1/3; width:48px; height:48px; border-radius:50%; background:#EDEDED; border:2px dashed #C4C4C4}
.depo figcaption b{align-self:end}
.depo figcaption small{color:var(--mute)}

/* ============ 8. PARA QUEM ============ */
.fit{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:clamp(34px,4vw,52px)}
.fit h3{display:flex; align-items:center; gap:12px; margin-bottom:.7em}
.mark{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:1.1rem; font-family:var(--font-body); font-weight:900; flex:none}
.mark.ok{background:var(--pink); color:#fff}
.mark.no{background:#E6E6E6; color:var(--mute)}
.fit ul li{position:relative; padding-left:22px; margin-bottom:.6em; line-height:1.45}
.fit ul li::before{content:''; position:absolute; left:0; top:.62em; width:9px; height:9px; border-radius:50%; background:var(--pink)}
.fit-no ul li::before{background:#CFCFCF}
.fit-no{opacity:.94}

/* ============ 9. FAQ ============ */
.faq-wrap{max-width:860px}
.faq{margin-top:clamp(28px,3.5vw,44px); border-top:2px solid var(--ink)}
.faq details{border-bottom:2px solid var(--ink)}
.faq summary{
  list-style:none; cursor:pointer; padding:22px 46px 22px 0; position:relative;
  font-weight:800; font-size:clamp(1.02rem,.98rem + .35vw,1.2rem); line-height:1.3;
  transition:color .2s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+'; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-family:var(--font-body); font-weight:500; font-size:2.4rem; color:var(--pink);
  line-height:.7; transition:transform .3s var(--ease-out);
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(135deg)}
.faq summary:hover{color:var(--pink)}
.faq details div{padding:0 40px 24px 0}
.faq details p{margin:0; color:#3B3B3B}
/* abertura animada onde o browser suporta (Chrome/Edge); nos demais abre direto */
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  .faq details::details-content{
    block-size:0; overflow:hidden; opacity:0;
    transition:block-size .4s var(--ease-out), opacity .3s ease, content-visibility .4s allow-discrete;
    transition-behavior:allow-discrete;
  }
  .faq details[open]::details-content{block-size:auto; opacity:1}
}

/* ============ 10. CTA FINAL ============ */
.cta-final{padding-bottom:clamp(60px,7vw,110px)}
.watermark{position:absolute; right:-4%; bottom:4%; width:48%; opacity:.15; transform:rotate(-7deg); z-index:1; pointer-events:none; will-change:transform}
.cta-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,4.5vw,64px); align-items:center}
.chama{font-family:var(--font-display); font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem); margin:.5em 0 .1em}
.cta-mark{width:min(330px,78%)}
.cta-sub{margin-top:1.2em; font-weight:600; line-height:1.5}
.form-card{background:var(--pink); color:#fff; border:3px solid var(--ink); border-radius:24px; box-shadow:10px 10px 0 var(--ink); padding:clamp(24px,3vw,36px)}
.form-card h3{font-size:clamp(1.5rem,1.3rem + 1vw,2rem)}
.form-sub{font-size:.95rem; margin:.4em 0 1.4em; opacity:.95}
.form-card label{display:block; font-size:.86rem; font-weight:800; margin-bottom:14px; letter-spacing:.01em}
.form-card input,.form-card select{
  display:block; width:100%; margin-top:6px; padding:13px 15px; background:#fff; color:var(--ink);
  border:2px solid var(--ink); border-radius:12px; font-size:1rem; font-weight:500;
  transition:box-shadow .2s var(--ease-out), transform .2s var(--ease-out);
}
.form-card input::placeholder{color:#AFAFAF}
.form-card select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px; background-size:6px 6px; background-repeat:no-repeat}
.form-card input:focus,.form-card select:focus{outline:3px solid var(--yellow); outline-offset:1px; transform:translateY(-1px); box-shadow:0 4px 0 rgba(17,17,17,.25)}
.form-card input[aria-invalid="true"]{border-color:var(--yellow); background:#FFF6E0; animation:shake .35s ease}
@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.form-note{font-size:.8rem; margin:14px 0 0; text-align:center; opacity:.92}
.honey{position:absolute!important; left:-9999px; opacity:0; height:0; width:0}

/* estado de envio: o rótulo desfoca antes de virar sucesso */
form.sending button[type=submit]{pointer-events:none}
form.sending button[type=submit] span{filter:blur(3px); opacity:.55; transition:filter .25s ease, opacity .25s ease}
button[type=submit] span{transition:filter .25s ease, opacity .25s ease}

.form-ok{text-align:center; padding:14px 0; opacity:0; transform:scale(.96); transition:opacity .4s ease, transform .5s var(--ease-out)}
.form-ok.in{opacity:1; transform:none}
.ok-burst{
  display:grid; place-items:center; width:74px; height:74px; margin:0 auto 18px;
  background:var(--yellow); color:var(--ink); clip-path:var(--burst); font-size:1.9rem; font-weight:900;
  transform:scale(.4) rotate(-70deg); transition:transform .65s var(--ease-pop) .1s;
}
.form-ok.in .ok-burst{transform:scale(1) rotate(0)}
.form-ok h4{font-family:var(--font-display); font-size:1.9rem; margin-bottom:.3em}

/* ---------- rodapé ---------- */
.ft{background:var(--pink); color:#fff; padding:clamp(44px,5vw,70px) 0 26px; position:relative; z-index:2}
.ft-in{display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between}
.ft-logo{height:44px; width:auto}
.ft-nav{display:flex; flex-wrap:wrap; gap:20px; font-weight:600; font-size:.95rem}
.ft-nav a{text-decoration:none; transition:color .2s ease}
.ft-nav a:hover{color:var(--yellow)}
.ft-side{display:flex; flex-direction:column; gap:4px; font-size:.9rem; text-align:right}
.ft-side a{text-decoration:none; font-weight:700}
.ft-bottom{width:min(1180px,92vw); margin:34px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.35); font-size:.8rem; opacity:.9; text-align:center}

/* ---------- whatsapp flutuante ---------- */
.wa{
  position:fixed; right:20px; bottom:20px; z-index:56; width:58px; height:58px; border-radius:50%;
  background:var(--pink); color:#fff; border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink);
  display:grid; place-items:center; opacity:0; transform:translateY(16px) scale(.85);
  pointer-events:none; transition:opacity .3s var(--ease-out), transform .38s var(--ease-pop);
}
.wa.show{opacity:1; transform:none; pointer-events:auto}
.wa:hover{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink)}
.wa svg{width:30px; height:30px; position:relative; z-index:2}
.wa::before{
  content:''; position:absolute; inset:-3px; border-radius:50%; border:3px solid var(--pink);
  opacity:0; pointer-events:none;
}
.wa.show::before{animation:ring 3s var(--ease-out) 1s infinite}
@keyframes ring{0%{transform:scale(1); opacity:.65} 60%,100%{transform:scale(1.75); opacity:0}}

/* ============ ANIMAÇÕES DE ENTRADA ============ */
.rv{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease-out) var(--d,0s), transform .7s var(--ease-out) var(--d,0s);
}
.rv.in{opacity:1; transform:none}

/* headline do hero: cada linha sobe de dentro de uma máscara */
.rv.rv-lines{opacity:1; transform:none; transition:none}
.rv-lines .l{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.14em; margin-bottom:-.14em}
.rv-lines .l > span{display:inline-block; transform:translateY(112%); transition:transform .85s var(--ease-out) var(--d,0s)}
.rv-lines.in .l > span{transform:translateY(0)}

/* tarja: o marca-texto é "passado" da esquerda para a direita */
.rv .tarja{clip-path:inset(0 100% 0 0); transition:clip-path .55s var(--ease-out) .62s}
.rv.in .tarja{clip-path:inset(0 0 0 0)}

/* rabiscos e setas: desenham-se sozinhos (o comprimento vem do JS) */
.draw path{stroke-dasharray:var(--len,400); stroke-dashoffset:var(--len,400)}
.draw.ready path{transition:stroke-dashoffset .9s var(--ease-out) var(--dd,.25s)}
.in .draw path{stroke-dashoffset:0}

/* ============ RESPONSIVO ============ */
@media (max-width:1000px){
  .hero-grid,.split,.cta-grid{grid-template-columns:1fr}
  .hero-art{max-width:330px; margin:28px auto 0}   /* headline primeiro; arte depois */
  .hero h1 br{display:none}
  .hero .lead{max-width:none}
  .passos{grid-template-columns:repeat(2,1fr); gap:34px 22px}
  .passo:not(:last-child)::after{display:none}
  .fit{grid-template-columns:1fr}
  .polas{min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
  .pola{position:static; width:auto}
  .burst-sm{display:none}
  .watermark{width:80%; opacity:.12}
  .hd-nav{display:none}
  /* reels viram carrossel deslizante */
  .reels{
    display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:0 4px 12px; margin-inline:-4px; -webkit-overflow-scrolling:touch;
  }
  .reel{flex:0 0 min(74%,300px); scroll-snap-align:center}
  /* comparativo empilha em pares, com o rótulo em cada bloco */
  .versus{grid-template-columns:1fr}
  .versus .vs-h{display:none}
  .versus .vs-a{border-right:0; border-top:2px solid rgba(17,17,17,.12)}
  .versus .vs-a::before,.versus .vs-b::before{
    display:block; font-size:.62rem; font-weight:800; letter-spacing:.16em;
    text-transform:uppercase; margin-bottom:4px; color:var(--mute);
  }
  .versus .vs-a::before{content:'só aparece'}
  .versus .vs-b::before{content:'posicionada'; color:var(--pink); margin-right:0}
  .versus > .vs-a:first-of-type{border-top:0}
}
@media (max-width:560px){
  h2 br,.fecho br{display:none}          /* deixa o texto quebrar naturalmente */
  .chip{font-size:.66rem; letter-spacing:.12em; padding:8px 14px}
  .só-desktop{display:none}
  .só-mobile{display:inline}
  .deco-dots{display:none}
}
@media (max-width:640px){
  .hd-in{gap:14px}
  .hd-logo img{height:22px}
  .hero-art{max-width:250px}
  .smiley-hero{width:72px}
  .scribble-note .hand{font-size:1.55rem}
  .scribble-note .arrow{width:56px}
  .passos{grid-template-columns:1fr}
  .polas{grid-template-columns:1fr}
  .btn{width:100%; padding:1em 1.4em}
  .btn-sm,.btn-block{width:auto}
  .btn-block{width:100%}
  .cta-row{gap:16px}
  .ft-in{flex-direction:column; align-items:flex-start; gap:20px}
  .ft-side{text-align:left}
  .ticker{width:112%; margin-inline:-6%}
}

/* ---------- acessibilidade ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
  .rv{opacity:1; transform:none}
  .rv-lines .l > span{transform:none}
  .rv .tarja{clip-path:none}
  .draw path{stroke-dashoffset:0}
  .passo-n{transform:none; opacity:1}
}
/* modo captura de tela / impressão */
.no-anim .rv{opacity:1!important; transform:none!important; transition:none!important}
.no-anim .rv-lines .l > span{transform:none!important}
.no-anim .rv .tarja{clip-path:none!important}
.no-anim .draw path{stroke-dashoffset:0!important}
.no-anim .passo-n{transform:none!important; opacity:1!important}
.no-anim .form-ok{opacity:1; transform:none}
.no-anim .burst-spin,.no-anim .ticker-run,.no-anim .smiley-hero,.no-anim .btn-glow::after,.no-anim .wa::before{animation:none}