/* ============================================================
   AÇAÍ NALATA — LANDING DE FRANQUIAS
   Paleta extraída da cartilha oficial:
   rosa #FF006A · ciano #55CDCD · preto #000000 · branco #FFFFFF
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  --pink:#FF006A;
  --pink-dark:#D40057;
  --cyan:#55CDCD;
  --cyan-dark:#31AFAF;
  --ink:#000000;
  --ink-soft:#141414;
  --ink-line:#2A2A2A;
  --paper:#FFFFFF;
  --acai:#41213C;
  --acai-hi:#6E4062;

  /* Tipografia oficial da cartilha: Títulos = Unbounded Black · Destaques = Fugaz One · Textos = Poppins */
  --f-display:"Unbounded","Trebuchet MS",system-ui,sans-serif;
  --f-accent:"Fugaz One","Trebuchet MS",system-ui,sans-serif;
  --f-body:"Poppins","Segoe UI",system-ui,sans-serif;

  --wrap:1180px;
  /* Piso de 24px: em 375px o 5vw dava 20px de cada lado, apertado para a
     borda do celular. Acima de 480px o 5vw já passa de 24, então tablet e
     desktop não mudam nada. */
  --gut:clamp(24px,5vw,48px);
  --pad-y:clamp(64px,9vw,128px);

  --ease:cubic-bezier(.22,.9,.24,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.6;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
button,input,textarea{font:inherit;color:inherit}
h1,h2,h3,p,figure{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:2px}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- 3. UTILITÁRIOS ---------- */
.wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto}
.eyebrow{
  font-family:var(--f-body);font-weight:700;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;
}
.h-display{
  font-family:var(--f-display);font-weight:900;line-height:.98;
  letter-spacing:-.02em;text-wrap:balance;
}
/* Correção de tamanho óptico. Fugaz One e Unbounded têm altura-x diferente:
   medido nas fontes reais da página, "oa" dá 27px no acento contra 33px no
   display no MESMO font-size — 18% mais baixo, e o olho lê como fonte menor.
   1.22em iguala a altura-x, que é o que o olho compara em palavra minúscula
   ("própria" ao lado de "loja"). */
.i{font-family:var(--f-accent);font-style:normal;font-weight:400;font-size:1.22em}
/* line-height:.98 do .h-display é unitless, então é recalculado sobre o
   font-size do próprio .i — a linha do acento ficaria 22% mais alta que as
   vizinhas. .8 devolve a caixa de linha ao valor do pai (.8 x 1.22 = .976). */
.h-display .i{line-height:.8}
.c-cyan{color:var(--cyan)}
.c-pink{color:var(--pink)}

/* Botão CTA — retângulo ciano, texto preto, cantos retos (igual à cartilha) */
.cta{
  --cta-bg:var(--cyan);
  /* Hover em rosa da marca, valendo para todo CTA do site. #DE0060 e não o
     --pink puro (#FF006A): com texto branco no hover, o rosa puro mede
     3.85:1 — abaixo do mínimo de 4.5:1. #DE0060 mede 4.91:1, ainda lê
     nitidamente como "acende em rosa". */
  --cta-bg-hover:#DE0060;
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  background:var(--cta-bg);color:var(--ink);
  font-family:var(--f-body);font-weight:800;
  font-size:clamp(.82rem,.78rem + .2vw,.95rem);
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:1.15em 2.2em;border:0;border-radius:0;cursor:pointer;white-space:nowrap;
  /* piso de 44px: os CTAs pequenos (header 31px, loja 36px) ficavam abaixo do
     alvo de toque confortável. Os grandes já passam e não mudam. */
  min-height:44px;
  transition:transform .18s var(--ease),background-color .18s var(--ease),box-shadow .18s var(--ease);
}
.cta:hover{background:var(--cta-bg-hover);color:#fff;transform:translateY(-2px);box-shadow:0 10px 0 -4px rgba(0,0,0,.25)}
.cta:active{transform:translateY(0)}
.cta .arw{transition:transform .18s var(--ease)}
.cta:hover .arw{transform:translateX(4px)}

/* Placeholder de imagem/ilustração — troque pelos assets finais */
.ph{
  position:relative;overflow:hidden;
  display:grid;place-content:center;justify-items:center;gap:.7rem;
  text-align:center;padding:clamp(20px,4vw,36px);
  border:2px dashed currentColor;border-radius:16px;
}
.ph::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,currentColor 0 1.5px,transparent 1.5px 13px);
  opacity:.22;
}
.ph::after{content:"";position:absolute;inset:0;background:currentColor;opacity:.1}
.ph > *{position:relative;z-index:1}
.ph b{
  font-family:var(--f-body);font-weight:800;font-size:.76rem;
  letter-spacing:.2em;text-transform:uppercase;line-height:1.4;
}
.ph small{font-size:.82rem;font-weight:600;line-height:1.4;max-width:26ch}
/* contêiner de arte: a arte sempre preenche a altura reservada */
.art{position:relative;display:grid}
.art > .ph{position:relative;z-index:1}

/* Bagas de açaí decorativas (CSS puro) */
.berry{
  position:absolute;border-radius:50%;pointer-events:none;
  /* Volume todo em radial-gradient (unidades relativas), para a esfera manter
     a mesma qualidade da baga de 44px à de 132px. */
  background:
    /* luz difusa no alto à esquerda */
    radial-gradient(circle at 35% 29%,rgba(168,116,156,.50) 0 10%,transparent 46%),
    /* luz de retorno na borda inferior direita */
    radial-gradient(circle at 74% 76%,rgba(176,104,160,.34) 0 5%,transparent 30%),
    /* sombra própria */
    radial-gradient(circle at 66% 72%,rgba(10,3,9,.75) 0 26%,transparent 68%),
    /* corpo */
    radial-gradient(circle at 38% 32%,#6E3E64 0%,#4A2445 42%,#2C1129 70%,#160713 100%);
}
/* brilho especular: elipse única, de borda suave — dá o aspecto lustroso da baga */
.berry::after{
  content:"";position:absolute;width:26%;height:18%;top:16%;left:24%;
  border-radius:50%;transform:rotate(-28deg);
  background:radial-gradient(ellipse at center,rgba(255,255,255,.85) 0 22%,rgba(255,255,255,.32) 54%,transparent 100%);
}

/* ============================================================
   4. HEADER
   ============================================================ */
.site-header{
  position:absolute;top:0;left:0;width:100%;z-index:60;
  background:transparent;
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:18px;
}
/* o logo é link para o topo: o alvo de toque ficava em 40px de altura */
.site-header .logo{display:inline-flex;align-items:center;min-height:44px}
.logo{display:flex;align-items:center;text-decoration:none;line-height:1}
/* O logo é o único item do header agora (o CTA "Seja franqueado" saiu daqui).
   O SVG é quadrado e todo branco — funciona porque o header é absolute só
   sobre o hero rosa, nunca aparece sobre outro fundo.

   O teto de 100px não é estético, é a folga do hero: o header é absolute, e
   quem reserva espaço para ele é o padding-top do .hero .wrap, que vale
   clamp(100px,12vw,150px). Como a altura do header é logo + 36px de padding,
   passar de 100px faria o logo encostar no h1 nas telas mais estreitas onde
   esse padding ainda está no piso. */
.logo-img{height:clamp(72px,7vw,100px);width:auto;display:block}
@media (max-width:560px){
  .logo-img{height:60px}
}

/* ============================================================
   5. HERO
   ============================================================ */
.hero{
  /* --pink-ate é fonte única de verdade: define onde o rosa vira preto no
     gradiente E até onde o canvas do shader desce. */
  --pink-ate:92%;
  position:relative;z-index:1;
  /* Sem overflow:hidden de propósito: a mão da ilustração sangra para fora do hero,
     por cima do início da seção seguinte (o corte horizontal já é travado pelo body). */
  background:linear-gradient(to bottom,var(--pink) 0 var(--pink-ate),var(--ink) var(--pink-ate) 100%);
}
@media (min-width:900px){
  /* 79% e não 76%: medido, o subtítulo terminava 2px ABAIXO da linha em 1440
     e 3px acima em 1024 — encostado nos dois casos. 79% dá ~18px de respiro
     em toda a faixa de desktop e mantém o CTA sobre o preto, que é o desenho. */
  .hero{--pink-ate:79%}
}
/* Manchas do shader, só sobre a faixa rosa. width/height explícitos porque
   <canvas> é elemento substituído: left/right sozinhos não o esticam, ele
   ficaria nos 300x150 padrão. O rosa chapado continua sendo o background do
   .hero, então sem WebGL o hero fica idêntico ao de hoje. */
.hero-canvas{
  position:absolute;top:0;left:0;z-index:0;pointer-events:none;
  display:block;width:100%;height:var(--pink-ate);
}
.hero .wrap{
  position:relative;z-index:2;
  padding-top:clamp(100px,12vw,150px);padding-bottom:clamp(28px,3.4vw,48px);
}
.hero-copy{position:relative;z-index:2;max-width:66%}
@media (min-width:900px){
  .hero-copy{max-width:50%}
}
/* Entre 900 e 1199 a coluna de 50% dá 457px e "própria loja" (462px) estoura
   por 5px, quebrando o título em mais uma linha. 54% resolve sem encostar na
   arte: avança 42px, e nessa altura os pixels opacos da ilustração só começam
   122px adentro (medido no alpha). */
@media (min-width:900px) and (max-width:1199px){
  .hero-copy{max-width:54%}
}
/* Acima de 1200 a coluna também precisa de folga: com 50% a caixa dá 590px em
   1440 e "Açaí NaLata" pede 648px na fonte cheia. 56% resolve sem encostar na
   arte — avança 50px, e os pixels opacos dela só começam 122px adentro. */
@media (min-width:1200px){
  .hero-copy{max-width:56%}
}
.hero h1{
  /* A curva é ditada por uma restrição medida: "Açaí NaLata" ocupa 8.1x o
     font-size, e precisa caber inteiro na coluna para não quebrar em duas
     linhas. O ponto mais apertado é 900px, onde a .hero-copy salta de 100%
     para 54% da largura e a caixa cai pela metade de uma vez. */
  font-size:clamp(2rem,1.4rem + 3.28vw,4.8rem);
  color:#fff;margin-bottom:.55em;
}
.hero-sub{
  color:rgba(255,255,255,.92);font-weight:400;
  font-size:clamp(1.05rem,1rem + .45vw,1.35rem);
  line-height:1.45;max-width:19ch;margin-bottom:clamp(28px,4vw,44px);
}
/* --- Pop-out da mão -------------------------------------------------
   A arte é um PNG chapado, então não dá para mover "só a mão" com transform:
   o transform arrasta todos os pixels. E as pernas descem 19px MAIS que a mão
   no arquivo, então deixar a imagem transbordar joga perna no preto antes da
   mão. A solução é renderizar a mesma arte duas vezes:

     .hero-cut      caixa com a altura exata da faixa rosa e overflow:hidden.
                    Corta o corpo na borda — inclusive as pernas.
     .hero-hand     cópia solta, recortada no retângulo da mão. Como está fora
                    da .hero-cut, é a única parte que aparece sobre o preto.

   As duas usam a MESMA geometria (--ilu-*), que é o que garante que elas se
   sobreponham em pixel exato: onde as duas desenham, o resultado é idêntico
   e a emenda some. Mexeu numa, mexe nas duas. */
.hero{
  --ilu-top:clamp(16px,4vw,44px);
  --ilu-right:clamp(-32px,-4vw,-12px);
  --ilu-w:clamp(320px,84vw,480px);
}
@media (min-width:900px){
  .hero{
    --ilu-top:clamp(20px,3vw,54px);
    --ilu-right:clamp(-24px,-1vw,4px);
    --ilu-w:clamp(520px,50vw,780px);
  }
}
.hero-cut{
  position:absolute;top:0;left:0;right:0;z-index:10;
  height:var(--pink-ate);overflow:hidden;pointer-events:none;
}
.hero-illustration,
.hero-hand{
  position:absolute;pointer-events:none;
  top:var(--ilu-top);right:var(--ilu-right);
  width:var(--ilu-w);height:auto;
}
/* O corte NÃO pode ser um retângulo: na altura em que a faixa rosa cruza a
   arte, o braço se estende muito além da mão, e uma aresta vertical fatiava a
   manga em linha reta — era o defeito. E acima de y≈955 do arquivo o braço e o
   corpo são um blob só no alpha, então ali nem existe vão para cortar.

   O polígono abaixo segue o CONTORNO PRETO que o próprio desenho já tem entre
   a manga e o corpo, traçado pixel a pixel no PNG. Onde existe vão transparente
   (y>1000) ele corre dentro do vão; onde não existe, corre em cima do traço
   preto. Nos dois casos a aresta cai sobre preto ou sobre nada — some no fundo.

   Pares (x, y) em % da caixa da imagem. Se a arte for redesenhada, refazer o
   traço: é este polígono que muda, mais nada. */
/* --- Hero em tablet e celular ------------------------------------------
   Abaixo de 900px não há largura para texto e arte lado a lado: a ilustração
   tem 320–480px num viewport de 375–768 e cobria o h1 (media "Tenha su[a]",
   "NaLat[a]" cortados). Aqui ela sai do posicionamento absoluto e volta ao
   fluxo, acima do texto e alinhada à direita — o h1 fica inteiro e ganha a
   largura toda, o que também o faz quebrar em 3 linhas em vez de 5.
   A cópia recortada da mão é escondida porque nessa faixa a mão não alcança
   a faixa preta de qualquer forma (medido: sobra 186px no mobile), então ela
   só desenharia por cima de si mesma. */
@media (max-width:899px){
  .hero-copy{max-width:100%}
  .hero .wrap{padding-top:clamp(14px,3vw,26px)}
  .hero-cut{
    position:static;height:auto;overflow:visible;
    padding-top:clamp(60px,15vw,96px);   /* espaço do header, que é absoluto */
  }
  .hero-illustration{
    position:static;display:block;
    width:clamp(260px,72vw,440px);
    margin-inline:auto 0;                /* encosta na direita */
    margin-right:calc(var(--gut) * -0.5);
  }
  .hero-hand{display:none}
}

.hero-hand{
  z-index:11;
  clip-path:polygon(
    0% 58%,      65.0% 58.4%, 63.6% 59.9%, 62.3% 61.5%, 61.0% 63.1%,
    59.6% 64.7%, 58.2% 66.2%, 56.7% 67.8%, 54.2% 71.0%, 52.8% 72.4%,
    51.8% 73.3%, 50.4% 74.9%, 49.4% 76.5%, 47.0% 78.9%, 45.5% 79.7%,
    43.5% 80.8%, 42.5% 82.0%, 41.5% 83.2%, 40.0% 84.4%, 38.5% 85.6%,
    37.0% 86.8%, 35.5% 87.9%, 32.0% 89.1%, 28.5% 90.3%, 26.5% 91.5%,
    24.5% 92.7%, 21.0% 95.0%, 21.0% 100%,  0% 100%
  );
}
.hero .berry{width:clamp(46px,6vw,86px);aspect-ratio:1;right:2%;bottom:5%}

/* ============================================================
   6. NOSSA HISTÓRIA (VSL)
   ============================================================ */
.historia{
  position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding-top:clamp(44px,5.5vw,84px);padding-bottom:var(--pad-y);
}
.historia .wrap{position:relative;z-index:2}
.historia h2{font-size:clamp(2.2rem,1.5rem + 3.2vw,3.9rem);margin-bottom:clamp(28px,4vw,44px)}
.historia .berry:nth-of-type(1){width:clamp(58px,7vw,104px);aspect-ratio:1;left:-2%;top:22%}
.historia .berry:nth-of-type(2){width:clamp(44px,5vw,78px);aspect-ratio:1;right:4%;top:6%}
.historia .berry:nth-of-type(3){width:clamp(70px,9vw,132px);aspect-ratio:1;left:6%;bottom:-4%;opacity:.9}

.historia-grid{display:grid;gap:clamp(28px,4vw,52px);align-items:start}

/* VSL — container 16:9 responsivo */
.vsl{
  position:relative;aspect-ratio:16/9;width:100%;
  border-radius:18px;overflow:hidden;
  background:#0B0B0B;border:1px solid var(--ink-line);
  box-shadow:0 24px 60px -24px rgba(255,0,106,.55);
}
/* contain, não cover: cover preenche o quadro cortando o que sobra, e um
   vídeo que não seja 16:9 perde as bordas — o de teste é 464x832 (vertical) e
   mostrava só 31% da altura. Com contain nada é cortado, e para um vídeo 16:9
   o resultado é idêntico ao cover, já que as proporções batem. */
.vsl > iframe,.vsl > video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain}
.vsl-ph{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(255,0,106,.28),transparent 62%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 1px,transparent 1px 14px),
    #0B0B0B;
  text-align:center;padding:24px;
}
.vsl-play{
  width:clamp(58px,8vw,80px);aspect-ratio:1;border-radius:50%;
  background:var(--cyan);display:grid;place-items:center;
  box-shadow:0 0 0 0 rgba(85,205,205,.45);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(85,205,205,.42)}
  60%{box-shadow:0 0 0 22px rgba(85,205,205,0)}
}
.vsl-play svg{margin-left:4px}
.vsl-ph b{font-family:var(--f-body);font-weight:800;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.vsl-ph small{font-size:.8rem;color:rgba(255,255,255,.6);max-width:34ch}

.historia-txt{display:flex;flex-direction:column;gap:1.15em;font-size:clamp(1rem,.97rem + .18vw,1.1rem)}
.historia-txt p{max-width:56ch}
.historia-txt strong{font-weight:800;color:#fff}
.historia-txt .hl{color:var(--cyan);font-weight:700}
.historia-txt .hl strong{color:var(--cyan)}

/* ============================================================
   7. O QUE VOCÊ PRECISA SABER
   ============================================================ */
.saber{position:relative;background:var(--paper);padding-block:var(--pad-y);overflow:hidden}
.saber h2{font-size:clamp(2.2rem,1.5rem + 3.2vw,3.9rem);margin-bottom:clamp(32px,4.5vw,52px)}
.saber-grid{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media (min-width:900px){
  .saber-grid{grid-template-columns:1fr 1fr}
}

.fatos{display:flex;flex-direction:column;gap:clamp(16px,2.2vw,26px);list-style:none;padding:0;margin:0}
.fato{
  background:var(--cyan);color:var(--ink);
  padding:clamp(20px,2.6vw,28px) clamp(22px,3vw,34px);
  font-weight:600;line-height:1.45;
  font-size:clamp(1rem,.96rem + .22vw,1.15rem);
  /* trava de leitura: em tablet o card ocupa a largura toda e a linha chegava
     a 80 caracteres. Acima de ~70 a leitura cai. */
  max-width:62ch;
  box-shadow:0 14px 30px -18px rgba(2,2,2,.45);
  transition:transform .25s var(--ease);
}
/* leve rotação, como os blocos recortados da cartilha */
.fato:nth-child(1){transform:rotate(-1.4deg)}
.fato:nth-child(2){transform:rotate(.9deg)}
.fato:nth-child(3){transform:rotate(-2.2deg)}
.fato:hover{transform:perspective(900px) rotateX(3deg) rotateY(-4deg) scale(1.02)}
.fato .valor{
  display:block;font-family:var(--f-accent);font-weight:400;color:var(--pink);
  font-size:clamp(1.9rem,1.2rem + 2.8vw,2.9rem);line-height:1.05;margin-top:.25em;
  letter-spacing:-.02em;
}
.saber-art{min-height:clamp(320px,42vw,520px);perspective:1000px}
/* Grupo que inclina com o mouse (ver PROFUNDIDADE 3D em main.js).
   Palco de proporção fixa: a arte de referência é 1030x1160, e as duas peças
   são posicionadas em % dentro dele. Assim a composição (lata à esquerda,
   menina atrás à direita) não se desmonta em nenhuma largura — ela só escala.
   Fica no fluxo do grid (não absolute) para a altura seguir esticando a
   .saber-art; fora do fluxo a seção encolhe e a arte invade os cards acima. */
.saber-3d{
  position:relative;
  width:100%;max-width:clamp(300px,46vw,560px);margin-inline:auto;
  aspect-ratio:1030/1160;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .4s var(--ease);
  will-change:transform;
}
.saber-art .ph{color:var(--acai)}
/* A lata (com a mão) na frente e à esquerda, sangrando um pouco pela borda.
   Sem rotação e sem sombra: a referência é a arte chapada. */
.saber-photo{
  position:absolute;z-index:2;
  left:1%;top:8%;width:61%;height:auto;
}
/* A menina atrás e à direita, com o blob rosa e o selo. Boa parte do blob fica
   escondida atrás da lata — é assim na referência. Os offsets saem da posição
   do selo nela: o selo é 36% da largura do SVG e encosta na base do viewBox,
   então dá para ancorar o SVG inteiro por ele.

   Sem translateZ: dentro de um preserve-3d com will-change:transform, empurrar
   a menina para trás no eixo Z a promovia a uma camada própria que o navegador
   às vezes não pintava — ela sumia até algo forçar repaint (reproduzido no
   mobile). A profundidade já vem do z-index e da lata cobrindo o corpo dela. */
.saber-girl{
  position:absolute;z-index:1;pointer-events:none;
  right:6.8%;top:15.5%;width:56.5%;height:auto;
}
/* ============================================================
   8. VANTAGENS
   ============================================================ */
.vantagens{background:var(--paper);padding-bottom:var(--pad-y)}
.vantagens-grid{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media (min-width:900px){
  .vantagens-grid{grid-template-columns:1fr 1fr}
}
.vantagens h2{font-size:clamp(2.1rem,1.5rem + 2.9vw,3.5rem);margin-bottom:clamp(28px,3.6vw,44px)}

/* Painel "motivos" — cartão escuro com a razão do modelo ser fácil de operar */
.motivos{
  position:relative;background:var(--ink);color:#fff;
  border-radius:20px;padding:clamp(24px,3vw,36px);
}
.motivos-h{
  font-family:var(--f-display);font-weight:800;line-height:1.3;
  font-size:clamp(1.1rem,.95rem + .8vw,1.4rem);text-wrap:balance;
  margin-bottom:clamp(20px,2.6vw,28px);
}
.motivos-list{
  display:grid;grid-template-columns:1fr;gap:clamp(14px,1.8vw,18px);
  list-style:none;margin:0;padding:0;
}
/* O breakpoint é do viewport, mas o container muda de largura em 900px,
   quando .vantagens-grid vira duas colunas. Entre 900 e 1149 a metade não
   comporta duas colunas: dava 178px por card, 21ch de linha. */
@media (min-width:560px) and (max-width:899px){
  .motivos-list{grid-template-columns:1fr 1fr}
}
@media (min-width:1150px){
  .motivos-list{grid-template-columns:1fr 1fr}
}
.motivo{
  padding:clamp(16px,2vw,20px);border:1px solid var(--ink-line);border-radius:14px;
  background:rgba(255,255,255,.02);
  transition:transform .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease);
}
.motivo:hover{
  transform:perspective(800px) rotateX(4deg) translateY(-4px);
  border-color:rgba(85,205,205,.42);background:rgba(85,205,205,.05);
}
.motivo-ico{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--cyan);margin-bottom:.85em;
}
.motivo-ico img{width:26px;height:26px;object-fit:contain}
.motivo b{
  display:block;font-family:var(--f-display);font-weight:800;font-size:.92rem;
  margin-bottom:.4em;
}
.motivo p{
  font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.6);margin:0;
}

/* Colunas explícitas em vez de auto-fit: são 5 itens, e o auto-fit resolvia
   4 colunas em 768px (deixando 1 órfã) e 2 em 1024 (2+2+1). Com 3 fixas acima
   de 560 fica sempre 3+2, que é a quebra menos desequilibrada para 5. */
.vant-list{
  display:grid;gap:clamp(20px,2.6vw,30px);list-style:none;padding:0;margin:0 0 clamp(34px,4vw,46px);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:560px){ .vant-list{grid-template-columns:repeat(3,1fr)} }
.vant{display:flex;flex-direction:column;align-items:flex-start;gap:.85rem}
/* O ícone já traz o próprio círculo rosa — o container só reserva o espaço. */
.vant-ico{
  width:clamp(60px,6.4vw,76px);aspect-ratio:1;
  display:grid;place-items:center;flex:0 0 auto;
  transition:transform .25s var(--ease);
}
.vant:hover .vant-ico{transform:translateY(-4px) rotate(-6deg)}
.vant-ico img{width:100%;height:100%;object-fit:contain}
.vant b{
  font-family:var(--f-accent);font-weight:400;font-style:normal;
  font-size:.8rem;letter-spacing:.02em;text-transform:uppercase;line-height:1.25;
}

/* ============================================================
   9. COMO FUNCIONA NA PRÁTICA
   ============================================================ */
.processo{background:var(--ink);color:#fff;padding-block:var(--pad-y)}
.processo .eyebrow{display:block;margin-bottom:1em}
.processo h2{
  font-size:clamp(2rem,1.4rem + 2.8vw,3.4rem);line-height:1.12;
  max-width:18ch;margin-bottom:clamp(44px,6vw,72px);
}

/* Colunas explícitas em vez de auto-fit: são 4 passos, e o auto-fit resolvia
   3 colunas em 1024px, deixando um passo órfão na segunda linha. 2x2 lê melhor
   como sequência do que 3+1. */
.passos{
  display:grid;gap:clamp(28px,4vw,40px);list-style:none;margin:0;padding:0;
  grid-template-columns:1fr;
}
@media (min-width:520px){ .passos{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .passos{grid-template-columns:repeat(4,1fr)} }
.passo-num{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--cyan);color:var(--ink);
  font-family:var(--f-display);font-weight:800;font-size:.95rem;
  margin-bottom:1.2em;
}
.passo b{
  display:block;font-family:var(--f-display);font-weight:800;
  font-size:1.05rem;margin-bottom:.6em;
}
.passo p{font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.62);max-width:32ch}


/* ============================================================
   PERFIL DO FRANQUEADO
   Único bloco no --acai da paleta. Entra entre duas seções claras
   (vantagens) e o preto de processo, então precisava ser escuro sem
   ser preto — senão emendaria com a seção seguinte.
   ============================================================ */
.perfil{
  position:relative;overflow:hidden;
  background:var(--acai);color:#fff;
  padding-block:var(--pad-y);
}
/* Mesmo brilho rosa que o resto da página usa para dar profundidade
   em fundo escuro. Fica atrás do conteúdo (z-index do .wrap). */
.perfil-glow{
  position:absolute;z-index:0;pointer-events:none;
  left:50%;top:-26%;translate:-50% 0;
  width:min(1000px,130%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,0,106,.22),transparent 62%);
}
.perfil .wrap{position:relative;z-index:1}

.perfil-grid{display:grid;gap:clamp(32px,5vw,56px);align-items:start}
@media (min-width:900px){
  /* A coluna do texto é menor de propósito: a lista é o conteúdo,
     o título só a apresenta. */
  .perfil-grid{
    grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
    gap:clamp(48px,6vw,96px);align-items:center;
  }
}
.perfil .eyebrow{display:block;margin-bottom:1em}
.perfil h2{
  font-size:clamp(1.9rem,1.4rem + 2.4vw,3.1rem);
  line-height:1.12;max-width:14ch;
}
.perfil-nota{
  margin-top:clamp(20px,2.6vw,30px);
  font-size:.92rem;line-height:1.6;
  color:rgba(255,255,255,.66);max-width:34ch;
}
.perfil-cta{margin-top:clamp(26px,3.2vw,38px)}

.criterios{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.criterio{
  display:flex;align-items:flex-start;gap:15px;
  padding:1.15em 1.35em;border-radius:14px;
  /* preto translúcido em vez de cor chapada: o brilho rosa atravessa
     e os cards não viram retângulos mortos sobre o roxo */
  background:rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.11);
}
.criterio p{
  margin:0;font-size:.96rem;line-height:1.5;font-weight:600;
  color:rgba(255,255,255,.92);
  max-width:58ch;   /* mesma trava: chegava a 76ch em 768 */
}
.criterio strong{color:#fff;font-weight:800}
.criterio-check{
  flex:0 0 auto;display:grid;place-items:center;
  /* 30px para dar folga ao ícone grosso (16px, stroke-width 5) — com o
     28px antigo a ponta do traço quase encostava na borda do círculo */
  width:30px;height:30px;border-radius:50%;
  margin-top:.05em;
  /* ciano puro com o traço preto por cima — mesma dupla dos .passo-num
     e do tick do formulário, onde o ciano passa folgado */
  background:var(--cyan);color:var(--ink);
}


/* ============================================================
   O QUE VOCÊ RECEBE
   Entra logo depois do --acai do perfil e antes do preto do processo.
   O fio no topo é o que evita as duas faixas escuras lerem como uma só.
   ============================================================ */
/* Branco da marca. Os fios que separavam esta seção das vizinhas saíram:
   ela agora entra entre o roxo do perfil e o preto do processo, e o próprio
   salto de claro para escuro já faz a separação — hairline sobre branco
   só sujaria a emenda. */
.recebe{
  position:relative;background:var(--paper);color:var(--ink);
  padding-block:var(--pad-y);
}
/* Rosa escuro, não ciano: sobre o branco o ciano puro dá 1,91:1 e mesmo o
   --cyan-dark fica em 2,66:1 — reprovam num rótulo de 11,5px em caixa alta.
   O --pink-dark entrega 5,33:1. */
.recebe .eyebrow{display:block;text-align:center;margin-bottom:1.1em;color:var(--pink-dark)}
.recebe h2{
  text-align:center;margin-inline:auto;
  font-size:clamp(1.85rem,1.3rem + 2.6vw,3.2rem);
  line-height:1.14;max-width:20ch;text-wrap:balance;
  margin-bottom:clamp(44px,6vw,72px);
}
/* Flex e não grid: são 5 itens, número ímpar. Num grid de 2 colunas o
   quinto fica encostado à esquerda da última linha; com flex + justify-content
   a sobra centraliza sozinha, em qualquer quebra. Base em clamp para os tiles
   terem o mesmo tamanho em todas as linhas. */
.entregas{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(26px,3vw,36px);
  list-style:none;margin:0;padding:0;
}
.entrega{
  flex:0 1 clamp(140px,15vw,190px);
  display:grid;justify-items:center;text-align:center;gap:1em;
}
.entrega-ico{
  display:grid;place-items:center;
  width:clamp(48px,5vw,58px);aspect-ratio:1;border-radius:15px;
  /* mesmo chip ciano com ícone branco/preto dos .motivo-ico e .passo-num */
  background:var(--cyan);color:var(--ink);
}
.entrega-ico img{width:76%;height:76%;object-fit:contain}
.entrega b{
  font-family:var(--f-body);font-weight:700;
  font-size:.9rem;line-height:1.42;
  color:rgba(0,0,0,.78);max-width:17ch;
}
/* O resto da seção é centralizado (eyebrow, h2, entregas), então o CTA também.
   O botão fica montado NA emenda das duas seções: metade sobre o branco,
   metade sobre o preto do "Como funciona".

   Como isso se equilibra sozinho, sem número mágico de altura:
     translate:0 50%    desce o bloco meia altura dele. O centro do botão passa
                        a cair exatamente onde ficava a base dele no fluxo.
     margin-bottom -pad-y  cancela o padding de baixo da seção, então a borda
                        entre .recebe e .processo cai nesse mesmo ponto.
   Resultado: borda da seção == centro do botão, em qualquer tamanho de fonte.

   translate (propriedade própria) e não transform: .reveal.in zera o transform
   ao terminar a animação de entrada e levaria o deslocamento junto; e o
   .cta:hover usa transform para o pulo de -2px. As três coisas convivem porque
   translate/rotate/scale compõem separado do transform. */
.recebe-cta{
  display:flex;justify-content:center;
  position:relative;z-index:3;
  margin-top:clamp(40px,5vw,64px);
  margin-bottom:calc(var(--pad-y) * -1);
  translate:0 50%;
}

/* ============================================================
   10. LOJA + FORMULÁRIO (fundo compartilhado)
   A foto da fachada cobre os dois blocos: nítida no topo, escurecendo
   conforme desce até virar o preto do rodapé.
   ============================================================ */
/* --loja-h ancora tanto a altura do bloco da fachada quanto as paradas do
   degradê, para o contraste da legenda ser o mesmo em qualquer tela. */
.loja-form{--loja-h:clamp(360px,58vw,620px);position:relative;overflow:hidden;background:var(--ink)}
.loja-photo{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 18%;
}
/* A foto fica nítida de ponta a ponta. A única camada que sobrou é a emenda
   com o preto do rodapé — sem ela a imagem cortaria seco no rodapé.
   Não há mais texto solto sobre ela: a legenda saiu e o cabeçalho do
   formulário desceu para dentro do card, que é opaco. */
.loja-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,var(--ink) 0,rgba(0,0,0,0) clamp(160px,22vw,280px));
}
/* Só reserva a altura em que a fachada aparece sem nada por cima. */
.loja{min-height:var(--loja-h)}

/* ============================================================
   11. FORMULÁRIO (fluxo tipo Typeform)
   ============================================================ */
.form-sec{
  position:relative;z-index:2;color:#fff;
  padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(56px,7vw,104px);
  scroll-margin-top:70px;
}
/* O brilho rosa do card agora vem só do box-shadow dele, que é local.
   O círculo de 900px que ficava aqui lavava a foto inteira de rosa. */

/* O card flutua sobre a fachada escura, única superfície clara ali.
   sobre a fachada escura. Os tokens --c-* concentram a paleta interna, então
   trocar o card de cor depois é mexer só neste bloco, não nas 40 regras abaixo.
   Rosa e ciano entram nas versões -dark: as puras não alcançam 4.5:1 sobre
   branco (rosa 3,85:1, ciano 1,91:1) e reprovariam nos rótulos pequenos
   (contador, dica, resumo). */
.card{
  --c-bg:var(--paper);
  --c-fg:var(--ink);
  --c-fg-soft:rgba(0,0,0,.72);
  --c-fg-mute:rgba(0,0,0,.56);
  --c-line:rgba(0,0,0,.20);
  /* contorno de controle não marcado (bolinha, checkbox, linha do campo):
     precisa de 3:1 pela WCAG 1.4.11 — .45 entrega 3,35:1 sobre o branco */
  --c-line-strong:rgba(0,0,0,.45);
  --c-pink:var(--pink-dark);
  --c-pink-soft:rgba(255,0,106,.08);
  --c-cyan:var(--cyan-dark);

  position:relative;z-index:2;
  width:min(100%,660px);margin-inline:auto;
  background:var(--c-bg);color:var(--c-fg);
  border:1px solid rgba(0,0,0,.10);border-radius:20px;
  box-shadow:0 40px 90px -50px rgba(255,0,106,.7);
  overflow:hidden;
}
/* O CTA ciano do resto do site sumiria sobre o branco: dentro do card ele
   vira rosa, e o hover abre para o rosa puro da marca. */
/* --cta-bg-hover não precisa mais ser redeclarado aqui: o #DE0060 já é o
   padrão herdado de .cta. Só o --cta-bg de repouso muda (pink-dark, mais
   escuro que o cyan padrão) e o texto, que já nasce branco porque o botão
   nunca fica sobre fundo claro o bastante para preto funcionar. */
.card .cta{--cta-bg:var(--pink-dark);color:#fff}
.card .eyebrow{color:var(--c-pink)}

/* Trilho escuro de propósito: o ciano da marca tem luminância média (.50) e
   desaparece sobre qualquer cinza claro — sobre o trilho escuro ele volta a
   3.5:1 e a barra é o ciano puro do manual, não uma versão lavada. */
.bar{height:4px;background:rgba(0,0,0,.62)}
.bar > i{
  display:block;height:100%;width:0;background:var(--cyan);
  transition:width .45s var(--ease);
}
.stage{position:relative;transition:height .38s var(--ease)}
/* Honeypot anti-bot: fora da tela, sem display:none (bot que ignora
   display:none ainda preenche). Humano nunca vê; se vier preenchido, é robô. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.step{padding:clamp(26px,4vw,42px)}
.step.enter{opacity:0}
.step.from-right{transform:translateX(26px)}
.step.from-left{transform:translateX(-26px)}
.step{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .34s var(--ease)}
.step.leave{opacity:0;pointer-events:none}
.step.to-left{transform:translateX(-26px)}
.step.to-right{transform:translateX(26px)}

.step-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:1.4em}
.counter{
  font-family:var(--f-body);font-weight:700;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--c-fg-mute);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.q{
  font-family:var(--f-display);font-weight:800;line-height:1.15;
  font-size:clamp(1.35rem,1.1rem + 1.2vw,1.9rem);text-wrap:balance;
  margin-bottom:1.1em;
}
.q-help{margin:-.7em 0 1.3em;color:var(--c-fg-soft);font-size:.92rem}

/* Campos de texto — linha inferior, como no fluxo de referência */
.field{
  width:100%;background:transparent;border:0;border-bottom:2px solid var(--c-line-strong);
  padding:.5em 0 .55em;font-size:clamp(1.05rem,1rem + .5vw,1.3rem);font-weight:600;
  color:var(--c-fg);border-radius:0;transition:border-color .2s var(--ease);
}
.field::placeholder{color:rgba(0,0,0,.38);font-weight:400}
.field:focus{outline:0;border-bottom-color:var(--c-pink)}
textarea.field{
  border:2px solid var(--c-line-strong);border-radius:12px;padding:.85em 1em;
  min-height:140px;resize:vertical;font-size:1.02rem;line-height:1.55;
}
textarea.field:focus{border-color:var(--c-pink)}

/* Opções de escolha única */
.opts{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;border:0}
.opt{
  display:flex;align-items:center;gap:14px;cursor:pointer;
  padding:1em 1.15em;border-radius:12px;
  background:rgba(0,0,0,.025);border:1.5px solid var(--c-line);
  font-weight:600;font-size:.98rem;line-height:1.35;
  transition:border-color .18s var(--ease),background-color .18s var(--ease),transform .18s var(--ease);
}
.opt:hover{border-color:rgba(255,0,106,.5);background:var(--c-pink-soft);transform:translateX(3px)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.dot{
  width:20px;height:20px;flex:0 0 auto;border-radius:50%;
  border:2px solid var(--c-line-strong);display:grid;place-items:center;
  transition:border-color .18s var(--ease);
}
.dot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--c-pink);transform:scale(0);transition:transform .18s var(--ease)}
.opt:has(input:checked){border-color:var(--c-pink);background:var(--c-pink-soft)}
.opt:has(input:checked) .dot{border-color:var(--c-pink)}
.opt:has(input:checked) .dot::after{transform:scale(1)}
.opt:has(input:focus-visible){outline:3px solid var(--c-pink);outline-offset:3px}

.err{
  display:none;margin-top:.9em;color:var(--c-pink);font-size:.86rem;font-weight:700;
}
.err.on{display:block}

.actions{display:flex;align-items:center;gap:14px;margin-top:clamp(24px,3vw,34px);flex-wrap:wrap}
.back{
  background:none;border:0;cursor:pointer;padding:.6em .2em;
  color:var(--c-fg-soft);font-weight:700;font-size:.85rem;
  transition:color .18s var(--ease);
}
.back:hover{color:var(--c-fg)}
.skip{
  margin-left:auto;background:none;border:0;cursor:pointer;
  color:var(--c-fg-mute);font-size:.82rem;font-weight:600;text-decoration:underline;
  text-underline-offset:3px;
}
.skip:hover{color:var(--c-fg)}
.actions .cta{padding:.95em 1.7em}

/* Intro / revisão / sucesso */
.center{text-align:center}
.center .q{margin-bottom:.6em}
.center p{color:var(--c-fg-soft);max-width:40ch;margin-inline:auto}
.center .actions{justify-content:center}
.meta{
  margin-top:1.6em;font-family:var(--f-body);font-weight:700;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--c-fg-mute);
}
.resumo{
  margin:0 0 1.4em;border:1px solid var(--c-line);border-radius:14px;overflow:hidden;
  background:rgba(0,0,0,.02);
}
.resumo div{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:.95em 1.15em;border-bottom:1px solid var(--c-line);
}
.resumo div:last-child{border-bottom:0}
.resumo dt{color:var(--c-fg-soft);font-size:.85rem;margin:0}
.resumo dd{margin:0;font-weight:800;font-size:.92rem;text-align:right;word-break:break-word}
.consent{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  font-size:.85rem;line-height:1.45;color:var(--c-fg-soft);
}
.consent input{position:absolute;opacity:0;width:0;height:0}
.box{
  width:20px;height:20px;flex:0 0 auto;margin-top:1px;border-radius:5px;
  border:2px solid var(--c-line-strong);display:grid;place-items:center;
  transition:background-color .18s var(--ease),border-color .18s var(--ease);
}
.box svg{opacity:0;transform:scale(.5);transition:opacity .18s var(--ease),transform .18s var(--ease)}
/* box e tick são áreas preenchidas com o check preto por cima, então aqui o
   ciano puro da marca passa folgado (11:1) e entra sem escurecer. */
.consent:has(input:checked) .box{background:var(--cyan);border-color:var(--cyan)}
.consent:has(input:checked) .box svg{opacity:1;transform:scale(1)}
.consent:has(input:focus-visible) .box{outline:3px solid var(--c-pink);outline-offset:3px}

.tick{
  width:64px;aspect-ratio:1;border-radius:50%;background:var(--cyan);
  display:grid;place-items:center;margin:0 auto 1.2em;
}

/* ---------- 12. RODAPÉ ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.45);padding-block:36px;border-top:1px solid var(--ink-line)}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;font-size:.82rem}

/* ---------- 13. REVELAÇÃO AO ROLAR ---------- */
.reveal{opacity:0;transform:translateY(22px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}