/* ==========================================================================
   Legacy — landing comercial (lojas de veículos)
   Identidade: identidade/design-guide.md da Legacy Digital.
   Preto #0A0A0A · amarelo #FDC600 · off-white #FAFAF7 · grafite #15161A.
   Sem sombra, quina reta, diagonal do logo como elemento gráfico.
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */

:root {
  --preto: #0A0A0A;
  --grafite: #131418;
  --grafite-2: #1B1D22;
  --amarelo: #FDC600;
  --branco: #FAFAF7;

  /* trocados dentro de .claro para inverter a seção inteira */
  --fundo: var(--preto);
  --tinta: var(--branco);
  --tinta-2: rgba(250, 250, 247, 0.66);
  --tinta-3: rgba(250, 250, 247, 0.40);
  --fio: rgba(250, 250, 247, 0.13);
  --fio-forte: rgba(250, 250, 247, 0.26);
  --superficie: rgba(250, 250, 247, 0.035);

  --gutter: clamp(20px, 5vw, 64px);
  --largura: 1280px;
  --secao: clamp(88px, 13vh, 168px);
  --header: 76px;

  --transicao: 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.claro {
  --fundo: var(--branco);
  --tinta: var(--preto);
  --tinta-2: rgba(10, 10, 10, 0.68);
  --tinta-3: rgba(10, 10, 10, 0.44);
  --fio: rgba(10, 10, 10, 0.14);
  --fio-forte: rgba(10, 10, 10, 0.30);
  --superficie: rgba(10, 10, 10, 0.035);
}

.grafite { --fundo: var(--grafite); }

.amarela {
  --fundo: var(--amarelo);
  --tinta: var(--preto);
  --tinta-2: rgba(10, 10, 10, 0.78);
  --tinta-3: rgba(10, 10, 10, 0.52);
  --fio: rgba(10, 10, 10, 0.20);
  --fio-forte: rgba(10, 10, 10, 0.38);
  --superficie: rgba(10, 10, 10, 0.05);
}

/* --- base --------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--preto);
  color: var(--branco);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 17px;
  font-weight: 450;
  line-height: 1.6;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
a:not([class]) { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--amarelo);
  outline-offset: 3px;
}
.amarela :focus-visible { outline-color: var(--preto); }

::selection { background: var(--amarelo); color: var(--preto); }

.pular {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--amarelo); color: var(--preto);
  padding: 14px 20px; font-weight: 800;
}
.pular:focus { left: 12px; top: 12px; }

.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

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

.secao {
  position: relative;
  background: var(--fundo);
  color: var(--tinta);
  padding: var(--secao) 0;
}

.env {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

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

.sobra {
  display: block;
  font-size: clamp(11px, 1.5vw, 13px);
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--amarelo);
}
.amarela .sobra, .claro .sobra--tinta { color: var(--tinta); }

.display {
  font-size: clamp(38px, 8.2vw, 104px);
  font-weight: 900;
  line-height: 0.93;
  letter-spacing: -0.042em;
  text-transform: uppercase;
  text-wrap: balance;
}

.display--gigante { font-size: clamp(42px, 10vw, 132px); }
.display--medio { font-size: clamp(32px, 5.6vw, 66px); }

.display em { font-style: normal; color: var(--amarelo); }
.amarela .display em { color: var(--branco); }

.sub {
  font-size: clamp(17px, 2.1vw, 23px);
  line-height: 1.45;
  font-weight: 500;
  color: var(--tinta);
  text-wrap: pretty;
}

.texto {
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.68;
  color: var(--tinta-2);
  text-wrap: pretty;
}

.medida { max-width: 58ch; }
.medida-curta { max-width: 44ch; }

.regua {
  width: 88px; height: 5px;
  background: var(--amarelo);
  border: 0;
  margin: 0;
}
.amarela .regua { background: var(--preto); }

/* cabeçalho de seção padrão */
.cabeca { display: grid; gap: 22px; margin-bottom: clamp(48px, 7vw, 84px); }
.cabeca .sub, .cabeca .texto { max-width: 52ch; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 18px 30px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: inherit;
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao),
              border-color var(--transicao), transform 220ms ease;
}

.btn--primario {
  background: var(--amarelo);
  color: var(--preto);
}
.btn--primario:hover { background: var(--branco); }

.amarela .btn--primario { background: var(--preto); color: var(--amarelo); }
.amarela .btn--primario:hover { background: var(--branco); color: var(--preto); }

.btn--linha {
  background: transparent;
  color: var(--tinta);
  border-color: var(--fio-forte);
}
.btn--linha:hover { border-color: var(--amarelo); color: var(--amarelo); }

.btn--grande { min-height: 68px; padding: 24px 44px; font-size: clamp(14px, 1.7vw, 17px); }

.btn:active { transform: translateY(1px); }

/* seta discreta do CTA secundário do hero */
.desce {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--tinta-3);
  transition: color var(--transicao);
}
.desce:hover { color: var(--amarelo); }
.desce span:last-child { transition: transform var(--transicao); }
.desce:hover span:last-child { transform: translateY(3px); }

/* --- header ------------------------------------------------------------- */

.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--header);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 380ms ease, border-color 380ms ease, backdrop-filter 380ms ease;
}

.topo.preso {
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--fio);
}

.topo .env { display: flex; align-items: center; gap: 28px; }

/* padding vertical dá os 44px de área de toque sem crescer o logo */
.marca { display: flex; align-items: center; margin-right: auto; padding: 9px 0; }
.marca img { height: 26px; width: auto; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font-size: 13px; font-weight: 650; letter-spacing: 0.06em;
  color: rgba(250, 250, 247, 0.70);
  transition: color var(--transicao);
}
.nav a:hover { color: var(--branco); }

.topo .btn { min-height: 44px; padding: 12px 22px; font-size: 12px; }

.menu-btn {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--fio);
  color: var(--branco); cursor: pointer; padding: 0;
}
.menu-btn span {
  display: block; width: 18px; height: 1.5px; background: currentColor;
  position: relative; transition: background 200ms ease;
}
.menu-btn span::before, .menu-btn span::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 1.5px;
  background: currentColor; transition: transform 300ms ease;
}
.menu-btn span::before { top: -6px; }
.menu-btn span::after { top: 6px; }
.menu-btn[aria-expanded='true'] span { background: transparent; }
.menu-btn[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded='true'] span::after { transform: translateY(-6px) rotate(-45deg); }

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

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header) + 48px) 0 clamp(40px, 6vh, 72px);
  background: var(--preto);
  overflow: hidden;
}

.hero__fundo {
  position: absolute; inset: 0; z-index: 0;
  background: var(--grafite);
}
.hero__fundo video, .hero__fundo img {
  width: 100%; height: 100%; object-fit: cover;
}
/* véu: garante leitura do texto sobre qualquer vídeo */
.hero__fundo::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.52) 34%, rgba(10,10,10,0.94) 88%),
    linear-gradient(94deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.35) 62%);
}

.hero .env { position: relative; z-index: 1; }

.hero__grade {
  display: grid;
  gap: clamp(34px, 5vw, 56px);
  align-items: end;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
}

.hero__texto { display: grid; gap: clamp(20px, 3vw, 30px); }
.hero__texto .sub { max-width: 30ch; }
.hero__texto .texto { max-width: 46ch; }

.hero h1 { margin-top: 6px; }

.hero__acoes {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 18px 26px; margin-top: 8px;
}

.micro {
  font-size: 13px;
  color: var(--tinta-3);
  letter-spacing: 0.02em;
}

/* Esteira DEMANDA → VELOCIDADE → CONVERSÃO → VENDA.
   Vertical: na coluna estreita do hero, na horizontal ela quebrava a linha e
   deixava seta órfã no fim. Em pé vira escada e ganha leitura. */
.esteira {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px;
  padding-top: 26px;
  border-top: 1px solid var(--fio);
}
.esteira .seta { transform: rotate(90deg); margin-left: 2px; line-height: 1; }
.esteira li {
  font-size: clamp(10px, 1.3vw, 12px);
  font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--tinta-3);
}
.esteira li:last-child { color: var(--amarelo); }
.esteira .seta { color: var(--fio-forte); letter-spacing: 0; font-weight: 400; }

/* coluna lateral do hero, vertical no desktop */
.hero__lado {
  display: grid; gap: 18px;
  padding-left: 26px;
  border-left: 1px solid var(--fio);
}
.hero__lado p { font-size: 15px; line-height: 1.55; color: var(--tinta-2); }
.hero__lado strong { color: var(--branco); font-weight: 700; }

/* --- placeholders de mídia --------------------------------------------- */
/* Visíveis e identificados de propósito: some quando entrar o material real. */

.ph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 28px 22px;
  text-align: center;
  background:
    repeating-linear-gradient(135deg,
      var(--superficie) 0 12px,
      transparent 12px 24px);
  border: 1px dashed var(--fio-forte);
  color: var(--tinta-3);
}
.ph::before {
  content: 'FOTO REAL';
  font-size: 10px; font-weight: 800; letter-spacing: 0.26em;
  color: var(--amarelo);
}
.ph[data-tipo='video']::before { content: 'VÍDEO REAL'; }
.ph[data-tipo='tela']::before { content: 'TELA DA ÁQUILA'; }
.ph[data-tipo='logo']::before { content: 'LOGO DO CLIENTE'; }
.ph span {
  font-size: 14px; line-height: 1.45; max-width: 30ch;
  color: var(--tinta-2);
}
.amarela .ph::before { color: var(--preto); }

/* --- números ------------------------------------------------------------ */

.numeros__grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--fio);
}
.numeros__grade > div {
  padding: clamp(30px, 4vw, 48px) clamp(18px, 2.4vw, 32px) clamp(24px, 3vw, 36px) 0;
  border-right: 1px solid var(--fio);
}
.numeros__grade > div:last-child { border-right: 0; }

.numero {
  display: block;
  font-size: clamp(40px, 6.4vw, 82px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--amarelo);
  font-variant-numeric: tabular-nums;
}
.numero-rotulo {
  display: block;
  margin-top: 14px;
  font-size: clamp(11px, 1.3vw, 12px);
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

.vazio { color: var(--tinta-3); }

/* faixa de logos */
.logos {
  margin-top: clamp(48px, 6vw, 76px);
  padding-top: 32px;
  border-top: 1px solid var(--fio);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.logos__trilho {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
  width: max-content;
  animation: desliza 46s linear infinite;
}
.logos:hover .logos__trilho { animation-play-state: paused; }
/* Os logos vêm com fundo chapado do próprio cliente (preto, vermelho, azul).
   Ladrilho quadrado com `contain` resolve: quem é quadrado preenche a borda
   inteira, e o único deitado (Placidino) sobra em preto — que já é o fundo
   dele. Sem recorte, sem fundo brigando com fundo. */
.logos__item {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: clamp(104px, 13vw, 132px);
  height: clamp(104px, 13vw, 132px);
  background: var(--preto);
  border: 1px solid var(--fio);
  overflow: hidden;
  filter: grayscale(1);
  opacity: 0.62;
  transition: opacity var(--transicao), filter var(--transicao);
}
.logos__item img { width: 100%; height: 100%; object-fit: contain; }
.logos:hover .logos__item { opacity: 1; filter: grayscale(0); }

@keyframes desliza {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* --- cases -------------------------------------------------------------- */

.case {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(40px, 5vw, 64px) 0;
  border-top: 1px solid var(--fio);
}
.case:last-of-type { border-bottom: 1px solid var(--fio); }

.case__id {
  font-size: 11px; font-weight: 800; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--amarelo);
  margin-bottom: 18px;
}
.case__loja { display: grid; gap: 14px; align-content: start; }
.case__loja .ph { min-height: 132px; }
.case__cidade {
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tinta-3);
}

.case__corpo { display: grid; gap: 26px; align-content: start; }

.case__bloco h3 {
  font-size: 11px; font-weight: 800; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--tinta-3);
  margin-bottom: 10px;
}

/* 2x2 em vez de 4 colunas: "R$ XXX.XXX" não cabe em um quarto da coluna sem
   quebrar no meio do número. */
.case__placar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--fio);
  border: 1px solid var(--fio);
}
.case__placar > div {
  background: var(--fundo);
  padding: 22px 18px;
}
.case__placar .numero { font-size: clamp(24px, 3.2vw, 36px); white-space: nowrap; }
.case__placar .numero-rotulo { margin-top: 8px; font-size: 10px; }

.depo-curto {
  border-left: 3px solid var(--amarelo);
  padding-left: 22px;
  font-size: clamp(16px, 1.9vw, 20px);
  line-height: 1.5;
  font-weight: 500;
  font-style: italic;
  color: var(--tinta);
}
.depo-curto footer {
  margin-top: 12px;
  font-size: 12px; font-style: normal; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-3);
}

/* --- placar de vendas reais --------------------------------------------- */

.vendas { border-top: 1px solid var(--fio); }

.venda {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 28px auto;
  align-items: center;
  gap: clamp(14px, 2.4vw, 34px);
  padding: clamp(18px, 2.4vw, 26px) 0;
  border-bottom: 1px solid var(--fio);
  transition: background var(--transicao);
}
.venda:hover { background: var(--superficie); }

.venda__loja {
  display: grid; gap: 3px;
  font-size: clamp(15px, 1.9vw, 19px);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.venda__loja em {
  font-style: normal;
  font-size: clamp(12px, 1.4vw, 13px);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.venda__inv, .venda__total { display: grid; gap: 2px; text-align: right; }
.venda__inv b, .venda__total b {
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.venda__inv b { font-size: clamp(15px, 1.9vw, 20px); color: var(--tinta-2); }
.venda__total b { font-size: clamp(19px, 2.8vw, 30px); color: var(--amarelo); }
.venda__inv i, .venda__total i {
  font-style: normal;
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--tinta-3);
}

.venda__seta {
  justify-self: center;
  font-size: clamp(14px, 2vw, 20px);
  color: var(--fio-forte);
}

/* fecho amarelo com a soma */
.vendas__soma {
  margin-top: clamp(34px, 4.4vw, 52px);
  padding: clamp(26px, 3.6vw, 44px);
  background: var(--amarelo);
  color: var(--preto);
}
.vendas__soma-rotulo {
  font-size: 11px; font-weight: 800; letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.62;
  margin-bottom: 14px;
}
.vendas__soma-conta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  font-size: clamp(14px, 1.8vw, 18px);
  font-weight: 700;
  line-height: 1.2;
}
.vendas__soma-conta span, .vendas__soma-conta em {
  font-style: normal;
  font-weight: 900;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.vendas__soma-conta span { font-size: clamp(22px, 3.4vw, 40px); }
.vendas__soma-conta em { font-size: clamp(28px, 5.4vw, 66px); }
.vendas__soma-conta .venda__seta { color: rgba(10, 10, 10, 0.4); }

/* --- depoimentos em texto ----------------------------------------------- */

.falas {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--fio);
  border: 1px solid var(--fio);
}
/* três em cima, duas embaixo — a de baixo à esquerda ganha o dobro de
   largura porque é a fala mais forte que temos. */
.falas > .fala { grid-column: span 2; }
.falas > .fala--destaque { grid-column: span 4; }

.fala--destaque blockquote { font-size: clamp(20px, 3vw, 32px); line-height: 1.3; }
.fala {
  background: var(--fundo);
  padding: clamp(28px, 3.4vw, 40px);
  display: grid; gap: 20px; align-content: start;
}
.fala blockquote {
  margin: 0;
  font-size: clamp(17px, 2.1vw, 21px);
  line-height: 1.42;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--tinta);
}
.fala__aspas {
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 900;
  line-height: 0.6;
  color: var(--amarelo);
}
.fala figcaption {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--fio);
  font-size: 12px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

/* --- funil (quebra de crença) ------------------------------------------ */

.funil {
  display: grid;
  gap: 1px;
  margin-top: clamp(40px, 5vw, 64px);
  background: var(--fio);
  border: 1px solid var(--fio);
}
.funil li {
  position: relative;
  background: var(--fundo);
  padding: 20px clamp(20px, 3vw, 34px);
  display: flex; align-items: center; gap: 20px;
  font-size: clamp(14px, 1.8vw, 19px);
  font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
}
.funil li::before {
  content: attr(data-n);
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--amarelo);
  min-width: 26px;
}
/* Barra que encurta a cada etapa: mostra a perda sem inventar número.
   Ancorada à esquerda de propósito — crescendo da direita, o desenho lia ao
   contrário, como se o funil aumentasse. */
.funil li::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--w, 50%);
  background: rgba(253, 198, 0, 0.11);
  border-right: 1px solid rgba(253, 198, 0, 0.30);
  z-index: 0;
}
.funil li > * { position: relative; z-index: 1; }

.alerta {
  margin-top: clamp(32px, 4vw, 48px);
  padding: clamp(26px, 3.4vw, 40px);
  background: var(--amarelo);
  color: var(--preto);
  font-size: clamp(18px, 2.6vw, 30px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  max-width: 24ch;
}

/* --- sistema (3 pilares) ------------------------------------------------ */

.pilar {
  display: grid;
  grid-template-columns: clamp(60px, 8vw, 120px) minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(20px, 3.4vw, 48px);
  padding: clamp(36px, 4.6vw, 58px) 0;
  border-top: 1px solid var(--fio);
  align-items: start;
}
.pilar:last-of-type { border-bottom: 1px solid var(--fio); }

.pilar__n {
  font-size: clamp(30px, 4.6vw, 58px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--fio-forte);
  transition: color var(--transicao);
}
.pilar:hover .pilar__n { color: var(--amarelo); }

.pilar h3 {
  font-size: clamp(26px, 3.8vw, 46px);
  font-weight: 900; line-height: 0.96; letter-spacing: -0.035em;
  text-transform: uppercase;
}
.pilar__frase {
  margin-top: 14px;
  font-size: clamp(16px, 1.9vw, 20px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--tinta);
}
.pilar__lado { display: grid; gap: 18px; align-content: start; }

.etiqueta {
  display: inline-flex;
  align-items: center;
  align-self: start;
  justify-self: start;  /* sem isso a pílula estica na largura da coluna */
  padding: 9px 16px;
  border: 1px solid var(--amarelo);
  color: var(--amarelo);
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 100px;
}

/* fecho amarelo do sistema */
.fecho {
  margin-top: clamp(48px, 6vw, 80px);
  padding: clamp(40px, 6vw, 82px) clamp(26px, 4vw, 60px);
  background: var(--amarelo);
  color: var(--preto);
  text-align: center;
}
.fecho__fluxo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px 20px;
  font-size: clamp(13px, 2.2vw, 22px);
  font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
}
.fecho__fluxo .seta { opacity: 0.45; }
.fecho__regua {
  width: 1px; height: clamp(32px, 5vw, 56px);
  background: rgba(10, 10, 10, 0.4);
  margin: clamp(20px, 3vw, 32px) auto;
}
.fecho__final {
  font-size: clamp(26px, 6vw, 68px);
  font-weight: 900; line-height: 0.96; letter-spacing: -0.04em;
  text-transform: uppercase;
}

/* --- áquila ------------------------------------------------------------- */

.aquila__topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(44px, 6vw, 72px);
}
.aquila__eco {
  display: grid; gap: 8px;
  font-size: clamp(17px, 2.2vw, 24px);
  font-weight: 600;
  line-height: 1.35;
}
.aquila__eco span:nth-child(2) { color: var(--tinta-2); padding-left: 1.4em; }
.aquila__eco span:nth-child(3) { color: var(--tinta-3); padding-left: 2.8em; }

.aquila__demo {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: center;
}

/* moldura de celular */
.fone {
  width: min(320px, 100%);
  margin: 0 auto;
  aspect-ratio: 9 / 16.4;   /* mais curto: a conversa fica ancorada embaixo e sobrava vazio */
  padding: 10px;
  border: 1px solid var(--fio-forte);
  border-radius: 34px;
  background: var(--grafite-2);
}
.fone__tela {
  height: 100%;
  border-radius: 25px;
  background: var(--preto);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.fone__barra {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--fio);
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--tinta-3);
}
.fone__barra b { color: var(--amarelo); font-weight: 800; }
.fone__conversa {
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 10px; padding: 16px; overflow: hidden;
}
.bolha {
  max-width: 82%;
  padding: 11px 14px;
  font-size: 13.5px;
  line-height: 1.42;
  border-radius: 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 420ms ease, transform 420ms ease;
}
.bolha.vista { opacity: 1; transform: none; }
.bolha--cliente {
  align-self: flex-start;
  background: var(--grafite-2);
  color: var(--branco);
  border-bottom-left-radius: 4px;
}
.bolha--ia {
  align-self: flex-end;
  background: var(--amarelo);
  color: var(--preto);
  font-weight: 550;
  border-bottom-right-radius: 4px;
}
.bolha__hora {
  display: block; margin-top: 5px;
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0.55;
}
.fone__nota {
  margin-top: 14px;
  text-align: center;
  font-size: 11px;
  color: var(--tinta-3);
}

.recursos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--fio);
  border: 1px solid var(--fio);
}
.recursos > div { background: var(--fundo); padding: clamp(22px, 2.8vw, 32px); }
.recursos h3 {
  font-size: 12px; font-weight: 800; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--amarelo);
  margin-bottom: 10px;
}
.recursos p { font-size: 15px; line-height: 1.55; color: var(--tinta-2); }

.aquila__assinatura {
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(36px, 4vw, 52px);
  border-top: 1px solid var(--fio);
  text-align: center;
}

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

.versus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--fio);
  border: 1px solid var(--fio);
  margin-top: clamp(40px, 5vw, 64px);
}
.versus__lado { background: var(--fundo); padding: clamp(26px, 3.4vw, 44px); }
.versus__lado--legacy { background: var(--grafite-2); }
.claro .versus__lado--legacy { background: var(--preto); color: var(--branco); }

.versus__titulo {
  font-size: 12px; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--tinta-3);
  padding-bottom: 20px; margin-bottom: 24px;
  border-bottom: 1px solid var(--fio);
}
.versus__lado--legacy .versus__titulo { color: var(--amarelo); }
.claro .versus__lado--legacy .versus__titulo { border-bottom-color: rgba(250,250,247,0.13); }

.fluxo { display: grid; gap: 0; }
.fluxo li {
  padding: 13px 0;
  font-size: clamp(14px, 1.7vw, 17px);
  font-weight: 600;
  color: var(--tinta-2);
  border-bottom: 1px solid var(--fio);
}
.claro .versus__lado--legacy .fluxo li { border-bottom-color: rgba(250,250,247,0.10); color: rgba(250,250,247,0.66); }
.fluxo li:last-child {
  border-bottom: 0;
  margin-top: 8px;
  padding-top: 20px;
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fluxo--perde li:last-child { color: var(--tinta-3); }
.fluxo--ganha li:last-child { color: var(--amarelo); }

/* --- diagnóstico (5 dimensões) ------------------------------------------ */

.dimensoes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--fio);
  border: 1px solid var(--fio);
  margin-bottom: clamp(36px, 4vw, 52px);
}
.dimensoes > div {
  background: var(--fundo);
  padding: clamp(24px, 2.6vw, 32px) clamp(18px, 2vw, 26px);
  display: grid; gap: 12px; align-content: start;
}
.dimensoes h3 {
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
}
.dimensoes p { font-size: 14.5px; line-height: 1.5; color: var(--tinta-2); }
.dimensoes .pilar__n { font-size: clamp(20px, 2.4vw, 28px); }

/* --- qualificação ------------------------------------------------------- */

.qualifica__grade {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}
.criterios { display: grid; }
.criterios li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--fio);
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.5;
  color: var(--tinta);
}
.criterios li::before {
  content: '';
  width: 14px; height: 8px;
  margin-top: 8px;
  border-left: 2px solid var(--amarelo);
  border-bottom: 2px solid var(--amarelo);
  transform: rotate(-45deg);
}

/* --- founder ------------------------------------------------------------ */

.founder__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.founder__texto { display: grid; gap: 24px; }
.founder__retrato .ph { min-height: clamp(360px, 52vh, 560px); }

.assinatura {
  display: grid; gap: 4px;
  padding-top: 24px;
  border-top: 1px solid var(--fio);
}
.assinatura strong {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
}
.assinatura span { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-3); }

.mosaico {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: clamp(40px, 5vw, 64px);
}
.mosaico .ph { min-height: 168px; }
.mosaico .ph:nth-child(1) { grid-column: span 2; }
.mosaico .ph:nth-child(6) { grid-column: span 2; }

.lema {
  margin-top: clamp(40px, 5vw, 64px);
  display: flex; flex-wrap: wrap; gap: 10px 32px;
  padding-top: 30px;
  border-top: 1px solid var(--fio);
  font-size: clamp(14px, 2.2vw, 22px);
  font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--tinta-3);
}
.lema span:last-child { color: var(--amarelo); }

/* --- timeline ----------------------------------------------------------- */

.passos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--fio);
  border-top: 1px solid var(--fio);
}
.passos > li {
  background: var(--fundo);
  padding: clamp(28px, 3.4vw, 44px) clamp(20px, 2.4vw, 30px) clamp(32px, 4vw, 48px);
  display: grid; gap: 14px; align-content: start;
  position: relative;
}
.passos > li::before {
  content: '';
  position: absolute; top: -1px; left: 0;
  width: 0; height: 3px;
  background: var(--amarelo);
  transition: width 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.passos > li.vista::before { width: 100%; }
.passos h3 {
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1.25;
}

/* --- depoimentos -------------------------------------------------------- */

.depos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
}
.depo { display: grid; gap: 16px; align-content: start; }
.depo__midia { position: relative; }
.depo__midia .ph { min-height: clamp(300px, 42vh, 420px); }
.depo__play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px;
  display: grid; place-items: center;
  background: var(--amarelo); color: var(--preto);
  border: 0; border-radius: 50%;
  font-size: 17px; cursor: pointer;
  transition: transform var(--transicao);
}
.depo__play:hover { transform: translate(-50%, -50%) scale(1.08); }
.depo__quem strong { display: block; font-size: 16px; font-weight: 800; }
.depo__quem span { display: block; font-size: 13px; color: var(--tinta-3); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; }
.depo__contexto { font-size: 14.5px; color: var(--tinta-2); margin-top: 10px; }

.aviso-vazio {
  padding: clamp(30px, 4vw, 46px);
  border: 1px dashed var(--fio-forte);
  color: var(--tinta-2);
  font-size: 15px;
  line-height: 1.6;
}
.aviso-vazio strong { color: var(--amarelo); }

/* --- formulário --------------------------------------------------------- */

.form-secao .env {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
.form-lado { display: grid; gap: 26px; align-content: start; position: sticky; top: calc(var(--header) + 32px); }

/* A headline desta seção divide a linha com o formulário: precisa caber na
   coluna. Sem isso, "OPORTUNIDADES?" estoura e cai por cima dos campos. */
.form-secao .display {
  font-size: clamp(30px, 3.7vw, 56px);
  overflow-wrap: break-word;
}

.form { display: grid; gap: 22px; }
.form[hidden] { display: none; }   /* sem isso o display:grid vence o atributo hidden */

.campo { display: grid; gap: 8px; }
.campo > label, .grupo > legend {
  font-size: 12px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tinta-2);
  padding: 0;
}
.campo .pista { font-size: 12.5px; color: var(--tinta-3); letter-spacing: 0; text-transform: none; font-weight: 500; }

.campo input, .campo select {
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 16px; /* 16px evita zoom automático no iOS */
  font-weight: 500;
  color: var(--tinta);
  background: transparent;
  border: 1px solid var(--fio-forte);
  border-radius: 0;
  transition: border-color var(--transicao), background var(--transicao);
  appearance: none;
}
.campo select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}
.campo select option { background: var(--preto); color: var(--branco); }
.amarela .campo select option { background: var(--branco); color: var(--preto); }

.campo input::placeholder { color: var(--tinta-3); }
.campo input:focus, .campo select:focus { border-color: var(--tinta); background: var(--superficie); }

.campo input[aria-invalid='true'], .campo select[aria-invalid='true'] {
  border-color: #B00020;
  border-width: 2px;
}
.amarela .campo input[aria-invalid='true'], .amarela .campo select[aria-invalid='true'] { border-color: #7A0016; }

.erro {
  font-size: 13px; font-weight: 650;
  color: #7A0016;
  min-height: 0;
}
.claro .erro, .secao:not(.amarela) .erro { color: #FF6B6B; }

.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tripla { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }

.grupo {
  border: 0; padding: 0; margin: 0;
  display: grid; gap: 10px;
}
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao {
  position: relative;
  display: inline-flex;
}
.opcao input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.opcao span {
  display: inline-flex; align-items: center;
  min-height: 46px;
  padding: 11px 18px;
  border: 1px solid var(--fio-forte);
  font-size: 14px; font-weight: 650;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.opcao input:checked + span {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--fundo);
}
.opcao input:focus-visible + span { outline: 2px solid var(--tinta); outline-offset: 2px; }
.opcao:hover span { border-color: var(--tinta); }

.condicional[hidden] { display: none; }

.form__envio { display: grid; gap: 14px; margin-top: 8px; }
.form__envio .btn { width: 100%; }
.btn[aria-busy='true'] { opacity: 0.7; pointer-events: none; }

.form__estado {
  padding: 18px 20px;
  border: 1px solid var(--fio-forte);
  font-size: 15px;
  line-height: 1.55;
}
.form__estado[hidden] { display: none; }
.form__estado--ok { background: var(--preto); color: var(--branco); border-color: var(--preto); }
.form__estado--erro { border-color: #7A0016; color: #7A0016; }

/* Confirmação de envio: ocupa o lugar do formulário, em bloco preto sobre o
   amarelo, para não restar dúvida de que a solicitação entrou. */
.recebido {
  display: grid;
  gap: 20px;
  justify-items: start;
  padding: clamp(30px, 4vw, 48px);
  background: var(--preto);
  color: var(--branco);
}
.recebido[hidden] { display: none; }
.recebido .texto { color: rgba(250, 250, 247, 0.72); }
.recebido .regua { background: var(--amarelo); }
.recebido__selo {
  font-size: 11px; font-weight: 800; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--amarelo);
}
.recebido__protocolo {
  font-size: 13px; letter-spacing: 0.1em;
  color: rgba(250, 250, 247, 0.52);
  font-variant-numeric: tabular-nums;
}
.recebido__protocolo[hidden] { display: none; }
.recebido .btn--linha { color: var(--branco); border-color: rgba(250,250,247,0.3); }
.recebido .btn--linha:hover { border-color: var(--amarelo); color: var(--amarelo); }
.recebido [hidden] { display: none; }

/* --- FAQ ---------------------------------------------------------------- */

.faq { border-top: 1px solid var(--fio); }
.faq details { border-bottom: 1px solid var(--fio); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(22px, 2.6vw, 30px) 0;
  font-size: clamp(16px, 2vw, 21px);
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: 0 0 auto;
  width: 13px; height: 13px;
  border-right: 2px solid var(--amarelo);
  border-bottom: 2px solid var(--amarelo);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 320ms ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq .resposta {
  padding: 0 0 clamp(24px, 2.8vw, 32px);
  max-width: 68ch;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.65;
  color: var(--tinta-2);
}

/* --- CTA final ---------------------------------------------------------- */

.final { text-align: center; }
.final .env { display: grid; gap: clamp(28px, 4vw, 44px); justify-items: center; }
.final .sub { max-width: 36ch; }
.final__pergunta {
  font-size: clamp(17px, 2.4vw, 26px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--amarelo);
  max-width: 24ch;
}
.final__marca {
  margin-top: clamp(30px, 4vw, 50px);
  padding-top: clamp(30px, 4vw, 44px);
  border-top: 1px solid var(--fio);
  width: 100%;
  display: grid; gap: 18px; justify-items: center;
}
.final__marca img { height: 30px; }
.final__lema {
  font-size: clamp(11px, 1.5vw, 13px);
  font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--tinta-3);
  line-height: 2;
}

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

.rodape {
  background: var(--preto);
  border-top: 1px solid var(--fio);
  padding: 44px 0 calc(44px + env(safe-area-inset-bottom));
}
.rodape .env {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px;
}
.rodape img { height: 20px; margin-right: auto; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 18px 28px; }
.rodape a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 13px; color: rgba(250, 250, 247, 0.58);
  transition: color var(--transicao);
}
.rodape a:hover { color: var(--amarelo); }
.rodape small { display: block; width: 100%; font-size: 12px; color: rgba(250, 250, 247, 0.34); }

/* --- CTA fixo no celular ------------------------------------------------ */

.sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  display: none;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--fio);
  transform: translateY(105%);
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sticky .btn { width: 100%; }
.sticky.aparece { transform: none; }

/* --- páginas de documento (política, termos) ---------------------------- */

.doc { padding-top: calc(var(--header) + clamp(48px, 8vh, 96px)); }
.doc .env { max-width: 780px; }

.doc__volta {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tinta-3); transition: color var(--transicao);
}
.doc__volta:hover { color: var(--amarelo); }

.doc h1 { margin: 24px 0 18px; }
.doc__data {
  font-size: 13px; letter-spacing: 0.08em; color: var(--tinta-3);
  padding-bottom: 28px; margin-bottom: 40px; border-bottom: 1px solid var(--fio);
}

.doc h2 {
  margin: clamp(40px, 5vw, 58px) 0 16px;
  font-size: clamp(19px, 2.4vw, 25px);
  font-weight: 800; letter-spacing: -0.02em;
}
.doc h3 {
  margin: 28px 0 10px;
  font-size: clamp(15px, 1.8vw, 17px);
  font-weight: 800; letter-spacing: 0.04em;
}
.doc p, .doc li {
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.7;
  color: var(--tinta-2);
}
.doc p + p { margin-top: 14px; }
.doc strong { color: var(--tinta); font-weight: 700; }

.doc ul, .doc ol { margin: 14px 0; padding-left: 0; }
.doc li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
}
.doc ul li::before {
  content: ''; position: absolute; left: 4px; top: 12px;
  width: 6px; height: 6px; background: var(--amarelo);
}
.doc ol { counter-reset: item; }
.doc ol li::before {
  counter-increment: item; content: counter(item) '.';
  position: absolute; left: 0; top: 0;
  font-weight: 800; color: var(--amarelo);
}

.doc table {
  width: 100%; border-collapse: collapse; margin: 20px 0;
  font-size: clamp(14px, 1.6vw, 15.5px);
}
.doc th, .doc td {
  text-align: left; padding: 13px 14px;
  border: 1px solid var(--fio); vertical-align: top;
  color: var(--tinta-2);
}
.doc th {
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tinta);
}
.doc .rolavel { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.doc__caixa {
  margin: 32px 0;
  padding: clamp(22px, 3vw, 30px);
  border-left: 3px solid var(--amarelo);
  background: var(--superficie);
}
.doc__caixa p { color: var(--tinta); }

/* Link dentro de texto corrido: aumenta a área de toque sem abrir a entrelinha
   do parágrafo (o padding vertical não empurra as linhas vizinhas). */
.doc a {
  color: var(--amarelo);
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
}

/* --- aviso de cookies --------------------------------------------------- */

.cookies {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  padding: 20px var(--gutter) calc(20px + env(safe-area-inset-bottom));
  background: rgba(10, 10, 10, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--fio);
  transform: translateY(105%);
  transition: transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cookies.aparece { transform: none; }
.cookies[hidden] { display: none; }

.cookies__caixa {
  max-width: var(--largura); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
}
.cookies p {
  flex: 1 1 340px;
  font-size: 14px; line-height: 1.55;
  color: rgba(250, 250, 247, 0.72);
}
/* Link dentro do aviso: área de toque de 44px sem abrir a entrelinha do texto. */
.cookies a {
  color: var(--amarelo);
  display: inline-block;
  padding: 13px 0;
  margin: -13px 0;
}
.cookies__acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.cookies .btn { min-height: 46px; padding: 12px 22px; font-size: 12px; }

@media (max-width: 640px) {
  .cookies__acoes { width: 100%; }
  .cookies__acoes .btn { flex: 1 1 140px; }
}

/* --- reveal ------------------------------------------------------------- */

.rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 780ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 780ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rv.vista { opacity: 1; transform: none; }
.rv[data-atraso='1'] { transition-delay: 90ms; }
.rv[data-atraso='2'] { transition-delay: 180ms; }
.rv[data-atraso='3'] { transition-delay: 270ms; }
.rv[data-atraso='4'] { transition-delay: 360ms; }

/* ==========================================================================
   RESPONSIVO — mobile é prioridade
   ========================================================================== */

@media (max-width: 1080px) {
  .numeros__grade { grid-template-columns: repeat(2, 1fr); }
  .numeros__grade > div:nth-child(2n) { border-right: 0; }
  .numeros__grade > div:nth-child(n+3) { border-top: 1px solid var(--fio); }
  .dimensoes { grid-template-columns: repeat(2, 1fr); }
  .dimensoes > div:last-child { grid-column: 1 / -1; }
  .passos { grid-template-columns: repeat(2, 1fr); }
  .depos { grid-template-columns: repeat(2, 1fr); }
  .falas { grid-template-columns: repeat(2, 1fr); }
  .falas > .fala, .falas > .fala--destaque { grid-column: span 1; }
  .falas > .fala--destaque { grid-column: span 2; }
  .mosaico { grid-template-columns: repeat(3, 1fr); }
  .mosaico .ph:nth-child(1), .mosaico .ph:nth-child(6) { grid-column: auto; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }

  .topo.aberto {
    height: auto;
    background: rgba(10, 10, 10, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom-color: var(--fio);
  }
  .topo.aberto .env { flex-wrap: wrap; padding-top: 0; padding-bottom: 22px; }
  .topo.aberto .marca, .topo.aberto .menu-btn { height: var(--header); align-self: center; }
  .topo.aberto .nav {
    display: grid;
    width: 100%;
    gap: 2px;
    order: 3;
    padding-top: 10px;
    border-top: 1px solid var(--fio);
  }
  .topo.aberto .nav a { padding: 15px 0; font-size: 16px; border-bottom: 1px solid var(--fio); }
  .topo.aberto .nav a:last-child { border-bottom: 0; }
  .topo .btn--primario { display: none; }
  .topo.aberto .btn--primario { display: inline-flex; order: 4; width: 100%; margin-top: 12px; min-height: 54px; }

  .hero__grade { grid-template-columns: 1fr; }
  .hero__lado { padding-left: 0; padding-top: 24px; border-left: 0; border-top: 1px solid var(--fio); }

  .case { grid-template-columns: 1fr; }
  .pilar { grid-template-columns: 52px 1fr; }
  .pilar__lado { grid-column: 2; }
  .aquila__topo, .aquila__demo, .founder__grade, .qualifica__grade { grid-template-columns: 1fr; }
  .form-secao .env { grid-template-columns: 1fr; }
  .form-lado { position: static; }
  .case__placar { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  :root { --secao: clamp(64px, 9vh, 96px); }

  .hero { min-height: 92svh; align-items: center; }
  .hero__acoes { flex-direction: column; align-items: stretch; }
  .hero__acoes .btn { width: 100%; }
  .hero__acoes .desce { justify-content: center; padding: 8px 0; }

  .numeros__grade > div { padding-right: 16px; }
  .recursos, .versus, .depos, .passos, .falas { grid-template-columns: 1fr; }
  .falas > .fala, .falas > .fala--destaque { grid-column: span 1; }

  /* O placar vira duas linhas: loja em cima, a conta embaixo. */
  .venda {
    grid-template-columns: auto 22px auto;
    grid-template-areas: 'loja loja loja' 'inv seta total';
    gap: 12px 10px;
  }
  .venda__loja { grid-area: loja; }
  .venda__inv { grid-area: inv; text-align: left; }
  .venda__seta { grid-area: seta; }
  .venda__total { grid-area: total; }
  .versus__lado--legacy { border-top: 1px solid var(--fio); }
  .dimensoes { grid-template-columns: 1fr; }
  .dimensoes > div:last-child { grid-column: auto; }
  .mosaico { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .mosaico .ph { min-height: 132px; }
  .dupla, .tripla { grid-template-columns: 1fr; }

  .funil li { font-size: 13px; letter-spacing: 0.08em; gap: 14px; padding: 16px 18px; }
  .alerta { max-width: none; }
  .fecho__fluxo { flex-direction: column; gap: 8px; }
  .fecho__fluxo .seta { transform: rotate(90deg); }

  .depo-curto { padding-left: 16px; }
  .lema { gap: 6px 20px; }

  /* espaço para o CTA fixo não cobrir o fim da página */
  .rodape { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

@media (max-width: 380px) {
  .esteira li { font-size: 9.5px; letter-spacing: 0.14em; }
  .btn { padding: 16px 20px; letter-spacing: 0.05em; }
}

/* --- impressão ---------------------------------------------------------- */

@media print {
  .topo, .sticky, .logos { display: none; }
  .secao { padding: 24px 0; }
  body { background: #fff; color: #000; }
}

/* --- acessibilidade: movimento ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .bolha { opacity: 1; transform: none; }
  .logos__trilho { animation: none; }
  .passos > li::before { width: 100%; }
}