/* ══════ Pepper · site institucional ══════
   Design herdado do site original no Framer (peppermkt.framer.ai):
   preto #0a0a0a, vermelho #df1c30, títulos grandes e apertados (Manrope,
   substituto livre da Eina), Unbounded só nos rótulos, cards raio 30,
   seção do método em vermelho→preto e rodapé preto→vermelho.
   Rodada de otimização (Home v2): tarja do h1 em linha própria, aspas
   reais na .cita, faixa de prova no hero, cards de acelerador, banda de
   fotos, métricas de prova e passos no CTA final. */

:root {
  --bg: #0a0a0a;
  --bg-2: #0e0e0f;
  --bg-3: #0f0f0f;            /* cartões, como no Framer: rgba(15,15,15,.95) */
  --borda: rgba(255, 255, 255, .08);
  --vermelho: #df1c30;
  --vermelho-2: #ef2438;      /* hover */
  --coral: #ff4d5e;           /* vermelho claro p/ acento de texto em fundo escuro */
  --laranja: #ff4d5e;
  --texto: #ffffff;
  --suave: rgba(255, 255, 255, .75);
  --display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rotulo: "Unbounded", system-ui, sans-serif;
  --corpo: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1160px;
  --raio: 30px;
  --transicao: .35s cubic-bezier(.2, .7, .3, 1);
}

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

body {
  background: var(--bg);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* títulos no desenho do Framer: pesados, colados, quase sem entrelinha */
h1, h2, h3 { font-family: var(--display); font-weight: 800; }
h1 { font-size: clamp(2.25rem, 8.5vw, 4.125rem); line-height: .98; letter-spacing: -.045em; }
h2 { font-size: clamp(1.65rem, 5.5vw, 2.5rem); line-height: 1.06; letter-spacing: -.04em; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.25; letter-spacing: -.02em; }

/* tarja vermelha do h1: bloco inteiro em linha própria (via <br> no markup),
   contínuo, sem sobrepor os descendentes da linha de cima */
h1 em {
  font-style: normal; display: inline-block; color: #fff; background: var(--vermelho);
  padding: .02em .2em .1em; margin-top: .12em; border-radius: 6px;
  /* Abaixo de ~965px de tela a tarja ainda quebra em duas linhas; o balance
     reparte as palavras por igual em vez de deixar uma sozinha no fim. */
  text-wrap: balance;
}
h2 em { font-style: normal; color: var(--vermelho); }
p  { max-width: 62ch; }
a  { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--vermelho); color: #fff; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.secao { padding: clamp(64px, 9vw, 110px) 0; position: relative;
  content-visibility: auto; contain-intrinsic-size: auto 640px; /* pinta sob demanda */ }
.secao-alt { background: var(--bg-2); }
.centro { text-align: center; }
.centro p { margin-inline: auto; }

/* rótulo pequeno em Unbounded vermelho — assinatura do site antigo */
.olho {
  display: inline-block; font-family: var(--rotulo); font-size: .78rem; font-weight: 500;
  letter-spacing: .01em; color: var(--vermelho); margin-bottom: 16px;
}
.resposta { color: var(--suave); font-size: 1.06rem; margin-top: 16px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--vermelho);
  color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0; text-decoration: none;
}
.skip:focus { left: 0; }

/* ─────────── botões ───────────
   CTA do Framer: pílula vermelha, texto branco bold em caixa alta, 13px */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 13px 30px; border-radius: 999px;
  font: 800 .82rem var(--corpo); letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao), border-color var(--transicao);
}
.btn-solido { background: var(--vermelho); color: #fff; box-shadow: 0 8px 30px rgba(223, 28, 48, .35); }
.btn-solido:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(223, 28, 48, .5); background: var(--vermelho-2); }
.btn-borda { border-color: rgba(255, 255, 255, .28); color: var(--texto); background: transparent; }
.btn-borda:hover { border-color: #fff; transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid #fff; outline-offset: 3px;
}

/* ─────────── cabeçalho ─────────── */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background var(--transicao), box-shadow var(--transicao), padding var(--transicao);
  padding: 14px 0;
}
.topo.rolou { background: rgba(10, 10, 10, .82); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--borda); padding: 8px 0; }
.topo-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.marca img { width: 132px; height: 48px; object-fit: contain; }
.nav { display: flex; align-items: center; gap: 14px; }
.nav-links { display: flex; align-items: center; }
.nav a:not(.btn) {
  padding: 12px 14px; min-height: 44px; display: inline-flex; align-items: center;
  text-decoration: none; color: rgba(255, 255, 255, .85); font-weight: 400; font-size: .95rem;
  border-radius: 999px; transition: color .2s, background .2s;
}
.nav a:not(.btn):hover, .nav a[aria-current] { color: #fff; }
.nav-cta { min-height: 44px; padding: 10px 24px; font-size: .74rem; }
.hamb { display: none; }

/* desktop: links dentro de uma cápsula escura e página atual em pílula vermelha,
   como a barra do site no Framer */
@media (min-width: 861px) {
  .nav-links {
    background: rgba(15, 15, 15, .82); border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 999px; padding: 5px 6px; gap: 2px; backdrop-filter: blur(8px);
  }
  .nav a:not(.btn) {
    padding: 9px 18px; min-height: 38px;
    font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  }
  .nav a[aria-current] { background: var(--vermelho); color: #fff; }
}

@media (max-width: 860px) {
  .hamb {
    display: grid; gap: 5px; place-content: center; width: 48px; height: 48px;
    background: none; border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; cursor: pointer;
  }
  .hamb span { width: 20px; height: 2px; background: var(--texto); transition: transform .3s, opacity .3s; }
  .hamb[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamb[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .hamb[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav {
    position: fixed; inset: 0; background: rgba(10, 10, 10, .97); backdrop-filter: blur(10px);
    flex-direction: column; justify-content: center; gap: 12px;
    opacity: 0; pointer-events: none; transition: opacity .3s;
  }
  .nav.aberto { opacity: 1; pointer-events: auto; }
  .nav-links { flex-direction: column; align-items: center; gap: 12px; }
  .nav a:not(.btn) { font-size: 1.5rem; font-family: var(--display); font-weight: 700; letter-spacing: -.02em; color: #fff; }
  .nav-cta { margin: 18px 0 0; }
  .topo-in { position: relative; z-index: 10; }
  .hamb { position: relative; z-index: 20; }
}

/* ─────────── hero ───────────
   Como no Framer: tudo centralizado, título gigante, brilho vermelho
   no alto, textura de meia-cápsula e foto larga fundindo no preto. */
.hero {
  padding: clamp(150px, 20vh, 190px) 0 0; position: relative; isolation: isolate;
  overflow: clip; text-align: center;
}
.hero::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg width='24' height='40' viewBox='0 0 24 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40c5.523 0 10-4.477 10-10V0C4.477 0 0 4.477 0 10v30zm22 0c-5.523 0-10-4.477-10-10V0c5.523 0 10 4.477 10 10v30z' fill='%23e23246' fill-opacity='.055'/%3E%3C/svg%3E"),
    radial-gradient(52% 40% at 50% 2%, rgba(223, 28, 48, .4), transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 82%);
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 82%);
}
/* Medido, não chutado: a primeira linha do h1 precisa de 917px e a tarja
   precisa de 970px em 66px de fonte. O teto de 960 vinha da primeira linha e
   errava a tarja por 10px, que era exatamente o que a quebrava em duas. 1010
   dá folga pras duas; abaixo de ~1060px de tela a tarja volta a quebrar, e
   no celular ela quebra de propósito. */
.hero-centro { max-width: 1010px; margin-inline: auto; }
.hero h1 .palavra { display: inline-block; overflow: clip; vertical-align: bottom; }
.hero h1 .palavra > span {
  display: inline-block; transform: translateY(110%);
  animation: sobe .7s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: var(--d, 0s);
}
@keyframes sobe { to { transform: translateY(0); } }
.hero-sub { color: var(--suave); font-size: 1.06rem; margin: 26px auto 34px; max-width: 590px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* foto do hero como no Framer: prato em fundo preto que derrete na página,
   sem moldura — máscara suave nas bordas e brasa vermelha por trás */
.hero-foto { position: relative; margin-top: clamp(20px, 3.5vw, 44px); display: grid; justify-items: center; }
.hero-foto::before {
  content: ""; position: absolute; z-index: -1; inset: 16% 10% 4%;
  background: radial-gradient(50% 55% at 50% 62%, rgba(223, 28, 48, .26), rgba(191, 51, 19, .1) 55%, transparent 78%);
  filter: blur(34px);
}
.hero-foto img {
  width: min(100%, 1000px); height: auto;
  -webkit-mask-image: radial-gradient(closest-side, #000 42%, transparent 90%);
  mask-image: radial-gradient(closest-side, #000 42%, transparent 90%);
}
.hero-selo {
  position: absolute; z-index: 2; bottom: 14%; left: clamp(8px, 8vw, 100px); background: rgba(15, 15, 15, .92);
  border: 1px solid var(--borda); text-align: left;
  border-radius: 16px; padding: 12px 18px; font-size: .85rem; color: var(--suave);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45); animation: flutua 5s ease-in-out infinite alternate;
}
.hero-selo strong { display: block; color: var(--texto); font-size: 1rem; }
@keyframes flutua { to { transform: translateY(-10px); } }

/* faixa de prova sob a foto do hero: fatos, sem número inventado.
   auto-fit e não repeat(3): a faixa já teve 3 itens e hoje tem 2, e um número
   fixo de colunas deixaria a última vazia no desktop. */
.faixa-prova {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 1px solid var(--borda); text-align: left;
}
.faixa-prova > div { padding: 22px 24px; }
.faixa-prova > div:first-child { padding-left: 0; }
.faixa-prova > div:last-child { padding-right: 0; }
.faixa-prova strong { display: block; font-size: 1rem; letter-spacing: -.02em; }
.faixa-prova span { color: rgba(255, 255, 255, .6); font-size: .9rem; }
@media (max-width: 700px) {
  .faixa-prova { grid-template-columns: 1fr; }
  .faixa-prova > div { padding: 14px 0; border-bottom: 1px solid var(--borda); }
  .faixa-prova > div:last-child { border-bottom: none; }
}

/* ─────────── grade de duas colunas (texto + foto) ─────────── */
/* minmax(0, ...) nas duas colunas: sem isso o track adota o min-content da
   foto (o max-width inline de 380/420px) e estica a coluna inteira além da
   tela no celular, cortando título e texto sob o overflow-x do body. */
.hero-grade { display: grid; gap: 48px; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; }
@media (max-width: 900px) { .hero-grade { grid-template-columns: minmax(0, 1fr); } }

/* ─────────── revelação no scroll ─────────── */
html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1); transition-delay: var(--d, 0s); }
html.js .reveal.viu { opacity: 1; transform: none; }

/* ─────────── cartões ─────────── */
.grade { display: grid; gap: 20px; margin-top: 44px; }
.grade-3 { grid-template-columns: repeat(3, 1fr); }
.grade-2 { grid-template-columns: repeat(2, 1fr); }
.grade-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .grade-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .grade-3 { grid-template-columns: 1fr; } .grade-2 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .grade-4 { grid-template-columns: 1fr; } }
.cartao {
  background: var(--bg-3); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 30px 28px; position: relative; overflow: hidden;
  transition: transform var(--transicao), border-color var(--transicao);
}
.cartao::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(223, 28, 48, .13), transparent 60%);
  pointer-events: none;
}
.cartao:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .18); }
.cartao:hover::before { opacity: 1; }
.cartao h3 { margin-bottom: 10px; }
.cartao p { color: var(--suave); font-size: .98rem; }

/* cartão de acelerador (upsell): borda quente e ícone ao lado do texto */
.cartao-upsell {
  background: linear-gradient(180deg, rgba(223, 28, 48, .1), var(--bg-3) 60%);
  border-color: rgba(223, 28, 48, .35);
  display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
}
.cartao-upsell .cartao-icone { margin-bottom: 0; flex: 0 0 auto; }
.cartao-upsell > div { flex: 1 1 200px; }

/* selo de módulo adicional (upsell) no cartão */
.tag-extra {
  display: inline-block; font-family: var(--rotulo); font-size: .56rem; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase; color: var(--coral);
  border: 1px solid rgba(223, 28, 48, .5); border-radius: 999px;
  padding: 4px 12px; margin-bottom: 14px;
}

/* chip de ícone vermelho no topo do cartão, como os diferenciais do Framer */
.cartao-icone {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-content: center;
  background: rgba(223, 28, 48, .09); border: 1px solid rgba(223, 28, 48, .5);
  color: var(--vermelho); margin-bottom: 18px;
}
.cartao-icone svg { width: 26px; height: 26px; }
.cartao-num {
  font-family: var(--display); font-weight: 800; font-size: 2rem; color: transparent;
  -webkit-text-stroke: 1px var(--coral); margin-bottom: 14px; display: block;
}

/* ficha de dor: citação verbatim do dono (aspas reais, não a letra C) */
.cita {
  font-family: var(--display); font-weight: 700; font-size: 1.08rem; line-height: 1.35;
  letter-spacing: -.02em; color: var(--texto); margin-bottom: 14px;
}
.cita::before { content: "\201C"; color: var(--vermelho); margin-right: 1px; }
.cita::after { content: "\201D"; color: var(--vermelho); margin-left: 1px; }
.pilar {
  display: inline-block; margin-top: 16px; padding-top: 10px; border-top: 1px dashed var(--borda);
  font-family: var(--rotulo); font-size: .62rem; font-weight: 400; letter-spacing: .08em;
  text-transform: uppercase; color: var(--coral);
}

/* ─────────── seção em brasa: gradiente vermelho→preto do Framer ─────────── */
.secao-fogo {
  background: linear-gradient(180deg, var(--vermelho) 0%, #de1c30 26%, var(--bg) 100%);
}
.secao-fogo .olho { color: #fff; }
.secao-fogo .resposta { color: rgba(255, 255, 255, .92); }
.secao-fogo a:not(.btn) { color: #fff; }

/* brilho quente radial, como atrás dos diferenciais no Framer */
.secao-brasa::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(62% 44% at 50% 88%, rgba(130, 48, 0, .5), transparent 72%);
}
.secao-brasa > .wrap { position: relative; z-index: 1; }

/* ─────────── S.A.B.O.R: cinco abas ───────────
   As abas viraram lista em 27/08/2026 e VOLTARAM em 28/08, por decisão do João:
   a lista ocupava o mesmo espaço, explicava menos e não passava a ideia de
   pilares distintos. Tocar na letra é o que faz a pessoa entender o método.
   O painel do S nasce aberto, então quem não tocar em nada ainda lê uma frente
   inteira, e o botão "Ver o método completo" continua levando ao texto corrido. */
.sabor { margin-top: clamp(24px, 4vw, 40px); }
.sabor-letras { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.sabor-letra {
  font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 4.5vw, 2.2rem);
  width: clamp(58px, 11vw, 86px); aspect-ratio: 1; border-radius: 18px;
  background: rgba(10, 10, 10, .34); border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .9); cursor: pointer; position: relative;
  display: grid; place-content: center;
  transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.sabor-letra:hover { border-color: rgba(255, 255, 255, .34); transform: translateY(-3px); }
.sabor-letra[aria-selected="true"] {
  background: #0b0b0b; border-color: rgba(255, 255, 255, .16); color: #fff;
  transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, .42);
}
/* traço embaixo da letra ativa: diz qual painel está aberto sem depender de cor */
.sabor-letra[aria-selected="true"]::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 13px; width: 30%; height: 3px; border-radius: 2px; background: var(--vermelho);
}
.sabor-painel {
  display: flex; align-items: flex-start; gap: 18px;
  margin: 26px auto 0; max-width: 760px; text-align: left;
  background: #0b0b0b; border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--raio); padding: clamp(22px, 3.4vw, 34px);
}
.sabor-painel[hidden] { display: none; }
/* a letra grande repete o pilar dentro do painel, em contorno pra não competir
   com o h3; aria-hidden no HTML porque para o leitor de tela ela é ruído */
.sabor-letra-grande {
  font-family: var(--display); font-weight: 800; font-size: 1.9rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--coral);
  flex: 0 0 auto; margin-top: 2px;
}
.sabor-corpo { flex: 1 1 auto; min-width: 0; }
.sabor-painel h3 { color: #fff; margin-bottom: 8px; }
.sabor-painel p { color: var(--suave); }
.sabor-painel .anima { animation: aparece .45s ease both; }
@keyframes aparece { from { opacity: 0; transform: translateY(10px); } }

/* fundador dentro da seção do comparativo: era seção própria de 391px */
.bloco-fundador { margin-top: clamp(40px, 6vw, 72px); padding: 0; }
.bloco-fundador h3 { margin-bottom: 6px; }

/* ─────────── banda de fotos entre seções ─────────── */
.banda-fotos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 0 4px; }
.banda-fotos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; }
@media (max-width: 900px) { .banda-fotos { grid-template-columns: repeat(2, 1fr); } }


/* ─────────── faixa de foto entre seções ───────────
   Uma foto deitada só, larga, sem moldura. Substituiu a banda de quatro fotos
   em pé: mesmo recado visual, metade do scroll no celular. */
.faixa-foto { padding: 0 4px; }
.faixa-foto img {
  width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 20px;
}
@media (min-width: 900px) { .faixa-foto { max-width: 1100px; margin-inline: auto; } }
@media (max-width: 640px) {
  .faixa-foto { padding: 0 16px; }
  .faixa-foto img { aspect-ratio: 16 / 9; border-radius: 12px; }
}

/* selo do método quando a seção é centralizada: no desktop continua um bloco
   centralizado; no celular a regra de marcador de tópico assume. */
@media (min-width: 641px) {
  /* selo do método e retrato do fundador: tamanhos que moravam em style="" no
     HTML. O inline saiu porque vencia a folha e travava o marcador de tópico
     do celular; aqui eles ficam cercados pelo breakpoint, não pela força do
     seletor. O .hero-grade .foto-larga do fim do arquivo pede o seletor mais
     específico no retrato. */
  .arte-frente.arte-frente-centro { width: 104px; margin-inline: auto; }
  .foto-retrato, .hero-grade .foto-larga.foto-retrato { max-width: 380px; }
}

/* ─────────── métricas de prova (sem número inventado) ─────────── */
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px; margin-top: 32px; }
.metrica { background: var(--bg-3); border: 1px solid var(--borda); border-radius: 20px; padding: 20px; }
.metrica strong { display: block; font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1; letter-spacing: -.04em; }
.metrica span { display: block; color: rgba(255, 255, 255, .6); font-size: .85rem; margin-top: 6px; }
.nota-pendente {
  font-family: var(--rotulo); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .45); margin-top: 10px;
}

/* letra grande contornada que ancora cada frente na página do método */
.letra-frente {
  display: block; font-family: var(--display); font-weight: 800; font-size: 4rem;
  line-height: 1; letter-spacing: -.04em; color: transparent;
  -webkit-text-stroke: 1px var(--coral); margin-bottom: 12px;
}

/* ─────────── tabela comparativa ─────────── */
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 44px; border: 1px solid var(--borda); border-radius: var(--raio); }
table { width: 100%; border-collapse: collapse; min-width: 520px; background: var(--bg-3); }
th, td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--borda); font-size: .97rem; }
th { font-family: var(--display); font-weight: 700; font-size: .85rem; letter-spacing: 0; }
tbody tr:last-child td { border-bottom: none; }
td:first-child { color: var(--suave); }
.col-pepper { color: var(--texto); background: rgba(223, 28, 48, .08); }
th.col-pepper { color: var(--coral); }

/* ─────────── FAQ ─────────── */
.faq { max-width: 760px; margin: 44px auto 0; display: grid; gap: 12px; }
.faq details { background: var(--bg-3); border: 1px solid var(--borda); border-radius: 20px; overflow: hidden; transition: border-color .3s; }
.faq details[open] { border-color: rgba(223, 28, 48, .55); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 56px 20px 24px; font-weight: 700;
  font-size: 1.02rem; letter-spacing: -.01em; position: relative; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 22px; top: 50%; translate: 0 -50%;
  font-family: var(--display); font-size: 1.3rem; color: var(--vermelho); transition: rotate .3s;
}
.faq details[open] summary::after { rotate: 45deg; }
.faq .faq-corpo { padding: 0 24px 22px; color: var(--suave); animation: aparece .35s ease; }



/* ─────────── frente Busca: a casa em primeiro no Google ───────────
   Substituiu uma arte de lupa que não dizia nada. Aqui a ilustração mostra a
   entrega da frente: aparecer em primeiro e convencer em segundos. Tudo em
   HTML e CSS (nada de imagem nova pra carregar), genérico de propósito e sem
   número inventado — "Sua casa", concorrentes sem nome, nenhuma nota escrita.
   As estrelas só preenchem quando o bloco entra na tela. */
.busca-demo {
  background: var(--bg-3); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 18px; max-width: 420px;
}
.busca-barra {
  display: flex; align-items: center; gap: 9px;
  background: var(--bg); border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  padding: 10px 16px; color: var(--suave); font-size: .88rem; margin-bottom: 14px;
}
.busca-lista { list-style: none; display: grid; gap: 8px; }
.busca-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg); border: 1px solid var(--borda); border-radius: 14px; padding: 12px 14px;
}
.busca-pos {
  flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-content: center;
  font-family: var(--display); font-weight: 800; font-size: .9rem;
  background: rgba(255, 255, 255, .07); color: var(--suave);
}
.busca-corpo { display: grid; gap: 6px; min-width: 0; flex: 1; }
.busca-corpo strong { font-size: .95rem; letter-spacing: -.01em; }
.busca-item:not(.busca-item-topo) .busca-corpo strong { color: rgba(255, 255, 255, .45); font-weight: 400; }
.busca-linha { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .08); width: 72%; }
.busca-linha-curta { width: 48%; }
.busca-item-topo { border-color: rgba(223, 28, 48, .5); background: linear-gradient(180deg, rgba(223, 28, 48, .12), var(--bg) 70%); }
.busca-item-topo .busca-pos { background: var(--vermelho); color: #fff; }

/* cinco estrelas que preenchem uma a uma quando a seção aparece */
.busca-estrelas { display: flex; gap: 3px; }
.busca-estrelas i {
  width: 15px; height: 15px; background-color: rgba(255, 255, 255, .16);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
html.js .reveal.viu .busca-estrelas i { animation: acendeEstrela .45s ease forwards; }
html.js .reveal.viu .busca-estrelas i:nth-child(1) { animation-delay: .10s; }
html.js .reveal.viu .busca-estrelas i:nth-child(2) { animation-delay: .25s; }
html.js .reveal.viu .busca-estrelas i:nth-child(3) { animation-delay: .40s; }
html.js .reveal.viu .busca-estrelas i:nth-child(4) { animation-delay: .55s; }
html.js .reveal.viu .busca-estrelas i:nth-child(5) { animation-delay: .70s; }
@keyframes acendeEstrela { to { background-color: #f5b301; } }
/* sem JS, ou com movimento reduzido, as estrelas já nascem preenchidas */
html:not(.js) .busca-estrelas i { background-color: #f5b301; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal.viu .busca-estrelas i { animation: none; background-color: #f5b301; }
}

/* ─────────── sanfona numerada (missão, visão, valores) ───────────
   O padrão que a página Sobre tinha no Framer: linha com número, título e um
   botão redondo com "+" na direita, que vira "×" vermelho ao abrir. Mesma
   mecânica do FAQ (<details> nativo, um aberto por vez pelo ui.js): funciona
   sem JS, o texto continua no HTML pro Google e o alvo de toque é a linha
   inteira. Três cards empilhados custavam 373px no celular; fechada, ela
   custa 152px. */
.sanfona { max-width: 760px; margin: 32px auto 0; display: grid; gap: 12px; text-align: left; }
.sanfona details {
  background: var(--bg-3); border: 1px solid var(--borda);
  border-radius: 20px; overflow: hidden; transition: border-color .3s;
}
.sanfona details[open] { border-color: rgba(223, 28, 48, .55); }
.sanfona summary {
  cursor: pointer; list-style: none; position: relative; min-height: 44px;
  display: flex; align-items: center; gap: 14px; padding: 19px 68px 19px 24px;
}
.sanfona summary::-webkit-details-marker { display: none; }
.sanfona-num {
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  letter-spacing: -.02em; color: var(--coral); flex: none;
}
.sanfona summary h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; }
.sanfona summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; translate: 0 -50%;
  width: 34px; height: 34px; display: grid; place-content: center;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%;
  font-family: var(--display); font-size: 1.3rem; line-height: 0; color: var(--texto);
  transition: rotate .3s, background .3s, border-color .3s;
}
.sanfona details[open] summary::after {
  rotate: 45deg; background: var(--vermelho); border-color: var(--vermelho);
}
.sanfona .sanfona-corpo { padding: 0 24px 22px; color: var(--suave); animation: aparece .35s ease; }

/* ─────────── seção CTA final (com os 3 passos) ─────────── */
.chamada-final { background: transparent; }
.chamada-final .btn-solido { margin-top: 0; }
.passos-3col {
  grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 960px;
  margin: 40px auto 0; text-align: left;
}
@media (max-width: 900px) { .passos-3col { grid-template-columns: 1fr; } }

/* ─────────── rodapé ───────────
   Preto→vermelho, como no Framer; títulos das colunas em Unbounded vermelho. */
.rodape {
  border-top: none; padding-top: 64px;
  background: linear-gradient(180deg, var(--bg) 0%, #14060a 42%, var(--vermelho) 135%);
}
.rodape-grade { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr .8fr; gap: 36px; padding-bottom: 44px; }
@media (max-width: 900px) { .rodape-grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rodape-grade { grid-template-columns: 1fr; } }
.rodape-col { display: grid; gap: 10px; align-content: start; justify-items: start; }
.rodape-col a { color: rgba(255, 255, 255, .82); text-decoration: none; padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; transition: color .2s; }
.rodape-col a:hover { color: #fff; }
.rodape-titulo { font-family: var(--rotulo); font-size: .82rem; letter-spacing: .01em; color: var(--vermelho); font-weight: 500; }
.rodape-marca p { color: rgba(255, 255, 255, .82); font-size: .95rem; }
.rodape-nap { list-style: none; display: grid; gap: 4px; }
.rodape-base {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, .22); padding-block: 20px;
  color: rgba(255, 255, 255, .85); font-size: .85rem;
}
.rodape-base a { color: rgba(255, 255, 255, .85); }

/* ─────────── WhatsApp flutuante ─────────── */
.zap-flutua {
  position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 56px; height: 56px;
  border-radius: 50%; background: #25d366; color: #fff; display: grid; place-content: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45); transform: scale(0);
  transition: transform .4s cubic-bezier(.3, 1.4, .5, 1), bottom .32s cubic-bezier(.22, .9, .3, 1);
}
.zap-flutua.mostra { transform: scale(1); }
.zap-flutua:hover { transform: scale(1.1); }

/* ─────────── formulário ─────────── */
.form-caixa { background: var(--bg-3); border: 1px solid var(--borda); border-radius: var(--raio); padding: clamp(24px, 4vw, 40px); max-width: 640px; }
.campo { margin-bottom: 18px; }
.campo label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: 8px; }
.campo .opcional { color: var(--suave); font-weight: 400; font-size: .85rem; }
.campo input, .campo textarea {
  width: 100%; background: var(--bg); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px;
  padding: 14px 16px; color: var(--texto); font: 400 1rem var(--corpo);
  transition: border-color .2s, box-shadow .2s;
}
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--vermelho); box-shadow: 0 0 0 3px rgba(223, 28, 48, .22); }
.campo [aria-invalid="true"] { border-color: var(--vermelho); }
.erro { display: none; color: var(--coral); font-size: .85rem; margin-top: 6px; }
.campo [aria-invalid="true"] ~ .erro { display: block; }
.mel { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.nota-form { color: var(--suave); font-size: .88rem; margin-top: 12px; }
.falha { display: none; margin-top: 16px; padding: 14px 18px; border: 1px solid var(--vermelho); border-radius: 12px; color: var(--texto); font-size: .95rem; }
.falha.on { display: block; }
.falha a { color: var(--coral); }
.sucesso { padding: 20px 0; }
.sucesso .chamada { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; font-size: 1.4rem; margin-bottom: 12px; }
.sucesso p { color: var(--suave); margin-bottom: 8px; }
.sucesso a { color: var(--coral); }
#form-contato button { width: 100%; border: none; }

/* ─────────── página interna / artigos ─────────── */
.pagina-topo { padding: 150px 0 40px; position: relative; isolation: isolate; }
.pagina-topo::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(42% 60% at 50% 0%, rgba(223, 28, 48, .2), transparent 70%);
}
.migalha { font-size: .85rem; color: var(--suave); margin-bottom: 18px; }
.migalha a { color: var(--suave); }
.migalha a:hover { color: var(--texto); }
.artigo { max-width: 720px; margin-inline: auto; }
.artigo h2 { margin: 44px 0 14px; }
.artigo h3 { margin: 28px 0 10px; }
.artigo p, .artigo li { color: var(--suave); font-size: 1.05rem; }
.artigo ul, .artigo ol { padding-left: 24px; margin: 14px 0; }
.artigo strong { color: var(--texto); }
.artigo-meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--suave); font-size: .9rem; margin-top: 16px; }
.cartao-guia { display: block; text-decoration: none; }
.cartao-guia .tag { font-family: var(--rotulo); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--coral); font-weight: 400; }
.cartao-guia h3 { margin: 10px 0; }
.cartao-guia .lermais { color: var(--coral); font-weight: 700; font-size: .95rem; }

/* ─────────── listas com marcador ─────────── */
.lista-check { list-style: none; display: grid; gap: 12px; margin-top: 20px; }
.lista-check li { padding-left: 30px; position: relative; color: var(--suave); }
.lista-check li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 8px;
  border-left: 2px solid var(--vermelho); border-bottom: 2px solid var(--vermelho); transform: rotate(-45deg);
}

/* ─────────── passos numerados ─────────── */
.passos { counter-reset: passo; display: grid; gap: 18px; margin-top: 36px; }
.passo { display: flex; gap: 18px; align-items: flex-start; }
.passo::before {
  counter-increment: passo; content: counter(passo);
  font-family: var(--display); font-weight: 800; color: var(--vermelho);
  border: 1px solid var(--borda); border-radius: 14px; min-width: 48px; height: 48px;
  display: grid; place-content: center; background: var(--bg-3);
}
.passo p { color: var(--suave); }
.passo strong { color: var(--texto); display: block; margin-bottom: 2px; }

/* ─────────── divisores de imagem ─────────── */
/* ─────────── consentimento de cookies (LGPD) ───────────
   Barra enxuta, fechada por padrão: uma linha de texto e um botão de aceite.
   A recusa é o link "Escolher o que aceito", embutido na própria frase — abre
   o painel de preferências, que nasce fechado. O link fica menor que o botão
   de propósito, mas legível (contraste bem acima do mínimo da WCAG) e com
   rótulo honesto: é isso que mantém o consentimento válido. Caixa pré-marcada,
   rótulo enganoso ou texto ilegível é que derrubariam. */
.consenti {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: linear-gradient(180deg, #18181b 0%, #0d0d0f 100%);
  border-top: 2px solid var(--vermelho);
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  transform: translateY(115%); transition: transform .45s cubic-bezier(.2, .9, .26, 1.05);
  box-shadow: 0 -20px 55px rgba(0, 0, 0, .72), 0 -1px 0 rgba(255, 255, 255, .06);
  /* Com o painel aberto a barra cresce; num celular pequeno isso sairia pela
     borda de cima, então ela rola por dentro em vez de crescer. */
  max-height: 88svh; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
}
.consenti.on { transform: translateY(0); }

.consenti-in {
  max-width: var(--wrap); margin-inline: auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 14px; align-items: center;
}
.consenti-icone {
  display: grid; place-content: center; width: 38px; height: 38px;
  border-radius: 50%; color: var(--coral);
  background: rgba(223, 28, 48, .14); border: 1px solid rgba(223, 28, 48, .38);
}
.consenti-icone svg { width: 20px; height: 20px; }

.consenti-texto {
  margin: 0; max-width: none;
  font-size: .82rem; line-height: 1.5; color: var(--suave);
}
.consenti-texto strong { color: var(--texto); font-weight: 800; }
.consenti-texto a, .link-prefs {
  color: rgba(255, 255, 255, .82);
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35);
  text-underline-offset: 3px;
}
.consenti-texto a:hover, .link-prefs:hover { color: #fff; text-decoration-color: #fff; }
.consenti-texto .sep { color: rgba(255, 255, 255, .28); margin: 0 2px; }
/* Link de texto, não botão: mesma fonte e tamanho da frase em volta. */
.link-prefs {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-family: var(--corpo);
  transition: color var(--transicao), text-decoration-color var(--transicao);
}
.consenti #aceitar {
  grid-column: 1 / -1; width: 100%;
  min-height: 48px; padding: 13px 30px;
  box-shadow: 0 8px 26px rgba(223, 28, 48, .45);
  animation: pulsoAceite 2.4s ease-in-out 1.6s 3;
}
@keyframes pulsoAceite {
  0%, 100% { box-shadow: 0 8px 26px rgba(223, 28, 48, .45); }
  50%      { box-shadow: 0 10px 36px rgba(223, 28, 48, .78); }
}

/* painel de preferências — nasce fechado, só abre no link acima */
.prefs {
  display: none; max-width: var(--wrap); margin: 14px auto 0;
  padding-top: 14px; border-top: 1px solid var(--borda);
}
.prefs.on { display: block; }
.prefs-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.prefs-item:last-of-type { border-bottom: none; }
.prefs-item input { width: 19px; height: 19px; flex: none; margin-top: 3px; accent-color: var(--vermelho); }
.prefs-item input:disabled { opacity: .45; }
.prefs-item strong { display: block; font-size: .86rem; color: var(--texto); margin-bottom: 2px; }
.prefs-item span { font-size: .78rem; color: rgba(255, 255, 255, .6); line-height: 1.45; }
.prefs-salvar { margin-top: 14px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.prefs-salvar .btn { flex: 1 1 200px; }
.prefs-salvar .link-prefs { font-size: .82rem; }
@media (min-width: 560px) {
  .prefs-salvar .btn { flex: 0 0 auto; }
}
@media (min-width: 900px) {
  .consenti-in { grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; }
  .consenti #aceitar { grid-column: auto; width: auto; }
  .prefs-salvar { justify-content: flex-start; }
}
/* Enquanto a barra está no ar, o botão do WhatsApp sobe pra não ficar por
   baixo. Mexe em `bottom`, não em `transform`: o transform já é do scale de
   entrada do botão e sobrescrevê-lo faria ele aparecer antes da hora. */
.consenti.on ~ .zap-flutua { bottom: 108px; }
@media (min-width: 900px) { .consenti.on ~ .zap-flutua { bottom: 96px; } }

/* ─────────── grade de varredura do Google (página /resultados) ───────────
   Cada ponto é uma busca real feita naquele lugar do mapa; o número é a
   posição em que a casa apareceu ali. Cores na mesma convenção da ferramenta. */
.geo-bloco {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px; align-items: center; margin-top: 44px;
}
@media (max-width: 900px) { .geo-bloco { grid-template-columns: 1fr; gap: 28px; } }

.geo-mapa {
  background: var(--bg-3); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 26px;
}
.geo-titulo { font-size: .95rem; color: var(--suave); margin-bottom: 18px; }
.geo-titulo strong { color: var(--texto); }

.geo-grade {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  aspect-ratio: 1; container-type: inline-size;
}
.geo-grade.g7 { grid-template-columns: repeat(7, 1fr); gap: 6px; }

.geo-p {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%;
  font-family: var(--display); font-weight: 800; color: #0a0a0a;
  font-size: clamp(.8rem, 3.4cqi, 1.05rem); line-height: 1;
}
.geo-grade.g7 .geo-p { font-size: clamp(.7rem, 2.4cqi, .85rem); }

/* faixas de posição */
.geo-p.f1, .geo-p.f3  { background: #1e9e4a; color: #fff; }
.geo-p.f4, .geo-p.f5, .geo-p.f6 { background: #d8c218; }
.geo-p.f9, .geo-p.f10 { background: #e8892b; }
.geo-p.f14, .geo-p.f16 { background: var(--vermelho); color: #fff; }
/* fora dos 20: o vermelho mais fechado da escala, como na ferramenta.
   Não é ausência de dado, é a pior posição possível — e é o contraste dela
   com o verde do "depois" que conta a história do mapa. */
.geo-p.fx { background: #8e1220; color: #fff; font-size: clamp(.62rem, 2.6cqi, .8rem); }
.geo-grade.g7 .geo-p.fx { font-size: clamp(.54rem, 2cqi, .68rem); }

.geo-centro { box-shadow: 0 0 0 3px var(--bg-3), 0 0 0 5px #fff; }

.geo-legenda {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 18px;
  font-size: .74rem; color: var(--suave);
}
.geo-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.geo-legenda i { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.pt-verde { background: #1e9e4a; } .pt-amarelo { background: #d8c218; }
.pt-laranja { background: #e8892b; } .pt-vermelho { background: var(--vermelho); }
.pt-fora { background: #8e1220; }

.geo-rodape {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borda);
  font-family: var(--rotulo); font-size: .6rem; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255, 255, 255, .45);
}
.metrica strong small { font-size: .5em; font-weight: 700; opacity: .55; letter-spacing: 0; }
/* valor anterior sob a métrica: número grande é o de hoje, o "era" fica miúdo.
   Sem seta: o glifo → não existe na Manrope e cairia num fallback torto. */
.metrica-era {
  display: block; margin-top: 4px; font-style: normal;
  font-family: var(--rotulo); font-size: .58rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--coral);
}

@media (max-width: 640px) {
  .geo-mapa { padding: 18px; border-radius: 22px; }
  .geo-grade { gap: 5px; } .geo-grade.g7 { gap: 4px; }
}

/* width:100% (e não max-width) porque o max-width inline das fotos vence a
   folha: assim a foto respeita o container e o teto de 380px ao mesmo tempo. */
.foto-larga { border-radius: var(--raio); border: 1px solid var(--borda); width: 100%; height: auto; }
.duas-fotos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 44px; }
@media (max-width: 700px) { .duas-fotos { grid-template-columns: 1fr; } }

/* ─────────── artes da apresentação de vendas (deck 2026) ───────────
   PNGs de linha branca extraídos do PPTX, convertidos em webp com alpha.
   .arte-frente é o selo de cada frente; .arte-solta é a arte grande das
   seções sem foto; .selo-metodo flutua ao lado do h1 do método. */
.arte-frente { width: 64px; height: auto; display: block; margin-bottom: 14px; opacity: .92; }
.arte-solta { width: min(300px, 70%); height: auto; display: block; margin-inline: auto; opacity: .95; }
.selo-metodo { width: clamp(120px, 16vw, 170px); height: auto; float: right; margin: 0 0 16px 24px; }
/* arte solta dentro de texto corrido (o dado do cliente, na home) */
.arte-inline { float: left; width: 52px; height: 52px; margin: 4px 14px 4px 0; }

/* ─────────── correção: menu de celular quebrado fora do topo ───────────
   .topo.rolou ganha backdrop-filter, e backdrop-filter faz o elemento virar
   containing block dos descendentes fixed. Com isso o .nav (position:fixed;
   inset:0) deixava de medir a viewport e passava a medir a faixa do header:
   o overlay virava uma tarja de 60px com os links vazando por cima da
   página. Com o menu aberto o header abre mão do vidro. */
.topo:has(.nav.aberto) {
  background: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ─────────── voltar ao topo ───────────
   Discreto: só aparece depois de duas telas de rolagem e senta ao lado do
   botão do WhatsApp, um degrau menor e sem cor de marca, pra não competir
   com o CTA. Some no fim da página pra não cobrir o rodapé. */
.subir {
  position: fixed; right: 20px; bottom: 86px; z-index: 89;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-content: center;
  background: rgba(18, 18, 20, .82); color: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s, transform .3s, visibility .3s, bottom .32s cubic-bezier(.22, .9, .3, 1), border-color .2s;
}
.subir.mostra { opacity: 1; visibility: visible; transform: none; }
.subir:hover { border-color: rgba(255, 255, 255, .4); color: #fff; }
.subir svg { width: 19px; height: 19px; }
.consenti.on ~ .subir { bottom: 174px; }
@media (min-width: 900px) { .consenti.on ~ .subir { bottom: 162px; } }


/* ══════════════ MOBILE (≤640px) ══════════════
   Um passe só, na ordem em que a página é lida. A régua: o dedo rola menos,
   o olho não perde nada. O que encolhe é caixa, moldura, foto e respiro; o
   texto continua inteiro, só mais apertado. Duas decisões estruturais mandam
   no resto: (1) toda arte e todo ícone vira marcador de tópico à esquerda do
   texto, nunca uma linha própria acima dele; (2) card é linha, não caixa. */
@media (max-width: 640px) {

  /* ── tipografia: um degrau abaixo do desktop ── */
  body { font-size: 15px; line-height: 1.55; }
  .wrap { padding: 0 16px; }
  h1 { font-size: clamp(1.85rem, 7.6vw, 2.15rem); line-height: 1.03; letter-spacing: -.035em; }
  h2 { font-size: 1.36rem; line-height: 1.12; letter-spacing: -.03em; }
  h3 { font-size: 1rem; line-height: 1.2; }
  p { max-width: none; }
  .olho { font-size: .67rem; margin-bottom: 7px; }
  .resposta { font-size: .93rem; line-height: 1.5; margin-top: 9px; }
  .btn { min-height: 46px; padding: 12px 22px; font-size: .76rem; }

  /* ── respiro entre seções: era o custo fixo repetido 9 vezes na home ── */
  .secao { padding: 28px 0; }
  .secao h2 { margin-bottom: 8px; }
  .grade { gap: 8px; margin-top: 16px; }

  /* ── CARDS VIRAM LISTA CONTÍNUA ──
     Dez cards soltos na home custavam dez molduras e nove vãos. Numa moldura
     só, separados por fio, o conteúdo é o mesmo e o padrão fica igual ao da
     faixa do acelerador logo abaixo. Some o vão, some a borda repetida. */
  .grade-3, .grade-4 {
    gap: 0; grid-template-columns: 1fr;
    border: 1px solid var(--borda); border-radius: 16px; overflow: hidden;
    background: var(--bg-3);
  }
  .grade-3 > .cartao, .grade-4 > .cartao {
    background: none; border: 0; border-radius: 0; padding: 12px 15px;
  }
  .grade-3 > .cartao + .cartao,
  .grade-4 > .cartao + .cartao { border-top: 1px solid var(--borda); }
  .grade-3 > .cartao::before, .grade-4 > .cartao::before { display: none; }

  /* ── 1 · ARTE VIRA MARCADOR DE TÓPICO ──
     .olho já é inline-block; basta a arte virar inline-block também que as
     duas caem na mesma linha, sem float e sem mexer no HTML. O h2 é bloco,
     então continua começando na linha de baixo. */
  .arte-frente, .selo-metodo {
    display: inline-block; float: none; vertical-align: middle;
    width: 26px; height: auto; margin: 0 8px 0 0;
  }
  .centro .arte-frente, .centro .selo-metodo { margin: 0 7px 0 0; }
  .arte-inline { width: 30px; height: 30px; margin: 2px 9px 0 0; }
  .arte-solta { width: 122px; margin-bottom: 4px; }

  /* ── 2 · CARD VIRA LINHA: ícone minúsculo à esquerda, texto à direita ──
     Some a linha inteira que o ícone ocupava acima do título, em todos os
     cards de uma vez. Sem :has() o card sem ícone ganharia uma calha vazia. */
  .cartao { padding: 13px 15px; border-radius: 15px; }
  .cartao:has(> .cartao-icone), .cartao:has(> .cartao-num) {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: 11px; align-items: start;
  }
  .cartao > .cartao-icone, .cartao > .cartao-num { grid-column: 1; grid-row: 1; }
  .cartao:has(> .cartao-icone) > :not(.cartao-icone) { grid-column: 2; }
  .cartao:has(> .cartao-num) > :not(.cartao-num) { grid-column: 2; }
  .cartao-icone { width: 30px; height: 30px; border-radius: 9px; margin: 0; place-content: center; }
  .cartao-icone svg { width: 16px; height: 16px; }
  .cartao-num { font-size: 1.15rem; margin: 0; width: 30px; text-align: center; line-height: 1.35; }
  .cartao h3 { font-size: 1rem; margin-bottom: 3px; }
  .cartao p, .passo p { font-size: .89rem; line-height: 1.42; }
  .cartao:hover { transform: none; }

  /* ficha de dor: a citação é o título do card, então ela puxa o olho */
  .cita { font-size: 1rem; line-height: 1.3; margin-bottom: 7px; }
  .pilar { font-size: .7rem; margin-top: 9px; padding-top: 7px; }

  /* ── 3 · HERO ── */
  .hero { padding-top: 88px; }
  .hero-sub { font-size: .96rem; margin: 12px auto 16px; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 9px; max-width: 400px; margin-inline: auto; }
  .hero-ctas .btn { width: 100%; }
  .centro .hero-ctas { margin-inline: auto; }
  .hero-foto { margin-top: 14px; padding: 0; }
  .hero-foto img { width: 80%; }
  /* o selo sai de cima da foto e vira uma linha só, sem quebra */
  .hero-selo {
    position: static; display: block; margin-top: 2px; animation: none;
    padding: 8px 14px; border-radius: 12px; font-size: .8rem; text-align: center;
  }
  .hero-selo strong { display: inline; font-size: .86rem; margin-right: 6px; }

  /* faixa de prova: 3 linhas de 2 alturas viraram 3 linhas de 1 */
  .faixa-prova > div { padding: 9px 0; }
  .faixa-prova strong { display: inline; font-size: .88rem; }
  .faixa-prova span { font-size: .84rem; }
  .faixa-prova strong::after { content: " ·"; color: var(--vermelho); }

  /* ── 4 · S.A.B.O.R em linhas ── */
  /* cinco letras têm que caber numa linha só no celular, senão a fileira quebra
     em 3+2 e deixa de parecer uma palavra */
  .sabor { margin-top: 20px; }
  .sabor-letras { gap: 7px; flex-wrap: nowrap; }
  .sabor-letra { width: auto; flex: 1 1 0; min-width: 0; border-radius: 14px; font-size: 1.35rem; }
  .sabor-letra[aria-selected="true"]::after { bottom: 9px; height: 2px; }
  .sabor-painel { margin-top: 18px; gap: 13px; padding: 20px 18px; border-radius: 22px; }
  .sabor-letra-grande { font-size: 1.5rem; }
  .sabor-painel p { font-size: .93rem; line-height: 1.55; }
  .bloco-fundador { margin-top: 26px; }

  /* ── 5 · ACELERADOR OPCIONAL: os dois cards viram uma faixa contínua ── */
  .secao-brasa .grade-2 {
    gap: 0; margin-top: 10px; position: relative;
    border: 1px solid rgba(223, 28, 48, .35); border-radius: 15px; overflow: hidden;
    background: linear-gradient(180deg, rgba(223, 28, 48, .1), var(--bg-3) 60%);
    padding-top: 28px;
  }
  .secao-brasa .grade-2::before {
    content: "Acelerador opcional"; position: absolute; top: 9px; left: 15px;
    font-family: var(--rotulo); font-size: .54rem; letter-spacing: .07em;
    text-transform: uppercase; color: var(--coral);
  }
  .secao-brasa .cartao-upsell {
    background: none; border: 0; border-radius: 0; padding: 10px 15px 12px; column-gap: 11px;
  }
  .secao-brasa .cartao-upsell + .cartao-upsell { border-top: 1px solid rgba(223, 28, 48, .26); }
  .secao-brasa .cartao-upsell .tag-extra { display: none; }
  .secao-brasa .cartao-upsell h3 { font-size: .97rem; }
  .secao-brasa .cartao-upsell p { font-size: .85rem; line-height: 1.36; }

  /* foto de apoio: nas frentes do método cada seção trazia uma ilustração de
     ~165px. Somadas davam quase uma tela inteira de enfeite entre um
     argumento e o outro. No celular elas saem e quem carrega a identidade
     visual é o marcador de 26px ao lado do título; no desktop continuam
     todas. A demo de busca não é enfeite, então fica. */
  .foto-apoio { display: none; }
  /* o contêiner some junto, senão sobra o vão da grade */
  .duas-fotos:has(.foto-apoio) { display: none; }
  .busca-demo { padding: 13px; border-radius: 16px; }
  .busca-barra { padding: 8px 13px; font-size: .82rem; margin-bottom: 10px; }
  .busca-lista { gap: 6px; }
  .busca-item { padding: 9px 11px; gap: 10px; border-radius: 12px; }
  .busca-pos { width: 23px; height: 23px; font-size: .82rem; }
  .busca-corpo strong { font-size: .89rem; }
  .busca-estrelas i { width: 13px; height: 13px; }
  .busca-demo-caixa { margin-top: 14px; }

  /* ── 6 · FOTOS: a régua é "tempero, não prato" ──
     Nenhuma foto passa de ~40% da tela. O acervo concentrado mora no
     /portfolio; aqui a foto só dá o clima e devolve o scroll. */
  .foto-larga { border-radius: 15px; max-height: 168px; object-fit: cover; }
  /* retrato do fundador: vira miniatura ao lado do texto, não bloco de 424px */
  .foto-retrato { width: 118px; max-height: none; border-radius: 14px; margin-bottom: 2px; }
  .hero-grade { gap: 16px; }

  /* ── 7 · MÉTRICAS, PASSOS, TABELA, FAQ ── */
  .metricas { grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 16px; }
  .metrica { padding: 11px 8px; border-radius: 14px; }
  .metrica strong { font-size: 1.3rem; }
  .metrica span { font-size: .72rem; margin-top: 3px; line-height: 1.25; }
  .metrica-era, .nota-pendente { font-size: .58rem; }
  .nota-pendente { margin-top: 7px; }

  .passos { gap: 9px; margin-top: 18px; }
  .passos-3col { margin-top: 16px; }
  .passo { gap: 11px; }
  .passo::before { min-width: 26px; width: 26px; height: 26px; border-radius: 8px; font-size: .82rem; }
  .passo strong { font-size: .95rem; }

  /* ── TABELA COMPARATIVA: sem arrasto lateral ──
     A tabela tem min-width 520px pra não espremer as três colunas. Num
     celular de 375 isso obrigava a arrastar de lado — e quem arrasta perde
     a primeira coluna, que é justamente o critério. No celular ela deixa de
     ser tabela e vira um cartão por critério, com os dois lados um sob o
     outro e o rótulo vindo do data-col. Nada de scroll horizontal. */
  .tabela-rolagem { margin-top: 16px; border: 0; border-radius: 0; overflow: visible; }
  .tabela-rolagem table { min-width: 0; display: block; background: none; }
  .tabela-rolagem thead { display: none; }
  .tabela-rolagem tbody { display: grid; gap: 8px; }
  .tabela-rolagem tr {
    display: block; background: var(--bg-3); border: 1px solid var(--borda);
    border-radius: 14px; padding: 11px 14px 12px;
  }
  .tabela-rolagem td { display: block; border: 0; padding: 0; }
  .tabela-rolagem td:first-child {
    font-family: var(--display); font-weight: 700; font-size: .95rem;
    color: var(--texto); letter-spacing: -.01em; margin-bottom: 8px;
  }
  .tabela-rolagem tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 12px; padding: 10px 13px 11px;
  }
  .tabela-rolagem td:first-child {
    grid-column: 1 / -1;
    font-family: var(--display); font-weight: 700; font-size: .92rem;
    color: var(--texto); letter-spacing: -.01em; margin-bottom: 7px;
  }
  .tabela-rolagem td[data-col] {
    font-size: .81rem; line-height: 1.35; color: rgba(255, 255, 255, .5);
    padding-top: 16px; position: relative;
  }
  .tabela-rolagem td[data-col]::before {
    content: attr(data-col); position: absolute; top: 0; left: 0;
    font-family: var(--rotulo); font-size: .52rem;
    letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .35);
  }
  .tabela-rolagem td.col-pepper {
    background: none; color: var(--texto);
    border-left: 1px solid rgba(223, 28, 48, .35); padding-left: 12px;
  }
  .tabela-rolagem td.col-pepper::before { color: var(--coral); left: 12px; }

  /* ── RETRATO DO FUNDADOR: texto ao lado da foto ──
     A foto e o texto são itens de grid diferentes, então float não junta os
     dois. Duas colunas resolvem: retrato estreito à esquerda, texto correndo
     à direita a partir da mesma linha do topo. */
  .hero-grade:has(.foto-retrato) {
    grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start;
  }
  .foto-retrato { width: 96px; }

  .sanfona { margin-top: 18px; gap: 7px; }
  .sanfona details { border-radius: 14px; }
  .sanfona summary { padding: 12px 52px 12px 15px; gap: 9px; }
  .sanfona summary h3 { font-size: .97rem; }
  .sanfona-num { font-size: .93rem; }
  .sanfona summary::after { width: 28px; height: 28px; right: 13px; font-size: 1.15rem; }
  .sanfona .sanfona-corpo { padding: 0 15px 14px; font-size: .89rem; line-height: 1.45; }

  .faq { gap: 7px; margin-top: 18px; }
  .faq details { border-radius: 14px; }
  .faq summary { padding: 12px 40px 12px 14px; font-size: .92rem; min-height: 44px; }
  .faq summary::after { right: 16px; font-size: 1.15rem; }
  .faq .faq-corpo { padding: 0 14px 13px; font-size: .88rem; line-height: 1.45; }

  /* ── 8 · FORMULÁRIO ── */
  .form-caixa { padding: 18px 15px; border-radius: 18px; }
  .campo { margin-bottom: 13px; }
  .campo label { font-size: .9rem; margin-bottom: 5px; }
  .campo input, .campo textarea { padding: 11px 13px; border-radius: 10px; font-size: 1rem; }

  /* ── 9 · PÁGINAS INTERNAS ── */
  .pagina-topo { padding: 92px 0 20px; }
  .artigo p, .artigo li { font-size: .95rem; line-height: 1.55; }
  .artigo h2 { margin: 28px 0 10px; }
  .artigo h3 { margin: 20px 0 8px; }
  .migalha { font-size: .8rem; margin-bottom: 12px; }
  .chamada-final .btn-solido { width: min(100%, 400px); }

  /* ── 10 · RODAPÉ: os links de menu viram chips ──
     Empilhados, os 12 links custavam 500px sozinhos. Em chips que quebram
     linha o mesmo menu fecha em três fileiras, e o alvo de toque continua
     nos 44px que a WCAG 2.5.5 pede. */
  .rodape { padding-top: 30px; }
  .rodape-grade { grid-template-columns: 1fr; gap: 16px; padding-bottom: 20px; }
  .rodape-titulo { font-size: .68rem; margin-bottom: 2px; }
  .rodape-marca img { width: 104px; height: 38px; }
  .rodape-marca p { font-size: .86rem; line-height: 1.45; }
  .rodape-nap { gap: 0; }
  .rodape-col { gap: 4px; }
  .rodape-col:not(.rodape-marca) { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .rodape-col:not(.rodape-marca) .rodape-titulo { flex: 1 0 100%; }
  .rodape-col:not(.rodape-marca) a {
    padding: 10px 13px; min-height: 44px; font-size: .84rem;
    border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
  }
  .rodape-nap a { padding: 6px 0; min-height: 40px; font-size: .87rem; }
  .rodape-base { padding-block: 13px; font-size: .76rem; gap: 4px; }
  .zap-flutua { width: 50px; height: 50px; right: 14px; bottom: 14px; }
  .zap-flutua svg { width: 23px; height: 23px; }
  .subir { width: 40px; height: 40px; right: 17px; bottom: 74px; }
  .subir svg { width: 17px; height: 17px; }
  .consenti.on ~ .subir { bottom: 162px; }

  /* ── 11 · PORTFÓLIO E MAPA ── */
  .portfolio-cliente { margin-top: 26px; }
  .mosaico { columns: 2 130px; gap: 7px; margin-top: 14px; }
  .mosaico img { border-radius: 10px; margin-bottom: 7px; }
  .geo-mapa { padding: 14px; border-radius: 16px; }
  .geo-grade { gap: 5px; } .geo-grade.g7 { gap: 4px; }
  .geo-bloco { gap: 18px; margin-top: 20px; }
}

/* telas muito estreitas */
@media (max-width: 360px) {
  .wrap { padding: 0 13px; }
}

/* ─────────── portfólio: mosaico por cliente ─────────── */
.portfolio-cliente { margin-top: 44px; }
.portfolio-cliente:first-child { margin-top: 0; }
.portfolio-cliente h2 { margin-bottom: 2px; }
.cliente-nota { color: var(--suave); font-size: .92rem; margin-bottom: 4px; }
.mosaico { columns: 3 240px; gap: 14px; margin-top: 18px; }
.mosaico img { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--borda); margin-bottom: 14px; break-inside: avoid; display: block; }
@media (max-width: 640px) {
  .portfolio-cliente { margin-top: 34px; }
  .mosaico { columns: 2 130px; gap: 8px; }
  .mosaico img { border-radius: 12px; margin-bottom: 8px; }
}

/* fotos de apoio mais discretas nas páginas de conteúdo: o acervo concentrado
   mora no /portfolio, o resto do site usa a foto como tempero, não como prato */
@media (min-width: 900px) {
  .banda-fotos { max-width: 1100px; margin-inline: auto; }
  .hero-grade .foto-larga { max-width: 460px; justify-self: center; }
}

/* ─────────── botão de fonte preferida do Google ───────────
   Fecha o artigo com o pedido de baixo compromisso: quem acabou de ler um guia
   útil é quem topa marcar a fonte. Não vai no topo nem na home: pedir isso a
   quem ainda não leu nada é queimar o pedido. */
.fonte-preferida {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin: 44px 0 0; padding: 22px 24px;
  background: var(--bg-3); border: 1px solid var(--borda); border-radius: var(--raio);
}
.fonte-preferida-txt { flex: 1 1 260px; margin: 0; color: var(--suave); font-size: .95rem; }
.fonte-preferida-txt strong { display: block; color: var(--texto); margin-bottom: 3px; }
.fonte-preferida .btn { flex: 0 0 auto; }
@media (max-width: 640px) {
  .fonte-preferida { margin-top: 30px; padding: 16px 15px; gap: 13px; border-radius: 16px; }
  .fonte-preferida-txt { font-size: .89rem; line-height: 1.45; }
  .fonte-preferida .btn { width: 100%; }
}