/* ============================================================
   ARQUITETEIA — DESIGN SYSTEM
   Brand Guidelines v2.0 "Creme" (Arquiteteia_Brand_Guidelines_v2_Creme.pdf)

   Dois temas no mesmo vocabulário de tokens:
     :root              -> CREME (padrão do site)
     [data-tema="dark"] -> TINTA (opcional)

   A proporção de referência do guia é 90% creme · 8% tinta · 2% terracota,
   e por isso o claro é o padrão — o escuro é a exceção, não o contrário.

   O PRETO PURO SAIU DO SISTEMA. O fundo escuro institucional é TINTA
   #1A1512, e sobre ele o texto é CREME BASE #F6EFE3. Nada de #000.

   Os nomes --dark-1..4 foram mantidos porque o site inteiro já os usa,
   mas o que eles significam agora é "escada de elevação de superfície",
   não "escada de pretos": no tema creme eles são tons de papel.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&family=Cinzel:wght@400;700;900&display=swap");
/* General Sans (Fontshare, livre para uso comercial) -- ver --font-body,
   abaixo, para o porquê da troca. */
@import url("https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap");

/* ============================================================
   TEMA CREME — padrão
   ============================================================ */

:root {
  /* ---- vocabulário do guia v2 (use estes em código novo) ---- */
  --terracota:       19 73% 53%;   /* #DF662E  CTA primário · acento    */
  --terracota-light: 19 72% 66%;   /* #E7926A  labels · hover           */
  --terracota-wash:  20 68% 77%;   /* #ECB69B  marca d'água · traços    */
  --creme-base:      38 51% 93%;   /* #F6EFE3  background               */
  --creme-surface:   33 52% 96%;   /* #FAF5EF  cards · popover          */
  --creme-deep:      38 40% 91%;   /* #F1EADE  fundo secundário         */
  --linha:           32 17% 80%;   /* #D5CDC4  bordas · inputs          */
  --cinza-linha:     33 11% 69%;   /* #B8B0A6  desabilitado · fio       */
  --tinta:           23 18% 9%;    /* #1A1512  texto primário · fundo escuro */
  --tinta-2:         28 15% 20%;   /* #3A322B  texto secundário         */
  --cinza-muted:     30  7% 53%;   /* #8F867D  legendas · dicas         */
  --alerta:           3 71% 41%;   /* #B3261E  erros · alertas          */

  /* EXCEÇÃO DELIBERADA E LOCALIZADA — pedida pelo cliente em 17/09/2026.
     Vale SÓ para a tela da abertura (`.ato1`) e o fundo das faixas
     (`.faixas`). Não é fundo institucional, não entra em `--background`,
     não substitui `--tinta` em lugar nenhum.

     Por quê: o logo da abertura vem com o preto ASSADO nos arquivos
     (`media/abertura.webm|mp4` e `media/abertura-final.webp`, 1360×560 —
     pixel medido: rgb(0,0,0) em todos os cantos). O `mix-blend-mode:
     screen` do `.mark` apaga esse preto contra o fundo — enquanto o
     `.mark` está em opacidade cheia. Na saída da abertura
     (`.ato1.saindo .mark { opacity: 0 }`) a opacidade < 1 transforma o
     `.mark` em GRUPO ISOLADO: o screen deixa de enxergar o fundo e o
     preto pinta cru. Medido em 1440×900: caixa #000000 contra tela
     #1B1613 — delta 27/255, o retângulo aparecia recortado.

     O cliente escolheu a direção: a TELA escurece até o tom da CAIXA.
     Valor = o pixel medido da caixa, não um palpite: #000000 / hsl(0 0% 0%).
     Hero e faixas precisam do MESMO valor — a abertura não rola até a
     primeira faixa, ela dissolve nela com a tela chapada no meio. */
  --tela-abertura:    0  0%  0%;   /* #000000  só .ato1 e .faixas       */

  /* Terracota escurecido só para texto pequeno sobre creme: a cor de
     marca dá 3,02:1 no claro, e a sobrelinha tem 11px. Medido, não
     estimado. No tema tinta este token volta a ser o terracota puro. */
  --terracota-texto: 19 73% 41%;   /* #B54D1C  4,54:1 sobre o creme     */

  /* Mesmo caso do terracota-texto: --cinza-muted (legendas de 10-14px)
     dá só 3,11-3,25:1 sobre o creme e o creme-surface — reprova AA.
     Escurecido pra 4,77-4,99:1 medido no navegador (Playwright, pixel
     renderizado), mesma família de matiz (30°, cinza quente), sem chegar
     em preto nem esfriar o tom. O tema tinta nem usa este token: --grey
     lá já é outro valor, fixo, e já passava (10,68:1 medido). */
  --cinza-texto:      30  7% 41%;   /* #706961  4,77:1 sobre o creme     */

  /* ---- camada semântica (shadcn; uso: hsl(var(--x))) ---- */
  --background: var(--creme-base);
  --foreground: var(--tinta);
  --card: var(--creme-surface);
  --card-foreground: var(--tinta);
  --popover: var(--creme-surface);
  --popover-foreground: var(--tinta);
  --primary: var(--terracota);
  --primary-foreground: var(--creme-base);
  --secondary: var(--creme-deep);
  --secondary-foreground: var(--tinta);
  --muted: var(--creme-deep);
  --muted-foreground: var(--cinza-texto);
  --accent: var(--terracota);
  --accent-foreground: var(--creme-base);
  --destructive: var(--alerta);
  --destructive-foreground: var(--creme-base);
  --border: var(--linha);
  --input: var(--linha);
  --ring: var(--terracota);
  --radius: 0rem;

  /* ---- escada de elevação de superfície ---- */
  --dark:   var(--creme-base);      /* fundo base / seção A            */
  --dark-2: var(--creme-surface);   /* seção B, cards, modais          */
  --dark-3: var(--creme-deep);      /* seção C, hover de card          */
  --dark-4: var(--linha);           /* bordas, header de tabela        */

  /* ---- texto ----
     Os nomes vieram do sistema escuro. O papel é que importa:
     --grey       = texto secundário
     --grey-light = corpo de texto longo (fazia o papel do #CCCCCC) */
  --grey:       var(--cinza-texto);
  --grey-light: var(--tinta-2);

  /* ---- alias do laranja: o site inteiro chama --orange ---- */
  --orange:       var(--terracota);
  --orange-light: var(--terracota-light);
  --orange-glow:  19 73% 53% / .12;

  /* ---- tipografia (guia v2: Garamond · Trajan Pro · Optima) ----
     Trajan Pro não tem equivalente livre exato; Cinzel faz o papel das
     maiúsculas romanas.

     O CORPO TROCOU (18/09/2026), e isto fecha a pendência do item 3 do
     ESTADO.md: "Optima" é fonte de sistema só no Mac -- todo visitante
     em Windows e Android lia Segoe UI, que nunca foi testada nem
     aprovada (ver a comparação em media/fontes.html, que não incluía
     esta opção). A referência pedida (arqui9.com) usa PP Neue Montreal
     no corpo, mas é fonte paga (fundição Pangram Pangram) -- não dá pra
     embutir sem licença. **General Sans**, da Fontshare, é o
     substituto de praxe para ela (mesma família geométrica, mesmo 'a' e
     'g' de dois andares, altura-x parecida) e é livre para uso
     comercial. Garamond (títulos) e Cinzel (labels) não mudaram: a
     troca é só no papel que estava quebrado. */
  --font-display: "EB Garamond", "Garamond", "Times New Roman", serif;
  --font-body:    "General Sans", "Optima", "Segoe UI", "Candara", "Calibri", sans-serif;
  --font-accent:  "Cinzel", "Trajan Pro", serif;
}

/* ============================================================
   TEMA TINTA — opcional
   Herda a marca; troca só as superfícies e o texto. O terracota é o
   mesmo nos dois temas: é a cor da marca, não do tema.
   ============================================================ */

[data-tema="dark"] {
  --background: var(--tinta);
  --foreground: var(--creme-base);
  --card:            23 15% 13%;
  --card-foreground: var(--creme-base);
  --popover:            23 15% 13%;
  --popover-foreground: var(--creme-base);
  --primary-foreground: var(--creme-base);
  --secondary:           24 13% 17%;
  --secondary-foreground: var(--creme-base);
  --muted:            25 12% 22%;
  --muted-foreground: 30 7% 60%;
  --accent-foreground: var(--creme-base);
  --border: 25 12% 22%;
  --input:  25 12% 22%;

  --dark:   var(--tinta);
  --dark-2: 23 15% 13%;
  --dark-3: 24 13% 17%;
  --dark-4: 25 12% 22%;

  --grey:       30 7% 60%;
  --grey-light: 33 11% 82%;

  --orange-glow: 19 73% 53% / .15;
  --terracota-texto: var(--terracota);   /* 5,24:1 sobre tinta: passa puro */
}

/* ============================================================
   BASE
   ============================================================ */

* { border-color: hsl(var(--border)); }
html { scroll-behavior: smooth; }

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
  transition: background-color .4s ease, color .4s ease;
}

/* Grão de filme sobre a página inteira — assinatura da marca.
   fractalNoise 0.9 / 4 octaves, opacidade final ≈ 0.016 (0.04 × 0.4).

   SEM mix-blend-mode (18/09/2026). Era multiply no creme, e era a maior
   causa do site "travado": um blend numa camada fixa por cima de TUDO
   obriga a GPU a recompor a tela inteira numa superfície intermediária a
   cada quadro em que qualquer coisa mexe (rolagem, letreiro, filete).
   Medido a 1440x900 (escala 125%, Intel UHD), rolando as faixas: 63 fps
   com multiply, 96 sem; GPU ocupada 7,1 s -> 5,4 s no mesmo trecho.
   E a troca não se vê: a 1,6% de opacidade, multiply e normal escurecem
   o creme praticamente o mesmo tanto (o ruído é mais escuro que o papel,
   então normal também escurece); só sobre foto escura o normal clareia,
   ~1–2 níveis de RGB. O tema escuro já usava normal. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: .4;
}

.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 2rem;
}
@media (min-width: 1400px) { .container { max-width: 1400px; } }

/* ============================================================
   CAMADA DE COMPONENTES (as 12 classes próprias do site)
   ============================================================ */

.font-display { font-family: var(--font-display); }
.font-accent  { font-family: var(--font-accent); }

.text-grey       { color: hsl(var(--grey)); }
.text-grey-light { color: hsl(var(--grey-light)); }
.bg-dark-2 { background-color: hsl(var(--dark-2)); }
.bg-dark-3 { background-color: hsl(var(--dark-3)); }
.bg-dark-4 { background-color: hsl(var(--dark-4)); }

/* Sobrelinha de seção — Cinzel, 11px, tracking 5px, terracota */
.section-eyebrow {
  margin-bottom: 1.5rem;
  font-family: var(--font-accent);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 5px;
  color: hsl(var(--terracota-texto));
}

/* Título de seção — A LETRA DO SITE INTEIRO.
   Cinzel (--font-accent) em caixa alta, peso 400, 0.1em de tracking: a
   letra que o cliente apontou em "PORTFÓLIOS EM VÍDEO". Antes só o
   portfólio e os vídeos tinham isso, repetido numa regra própria; agora
   está aqui, uma vez, e vale em toda dobra que usa .section-title.

   O CORPO NÃO MUDOU: segue o clamp(42px, 5vw, 70px) de sempre.

   Três coisas que a caixa alta obrigou, medidas no navegador:
   · line-height .95 -> 1.12. O acento da Cinzel sobe 0,19em acima da
     caixa alta (Á sobe 37px num corpo de 200px, medido em pixel) e a
     cedilha desce ~0,15em abaixo da linha de base. A .95 sobrava 0,06em
     entre uma linha e outra: o Á de "À REALIDADE" encostava no Ç da
     linha de cima. A 1.12 sobram 0,26em.
   · max-width 700px -> 820px. A mesma frase em Cinzel caixa alta com
     0.1em ocupa cerca de 1,5x a largura da Garamond em caixa mista —
     700px que davam ~20 caracteres passam a dar ~14, e os títulos
     viravam escadinha. 820px era o que a dobra de dados já pedia num
     remendo local; virou o padrão, e o remendo saiu.
   · text-wrap: balance, pra o rag não largar uma palavra órfã na última
     linha agora que cabe menos por linha.

   Onde a COLUNA é estreita demais pra esse corpo, a correção é local e
   está comentada no index.html: hoje só .dobra--lado (coluna de 320px).
   A dobra de contato usa o corpo cheio: a coluna da fala tem 646px a
   1440 e "VAMOS CONVERSAR?" quebra em duas linhas sem apertar. */
.section-title {
  font-family: var(--font-accent);
  font-size: clamp(42px, 5vw, 70px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 820px;
  margin-bottom: 48px;
}

.h-rule { height: 1px; background: hsl(var(--dark-4)); }

/* Card de número/estatística — filete terracota que cresce no hover */
.stat-card {
  background: hsl(var(--dark-2));
  border: 1px solid hsl(var(--border));
  padding: 24px 20px;
  position: relative;
  overflow: hidden;
  transition: all .3s ease;
  min-height: 160px;
  height: 100%;
}
@media (min-width: 768px) { .stat-card { padding: 40px 36px; min-height: 200px; } }
.stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: hsl(var(--orange));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}
.stat-card:hover::before { transform: scaleX(1); }

/* Variante de cliente — filete inferior fixo, em degradê */
.client-stat {
  background: hsl(var(--dark-2));
  border: 1px solid hsl(var(--border));
  padding: 20px 16px;
  position: relative;
  overflow: hidden;
  min-height: 140px;
  height: 100%;
}
@media (min-width: 768px) { .client-stat { padding: 32px 28px; min-height: 180px; } }
.client-stat::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(to right, hsl(var(--orange)), transparent);
}

/* Barra de dados */
.data-bar-track { height: 6px; background: hsl(var(--dark-4)); position: relative; }
.data-bar-fill {
  height: 100%;
  background: linear-gradient(to right, hsl(var(--orange)), hsl(var(--orange-light)));
  transition: width 1s ease;
}

/* Marcador numérico de lista (24×24, quadrado terracota) */
.benefit-num {
  width: 24px; height: 24px;
  background: hsl(var(--orange));
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: hsl(var(--primary-foreground));
  flex-shrink: 0;
  margin-top: 1px;
}

/* Caixa de destaque/insight — único lugar com raio (2px) */
.client-insight {
  background: linear-gradient(135deg, hsl(var(--orange-glow)), transparent);
  border: 1px solid hsl(var(--orange) / .2);
  border-radius: 2px;
  padding: 32px 36px;
}
.client-insight-alt {
  border-color: hsl(var(--border));
  background: hsl(var(--dark-3));
}

.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Ícone dentro de input — fica terracota no foco do campo */
.form-icon {
  pointer-events: none;
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  height: 1.25rem; width: 1.25rem;
  color: hsl(var(--grey));
  transition: color .2s ease;
}
.relative:focus-within > .form-icon { color: hsl(var(--orange)); }