/**
 * shared/css/apresentacao.css — a página de apresentação (raiz do domínio).
 * Depende de shared/css/marca.css, que precisa vir ANTES no <head>.
 *
 * Decisões de desenho que valem explicar, porque foram escolhas e não acidente:
 *
 * 1. NADA É CENTRALIZADO NO TOPO. O padrão "título grande no meio da tela sobre
 *    fundo escuro" é a cara de página gerada por máquina. Aqui o herói é
 *    partido em duas colunas desiguais (1.05fr / 0.95fr): texto à esquerda,
 *    a tela do produto à direita.
 *
 * 2. NENHUMA FILEIRA DE TRÊS CARTÕES IGUAIS. É o clichê mais reconhecível de
 *    site de software. As comparações são em DUAS colunas; os passos são uma
 *    lista vertical com um fio desenhado ao lado.
 *
 * 3. A TELA DO PRODUTO É CÓDIGO, NÃO IMAGEM. Print vira borrão em tela grande e
 *    imagem feita por IA tem texto derretido — o visitante percebe na hora e
 *    perde a confiança. Sendo HTML, é nítida em qualquer tela, se ajusta no
 *    celular e mostra números de verdade.
 *
 * 4. HIERARQUIA POR FILETE, NÃO POR SOMBRA. O produto fala com arquiteto.
 *    Arquiteto lê prancha, e prancha é linha de 1px.
 *
 * 5. MOVIMENTO SÓ EM transform/opacity. São as duas únicas propriedades que a
 *    placa de vídeo anima sozinha. Animar largura/altura/topo obriga o
 *    navegador a recalcular a página inteira a cada quadro e trava no celular.
 */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--fonte);
  font-weight: 300;
  background: var(--tinta-0);
  color: var(--texto);
  line-height: 1.62;
  overflow-x: hidden;
  /* Luz quente vindo do alto, como clarabóia. Dá profundidade sem foto. */
  background-image:
    radial-gradient(110% 70% at 50% -10%, hsl(42 22% 12%) 0%, transparent 62%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

img { max-width: 100%; display: block; }

.envelope {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--margem);
  position: relative;
  z-index: 1;
}

/* ══ CABEÇALHO ═══════════════════════════════════════════════════════════ */

.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(11, 11, 10, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--curva), background 0.3s var(--curva);
}
.topo.is-rolado { border-bottom-color: var(--linha); }

.topo__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
}

.marca-topo { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.marca-topo__nome {
  font-size: clamp(14px, 1vw + 11px, 17px);
  font-weight: 300;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--texto);
}
.marca-topo__tipo {
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ouro);
}

.topo__acoes { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); }

/* ══ BOTÕES ══════════════════════════════════════════════════════════════ */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--fonte);
  font-size: var(--t-mini);
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 24px;
  border-radius: var(--canto);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s var(--curva), background 0.25s var(--curva),
              border-color 0.25s var(--curva), color 0.25s var(--curva);
}
/* O empurrão de 1px no clique. Custa nada e o dedo sente que apertou algo. */
.botao:active { transform: translateY(1px); }

.botao--cheio { background: var(--ouro); color: #17150F; border-color: var(--ouro); }
.botao--cheio:hover { background: var(--ouro-claro); border-color: var(--ouro-claro); }

.botao--linha { background: transparent; color: var(--texto); border-color: var(--linha-forte); }
.botao--linha:hover { border-color: var(--ouro); color: var(--ouro); }

.botao--nu {
  background: transparent; border: none; color: var(--texto-2);
  padding: 10px 4px; letter-spacing: 0.16em;
}
.botao--nu:hover { color: var(--ouro); }

.botao--grande { padding: 17px 34px; font-size: var(--t-corpo); letter-spacing: 0.09em; text-transform: none; }

/* ══ HERÓI ═══════════════════════════════════════════════════════════════ */

/* 100dvh e não 100vh: no Safari do iPhone a barra de endereço entra e sai, e o
   100vh faz a página inteira dar um salto quando isso acontece. */
.heroi {
  min-height: calc(100dvh - 62px);
  display: flex;
  align-items: center;
  padding-block: clamp(44px, 8vh, 92px);
  position: relative;
}

.heroi__grade {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
  width: 100%;
}

.heroi__rotulo {
  display: inline-flex; align-items: center; gap: 11px;
  margin-bottom: 22px;
}
.heroi__rotulo::before {
  content: ''; width: clamp(22px, 4vw, 46px); height: 1px; background: var(--ouro-fraco);
}

h1, .h1 {
  font-size: var(--t-titulo-1);
  font-weight: 200;
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--texto);
  text-wrap: balance;
}
/* O acento cai numa palavra só. Se a página inteira brilha, nada brilha. */
.h1 em { font-style: normal; color: var(--ouro); font-weight: 300; }

.heroi__sub {
  font-size: var(--t-corpo-g);
  color: var(--texto-2);
  max-width: 46ch;
  margin-top: clamp(18px, 2.4vh, 28px);
  font-weight: 300;
}

.heroi__acoes {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: clamp(24px, 3.4vh, 38px);
}

/* Os removedores de fricção ficam COLADOS no botão. A objeção mora no ponto
   exato da decisão: é ali que a pessoa pensa "vai me cobrar?". */
.heroi__semfriccao {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin-top: 16px;
  font-size: var(--t-mini);
  color: var(--texto-3);
}
.heroi__semfriccao span { display: inline-flex; align-items: center; gap: 6px; }
.heroi__semfriccao svg { width: 13px; height: 13px; flex: none; color: var(--verde); }

/* ══ A TELA DO PRODUTO (desenhada em código) ═════════════════════════════ */

.tela {
  background: var(--tinta-2);
  border: 1px solid var(--linha);
  border-radius: var(--canto);
  overflow: hidden;
  /* Sombra tingida do fundo, larga e fraca — profundidade sem "brilho neon". */
  box-shadow: 0 34px 74px -34px rgba(0, 0, 0, 0.9);
  position: relative;
}
.tela::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ouro-fraco) 22%,
              var(--ouro) 50%, var(--ouro-fraco) 78%, transparent);
}

.tela__barra {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--linha);
  background: var(--tinta-1);
}
.tela__pontos { display: flex; gap: 6px; }
.tela__pontos i { width: 7px; height: 7px; border-radius: 50%; background: var(--linha-forte); }
.tela__titulo {
  font-size: var(--t-micro); letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--texto-3);
}

.tela__corpo { padding: clamp(16px, 2.2vw, 26px); }

.tela__cabeca {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--linha);
}
.tela__projeto { font-size: var(--t-corpo); color: var(--texto); font-weight: 400; }
.tela__cliente { font-size: var(--t-mini); color: var(--texto-3); }

/* Linhas de cálculo. Sem cartão em volta: a linha de 1px já separa. */
.linha-calc {
  display: grid; grid-template-columns: 1fr auto;
  gap: 14px; align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--linha);
  font-size: var(--t-mini);
}
.linha-calc__rot { color: var(--texto-2); }
.linha-calc__val {
  /* Número em tabular: as colunas de valor ficam alinhadas de verdade. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--texto);
  letter-spacing: 0.02em;
}
.linha-calc--somatoria { border-bottom: none; padding-top: 16px; }
.linha-calc--somatoria .linha-calc__rot {
  font-size: var(--t-micro); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ouro);
}
.linha-calc--somatoria .linha-calc__val {
  font-size: var(--t-titulo-3); color: var(--ouro); font-weight: 300;
}
.linha-calc__nota { font-size: var(--t-micro); color: var(--texto-3); grid-column: 1 / -1; margin-top: -4px; }

.tela__selo {
  margin-top: 16px; padding: 11px 13px;
  background: rgba(106, 154, 120, 0.08);
  border-left: 2px solid var(--verde);
  font-size: var(--t-mini); color: var(--verde);
  display: flex; gap: 9px; align-items: flex-start;
}
.tela__selo svg { width: 14px; height: 14px; flex: none; margin-top: 3px; }

/* Pulso lento no ponto de status: a tela parece viva, não um print morto.
   Só opacity — não força repintura de layout. */
.pulso { position: relative; }
.pulso::after {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%; border: 1px solid var(--verde);
  animation: respira 2.9s var(--curva) infinite;
}
@keyframes respira {
  0%   { opacity: 0.9; transform: scale(0.72); }
  70%  { opacity: 0;   transform: scale(1.5);  }
  100% { opacity: 0;   transform: scale(1.5);  }
}

/* ══ FITA DE MÓDULOS (marquise contínua) ════════════════════════════════ */

.fita {
  border-block: 1px solid var(--linha);
  background: var(--tinta-1);
  padding-block: 15px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
/* Desmanche nas pontas: a fita "entra e sai" da tela em vez de ser cortada. */
.fita::before, .fita::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: clamp(40px, 9vw, 130px);
  z-index: 2; pointer-events: none;
}
.fita::before { left: 0;  background: linear-gradient(90deg, var(--tinta-1), transparent); }
.fita::after  { right: 0; background: linear-gradient(270deg, var(--tinta-1), transparent); }

.fita__trilho { display: flex; width: max-content; animation: desliza 46s linear infinite; }
.fita:hover .fita__trilho { animation-play-state: paused; }
.fita__grupo { display: flex; align-items: center; flex: none; }
.fita__item {
  display: inline-flex; align-items: center; gap: 9px;
  padding-inline: clamp(16px, 2.6vw, 32px);
  font-size: var(--t-mini); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--texto-3); white-space: nowrap;
}
.fita__item::before { content: ''; width: 3px; height: 3px; background: var(--ouro); flex: none; }
@keyframes desliza { to { transform: translateX(-50%); } }

/* ══ SEÇÕES ══════════════════════════════════════════════════════════════ */

.secao { padding-block: var(--resp-secao); position: relative; z-index: 1; }
.secao--fio { border-top: 1px solid var(--linha); }

.cabeca-secao { max-width: 62ch; margin-bottom: clamp(34px, 5vh, 62px); }
.cabeca-secao .rotulo { display: block; margin-bottom: 14px; }
.cabeca-secao h2 {
  font-size: var(--t-titulo-2);
  font-weight: 200; line-height: 1.14; letter-spacing: -0.014em;
  color: var(--texto); text-wrap: balance;
}
.cabeca-secao h2 em { font-style: normal; color: var(--ouro); }
.cabeca-secao p { margin-top: 16px; color: var(--texto-2); font-size: var(--t-corpo); max-width: 56ch; }

/* ── Confronto em duas colunas (hoje × com o sistema) ── */
.confronto { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
.confronto__lado { background: var(--tinta-1); padding: clamp(22px, 3vw, 38px); }
.confronto__lado--depois { background: var(--tinta-2); }
.confronto__marca {
  font-size: var(--t-micro); letter-spacing: 0.26em; text-transform: uppercase;
  margin-bottom: 20px; display: flex; align-items: center; gap: 9px;
}
.confronto__lado--antes  .confronto__marca { color: var(--terra); }
.confronto__lado--depois .confronto__marca { color: var(--ouro); }
.confronto__lista { list-style: none; display: grid; gap: 15px; }
.confronto__lista li {
  font-size: var(--t-corpo); color: var(--texto-2);
  padding-left: 22px; position: relative; line-height: 1.55;
}
.confronto__lista li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 10px; height: 1px; background: currentColor; opacity: 0.5;
}
.confronto__lado--depois .confronto__lista li { color: var(--texto); }

/* ── Bloco desigual: texto estreito + tela larga, alternando o lado ── */
.desigual { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(30px, 5vw, 72px); align-items: center; }
/* Ao espelhar, as COLUNAS também trocam de largura. Sem esta linha a tela do
   produto ia parar na coluna estreita e o texto na larga — o bloco ficava
   desequilibrado, com a imagem espremida ao lado de um parágrafo enorme. */
.desigual--espelho { grid-template-columns: 1.18fr 0.82fr; }
.desigual--espelho .desigual__texto { order: 2; }
.desigual--espelho .desigual__arte  { order: 1; }
.desigual__texto h3 {
  font-size: var(--t-titulo-3); font-weight: 300; line-height: 1.24;
  color: var(--texto); margin-bottom: 16px; letter-spacing: -0.008em;
}
.desigual__texto p { color: var(--texto-2); font-size: var(--t-corpo); }
.desigual__texto p + p { margin-top: 13px; }

/* ── Passos: fio vertical desenhado, não três cartões ── */
.passos { list-style: none; display: grid; gap: 0; max-width: 74ch; counter-reset: passo; }
.passos li {
  counter-increment: passo;
  display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 2.6vw, 30px);
  padding-bottom: clamp(26px, 4vh, 44px);
  position: relative;
}
.passos li::before {
  content: counter(passo, decimal-leading-zero);
  font-size: var(--t-mini); color: var(--ouro); letter-spacing: 0.10em;
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--linha-forte);
  background: var(--tinta-0);
  position: relative; z-index: 1;
}
/* O fio que liga um passo ao outro. Some no último. */
.passos li::after {
  content: ''; position: absolute; left: 21px; top: 42px; bottom: 0;
  width: 1px; background: var(--linha);
}
.passos li:last-child { padding-bottom: 0; }
.passos li:last-child::after { display: none; }

/* O título e a descrição PRECISAM ser fixados na coluna 2.
   Sem isto a grade recebe três filhos (o número, o <b> e o <span>) para duas
   colunas: o número ocupa a coluna 1, o título a coluna 2, e a descrição
   transborda para a linha de baixo na coluna 1 — o passo aparecia partido,
   com o texto solto embaixo do número. Pego na inspeção da tela renderizada. */
.passos b,
.passos span { grid-column: 2; }
/* O título fica na altura do meio do número — a linha 1 da grade tem os 42px
   do círculo, e sem isto o título encostava no topo e abria um buraco antes da
   descrição, como se fossem dois blocos sem relação. */
.passos b {
  display: block; align-self: center;
  font-weight: 400; color: var(--texto); font-size: var(--t-corpo-g);
}
.passos span { color: var(--texto-2); font-size: var(--t-corpo); margin-top: 5px; }

/* ── Espelho: "isto é você?" ── */
.espelho { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
.espelho li { list-style: none; background: var(--tinta-1); padding: clamp(20px, 2.6vw, 30px); display: flex; gap: 14px; }
.espelho svg { width: 17px; height: 17px; flex: none; color: var(--ouro); margin-top: 4px; }
.espelho p { font-size: var(--t-corpo); color: var(--texto-2); }

/* ── Bloco de honestidade ── */
.franqueza {
  border: 1px solid var(--linha);
  border-left: 2px solid var(--ouro);
  background: var(--tinta-1);
  padding: clamp(24px, 3.4vw, 42px);
  max-width: 74ch;
}
.franqueza .rotulo { display: block; margin-bottom: 14px; color: var(--ouro); }
.franqueza p { color: var(--texto-2); font-size: var(--t-corpo); }
.franqueza p + p { margin-top: 12px; }
.franqueza strong { color: var(--texto); font-weight: 400; }

/* ── Perguntas (accordion nativo — funciona sem JavaScript) ── */
.perguntas { max-width: 82ch; border-top: 1px solid var(--linha); }
.pergunta { border-bottom: 1px solid var(--linha); }
.pergunta > summary {
  list-style: none; cursor: pointer;
  padding: clamp(17px, 2.2vh, 24px) 44px clamp(17px, 2.2vh, 24px) 0;
  font-size: var(--t-corpo-g); color: var(--texto); font-weight: 300;
  position: relative; transition: color 0.2s var(--curva);
}
.pergunta > summary::-webkit-details-marker { display: none; }
.pergunta > summary:hover { color: var(--ouro); }
.pergunta > summary::after {
  content: ''; position: absolute; right: 6px; top: 50%;
  width: 11px; height: 11px; margin-top: -6px;
  border-right: 1px solid var(--ouro); border-bottom: 1px solid var(--ouro);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.28s var(--curva);
}
.pergunta[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.pergunta__resposta { padding: 0 0 clamp(19px, 2.6vh, 27px); color: var(--texto-2); font-size: var(--t-corpo); max-width: 66ch; }
.pergunta__resposta p + p { margin-top: 11px; }

/* ── Chamada final ── */
.fecho { text-align: left; padding-block: clamp(70px, 11vh, 140px); border-top: 1px solid var(--linha); position: relative; z-index: 1; }
.fecho__caixa { max-width: 60ch; }
.fecho h2 { font-size: var(--t-titulo-2); font-weight: 200; line-height: 1.12; letter-spacing: -0.014em; text-wrap: balance; }
.fecho h2 em { font-style: normal; color: var(--ouro); }
.fecho p { margin-top: 16px; color: var(--texto-2); font-size: var(--t-corpo-g); }
.fecho__acoes { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 30px; }

/* ── Rodapé ── */
.rodape { border-top: 1px solid var(--linha); padding-block: 38px; position: relative; z-index: 1; }
.rodape__interno { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.rodape__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.rodape a { color: var(--texto-3); text-decoration: none; font-size: var(--t-mini); transition: color 0.2s var(--curva); }
.rodape a:hover { color: var(--ouro); }
.rodape__assinatura { font-size: var(--t-mini); color: var(--texto-3); }

/* ══ ENTRADA EM CENA ═════════════════════════════════════════════════════
   Um só momento coreografado: os blocos sobem 14px e aparecem, em cascata.
   O JS só troca uma classe — quem estiver sem JavaScript vê tudo visível,
   porque o estado "escondido" só é aplicado quando a classe .js existe. */
.js .surge { opacity: 0; transform: translateY(14px); }
.js .surge.is-visivel {
  opacity: 1; transform: none;
  transition: opacity 0.66s var(--curva), transform 0.66s var(--curva);
  transition-delay: var(--atraso, 0ms);
}

/* ══ TELAS ESTREITAS ═════════════════════════════════════════════════════
   Regra dura: qualquer grade desigual vira uma coluna só antes de 900px.
   Layout assimétrico espremido é o que gera rolagem lateral no celular. */
@media (max-width: 900px) {
  .heroi { min-height: 0; }
  /* .desigual--espelho precisa estar NOMEADO aqui. Ele tem duas classes e
     ganharia da regra de uma classe só, continuando com duas colunas no
     celular — e aí a página ganharia rolagem lateral justo na seção do portal
     do cliente. Regra da casa: se um modificador define colunas, ele é
     obrigado a aparecer também na volta para coluna única. */
  .heroi__grade,
  .desigual,
  .desigual--espelho,
  .confronto,
  .espelho { grid-template-columns: 1fr; }
  .desigual--espelho .desigual__texto,
  .desigual--espelho .desigual__arte { order: 0; }
  .heroi__sub { max-width: none; }
  .confronto { gap: 1px; }
}

/* Medido em moldura de 360px: o cabeçalho vazava 19px para fora da tela e o
   celular ganhava rolagem lateral — o defeito que mais faz uma página parecer
   mal-acabada, porque a pessoa arrasta o dedo e a página inteira treme.
   O cabeçalho encolhe em vez de empurrar. */
@media (max-width: 560px) {
  .topo__interno { gap: 8px; }
  .topo__acoes { gap: 4px; min-width: 0; }
  .topo__acoes .botao--cheio { padding: 11px 14px; font-size: var(--t-micro); letter-spacing: 0.10em; }
  .topo__acoes .botao--nu { padding-inline: 6px; font-size: var(--t-micro); letter-spacing: 0.10em; }
  .marca-topo { min-width: 0; }
  .marca-topo__tipo { display: none; }

  .heroi__acoes .botao { width: 100%; }
  .fecho__acoes .botao { width: 100%; }
  .rodape__interno { flex-direction: column; align-items: flex-start; }
}

/* Rede de segurança: em telas muito estreitas, a tela do produto vira uma
   coluna de rótulo em cima e valor embaixo, em vez de espremer os dois. */
@media (max-width: 380px) {
  .linha-calc { grid-template-columns: 1fr; gap: 2px; }
  .linha-calc__val { justify-self: start; }
}