/* ===== Design tokens — Decola Marca v1.0 (mesmo sistema das outras LPs) ===== */
:root {
  --color-brand-primary: #F58634;
  --color-brand-primary-hover: #ff9950;
  --color-brand-dark: #0F0F11;
  --color-brand-light: #FFFFFF;
  --color-surface-dark: #18181B;
  --color-surface-light: #F4F4F5;

  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --angle: 18deg;
  --radius-sm: 8px;
  --radius-lg: 14px;
  --shadow-elevate: 0 12px 32px rgba(0,0,0,0.25);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --container-w: 760px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-brand-dark);
  background: var(--color-brand-light);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; }

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

a { text-decoration: none; color: inherit; }

/* <source> é metadado, não conteúdo. Em contêiner flex ou grid ele já foi
   promovido a item de layout e desmontou o alinhamento (aconteceu no site, na
   página /sobre/). Esconder é a trava barata. */
picture > source { display: none; }

/* ===== Progress bar ===== */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--color-brand-primary);
  z-index: 1000;
  transition: width 0.1s linear;
}

/* ===== Header minimalista ===== */
.site-header {
  background: var(--color-brand-dark);
  padding: 16px 0;
}
.site-header-inner {
  display: flex;
  justify-content: center;
  align-items: center;
}
.site-header-logo { width: 132px; height: auto; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  font-weight: 800;
  font-size: 1.05rem;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s var(--ease), scale 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-brand-primary);
  color: var(--color-brand-dark);
}
/* O CTA cresce ao ser tocado/apontado. Duas notas que evitam retrabalho:
   1) Cresce com a propriedade "scale", NÃO com "transform: scale()". O botão do
      hero tem .btn-magnetic, que escreve transform inline pra seguir o cursor,
      e inline sempre vence regra de CSS. Por isso o translateY(-2px) daqui
      nunca funcionou naquele botão. Como "scale" é propriedade própria, ela
      funciona nos três CTAs, inclusive no magnético.
   2) No :active o botão AFUNDA um pouco (0.99). É o que dá sensação de tecla
      apertada no celular, onde :hover não existe de verdade. Junto com o
      ripple que o script.js já desenha, o toque fica com resposta clara. */
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-brand-primary-hover);
  transform: translateY(-2px);
  scale: 1.04;
}
.btn-primary:active { scale: 0.99; }
.btn-sm { min-height: 44px; padding: 10px 22px; font-size: 0.95rem; }
.btn-ghost {
  background: transparent;
  color: var(--color-brand-primary);
  font-weight: 600;
  min-height: 44px;
  padding: 10px 18px;
}
.btn-ghost:hover { opacity: 0.75; }
.btn-block { display: flex; width: 100%; white-space: normal; text-align: center; }
.btn-block .btn-label { line-height: 1.25; }

/* NÃO existe mais animação em loop no CTA, e isso foi decidido, não esquecido.
   Histórico curto, pra não refazerem o caminho todo (03/08/2026):
     1. Havia um halo pulsando infinito (.btn-glow, box-shadow expandindo).
     2. Foi trocado por uma respiração em scale. Reprovado: num botão de ~365px
        de largura, 3% movem cada borda uns 5px pros lados, e lê como
        instabilidade, "parece que o botão vai cair".
     3. Voltou pro halo, e então veio a decisão final: crescer como RESPOSTA AO
        TOQUE é melhor que qualquer loop. Loop no CTA vira papel de parede e o
        cérebro aprende a ignorar, além de repintar a cada quadro pra sempre.
   O crescimento agora está em .btn-primary:hover / :focus-visible / :active,
   mais acima neste arquivo. O IntersectionObserver que ligava e desligava o
   loop foi removido do script.js junto: sem loop, ele não tinha mais função.
   Se um dia quiserem um chamariz parado de novo, prefira algo fora do botão
   (uma seta, uma microcopy) a fazer o próprio CTA se mexer sozinho. */
@media (prefers-reduced-motion: reduce) {
  /* O crescimento no hover/active continua valendo: é resposta a uma ação da
     pessoa, não movimento automático, então não é o que a preferência pede pra
     desligar. Só a transição fica instantânea. */
  .btn { transition: none; }
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(15, 15, 17, 0.25);
  transform: scale(0);
  animation: rippleAnim 0.6s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(3); opacity: 0; }
}

/* ===== Reveal on scroll ===== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===== Sprite dos ícones de produto =====
   O <svg> com os <symbol> precisa existir no DOM, mas não pode ocupar espaço
   nem ser lido. width/height zero + overflow hidden resolve os dois. Mesma
   regra da página de Serviços do site. */
.sprite-produtos { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Elemento escondido por dado ausente (ex.: prova social sem caso cadastrado).
   O script.js remove o nó de vez; esta classe segura o bloco até lá, pra ele
   não piscar na tela antes do JS rodar. */
.is-hidden { display: none !important; }

/* ===== Hero ===== */
.hero {
  position: relative;
  background: var(--color-brand-dark);
  color: var(--color-brand-light);
  padding: 56px 0 72px;
  overflow: hidden;
}
.hero-bg-cut {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(245,134,52,0.14) 0%, transparent 45%);
  pointer-events: none;
}
/* No celular é uma coluna só e centralizado, com a FOTO DEPOIS do texto: o
   botão precisa caber na primeira tela, e imagem antes dele empurraria o botão
   pra fora. No desktop vira duas colunas (regra na media query de 769px). */
.hero-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
/* No celular o véu não existe: a foto é imagem em fluxo, embaixo do texto, e
   nada fica por cima dela. Ele só entra a partir de 769px, onde ela vira fundo. */
.hero-scrim { display: none; }
/* No celular a foto é imagem em fluxo, embaixo do texto. Como ela vive FORA do
   .container (pra poder virar fundo no desktop), o recuo lateral de 24px vem
   daqui: 460 de imagem + 48 de recuo = 508. */
.hero-media {
  width: 100%;
  max-width: 508px;
  margin: 30px auto 0;
  padding: 0 24px;
}
.hero-media picture { display: block; }
/* aspect-ratio casado com o arquivo servido em cada faixa (900x775 no celular,
   1600x1198 no desktop). É o que segura o layout enquanto a foto carrega, sem
   depender só do width/height do <img>, que só descreve a versão desktop. */
.hero-media img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 900 / 775;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevate);
  background: var(--color-surface-dark);
}
.hero-headline {
  font-weight: 800;
  font-style: italic;
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  line-height: 1.12;
  max-width: 16ch;
  letter-spacing: -0.01em;
}
.hero-subheadline {
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.55;
  max-width: 48ch;
  color: rgba(255,255,255,0.82);
}
.hero-microcopy {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
}

/* ===== Sections ===== */
.section { padding: 72px 0; position: relative; }
.section-white { background: var(--color-brand-light); }
.section-surface-light { background: var(--color-surface-light); }
.section-dark { background: var(--color-brand-dark); color: var(--color-brand-light); }

/* O .cut-divider foi REMOVIDO em 16/08/2026, e não é pra voltar sem resolver o
   defeito que ele tinha: ele vivia dentro do .container, então os 120% de
   largura dele eram 120% de 1040px, e não da tela. O resultado era uma cunha
   escura que parava no meio do caminho e não encostava nas bordas, lendo como
   erro de renderização em vez de recurso gráfico. O ritmo entre seções agora
   vem do contraste de fundo (claro/escuro) e do respiro, que já bastam. */

/* Ícone acima do título de seção. Serve pra amarrar a seção ao produto que ela
   está vendendo: é o mesmo desenho do cartão de oferta e da página de Serviços
   do site. Decorativo (o nome do produto está escrito no título ao lado), então
   pode ser laranja cheio sem discussão de contraste de texto. */
.section-ico {
  width: 48px;
  height: 48px;
  display: block;
  margin: 0 auto 16px;
  color: var(--color-brand-primary);
}
.section-title {
  font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  text-align: center;
  margin-bottom: 48px;
  /* 30ch segura o título longe da largura total da tela sem espremer a quebra.
     Em 24ch o título da comparação quebrava com "nem" sozinho no fim da linha. */
  max-width: 30ch;
  margin-left: auto;
  margin-right: auto;
}
.section-title.has-subtitle { margin-bottom: 12px; }
.section-title-light { color: var(--color-brand-light); }

.section-subtitle {
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(15,15,17,0.65);
  max-width: 42ch;
  margin: 0 auto 48px;
}

/* ===== Statement (Problema / Amplificação) ===== */
.statement {
  font-weight: 800;
  font-style: italic;
  font-size: clamp(1.5rem, 3.6vw, 2.15rem);
  line-height: 1.28;
  text-align: center;
  max-width: 22ch;
  margin: 0 auto;
  letter-spacing: -0.01em;
}
.statement strong { color: var(--color-brand-primary); font-style: normal; }
.statement-light { color: var(--color-brand-light); }
/* Segundo parágrafo do Problema: é a consequência, não o soco. Corpo menor,
   sem itálico e sem peso 800 de propósito, pra não brigar com o de cima. */
.statement-support {
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  line-height: 1.6;
  text-align: center;
  max-width: 46ch;
  margin: 26px auto 0;
  color: rgba(255,255,255,0.72);
}

/* ===== Solução — comparação ===== */
.solucao-compare {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
  margin: 0 auto;
}
.compare-col {
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  text-align: center;
}
.compare-col p { margin: 0; line-height: 1.55; }
.compare-tag {
  display: inline-block;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.compare-col-muted {
  background: var(--color-brand-light);
  border: 1px solid rgba(15,15,17,0.1);
  color: rgba(15,15,17,0.6);
}
.compare-col-muted .compare-tag { color: rgba(15,15,17,0.45); }
.compare-col-highlight {
  background: var(--color-brand-dark);
  color: var(--color-brand-light);
  box-shadow: var(--shadow-elevate);
}
.compare-col-highlight .compare-tag { color: var(--color-brand-primary); }
.compare-col-highlight strong { color: var(--color-brand-primary); }

/* ===== Quem faz =====
   EMPILHADO no celular, lado a lado a partir de 768px. Medido: com foto e texto
   lado a lado numa tela de 390px, a bio cai numa coluna de 190px e vira 7
   linhas. Coluna estreita demais pra um texto que existe pra ser lido.
   A foto é 0.843 de proporção (retrato); o object-fit corta pro círculo sem
   achatar o rosto, e o object-position sobe o recorte pro rosto ficar no meio. */
.autor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.autor-foto { flex-shrink: 0; display: block; }
.autor-foto img {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  border: 2px solid rgba(15,15,17,0.08);
  background: var(--color-surface-light);
}
.autor-texto { min-width: 0; }
.autor-nome {
  margin: 0;
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.2;
}
.autor-cargo {
  margin: 3px 0 10px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* NÃO usar o laranja da marca aqui. Em 13.6px ele dá 2.5:1 sobre branco, e a
     regra da página é laranja só em ícone, elemento gráfico, fundo de botão ou
     texto grande com peso alto. Este cinza dá 5.3:1. */
  color: rgba(15,15,17,0.62);
}
.autor-bio {
  margin: 0;
  line-height: 1.6;
  color: rgba(15,15,17,0.72);
  font-size: 0.98rem;
}
.autor-bio + .autor-bio { margin-top: 10px; }

/* ===== Como funciona (3 passos) =====
   Empilhado no celular, três colunas a partir de 768px. O número é elemento
   gráfico: grande, laranja, aria-hidden. Ele funciona como âncora visual pra
   quem varre a seção sem ler, e é por isso que pode ser laranja sobre escuro
   sem preocupação de contraste de texto (não carrega informação). */
.passos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 640px;
  margin: 0 auto;
}
.passo {
  background: var(--color-surface-dark);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
}
.passo-num {
  display: block;
  font-weight: 800;
  font-style: italic;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--color-brand-primary);
  margin-bottom: 10px;
}
.passo-title {
  font-weight: 800;
  font-size: 1.12rem;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--color-brand-light);
}
.passo p {
  margin: 0;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  font-size: 0.98rem;
}
.passos-fecho {
  max-width: 46ch;
  margin: 40px auto 0;
  text-align: center;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.4;
  color: var(--color-brand-light);
}

/* ===== Prova social da Logomarca Expresso (antes e depois) =====
   Cartão claro porque a seção é clara (surface-light): sem o contraste o
   cartão some no fundo. As duas fotos ficam SEMPRE lado a lado, inclusive no
   celular: antes e depois separados por rolagem deixa de ser comparação. */
.expresso-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 640px;
  margin: 0 auto;
}
.expresso-card {
  background: var(--color-brand-light);
  border: 1px solid rgba(15,15,17,0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-elevate);
}
.expresso-par { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.expresso-lado { margin: 0; position: relative; }
.expresso-lado picture { display: block; }
.expresso-lado img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 40%;
  background: var(--color-surface-light);
}
.expresso-rotulo {
  position: absolute;
  top: 10px; left: 10px;
  background: rgba(15,15,17,0.78);
  color: var(--color-brand-light);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border-radius: 999px;
}

/* ===== Transformação + prova social ===== */
/* DOIS CARTÕES POR LINHA a partir de 560px de largura (03/08/2026).
   Antes era uma coluna só, com o card deitado (imagem de um lado, texto do
   outro) e um parágrafo de bastidores em cada. Com 8 casos aquilo virava uma
   rolagem enorme entre a prova social e o botão de compra.
   No celular estreito continua UMA coluna: dois cartões lado a lado num
   aparelho de 360px dariam ~160px cada, onde nem a imagem nem o nome do
   cliente se sustentam. */
.casos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 640px;
  margin: 0 auto 40px;
}
@media (min-width: 560px) {
  .casos-grid { grid-template-columns: 1fr 1fr; }
}
.caso-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--color-surface-light);
  border: 1px solid rgba(15,15,17,0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-elevate);
}
/* O <picture> existe só pra oferecer o WebP com JPG de fallback. Sem isto ele
   vira o item flex do .caso-card e a imagem para de receber width/flex-shrink/
   align-self (regra da linha ~515), desmontando o layout de duas colunas no
   desktop. display:contents apaga o wrapper do layout e devolve o <img> pro
   fluxo do card, sem mexer em nenhum seletor existente. */
.caso-card picture { display: contents; }

.caso-media {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;      /* mockups são retrato 4:5 — recorta ao centro no mobile */
  object-fit: cover;
  /* Nos mockups o logo fica um pouco acima do centro — puxa o recorte pra cima
     pra ele não sair da faixa visível quando o retrato vira paisagem. */
  object-position: center 40%;
  display: block;
  background: var(--color-surface-dark);
}
.caso-body { padding: 22px 24px 24px; }
.caso-client {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--color-brand-primary);
  margin: 0 0 2px;
}
.caso-segment {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(15,15,17,0.5);
}
.caso-bastidores { margin: 0; line-height: 1.55; color: rgba(15,15,17,0.75); }

/* ===== Oferta ===== */
.section-oferta { padding-top: 88px; }
.offer-card {
  max-width: 520px;
  margin: 0 auto;
  background: var(--color-surface-dark);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  box-shadow: var(--shadow-elevate);
  text-align: center;
}
/* Ícone do produto no topo do cartão. É o mesmo desenho que identifica a
   Logomarca Expresso na página de Serviços do site: repetir o símbolo entre as
   duas páginas ajuda quem chega aqui vindo de lá a reconhecer o produto. */
.offer-ico {
  width: 52px;
  height: 52px;
  display: block;
  margin: 0 auto 14px;
  color: var(--color-brand-primary);
}
.offer-eyebrow {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-brand-primary);
}
.offer-price {
  margin: 0 0 24px;
  font-weight: 800;
  font-size: clamp(3rem, 9vw, 4.2rem);
  line-height: 1;
  color: var(--color-brand-light);
}
.offer-price-currency { font-size: 0.45em; vertical-align: super; margin-right: 2px; font-weight: 700; }
.value-stack {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.value-stack li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: rgba(255,255,255,0.88);
  line-height: 1.5;
  font-size: 0.98rem;
}
.value-check {
  flex-shrink: 0;
  stroke: var(--color-brand-primary);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: 1px;
}
/* Detalhe técnico do item de arquivos. Fica preso ao item de propósito, em
   corpo menor: quem precisa saber o formato encontra, e quem não precisa passa
   direto sem que a lista engorde. */
.value-note {
  display: block;
  margin-top: 4px;
  font-size: 0.83rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.55);
}
/* Vem ANTES da linha de checkout seguro porque responde o medo maior: não é
   "meu cartão está seguro?", é "e se vier feio e eu tiver que aceitar?". */
.offer-reassurance {
  margin: 16px 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.75);
}
.offer-microcopy {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
}

/* ===== Complementos do checkout (order bumps) ===== */
.bumps { max-width: 520px; margin: 28px auto 0; }
.bumps-title {
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  color: rgba(255,255,255,0.7);
  margin: 0 0 16px;
}
.bumps-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.bump {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.bump-ico {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--color-brand-primary);
}
.bump-body { min-width: 0; }
.bump-name {
  margin: 0 0 4px;
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--color-brand-light);
  line-height: 1.3;
}
.bump-desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.65);
}

/* ===== CTA final ===== */
.section-cta-final {
  background: var(--color-brand-dark);
  color: var(--color-brand-light);
  padding: 88px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-final-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.cta-symbol-wrap { display: block; margin-bottom: 4px; }
.cta-symbol { width: 56px; height: auto; opacity: 0.9; display: block; }
.cta-final-headline {
  font-weight: 800;
  font-style: italic;
  font-size: clamp(1.7rem, 4.5vw, 2.5rem);
  max-width: 18ch;
  line-height: 1.2;
}
.cta-final-microcopy { color: rgba(255,255,255,0.55); font-size: 0.9rem; font-weight: 500; }

/* ===== FAQ ===== */
.faq-list {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  border: 1px solid rgba(15,15,17,0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-brand-light);
}
.faq-question {
  width: 100%;
  background: var(--color-brand-light);
  border: none;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.02rem;
  cursor: pointer;
  color: var(--color-brand-dark);
  text-align: left;
}
.faq-icon { flex-shrink: 0; stroke: var(--color-brand-primary); stroke-width: 2.5; fill: none; transition: transform 0.3s var(--ease); }
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease);
}
.faq-answer { overflow: hidden; }
.faq-answer p { margin: 0; padding: 0 20px 18px; color: rgba(15,15,17,0.7); line-height: 1.55; }
.faq-answer p + p { padding-top: 0; }
/* Links secundários pras duas ferramentas gratuitas. Baixo peso visual de
   propósito: não competem com o CTA de compra. Ficam um embaixo do outro
   porque são escolhas diferentes (achar um nome x checar um nome que já
   existe), e lado a lado a pessoa lê como se fossem a mesma coisa.
   O sublinhado vai no <span>, não no <a>: no <a> ele passaria por baixo do
   ícone também e ficaria com cara de erro de renderização. */
.faq-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.faq-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-brand-primary);
  font-weight: 600;
  font-size: 0.95rem;
  transition: opacity 0.2s var(--ease);
}
.faq-inline-link span {
  border-bottom: 1px solid rgba(245,134,52,0.4);
  padding-bottom: 1px;
}
.faq-link-ico { width: 28px; height: 28px; flex-shrink: 0; }
.faq-inline-link:hover { opacity: 0.75; }
.faq-item.is-open .faq-answer-wrap { grid-template-rows: 1fr; }

/* ===== Footer ===== */
.footer {
  background: var(--color-brand-dark);
  color: rgba(255,255,255,0.6);
  padding: 44px 0;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.footer-logo { width: 120px; height: auto; }
.footer-inner p { margin: 0; font-size: 0.85rem; line-height: 1.5; max-width: 40ch; }
.footer-links { display: flex; gap: 14px; margin-top: 4px; }
.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  font-size: 0.9rem;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.footer-link:hover { border-color: var(--color-brand-primary); background: rgba(245,134,52,0.08); }

/* ===== Barra fixa de compra (só no celular) =====
   z-index 880: FICA ABAIXO do banner de cookies (900) de propósito, e por cima
   do resto. Mesmo assim ela some enquanto o banner está aberto (regra logo
   abaixo), porque encobrir parcialmente uma decisão de consentimento não
   resolveria nada.
   padding-bottom com env(safe-area-inset-bottom) pro botão não ficar embaixo
   da barra de gestos do iPhone. */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 880;
  background: rgba(15,15,17,0.94);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%);
  transition: transform 0.35s var(--ease);
  pointer-events: none;
}
.mobile-cta.is-visible { transform: translateY(0); pointer-events: auto; }
.mobile-cta-inner { max-width: 520px; margin: 0 auto; }
.mobile-cta .btn { min-height: 50px; font-size: 1rem; }
/* Enquanto o banner de cookies estiver aberto, a barra sai da frente. */
body.has-cookie-banner .mobile-cta { transform: translateY(110%); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .mobile-cta { transition: none; }
}
/* A partir de 769px ela não existe: o botão do hero e o da oferta já ficam ao
   alcance sem rolagem longa, e uma barra fixa no desktop só rouba área útil. */
@media (min-width: 769px) {
  .mobile-cta { display: none; }
}

/* ===== Cookie banner ===== */
.cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 16px; right: 16px;
  max-width: 560px;
  margin: 0 auto;
  background: var(--color-surface-dark);
  color: rgba(255,255,255,0.9);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-elevate);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: translateY(0);
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
/* Só usada pra animar a SAÍDA quando o visitante fecha o aviso. O banner já
   nasce visível (ver acima); nunca depende de JS pra aparecer. */
.cookie-banner.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
.cookie-banner p { margin: 0; font-size: 0.88rem; line-height: 1.5; }
.cookie-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ============ Tablet 768–1023px ============ */
@media (min-width: 768px) {
  :root { --container-w: 900px; }
  .hero { padding: 76px 0 96px; }
  .section { padding: 96px 0; }
  .site-header-logo { width: 148px; }
  .solucao-compare {
    flex-direction: row;
    align-items: stretch;
    max-width: 860px;
  }
  .compare-col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; }
  /* O card fica EM PÉ (imagem em cima, texto embaixo) em qualquer largura.
     Aqui existia o card deitado, com a imagem ocupando 40% ao lado do texto.
     Isso fazia sentido quando era uma coluna só, ocupando a largura inteira.
     Com dois por linha, deitar espremeria a imagem pra ~170px, e o mockup
     (fachada, letreiro, painel) some nesse tamanho. Não volte atrás sem antes
     olhar como fica a foto. */
  .casos-grid { max-width: 860px; }
  /* Os três passos lado a lado: é a leitura certa pra um processo, porque a
     ordem fica espacial em vez de depender só do número. */
  /* Aqui a bio já tem largura de sobra pra ficar ao lado da foto. */
  .autor { flex-direction: row; align-items: center; gap: 22px; text-align: left; }
  .passos { grid-template-columns: repeat(3, 1fr); max-width: 860px; }
  .expresso-grid { max-width: 860px; grid-template-columns: 1fr 1fr; }
  .bumps { max-width: 860px; }
  .bumps-grid { grid-template-columns: 1fr 1fr; }
  .cookie-banner { left: auto; right: 24px; bottom: 24px; }
}

/* ============ Desktop ≥1024px ============ */
@media (min-width: 1024px) {
  :root { --container-w: 1040px; }
  .hero { padding: 96px 0 120px; }
  .hero-headline { font-size: clamp(2.6rem, 4.2vw, 3.6rem); max-width: 20ch; }
  .hero-subheadline { font-size: 1.2rem; }
  .section { padding: 120px 0; }
  .section-title { margin-bottom: 64px; }
  .section-title.has-subtitle { margin-bottom: 14px; }
  .statement { font-size: clamp(1.9rem, 3vw, 2.5rem); max-width: 24ch; }
  .solucao-compare { max-width: 980px; gap: 22px; }
  .casos-grid { max-width: 900px; }
  .passos { max-width: 980px; gap: 24px; }
  .expresso-grid { max-width: 900px; }
}

/* ============ Hero em duas colunas, a partir de 769px ============
   O corte é 769 e não 768 de propósito: o <picture> troca a foto em
   "max-width: 768px", então até 768 quem está na tela é o arquivo de celular
   (900x775) e daí pra cima é o de desktop (1600x1198). Se as duas quebras não
   batessem, a razão de proporção reservada pelo CSS não seria a da foto
   servida, e a página daria um salto quando ela terminasse de carregar.

   Este bloco vem DEPOIS do de 1024px de propósito: ele precisa vencer o
   max-width do .hero-headline de lá, que foi escrito quando o hero era uma
   coluna centralizada e ocupava a largura toda. Em duas colunas aquele valor
   estoura a coluna. */
@media (min-width: 769px) {
  /* A FOTO VIRA FUNDO. É o mesmo <picture> do celular: só muda onde o CSS
     coloca o contêiner. Assim continua sendo UM download por faixa de tela, e
     não dois (um pro fundo e outro pro empilhado).
     A altura mínima existe pra segurar o recorte: quanto mais achatado o hero,
     mais a foto perde topo e base, e é justamente no topo que está o rosto da
     artesã e na base a caneca com a etiqueta. */
  .hero {
    padding: 0;
    min-height: clamp(560px, 76vh, 820px);
    display: flex;
    align-items: center;
  }
  .hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .hero-media picture { height: 100%; }
  .hero-media img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    /* 68% na vertical, medido na tela e não no chute. A foto é 1.79 de
       proporção e o hero é mais achatado que isso, então sempre sobra corte em
       cima e embaixo. Em 55% a caneca com a etiqueta ficava cortada na base, e
       é justamente ela que prova o assunto da página: uma marca aplicada num
       produto de verdade. Em 68% ela entra inteira e o rosto da artesã continua
       no quadro. Se mexer na altura do hero, remeça este valor. */
    object-position: center 68%;
    border-radius: 0;
    box-shadow: none;
  }
  .hero-scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
      rgba(15,15,17,0.97) 0%,
      rgba(15,15,17,0.95) 28%,
      rgba(15,15,17,0.82) 44%,
      rgba(15,15,17,0.42) 60%,
      rgba(15,15,17,0.10) 80%,
      rgba(15,15,17,0) 100%);
  }
  .hero-bg-cut { z-index: 1; }
  .hero-inner {
    position: relative;
    z-index: 2;
    display: block;
    /* width:100% é obrigatório: o .hero virou flex pra centralizar na vertical,
       e sem isto o container encolhe pro tamanho do conteúdo em vez de respeitar
       o max-width, jogando o texto pro meio da tela. */
    width: 100%;
    text-align: left;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .hero-text { align-items: flex-start; max-width: 30rem; }
  .hero-headline { max-width: 15ch; }
  .hero-subheadline { max-width: 32ch; }
}
@media (min-width: 1024px) {
  .hero-headline { max-width: 14ch; }
  .hero-subheadline { max-width: 34ch; }
}