/* =========================================================
   BASE2 — BIO PRIME
   Identidade: preto absoluto, branco, vermelho da marca (#D90000).
   Assinatura: canto chanfrado do "B" hexagonal e o quadrado vermelho do "A".
   ========================================================= */

@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --preto: #000000;
  --branco: #ffffff;
  --vermelho: #d90000;        /* o "2" da marca: fundos, botões, títulos grandes */
  --vermelho-vivo: #ff3030;   /* vermelho para texto pequeno sobre preto (5.6:1) */
  --grafite: #141414;         /* superfície sobre o preto */
  --cinza: #a3a3a3;           /* texto de apoio sobre preto (8:1) */
  --cinza-escuro: #4d4d4d;    /* texto de apoio sobre branco (8.4:1) */
  --linha: rgba(255, 255, 255, 0.16);

  --f: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --largo: 125%;
  --chanfro: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(16px, 5vw, 48px);
  --max: 1180px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--preto);
  color: var(--branco);
  font-family: var(--f);
  font-size: 1rem;
  line-height: 1.5;
  font-stretch: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: inherit; font-size: inherit; }

.ic { width: 1em; height: 1em; flex: none; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 3px solid var(--branco);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--preto);
}
.secao-branca :focus-visible { outline-color: var(--preto); box-shadow: 0 0 0 6px var(--branco); }

.pular {
  position: fixed; left: 16px; top: -80px; z-index: 100;
  padding: 12px 18px; background: var(--branco); color: var(--preto);
  font-weight: 700; text-decoration: none;
}
.pular:focus { top: calc(16px + env(safe-area-inset-top)); }

/* ---------- chanfro: recorte do "B" hexagonal ---------- */
.btn::before,
.plano,
.opcao,
.rede,
.contato-icone,
.volta-topo,
.carrossel-btn,
.faq-mais,
.personalizado,
.popup {
  --c: var(--chanfro);
}
.plano, .opcao, .rede, .contato-icone, .volta-topo, .carrossel-btn, .faq-mais, .personalizado, .popup,
.btn::before {
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}

/* ---------- botões ---------- */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  font-stretch: var(--largo);
  font-weight: 800;
  font-size: 0.875rem;
  line-height: 1.15;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 160ms var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fundo-btn);
  transition: background-color 200ms var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn-vermelho { --fundo-btn: var(--vermelho); color: var(--branco); }
.btn-preto { --fundo-btn: var(--preto); color: var(--branco); }
.btn-branco { --fundo-btn: var(--branco); color: var(--preto); }
@media (hover: hover) {
  .btn-vermelho:hover { --fundo-btn: #b30000; }
  .btn-preto:hover { --fundo-btn: #262626; }
  .btn-branco:hover { --fundo-btn: #e6e6e6; }
}
.btn-cheio { width: 100%; }

/* ---------- estrutura de seção ---------- */
.secao { position: relative; padding: clamp(64px, 12vw, 128px) var(--gutter); }
.secao-dentro { max-width: var(--max); margin: 0 auto; }
.secao-preta { background: var(--preto); color: var(--branco); }
.secao-branca { background: var(--branco); color: var(--preto); }
.secao-vermelha { background: var(--vermelho); color: var(--branco); }

.duas-colunas { display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) {
  .duas-colunas { grid-template-columns: 1fr 1fr; gap: 64px; }
}

.titulo {
  font-stretch: var(--largo);
  font-weight: 850;
  font-size: clamp(2rem, 7.6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.leve { font-weight: 300; color: var(--vermelho-vivo); }
.secao-branca .leve { color: var(--vermelho); }

/* =========================================================
   TOPO
   ========================================================= */
.topo {
  position: absolute;
  z-index: 20;
  top: calc(14px + env(safe-area-inset-top));
  left: var(--gutter);
  right: var(--gutter);
}
.topo-barra {
  --c: 12px;
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 8px 8px 8px 18px;
  isolation: isolate;
}
/* contorno chanfrado: duas camadas recortadas */
.topo-barra::before,
.topo-barra::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.topo-barra::before { inset: 0; background: var(--linha); }
.topo-barra::after { inset: 1px; background: var(--preto); --c: 11.6px; }

.topo-logo { display: block; margin-right: auto; padding: 6px 0; }
.topo-logo img { width: 118px; }

.topo-nav ul { display: flex; gap: 4px; }
.topo-nav a {
  display: block;
  padding: 10px 14px;
  font-stretch: 112%;
  font-weight: 650;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--branco);
}
.topo-nav a::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 4px;
  background: var(--vermelho);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ease);
}
@media (hover: hover) { .topo-nav a:hover::after { transform: scaleX(1); } }

.topo-menu {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 22px;
}
.topo-menu .ic-fechar { display: none; }
.topo-menu[aria-expanded="true"] .ic-abrir { display: none; }
.topo-menu[aria-expanded="true"] .ic-fechar { display: block; }

.btn-topo { min-height: 44px; padding: 10px 16px; font-size: 0.8125rem; white-space: nowrap; flex: none; }

@media (max-width: 899px) {
  .js .topo-menu { display: grid; }
  .js .topo-nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    padding: 8px;
    background: var(--preto);
    border: 1px solid var(--linha);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 200ms var(--ease), transform 260ms var(--ease), visibility 0s linear 260ms;
  }
  .js .topo-nav.aberto {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 200ms var(--ease), transform 260ms var(--ease);
  }
  .js .topo-nav ul { flex-direction: column; }
  .js .topo-nav a { padding: 14px 12px; font-size: 1.0625rem; text-align: center; }
  .js .topo-nav a::after { display: none; }
  html:not(.js) .topo-barra { flex-wrap: wrap; }
  html:not(.js) .topo-nav { order: 3; width: 100%; }
  html:not(.js) .topo-nav ul { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 359px) {
  .topo-logo img { width: 96px; }
  .btn-topo { padding: 10px 12px; letter-spacing: 0.02em; }
}

/* =========================================================
   1. HERO — parede de BIO PRIMES
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding: calc(122px + env(safe-area-inset-top)) var(--gutter) 0;
  display: grid;
  gap: 36px;
  background: var(--preto);
}
.hero-texto { text-align: center; width: 100%; max-width: 560px; margin: 0 auto; position: relative; z-index: 2; container-type: inline-size; }
.hero-titulo {
  font-stretch: var(--largo);
  font-weight: 900;
  font-size: clamp(2.1rem, 11.4vw, 5.6rem);
  /* "profissional." mede 7,6em: o título acompanha a largura da coluna */
  font-size: min(12.6cqi, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.hero-titulo .linha { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero-titulo .linha > span { display: inline-block; }
.hero-sub {
  margin-top: 22px;
  font-size: clamp(1.0625rem, 4.2vw, 1.25rem);
  line-height: 1.45;
  font-weight: 450;
  color: var(--cinza);
  max-width: 34ch;
  margin-inline: auto;
}

.parede {
  position: relative;
  overflow: hidden;
  height: clamp(520px, 140vw, 640px);
  margin: 0 calc(var(--gutter) * -1);
}
/* esfumado em cima e embaixo (degradê por cima, mais leve que mask) */
.parede::before,
.parede::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 22%;
  z-index: 2;
  pointer-events: none;
}
.parede::before { top: 0; background: linear-gradient(var(--preto), rgba(0, 0, 0, 0)); }
.parede::after { bottom: 0; background: linear-gradient(rgba(0, 0, 0, 0), var(--preto)); }
.parede-giro {
  position: absolute;
  inset: -10% 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0 14px;
}
.coluna { overflow: hidden; }
.coluna-3, .coluna-4 { display: none; }
.coluna-trilho {
  display: flex;
  flex-direction: column;
  gap: 14px;
  will-change: transform;
}
.mini {
  width: 100%;
  aspect-ratio: 360 / 779;
  object-fit: cover;
  border-radius: 20px;
  border: 5px solid var(--grafite);
  outline: 1px solid var(--linha);
  outline-offset: 0;
  background: var(--grafite);
}

@keyframes sobe { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 7px)); } }
@keyframes desce { from { transform: translateY(calc(-50% - 7px)); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .sobe .coluna-trilho { animation: sobe var(--dur) linear infinite; }
  .desce .coluna-trilho { animation: desce var(--dur) linear infinite; }
  .parede.parada .coluna-trilho,
  .pagina-oculta .coluna-trilho { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .desce .coluna-trilho { transform: translateY(-18%); }
}

@media (min-width: 600px) {
  .parede-giro { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coluna-3 { display: block; }
}
@media (min-width: 1000px) {
  .hero {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
    min-height: min(100svh, 900px);
    padding-top: calc(110px + env(safe-area-inset-top));
    padding-bottom: 0;
    gap: 24px;
    max-width: none;
  }
  .hero-texto { text-align: left; margin: 0; padding-left: max(0px, calc((100vw - var(--max)) / 2)); padding-bottom: 40px; max-width: none; }
  .hero-titulo { font-size: clamp(3rem, 4.4vw, 4.4rem); font-size: min(12.6cqi, 5.2rem); }
  .hero-sub { margin-inline: 0; }
  .parede {
    align-self: stretch;
    height: auto;
    min-height: 720px;
    margin: 0 calc(var(--gutter) * -1) 0 0;
  }
  .parede-giro {
    inset: -30% -6% -30% 2%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    transform: rotate(7deg);
  }
  .coluna-4 { display: block; }
}

/* entrada do hero (um único momento orquestrado) */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-titulo .linha > span { transform: translateY(105%); }
  .js .hero-sub, .js .parede { opacity: 0; }
  .js .hero.pronto .hero-titulo .linha > span {
    transform: none;
    transition: transform 900ms var(--ease);
  }
  .js .hero.pronto .linha:nth-child(2) > span { transition-delay: 90ms; }
  .js .hero.pronto .linha:nth-child(3) > span { transition-delay: 180ms; }
  .js .hero.pronto .hero-sub { opacity: 1; transition: opacity 700ms ease 420ms; }
  .js .hero.pronto .parede { opacity: 1; transition: opacity 1100ms ease 250ms; }
}

/* =========================================================
   CELULAR (moldura usada nas seções)
   ========================================================= */
.celular {
  position: relative;
  width: clamp(230px, 64vw, 300px);
  margin: 0 auto;
  padding: 9px;
  border-radius: 46px;
  background: var(--preto);
  box-shadow: 0 0 0 1.5px #2e2e2e, 0 30px 60px -20px rgba(0, 0, 0, 0.45);
}
.secao-preta .celular { box-shadow: 0 0 0 1.5px var(--linha); }
.celular::after {
  content: "";
  position: absolute;
  top: 19px;
  left: 50%;
  width: 30%;
  height: 22px;
  border-radius: 20px;
  background: var(--preto);
  transform: translateX(-50%);
  z-index: 2;
}
.celular-tela {
  position: relative;
  aspect-ratio: 390 / 844;
  overflow: hidden;
  border-radius: 37px;
  background: var(--grafite);
}
.celular-tela img { width: 100%; }

/* rolagem automática simulando o dedo do cliente */
@keyframes rolagem {
  0%, 9% { transform: translateY(0); }
  27%, 36% { transform: translateY(-22.2%); }
  54%, 63% { transform: translateY(-44.4%); }
  81%, 92% { transform: translateY(-66.6%); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .celular-rola .celular-tela img { animation: rolagem 16s var(--ease) infinite; will-change: transform; }
  .celular-rola-2 .celular-tela img { animation-delay: -4s; }
  .celular-rola.parada .celular-tela img,
  .pagina-oculta .celular-rola .celular-tela img { animation-play-state: paused; }
}
/* sem movimento: a tela vira rolável pelo próprio visitante */
@media (prefers-reduced-motion: reduce) {
  .celular-rola .celular-tela { overflow-y: auto; overscroll-behavior: contain; }
}

/* =========================================================
   2. EM ATÉ 48H
   ========================================================= */
.prazo-texto { text-align: center; }
.prazo .titulo { font-size: clamp(2.3rem, 9vw, 4.2rem); }
.personalizado {
  display: inline-block;
  margin-top: 26px;
  padding: 12px 20px;
  background: var(--preto);
  color: var(--branco);
  font-stretch: var(--largo);
  font-weight: 800;
  font-size: clamp(1rem, 4vw, 1.25rem);
  letter-spacing: 0.04em;
}
@media (min-width: 900px) {
  .prazo-texto { text-align: left; order: 2; }
}

/* =========================================================
   3. COMPARTILHE
   ========================================================= */
.compartilhe-texto { text-align: center; }
.compartilhe .titulo { max-width: 14ch; margin: 0 auto; }
@media (min-width: 900px) {
  .compartilhe-texto { text-align: left; }
  .compartilhe .titulo { margin: 0; }
}
.redes { position: relative; padding: 24px 0; }
.celular-menor { width: clamp(200px, 52vw, 260px); }
.rede {
  --c: 10px;
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(52px, 14vw, 68px);
  height: clamp(52px, 14vw, 68px);
  background: var(--branco);
  color: var(--cor);
  font-size: clamp(24px, 6.4vw, 32px);
  z-index: 3;
}
.rede-1 { left: 4%;  top: 10%; }
.rede-2 { right: 4%; top: 16%; }
.rede-3 { left: 0;   top: 44%; }
.rede-4 { right: 0;  top: 50%; }
.rede-5 { left: 6%;  bottom: 10%; }
.rede-6 { right: 6%; bottom: 6%; }
@media (min-width: 600px) {
  .rede-1 { left: 14%; } .rede-2 { right: 14%; } .rede-3 { left: 9%; }
  .rede-4 { right: 9%; } .rede-5 { left: 15%; } .rede-6 { right: 15%; }
}
@media (min-width: 900px) {
  .rede-1 { left: 6%; } .rede-2 { right: 6%; } .rede-3 { left: 0; }
  .rede-4 { right: 0; } .rede-5 { left: 8%; } .rede-6 { right: 8%; }
}
/* os ícones saem de trás do celular quando a seção aparece */
@media (prefers-reduced-motion: no-preference) {
  .js .redes .rede {
    opacity: 0;
    transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.6);
  }
  .js .rede-1 { --dx: 90%;  --dy: 120%; }
  .js .rede-2 { --dx: -90%; --dy: 110%; }
  .js .rede-3 { --dx: 120%; --dy: 0; }
  .js .rede-4 { --dx: -120%; --dy: 0; }
  .js .rede-5 { --dx: 90%;  --dy: -110%; }
  .js .rede-6 { --dx: -90%; --dy: -120%; }
  .js .redes.visivel .rede {
    opacity: 1;
    transform: none;
    transition: transform 700ms var(--ease), opacity 400ms ease;
  }
  .js .redes.visivel .rede-2 { transition-delay: 70ms; }
  .js .redes.visivel .rede-3 { transition-delay: 140ms; }
  .js .redes.visivel .rede-4 { transition-delay: 210ms; }
  .js .redes.visivel .rede-5 { transition-delay: 280ms; }
  .js .redes.visivel .rede-6 { transition-delay: 350ms; }
}

/* =========================================================
   4. SE O SEU NEGÓCIO É
   ========================================================= */
.negocios { text-align: center; }
.negocios-titulo { font-size: clamp(2.2rem, 9vw, 4rem); }
.rotadores {
  display: grid;
  gap: 6px 24px;
  margin: 34px auto 38px;
  max-width: 980px;
}
@media (min-width: 700px) { .rotadores { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rotadores { grid-template-columns: repeat(3, 1fr); } }
.rotador {
  position: relative;
  height: 1.5em;
  overflow: hidden;
  font-stretch: 112%;
  font-weight: 700;
  font-size: clamp(1.125rem, 4.6vw, 1.5rem);
  line-height: 1.5;
}
.rotador-palavra {
  position: absolute;
  inset: 0;
  white-space: nowrap;
  opacity: 0;
}
.rotador-palavra.ativa { opacity: 1; }
html:not(.js) .rotador-palavra:first-child { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .rotador-palavra { transform: translateY(-100%); }
  .rotador-palavra.ativa { transform: none; transition: transform 520ms var(--ease), opacity 300ms ease; }
  .rotador-palavra.saindo { opacity: 0; transform: translateY(100%); transition: transform 520ms var(--ease), opacity 400ms ease; }
}
@media (prefers-reduced-motion: reduce) {
  .rotador-palavra { transition: opacity 300ms ease; }
}
.negocios-fim { font-size: clamp(2rem, 8vw, 3.6rem); max-width: 16ch; margin: 0 auto; }

/* =========================================================
   5. SEU CLIENTE CLICA
   ========================================================= */
.cliente-clica-texto { text-align: center; }
.cliente-clica .titulo { max-width: 16ch; margin: 0 auto; }
@media (min-width: 900px) {
  .cliente-clica-texto { text-align: left; }
  .cliente-clica .titulo { margin: 0; }
}
.cliente-clica-midia {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.cliente-clica-midia .celular { margin: 0; width: clamp(196px, 55vw, 290px); }
.chamadas { display: grid; gap: 44px; }
.chamadas li {
  position: relative;
  padding-left: 16px;
  font-stretch: 112%;
  font-weight: 700;
  font-size: clamp(0.8125rem, 3.4vw, 1rem);
  line-height: 1.25;
}
.chamadas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 8px;
  height: 8px;
  background: var(--vermelho-vivo);
}
@media (max-width: 359px) {
  .cliente-clica-midia { grid-template-columns: 1fr; justify-items: center; }
  .chamadas { grid-auto-flow: column; gap: 20px; }
}

/* =========================================================
   6. SEJA FRANCO
   ========================================================= */
.franco-titulo { text-align: center; font-size: clamp(1.9rem, 7.4vw, 3.3rem); max-width: 22ch; margin: 0 auto; }
.franco-opcoes {
  display: grid;
  justify-items: center;
  gap: 18px;
  margin-top: 44px;
}
.opcao {
  --c: 18px;
  width: min(100%, 300px);
  display: grid;
  gap: 14px;
  padding: 16px 16px 18px;
}
.opcao-a { background: var(--branco); }
.opcao-b { background: var(--preto); }
.opcao-tela {
  aspect-ratio: 360 / 560;
  overflow: hidden;
  border-radius: 22px;
  background: var(--grafite);
}
.opcao-tela img { width: 100%; }
.franco-meio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.franco-pergunta {
  font-stretch: var(--largo);
  font-weight: 850;
  font-size: clamp(1.5rem, 6vw, 2rem);
  line-height: 1;
  text-align: center;
  max-width: 6ch;
}
.franco-seta { width: 40px; height: 40px; color: var(--branco); }
/* celular: uma seta para a opção de cima, outra para a de baixo */
@media (max-width: 799px) {
  .franco-seta { transform: rotate(135deg); }
}
@media (min-width: 800px) {
  .franco-opcoes { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; }
  .opcao-a { justify-self: end; }
  .opcao-b { justify-self: start; }
  .franco-meio { flex-direction: column; }
  /* desktop: uma seta para cada lado */
  .franco-seta { transform: rotate(45deg); }
}

/* =========================================================
   7. PREÇOS
   ========================================================= */
.precos-titulo { text-align: center; font-size: clamp(2rem, 10.5vw, 5rem); }
.precos-sub {
  display: block;
  max-width: 24ch;
  margin: 14px auto 0;
  font-stretch: 112%;
  font-weight: 700;
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.planos {
  display: grid;
  gap: 22px;
  margin: 48px auto 0;
  max-width: 420px;
}
@media (min-width: 960px) {
  .planos { grid-template-columns: repeat(3, 1fr); max-width: none; align-items: stretch; }
}
.plano {
  --c: 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 26px 22px 24px;
  background: var(--preto);
  color: var(--branco);
}
.plano-para {
  min-height: 3.9em;
  font-size: 0.9375rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--cinza);
  text-align: center;
}
.plano-nome {
  text-align: center;
  padding: 18px 0 16px;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}
.plano-nome h2 {
  font-stretch: var(--largo);
  font-weight: 900;
  font-size: clamp(2rem, 9vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.plano-nome .plano-nivel {
  margin-top: 8px;
  font-weight: 400;
  font-size: clamp(1.125rem, 5vw, 1.375rem);
  letter-spacing: 0.08em;
  color: var(--vermelho-vivo);
}
.plano-lista { display: grid; gap: 11px; margin-bottom: auto; }
.plano-lista li {
  position: relative;
  padding-left: 22px;
  font-size: 0.9875rem;
  line-height: 1.35;
}
.plano-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 9px;
  height: 9px;
  background: var(--vermelho);
}
.precos-fim {
  margin: 48px auto 0;
  max-width: 22ch;
  text-align: center;
  font-stretch: var(--largo);
  font-weight: 800;
  font-size: clamp(1.5rem, 6vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* =========================================================
   8. CLIENTES — carrossel em fluxo de capa
   ========================================================= */
.clientes { padding-left: 0; padding-right: 0; overflow: hidden; }
.clientes .secao-dentro { padding: 0 var(--gutter); }
.clientes-titulo { text-align: center; }
.carrossel { position: relative; margin-top: 40px; }
.carrossel-trilho {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 24px calc(50% - 105px) 30px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  perspective: 1100px;
}
.carrossel-trilho::-webkit-scrollbar { display: none; }
.carrossel-trilho:focus-visible { outline-offset: -3px; box-shadow: none; }
.cartao {
  flex: 0 0 210px;
  scroll-snap-align: center;
}
.cartao-corpo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: var(--branco);
  -webkit-tap-highlight-color: transparent;
}
.cartao-tela {
  display: block;
  width: 190px;
  aspect-ratio: 360 / 779;
  overflow: hidden;
  border-radius: 26px;
  border: 6px solid var(--grafite);
  outline: 1px solid var(--linha);
  background: var(--grafite);
}
.cartao-tela img { width: 100%; }
.cartao-nome {
  margin-top: 16px;
  font-stretch: 112%;
  font-weight: 750;
  font-size: 1.0625rem;
  line-height: 1.2;
}
.cartao-nicho { margin-top: 2px; font-size: 0.875rem; color: var(--cinza); }
.cartao-ver {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin-top: 6px;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--vermelho-vivo);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cartao-ver .ic { font-size: 0.9em; }
a.cartao-corpo:focus-visible { outline-offset: 6px; }
@media (hover: hover) {
  a.cartao-corpo:hover .cartao-tela { outline-color: var(--vermelho); }
}
.carrossel-controles {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.carrossel-btn {
  --c: 10px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: var(--vermelho);
  color: var(--branco);
  font-size: 22px;
  transition: transform 160ms var(--ease);
}
.carrossel-btn:active { transform: scale(0.94); }
html:not(.js) .carrossel-controles { display: none; }

/* =========================================================
   9. DÚVIDAS
   ========================================================= */
.duvidas-titulo { text-align: center; font-size: clamp(2rem, 10.5vw, 5rem); }
.duvidas-dentro { max-width: 820px; }
.faq { margin-top: 40px; border-top: 2px solid var(--preto); }
.faq details { border-bottom: 1px solid #cfcfcf; }
.faq summary {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 14px 4px;
  font-stretch: 108%;
  font-weight: 700;
  font-size: clamp(1rem, 4vw, 1.125rem);
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
.faq-mais {
  --c: 6px;
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--vermelho);
  color: var(--branco);
  font-size: 16px;
  transition: background-color 200ms ease;
}
.faq-mais .ic { transition: transform 300ms var(--ease); }
.faq details[open] .faq-mais { background: var(--preto); }
.faq details[open] .faq-mais .ic { transform: rotate(45deg); }
.faq-resposta {
  padding: 0 4px 22px 50px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--cinza-escuro);
}
.faq-resposta strong { color: var(--preto); font-weight: 750; }
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] .faq-resposta { animation: abre 380ms var(--ease); }
}
@keyframes abre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* =========================================================
   10. FALE CONOSCO
   ========================================================= */
.contato-dentro { text-align: center; display: grid; justify-items: center; }
.contato-chamada {
  max-width: 20ch;
  font-stretch: 112%;
  font-weight: 750;
  font-size: clamp(1.375rem, 5.6vw, 2rem);
  line-height: 1.15;
}
.contato-titulo {
  margin-top: 14px;
  color: var(--preto);
  font-size: clamp(2.3rem, 10vw, 4.4rem);
  font-weight: 900;
}
.contato-icones { display: flex; gap: 14px; margin: 30px 0; }
.contato-icone {
  --c: 12px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background: var(--branco);
  color: var(--preto);
  font-size: 30px;
  transition: transform 160ms var(--ease);
}
.contato-icone:active { transform: scale(0.94); }
.contato-suporte {
  max-width: 24ch;
  font-stretch: 112%;
  font-weight: 700;
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  line-height: 1.2;
  margin-bottom: 28px;
}

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape {
  padding: 56px var(--gutter) calc(40px + env(safe-area-inset-bottom));
  background: var(--preto);
  color: var(--branco);
  text-align: center;
}
.rodape-dentro { max-width: var(--max); margin: 0 auto; display: grid; justify-items: center; gap: 22px; }
.rodape-logo img { width: 210px; }
.rodape-links { font-size: 0.9375rem; line-height: 2.2; }
.rodape-links a { text-decoration: none; padding: 6px 4px; }
@media (hover: hover) { .rodape-links a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.rodape-copy { font-size: 0.875rem; color: var(--cinza); }

/* selo base2digital (geometria fixa; só cor, anel e fonte mudam) */
.credito {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin: 18px auto 0;
  text-align: left;
  font-size: 13px;
  line-height: 1.35;
  text-decoration: none;
  color: var(--branco);
  -webkit-tap-highlight-color: transparent;
}
.credito-txt strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.selo-b2 {
  --seal-ink: currentColor;
  --seal-accent: #d90000;
  --seal-ring: 0;
  --seal-font: var(--f);
  flex: none;
  width: 72px;
  height: 72px;
  overflow: visible;
  transition: rotate 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.selo-borda, .selo-anel { fill: none; stroke: var(--seal-ink); }
.selo-borda { stroke-width: 1; }
.selo-anel { stroke-width: 0.7; stroke-dasharray: var(--seal-ring); opacity: 0.75; }
.selo-texto {
  fill: var(--seal-ink);
  font-family: var(--seal-font);
  font-size: 6.3px;
  font-weight: 600;
  letter-spacing: 0.8px;
}
.selo-b { fill: var(--seal-ink); }
.selo-acento { fill: var(--seal-accent); }
.credito:active .selo-b2 { rotate: -10deg; }
.selo-giro { transform-box: view-box; transform-origin: 50px 50px; }
@keyframes selo-gira { to { transform: rotate(360deg); } }
@keyframes selo-flutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@media (prefers-reduced-motion: no-preference) {
  .selo-giro { animation: selo-gira 24s linear infinite; }
  .selo-b2 { animation: selo-flutua 4.8s ease-in-out infinite; }
  .selo-b2.is-still,
  .selo-b2.is-still .selo-giro,
  .pagina-oculta .selo-b2,
  .pagina-oculta .selo-giro { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .credito:active .selo-b2 { rotate: none; }
}

/* =========================================================
   VOLTAR AO TOPO
   ========================================================= */
.volta-topo {
  --c: 10px;
  position: fixed;
  z-index: 30;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  isolation: isolate;
  background: var(--vermelho);
  color: var(--branco);
  font-size: 22px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 220ms ease, transform 300ms var(--ease), visibility 0s linear 300ms;
}
/* miolo preto com contorno vermelho: aparece sobre preto, branco e vermelho */
.volta-topo::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  background: var(--preto);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.volta-topo.mostra {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 220ms ease, transform 300ms var(--ease);
}

/* =========================================================
   POPUP "outra chance"
   ========================================================= */
.popup {
  --c: 22px;
  width: min(92vw, 440px);
  margin: auto;
  padding: 40px 28px 30px;
  border: 0;
  background: var(--vermelho);
  color: var(--branco);
  text-align: center;
}
.popup::backdrop { background: rgba(0, 0, 0, 0.78); }
.popup-titulo {
  font-stretch: var(--largo);
  font-weight: 900;
  font-size: clamp(1.75rem, 8vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 26px;
}
@media (prefers-reduced-motion: no-preference) {
  .popup[open] { animation: popup-entra 420ms var(--ease); }
  .popup[open]::backdrop { animation: fundo-entra 300ms ease; }
}
@keyframes popup-entra { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes fundo-entra { from { opacity: 0; } to { opacity: 1; } }