@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 */
  --sec-y: clamp(var(--s10), 7vw, var(--s12));

  --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));
}

/* ===== 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: 940px) {
  .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); }

@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-inner-wide { grid-template-columns: 1.45fr .55fr; align-items: start; }
  .hero-visual { display: block; }
}

/* Índice lateral no hero das páginas de serviço */
.hero-aside {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s7);
  box-shadow: var(--shadow-sm);
  position: sticky; top: var(--sticky-top);
}
.aside-title {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em;
  color: var(--mute); font-family: var(--f-mono); margin-bottom: var(--s5);
}
.aside-nav { counter-reset: an; }
.aside-nav li { counter-increment: an; border-bottom: 1px solid var(--line); }
.aside-nav li:last-child { border-bottom: 0; }
.aside-nav a {
  display: flex; align-items: baseline; gap: var(--s3);
  padding: var(--s3) 0; font-size: var(--t-sm); color: var(--mute);
  transition: color var(--d-fast), transform var(--d-fast) var(--ease);
}
.aside-nav a::before {
  content: counter(an, decimal-leading-zero);
  font-family: var(--f-mono); font-size: var(--t-xs);
  color: var(--gold-ink); flex-shrink: 0;
}
.aside-nav a:hover { color: var(--deep); text-decoration: none; transform: translateX(3px); }

/* Índice de âncoras inline, nas 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); }

@media (min-width: 640px)  { .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: 700px)  { .pgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .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); }

@media (min-width: 760px) { .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: 920px) { .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: 640px)  { .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); }

@media (min-width: 640px)  { .valores-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .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: 920px) { .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: 640px) { .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; }

@media (min-width: 760px) {
  .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; }
.gz-svg { width: 100%; height: auto; display: block; }
.gz-grande .gz-svg { max-width: none; }
.gz-rosca { max-width: 20rem; margin: 0 auto; }
.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. */
.gz-esc { max-width: 52rem; margin: 0 auto; }
.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: 760px) {
  .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.
   =========================================================== */
.gz-svg { max-width: 40rem; margin-inline: auto; }
/* Rosca e menor: circulo grande em pagina de texto rouba a cena. */
.gz-rosca { max-width: 17rem; }
/* Escalabilidade e o grafico principal da home, ganha mais espaco. */
.gz-esc { max-width: 46rem; }

/* 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; }