/* =============================================================================
   IDENTIDADE ZEITH.CO -- FOLHA UNICA DO SITE
   Fonte da verdade: projetos/_shared/brand/GUIA-IDENTIDADE-VISUAL-ZEITH.txt (decisao D46).
   Criada em 2026-08-03 (S6).

   POR QUE ESTE ARQUIVO EXISTE
   Ate hoje o site nao tinha NENHUM arquivo compartilhado: cada pagina carregava a propria
   fonte e o proprio :root colado no HTML. O resultado, medido: 5 das 7 paginas nem
   carregavam a fonte da marca (0 a 2 tokens do guia, contra 29 da home) e rodavam num
   sistema antigo (Geist + #1FA9E0). Copia sempre vira drift. Esta folha e o unico lugar
   onde token da marca e escala tipografica sao declarados.

   REGRA PARA QUEM EDITAR DEPOIS
   - Cor, fonte, escala de tipo, botao, container e espacamento moram AQUI. Nao redeclare
     em pagina nenhuma.
   - Valor de espacamento so sai da escala oficial do guia (secao 7): 4, 8, 12, 16, 24,
     32, 48, 64, 80, 96, 120, 160.
   - Se a pagina precisa de um valor proprio (ex.: o simulador usa container estreito),
     declare SO esse valor no :root da propria pagina, depois deste arquivo.
   - Fonte monoespacada e PROIBIDA como recurso tecnologico (guia 3.4).
   ============================================================================= */

/* ============ 19. TOKENS CSS (Guia de Identidade Visual ZEITH.CO, secao 19) ============ */
:root {
  --font-sans: "Schibsted Grotesk", Arial, sans-serif;
  --font-editorial: "Source Serif 4", Georgia, serif;

  --zeith-blue: #20BDF3;
  --blue-deep: #087DA8;
  --blue-soft: #DDF5FE;

  --ink-950: #0A0C0F;
  --ink-900: #14181D;
  --graphite-800: #242A31;
  --slate-600: #5B6672;
  --slate-400: #94A0AC;

  --line-200: #D7DEE5;
  --mist-100: #EEF2F5;
  --paper: #F7F8F9;
  --warm-paper: #F2EEE8;
  --white: #FFFFFF;

  --success: #0E7A55;
  --warning: #A15C00;
  --error: #B42318;

  --radius-image: 4px;
  --radius-control: 6px;
  --radius-panel: 8px;

  --container: 1240px;
  --section-desktop: 120px;
  --section-tablet: 96px;
  --section-mobile: 72px;

  --ease-zeith: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============ Reset ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink-950);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, p, figure { margin: 0; }
svg { display: block; }

:focus-visible { outline: 2px solid var(--zeith-blue); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============ 6. Grid / container ============ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 768px)  { .container { padding-inline: 32px; } }
@media (min-width: 1024px) { .container { padding-inline: 48px; } }

.section { padding-block: var(--section-mobile); }
@media (min-width: 768px)  { .section { padding-block: var(--section-tablet); } }
@media (min-width: 1024px) { .section { padding-block: var(--section-desktop); } }

.section--white { background: var(--white); }
.section--paper { background: var(--paper); }
.section--mist  { background: var(--mist-100); }
.section--warm  { background: var(--warm-paper); }
.section--dark  { background: var(--ink-950); color: var(--white); }

/* ============ 3. Tipografia ============ */
.h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 20ch;
}
@media (min-width: 1024px) { .h1 { font-size: 72px; line-height: 0.98; } }

.h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: 22ch;
}
@media (min-width: 1024px) { .h2 { font-size: 52px; line-height: 1.04; } }

.h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.18;
  letter-spacing: -0.035em;
}
@media (min-width: 1024px) { .h3 { font-size: 30px; line-height: 1.15; } }

.editorial {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.16;
}
@media (min-width: 1024px) { .editorial { font-size: 44px; line-height: 1.12; } }

.text-lg { font-size: 19px; line-height: 1.48; font-weight: 400; }
@media (min-width: 1024px) { .text-lg { font-size: 21px; } }

.text-body { font-size: 16px; line-height: 1.55; font-weight: 400; color: var(--slate-600); }
@media (min-width: 1024px) { .text-body { font-size: 17px; line-height: 1.58; } }

/* Corpo de leitura em cards/steps: mesma escala do .text-body (16 mobile / 17 desktop, guia 3.3) */
@media (min-width: 1024px) {
  .card-text, .step-content p, .naofaco-item p, .work-card p { font-size: 17px; }
}

.text-ui { font-size: 15px; line-height: 1.25; font-weight: 600; }
.text-caption { font-size: 13px; line-height: 1.45; font-weight: 500; color: var(--slate-600); }
.marker {
  font-size: 12px; line-height: 1.2; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--blue-deep);
}

.section--dark .text-body { color: rgba(255,255,255,0.72); }
.section--dark .marker { color: var(--zeith-blue); }

p + p { margin-top: 16px; }

/* ============ 9. Ponto de Presenca ============ */
/* O circulo mora nos modificadores, nao no .dot sozinho. Motivo, achado olhando o render:
   as paginas internas usam <span class="dot">.CO</span> como TEXTO dentro do wordmark.
   Com o fundo e o raio no .dot cru, o ".CO" do logotipo virava uma bola azul. */
.dot { display: inline-block; flex-shrink: 0; }
.dot--sm, .dot--nav, .dot--title { border-radius: 50%; background: var(--zeith-blue); }
.dot--sm { width: 6px; height: 6px; }
.dot--nav { width: 8px; height: 8px; }
.dot--title { width: 12px; height: 12px; margin-left: 3px; }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}

/* ============ 10. Botoes e links ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding-inline: 24px; border-radius: var(--radius-control);
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
  transition: background-color .16s var(--ease-zeith), color .16s var(--ease-zeith);
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--zeith-blue); color: var(--ink-950); }
.btn-primary:hover { background: #75D9FF; }
.btn-primary:active { background: #0EA7DB; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  color: var(--ink-950);
}
/* Alvo de toque >=44px no mobile, sem aumentar o texto (guia 3.3 já correto em 15px) */
@media (max-width: 1023px) { .link-arrow { min-height: 44px; } }
.link-arrow svg { width: 16px; height: 16px; transition: transform .16s var(--ease-zeith); }
.link-arrow:hover { color: var(--blue-deep); }
.link-arrow:hover svg { transform: translateX(2px); }
.link-arrow--on-dark { color: var(--white); }
.link-arrow--on-dark:hover { color: var(--zeith-blue); }

/* ============ Tag ============ */
.tag {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-200); border-radius: 4px;
  padding: 3px 8px; font-size: 12px; font-weight: 600;
  color: var(--blue-deep); background: var(--white);
  white-space: nowrap;
}


/* =============================================================================
   CAMADA DE COMPATIBILIDADE
   As paginas internas (site, otimizacao, instagram, sobre, simulador) foram escritas
   contra o sistema antigo (--bg, --ink, --cyan, Geist). Em vez de reescrever centenas de
   regras -- que e onde erro visual entra sem ninguem ver --, os nomes antigos passam a
   APONTAR para os tokens do guia. Uma unica troca de valor, aqui, muda as 7 paginas.
   Estes apelidos sao PONTE, nao destino: regra nova escreve o nome canonico.
   ============================================================================= */
:root {
  --bg: var(--paper);
  --surface: var(--white);
  --surface-cyan: rgba(32, 189, 243, 0.05);
  --ink: var(--ink-950);
  --ink-2: var(--slate-600);
  --ink-3: var(--slate-400);
  --line: var(--line-200);
  --line-strong: #C3CDD7;
  --cyan: var(--zeith-blue);
  --cyan-ink: var(--blue-deep);
  --navy: var(--ink-950);
  --paper-2: var(--warm-paper);
  --container-narrow: 760px;
  --ease-out: var(--ease-zeith);
}

/* A pagina interna herda a fonte da marca pelo body, mas varias regras dela pedem
   "Geist" pelo nome. O stack abaixo faz a Schibsted responder por esse nome tambem,
   ate a regra ser reescrita. Geist NAO e mais carregada em pagina nenhuma. */
body, .display, .lead, .body-text, h1, h2, h3, h4, p, li, a, button, input, select, textarea {
  font-family: var(--font-sans);
}

/* Palavra longa em titulo grande nao pode estourar a tela. Medido em 360px: o
   "responsabilidade" do hero de /site saia 29px para fora da viewport. O guia proibe
   comprimir tipografia para caber (3.4), entao a saida e deixar a palavra quebrar.
   `overflow-wrap` so age quando a palavra REALMENTE nao cabe -- por isso ele vale em
   qualquer largura e nao mexe em titulo nenhum que ja esteja bem. */
.h1, .h2, .display, .hero .display { overflow-wrap: break-word; }

/* `hyphens:auto` foi TESTADO e DESCARTADO nos dois cenarios, olhando o render:
   - ligado em toda largura, o titulo do /indice virava "nego-cio" numa linha que cabia
     inteira;
   - ligado so abaixo de 480px, o hero de /site saia com TRES hifens ("en-vergonha",
     "repre-senta", "responsa-bilidade") -- pior que o estouro que ele resolvia.
   `overflow-wrap:break-word` sozinho quebra apenas a palavra que de fato nao cabe.
   Nao reintroduzir hifenizacao sem olhar as duas telas. */

/* =============================================================================
   PAGINA DE SERVICO — DUAS SECOES, MESMO MOLDE PARA TODAS
   Decisao do Founder (2026-08-03, S6): a pagina de servico deixa de ser landing page
   profunda e independente. Vira EXTENSAO DA HOME: duas secoes, so informacao essencial,
   alta conversao, elegante e sem exagero.

   Secao 1 (clara) apresenta o servico: marcador, o MESMO titulo do card da home (e o que
   faz a pagina ser continuacao e nao um segundo site), a promessa em uma linha, uma
   imagem, e o escopo em duas colunas: o que a ZEITH entrega / prazo e o que nao inclui.
   Isso cumpre a D13, que exige escopo, prazo e o que nao inclui em toda pagina de servico.
   Secao 2 (escura) fecha: uma frase, UM botao preenchido para o simulador (D13) e o
   indice como link de texto — a 10.3 do guia proibe dois botoes preenchidos lado a lado.

   As regras moram aqui, e nao em cada pagina, porque "mesma linguagem em todas as pontas"
   so sobrevive se existir um molde unico. Pagina que precisar de excecao esta errada.
   ============================================================================= */
.servico-abre .h1 { max-width: 22ch; }
.servico-promessa { margin-top: 24px; max-width: 54ch; color: var(--slate-600); }

/* Faixa, nao slab. Em 16:9 a imagem ocupava 643px de altura na largura do container e
   empurrava o escopo para fora da primeira tela -- o contrario de "minimalista, sem
   exagero". Em 21:9 com teto de 420px ela apoia o texto sem competir com ele. */
.servico-figura { margin: 48px 0 0; border-radius: var(--radius-image); overflow: hidden; }
/* As fotos de servico sao retrato 4:5 e a pessoa fica no terco de cima. Com o corte
   centrado, a faixa 21:9 comecava no queixo e sobrava um tronco sem cabeca. 20% sobe a
   janela ate o rosto. Se uma foto nova pedir outro ponto, sobrescrever no proprio <img>
   com o motivo escrito, como a home ja faz nos cards. */
.servico-figura img {
  width: 100%; aspect-ratio: 21 / 9; max-height: 420px;
  object-fit: cover; object-position: 50% 20%;
}

.servico-escopo { margin-top: 48px; display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 900px) {
  .servico-escopo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; }
}
.servico-bloco > .marker { display: block; padding-bottom: 16px; border-bottom: 1px solid var(--line-200); }

.servico-lista { margin-top: 24px; display: grid; gap: 16px; }
.servico-lista li { display: grid; grid-template-columns: 6px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.servico-lista li::before {
  content: ""; width: 6px; height: 6px; margin-top: 10px;
  border-radius: 50%; background: var(--zeith-blue);
}
.servico-lista li span { font-size: 16px; line-height: 1.55; }
@media (min-width: 1024px) { .servico-lista li span { font-size: 17px; line-height: 1.58; } }

/* Prazo, operacao e o que nao inclui: rotulo curto e resposta, sem virar tabela.
   NAO usar grid com gap aqui: num <dl>, dt e dd sao itens irmaos, entao o gap separa o
   rotulo da propria resposta com o mesmo espaco que separa um par do outro, e o bloco
   perde a leitura de par. O par se mantem junto pela margem do dt. */
.servico-fatos { margin: 24px 0 0; }
.servico-fatos dt { margin-top: 24px; font-size: 15px; font-weight: 600; line-height: 1.25; }
.servico-fatos dt:first-of-type { margin-top: 0; }
.servico-fatos dd { margin: 4px 0 0; font-size: 16px; line-height: 1.55; color: var(--slate-600); }
@media (min-width: 1024px) { .servico-fatos dd { font-size: 17px; line-height: 1.58; } }

/* AREA DE DADOS. Decisao do Founder (2026-08-03): cada pagina de servico mostra dado
   atualizado, de fonte reconhecida, que justifica implementar aquilo. Fica DENTRO da
   secao 1, e nao vira uma terceira secao: a pagina continua com duas.
   Regra que nao se negocia: numero sem fonte, sem data e sem tamanho de amostra nao entra
   (DOC8 Parte 3, regra 2). A linha de fonte e obrigatoria e diz tambem o PAIS da pesquisa
   -- as duas usadas sao dos Estados Unidos, e apresentar isso como se fosse dado
   brasileiro seria mentir por omissao. */
.servico-dados { margin-top: 48px; padding: 32px; background: var(--mist-100); border-radius: var(--radius-panel); }
@media (min-width: 900px) { .servico-dados { padding: 48px; } }
.servico-dados-grid { margin-top: 24px; display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 900px) { .servico-dados-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }
/* 36px e o H2 de mobile do guia (3.3). Escolhido no lugar dos 52px de desktop porque dois
   numeros a 52px gritam mais que o titulo da propria pagina. */
.dado-numero { font-size: 36px; font-weight: 700; line-height: 1.08; letter-spacing: -0.035em; color: var(--ink-950); }
.dado-texto { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--slate-600); max-width: 34ch; }
@media (min-width: 1024px) { .dado-texto { font-size: 17px; line-height: 1.58; } }
.servico-dados-fonte {
  margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line-200);
  font-size: 13px; line-height: 1.45; font-weight: 500; color: var(--slate-600);
}
.servico-dados-fonte a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }

/* =============================================================================
   PACOTE COMPLETO — a unica pagina de servico que foge do molde, de proposito
   Decisao do Founder (2026-08-03): esta pagina e uma PROPOSTA, nao uma descricao de
   servico. Continua com duas secoes, mas a secao 1 mostra a conta: cada item com o valor
   que ele custa avulso no simulador, a soma, e o preco do pacote. E o desconto que
   convence, e ele so convence se der pra conferir item por item.
   A oferta NAO TEM PRAZO por decisao dele. Sem contador, sem "so ate sexta".
   ============================================================================= */
.pacote-composicao { margin: 48px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
@media (min-width: 768px) { .pacote-composicao { grid-template-columns: repeat(4, 1fr); } }
.pacote-composicao img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 25%;
  border-radius: var(--radius-image);
}
@media (min-width: 768px) { .pacote-composicao img { aspect-ratio: 4 / 5; } }

.pacote-conta { margin-top: 48px; border-top: 1px solid var(--line-200); }
.pacote-linha {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px; align-items: baseline;
  padding-block: 16px; border-bottom: 1px solid var(--line-200);
}
.pacote-linha dt { font-size: 16px; line-height: 1.55; }
@media (min-width: 1024px) { .pacote-linha dt { font-size: 17px; line-height: 1.58; } }
/* Sem `tabular-nums`: na Schibsted ele da largura de algarismo ao PONTO tambem, e
   "R$ 2.199" renderizava como "R$ 2 . 199". A coluna ja alinha a direita pela grade. */
.pacote-linha dd { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--slate-600); white-space: nowrap; }
.pacote-linha--soma dt, .pacote-linha--soma dd { font-weight: 700; color: var(--ink-950); }
.pacote-linha--preco { border-bottom: none; padding-block: 24px 0; align-items: end; }
.pacote-linha--preco dt { font-size: 15px; font-weight: 600; }
.pacote-linha--preco dd { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.035em; color: var(--ink-950); }
@media (min-width: 1024px) { .pacote-linha--preco dd { font-size: 52px; } }
.pacote-economia { margin-top: 16px; font-size: 17px; font-weight: 600; color: var(--blue-deep); }

.pacote-sem-prazo {
  margin-top: 48px; padding: 32px;
  background: var(--blue-soft); border-radius: var(--radius-panel);
}
@media (min-width: 900px) { .pacote-sem-prazo { padding: 48px; } }
.pacote-sem-prazo .text-lg { max-width: 46ch; }
.pacote-sem-prazo .text-body { margin-top: 16px; max-width: 56ch; }

.servico-fecha .h2 { max-width: 20ch; }
.servico-fecha .text-lg { margin-top: 20px; max-width: 54ch; color: rgba(255,255,255,0.78); }
.servico-fecha-acoes { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }

/* Marcador: era "Geist Mono" nas 5 paginas internas. O guia proibe monoespacada como
   recurso tecnologico (3.4) e define o marcador em 12px / peso 700 (14.2). */
.eyebrow, .kicker, .overline {
  font-family: var(--font-sans);
  font-size: 12px; line-height: 1.2; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--blue-deep);
}