/* ============================================================
   KR TECH — Site institucional
   Identidade oficial: azul #0D44A2 · laranja #F17E00
   Tipografia: Geom Graphic (marca) → Poppins (geométrica, web)

   Os tokens abaixo são CÓPIA FIEL de ~/kr-tech-app/src/styles/theme.css.
   Quando o sistema mudar um token, este arquivo tem de acompanhar —
   o theme.css do app é a fonte da verdade (MARCA.md §13).

   Regra de MARCA.md §2.4: nenhuma cor escrita direto no componente.
   Se você está prestes a digitar um "#" fora do bloco :root, pare.
   ============================================================ */

/* ---------- Poppins auto-hospedada (não depende do Google Fonts) ---------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fontes/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fontes/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fontes/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fontes/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fontes/poppins-latin-800-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  /* marca */
  --blue:        #0D44A2;
  --blue-600:    #0A3888;
  --blue-700:    #082C6C;
  --blue-500:    #1657C0;
  --blue-400:    #3B7BE0;
  --blue-wash:   #E6EDF9;
  --navy:        #071E45;
  --navy-2:      #0B2857;

  --orange:      #F17E00;
  --orange-bright:#FF9526;
  --orange-600:  #CE6B00;
  --orange-wash: #FDECD8;

  /* neutros (viés azul frio) */
  --bg:        #f3f6fb;
  --surface:   #ffffff;
  --surface-2: #f8fafd;
  --surface-3: #eef3fa;
  --ink:       #14213d;
  --ink-2:     #45516b;
  --muted:     #7a869c;
  --line:      #e4eaf3;
  --line-2:    #eef2f9;

  /* semânticos (separados da marca) */
  --success: #17915b; --success-wash: #e2f4ec;
  --warning: #d79218; --warning-wash: #fbf0d8;
  --danger:  #d64550; --danger-wash:  #fbe3e5;
  --info:    #2472c8; --info-wash:    #e5f0fb;

  --grad-brand: linear-gradient(135deg, var(--orange-bright) 0%, var(--orange) 32%, var(--blue) 78%);
  --grad-blue:  linear-gradient(135deg, var(--blue-500), var(--blue-700));

  --radius:    14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(16,30,60,.05), 0 1px 3px rgba(16,30,60,.04);
  --shadow:    0 2px 6px rgba(16,30,60,.06), 0 12px 28px rgba(16,30,60,.07);
  --shadow-lg: 0 18px 50px rgba(16,30,60,.14);

  --font-body: "Poppins", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-head: "Poppins", -apple-system, system-ui, sans-serif;

  /* específicos do site */
  /* Branco fixo, que NÃO vira escuro no tema escuro: as faixas em navy
     continuam navy nos dois temas, então o que vai sobre elas é constante. */
  --branco: #ffffff;
  /* Tinta do botão laranja — mesmo valor de .btn-accent no theme.css do sistema. */
  --accent-ink: #3a2000;
  /* Papel é papel: fica escuro nos dois temas (MARCA.md §8). */
  --tinta-papel: #14213d;
  --topbar-h: 68px;
  --largura:  1140px;   /* largura máxima do conteúdo */
  --respiro:  24px;     /* 16px no celular, ver quebras */
}

/* ------------------------------------------------------------------
   Tema escuro: mantido no CSS, mas DESLIGADO no site.

   Todas as páginas trazem <html data-theme="light">, o que anula o bloco
   abaixo. Isto é deliberado: o sistema interno acompanha o tema de quem
   trabalha nele o dia inteiro; o site institucional é vitrine e precisa se
   apresentar igual para todo visitante — como o contrato e a proposta, que
   MARCA.md §2.4 já trata como papel, brancos nos dois temas.

   Para religar, tire o data-theme do <html> das 7 páginas (e do molde em
   scripts/gerar-paginas.py). Antes disso, reveja quanta área navy existe na
   Home: com o tema escuro ligado, hero, painel do simulador, chamada final
   e rodapé escurecem junto com o resto e a página vira uma parede escura.
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark;
  --bg: #0a1120; --surface: #111c31; --surface-2: #0e1728; --surface-3: #16233c;
  --ink: #e9eff8; --ink-2: #aeb9cc; --muted: #7688a1; --line: #22304a; --line-2: #1a2740;
  --blue: #3B7BE0; --blue-500: #4f8bec; --blue-wash: #142a4d; --blue-400:#6aa0f2;
  --orange: #FF9A3D; --orange-wash: #33260f;
  --success-wash:#0f2a1e; --warning-wash:#2e2610; --danger-wash:#2f1518; --info-wash:#122844;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow: 0 2px 8px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.4);
  --shadow-lg: 0 22px 60px rgba(0,0,0,.55);
} }
:root[data-theme="dark"] { color-scheme: dark;
  --bg: #0a1120; --surface: #111c31; --surface-2: #0e1728; --surface-3: #16233c;
  --ink: #e9eff8; --ink-2: #aeb9cc; --muted: #7688a1; --line: #22304a; --line-2: #1a2740;
  --blue: #3B7BE0; --blue-500: #4f8bec; --blue-wash: #142a4d; --blue-400:#6aa0f2;
  --orange: #FF9A3D; --orange-wash: #33260f;
  --success-wash:#0f2a1e; --warning-wash:#2e2610; --danger-wash:#2f1518; --info-wash:#122844;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow: 0 2px 8px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.4);
  --shadow-lg: 0 22px 60px rgba(0,0,0,.55);
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 12px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { font-family: var(--font-head); margin: 0; letter-spacing: -.01em; color: var(--ink); line-height: 1.14; }
img, svg { max-width: 100%; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0 0 12px; }
ul { margin: 0; padding-left: 20px; }
:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; border-radius: 4px; }
.tnum { font-variant-numeric: tabular-nums; }
.oculto { display: none !important; }

/* Link que só aparece para quem navega por teclado */
.pular {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--surface); color: var(--ink); padding: 10px 14px;
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.pular:focus { left: 8px; }

/* ---------- Estrutura ---------- */
.wrap { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--respiro); }
.secao { padding: 72px 0; }
.secao-alt { background: var(--surface-2); }

.eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  color: var(--blue); margin-bottom: 10px;
}
.secao h2 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 700; letter-spacing: -.02em; }
.secao .lead { color: var(--ink-2); font-size: 16px; max-width: 62ch; margin-top: 12px; }
.cabeca-secao { margin-bottom: 36px; }

.g-2, .g-3, .g-4 { display: grid; gap: 16px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Marca ---------- */
.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo:hover { text-decoration: none; }
.logo .mark { width: 38px; height: 38px; flex: none; }
.logo .wm { display: flex; flex-direction: column; line-height: 1; }
.logo .wm b { font-family: var(--font-head); font-weight: 700; font-size: 19px; letter-spacing: -.02em; color: var(--ink); }
.logo .wm span { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); font-weight: 700; margin-top: 3px; }

/* Sobre navy o laranja padrão não tem contraste — MARCA.md §3 */
.sobre-navy .logo .wm b { color: var(--branco); }
.sobre-navy .logo .wm span { color: var(--orange-bright); }

/* O chipmark: quadrado branco que protege o símbolo sobre fundo escuro */
.chipmark {
  width: 46px; height: 46px; border-radius: 11px; background: var(--branco); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.chipmark .mark { width: 28px; height: 28px; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-family: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; white-space: nowrap;
  transition: transform .08s ease, background .15s, box-shadow .15s, border-color .15s, color .15s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--blue); color: var(--branco); }
.btn-primary:hover { background: var(--blue-600); color: var(--branco); }
/* O ÚNICO laranja da página. Se houver dois, um está errado — MARCA.md §2.2 */
.btn-accent { background: var(--orange); color: var(--accent-ink); }
.btn-accent:hover { background: var(--orange-600); color: var(--branco); }
.btn-outline { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--blue-400); color: var(--blue); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-3); color: var(--ink); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13px; border-radius: 8px; }
.btn-block { width: 100%; }
/* Contorno claro, para usar sobre o navy */
.btn-claro { background: transparent; color: var(--branco); border-color: rgba(255,255,255,.28); }
.btn-claro:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); color: var(--branco); }
/* Sólido branco sobre navy. É NEUTRO, não acento — por isso pode conviver
   na mesma página com o único botão laranja (MARCA.md §2.2). */
.btn-branco { background: var(--branco); color: var(--navy); }
.btn-branco:hover { background: var(--blue-wash); color: var(--blue-700); }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px;
  border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-brand   { background: var(--blue-wash);  color: var(--blue); }
.chip-neutral { background: var(--surface-3);  color: var(--ink-2); }
.chip-success { background: var(--success-wash); color: var(--success); }
.chip-claro   { background: rgba(255,255,255,.12); color: var(--branco); }

/* ---------- Cartões ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-pad { padding: 22px 24px; }
.card h3 { font-size: 17px; font-weight: 700; }
.card p { color: var(--ink-2); font-size: 14.5px; margin: 8px 0 0; }

/* Ícone quadrado de cartão (o .ic do sistema) */
.ic {
  width: 44px; height: 44px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; margin-bottom: 14px;
}
.ic svg { width: 22px; height: 22px; }
.ic.blue   { background: var(--blue-wash);    color: var(--blue); }
.ic.orange { background: var(--orange-wash);  color: var(--orange-600); }
.ic.green  { background: var(--success-wash); color: var(--success); }

/* ------------------------------------------------------------------
   Variações de seção — o remédio para a página virar uma fileira de
   caixas brancas iguais. Cada seção do corpo usa uma destas.
   ------------------------------------------------------------------ */

/* Cabeçalho de seção centralizado, para alternar com o alinhado à esquerda */
.cabeca-secao.centro { text-align: center; }
.cabeca-secao.centro .eyebrow { justify-content: center; }
.cabeca-secao.centro .lead { margin-left: auto; margin-right: auto; }

/* Faixa escura no meio da página: quebra o branco e devolve hierarquia */
.secao-escura {
  position: relative; overflow: hidden; color: var(--branco);
  background:
    radial-gradient(900px 520px at 88% 0%,
      color-mix(in srgb, var(--orange) 20%, transparent), transparent 60%),
    linear-gradient(158deg, var(--navy) 0%, var(--navy-2) 60%, var(--navy) 100%);
}
.secao-escura h2, .secao-escura h3 { color: var(--branco); }
.secao-escura .eyebrow { color: var(--orange-bright); }
.secao-escura .lead { color: rgba(255,255,255,.76); }
/* Textura de célula fotovoltaica ao fundo, bem discreta */
.secao-escura::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('/imagens/textura-cta.webp') center/cover no-repeat;
  opacity: .16;
}
.secao-escura .wrap { position: relative; z-index: 1; }

/* Item de lista dentro da faixa escura: sem cartão, só um filete acima */
.item-escuro { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16); }
.item-escuro h3 { font-size: 16.5px; font-weight: 700; }
.item-escuro p { color: rgba(255,255,255,.7); font-size: 14.5px; margin-top: 8px; }
.item-escuro .numero-item {
  display: block; font-family: var(--font-head); font-weight: 800; font-size: 13px;
  color: var(--orange-bright); letter-spacing: .1em; margin-bottom: 10px;
}

/* ------------------------------------------------------------------
   Cartão com foto no topo — é o que traz imagem para o corpo da página.
   ------------------------------------------------------------------ */
.card-foto { overflow: hidden; display: flex; flex-direction: column; }
.card-foto img {
  /* height:auto é obrigatório: sem ele o atributo height="600" do HTML vence
     e o aspect-ratio é ignorado — a foto sai em pé. */
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  border-bottom: 1px solid var(--line);
}
.card-foto .card-pad { flex: 1; }
.card-foto h3 { font-size: 17px; font-weight: 700; }

/* ------------------------------------------------------------------
   Bloco de cobertura: foto grande + cidades em colunas.
   Substitui a fileira de chips cinzas, que ocupava uma dobra inteira
   e não dizia nada.
   ------------------------------------------------------------------ */
.cobertura { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.cobertura img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.lista-cidades {
  columns: 2; column-gap: 28px; list-style: none; padding: 0; margin-top: 22px;
}
.lista-cidades li {
  break-inside: avoid; padding: 9px 0 9px 22px; position: relative;
  border-bottom: 1px solid var(--line-2); color: var(--ink); font-size: 14.5px;
}
/* Ponto laranja? Não: o laranja é do CTA. Aqui o marcador é azul. */
.lista-cidades li::before {
  content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue-400);
}
.lista-cidades li b { font-weight: 600; }
.lista-cidades li span { color: var(--muted); font-size: 12.5px; margin-left: 5px; }

/* FAQ mais estreito: linha longa demais cansa antes da terceira pergunta */
.faq-estreito { max-width: 780px; margin: 0 auto; }

/* ---------- Cabeçalho ---------- */
.topo {
  position: sticky; top: 0; z-index: 50; height: var(--topbar-h);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topo .wrap { height: 100%; display: flex; align-items: center; gap: 20px; }
.topo nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
/* Só os links diretos do menu. O botão dentro de .acoes é um .btn e
   não pode herdar estes estilos. */
.topo nav > a {
  padding: 8px 12px; border-radius: 8px; color: var(--ink-2);
  font-size: 14.5px; font-weight: 500;
}
.topo nav > a:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.topo nav > a[aria-current="page"] { color: var(--blue); font-weight: 600; }
.topo .acoes { display: flex; align-items: center; gap: 10px; margin-left: 8px; }

/* Botão do menu do celular */
.menu-btn {
  display: none; width: 44px; height: 44px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  align-items: center; justify-content: center; cursor: pointer; margin-left: auto;
}
.menu-btn svg { width: 22px; height: 22px; }

/* ---------- Hero ---------- */
/* ------------------------------------------------------------------
   Hero.

   Três camadas de luz sobre o navy, em vez de um azul chapado: o sol
   quente vindo de cima à direita (onde a foto está), um azul frio subindo
   pela esquerda e a base em degradê. É o que dá volume ao fundo.
   ------------------------------------------------------------------ */
.hero {
  position: relative; overflow: hidden;
  color: var(--branco); padding: 104px 0 112px;
  background:
    radial-gradient(1100px 620px at 74% -6%,
      color-mix(in srgb, var(--orange) 26%, transparent), transparent 58%),
    radial-gradient(820px 520px at 4% 104%,
      color-mix(in srgb, var(--blue-500) 42%, transparent), transparent 62%),
    linear-gradient(152deg, var(--navy) 0%, var(--navy-2) 52%, var(--navy) 100%);
}
/* Fio da marca no topo: laranja → azul, os 4px que assinam a página. */
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: var(--grad-brand); z-index: 3;
}
.hero .wrap { position: relative; z-index: 2; }

.hero h1 {
  font-size: clamp(33px, 4.3vw, 52px); font-weight: 800; letter-spacing: -.032em;
  line-height: 1.04; color: var(--branco); max-width: 15ch;
}
.hero h1 em { font-style: normal; color: var(--orange-bright); }
.hero .lead { color: rgba(255,255,255,.8); font-size: clamp(15.5px, 1.5vw, 17.5px); max-width: 48ch; margin-top: 20px; }
.hero .acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero .eyebrow { color: var(--orange-bright); display: flex; align-items: center; gap: 10px; }
/* Traço curto antes do eyebrow — detalhe pequeno que tira o ar de rascunho. */
.hero .eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--orange-bright); flex: none;
}
.hero-grade { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
/* Nas faixas de topo (sem grade), o texto também precisa parar antes da foto. */
.hero.com-foto .wrap > .eyebrow,
.hero.com-foto .wrap > h1,
.hero.com-foto .wrap > .lead { max-width: 56%; }
/* O texto para antes da foto; a foto vive fora da grade, colada na borda. */
.hero-grade > div { max-width: 56%; }

/* ------------------------------------------------------------------
   Linha de provas do hero. Substitui os três chips cinzas, que liam como
   etiqueta de rascunho. Aqui cada item tem peso: rótulo curto em branco
   sobre um filete, alinhados em colunas.
   ------------------------------------------------------------------ */
.selos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 26px; margin-top: 40px; max-width: 520px;
}
.selos div { padding-top: 14px; border-top: 2px solid rgba(255,255,255,.22); }
.selos b {
  display: block; color: var(--branco); font-family: var(--font-head);
  font-weight: 700; font-size: 15px; letter-spacing: -.01em;
}
.selos span { display: block; color: rgba(255,255,255,.62); font-size: 12.5px; margin-top: 3px; line-height: 1.4; }

/* ------------------------------------------------------------------
   Selo de irradiação ao vivo, sobre a foto.

   É o único número real que a KR TECH pode mostrar hoje, e nenhum
   concorrente da região mostra: a irradiação da cidade, vinda da mesma
   base que dimensiona o projeto. O valor vem escrito no HTML e o JS só
   atualiza — quem chegar sem o script rodar lê um número certo, não "0".
   ------------------------------------------------------------------ */
.hero-dado {
  position: absolute; z-index: 2; right: max(var(--respiro), calc((100% - var(--largura)) / 2));
  bottom: 40px; width: 246px; padding: 16px 18px;
  border-radius: var(--radius); border: 1px solid rgba(255,255,255,.16);
  background: color-mix(in srgb, var(--navy) 72%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  box-shadow: var(--shadow-lg);
}
.hero-dado .rotulo {
  display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .13em; color: var(--orange-bright);
}
.hero-dado .cidade { display: block; color: var(--branco); font-weight: 600; font-size: 14px; margin-top: 5px; }
.hero-dado .valor {
  display: block; font-family: var(--font-head); font-weight: 800; font-size: 27px;
  letter-spacing: -.03em; color: var(--branco); margin-top: 8px; line-height: 1;
}
.hero-dado .unidade { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.72); margin-left: 4px; letter-spacing: 0; }
.hero-dado .fonte { display: block; font-size: 11.5px; color: rgba(255,255,255,.55); margin-top: 8px; }

/* ------------------------------------------------------------------
   A foto do hero.

   Sangra até a borda direita da tela e ocupa a altura inteira da faixa,
   em vez de flutuar como um retângulo colado no meio do azul. A máscara
   dissolve a aresta esquerda: a foto termina no fundo, não num corte.
   ------------------------------------------------------------------ */
.hero-foto {
  position: absolute; top: 0; right: 0; z-index: 1;
  width: 48%; height: 100%; max-height: none;
  object-fit: cover; object-position: 52% 58%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 22%, #000 52%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 22%, #000 52%, #000 100%);
}

/* ------------------------------------------------------------------
   Faixa de topo com foto (páginas internas) e chamada final com textura.

   O véu escuro por cima NÃO é enfeite: as fotos têm o sol no enquadramento,
   e texto branco sobre céu alaranjado fica ilegível. O degradê garante
   contraste do lado do texto e deixa a foto aparecer do lado oposto.
   A cor sai de var(--navy) via color-mix, para nenhuma cor nascer solta.
   ------------------------------------------------------------------ */
.hero.com-foto, .chamada.com-foto {
  background-color: var(--navy);   /* piso, se o navegador não fizer color-mix */
  background-image:
    linear-gradient(100deg,
      color-mix(in srgb, var(--navy) 93%, transparent) 0%,
      color-mix(in srgb, var(--navy) 74%, transparent) 40%,
      color-mix(in srgb, var(--navy) 24%, transparent) 100%),
    var(--foto);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
}
.chamada.com-foto {
  background-image:
    linear-gradient(160deg,
      color-mix(in srgb, var(--navy) 93%, transparent) 0%,
      color-mix(in srgb, var(--navy) 78%, transparent) 100%),
    var(--foto);
}

/* Foto que acompanha um bloco de texto nas páginas internas */
.g-2.com-foto { align-items: center; gap: 36px; }
.foto-secao {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
/* Alterna o lado da foto para a página não virar uma coluna só de imagens */
.g-2.inverter > *:first-child { order: 2; }

/* ---------- Barra de números ---------- */
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.numero { text-align: center; padding: 20px 12px; }
.numero b {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(28px, 4vw, 40px); letter-spacing: -.03em; color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.numero span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 4px; }

/* ---------- Simulador ---------- */
.sim { display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; }
.sim-entrada { padding: 28px 30px; }
.sim-saida {
  padding: 28px 30px; color: var(--branco);
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  display: flex; flex-direction: column;
}
.campo { margin-bottom: 18px; }
.campo label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.campo .dica { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.campo input, .campo select {
  width: 100%; height: 44px; padding: 0 13px; font-family: inherit; font-size: 15px;
  color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.campo input:focus, .campo select:focus { border-color: var(--blue-400); background: var(--surface); }
.campo input::placeholder { color: var(--muted); }

/* Botões segmentados (tipo de imóvel) */
.segmentado { display: flex; gap: 6px; background: var(--surface-3); padding: 4px; border-radius: var(--radius-sm); }
.segmentado button {
  flex: 1; height: 36px; border: 0; border-radius: 8px; background: transparent;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.segmentado button[aria-pressed="true"] { background: var(--surface); color: var(--blue); box-shadow: var(--shadow-sm); }

.sim-saida .rotulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--orange-bright); }
.sim-saida .destaque {
  font-family: var(--font-head); font-weight: 800; font-size: clamp(30px, 4.4vw, 42px);
  letter-spacing: -.03em; color: var(--branco); font-variant-numeric: tabular-nums; margin-top: 6px;
}
.sim-saida .sub { color: rgba(255,255,255,.72); font-size: 14px; }
.sim-linhas { margin: 22px 0; border-top: 1px solid rgba(255,255,255,.14); }
.sim-linha {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.sim-linha span { color: rgba(255,255,255,.72); font-size: 13.5px; }
.sim-linha b { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--branco); }
.sim-rodape { margin-top: auto; }
.sim-nota { color: rgba(255,255,255,.82); font-size: 12.5px; margin-top: 14px; line-height: 1.5; }
.sim-erro { color: var(--danger); font-size: 13px; margin-top: 10px; }

/* Estado de carregamento: mostra o formato do que vem — MARCA.md §7 */
.skel { background: var(--surface-3); border-radius: 6px; animation: pulsar 1.4s ease-in-out infinite; }
@keyframes pulsar { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------- Captura (o passo antes do WhatsApp) ---------- */
dialog.captura {
  width: min(460px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg);
}
dialog.captura::backdrop { background: rgba(7,30,69,.55); backdrop-filter: blur(3px); }
.captura-cabeca { padding: 22px 24px 0; }
.captura-cabeca h3 { font-size: 19px; font-weight: 700; }
.captura-cabeca p { color: var(--ink-2); font-size: 14px; margin-top: 8px; }
.captura-corpo { padding: 20px 24px 24px; }
.aceite { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--ink-2); margin: 4px 0 18px; }
.aceite input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--blue); }

/* ---------- Perguntas frequentes ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  padding: 20px 40px 20px 0; cursor: pointer; list-style: none; position: relative;
  font-weight: 600; font-size: 16.5px; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 22px; font-weight: 400; color: var(--blue); line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq .resposta { padding: 0 40px 22px 0; color: var(--ink-2); max-width: 78ch; }

/* ---------- Faixa de chamada final ---------- */
.chamada {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--branco); border-radius: var(--radius-lg); padding: 52px 44px; text-align: center;
}
.chamada h2 { color: var(--branco); font-size: clamp(24px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.025em; }
.chamada p { color: rgba(255,255,255,.78); max-width: 56ch; margin: 14px auto 0; }
.chamada .acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }

/* ---------- Lista de cidades ---------- */
.cidades { display: flex; flex-wrap: wrap; gap: 8px; }
.cidades li { list-style: none; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--navy); color: rgba(255,255,255,.72); padding: 56px 0 28px; font-size: 14px; }
.rodape a { color: rgba(255,255,255,.72); }
.rodape a:hover { color: var(--branco); }
.rodape h4 { color: var(--branco); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin-bottom: 14px; }
.rodape-grade { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 32px; }
.rodape ul { list-style: none; padding: 0; }
.rodape li { margin-bottom: 9px; }
.rodape .sobre-navy p { color: rgba(255,255,255,.6); font-size: 13.5px; margin-top: 16px; max-width: 34ch; }
.rodape .legal {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  color: rgba(255,255,255,.5); font-size: 12.5px;
}

/* ---------- Botão flutuante de WhatsApp ---------- */
.zap-flut {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%; background: var(--success);
  color: var(--branco); display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow); border: 0; cursor: pointer;
}
.zap-flut:hover { filter: brightness(1.08); text-decoration: none; }
.zap-flut svg { width: 28px; height: 28px; }

/* ---------- Quebras (MARCA.md §6) ---------- */
@media (max-width: 1100px) {
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .cobertura { grid-template-columns: 1fr; gap: 28px; }
  .sim { grid-template-columns: 1fr; }
  .numeros { grid-template-columns: repeat(2, 1fr); }
  /* Sem espaço para duas colunas: a foto deixa de sangrar na lateral e
     vira uma faixa atrás do texto, com o véu garantindo a leitura. */
  .hero { padding: 64px 0 72px; }
  .hero-grade > div { max-width: 100%; }
  .hero-foto {
    width: 100%; height: 100%; object-position: 50% 42%;
    -webkit-mask-image: none; mask-image: none;
    opacity: .3;
  }
  /* Sem foto à direita, o selo perde o lugar dele: volta ao fluxo,
     abaixo dos botões. */
  .hero-dado { position: static; width: 100%; max-width: 280px; margin-top: 28px; backdrop-filter: none; }
}
@media (max-width: 920px) {
  .topo nav { display: none; }
  .topo nav.aberto {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: var(--topbar-h); left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 12px var(--respiro) 18px; box-shadow: var(--shadow); margin-left: 0;
  }
  .topo nav.aberto > a { padding: 12px; font-size: 16px; }
  .topo nav.aberto .acoes { flex-direction: column; align-items: stretch; margin: 10px 0 0; }
  .menu-btn { display: inline-flex; }
  .rodape-grade { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  :root { --respiro: 16px; }
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .lista-cidades { columns: 1; }
  /* Três colunas em 390px viram três colunas espremidas de duas palavras.
     No celular a linha de provas empilha. */
  .selos { grid-template-columns: 1fr; gap: 0; max-width: 100%; }
  .selos div { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.18); }
  .selos div:first-child { border-top-width: 2px; }
  /* Quatro opções de telhado não cabem lado a lado: viram duas por linha. */
  .segmentado { flex-wrap: wrap; }
  .segmentado button { flex: 1 1 calc(50% - 6px); }
  /* Em coluna única a foto sempre vem depois do texto, mesmo nos blocos
     que no computador aparecem invertidos — primeiro se lê, depois se vê. */
  .g-2.inverter > *:first-child { order: 0; }
  .foto-secao { aspect-ratio: 16 / 10; }
  .secao { padding: 52px 0; }
  .hero { padding: 60px 0 68px; }
  .chamada { padding: 40px 24px; }
  .rodape-grade { grid-template-columns: 1fr; gap: 28px; }
  .sim-entrada, .sim-saida { padding: 22px 20px; }
  .btn { width: 100%; }
  .topo .btn, .menu-btn { width: auto; }
  .hero .acoes .btn, .chamada .acoes .btn { width: 100%; }
}

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

/* ---------- Impressão ---------- */
@media print {
  .topo, .zap-flut, .hero .acoes, .chamada { display: none; }
  body { background: var(--branco); color: var(--tinta-papel); }
}