/* ============================================================
   MenuVia — landing page
   Paleta quente (creme + laranja + tinta) inspirada nos próprios
   cardápios que a página vende.
   ============================================================ */

:root{
  --laranja:#FF6B0F;
  --laranja-2:#FF9138;
  --laranja-escuro:#E25400;
  --laranja-fraco:#FFF0E3;

  --creme:#FDF6EE;
  --creme-2:#F7EDE1;
  --branco:#FFFFFF;

  --tinta:#15171E;
  --tinta-2:#1D212B;
  --tinta-3:#2A2F3B;

  --texto:#3C424F;
  --texto-fraco:#787F8D;
  --texto-claro:rgba(255,255,255,.72);

  --linha:rgba(21,23,30,.10);
  --linha-clara:rgba(255,255,255,.14);
  --zap:#25D366;

  /* Cantos contidos de propósito: cápsula em tudo deixa cara de SaaS genérico. */
  --r-sm:10px;
  --r:14px;
  --r-lg:18px;
  --r-xl:22px;
  --r-btn:12px;

  --sombra:0 2px 4px rgba(21,23,30,.04), 0 12px 28px rgba(21,23,30,.07);
  --sombra-alta:0 8px 20px rgba(21,23,30,.09), 0 30px 60px rgba(21,23,30,.14);
  --sombra-laranja:0 8px 22px rgba(255,107,15,.32);

  --topo-altura:104px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topo-altura) + 16px);-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--creme);
  color:var(--texto);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

.sprite{position:absolute;width:0;height:0;overflow:hidden}

::selection{background:var(--laranja);color:#fff}

:focus-visible{outline:3px solid var(--laranja);outline-offset:3px;border-radius:6px}

/* ---------- estrutura ---------- */

.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:22px}
.wrap.estreito{max-width:860px}
.centro{text-align:center}

.secao{padding-block:clamp(64px,8vw,116px);position:relative}
.secao-creme{background:var(--creme-2)}
.secao-escura{background:var(--tinta);color:#fff}
.secao-escura .texto-grande{color:var(--texto-claro)}
.secao-escura strong{color:#fff}

.cabeca{margin-bottom:clamp(38px,5vw,60px)}

/* ---------- tipografia ---------- */

.display{
  font-family:'Anton',Impact,'Arial Narrow',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:1.06;
  color:var(--tinta);
  margin:0 0 18px;
  font-size:clamp(38px,6.4vw,74px);
}
.secao-escura .display,.secao-final .display,.secao-oferta .display{color:#fff}
.display-md{font-size:clamp(31px,4.6vw,54px)}
.display-sm{font-size:clamp(25px,3.4vw,34px);margin-bottom:12px}
.display .realce{color:var(--laranja);display:inline-block}

.sobrancelha{
  font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--laranja);margin:0 0 14px;
}
.sobrancelha-clara{color:var(--laranja-2)}

.lead{font-size:clamp(17px,1.5vw,20px);color:var(--texto);max-width:30em;margin:0 0 22px}
.texto-grande{font-size:clamp(16.5px,1.4vw,19px);margin:0 0 16px}
.texto-meio{max-width:44em;margin-inline:auto}
.micro{font-size:14px;line-height:1.55;color:var(--texto-fraco);margin:16px 0 0}
.secao-escura .micro,.secao-oferta .micro{color:var(--texto-claro)}
.micro .mini{width:15px;height:15px;vertical-align:-2px;margin-right:2px}

h3{font-size:18px;font-weight:800;color:var(--tinta);margin:0 0 7px;line-height:1.3}
.secao-escura h3{color:#fff}

/* ---------- botões ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 22px;border-radius:var(--r-btn);border:2px solid transparent;
  font-size:15px;font-weight:800;letter-spacing:.005em;line-height:1.2;
  text-decoration:none;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease,border-color .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn svg{width:19px;height:19px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn-sm{padding:10px 17px;font-size:14px}
.btn-lg{padding:17px 30px;font-size:16.5px}
.btn-cheio{width:100%}

.btn-laranja{
  background:linear-gradient(135deg,var(--laranja-2),var(--laranja));
  color:#fff;box-shadow:var(--sombra-laranja);
}
.btn-laranja:hover{box-shadow:0 12px 30px rgba(255,107,15,.42)}

.btn-escuro{background:var(--tinta);color:#fff}
.btn-escuro:hover{background:var(--tinta-3)}

.btn-linha{background:transparent;border-color:var(--linha);color:var(--tinta)}
.btn-linha:hover{border-color:var(--tinta);background:rgba(21,23,30,.03)}
.btn-linha-clara{border-color:var(--linha-clara);color:#fff}
.btn-linha-clara:hover{border-color:#fff;background:rgba(255,255,255,.08)}

.btn-zap{background:var(--zap);color:#08361a;box-shadow:0 8px 22px rgba(37,211,102,.34)}
.btn-zap:hover{background:#1fbd5b}

.botoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.botoes-centro{justify-content:center}

/* ---------- topo ---------- */

/* O fundo mora na barra inteira, não no container centralizado: senão em tela
   larga a navbar vira uma ilha e o conteúdo da página aparece nas laterais. */
.topo{
  position:sticky;top:0;z-index:60;
  background:rgba(253,246,238,.88);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--linha);
}

.faixa-aviso{
  background:var(--tinta);color:#fff;text-align:center;
  font-size:13px;font-weight:600;padding:9px 16px;letter-spacing:.01em;
}
.faixa-aviso strong{color:var(--laranja-2)}
.pisca{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--laranja);margin-right:6px;vertical-align:1px;
  animation:pisca 1.8s ease-in-out infinite;
}
@keyframes pisca{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,107,15,.6)}50%{opacity:.55;box-shadow:0 0 0 6px rgba(255,107,15,0)}}

.topo-barra{
  display:flex;align-items:center;gap:20px;
  max-width:1200px;margin-inline:auto;padding:12px 22px;
}

.logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.logo-marca{
  width:40px;height:40px;border-radius:12px;flex:none;
  background:linear-gradient(135deg,var(--laranja-2),var(--laranja));
  color:#fff;display:grid;place-items:center;
  font-family:'Anton',sans-serif;font-size:23px;line-height:1;
  box-shadow:var(--sombra-laranja);
}
.logo-txt{display:flex;flex-direction:column;line-height:1.1}
.logo-txt strong{font-size:19px;font-weight:800;color:var(--tinta);letter-spacing:-.01em}
.logo-txt small{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-fraco)}

.nav{display:flex;gap:6px;margin-left:auto}
.nav a{
  padding:9px 14px;border-radius:10px;text-decoration:none;
  font-size:14.5px;font-weight:700;color:var(--texto);
  transition:background .15s ease,color .15s ease;
}
.nav a:hover{background:var(--laranja-fraco);color:var(--laranja-escuro)}

.topo-acoes{display:flex;align-items:center;gap:10px}

.menu-btn{
  display:none;width:44px;height:44px;border:2px solid var(--linha);
  background:transparent;border-radius:13px;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.menu-btn span{display:block;width:19px;height:2.2px;background:var(--tinta);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
body.menu-aberto .menu-btn span:nth-child(1){transform:translateY(7.2px) rotate(45deg)}
body.menu-aberto .menu-btn span:nth-child(2){opacity:0}
body.menu-aberto .menu-btn span:nth-child(3){transform:translateY(-7.2px) rotate(-45deg)}

/* ---------- hero ---------- */

.hero{position:relative;padding-block:clamp(42px,5.5vw,76px) clamp(56px,7vw,96px);overflow:hidden}
.hero-borrao{
  position:absolute;top:-16%;right:-14%;width:min(780px,86vw);aspect-ratio:1;
  background:radial-gradient(circle at 35% 35%,rgba(255,145,56,.34),rgba(255,107,15,.10) 55%,transparent 70%);
  border-radius:48% 52% 56% 44%/50% 44% 56% 50%;
  pointer-events:none;
}

.hero-grade{
  position:relative;display:grid;gap:clamp(40px,5vw,60px);
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:center;
}

.selo-destaque{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--laranja-fraco);color:var(--laranja-escuro);
  border:1.5px solid rgba(255,107,15,.2);
  padding:9px 16px;border-radius:999px;margin:0 0 24px;
  font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.selo-destaque svg{width:16px;height:16px;flex:none}

.link-video{
  display:inline-flex;align-items:center;gap:11px;margin-top:15px;
  background:none;border:0;padding:0;cursor:pointer;
  font-size:15px;font-weight:700;color:var(--tinta);
  text-decoration:underline;text-decoration-color:rgba(21,23,30,.22);
  text-underline-offset:5px;
}
.link-video:hover{color:var(--laranja-escuro);text-decoration-color:var(--laranja)}
.link-video-play{
  width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--tinta);color:#fff;
}
.link-video-play svg{width:13px;height:13px;margin-left:2px}

/* mockups */

.hero-visual{position:relative}
.visual-rotulo{
  font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--texto-fraco);text-align:center;margin:0 0 20px;
}
.visual-nota{font-size:14px;color:var(--texto-fraco);text-align:center;margin:26px auto 0;max-width:28em}

.palco{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:0;min-height:430px}

/* O miolo claro evita o retângulo preto enquanto a imagem ainda não pintou. */
.fone{
  margin:0;position:relative;border-radius:34px;
  background:var(--tinta);padding:8px;
  box-shadow:var(--sombra-alta);
}
.fone img{
  border-radius:27px;display:block;width:100%;
  background:var(--creme);
}
.fone::before{
  content:'';position:absolute;top:15px;left:50%;transform:translateX(-50%);
  width:32%;height:5px;border-radius:99px;background:rgba(255,255,255,.28);z-index:2;
}
/* Sem etiqueta por cima da tela: o aparelho de trás sobe um pouco mais para
   a barra de navegação dos dois cardápios continuar visível. */
.fone-frente{width:min(258px,53%);z-index:2;transform:rotate(-2.5deg)}
.fone-tras{width:min(212px,44%);z-index:1;transform:rotate(5deg) translate(15%,-42px);opacity:.98}

/* ---------- cards ---------- */

/* 1fr nas linhas: todos os cards da seção ficam com a mesma altura, não só
   os que dividem a mesma linha. */
.cards-4,.cards-6{display:grid;gap:18px;grid-auto-rows:1fr}
.cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards-6{grid-template-columns:repeat(3,minmax(0,1fr))}

.card{
  background:var(--branco);border:1.5px solid var(--linha);border-radius:var(--r-lg);
  padding:26px 24px 28px;box-shadow:var(--sombra);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta);border-color:rgba(255,107,15,.3)}
.card p{margin:0;font-size:15.5px;color:var(--texto-fraco);line-height:1.6}

.icone{
  width:50px;height:50px;border-radius:13px;display:grid;place-items:center;
  background:var(--laranja-fraco);color:var(--laranja-escuro);margin-bottom:16px;
}
.icone svg{width:25px;height:25px}
.icone-claro{background:rgba(255,107,15,.16);color:var(--laranja-2)}

/* ---------- demonstração ---------- */

.demos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;grid-auto-rows:1fr}

.demo{
  background:var(--branco);border:1.5px solid var(--linha);border-radius:var(--r-xl);
  overflow:hidden;box-shadow:var(--sombra);display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.demo:hover{transform:translateY(-5px);box-shadow:var(--sombra-alta)}

.demo-img{
  background:linear-gradient(170deg,var(--creme-2),var(--laranja-fraco));
  padding:26px 26px 0;display:flex;justify-content:center;
  max-height:330px;overflow:hidden;
}
.demo-img img{
  width:min(210px,70%);border-radius:22px 22px 0 0;
  box-shadow:0 -2px 0 rgba(21,23,30,.06),0 14px 34px rgba(21,23,30,.2);
}

.demo-img-video{
  position:relative;border:0;cursor:pointer;width:100%;
  padding:0;max-height:330px;align-items:stretch;background:var(--tinta);
}
.demo-img-video img{width:100%;border-radius:0;object-fit:cover;box-shadow:none;object-position:center 30%}
.play-grande{
  position:absolute;inset:0;margin:auto;width:66px;height:66px;border-radius:50%;
  background:var(--laranja);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .2s ease;
}
.play-grande svg{width:24px;height:24px;margin-left:4px}
.demo-img-video:hover .play-grande{transform:scale(1.09)}

.demo-txt{padding:24px 26px 28px;display:flex;flex-direction:column;align-items:flex-start;gap:0;flex:1}
.demo-num{
  font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--laranja);margin:0 0 6px;
}
.demo-txt h3{font-size:20px;margin-bottom:8px}
.demo-txt p{margin:0 0 18px;font-size:15.5px;color:var(--texto-fraco);flex:1}

.linha-apoio{
  text-align:center;margin:clamp(34px,4vw,50px) auto 0;max-width:24em;
  font-family:'Anton',sans-serif;text-transform:uppercase;line-height:1.2;
  font-size:clamp(20px,2.4vw,27px);color:var(--tinta);letter-spacing:.005em;
}
.linha-apoio-clara{color:#fff}

/* ---------- trio de impacto ---------- */

.trio-impacto{
  list-style:none;margin:clamp(30px,4vw,44px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;
}
.trio-impacto li{
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(19px,2.3vw,27px);line-height:1.2;color:#fff;
  border:2px solid var(--linha-clara);border-radius:12px;padding:9px 20px;
}
.trio-impacto li:nth-child(2){color:var(--laranja-2);border-color:rgba(255,145,56,.4)}

/* ---------- comparação ---------- */

.versus{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}

.col-vs{border-radius:var(--r-xl);padding:32px 30px 34px}
.col-vs h3{font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:20px}
.col-vs ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.col-vs li{display:flex;align-items:flex-start;gap:11px;font-size:16px;font-weight:600;line-height:1.45}
.col-vs svg{width:20px;height:20px;flex:none;margin-top:2px}

.col-ruim{background:var(--branco);border:1.5px solid var(--linha)}
.col-ruim h3{color:var(--texto-fraco)}
.col-ruim li{color:var(--texto-fraco)}
.col-ruim svg{color:#D9534F;opacity:.75}

.col-bom{
  position:relative;background:var(--tinta);color:#fff;
  border:2px solid var(--laranja);box-shadow:var(--sombra-alta);
}
.col-bom h3{color:var(--laranja-2)}
.col-bom li{color:#fff}
.col-bom svg{color:var(--laranja-2)}
.preco-vs{
  font-family:'Anton',sans-serif;font-size:clamp(40px,5vw,58px);line-height:1;
  color:#fff;margin:0 0 22px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.preco-vs small{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--laranja-2);
}
.fita{
  position:absolute;top:-13px;right:24px;
  background:var(--laranja);color:#fff;font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;border-radius:8px;
  box-shadow:var(--sombra-laranja);
}

/* ---------- o que você recebe ---------- */

.entrega{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;grid-auto-rows:1fr}
.entrega article{
  display:flex;gap:16px;align-items:flex-start;
  background:rgba(255,255,255,.045);border:1.5px solid var(--linha-clara);
  border-radius:var(--r-lg);padding:24px 22px;
  transition:border-color .2s ease,background .2s ease;
}
.entrega article:hover{border-color:rgba(255,107,15,.45);background:rgba(255,255,255,.07)}
.entrega .icone{margin-bottom:0;flex:none;width:46px;height:46px;border-radius:14px}
.entrega .icone svg{width:23px;height:23px}
.entrega p{margin:0;font-size:15px;color:var(--texto-claro);line-height:1.55}

/* ---------- painel de gestão ---------- */

.painel-mostra{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}

/* moldura de janela: dá contexto de "isto roda no computador/tablet" */
.janela{
  margin:0;background:#0F1218;
  border:1.5px solid var(--linha-clara);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sombra-alta);
  transition:transform .25s ease,border-color .25s ease;
}
.janela:hover{transform:translateY(-4px);border-color:rgba(255,107,15,.45)}
.janela-barra{
  display:flex;align-items:center;gap:6px;
  padding:10px 14px;background:rgba(255,255,255,.05);
  border-bottom:1.5px solid var(--linha-clara);
}
.janela-barra i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.janela-barra i:first-child{background:rgba(255,107,15,.7)}
.janela img{width:100%;display:block;background:var(--creme-2)}
.janela figcaption{
  padding:16px 18px 18px;font-size:14.5px;line-height:1.55;color:var(--texto-claro);
}
.janela figcaption strong{color:#fff;display:block;margin-bottom:2px}

.painel-itens{
  list-style:none;margin:clamp(28px,3.5vw,40px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 26px;
}
.painel-itens li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:15.5px;font-weight:600;color:#fff;
}
.painel-itens svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--laranja-2)}

/* o painel fecha a lista do "o que você recebe" ocupando a linha inteira */
.entrega-destaque{
  grid-column:1/-1;
  background:linear-gradient(120deg,rgba(255,107,15,.16),rgba(255,107,15,.05)) !important;
  border-color:rgba(255,107,15,.4) !important;
}
.entrega-destaque .icone{background:var(--laranja);color:#fff}
.pino{
  display:inline-block;vertical-align:2px;margin-left:8px;
  background:var(--laranja);color:#fff;border-radius:6px;padding:3px 8px;
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}

/* ---------- passos ---------- */

.passos{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;grid-auto-rows:1fr;
}
.passos li{
  position:relative;background:var(--branco);border:1.5px solid var(--linha);
  border-radius:var(--r-lg);padding:30px 24px 28px;box-shadow:var(--sombra);
}
.passos li::after{
  content:'';position:absolute;top:50%;right:-13px;width:10px;height:10px;
  border-top:2.4px solid rgba(255,107,15,.5);border-right:2.4px solid rgba(255,107,15,.5);
  transform:translateY(-50%) rotate(45deg);
}
.passos li:last-child::after{display:none}
.passo-num{
  display:block;font-family:'Anton',sans-serif;font-size:34px;line-height:1;
  color:var(--laranja);margin-bottom:12px;
}
.passos p{margin:0;font-size:15.5px;color:var(--texto-fraco);line-height:1.6}

/* ---------- oferta ---------- */

.secao-oferta{background:var(--tinta);color:#fff;position:relative;overflow:hidden}
.secao-oferta::before{
  content:'';position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:min(900px,120vw);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(255,107,15,.2),transparent 62%);
}

.cartao-oferta{
  position:relative;background:linear-gradient(170deg,#23272F,#191C24);
  border:2px solid rgba(255,107,15,.3);border-radius:var(--r-xl);
  padding:clamp(28px,4vw,44px);box-shadow:var(--sombra-alta);
}

.oferta-preco{text-align:center;padding-bottom:26px;border-bottom:1.5px solid var(--linha-clara);margin-bottom:26px}
.oferta-de{
  font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--laranja-2);margin:0 0 6px;
}
.oferta-valor{
  font-family:'Anton',sans-serif;font-size:clamp(72px,12vw,120px);line-height:.88;
  color:#fff;margin:0 0 12px;
}
.oferta-valor span{font-size:.36em;vertical-align:.5em;margin-right:4px;color:var(--laranja-2)}
.oferta-nota{margin:0;font-size:15.5px;color:var(--texto-claro);max-width:30em;margin-inline:auto}

.oferta-lista{
  list-style:none;margin:0 0 28px;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;
}
.oferta-lista li{display:flex;align-items:flex-start;gap:10px;font-size:15.5px;font-weight:600;color:#fff}
.oferta-lista svg{width:19px;height:19px;color:var(--laranja-2);flex:none;margin-top:3px}

.oferta-acoes{display:grid;gap:11px}
.oferta-acoes .btn-linha{border-color:var(--linha-clara);color:#fff}
.oferta-acoes .btn-linha:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ---------- faq ---------- */

.faq{display:grid;gap:11px}
.faq details{
  background:var(--branco);border:1.5px solid var(--linha);border-radius:var(--r);
  overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;
}
.faq details[open]{border-color:rgba(255,107,15,.4);box-shadow:var(--sombra)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 22px;cursor:pointer;list-style:none;
  font-size:16.5px;font-weight:700;color:var(--tinta);line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:20px;height:20px;flex:none;color:var(--laranja);transition:transform .22s ease}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details>div{padding:0 22px 22px}
.faq details p{margin:0 0 12px;font-size:16px;color:var(--texto-fraco)}
.faq details p:last-child{margin-bottom:0}

/* ---------- cta final ---------- */

.secao-final{
  background:
    radial-gradient(circle at 20% 10%,rgba(255,107,15,.22),transparent 45%),
    radial-gradient(circle at 85% 80%,rgba(255,145,56,.16),transparent 50%),
    var(--tinta);
  color:#fff;
}
.secao-final .texto-grande{color:var(--texto-claro)}
.secao-final strong{color:#fff}
.trio-final{margin-top:clamp(34px,4vw,48px)}

/* ---------- rodapé ---------- */

.rodape{background:var(--tinta-2);color:#fff;padding-block:clamp(44px,5vw,64px) 26px}
.rodape-grade{
  display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:34px;
  padding-bottom:30px;border-bottom:1.5px solid var(--linha-clara);
}
.rodape .logo-txt strong{color:#fff}
.rodape .logo-txt small{color:rgba(255,255,255,.5)}
.rodape-sobre{margin:16px 0 0;font-size:15px;color:var(--texto-claro);max-width:26em}
.rodape h4{
  font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--laranja-2);margin:0 0 14px;
}
.rodape nav,.rodape-grade>div:last-child{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.rodape a:not(.logo){
  font-size:15px;font-weight:600;color:var(--texto-claro);text-decoration:none;
  transition:color .15s ease;
}
.rodape a:not(.logo):hover{color:#fff}
.rodape-fim{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding-top:22px;
}
.rodape-fim p{margin:0;font-size:13.5px;color:rgba(255,255,255,.45)}

/* ---------- barra fixa (celular) ---------- */

.barra-fixa{
  display:none;position:fixed;inset:auto 0 0;z-index:55;
  gap:10px;padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:rgba(253,246,238,.95);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1.5px solid var(--linha);
}
.barra-fixa .btn{flex:1;padding:14px 12px;font-size:14.5px}
.barra-fixa .btn-linha{flex:0 0 40%;background:var(--branco)}

/* ---------- modais ---------- */

.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal-fundo{position:absolute;inset:0;background:rgba(12,13,17,.72);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:aparece .2s ease}

.modal-caixa{
  position:relative;width:100%;max-width:520px;max-height:min(92dvh,880px);overflow-y:auto;
  background:var(--branco);border-radius:var(--r-xl);
  padding:clamp(26px,4vw,38px);box-shadow:var(--sombra-alta);
  animation:sobe .26s cubic-bezier(.2,.8,.3,1);
  overscroll-behavior:contain;
}
@keyframes aparece{from{opacity:0}to{opacity:1}}
@keyframes sobe{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

.modal-x{
  position:absolute;top:14px;right:14px;z-index:3;
  width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(21,23,30,.07);color:var(--tinta);display:grid;place-items:center;
  transition:background .15s ease;
}
.modal-x:hover{background:rgba(21,23,30,.14)}
.modal-x svg{width:18px;height:18px}

.modal-caixa-video{
  max-width:min(430px,92vw);padding:0;background:#000;overflow:hidden;
  border-radius:var(--r-lg);
}
.modal-caixa-video .modal-x{background:rgba(255,255,255,.18);color:#fff}
.modal-caixa-video .modal-x:hover{background:rgba(255,255,255,.3)}
.video-quadro{aspect-ratio:9/16;max-height:82vh;display:grid;place-items:center;background:#000}
.video-quadro video{width:100%;height:100%;object-fit:contain;display:block}

/* checkout */

.ck-passo[hidden]{display:none}
.ck-intro{font-size:16px;color:var(--texto-fraco);margin:0 0 22px}

.ck-produto{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--creme);border:1.5px solid var(--linha);border-radius:var(--r);
  padding:18px 20px;margin-bottom:20px;
}
.ck-nome{margin:0;font-size:17px;font-weight:800;color:var(--tinta)}
.ck-tipo{margin:2px 0 0;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--laranja)}
.ck-valor{margin:0;font-family:'Anton',sans-serif;font-size:40px;line-height:1;color:var(--tinta)}

.ck-inclui{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.ck-inclui li{display:flex;align-items:flex-start;gap:10px;font-size:15.5px;font-weight:600;color:var(--texto)}
.ck-inclui svg{width:18px;height:18px;color:var(--laranja);flex:none;margin-top:3px}

.pix-qr{
  display:grid;place-items:center;background:var(--branco);
  border:2px solid var(--linha);border-radius:var(--r);
  padding:16px;margin:18px auto;width:max-content;max-width:100%;
}
.pix-qr img{width:240px;height:240px;max-width:100%;display:block}

.pix-rotulo{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-fraco);margin:0 0 9px;text-align:center}
.pix-copia{display:flex;gap:9px;align-items:stretch;margin-bottom:22px}
.pix-copia code{
  flex:1;min-width:0;background:var(--creme);border:1.5px solid var(--linha);
  border-radius:var(--r-sm);padding:12px 14px;
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:12.5px;color:var(--texto);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5;
}
.pix-copia .btn{flex:none}

.pix-espera{
  display:flex;align-items:center;gap:14px;
  background:var(--laranja-fraco);border:1.5px solid rgba(255,107,15,.22);
  border-radius:var(--r);padding:16px 18px;
}
.pix-espera p{margin:0;font-size:14.5px;color:var(--texto);line-height:1.5}
.girando{
  width:24px;height:24px;flex:none;border-radius:50%;
  border:3px solid rgba(255,107,15,.25);border-top-color:var(--laranja);
  animation:gira .9s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}

/* ---------- formulário do checkout ---------- */

.ck-inclui-duplo{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 18px}

.ck-form{margin:0}
.ck-form-titulo{
  margin:0 0 14px;font-size:12.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--texto-fraco);
}

.campo{display:block;margin-bottom:13px}
.campo>span{
  display:block;margin-bottom:6px;
  font-size:14px;font-weight:700;color:var(--tinta);
}
.campo>span i{
  font-style:normal;font-weight:600;color:var(--texto-fraco);
  font-size:12.5px;margin-left:4px;
}
.campo input{
  width:100%;padding:13px 15px;
  background:var(--branco);color:var(--tinta);
  border:2px solid var(--linha);border-radius:var(--r-sm);
  font:inherit;font-size:16px;line-height:1.3;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.campo input::placeholder{color:#A9AEB9}
.campo input:focus{
  outline:none;border-color:var(--laranja);
  box-shadow:0 0 0 4px rgba(255,107,15,.14);
}
.campo input.erro{border-color:#D9534F;background:#FFF7F6}

.campo-erro{
  display:flex;gap:8px;margin:0 0 13px;
  background:#FFF1F0;border:1.5px solid rgba(217,83,79,.28);
  border-radius:var(--r-sm);padding:10px 13px;
  font-size:14px;font-weight:600;color:#A63B37;line-height:1.45;
}
.campo-erro[hidden]{display:none}

/* ---------- confirmação ---------- */

.ck-ok{text-align:center}
.ck-ok .ck-intro{margin-bottom:16px}
.ok-selo{
  width:64px;height:64px;border-radius:50%;margin:0 auto 16px;
  display:grid;place-items:center;
  background:var(--zap);color:#fff;
  box-shadow:0 10px 26px rgba(37,211,102,.34);
  animation:selo-entra .5s cubic-bezier(.2,.9,.3,1.3) both;
}
.ok-selo svg{width:30px;height:30px}
@keyframes selo-entra{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

/* trilha do pedido */
.trilha{
  list-style:none;margin:22px 0;padding:0;
  text-align:left;display:grid;gap:0;
}
.trilha li{
  position:relative;display:flex;gap:14px;align-items:flex-start;
  padding:0 0 18px 0;
}
.trilha li:last-child{padding-bottom:0}
/* a linha que liga um passo ao outro */
.trilha li:not(:last-child)::before{
  content:'';position:absolute;left:10px;top:22px;bottom:2px;
  width:2px;background:var(--linha);
}
.trilha li.feito:not(:last-child)::before{background:var(--zap)}

.trilha-marca{
  width:22px;height:22px;border-radius:50%;flex:none;position:relative;z-index:1;
  border:2px solid var(--linha);background:var(--branco);
}
.trilha .feito .trilha-marca{
  background:var(--zap);border-color:var(--zap);
}
.trilha .feito .trilha-marca::after{
  content:'';position:absolute;inset:0;margin:auto;
  width:7px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(1px,-1px);
}
.trilha .agora .trilha-marca{
  border-color:var(--laranja);
  box-shadow:0 0 0 4px rgba(255,107,15,.16);
}
.trilha .agora .trilha-marca::after{
  content:'';position:absolute;inset:0;margin:auto;
  width:8px;height:8px;border-radius:50%;background:var(--laranja);
}

.trilha b{display:block;font-size:15px;font-weight:800;color:var(--tinta);line-height:1.35}
.trilha small{display:block;font-size:13px;color:var(--texto-fraco);line-height:1.4}
.trilha li:not(.feito):not(.agora) b{color:var(--texto-fraco);font-weight:700}
.ck-ref{
  display:inline-block;background:var(--creme);border:1.5px dashed var(--linha);
  border-radius:10px;padding:8px 18px;margin:0 0 22px;
  font-size:14px;color:var(--texto-fraco);
}
.ck-ref strong{color:var(--tinta);font-family:ui-monospace,Menlo,Consolas,monospace}
.ck-tenha{
  margin:26px 0 14px;font-size:12.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--texto-fraco);
}
.ck-ok .ck-inclui{text-align:left;max-width:22em;margin-inline:auto}
.ck-erro .btn{margin-bottom:10px}

/* ============================================================
   ANIMAÇÃO
   ============================================================ */

/* entrada por rolagem, com direção e atraso vindos do anim.js */
body.anim [data-rv]{
  opacity:0;transform:translateY(30px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1) var(--d,0s),
             transform .9s cubic-bezier(.22,.61,.36,1) var(--d,0s);
}
body.anim [data-rv="left"]{transform:translateX(-42px)}
body.anim [data-rv="right"]{transform:translateX(42px)}
body.anim [data-rv].in{opacity:1;transform:none}

/* título entrando letra a letra */
.letras{display:inline-block;white-space:nowrap}
.letra{
  display:inline-block;opacity:0;
  transform:translateY(.6em) rotate(3deg);filter:blur(6px);
  will-change:transform,opacity,filter;
}
.letra.in{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity .85s cubic-bezier(.22,.61,.36,1) var(--ld,0s),
             transform .95s cubic-bezier(.16,1,.3,1) var(--ld,0s),
             filter .85s ease var(--ld,0s);
}

/* seções somem com desfoque ao sair por cima (estilos vêm do JS) */
main>section{will-change:transform,filter,opacity}

/* flutuação ambiente */
@keyframes flutua-a{0%,100%{transform:rotate(-2.5deg) translateY(0)}50%{transform:rotate(-2.5deg) translateY(-11px)}}
@keyframes flutua-b{0%,100%{transform:rotate(5deg) translate(14%,-20px)}50%{transform:rotate(5deg) translate(14%,-29px)}}
@keyframes respira{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.07) rotate(7deg)}}
.fone-frente{animation:flutua-a 7.5s ease-in-out infinite}
.fone-tras{animation:flutua-b 8.5s ease-in-out infinite .7s}
.hero-borrao{animation:respira 20s ease-in-out infinite}

/* brilho seguindo o cursor dentro do botão */
.btn-glow{
  position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;
  border-radius:inherit;mix-blend-mode:overlay;filter:blur(10px);
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),
    rgba(255,255,255,.85) 0%,rgba(255,255,255,.35) 34%,rgba(255,255,255,0) 68%);
  transition:opacity 1.6s cubic-bezier(.3,.05,.3,1);
}
.btn-glow.on{opacity:1}
.btn>*:not(.btn-glow){position:relative;z-index:2}

/* o resto da página recua quando o CTA principal está sob o cursor */
#foco-pagina{
  position:fixed;inset:0;z-index:50;pointer-events:none;opacity:0;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  -webkit-mask:radial-gradient(circle 24vw at var(--bx,50%) var(--by,50%),
    rgba(0,0,0,0) 0%,rgba(0,0,0,0) 30%,#000 82%);
  mask:radial-gradient(circle 24vw at var(--bx,50%) var(--by,50%),
    rgba(0,0,0,0) 0%,rgba(0,0,0,0) 30%,#000 82%);
  transition:opacity 1.2s ease;
}
#foco-pagina.on{opacity:1;transition:opacity 3.4s linear}

/* etiqueta colada no cursor sobre os exemplos */
.cursor-eti{
  position:fixed;top:0;left:0;z-index:95;pointer-events:none;
  background:var(--tinta);color:#fff;white-space:nowrap;
  padding:9px 16px;border-radius:var(--r-btn);
  font-size:13px;font-weight:800;letter-spacing:.04em;
  opacity:0;transition:opacity .22s ease;
  box-shadow:var(--sombra-alta);
}
.cursor-eti.on{opacity:1}

/* faixa rolando */
.marquee{
  background:var(--laranja);color:var(--tinta);
  overflow:hidden;white-space:nowrap;
  padding:13px 0;
  font-size:13px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
}
.mq-trilho{display:inline-flex;animation:mq 38s linear infinite;will-change:transform}
.mq-trilho>span{padding:0 26px}
.marquee:hover .mq-trilho{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* topo encolhe depois da primeira rolagem */
.topo-barra{transition:padding .35s cubic-bezier(.22,.61,.36,1),background .35s ease}
.logo-marca{transition:width .35s cubic-bezier(.22,.61,.36,1),height .35s cubic-bezier(.22,.61,.36,1)}
.topo.compacto{background:rgba(253,246,238,.95)}
.topo.compacto .topo-barra{padding-block:7px}
.topo.compacto .logo-marca{width:34px;height:34px;font-size:20px}
.nav a.ativo{background:var(--laranja-fraco);color:var(--laranja-escuro)}

/* o Lenis cuida da rolagem; o nativo sai da frente */
html.lenis{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width:1060px){
  .cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards-6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .entrega{grid-template-columns:repeat(2,minmax(0,1fr))}
  .painel-itens{grid-template-columns:repeat(2,minmax(0,1fr))}
  .passos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .passos li:nth-child(2)::after{display:none}
}

@media (max-width:940px){
  :root{--topo-altura:98px}
  .hero-grade{grid-template-columns:1fr;gap:44px}
  .hero-txt{text-align:center;display:flex;flex-direction:column;align-items:center}
  .lead,.micro{margin-inline:auto}
  .botoes{justify-content:center}
  .palco{min-height:0}
  .demos{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .painel-mostra{grid-template-columns:1fr;max-width:620px;margin-inline:auto}
  .demo-img{max-height:360px}
  .demo-img img{width:min(230px,58%)}
  .demo-img-video img{max-height:300px}
  .rodape-grade{grid-template-columns:1fr 1fr;gap:28px}
  .rodape-grade>div:first-child{grid-column:1/-1}
}

@media (max-width:820px){
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:2px;
    background:var(--creme);border-bottom:1.5px solid var(--linha);
    padding:12px 18px 18px;
    box-shadow:0 18px 30px rgba(21,23,30,.12);
    display:none;
  }
  body.menu-aberto .nav{display:flex}
  .nav a{padding:13px 14px;font-size:16px}
  .menu-btn{display:flex}
  .topo-acoes .btn-sm{display:none}
  .topo-barra{gap:12px;justify-content:space-between}
  .barra-fixa{display:flex}
  body{padding-bottom:78px}
}

@media (max-width:680px){
  body{font-size:16.5px}
  .wrap{padding-inline:18px}
  .so-larga{display:none}
  .btn-lg{padding:16px 22px;font-size:15px}
  .selo-destaque{font-size:11.5px;letter-spacing:.04em;padding:8px 14px}
  .cards-4,.cards-6,.entrega,.passos,.versus,.painel-itens{grid-template-columns:1fr}
  .cards-4,.cards-6,.entrega,.passos,.demos{grid-auto-rows:auto}
  .passos li::after{
    top:auto;bottom:-13px;right:auto;left:50%;
    transform:translateX(-50%) rotate(135deg);
  }
  .passos li:nth-child(2)::after{display:block}
  .oferta-lista{grid-template-columns:1fr}
  .trio-impacto li{font-size:18px;padding:8px 16px}
  .col-vs{padding:26px 22px 28px}
  .fita{right:auto;left:22px}
  .ck-valor{font-size:34px}

  /* No celular quem rola é a sobreposição, não a caixa. Scroll interno em
     modal é frágil no toque — some com a barra, briga com o gesto de voltar
     e trava se qualquer coisa interceptar o touchmove. */
  .modal{
    padding:12px;
    align-items:start;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .modal-caixa{
    padding:24px 22px 26px;
    max-height:none;
    overflow:visible;
    margin-block:auto;
  }
  .modal-caixa-video{max-height:none}
  .ck-inclui{gap:9px}
  .ck-inclui li{font-size:15px}
  .ck-inclui-duplo{grid-template-columns:1fr}
  .ck-ok .ck-inclui-duplo{max-width:none}
  .pix-copia{flex-direction:column}
  .pix-copia .btn{width:100%}
  .rodape-grade{grid-template-columns:1fr}
  .rodape-fim{flex-direction:column;gap:4px}
  .fone-frente{width:min(234px,57%)}
  .fone-tras{width:min(192px,47%);transform:rotate(5deg) translate(16%,-30px)}
  .faixa-aviso{font-size:12px;padding:8px 14px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  body.anim [data-rv]{opacity:1 !important;transform:none !important}
  .letra{opacity:1 !important;transform:none !important;filter:none !important}
  .btn-glow,#foco-pagina,.cursor-eti{display:none !important}
  .mq-trilho{animation:none !important}
  main>section{will-change:auto}
}