/* =========================================================
   FLIBOO KIDS — Landing page para lojistas
   Baseado no Guia Estratégico de Marca 2025
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Cartela oficial da marca */
  --caramelo:#CB7147;
  --verde:#73BDBD;
  --bege:#F9F1E8;
  --rosa:#EE7FB1;
  --azul:#256AD8;
  --amarelo:#FCD45C;

  /* Derivadas para interface (contraste AA garantido) */
  --caramelo-t:#A9542C;
  --verde-t:#2E6B6B;
  --rosa-t:#C13C74;
  --azul-t:#1B4FA5;
  --amarelo-claro:#FFF4D6;
  --verde-escuro:#4E9A9A;
  --verde-profundo:#2E6B6B;
  --azul-escuro:#1B4FA5;
  --azul-noite:#16305A;
  --tinta:#1C3357;
  --tinta-suave:#4A5F80;
  --branco:#FFFFFF;
  --bege-fundo:#FDF8F3;
  --linha:rgba(28,51,87,.12);

  /* Tipografia */
  --display:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --texto:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Ritmo */
  --raio:22px;
  --raio-g:34px;
  --secao:clamp(72px,9vw,132px);
  --gutter:clamp(20px,4vw,48px);
  --max:1200px;

  --sombra:0 18px 44px -22px rgba(22,48,90,.38);
  --sombra-alta:0 34px 70px -28px rgba(22,48,90,.45);
  --mola:cubic-bezier(.22,1,.36,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--texto);
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.66;
  color:var(--tinta);
  background:var(--bege-fundo);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;display:block}
img{height:auto}  /* impede que o atributo height do HTML anule aspect-ratio */
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;line-height:1.1;letter-spacing:-.025em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--amarelo);outline-offset:3px;border-radius:8px}

/* ---------- 3. UTILITÁRIOS ---------- */
.wrap{width:min(100% - var(--gutter)*2,var(--max));margin-inline:auto}
.wrap-larga{width:min(100% - var(--gutter)*2,1380px);margin-inline:auto}
.secao{padding-block:var(--secao);position:relative;overflow:hidden}
.secao--numeros{padding-top:0;overflow:visible}
.centro{text-align:center}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.olho{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--texto);font-weight:700;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--caramelo-t);margin-bottom:1.1rem;
}
.olho::before{content:"";width:26px;height:3px;border-radius:3px;background:currentColor;opacity:.6}
.olho--claro{color:var(--amarelo-claro)}

h1,.h1{font-size:clamp(2.3rem,4.55vw,3.75rem)}
h2,.h2{font-size:clamp(2rem,4.4vw,3.4rem)}
h3,.h3{font-size:clamp(1.25rem,2.1vw,1.65rem)}
.lead{font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.62;color:var(--tinta-suave);max-width:62ch}
.lead--claro{color:rgba(255,255,255,.92)}

/* ---------- 4. BOTÕES ---------- */
.btn{
  --bg:var(--caramelo); --fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:1.02em 1.9em;border:0;border-radius:999px;
  background:var(--bg);color:var(--fg);
  font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:.005em;
  cursor:pointer;position:relative;isolation:isolate;
  transition:transform .35s var(--mola),box-shadow .35s var(--mola),background .25s ease;
  box-shadow:0 12px 26px -14px rgba(22,48,90,.55);
}
.btn:hover{transform:translateY(-3px) rotate(-.6deg);box-shadow:0 20px 34px -16px rgba(22,48,90,.55)}
.btn:active{transform:translateY(-1px) scale(.985)}
.btn svg{width:1.15em;height:1.15em;flex:none;transition:transform .35s var(--mola)}
.btn:hover svg{transform:translateX(3px)}
.btn--amarelo{--bg:var(--amarelo);--fg:var(--azul-noite)}
.btn--verde{--bg:var(--verde);--fg:var(--azul-noite)}
.btn--branco{--bg:#fff;--fg:var(--azul)}
.btn--fantasma{--bg:transparent;--fg:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.btn--fantasma:hover{--bg:rgba(255,255,255,.12)}
.btn--g{padding:1.15em 2.3em;font-size:1.06rem}
.btn--bloco{width:100%}

/* ---------- 5. FORMAS DA MARCA ---------- */
.formas{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.forma{position:absolute;opacity:.9;will-change:transform}
.forma img{width:100%;height:auto}
@keyframes flutua{
  0%,100%{transform:translate3d(0,0,0) rotate(var(--r,0deg))}
  50%{transform:translate3d(0,-22px,0) rotate(calc(var(--r,0deg) + 6deg))}
}
.forma--anim{animation:flutua var(--dur,9s) ease-in-out infinite;animation-delay:var(--del,0s)}
@media (prefers-reduced-motion:reduce){.forma--anim{animation:none}}

/* ---------- 6. CABEÇALHO ---------- */
.topo{
  position:fixed;inset:0 0 auto;z-index:80;
  padding-block:clamp(14px,2vw,22px);
  transition:background .35s ease,box-shadow .35s ease,padding .35s ease,backdrop-filter .35s ease;
}
.topo__grade{display:flex;align-items:center;gap:clamp(16px,3vw,40px);position:relative}
.topo__logo{width:clamp(112px,11vw,142px);flex:none;position:relative;z-index:3;transition:width .35s var(--mola)}
.topo__logo svg,.topo__logo img{width:100%;height:auto}
.topo__nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.topo__link{
  font-weight:600;font-size:.95rem;color:#fff;position:relative;padding:.35em 0;
  transition:color .25s ease;
}
.topo__link::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;border-radius:3px;
  background:var(--amarelo);transition:right .35s var(--mola);
}
.topo__link:hover::after{right:0}
.topo__acoes{display:flex;align-items:center;gap:12px;margin-left:clamp(8px,1.5vw,20px)}
.topo--fixo{
  background:rgba(253,248,243,.92);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 10px 30px -22px rgba(22,48,90,.5);
  padding-block:11px;
}
.topo--fixo .topo__link{color:var(--tinta)}
.topo--fixo .topo__logo{width:clamp(104px,9vw,124px)}
.topo__btn{padding:.78em 1.35em;font-size:.93rem}

.hamburguer{
  display:none;width:46px;height:46px;border:0;border-radius:14px;
  background:rgba(255,255,255,.16);cursor:pointer;position:relative;
}
.topo--fixo .hamburguer{background:rgba(28,51,87,.08)}
.hamburguer span{
  position:absolute;left:13px;right:13px;height:2.5px;border-radius:3px;background:#fff;
  transition:transform .35s var(--mola),opacity .2s ease;
}
.topo--fixo .hamburguer span,.topo--menu .hamburguer span{background:var(--tinta)}
.topo--menu .hamburguer{background:rgba(28,51,87,.08)}
.hamburguer span:nth-child(1){top:16px}
.hamburguer span:nth-child(2){top:22px}
.hamburguer span:nth-child(3){top:28px}
.hamburguer[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburguer[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguer[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- 7. HERO ---------- */
.hero{
  position:relative;background:var(--azul);color:#fff;
  padding-top:clamp(130px,16vw,180px);padding-bottom:0;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;left:-6%;right:-6%;bottom:-2px;height:clamp(46px,7vw,96px);
  background:var(--bege-fundo);border-radius:50% 50% 0 0/100% 100% 0 0;z-index:3;
}
.hero__grade{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.16fr .84fr;gap:clamp(20px,3vw,44px);align-items:end;
}
.hero__texto{padding-bottom:clamp(56px,8vw,110px)}
.hero h1{color:#fff;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--amarelo)}
.hero__lead{margin-top:1.35rem;max-width:53ch}
.hero__ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.3rem}
.hero__selo{
  display:block;margin-top:1.9rem;max-width:46ch;
  font-size:.9rem;color:rgba(255,255,255,.88);
}
.hero__selo svg{display:inline-block;vertical-align:-.22em;margin-right:.45em}
.hero__selo b{color:#fff;font-weight:700}

.hero__midia{position:relative;min-height:clamp(360px,44vw,600px);display:flex;align-items:flex-end;justify-content:center}
.hero__menina{
  position:relative;z-index:2;width:min(100%,520px);
  filter:drop-shadow(0 30px 44px rgba(9,32,74,.42));
  animation:entra-menina 1.1s var(--mola) both .15s;
}
@keyframes entra-menina{from{opacity:0;transform:translateY(42px) scale(.96)}to{opacity:1;transform:none}}
.hero__menina{max-height:min(62vh,600px);width:auto;object-fit:contain}
.hero__mascote{
  position:absolute;left:0;bottom:19%;width:clamp(118px,13vw,168px);aspect-ratio:4/3;
  object-fit:cover;z-index:3;
  border-radius:22px;box-shadow:var(--sombra-alta);border:4px solid #fff;
  transform:rotate(-5deg);animation:flutua 7s ease-in-out infinite;
}
.hero__balao{
  position:absolute;right:-2%;top:14%;z-index:4;
  background:#fff;color:var(--tinta);border-radius:20px;padding:.85rem 1.15rem;
  box-shadow:var(--sombra-alta);font-weight:700;font-size:.9rem;line-height:1.35;
  max-width:190px;transform:rotate(3deg);animation:flutua 8.5s ease-in-out infinite .8s;
}
.hero__balao span{display:block;font-family:var(--display);color:var(--caramelo);font-size:1.5rem;line-height:1}

/* números */
.numeros{
  position:relative;z-index:6;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.6vw,20px);margin-top:calc(var(--secao) * -.4);
}
.numero{
  background:#fff;border-radius:var(--raio);padding:clamp(18px,2.4vw,28px);
  box-shadow:var(--sombra);border-top:5px solid var(--ct,var(--verde-t));
  transition:transform .4s var(--mola),box-shadow .4s var(--mola);
}
.numero:hover{transform:translateY(-7px);box-shadow:var(--sombra-alta)}
.numero b{display:block;font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.05;color:var(--ct,var(--verde-t))}
.numero span{display:block;margin-top:.5rem;font-size:.9rem;font-weight:600;color:var(--tinta-suave);line-height:1.4}

/* ---------- 8. MARQUEE ---------- */
.faixa{background:var(--caramelo);color:#fff;padding:.95rem 0;overflow:hidden;position:relative}
.faixa__trilho{display:flex;width:max-content;animation:desliza 38s linear infinite}
.faixa:hover .faixa__trilho{animation-play-state:paused}
@keyframes desliza{to{transform:translateX(-50%)}}
.faixa__grupo{display:flex;align-items:center;flex:none}
.faixa__item{
  font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.5vw,1.32rem);
  padding-inline:clamp(14px,2vw,26px);white-space:nowrap;
}
.faixa__ponto{width:9px;height:9px;border-radius:50%;background:var(--amarelo);flex:none}
@media (prefers-reduced-motion:reduce){.faixa__trilho{animation:none;flex-wrap:wrap;width:100%;justify-content:center}}

/* ---------- 9. CARTÕES GENÉRICOS ---------- */
.cartao{
  background:#fff;border-radius:var(--raio-g);padding:clamp(24px,3vw,34px);
  box-shadow:0 14px 34px -26px rgba(22,48,90,.5);
  border:1px solid rgba(28,51,87,.07);
  transition:transform .45s var(--mola),box-shadow .45s var(--mola),border-color .3s ease;
  position:relative;overflow:hidden;height:100%;
}
.cartao:hover{transform:translateY(-8px);box-shadow:var(--sombra-alta);border-color:transparent}
.cartao__icone{width:56px;height:56px;margin-bottom:1.15rem}
.cartao__icone img{width:100%;height:100%;object-fit:contain}
.cartao h3{margin-bottom:.6rem;color:var(--tinta)}
.cartao p{font-size:.97rem;color:var(--tinta-suave)}
.cartao--claro{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(6px)}
.cartao--claro h3{color:#fff}
.cartao--claro p{color:rgba(255,255,255,.87)}
.cartao--claro:hover{background:rgba(255,255,255,.15)}

.grade{display:grid;gap:clamp(16px,2vw,26px)}
.grade--2{grid-template-columns:repeat(2,1fr)}
.grade--3{grid-template-columns:repeat(3,1fr)}
.grade--4{grid-template-columns:repeat(4,1fr)}

/* ---------- 10. SEÇÃO MARCA ---------- */
.marca{background:var(--bege)}
.marca__grade{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.marca__foto{position:relative}
.marca__foto img.principal{
  border-radius:var(--raio-g);box-shadow:var(--sombra-alta);position:relative;z-index:2;
  aspect-ratio:4/5;object-fit:cover;width:100%;
}
.marca__foto::before{
  content:"";position:absolute;inset:auto -20px -22px 34px;height:72%;
  background:var(--verde);border-radius:var(--raio-g);z-index:1;
}
.marca__citacao{
  margin-top:2rem;padding-left:1.3rem;border-left:5px solid var(--caramelo);
  font-family:var(--display);font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.35;color:var(--tinta);
}
.pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);margin-top:2.4rem}
.pilar{background:#fff;border-radius:var(--raio);padding:1.35rem 1.25rem;text-align:center;box-shadow:0 10px 26px -22px rgba(22,48,90,.5);transition:transform .4s var(--mola)}
.pilar:hover{transform:translateY(-6px) rotate(-1deg)}
.pilar img{width:46px;height:46px;margin:0 auto .7rem;object-fit:contain}
.pilar b{font-family:var(--display);font-size:1.1rem;display:block;color:var(--tinta)}
.pilar span{font-size:.85rem;color:var(--tinta-suave);display:block;margin-top:.25rem;line-height:1.45}

/* ---------- 11. LINHAS (ABAS) ---------- */
.linhas{background:var(--bege-fundo)}
.abas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:2.6rem 0 2.8rem}
.aba{
  border:2px solid var(--linha);background:#fff;border-radius:999px;
  padding:.72em 1.5em;font-family:var(--display);font-weight:600;font-size:1rem;
  color:var(--tinta-suave);cursor:pointer;
  transition:all .32s var(--mola);
}
.aba:hover{border-color:var(--ct);color:var(--ct);transform:translateY(-2px)}
.aba[aria-selected="true"]{background:var(--ct);border-color:var(--ct);color:#fff;box-shadow:0 12px 24px -14px var(--ct)}
.painel[hidden]{display:none}
.painel{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,4vw,58px);align-items:center;
  animation:aparece .5s var(--mola) both;
}
@keyframes aparece{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.painel__foto{position:relative;justify-self:center;width:min(100%,340px)}
.painel__foto img{border-radius:50%;aspect-ratio:1;object-fit:cover;width:100%;box-shadow:var(--sombra-alta)}
.painel__foto::after{
  content:"";position:absolute;inset:-14px;border-radius:50%;border:3px dashed var(--c);opacity:.45;
  animation:gira 26s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}
.painel__tag{
  display:inline-block;background:var(--ct);color:#fff;font-family:var(--display);font-weight:600;
  border-radius:999px;padding:.4em 1em;font-size:.9rem;margin-bottom:1rem;
}
.painel h3{font-size:clamp(1.7rem,3vw,2.4rem);color:var(--tinta);margin-bottom:.7rem}
.painel__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:1.7rem}
.painel__cols h4{font-family:var(--texto);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ct);margin-bottom:.6rem;font-weight:800}
.painel__cols li{font-size:.94rem;padding-left:1.15em;position:relative;color:var(--tinta-suave);margin-bottom:.28em}
.painel__cols li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--c)}
.painel__meta{margin-top:1.6rem;display:grid;gap:.6rem;padding-top:1.3rem;border-top:1px solid var(--linha)}
.painel__meta p{font-size:.92rem;color:var(--tinta-suave)}
.painel__meta b{color:var(--tinta)}

/* ---------- 12. VANTAGENS (AZUL) ---------- */
.vantagens{background:var(--azul);color:#fff}
.vantagens h2{color:#fff}
.vantagens .lead{color:rgba(255,255,255,.82)}
.vlista{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px);margin-top:3rem}
.vitem{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--raio);padding:clamp(20px,2.4vw,26px);
  transition:transform .4s var(--mola),background .3s ease;
}
.vitem:hover{transform:translateY(-7px);background:rgba(255,255,255,.15)}
.vitem b{display:block;font-family:var(--display);font-size:1.12rem;margin-bottom:.4rem}
.vitem p{font-size:.92rem;color:rgba(255,255,255,.87)}
.vitem__num{
  font-family:var(--display);font-size:.85rem;color:var(--amarelo);
  display:inline-block;margin-bottom:.7rem;letter-spacing:.08em;
}

/* ---------- 13. SUPORTE ---------- */
.suporte{background:var(--bege)}
.suporte__grade{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);margin-top:3rem}
.sitem{
  background:#fff;border-radius:var(--raio);padding:clamp(20px,2.4vw,28px);
  display:flex;gap:1rem;align-items:flex-start;
  box-shadow:0 10px 28px -24px rgba(22,48,90,.55);
  transition:transform .4s var(--mola),box-shadow .4s var(--mola);
}
.sitem:hover{transform:translateY(-6px);box-shadow:var(--sombra)}
.sitem__bolha{
  width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--ct);color:#fff;font-family:var(--display);font-weight:600;font-size:.95rem;
}
.sitem b{display:block;font-family:var(--display);font-size:1.05rem;margin-bottom:.25rem;color:var(--tinta)}
.sitem p{font-size:.9rem;color:var(--tinta-suave)}

/* ---------- 14. DETALHES / GALERIA ---------- */
.detalhes{background:var(--verde-profundo);color:#fff}
.detalhes h2{color:#fff}
.detalhes .lead{color:rgba(255,255,255,.9)}
.galeria{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,15vw,215px);gap:clamp(12px,1.6vw,18px);margin-top:3rem}
.gitem{
  position:relative;border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra);
  background:#fff;
}
.gitem img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--mola)}
.gitem:hover img{transform:scale(1.07)}
.gitem figcaption{
  position:absolute;inset:auto 0 0;padding:1.5rem 1.1rem .95rem;
  background:linear-gradient(transparent,rgba(15,52,52,.82));
  color:#fff;font-weight:700;font-size:.92rem;
  transform:translateY(6px);opacity:0;transition:all .4s var(--mola);
}
.gitem:hover figcaption{transform:none;opacity:1}
.gitem--alto{grid-row:span 2}
.gitem--largo{grid-column:span 2}
.gitem--faixa{grid-column:span 4}

/* ---------- 15. MANIFESTO ---------- */
.manifesto{background:var(--bege);position:relative}
.manifesto__grade{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,70px);align-items:center}
.manifesto__poema{font-family:var(--display);font-size:clamp(1.28rem,2.3vw,1.9rem);line-height:1.42;color:var(--azul)}
.manifesto__poema span{display:block;opacity:0;transform:translateY(14px);transition:all .7s var(--mola)}
.manifesto__poema.visivel span{opacity:1;transform:none}
.manifesto__poema em{font-style:normal;color:var(--caramelo)}
.manifesto__assinatura{margin-top:2rem;width:190px}
.manifesto__assinatura svg,.manifesto__assinatura img{width:100%}
.manifesto__assinatura small{display:block;margin-top:.55rem;font-family:var(--texto);font-weight:800;font-size:.72rem;letter-spacing:.13em;color:var(--caramelo);text-transform:uppercase}
.manifesto__mascotes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end}
.manifesto__mascotes img{width:100%;transition:transform .5s var(--mola)}
.manifesto__mascotes img:hover{transform:translateY(-12px) rotate(-4deg)}

/* ---------- 16. FAQ ---------- */
.faq{background:var(--bege-fundo)}
.faq__lista{max-width:840px;margin:2.8rem auto 0;display:grid;gap:12px}
.qa{background:#fff;border-radius:var(--raio);border:1px solid rgba(28,51,87,.08);overflow:hidden;transition:box-shadow .35s ease}
.qa[open]{box-shadow:var(--sombra)}
.qa summary{
  list-style:none;cursor:pointer;padding:1.25rem 3.3rem 1.25rem 1.5rem;position:relative;
  font-family:var(--display);font-weight:600;font-size:1.08rem;color:var(--tinta);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";position:absolute;right:1.4rem;top:50%;width:13px;height:13px;
  border-right:3px solid var(--caramelo);border-bottom:3px solid var(--caramelo);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--mola);
}
.qa[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.qa summary:hover{color:var(--caramelo)}
.qa__corpo{padding:0 1.5rem 1.45rem;font-size:.98rem;color:var(--tinta-suave)}

/* ---------- 17. FORMULÁRIO ---------- */
.contato{background:var(--azul);color:#fff}
.contato__grade{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,64px);align-items:start}
.contato h2{color:#fff}
.contato__beneficios{margin-top:2rem;display:grid;gap:.9rem}
.contato__beneficios li{display:flex;gap:.75rem;align-items:flex-start;font-size:.98rem;color:rgba(255,255,255,.86)}
.contato__beneficios svg{width:22px;height:22px;flex:none;color:var(--amarelo);margin-top:.15rem}
.contato__zap{
  margin-top:2.2rem;display:inline-flex;align-items:center;gap:.75rem;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--raio);padding:1rem 1.3rem;transition:background .3s ease,transform .3s var(--mola);
}
.contato__zap:hover{background:rgba(255,255,255,.18);transform:translateY(-3px)}
.contato__zap svg{width:34px;height:34px;flex:none;color:var(--amarelo)}
.contato__zap b{display:block;font-family:var(--display);font-size:1.08rem}
.contato__zap span{font-size:.85rem;color:rgba(255,255,255,.85)}

.form{background:#fff;border-radius:var(--raio-g);padding:clamp(24px,3.4vw,42px);box-shadow:var(--sombra-alta);color:var(--tinta)}
.form__linha{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.campo{margin-bottom:14px;position:relative}
.campo label{display:block;font-size:.8rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-suave);margin-bottom:.4rem}
.campo label .req{color:var(--caramelo)}
.campo input,.campo select,.campo textarea{
  width:100%;padding:.85em 1em;border-radius:14px;
  border:2px solid rgba(28,51,87,.12);background:var(--bege-fundo);
  transition:border-color .25s ease,background .25s ease,box-shadow .25s ease;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--verde);background:#fff;box-shadow:0 0 0 4px rgba(115,189,189,.18);
}
.campo textarea{resize:vertical;min-height:104px}
.campo.erro input,.campo.erro select,.campo.erro textarea{border-color:#D64545;background:#FFF5F5}
.campo__msg{display:none;font-size:.8rem;color:#D64545;margin-top:.35rem;font-weight:600}
.campo.erro .campo__msg{display:block}
.mel{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form__nota{font-size:.8rem;color:var(--tinta-suave);margin-top:.9rem;text-align:center}
.form__aviso{
  display:none;margin-top:1rem;padding:.95rem 1.15rem;border-radius:14px;font-size:.93rem;font-weight:600;
}
.form__aviso.ok{display:block;background:#E9F6F1;color:#1E6A4E;border:1px solid #A7DCC6}
.form__aviso.falha{display:block;background:#FFF0F0;color:#A32B2B;border:1px solid #F1BDBD}
.btn.carregando{pointer-events:none;opacity:.75}
.btn.carregando::after{
  content:"";width:1em;height:1em;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:roda .7s linear infinite;
}
@keyframes roda{to{transform:rotate(360deg)}}

/* ---------- 18. RODAPÉ ---------- */
.rodape{background:var(--azul-noite);color:rgba(255,255,255,.72);padding-block:clamp(52px,7vw,80px) 0}
.rodape__grade{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:clamp(24px,3vw,44px)}
.rodape__logo{width:170px;margin-bottom:1.2rem}
.rodape h4{font-family:var(--texto);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amarelo);margin-bottom:1rem;font-weight:800}
.rodape li{margin-bottom:.55rem;font-size:.94rem}
.rodape a{transition:color .25s ease}
.rodape a:hover{color:var(--amarelo)}
.rodape__tag{font-family:var(--display);color:var(--verde);font-size:1.05rem;line-height:1.35;max-width:26ch}
.rodape__sociais{display:flex;gap:10px;margin-top:1.3rem}
.rodape__sociais a{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  background:rgba(255,255,255,.1);transition:all .3s var(--mola);
}
.rodape__sociais a:hover{background:var(--verde);transform:translateY(-4px)}
.rodape__sociais svg{width:20px;height:20px}
.rodape__fim{
  margin-top:clamp(34px,5vw,54px);padding-block:1.4rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.82rem;
}

/* ---------- 19. WHATSAPP FLUTUANTE ---------- */
.zap{
  position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);z-index:70;
  width:60px;height:60px;border-radius:50%;background:#25D366;color:#fff;
  display:grid;place-items:center;box-shadow:0 16px 34px -12px rgba(37,211,102,.65);
  transition:transform .4s var(--mola);
  opacity:0;visibility:hidden;transform:scale(.6);
}
.zap.mostra{opacity:1;visibility:visible;transform:none}
.zap:hover{transform:scale(1.09) rotate(-6deg)}
.zap svg{width:32px;height:32px}
.zap::before{
  content:"";position:absolute;inset:0;border-radius:50%;background:#25D366;
  animation:pulso 2.6s ease-out infinite;z-index:-1;
}
@keyframes pulso{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.75);opacity:0}}
@media (prefers-reduced-motion:reduce){.zap::before{animation:none}}

/* ---------- 20. REVELAÇÃO AO ROLAR ---------- */
.rev{opacity:0;transform:translateY(28px);transition:opacity .8s var(--mola),transform .8s var(--mola)}
.rev.visivel{opacity:1;transform:none}
.rev-1{transition-delay:.08s}.rev-2{transition-delay:.16s}.rev-3{transition-delay:.24s}
.rev-4{transition-delay:.32s}.rev-5{transition-delay:.4s}.rev-6{transition-delay:.48s}
.rev-7{transition-delay:.56s}.rev-8{transition-delay:.64s}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}

/* ---------- 21. RESPONSIVO ---------- */
@media (max-width:1080px){
  .grade--4,.vlista,.galeria{grid-template-columns:repeat(2,1fr)}
  .suporte__grade{grid-template-columns:repeat(2,1fr)}
  .numeros{grid-template-columns:repeat(2,1fr);margin-top:calc(var(--secao) * -.3)}
  .rodape__grade{grid-template-columns:1fr 1fr}
  .gitem--largo{grid-column:span 2}
  .gitem--alto{grid-row:auto}
}
@media (max-width:900px){
  .topo__nav{
    position:fixed;inset:0 0 auto;top:0;padding:96px var(--gutter) 32px;
    flex-direction:column;align-items:stretch;gap:4px;
    background:var(--bege-fundo);box-shadow:0 24px 44px -26px rgba(22,48,90,.5);
    transform:translateY(-102%);transition:transform .45s var(--mola);
    max-height:100dvh;overflow:auto;
  }
  .topo__nav.aberto{transform:none}
  .topo__nav .topo__link{color:var(--tinta);font-size:1.15rem;font-family:var(--display);padding:.7em 0;border-bottom:1px solid var(--linha)}
  .topo__nav .topo__link::after{display:none}
  .topo__acoes{margin:1.2rem 0 0;flex-direction:column;align-items:stretch}
  .topo__acoes .btn{width:100%}
  .hamburguer{display:block;margin-left:auto;z-index:2}
  .hero__grade{grid-template-columns:1fr;gap:0}
  .hero__texto{padding-bottom:2rem;text-align:center}
  .hero .olho{justify-content:center}
  .hero__lead{margin-inline:auto}
  .hero__ctas{justify-content:center}
  .hero__selo{justify-content:center}
  .hero__midia{min-height:0;margin-top:1rem}
  .hero__menina{width:min(84%,400px)}
  .hero__balao{right:0;top:4%;font-size:.82rem;max-width:150px}
  .hero__mascote{left:0;bottom:14%;width:clamp(96px,21vw,142px)}
  .hero .forma{display:none}
  .hero .forma:nth-child(2){display:block}
  .marca__grade,.painel,.manifesto__grade,.contato__grade{grid-template-columns:1fr}
  .marca__foto{order:-1;max-width:460px;margin-inline:auto}
  .painel__foto{max-width:280px}
  .grade--3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .grade--2,.grade--3,.grade--4,.vlista,.suporte__grade,.pilares{grid-template-columns:1fr}
  .numeros{grid-template-columns:repeat(2,1fr);gap:10px}
  .galeria{grid-template-columns:1fr}
  .gitem--largo{grid-column:auto}
  .gitem{aspect-ratio:4/3}
  .form__linha,.painel__cols{grid-template-columns:1fr}
  .rodape__grade{grid-template-columns:1fr}
  .manifesto__mascotes{grid-template-columns:repeat(3,1fr)}
  .abas{gap:8px}
  .aba{font-size:.9rem;padding:.6em 1.1em}
  .btn{width:100%}
  .hero__ctas{flex-direction:column}
}