@charset "UTF-8";
/* =========================================================
   OHR AI: Design System

   Paleta de cores sagradas do judaísmo:
     tekhelet  azul do tabernáculo e das vestes do sumo sacerdote
     branco    pureza
     ouro      utensílios do templo
     argaman   púrpura real

   Símbolo: Ner Tamid, a chama perpétua. Não o sol.

   DECISÃO DE SUPERFÍCIE: base neutra FRIA, não off-white quente.
   A paleta já tem calor vindo do ouro. Base quente cria dois tons quentes
   competindo e o ouro perde impacto. Com base fria o ouro fica sendo o único
   elemento quente da tela, ou seja, o ponto focal natural. Neutro frio também
   lê como técnico e preciso, que é o registro certo para B2B de tecnologia.

   TODO par de cor foi verificado por check_contrast.py (47 pares, todos AA+).
   Rodar `python check_contrast.py` antes de mudar qualquer cor.

   REGRAS DURAS:
     - --gold NUNCA como texto sobre superfície clara (2,10:1, reprova).
       Texto na cor ouro sobre claro usa --gold-ink (5,97:1 no branco).
     - --line é divisória decorativa, isenta por WCAG 1.4.11.
       Borda de componente interativo usa --line-ui (4,00:1 no branco).
     - --argaman funciona como texto em fundo claro (7,80:1) mas NÃO em
       fundo escuro (1,94:1). Sobre escuro usar --gold-soft.
   ========================================================= */

/* ---------- Transição entre páginas (View Transitions API) ---------- */
@view-transition { navigation: auto; }

:root {
  /* ---- Superfícies frias ---- */
  --white:     #FFFFFF;
  --canvas:    #F6F8FC;
  --canvas-2:  #EDF1F9;
  --canvas-3:  #E3E9F5;

  /* ---- Azul tekhelet ---- */
  --ink:       #0F1B33;
  --deep:      #14306E;
  --blue:      #1D47A8;
  --mute:      #4A5878;

  /* ---- Bordas, dois propósitos ---- */
  --line:      #DCE3EF;   /* decorativa, isenta de contraste */
  --line-ui:   #767F96;   /* componente interativo, 3:1+ */

  /* ---- Ouro do templo ---- */
  --gold:      #D4AF37;   /* decoração e uso sobre azul */
  --gold-ink:  #7D5F14;   /* texto na cor ouro sobre claro */
  --gold-soft: #F2E09B;   /* ouro claro sobre azul */

  /* ---- Argaman ---- */
  --argaman:     #6B2D8C;
  --argaman-ink: #5A2478;

  /* Nota: tola'at shani, o escarlate do Mishkan (#93202E), fecharia a tríade
     canônica com tekhelet e argaman. Foi testado como contorno da chama e
     revertido por competir com o ouro. Token não declarado de propósito:
     variável sem uso apodrece. Se voltar, revalidar em check_contrast.py. */

  /* ---- Semântica ---- */
  --ok:   #0C6B44;
  --warn: #8A5A00;
  --err:  #B3261E;

  /* ---- Tipografia ---- */
  --f-display: 'Sora', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;
  /* Hebraico precisa de fonte própria. Inter, Sora e JetBrains Mono não
     cobrem o bloco U+0590 a U+05FF, então os 984 caracteres hebraicos do
     site caíam em fonte do sistema. Pior: o conteúdo usa nikkud (qamats,
     holam, dagesh, shin dot), e fonte sem posicionamento de marca desloca
     ou empilha esses sinais, que é o defeito visível relatado.
     Frank Ruhl Libre é serif hebraica desenhada com nikkud. Os fallbacks
     cobrem macOS, Windows e Linux caso o webfont não carregue. */
  --f-heb: 'Frank Ruhl Libre', 'Noto Serif Hebrew', 'David Libre',
           'Times New Roman', serif;

  /* Escala fluida. clamp evita salto entre breakpoints. */
  --t-xs:  0.8125rem;
  --t-sm:  0.9375rem;
  --t-md:  1.0625rem;
  --t-lg:  clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
  --t-xl:  clamp(1.3125rem, 1vw + 1rem, 1.5rem);
  --t-2xl: clamp(1.5rem, 1.6vw + 1.1rem, 1.875rem);
  --t-3xl: clamp(1.875rem, 2.4vw + 1.2rem, 2.5rem);
  --t-4xl: clamp(2.25rem, 3.6vw + 1.2rem, 3.25rem);

  /* ---- Espaço, escala refinada ---- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s7: 32px;  --s8: 40px;
  --s9: 56px;  --s10: 72px; --s11: 96px; --s12: 128px;

  /* Ritmo vertical de seção, fluido.
     Era clamp(var(--s10), 7vw, var(--s12)), até 128px por lado. Medido em
     diag_densidade.py: páginas de serviço chegavam a 10,7 telas de notebook
     com densidade de 11-12 palavras/100px, e 45 seções do site ficavam
     abaixo de 6 pal/100px, ou seja, faixa alta com pouco conteúdo. Reduzido
     para no máximo 72px por lado. Ver nota completa perto de .section.tight. */
  --sec-y: clamp(var(--s8), 5vw, var(--s10));

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 32px;

  /* ---- Movimento ---- */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);      /* saída suave, entradas */
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);     /* mudança de estado */
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);  /* leve overshoot */
  --d-fast: 160ms;
  --d:      280ms;
  --d-slow: 520ms;

  --shadow-xs: 0 1px 2px rgba(15,27,51,.05);
  --shadow-sm: 0 2px 4px rgba(15,27,51,.05), 0 1px 2px rgba(15,27,51,.04);
  --shadow:    0 6px 18px rgba(15,27,51,.07), 0 2px 4px rgba(15,27,51,.04);
  --shadow-lg: 0 18px 48px rgba(15,27,51,.11), 0 4px 10px rgba(15,27,51,.06);
  --shadow-gold: 0 8px 28px rgba(212,175,55,.22);

  --container: 1240px;

  /* Altura do header sticky. Era um 88px solto no scroll-padding e valores
     próximos repetidos em position:sticky de outros blocos. Token único evita
     os três saírem de sincronia quando o header mudar de altura. */
  --header-h: 74px;
  --sticky-top: calc(var(--header-h) + var(--s4));

  /* ---- Breakpoints, escala consolidada ----
     Eram 13 valores ad-hoc por componente (640, 660, 700, 760, 840, 860,
     900, 920, 940, 960, 1000, 1040, 1080), um conjunto criado componente
     por componente em vez de uma escala pensada. Consolidados em 6,
     cada um nomeado pela função que exerce no layout, não pelo valor cru:

       --bp-sm     660px   cards pequenos, 1 coluna -> 2 colunas
       --bp-plan   840px   grid que salta de 1 para 3/4 colunas direto
                           (plan-grid, footer-grid, porte-tabs)
       --bp-md     900px   blocos split densos, 1 coluna -> 2 colunas
                           (rótulo+barra, fases, two-col, fx-*)
       --bp-md-lg  960px   hero e calculadora, 1 coluna -> 2 colunas,
                           com mais respiro que --bp-md
       --bp-lg    1040px   cards pequenos, 2 colunas -> 3/4 colunas
                           (segundo estágio da mesma família de --bp-sm)
       --bp-nav   1080px   troca de menu mobile/desktop no header,
                           isolado por ser decisão de UX, não de grid

     ATENÇÃO, LIMITAÇÃO REAL DO CSS: custom property (var()) NÃO funciona
     dentro de @media (min-width: ...). Não existe, em nenhum navegador,
     algo como @media (min-width: var(--bp-sm)). Os tokens abaixo servem
     SÓ como documentação para humano e como fonte que diag_responsivo.py
     lê via regex para validar a escala. Cada bloco @media no corpo deste
     arquivo continua com o valor em px literal, porque é a única forma
     que o CSS aceita hoje. Se a escala mudar de novo no futuro, edite os
     dois lugares: este comentário/estes tokens E cada @media que usa o
     valor antigo. Editar só um dos dois lados não muda o layout. */
  --bp-sm:    660px;
  --bp-plan:  840px;
  --bp-md:    900px;
  --bp-md-lg: 960px;
  --bp-lg:   1040px;
  --bp-nav:  1080px;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--sticky-top);   /* header sticky não cobre âncora */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--f-body);
  font-size: var(--t-md);
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 700;
  color: var(--deep);
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ===== Acessibilidade ===== */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--deep); color: var(--white);
  padding: var(--s3) var(--s6); font-weight: 600;
  border-radius: 0 0 var(--r) 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--deep);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== Layout ===== */
.container {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: clamp(var(--s5), 4vw, var(--s8));
}
.container.narrow { max-width: 800px; }
.center { text-align: center; }

.section { padding-block: var(--sec-y); }
.section.band { background: var(--canvas); }

.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: var(--s4);
  display: flex; align-items: center; gap: var(--s3);
}
.eyebrow::before {
  content: ''; width: 22px; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  flex-shrink: 0;
}
.eyebrow.center { justify-content: center; }
.eyebrow.center::before { display: none; }

.section h2, .cta-final h2 {
  font-size: var(--t-3xl);
  margin-bottom: var(--s5);
  max-width: 30ch;
}
.section h2.center, .cta-final h2 { margin-inline: auto; }

.lead {
  color: var(--mute);
  font-size: var(--t-lg);
  max-width: 66ch;
  margin-bottom: var(--s9);
}
.lead.center { margin-inline: auto; }

.micro { font-size: var(--t-sm); color: var(--mute); }

/* Prosa: bloco de leitura longa com ritmo próprio */
.prose { max-width: 68ch; }
.prose p { color: var(--mute); }
.prose p + p { margin-top: var(--s6); }
.prose strong { color: var(--deep); font-weight: 600; }
.prose > p:first-of-type::first-letter {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.15em; color: var(--deep);
}

/* Split: conteúdo principal com aside */
.split { display: grid; gap: var(--s9); align-items: start; }
@media (min-width: 960px) {
  .split { grid-template-columns: 1.35fr 0.85fr; gap: var(--s10); }
}

/* ===== Chama, Ner Tamid =====
   O desenho interno é a própria curva da chama em escala reduzida, com os nós
   apoiados nela. Um clipPath com a silhueta a 86% serve de guarda: o desenho
   fica a 68%, então nunca encosta na borda do fogo nem é cortado. */
.chama { flex-shrink: 0; }

.ner-net { animation: nerNet 5.2s var(--ease-io) infinite; }
.ner-nodes { animation: nerNodes 5.2s var(--ease-io) infinite; }
@keyframes nerNet {
  0%, 100% { opacity: .3; }
  50%      { opacity: .55; }
}
@keyframes nerNodes {
  0%, 100% { opacity: .7; }
  50%      { opacity: 1; }
}

/* Brilho dourado sutil, sem halo colorido competindo com o ouro */
.ner .chama { animation: nerGlow 6s ease-in-out infinite; }
@keyframes nerGlow {
  0%, 100% { filter: drop-shadow(0 6px 22px rgba(212,175,55,.28)); }
  50%      { filter: drop-shadow(0 8px 34px rgba(212,175,55,.46)); }
}

/* ===== Botões ===== */
/* Alturas escolhidas contra o WCAG 2.5.5, que pede alvo de toque de 44x44
   para nível AAA. 44 na base e 48 no grande mantêm o AAA sem inflar o botão.
   A versão anterior usava 50 e 58, o que ficava desproporcional ao corpo de
   texto de 17px. */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  /* Padding lateral maior que o de um botao retangular, de proposito.
     A ponta arredondada de um pill consome espaco optico nas laterais: com
     24px de padding num botao de 44px de altura, a razao fica em 0,55 e o
     rotulo parece encostado na borda curva, o que le como botao alto e
     estreito. Em 32px a razao vai a 0,73, que e a faixa em que pill fica
     equilibrado. */
  padding: var(--s3) var(--s7);
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-weight: 600; font-size: 0.9375rem;
  letter-spacing: -0.005em;
  cursor: pointer; text-decoration: none;
  min-height: 44px;
  transition: transform var(--d) var(--ease), background var(--d),
              box-shadow var(--d), border-color var(--d), color var(--d);
}
.btn:hover { text-decoration: none; transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }

/* Varredura de luz no hover, coerente com o conceito de luz */
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%,
              rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform var(--d-slow) var(--ease);
}
.btn:hover::after { transform: translateX(120%); }

.btn-primary {
  background: var(--deep); color: var(--white);
  box-shadow: var(--shadow);
}
.btn-primary:hover { background: var(--ink); box-shadow: var(--shadow-lg); }

.btn-ghost {
  background: var(--white); color: var(--deep);
  border-color: var(--line-ui);
}
.btn-ghost:hover { background: var(--canvas-2); border-color: var(--deep); }

.btn-sm { padding: var(--s2) var(--s5); font-size: 0.875rem; min-height: 38px; }
.btn-lg { padding: var(--s4) var(--s8); font-size: 1rem; min-height: 48px; }
.btn-block { width: 100%; }
.btn-arrow { transition: transform var(--d) var(--ease-back); }
.btn:hover .btn-arrow { transform: translateX(5px); }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--d), background var(--d);
  view-transition-name: site-header;
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
  background: rgba(255,255,255,.94);
}
.header-inner {
  display: flex; align-items: center; gap: var(--s6);
  min-height: var(--header-h);
}

.logo { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; }
.logo:hover { text-decoration: none; }
.logo .chama { transition: transform var(--d) var(--ease-back); }
.logo:hover .chama { transform: scale(1.08) rotate(-3deg); }
.logo-text {
  font-family: var(--f-display); font-weight: 800;
  font-size: var(--t-lg); letter-spacing: .05em; color: var(--deep);
}
.logo-ai { color: var(--gold-ink); }

.nav-desktop { display: none; margin-left: auto; }
.nav-desktop > ul { display: flex; align-items: center; gap: var(--s1); }
.nav-desktop a, .nav-sub-toggle {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--s1);
  color: var(--mute); font-size: var(--t-sm); font-weight: 500;
  padding: var(--s3) var(--s4); border-radius: var(--r-sm);
  background: none; border: 0; cursor: pointer;
  transition: color var(--d-fast), background var(--d-fast);
}
.nav-desktop a:hover, .nav-sub-toggle:hover {
  color: var(--deep); background: var(--canvas-2); text-decoration: none;
}
/* Sublinhado que desenha da esquerda */
.nav-desktop > ul > li > a::after {
  content: ''; position: absolute; left: var(--s4); right: var(--s4); bottom: 4px;
  height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d) var(--ease);
}
.nav-desktop > ul > li > a:hover::after { transform: scaleX(1); }
.nav-desktop a[aria-current="page"] { color: var(--deep); font-weight: 600; }
.nav-desktop a[aria-current="page"]::after { transform: scaleX(1); }

.caret {
  width: 0; height: 0; margin-left: 2px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform var(--d) var(--ease);
}
.nav-sub-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }

.has-sub { position: relative; }
.nav-sub {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 320px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding: var(--s3);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px) scale(.98);
  transform-origin: top left;
  transition: opacity var(--d) var(--ease), transform var(--d) var(--ease),
              visibility var(--d);
}
.has-sub:hover .nav-sub,
.nav-sub-toggle[aria-expanded="true"] + .nav-sub {
  opacity: 1; visibility: visible; transform: none;
}
.nav-sub a { display: block; padding: var(--s3) var(--s4); font-size: var(--t-sm); }
.nav-sub a::after { display: none; }
/* Entrada escalonada dos itens do submenu */
.nav-sub li { opacity: 0; transform: translateX(-6px); }
.has-sub:hover .nav-sub li,
.nav-sub-toggle[aria-expanded="true"] + .nav-sub li {
  animation: subIn var(--d) var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes subIn { to { opacity: 1; transform: none; } }

.nav-cta { display: none; }

.menu-toggle {
  margin-left: auto; background: var(--white);
  border: 1px solid var(--line-ui); border-radius: 10px;
  width: 48px; height: 48px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s1);
  transition: border-color var(--d-fast), background var(--d-fast);
}
.menu-toggle:hover { border-color: var(--deep); background: var(--canvas-2); }
.menu-toggle span {
  display: block; width: 18px; height: 2px; background: var(--deep); border-radius: 2px;
  transition: transform var(--d) var(--ease), opacity var(--d-fast);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  border-top: 1px solid var(--line);
  background: var(--white);
  padding-block: var(--s5) var(--s8);
  max-height: 76vh; overflow-y: auto;
  animation: mobileIn var(--d) var(--ease);
}
@keyframes mobileIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
.nav-mobile ul { display: flex; flex-direction: column; }
.nav-mobile > .container > ul > li { border-bottom: 1px solid var(--line); }
.nav-mobile a, .nav-mobile .nav-sub-toggle {
  display: block; width: 100%; text-align: left;
  padding: var(--s5) 0; color: var(--ink); font-weight: 500;
  background: none; border: 0; cursor: pointer; font-size: var(--t-md);
}
.nav-mobile .nav-sub {
  position: static; opacity: 1; visibility: visible; transform: none;
  box-shadow: none; border: 0; border-left: 2px solid var(--gold);
  border-radius: 0; margin: 0 0 var(--s4) var(--s3); padding: 0 0 0 var(--s5);
  /* Acordeão suave via grid-template-rows */
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--d) var(--ease);
  overflow: hidden;
}
.nav-mobile .nav-sub > * { min-height: 0; }
.nav-mobile .nav-sub-toggle[aria-expanded="true"] + .nav-sub { grid-template-rows: 1fr; }
.nav-mobile .nav-sub li { opacity: 1; transform: none; animation: none; }
.nav-mobile .nav-sub a { padding: var(--s3) 0; font-size: var(--t-sm); color: var(--mute); }
.nav-mobile .btn { margin-top: var(--s6); }

/* --bp-nav: 1080px. Isolado das demais famílias de propósito: é o ponto de
   troca entre menu hambúrguer e menu horizontal, decisão de UX que não
   depende de quantas colunas cabem no grid de conteúdo. Ver nota completa
   na declaração de --bp-nav no :root. */
@media (min-width: 1080px) {
  .nav-desktop { display: block; }
  .nav-cta { display: inline-flex; }
  .menu-toggle { display: none; }
  .nav-mobile { display: none !important; }
}

/* ===== Breadcrumb ===== */
.crumbs { background: var(--canvas-2); border-bottom: 1px solid var(--line); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s2); padding-block: var(--s3); }
.crumbs li { font-size: var(--t-xs); color: var(--mute); }
.crumbs li + li::before { content: '/'; margin-right: var(--s2); color: var(--line-ui); }
.crumbs a { color: var(--mute); }
.crumbs a:hover { color: var(--deep); }

/* ===== Hero ===== */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(var(--s10), 8vw, var(--s12)) var(--sec-y);
  background:
    radial-gradient(58% 68% at 88% 6%, rgba(212,175,55,.15), transparent 66%),
    radial-gradient(50% 60% at 2% 34%, rgba(107,45,140,.10), transparent 64%),
    var(--white);
}
.hero-sub-page { padding-block: clamp(var(--s9), 6vw, var(--s11)) var(--sec-y); }
.hero-inner { display: grid; gap: var(--s10); align-items: center; }
.hero-inner-solo { max-width: 860px; }

.hero h1 {
  font-size: var(--t-4xl);
  margin-bottom: var(--s6);
  max-width: 22ch;
}
.hero h1 em {
  display: block; font-style: normal;
  background: linear-gradient(96deg, var(--gold-ink) 0%, var(--argaman-ink) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold-ink);
}
.hero-sub { font-size: var(--t-lg); color: var(--mute); max-width: 58ch; margin-bottom: var(--s8); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s4); margin-bottom: var(--s5); }
.hero-micro { font-size: var(--t-sm); color: var(--mute); }

/* Entrada sequenciada do hero */
.hero-copy > * {
  opacity: 0;
  animation: heroIn var(--d-slow) var(--ease) forwards;
}
.hero-copy > *:nth-child(1) { animation-delay:  40ms; }
.hero-copy > *:nth-child(2) { animation-delay: 130ms; }
.hero-copy > *:nth-child(3) { animation-delay: 220ms; }
.hero-copy > *:nth-child(4) { animation-delay: 310ms; }
.hero-copy > *:nth-child(5) { animation-delay: 400ms; }
.hero-copy > *:nth-child(6) { animation-delay: 470ms; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.hero-visual { display: none; text-align: center; }
.ner { display: flex; justify-content: center; }
.ner-cap, .heb-cap {
  font-size: var(--t-xs); color: var(--mute);
  max-width: 36ch; margin: var(--s6) auto 0; line-height: 1.6;
}
.ner-cap strong, .heb-cap strong { color: var(--deep); }

.hero-visual-heb .big-heb {
  display: block; font-size: clamp(4.5rem, 12vw, 9rem);
  line-height: 1; color: var(--gold);
  direction: rtl; unicode-bidi: isolate;
  text-shadow: 0 4px 26px rgba(212,175,55,.3);
  animation: hebIn 800ms var(--ease) both 200ms;
}
@keyframes hebIn {
  from { opacity: 0; transform: scale(.9) translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (min-width: 960px) {
  .hero-inner { grid-template-columns: 1.2fr .8fr; }
  .hero-inner-solo { grid-template-columns: 1fr; }
  .hero-visual { display: block; }
}

/* hero-inner-wide, hero-aside, aside-title e aside-nav foram removidos daqui.
   Serviam só ao hero do pilar, que usava um card de índice (hero-aside) no
   lugar do símbolo da chama, e era o único dos quatro tipos de página sem
   Ner Tamid no hero. O pilar passou a usar o mesmo padrão de home/sobre/
   vertical: chama com legenda no hero-visual, e o índice virou nav inline
   (.page-nav, regra abaixo), igual ao das verticais. Ver diag_esqueleto.py. */

/* Índice de âncoras inline, no hero de pilares e verticais */
.page-nav {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  padding-top: var(--s6); border-top: 1px solid var(--line);
}
.page-nav a {
  font-size: var(--t-xs); font-family: var(--f-mono);
  color: var(--mute); background: var(--canvas-2);
  border: 1px solid var(--line); border-radius: 999px;
  padding: var(--s2) var(--s4);
  transition: all var(--d-fast) var(--ease);
}
.page-nav a:hover {
  color: var(--deep); border-color: var(--gold);
  background: var(--white); text-decoration: none; transform: translateY(-2px);
}

/* ===== Cards de vertical ===== */
.vgrid { display: grid; gap: var(--s5); }
.vcard {
  position: relative; overflow: hidden;
  display: block; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s7); color: inherit;
  box-shadow: var(--shadow-xs);
  transition: transform var(--d) var(--ease), box-shadow var(--d),
              border-color var(--d);
}
/* Faixa de luz que sobe no hover */
.vcard::before {
  content: ''; position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--argaman));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-slow) var(--ease);
}
.vcard:hover::before { transform: scaleX(1); }
.vcard:hover {
  transform: translateY(-6px); text-decoration: none;
  box-shadow: var(--shadow-lg); border-color: var(--line-ui);
}
.vcard-heb {
  display: block; font-size: 1.9rem; line-height: 1;
  color: var(--gold); margin-bottom: var(--s4);
  direction: rtl; unicode-bidi: isolate;
  transition: transform var(--d) var(--ease-back);
}
.vcard:hover .vcard-heb { transform: scale(1.1); }
.vcard h3 { font-size: var(--t-lg); margin-bottom: var(--s4); }
.vcard h3 span {
  display: block; font-family: var(--f-body); font-weight: 500;
  font-size: var(--t-sm); color: var(--mute); letter-spacing: 0; margin-top: 3px;
}
.vcard p { font-size: var(--t-sm); color: var(--mute); margin-bottom: var(--s5); }
.vcard-more {
  font-size: var(--t-sm); font-weight: 600; color: var(--blue);
  display: inline-flex; align-items: center; gap: var(--s2);
}
.vcard-more::after {
  content: '\2192'; transition: transform var(--d) var(--ease-back);
}
.vcard:hover .vcard-more::after { transform: translateX(5px); }

/* --bp-sm/--bp-lg: escala consolidada, ver nota completa no :root. */
@media (min-width: 660px)  { .vgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .vgrid { grid-template-columns: repeat(4, 1fr); } }

/* ===== Cards de pilar ===== */
.pgrid { display: grid; gap: var(--s5); }
.pcard {
  position: relative; overflow: hidden;
  display: block; color: var(--white);
  background: linear-gradient(158deg, var(--deep) 0%, var(--ink) 100%);
  border-radius: var(--r-lg); padding: var(--s8);
  box-shadow: var(--shadow);
  transition: transform var(--d) var(--ease), box-shadow var(--d);
}
.pcard::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 90% at 15% 0%, rgba(212,175,55,.18), transparent 62%);
  opacity: 0; transition: opacity var(--d-slow) var(--ease);
}
.pcard:hover::before { opacity: 1; }
.pcard:hover { transform: translateY(-6px); text-decoration: none; box-shadow: var(--shadow-lg); }
.pcard > * { position: relative; }
.pcard h3 { color: var(--gold-soft); font-size: var(--t-xl); margin-bottom: var(--s4); }
.pcard p { color: rgba(255,255,255,.85); font-size: var(--t-sm); margin-bottom: var(--s5); }
.pcard .vcard-more { color: var(--gold-soft); }

@media (min-width: 660px)  { .pgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }

/* ===== Listas ===== */
.check-list li, .x-list li {
  position: relative; padding-left: var(--s8);
  margin-bottom: var(--s4); font-size: var(--t-sm);
  color: var(--mute);
}
.check-list li strong, .x-list li strong { color: var(--deep); }
.check-list li::before, .x-list li::before {
  position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
}
.check-list li::before {
  content: '\2713'; color: var(--ok); background: rgba(12,107,68,.1);
}
.x-list li::before {
  content: '\2717'; color: var(--err); background: rgba(179,38,30,.09);
}
.check-list-lg li { font-size: var(--t-md); margin-bottom: var(--s5); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.chips li {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 999px; padding: var(--s2) var(--s5);
  font-size: var(--t-sm); color: var(--deep); font-weight: 500;
  transition: transform var(--d-fast) var(--ease), border-color var(--d-fast);
}
.chips li:hover { transform: translateY(-2px); border-color: var(--gold); }

/* ===== Caixas de apoio ===== */
.stack-box, .princ-box {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s7);
  box-shadow: var(--shadow-sm);
}
.stack-box h3, .princ-box h3 {
  font-size: var(--t-md); margin-bottom: var(--s4);
  padding-bottom: var(--s4); border-bottom: 1px solid var(--line);
}
.stack-box .micro { margin-bottom: var(--s5); }
.princ-box .check-list li { margin-bottom: var(--s5); }
.princ-box .check-list li:last-child { margin-bottom: 0; }
.princ-box > p:last-child {
  margin-top: var(--s6); padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

/* ===== Tabelas ===== */
.table-wrap {
  overflow-x: auto; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--white);
  box-shadow: var(--shadow-xs);
}
.metric-table, .ba-table { font-size: var(--t-sm); }
.metric-table th, .metric-table td,
.ba-table th, .ba-table td {
  padding: var(--s5) var(--s6); text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.metric-table thead th, .ba-table thead th {
  background: var(--canvas-2); color: var(--deep);
  font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  position: sticky; top: 0;
}
.metric-table tbody th {
  color: var(--deep); font-weight: 600; width: 34%;
  font-family: var(--f-body);
}
.metric-table tbody td { color: var(--mute); }
.metric-table tbody tr:last-child th,
.metric-table tbody tr:last-child td,
.ba-table tbody tr:last-child td { border-bottom: 0; }
.metric-table tbody tr, .ba-table tbody tr { transition: background var(--d-fast); }
.metric-table tbody tr:hover, .ba-table tbody tr:hover { background: var(--canvas); }

.ba-table th { width: 50%; }
.th-bad, .th-good {
  display: inline-flex; align-items: center; gap: var(--s2);
}
.th-bad::before {
  content: '\2717'; color: var(--err); font-size: 14px;
}
.th-good::before {
  content: '\2713'; color: var(--ok); font-size: 14px;
}
.td-bad { color: var(--mute); }
.td-good { color: var(--ink); font-weight: 500; border-left: 2px solid var(--gold); }

.resultado-box {
  max-width: 860px; margin: var(--s7) auto 0;
  background: var(--white); border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r) var(--r) 0;
  padding: var(--s6) var(--s7);
  font-size: var(--t-md); color: var(--mute);
}
.resultado-box strong { color: var(--deep); }

/* ===== Abas por porte ===== */
.porte-tabs {
  display: grid; grid-template-columns: 1fr; gap: var(--s3);
  max-width: 900px; margin: 0 auto var(--s8);
}
.porte-tab {
  position: relative; overflow: hidden;
  background: var(--white); border: 1.5px solid var(--line-ui);
  border-radius: var(--r); padding: var(--s5);
  cursor: pointer; text-align: center; min-height: 70px;
  display: flex; flex-direction: column; gap: 3px;
  transition: transform var(--d) var(--ease), border-color var(--d),
              background var(--d), box-shadow var(--d);
}
.porte-tab strong {
  font-family: var(--f-display); color: var(--deep); font-size: var(--t-md);
  transition: color var(--d);
}
.porte-tab span { font-size: var(--t-xs); color: var(--mute); transition: color var(--d); }
.porte-tab:hover { border-color: var(--deep); transform: translateY(-3px); }
.porte-tab.is-active {
  background: var(--deep); border-color: var(--deep);
  box-shadow: var(--shadow);
}
.porte-tab.is-active strong { color: var(--gold-soft); }
.porte-tab.is-active span { color: rgba(255,255,255,.8); }

/* --bp-plan: mesma familia de plan-grid, salta de 1 para 3 colunas direto,
   sem estagio intermediario de 2. Era 760px por acidente de quando foi
   escrito, sem relacao com nenhum outro grid do site. */
@media (min-width: 840px) { .porte-tabs { grid-template-columns: repeat(3, 1fr); } }

.porte-panes { max-width: 900px; margin-inline: auto; }
.porte-pane {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s8);
  box-shadow: var(--shadow-sm);
}
/* Sem JS os painéis ficam todos visíveis, nada de conteúdo se perde. */
.js .porte-panes { position: relative; }
.js .porte-pane {
  display: none;
  animation: paneIn 420ms var(--ease) both;
}
.js .porte-pane.is-active { display: block; }
@keyframes paneIn {
  from { opacity: 0; transform: translateY(14px) scale(.994); }
  to   { opacity: 1; transform: none; }
}
/* Itens do painel entram escalonados */
.js .porte-pane.is-active .check-list li {
  animation: itemIn 380ms var(--ease) both;
  animation-delay: calc(120ms + var(--i, 0) * 45ms);
}
@keyframes itemIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}

.pane-ctx {
  font-family: var(--f-display); font-weight: 600; font-size: var(--t-lg);
  color: var(--deep); padding-left: var(--s6);
  border-left: 3px solid var(--gold); margin-bottom: var(--s7);
}
.porte-pane h3 {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em;
  color: var(--mute); font-family: var(--f-mono); margin-bottom: var(--s5);
}
.pane-res {
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm); color: var(--mute);
}
.pane-res strong { color: var(--gold-ink); }

/* ===== Cards de item ===== */
.igrid { display: grid; gap: var(--s5); }
.icard {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s7);
  box-shadow: var(--shadow-xs);
  transition: transform var(--d) var(--ease), box-shadow var(--d),
              border-color var(--d);
}
.icard:hover {
  transform: translateY(-4px); box-shadow: var(--shadow);
  border-color: var(--line-ui);
}
.icard h3 {
  font-size: var(--t-md); margin-bottom: var(--s4);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--line);
}
.icard p { font-size: var(--t-sm); color: var(--mute); }

@media (min-width: 660px)  { .igrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .igrid { grid-template-columns: repeat(3, 1fr); } }

/* ===== Fases ===== */
.fases { display: grid; gap: var(--s5); counter-reset: f; }
.fase {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: var(--s6);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s7);
  box-shadow: var(--shadow-xs);
  transition: transform var(--d) var(--ease), box-shadow var(--d);
}
.fase:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.fase-num {
  font-family: var(--f-mono); font-weight: 700; font-size: var(--t-2xl);
  color: var(--gold-ink); line-height: 1; opacity: .85;
}
.fase h3 { font-size: var(--t-lg); margin-bottom: var(--s1); }
.fase-time {
  font-family: var(--f-mono); font-size: var(--t-xs);
  color: var(--argaman-ink); text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: var(--s4);
}
.fase > div > p:last-child { font-size: var(--t-sm); color: var(--mute); }

@media (min-width: 900px) { .fases { grid-template-columns: 1fr 1fr; } }

/* ===== Caixa de origem do nome ===== */
.ref-box {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s8);
  align-items: start; max-width: 900px; margin-inline: auto;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s8);
  box-shadow: var(--shadow-xs);
}
.ref-heb {
  font-size: 3.5rem; line-height: 1; color: var(--gold);
  direction: rtl; unicode-bidi: isolate;
}
.ref-box p { color: var(--mute); font-size: var(--t-sm); }
.ref-box p + p { margin-top: var(--s4); }
.ref-box p strong { color: var(--deep); }
.ref-src { font-style: italic; }

/* ===== Sobre ===== */
.story-lead {
  font-family: var(--f-display); font-weight: 600; font-size: var(--t-lg);
  color: var(--deep); padding-left: var(--s6);
  border-left: 3px solid var(--gold); margin-bottom: var(--s6);
}
.section p + p { margin-top: var(--s5); }

.cred-grid { display: grid; gap: var(--s7); margin-bottom: var(--s8); }
.cred { text-align: center; }
.cred span {
  display: block; font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 3.25rem); line-height: 1; color: var(--gold-ink);
  font-variant-numeric: tabular-nums; margin-bottom: var(--s3);
}
.cred p { font-size: var(--t-sm); color: var(--mute); }
.cred strong { color: var(--deep); }

@media (min-width: 660px)  { .cred-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .cred-grid { grid-template-columns: repeat(4, 1fr); } }

.nome-wrap { display: grid; gap: var(--s9); align-items: center; }
.nome-visual { display: grid; place-items: center; }

/* O אור saiu de dentro da chama e virou tipografia.
   Dois motivos. Primeiro, com o Magen David dentro do fogo, uma palavra
   também ali dentro sobrecarregava o símbolo. Segundo, o texto parecia
   descentralizado porque estava centrado na caixa do SVG, mas o centro
   visual da chama é o bulbo, a 73% da altura, não a 50%. Tirar resolve a
   causa em vez de compensar com deslocamento arbitrário. */
.nome-heb {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  line-height: 1;
  font-weight: 700;
  color: var(--gold-ink);
  direction: rtl; unicode-bidi: isolate;
  margin-bottom: var(--s4);
}
@media (min-width: 900px) { .nome-wrap { grid-template-columns: .62fr 1.38fr; } }

.valores-grid { display: grid; gap: var(--s5); margin-bottom: var(--s8); }
.valor {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s7);
  box-shadow: var(--shadow-xs);
  transition: transform var(--d) var(--ease), box-shadow var(--d),
              border-color var(--d);
}
.valor:hover {
  transform: translateY(-5px); box-shadow: var(--shadow);
  border-color: var(--gold);
}
.valor-heb {
  display: block; font-size: 2.1rem; line-height: 1;
  color: var(--gold); margin-bottom: var(--s4);
  direction: rtl; unicode-bidi: isolate;
  transition: transform var(--d) var(--ease-back);
}
.valor:hover .valor-heb { transform: scale(1.08); }
.valor-trans {
  font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--argaman-ink); margin-bottom: var(--s4);
}
.valor h3 { font-size: var(--t-md); margin-bottom: var(--s4); line-height: 1.35; }
.valor > p:last-child { font-size: var(--t-sm); color: var(--mute); }

/* Antes 640/1080, unico caso do site diferente do padrao 660/1040 usado
   pelos demais grids de 2->4 colunas (vgrid, cred-grid), por acidente, sem
   nenhuma razao visual. E o exemplo que motivou esta consolidacao. */
@media (min-width: 660px)  { .valores-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .valores-grid { grid-template-columns: repeat(4, 1fr); } }

/* ===== Transparência ===== */
.two-col { display: grid; gap: var(--s6); }
.col-pro, .col-con {
  border-radius: var(--r-lg); padding: var(--s8);
  border: 1px solid var(--line); background: var(--white);
  box-shadow: var(--shadow-xs);
}
.col-pro { border-top: 3px solid var(--ok); }
.col-con { border-top: 3px solid var(--warn); }
.col-pro h2, .col-con h2 {
  font-size: var(--t-lg); margin-bottom: var(--s6);
  display: flex; align-items: center; gap: var(--s3); max-width: none;
}
.col-pro h2 span { color: var(--ok); }
.col-con h2 span { color: var(--warn); }
.col-pro li, .col-con li {
  padding-bottom: var(--s5); margin-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm); color: var(--mute);
}
.col-pro li:last-child, .col-con li:last-child { border: 0; margin: 0; padding: 0; }
.col-pro strong, .col-con strong { color: var(--deep); }

@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } }

.nao-box {
  background: var(--white); border: 1px solid var(--line);
  border-top: 3px solid var(--err);
  border-radius: var(--r-lg); padding: var(--s8);
  box-shadow: var(--shadow-xs);
}
.nao-box h2 { font-size: var(--t-2xl); margin-bottom: var(--s5); }

/* ===== Preços ===== */
.anchor {
  background: var(--white); border: 1px solid var(--line);
  border-left: 3px solid var(--err);
  border-radius: 0 var(--r-lg) var(--r-lg) 0; padding: var(--s7);
  max-width: 760px; margin: 0 auto var(--s9);
  box-shadow: var(--shadow-xs);
}
.anchor-label {
  font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--err); margin-bottom: var(--s3);
}
.anchor p:last-child { color: var(--mute); }
.anchor strong { color: var(--deep); }

.plan-grid { display: grid; gap: var(--s5); }
.plan {
  background: var(--white); border: 1.5px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s8);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-xs);
  transition: transform var(--d) var(--ease), box-shadow var(--d);
}
.plan:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.plan-featured {
  border-color: var(--gold); box-shadow: var(--shadow-gold);
  position: relative;
}
.plan-featured:hover { box-shadow: var(--shadow-lg); }
.plan-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--deep); color: var(--gold-soft);
  font-size: var(--t-xs); font-weight: 700;
  padding: var(--s2) var(--s4); border-radius: 999px; white-space: nowrap;
}
.plan-name { font-size: var(--t-lg); margin-bottom: var(--s2); }
.plan-for { font-size: var(--t-sm); color: var(--mute); margin-bottom: var(--s6); }
.plan-price {
  font-family: var(--f-display); font-weight: 800;
  font-size: var(--t-3xl); color: var(--deep); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan-price small { font-size: var(--t-md); font-weight: 500; color: var(--mute); }
.plan-daily {
  font-family: var(--f-mono); font-size: var(--t-sm);
  color: var(--gold-ink); margin-block: var(--s3) var(--s6);
}
.plan-features { flex: 1; margin-bottom: var(--s6); }
.plan-features li {
  position: relative; padding-left: var(--s7);
  margin-bottom: var(--s4); font-size: var(--t-sm); color: var(--mute);
}
.plan-features li::before { content: '\2713'; position: absolute; left: 0; color: var(--ok); }
.plan-features li.is-off::before { content: '\2013'; color: var(--line-ui); }

@media (min-width: 840px) { .plan-grid { grid-template-columns: repeat(3, 1fr); } }

.guarantee {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s6);
  background: var(--white); border: 1px solid var(--line);
  border-top: 3px solid var(--ok);
  border-radius: var(--r-lg); padding: var(--s8);
  box-shadow: var(--shadow-xs);
}
.g-icon {
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(12,107,68,.1); color: var(--ok);
  display: grid; place-items: center; font-size: var(--t-xl);
}
.guarantee h2 { font-size: var(--t-lg); margin-bottom: var(--s4); }
.guarantee p { color: var(--mute); font-size: var(--t-sm); }

/* ===== Calculadora ===== */
.calc-wrap { display: grid; gap: var(--s8); align-items: start; }
.calc-inputs {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s8);
  box-shadow: var(--shadow-sm);
}
.field { margin-bottom: var(--s8); }
.field:last-child { margin-bottom: 0; }
.field > label { display: block; font-weight: 600; color: var(--deep); margin-bottom: var(--s4); }
.hint { display: block; font-weight: 400; font-size: var(--t-sm); color: var(--mute); margin-top: 3px; }

.range-row { display: flex; align-items: center; gap: var(--s5); }
input[type="range"] {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 999px; background: var(--canvas-3);
  border: 1px solid var(--line-ui); cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--deep); border: 3px solid var(--white);
  box-shadow: 0 2px 10px rgba(15,27,51,.28); cursor: grab;
  transition: transform var(--d-fast) var(--ease-back), background var(--d-fast);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); background: var(--ink); }
input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.04); }
input[type="range"]::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--deep); border: 3px solid var(--white);
  box-shadow: 0 2px 10px rgba(15,27,51,.28); cursor: grab;
}
.range-out {
  font-family: var(--f-mono); font-weight: 700; font-size: var(--t-lg);
  color: var(--deep); min-width: 86px; text-align: right;
  font-variant-numeric: tabular-nums;
}

.calc-result {
  position: sticky; top: var(--sticky-top); overflow: hidden;
  background: linear-gradient(162deg, var(--deep) 0%, var(--ink) 100%);
  border-radius: var(--r-lg); padding: var(--s8);
  box-shadow: var(--shadow-lg);
}
.calc-result::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(80% 70% at 90% 0%, rgba(212,175,55,.2), transparent 60%);
  pointer-events: none;
}
.calc-result > * { position: relative; }
.res-label {
  font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.74); margin-bottom: var(--s3);
}
.res-big {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.5rem, 6.5vw, 3.5rem); line-height: 1;
  color: var(--gold-soft); margin-bottom: var(--s7);
  font-variant-numeric: tabular-nums;
  transition: color var(--d-fast);
}
.res-big.is-updating { color: var(--white); }
.res-rows { border-top: 1px solid rgba(255,255,255,.2); margin-bottom: var(--s7); }
.res-row {
  display: flex; justify-content: space-between; gap: var(--s5);
  padding: var(--s4) 0; border-bottom: 1px solid rgba(255,255,255,.12);
  font-size: var(--t-sm);
}
.res-row span { color: rgba(255,255,255,.8); }
.res-row strong {
  font-family: var(--f-mono); color: var(--white);
  font-variant-numeric: tabular-nums;
}
.res-compare {
  background: rgba(0,0,0,.24); border-radius: var(--r);
  padding: var(--s5); margin-bottom: var(--s7);
  font-size: var(--t-sm); color: rgba(255,255,255,.88);
  animation: fade var(--d) var(--ease);
}
@keyframes fade { from { opacity: .4; } to { opacity: 1; } }
.res-compare strong { color: var(--gold-soft); }
.calc-result .btn-primary { background: var(--gold); color: var(--ink); }
.calc-result .btn-primary:hover { background: var(--gold-soft); }
.res-foot {
  font-size: var(--t-xs); color: rgba(255,255,255,.7);
  margin-top: var(--s4); text-align: center;
}

@media (min-width: 960px) { .calc-wrap { grid-template-columns: 1.08fr .92fr; } }

/* ===== FAQ, acordeão suave ===== */
.faq details {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); margin-bottom: var(--s3); overflow: hidden;
  transition: border-color var(--d), box-shadow var(--d);
}
.faq details:hover { border-color: var(--line-ui); }
.faq details[open] { box-shadow: var(--shadow-xs); border-color: var(--line-ui); }
.faq summary {
  padding: var(--s5) var(--s7); cursor: pointer; font-weight: 600;
  color: var(--deep); list-style: none; min-height: 58px;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s5);
  transition: background var(--d-fast);
}
.faq summary:hover { background: var(--canvas); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; color: var(--gold-ink); font-size: var(--t-xl);
  font-family: var(--f-mono); flex-shrink: 0; line-height: 1;
  transition: transform var(--d) var(--ease-back);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details p {
  padding: 0 var(--s7) var(--s6); color: var(--mute); font-size: var(--t-sm);
  animation: faqIn var(--d) var(--ease);
}
@keyframes faqIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ===== Formulário ===== */
.diag-form {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s8);
  box-shadow: var(--shadow);
}
.progress {
  height: 6px; background: var(--canvas-3); border-radius: 999px;
  overflow: hidden; margin-bottom: var(--s3);
}
.progress-bar {
  height: 100%; width: 25%; border-radius: 999px;
  background: linear-gradient(90deg, var(--deep), var(--blue));
  transition: width var(--d-slow) var(--ease);
  position: relative;
}
.progress-bar::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  animation: shimmer 1.8s linear infinite;
}
@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.progress-label {
  font-family: var(--f-mono); font-size: var(--t-xs);
  color: var(--mute); margin-bottom: var(--s8);
}

.step { border: 0; padding: 0; margin: 0; display: none; }
.step.is-active { display: block; animation: stepIn 420ms var(--ease); }
@keyframes stepIn {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}
.step legend {
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--t-xl); color: var(--deep);
  margin-bottom: var(--s7); padding: 0;
}

.rcards { display: grid; gap: var(--s3); }
.rcard {
  display: block; cursor: pointer; position: relative;
  background: var(--white); border: 1.5px solid var(--line-ui);
  border-radius: var(--r); padding: var(--s5) var(--s6); min-height: 62px;
  transition: all var(--d) var(--ease);
  animation: itemIn 340ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.rcard:hover { border-color: var(--deep); transform: translateY(-3px); box-shadow: var(--shadow-xs); }
.rcard input { position: absolute; opacity: 0; pointer-events: none; }
.rcard:has(input:checked) {
  border-color: var(--deep); background: var(--canvas-2);
  box-shadow: inset 0 0 0 1px var(--deep);
}
.rcard:has(input:focus-visible) { outline: 3px solid var(--deep); outline-offset: 3px; }
.rcard span { display: block; }
.rcard strong { display: block; font-size: var(--t-md); color: var(--deep); margin-bottom: 2px; }
.rcard em { font-style: normal; font-size: var(--t-sm); color: var(--mute); }

@media (min-width: 660px) { .rcards-2 { grid-template-columns: 1fr 1fr; } }

.diag-preview {
  background: var(--canvas-2); border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r) var(--r) 0; padding: var(--s5);
  margin-bottom: var(--s8); font-size: var(--t-sm); color: var(--mute);
}
.diag-preview strong { color: var(--deep); }

.diag-form input[type="text"], .diag-form input[type="email"], .diag-form input[type="tel"] {
  width: 100%; background: var(--white);
  border: 1.5px solid var(--line-ui); border-radius: var(--r);
  padding: var(--s4) var(--s5); min-height: 50px;
  transition: border-color var(--d-fast), box-shadow var(--d-fast);
}
.diag-form input:focus {
  border-color: var(--deep); outline: none;
  box-shadow: 0 0 0 3px rgba(20,48,110,.14);
}
.diag-form input[aria-invalid="true"] { border-color: var(--err); }
.field-error {
  display: block; color: var(--err); font-size: var(--t-sm);
  margin-top: var(--s2); min-height: 1.3em;
}

.checkbox { display: flex; gap: var(--s4); align-items: flex-start; cursor: pointer; }
.checkbox input { width: 22px; height: 22px; flex-shrink: 0; margin-top: 3px; accent-color: var(--deep); }
.checkbox span { font-size: var(--t-sm); color: var(--mute); }

.form-nav { display: flex; gap: var(--s4); margin-top: var(--s8); }
.form-nav .btn-primary { flex: 1; }

.form-success {
  background: var(--white); border: 1px solid var(--line);
  border-top: 3px solid var(--ok);
  border-radius: var(--r-lg); padding: var(--s11) var(--s8); text-align: center;
  box-shadow: var(--shadow);
  animation: paneIn 480ms var(--ease);
}
.s-icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto var(--s6);
  background: rgba(12,107,68,.1); color: var(--ok);
  display: grid; place-items: center; font-size: var(--t-2xl);
  animation: pop 520ms var(--ease-back) both 120ms;
}
@keyframes pop {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: none; }
}
.form-success h2 { font-size: var(--t-2xl); margin-bottom: var(--s4); }
.form-success p { color: var(--mute); }

/* ===== CTA final ===== */
.cta-final {
  position: relative; overflow: hidden;
  padding-block: var(--sec-y);
  background:
    radial-gradient(62% 100% at 50% 0%, rgba(212,175,55,.17), transparent 66%),
    var(--canvas);
  border-top: 1px solid var(--line);
}
.cta-final h2 { max-width: 28ch; }
.cta-final p { color: var(--mute); margin-bottom: var(--s8); font-size: var(--t-lg); }

/* ===== Footer ===== */
.site-footer { background: var(--ink); color: rgba(255,255,255,.8); padding-top: var(--s10); }
.footer-grid { display: grid; gap: var(--s8); padding-bottom: var(--s9); }
.footer-brand .logo-text { color: var(--white); }
.footer-brand .logo-ai { color: var(--gold); }
.footer-brand p { font-size: var(--t-sm); margin-top: var(--s4); max-width: 38ch; }
.footer-ner {
  padding-top: var(--s5); margin-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: var(--t-xs) !important; color: rgba(255,255,255,.64);
}
.footer-ner strong { color: var(--gold-soft); }
/* Nível h2 e não h4: cada <nav> do rodapé é landmark próprio, e h4 vindo
   depois de h2 criava salto de nível de título em todas as 22 páginas.
   Nível semântico não dita tamanho, então o visual segue pequeno. */
.site-footer h2 {
  font-size: var(--t-xs); margin-bottom: var(--s5); color: var(--white);
  font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .12em;
  max-width: none;
}
.site-footer nav a {
  display: block; color: rgba(255,255,255,.76);
  font-size: var(--t-sm); padding-block: var(--s2);
  transition: color var(--d-fast), transform var(--d-fast) var(--ease);
}
.site-footer nav a:hover {
  color: var(--gold-soft); text-decoration: none; transform: translateX(4px);
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-block: var(--s6); font-size: var(--t-xs);
  color: rgba(255,255,255,.58);
}
@media (min-width: 840px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

/* =========================================================
   REVELAÇÃO NO SCROLL
   Preferimos animação nativa ligada ao scroll quando o navegador
   suporta. O JS cobre o resto via IntersectionObserver.
   ========================================================= */
.js [data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* =========================================================
   MOVIMENTO REDUZIDO
   Vem por último para vencer qualquer regra acima.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .hero-copy > * { opacity: 1; }
  .btn:hover, .vcard:hover, .pcard:hover, .icard:hover,
  .valor:hover, .fase:hover, .plan:hover { transform: none; }
}

/* ---------------------------------------------------------
   HEBRAICO
   Aplicado depois de tudo, de propósito: sobrescreve as regras
   anteriores que herdavam --f-body ou --f-display para os
   elementos hebraicos, sem eu precisar caçar cada declaração.

   Além da fonte, três ajustes que o hebraico exige:
     direction rtl        a escrita corre da direita para a esquerda
     font-feature-settings  liga o posicionamento de nikkud
     line-height maior    as marcas ficam acima e abaixo da letra
                          e sufocam com entrelinha apertada
   --------------------------------------------------------- */
.vcard-heb,
.big-heb,
.ref-heb,
.valor-heb,
.nome-heb,
.hero-visual-heb .big-heb,
[lang="he"] {
  font-family: var(--f-heb);
  direction: rtl;
  unicode-bidi: isolate;
  line-height: 1.5;
  font-feature-settings: 'kern' 1, 'liga' 1;
  font-variant-ligatures: common-ligatures;
}

/* ---------------------------------------------------------
   CARDS EMPILHADOS
   igrid joga os cards em duas ou tres colunas, o que serve
   para card curto. Bloco com lista e paragrafo de limite
   fica estreito demais nesse layout, entao aqui e coluna
   unica com respiro entre os itens.
   --------------------------------------------------------- */
.stack-cards { display: grid; gap: var(--s5); }
.stack-cards .icard h4 {
  font-size: var(--t-sm); margin: var(--s5) 0 var(--s3);
  color: var(--deep);
}

/* ===========================================================
   GRAFICOS
   Gerados como SVG no build, ver charts.py. Nenhuma cor literal
   aqui: tudo token, para o check_contrast.py continuar sendo a
   fonte de verdade de contraste. Cor escrita direto no SVG seria
   cor fora do sistema, que nenhum validador conferiria.

   Animacao de entrada uma unica vez, e desligada em
   prefers-reduced-motion no bloco do fim do arquivo.
   =========================================================== */

/* ---------- Fluxo: como funciona ---------- */
.fluxo { margin-top: var(--s7); }
.fx-lista { display: grid; gap: var(--s6); list-style: none; }
.fx-item { display: grid; grid-template-columns: 48px 1fr; gap: var(--s5); }
.fx-marca { position: relative; display: flex; flex-direction: column;
  align-items: center; }
.fx-no { width: 48px; height: 48px; flex-shrink: 0; }
.fx-anel { fill: none; stroke: var(--line-ui); stroke-width: 1.5; }
.fx-miolo { fill: var(--deep); }
.fx-num { fill: var(--white); font-family: var(--f-mono); font-size: 15px;
  font-weight: 700; }
/* A linha liga um no ao proximo. O ultimo item nao recebe, por isso ela e
   irma do svg e nao pseudo-elemento do item. */
.fx-linha { flex: 1; width: 2px; min-height: var(--s5);
  background: linear-gradient(var(--line-ui), var(--line)); margin-top: 4px; }
.fx-texto h3 { font-size: var(--t-md); margin-bottom: var(--s2); }
.fx-texto p { color: var(--mute); font-size: var(--t-sm); }

@media (min-width: 900px) {
  .fx-lista { grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
  .fx-item { grid-template-columns: 1fr; text-align: center; }
  .fx-marca { flex-direction: row; width: 100%; justify-content: center; }
  .fx-linha { width: auto; height: 2px; min-height: 0; margin: 0 0 0 var(--s3);
    align-self: center;
    background: linear-gradient(90deg, var(--line-ui), var(--line)); }
}

/* ---------- Barras antes e depois ---------- */
.bdgraf { margin-top: var(--s6); display: grid; gap: var(--s5); }
.bd-legenda { display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-xs); color: var(--mute); font-family: var(--f-mono);
  text-transform: uppercase; letter-spacing: .08em; flex-wrap: wrap; }
.bd-chip { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.bd-chip + .bd-chip { margin-left: var(--s4); }
.bd-linha { display: grid; grid-template-columns: 1fr; gap: var(--s2);
  padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.bd-rot { font-size: var(--t-sm); font-weight: 500; }
/* Token, nao 6px solto: o audit_ui reprova px fora da escala em gap, margin e
   padding, e com razao, porque valor avulso e como escala de espaco vira
   trinta valores diferentes sem ninguem decidir. */
.bd-barras { display: grid; gap: var(--s2); }
.bd-trilha { background: var(--canvas-2); border-radius: var(--r-sm);
  overflow: hidden; }
.bd-barra { height: 26px; border-radius: var(--r-sm); width: var(--w);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: var(--s3); min-width: 3.5rem; }
.bd-val { font-family: var(--f-mono); font-size: var(--t-xs);
  color: var(--white); font-weight: 700; }
.bd-antes { background: var(--mute); }
.bd-depois { background: var(--ok); }
.bd-delta { font-family: var(--f-mono); font-size: var(--t-sm);
  color: var(--ok); font-weight: 700; }

/* --bp-md: mesma familia dos blocos split simples (nome-wrap, fases,
   two-col). Rotulo+barra e conteudo denso como esses, nao card generico. */
@media (min-width: 900px) {
  .bd-linha { grid-template-columns: 15rem 1fr 5rem; align-items: center;
    gap: var(--s5); }
  .bd-delta { text-align: right; }
}

/* ---------- Payback ---------- */
.pbfig { margin: var(--s6) 0 0; }
.pbgraf { width: 100%; height: auto; display: block; }
.pb-grade { stroke: var(--line); stroke-width: 1; }
.pb-area { fill: var(--ok); opacity: .10; }
.pb-linha { fill: none; stroke-width: 3; stroke-linejoin: round;
  stroke-linecap: round; }
.pb-eco { stroke: var(--ok); }
.pb-cus { stroke: var(--deep); stroke-dasharray: 7 5; stroke-width: 2.5; }
.pb-cruza line { stroke: var(--gold-ink); stroke-width: 1.5;
  stroke-dasharray: 3 3; }
.pb-cruza circle { fill: var(--gold-ink); }
.pb-eixo { fill: var(--mute); font-family: var(--f-mono); font-size: 12px; }
.pb-eixo-t { text-anchor: start; }
.pb-cap { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  font-size: var(--t-xs); color: var(--mute); font-family: var(--f-mono);
  text-transform: uppercase; letter-spacing: .08em; margin-top: var(--s3); }
.pb-key { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.pb-key + .pb-key { margin-left: var(--s4); }
.pb-eco-k { background: var(--ok); }
.pb-cus-k { background: var(--deep); }
.pb-cap em { color: var(--gold-ink); font-style: normal; font-weight: 700;
  text-transform: none; letter-spacing: 0; width: 100%; }

/* ---------- Waffle: prova de escala ---------- */
.wffig { margin: var(--s6) 0 0; }
.wfgraf { width: 100%; height: auto; display: block; }
.wf-ponto { fill: var(--line-ui); }
.wf-dest { fill: var(--deep); }
.wf-cap { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  font-size: var(--t-xs); color: var(--mute); font-family: var(--f-mono);
  text-transform: uppercase; letter-spacing: .08em; margin-top: var(--s4); }
.wf-key { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.wf-key + .wf-key { margin-left: var(--s4); }
.wf-dest-k { background: var(--deep); }
.wf-base-k { background: var(--line-ui); }

/* ---------- Animacao de entrada ---------- */
/* Barra cresce de zero, ponto do waffle aparece em cascata e a linha do
   payback e desenhada. Tudo com .js como guarda: sem JS o grafico aparece
   completo, em vez de ficar invisivel esperando classe que nunca vem. */
.js .bdgraf .bd-barra { width: 0; transition: width .9s var(--ease); }
.js .bdgraf.is-in .bd-barra { width: var(--w); }

.js .wffig .wf-ponto { opacity: 0; }
.js .wffig.is-in .wf-ponto { opacity: 1;
  transition: opacity .35s ease var(--d); }

.js .pbfig .pb-linha { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.js .pbfig.is-in .pb-linha { stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.5s var(--ease); }
.js .pbfig .pb-area, .js .pbfig .pb-cruza { opacity: 0; }
.js .pbfig.is-in .pb-area { opacity: .10; transition: opacity .6s ease .7s; }
.js .pbfig.is-in .pb-cruza { opacity: 1; transition: opacity .4s ease 1.2s; }

@media (prefers-reduced-motion: reduce) {
  .js .bdgraf .bd-barra,
  .js .bdgraf.is-in .bd-barra { width: var(--w); transition: none; }
  .js .wffig .wf-ponto,
  .js .wffig.is-in .wf-ponto { opacity: 1; transition: none; }
  .js .pbfig .pb-linha,
  .js .pbfig.is-in .pb-linha { stroke-dasharray: none; stroke-dashoffset: 0;
    transition: none; }
  .js .pbfig .pb-area, .js .pbfig.is-in .pb-area { opacity: .10;
    transition: none; }
  .js .pbfig .pb-cruza, .js .pbfig.is-in .pb-cruza { opacity: 1;
    transition: none; }
}

/* ---------- Molduras de grafico ---------- */
.calc-graf { margin-top: var(--s7); padding-top: var(--s6);
  border-top: 1px solid var(--line); }
.calc-graf h3 { font-size: var(--t-lg); margin-bottom: var(--s3); }
.custo-graf { margin-top: var(--s7); }
.custo-graf h3 { font-size: var(--t-md); margin-bottom: var(--s3); }
/* Premissa fica junto do grafico de proposito: comparacao de custo sem a
   premissa a vista e numero escolhido para ganhar a discussao. */
.graf-premissa { font-size: var(--t-xs); color: var(--mute);
  margin-top: var(--s4); padding-left: var(--s4);
  border-left: 2px solid var(--line-ui); }

/* ===========================================================
   BIBLIOTECA DE GRAFICOS: rosca, linhas, colunas, barras, funil
   Uma familia de classes serve os seis tipos. Serie por classe
   .gz-s1 a .gz-s5, todas token ja validado no check_contrast.
   =========================================================== */
.gz { margin: var(--s6) 0 0; }
/* width, max-width e display de .gz-svg, e o max-width de .gz-rosca e
   .gz-esc, estão consolidados no bloco "AJUSTE DE PROPORCAO DOS GRAFICOS",
   mais abaixo neste arquivo. Não redeclarar aqui: foi exatamente essa
   variante duplicada, adicionada por append em vez de editar este bloco,
   que deixou o arquivo com duas fontes de verdade para a mesma classe. */
.gz-grande .gz-svg { max-width: none; }
.gz-grade { stroke: var(--line); stroke-width: 1; }
.gz-eixo { fill: var(--mute); font-family: var(--f-mono); font-size: 11px; }
.gz-eixo-y { font-size: 10px; }
.gz-eixo-t { text-anchor: start; }

.gz-cap { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  font-size: var(--t-xs); color: var(--mute); font-family: var(--f-mono);
  text-transform: uppercase; letter-spacing: .08em; margin-top: var(--s4); }
.gz-cap b { color: var(--ink); }
.gz-key { display: inline-block; flex-shrink: 0; }
.gz-key + .gz-key { margin-left: var(--s4); }
.gz-key-l { width: 15px; height: 3px; border-radius: 2px; }
.gz-key-b { width: 12px; height: 12px; border-radius: 3px; }
/* Procedencia do numero, sempre visivel junto do grafico. */
.gz-nota { width: 100%; text-transform: none; letter-spacing: 0;
  font-family: var(--f-body); font-size: var(--t-xs); color: var(--mute);
  padding-left: var(--s4); border-left: 2px solid var(--line-ui);
  margin-top: var(--s3); }
.gz-com-leg .gz-cap { justify-content: center; }

/* Series. Preenchimento para bloco, traco para linha. */
.gz-s1 { fill: var(--deep); stroke: var(--deep); background: var(--deep); }
.gz-s2 { fill: var(--ok); stroke: var(--ok); background: var(--ok); }
.gz-s3 { fill: var(--argaman); stroke: var(--argaman);
  background: var(--argaman); }
.gz-s4 { fill: var(--gold-ink); stroke: var(--gold-ink);
  background: var(--gold-ink); }
.gz-s5 { fill: var(--mute); stroke: var(--mute); background: var(--mute); }

.gz-linha { fill: none; stroke-width: 3; stroke-linejoin: round;
  stroke-linecap: round; }
.gz-area { stroke: none; opacity: .12; }
.gz-pt { stroke: var(--white); stroke-width: 2; }
.gz-fatia { stroke: var(--white); stroke-width: 2; }
.gz-centro { fill: var(--ink); font-family: var(--f-display);
  font-weight: 800; font-size: 30px; }
.gz-col { stroke: none; }

/* Escalabilidade: a area entre as curvas e o argumento.
   max-width de .gz-esc consolidado no bloco "AJUSTE DE PROPORCAO", mais
   abaixo. Não redeclarar aqui. */
.gz-esc-entre { fill: var(--ok); opacity: .10; stroke: none; }
/* Manual tracejada, automatizada solida e mais grossa: a linha que interessa
   e a que fica plana, entao ela ganha o peso visual. */
.gz-esc-man { stroke-dasharray: 7 5; stroke-width: 2.5; }
.gz-esc-aut { stroke-width: 3.5; }

/* Barras horizontais */
.gz-barras { display: grid; gap: var(--s4); }
.gz-bl { display: grid; gap: var(--s2); }
.gz-brot { font-size: var(--t-sm); font-weight: 500; }
.gz-btrilha { background: var(--canvas-2); border-radius: var(--r-sm);
  overflow: hidden; }
.gz-bbar { height: 28px; border-radius: var(--r-sm); width: var(--w);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: var(--s3); min-width: 4rem; }
.gz-b-nor { background: var(--deep); }
.gz-b-dest { background: var(--ok); }
.gz-bval { font-family: var(--f-mono); font-size: var(--t-xs);
  color: var(--white); font-weight: 700; }
@media (min-width: 900px) {
  .gz-bl { grid-template-columns: 16rem 1fr; align-items: center;
    gap: var(--s5); }
}

/* Funil */
.gz-fu { display: grid; gap: var(--s4); list-style: none; }
.gz-fu-item { display: grid; gap: var(--s2); }
.gz-fu-barra { height: 34px; width: var(--w); margin: 0 auto;
  background: linear-gradient(90deg, var(--deep), var(--blue));
  border-radius: var(--r-sm); display: flex; align-items: center;
  justify-content: center; min-width: 5rem; }
.gz-fu-barra span { font-family: var(--f-mono); font-size: var(--t-sm);
  color: var(--white); font-weight: 700; }
.gz-fu-rot { text-align: center; font-size: var(--t-sm); font-weight: 500; }
.gz-fu-taxa { text-align: center; font-family: var(--f-mono);
  font-size: var(--t-xs); color: var(--gold-ink); }

/* ---------- Animacao de entrada ---------- */
/* Cascata por indice, via --i. Anima uma vez e para. */
.js .gz .gz-linha { stroke-dasharray: 1600; stroke-dashoffset: 1600; }
.js .gz.is-in .gz-linha { stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.4s var(--ease); }
.js .gz .gz-area, .js .gz .gz-esc-entre, .js .gz .gz-pt { opacity: 0; }
.js .gz.is-in .gz-area { opacity: .12; transition: opacity .6s ease .8s; }
.js .gz.is-in .gz-esc-entre { opacity: .10;
  transition: opacity .7s ease .9s; }
.js .gz.is-in .gz-pt { opacity: 1; transition: opacity .3s ease 1.1s; }

.js .gz .gz-col { transform: scaleY(0); transform-origin: center bottom;
  transform-box: fill-box; }
.js .gz.is-in .gz-col { transform: scaleY(1);
  transition: transform .6s var(--ease-back) calc(var(--i) * 60ms); }

.js .gz .gz-fatia { opacity: 0; }
.js .gz.is-in .gz-fatia { opacity: 1;
  transition: opacity .4s ease calc(var(--i) * 110ms); }

.js .gz-barras .gz-bbar, .js .gz-funil .gz-fu-barra { width: 0; }
.js .gz-barras.is-in .gz-bbar, .js .gz-funil.is-in .gz-fu-barra {
  width: var(--w);
  transition: width .8s var(--ease) calc(var(--i) * 90ms); }

@media (prefers-reduced-motion: reduce) {
  .js .gz .gz-linha, .js .gz.is-in .gz-linha { stroke-dasharray: none;
    stroke-dashoffset: 0; transition: none; }
  .js .gz .gz-area, .js .gz.is-in .gz-area { opacity: .12; transition: none; }
  .js .gz .gz-esc-entre, .js .gz.is-in .gz-esc-entre { opacity: .10;
    transition: none; }
  .js .gz .gz-pt, .js .gz.is-in .gz-pt { opacity: 1; transition: none; }
  .js .gz .gz-col, .js .gz.is-in .gz-col { transform: none; transition: none; }
  .js .gz .gz-fatia, .js .gz.is-in .gz-fatia { opacity: 1; transition: none; }
  .js .gz-barras .gz-bbar, .js .gz-barras.is-in .gz-bbar,
  .js .gz-funil .gz-fu-barra, .js .gz-funil.is-in .gz-fu-barra {
    width: var(--w); transition: none; }
}

/* ===========================================================
   AJUSTE DE PROPORCAO DOS GRAFICOS
   ===========================================================
   CAUSA MEDIDA
   SVG com viewBox e width 100% escala tudo junto: texto, traco e
   raio de ponto. O grafico e desenhado em 640 unidades e estava
   renderizando na largura inteira do container, dando fator perto
   de 1,75x. Resultado: rotulo de eixo de 11px aparecia com 19px,
   maior que o texto do corpo, e o grafico passava de 500px de
   altura, empurrando o conteudo para fora da tela.

   O grafico nao tinha proporcao interna errada. Estava ampliado,
   e ampliacao uniforme e exatamente o que a vista le como
   desproporcional.

   CORRECAO
   Travar a largura em 40rem, que e 640px, o mesmo do viewBox.
   Fator volta para 1,0: o desenho aparece no tamanho em que foi
   pensado, e a altura fica em 300px, dentro da faixa util de 240
   a 340px para grafico em pagina de conteudo.

   width, display e max-width consolidados aqui, unica declaracao de
   .gz-svg no arquivo. Antes width/display estavam num bloco e max-width
   em outro, adicionado por append depois: duas fontes de verdade para a
   mesma classe, sinal que diag_responsivo.py passou a detectar.
   =========================================================== */
.gz-svg { width: 100%; height: auto; display: block;
  max-width: 40rem; margin-inline: auto; }
/* Rosca e menor: circulo grande em pagina de texto rouba a cena. */
.gz-rosca { max-width: 17rem; margin-inline: auto; }
/* Escalabilidade e o grafico principal da home, ganha mais espaco. */
.gz-esc { max-width: 46rem; margin-inline: auto; }

/* Rotulagem direta: nome e valor no fim da linha, sem legenda. */
.gz-rot-serie { font-family: var(--f-body); font-size: 12px;
  font-weight: 600; stroke: none; }
.gz-rot-val { font-family: var(--f-mono); font-size: 11px; stroke: none;
  opacity: .8; }

/* Hierarquia entre series: a primeira e a mensagem. */
.gz-l-forte { stroke-width: 3.5; }
.gz-l-fraca { stroke-width: 2; opacity: .5; }

/* Barra e funil tambem ficam na medida do texto, em vez de atravessar
   a pagina inteira. Barra muito longa exagera a diferenca entre valores. */
.gz-barras, .gz-funil { max-width: 44rem; }
.gz-cap { max-width: 44rem; margin-inline: auto; }

/* ===========================================================
   RITMO VERTICAL
   ===========================================================
   MEDICAO QUE MOTIVOU A MUDANCA
   As paginas de servico chegavam a 10,7 telas de notebook, com
   densidade de 11 a 12 palavras por 100px. O site tinha 45
   secoes com densidade abaixo de 6, ou seja, faixa alta com
   pouco conteudo. Com --sec-y em 96px, cada secao gastava 192px
   so de respiro, e nove secoes somavam 1.700px de vazio.

   Espaco em branco organiza leitura. Espaco em branco demais
   separa o que deveria estar junto, e a pessoa perde o fio entre
   um bloco e o proximo, que e exatamente a queixa de "rolar ate
   o fim sem sentir que avancou".

   CORRECAO
   Padding de secao cai para a faixa 40 a 64px, e blocos curtos
   recebem .tight. O hero de pagina interna tambem encurta: dois
   terços da altura anterior para um titulo e uma linha.

   --sec-y já foi atualizado no :root principal, no topo do arquivo.
   Duas declarações da mesma variável em pontos distantes é o tipo de coisa
   que passa a checagem (a cascata resolve, a última vence) mas confunde
   quem lê o arquivo depois. diag_responsivo.py detecta esse padrão.
   =========================================================== */
.section.tight { padding-block: clamp(var(--s6), 3.5vw, var(--s8)); }
.hero-sub-page { padding-block: clamp(var(--s7), 4vw, var(--s9)) var(--sec-y); }

/* ===========================================================
   DUO: dois blocos complementares lado a lado
   ===========================================================
   Sinais e escopo eram duas secoes empilhadas, cada uma com seu
   titulo e seu padding. Juntas gastavam quase 900px para dizer
   "isto dói" e "isto resolve".

   Lado a lado, alem de economizar a rolagem, o par ganha forca:
   problema e solucao comparados no mesmo campo de visao produzem
   contraste imediato, em vez de exigir que o leitor guarde a
   primeira lista na memoria para comparar com a segunda tres
   telas depois.
   =========================================================== */
.duo { display: grid; gap: var(--s5); margin-top: var(--s6); }
.duo-col { background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s6);
  box-shadow: var(--shadow-xs); }
.duo-col h3 { font-size: var(--t-md); margin-bottom: var(--s4);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
/* Borda superior colorida em vez de fundo colorido: sinaliza o par sem
   reduzir o contraste do texto, que precisa continuar passando WCAG. */
.duo-mal { border-top: 3px solid var(--err); }
.duo-bem { border-top: 3px solid var(--ok); }
.duo-col .x-list li, .duo-col .check-list li { font-size: var(--t-sm); }

@media (min-width: 660px) {
  .duo { grid-template-columns: 1fr 1fr; gap: var(--s6); }
}

/* ===========================================================
   GRAFICO COM LEITURA AO LADO
   ===========================================================
   O grafico ficava sob um paragrafo de apoio, empilhado, e a
   secao inteira passava de 700px. Em telas largas o grafico tem
   640px e sobrava faixa vazia a direita.

   Agora o texto de leitura fica ao lado do grafico. E o formato
   de grafico editorial: a imagem e o que puxa o olho, e a frase
   ao lado diz o que ela quer dizer. Um puxa o outro em vez de se
   revezarem na vertical.
   =========================================================== */
.graf-duo { display: grid; gap: var(--s5); align-items: center;
  margin-top: var(--s5); }
.graf-duo .gz { margin-top: 0; }
.graf-leitura h2 { margin-bottom: var(--s3); }
.graf-leitura .lead { margin-bottom: 0; }

@media (min-width: 960px) {
  .graf-duo { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: var(--s7); }
  /* Texto a esquerda, grafico a direita: a leitura ocidental encontra a
     explicacao antes do desenho, o que reduz o tempo de interpretacao. */
}