/* netspaces-ds v0.16.0 */
/* ============================================================
   ECOSSISTEMA NETSPACES — chrome compartilhado (header, waffle,
   trilho de marcas, painéis de navegação, rodapé)

   TOKENS: consumidos do Netspaces Design System v0.16.0 via MCP
   (get_design_tokens theme-propriedade-digital / theme-netspaces)
   em 2026-08-11. Nomes e valores seguem o registry; os apelidos
   legados do R1 (--navy, --blue, --line) permanecem como alias
   para não quebrar as 11 páginas, mas apontam para o token do DS.
   ============================================================ */

/* ===== TOKENS DO DS — theme-propriedade-digital (default: PD e HUB) ===== */
:root{
  /* superfícies claras */
  --background:#ffffff;
  --foreground:#071d49;
  --card:#ffffff;
  --muted:#f3f3f3;                 /* superfície atenuada — NUNCA cor de texto */
  --muted-foreground:#727272;      /* texto secundário */
  --subtle-foreground:#727272;     /* texto terciário */
  --elevated:#f9f9f9;
  --border:#d6d6d6;
  --input:#d6d6d6;                 /* borda de campo — Input/Select/Textarea */
  --disabled:#d6d6d6;              /* fundo de elemento desabilitado */
  --disabled-foreground:#a0a0a0;   /* texto desabilitado E placeholder de campo */
  --popover:#ffffff;
  --popover-foreground:#000000;
  --overlay:#00000080;
  --accent:#f3f3f3;
  --accent-foreground:#071d49;
  --secondary:#f3f3f3;
  --secondary-foreground:#558eff;

  /* ação */
  --primary:#558eff;
  --primary-foreground:#ffffff;
  --primary-hover:#246dff;
  --primary-pressed:#0050f0;
  --ring:#558eff;

  /* identidade */
  --navigation:#071d49;
  --highlight:#3ce4fb;             /* acento pontual — nunca fundo de botão */
  --eyebrow:#558eff;               /* chapéu em superfície CLARA */

  /* superfície dark — a única do DS */
  --inverse:#071d49;
  --inverse-foreground:#ffffff;
  --inverse-muted-foreground:#a0a0a0;
  --inverse-border:color-mix(in srgb, var(--inverse-foreground) 16%, var(--inverse));

  /* famílias de feedback por papel (ADR-0022):
     sólido = {x} · texto = {x}-subtle-foreground · ícone = {x}-icon · tint = {x}-subtle */
  --info:#2563eb;              --info-subtle:#eff6ff;        --info-subtle-foreground:#1d4ed8;
  --success:#15803d;           --success-subtle:#f0fdf4;     --success-subtle-foreground:#15803d;
  --warning:#fbbf24;           --warning-subtle:#fffbeb;     --warning-subtle-foreground:#92400e;
  --destructive:#dc2626;       --destructive-subtle:#fef2f2; --destructive-subtle-foreground:#b91c1c;

  /* escala de radius (ADR-0008) — sem valores arbitrários */
  --radius-xs:0.25rem;
  --radius-sm:0.375rem;
  --radius-md:0.5rem;
  --radius-lg:0.75rem;
  --radius-xl:1rem;

  /* tipografia */
  --display-font:"Manrope", ui-sans-serif, sans-serif;
  --book-font:"Roboto", ui-sans-serif, sans-serif;

  /* ----- alias legados do R1 (mesmo valor do token do DS) ----- */
  --navy:var(--foreground);
  --blue:var(--primary);
  --blue-hover:var(--primary-hover);
  --cyan:var(--highlight);
  --line:var(--border);

  /* recuo do CONTEÚDO DE TEXTO às bordas do módulo (ver bloco "SEPARAÇÃO
     ENTRE MÓDULOS"). Ilustração é isenta e pode sangrar — use .bleed*,
     que anula exatamente este valor, seja ele qual for no contexto. */
  --mod-inset:100px;
}

/* ===== theme-netspaces — só o que difere ===== */
body[data-brand="ns"]{
  --highlight:#ff3e7d;             /* rosa da marca */
  --eyebrow:#ff3e7d;
  --secondary:transparent;
  --accent:#e5eeff;
  --pink:#ff3e7d;
}
:root{--pink:#ff3e7d;}

/* ===== RESET / BASE ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--book-font);    /* corpo = book font (Roboto) — DS 2026-08-06 */
  color:var(--foreground);
  background:var(--muted);         /* #F3F3F3 — é ELE que aparece no vão entre módulos */
  font-size:1rem;
  line-height:1.5;                 /* editorial: leitura 150% */
}

/* ============================================================
   SEPARAÇÃO ENTRE MÓDULOS — vão de 20px em #F3F3F3
   Decupado do Figma (node 551:2345, "Desktop Large" dentro do
   retângulo rosa), medido pixel a pixel no render em 1440:

     vão vertical .......... 20px exatos, #F3F3F3
                             (y 970–989, 4901–4920, 6854–6873)
     header → 1º módulo .... SEM vão (módulo começa em y=90,
                             exatamente onde o header termina)
     último módulo → rodapé  COM vão de 20px
     módulo largura total .. borda a borda (x=0…1440, sem recuo)
     cantos ................ retos, sem raio

   O vão é o fundo do body aparecendo entre os módulos. Por isso
   TODO módulo precisa pintar o próprio fundo — antes eles eram
   transparentes e herdavam o branco do body. Módulo que já é
   #F3F3F3 (section.gray) funde com os vãos e vira uma banda
   contínua: é assim no Figma também, não é defeito.
   ============================================================ */
section{background:var(--background)}   /* todo módulo pinta o próprio fundo */
section + section{margin-top:20px}
#siteFooter{margin-top:20px}            /* o rodapé injetado também respeita o vão */

/* ----- RECUO DO TEXTO ÀS BORDAS DO MÓDULO -----
   100px em cima e embaixo. Vale para o CONTEÚDO DE TEXTO; ilustração é
   isenta e pode encostar no limite do módulo para sangrar. Módulo cujo
   primeiro conteúdo é ilustração pode ter recuo de topo menor — é o caso
   dos heros com ilustração e do hero da pd-home, que tem topo zero. */
section{padding:var(--mod-inset) 0}

/* Sangria: anula o recuo do lado escolhido. Usa a mesma variável, então
   funciona igual dentro do par lado a lado (onde o recuo é 80). */
.bleed   {margin-top:calc(-1 * var(--mod-inset));margin-bottom:calc(-1 * var(--mod-inset))}
.bleed-t {margin-top:calc(-1 * var(--mod-inset))}
.bleed-b {margin-bottom:calc(-1 * var(--mod-inset))}

/* ----- MÓDULOS LADO A LADO (~metade da largura cada) -----
   PAPEL: pequenos destaques sobre assunto de menor peso, que levam
   para uma página interna. Não é módulo de conteúdo principal.

   No Figma, a 1440: recuo 20 nas bordas, 690 + vão 20 + 690 — e o
   recuo lateral é intencional (confirmado pelo CPO), os dois módulos
   leem como peças sobre o cinza. O contêiner é transparente de
   propósito: quem pinta são os dois módulos, e o #F3F3F3 do body é
   que aparece no vão entre eles.

   RECUO INTERNO MENOR: 80px, não 100 — o par carrega menos conteúdo,
   e o recuo cheio o deixaria desproporcionalmente alto. Como é a
   mesma variável, .bleed dentro do par anula 80 automaticamente.

   No mobile empilha, e cada um vira um módulo de largura total. */
section.mod-duo{
  --mod-inset:80px;
  --mod-inset-x:40px;
  background:transparent;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
  margin-left:20px;margin-right:20px;
}
section.mod-duo > *{
  background:var(--background);
  padding:var(--mod-inset) var(--mod-inset-x);
}
/* sangria lateral dentro do par: a ilustração encosta nas duas laterais */
section.mod-duo .bleed-x{
  margin-left:calc(-1 * var(--mod-inset-x));
  margin-right:calc(-1 * var(--mod-inset-x));
  width:calc(100% + 2 * var(--mod-inset-x));
  max-width:none;
}
@media(max-width:900px){
  section.mod-duo{grid-template-columns:1fr;margin-left:0;margin-right:0}
}
a{color:inherit}

/* ===== VIÚVAS =====
   text-wrap:pretty manda o navegador usar o algoritmo lento de quebra, que
   evita deixar uma palavra sozinha na última linha. Resolve de forma sistêmica
   o que antes exigiria ajustar a largura de cada caixa na mão.
   Onde não for suportado, degrada para a quebra normal — nada quebra. */
p, .sub, li, blockquote, figcaption, dd{text-wrap:pretty}
/* títulos ganham balance: distribui as linhas em blocos de tamanho parecido */
h1, h2, h3{text-wrap:balance}
h1,h2,h3,h4,h5,h6,.font-display{font-family:var(--display-font);font-weight:800;letter-spacing:-.025em;line-height:1.2}

/* ===== CONTAINER MESTRE (guideline "Grid") =====
   max-w-screen-xl (1280) + px-6 / md:px-10 → ~1200px de conteúdo.
   Uma página, UMA malha — nenhum container custom por seção.       */
.wrap,.site-header .hwrap,.navpanel .pwrap,.eco-panel .ewrap,.site-footer .fwrap{
  max-width:1280px;margin:0 auto;padding-left:24px;padding-right:24px;
}
@media(min-width:768px){
  .wrap,.site-header .hwrap,.navpanel .pwrap,.eco-panel .ewrap,.site-footer .fwrap{
    padding-left:40px;padding-right:40px;
  }
}

/* ===== ESTILOS DE TEXTO DO DS ===== */
.t-display-hero{font-family:var(--display-font);font-size:3.25rem;line-height:1.2;font-weight:800;letter-spacing:-.025em}
.t-display-title{font-family:var(--display-font);font-size:2.375rem;line-height:1.2;font-weight:800;letter-spacing:-.025em}
.t-heading-xl{font-family:var(--display-font);font-size:2rem;line-height:1.2;font-weight:800;letter-spacing:-.025em}
.t-heading-md{font-family:var(--display-font);font-size:1.5rem;line-height:1.2;font-weight:800;letter-spacing:-.01em}
.t-heading-xs{font-family:var(--display-font);font-size:1.125rem;line-height:1.2;font-weight:800;letter-spacing:-.01em}
.t-numeric-2xl{font-family:var(--display-font);font-size:2.8125rem;line-height:1.1;font-weight:300;letter-spacing:-.05em}
.t-editorial-lg{font-family:var(--book-font);font-size:1.375rem;line-height:1.5;font-weight:400;letter-spacing:-.01em}
.t-editorial-md{font-family:var(--book-font);font-size:1.125rem;line-height:1.5;font-weight:400;letter-spacing:-.01em}
.t-editorial-sm{font-family:var(--book-font);font-size:1rem;line-height:1.5;font-weight:400;letter-spacing:-.01em}
.t-label-sm{font-family:var(--book-font);font-size:.875rem;line-height:1.5;font-weight:500;letter-spacing:-.01em}

/* ===== RITMO TÍTULO → SUBTÍTULO =====
   As páginas trazem h1/h2 com margin-bottom:32px, que vale para o título antes
   de QUALQUER coisa (grade, cards, lista). Aqui reduzimos 15px apenas quando o
   próximo elemento é o subtítulo — 32 − 15 = 17px — para o par ficar mais unido
   sem mexer no respiro entre título e os demais blocos.
   Fica no eco.css de propósito: um lugar só governa os três sites.
   A especificidade (0,1,1) vence o h1/h2 das páginas (0,0,1) em qualquer ordem. */
h1:has(+ .sub),h2:has(+ .sub){margin-bottom:17px}

/* measure — texto nunca corre na largura do container */
.measure{max-width:42rem}      /* max-w-2xl ~672px: lead e texto corrido */
.measure-lg{max-width:48rem}   /* max-w-3xl ~768px: título centrado */

/* ===== EYEBROW / CHAPÉU =====
   font-display ExtraBold na escala de headings, SEM uppercase.
   Claro → --eyebrow · dark → --highlight.                          */
.eyebrow,.kicker{
  font-family:var(--display-font);
  font-weight:800;
  font-size:1.125rem;            /* text-heading-xs */
  line-height:1.2;
  letter-spacing:-.01em;
  text-transform:none;
  color:var(--eyebrow);
}
.eyebrow.lg,.kicker.lg{font-size:1.5rem}    /* text-heading-md — heros de destaque */
.kicker{margin-bottom:32px}      /* eyebrow → título = mt-8 */
.inverse .eyebrow,.inverse .kicker,
section.dark .eyebrow,section.dark .kicker{color:var(--highlight)}

/* Título de coluna de rodapé / menu NÃO é eyebrow (eyebrow é chapéu de
   heading). O DS marca nav e footer canônicos como pendência — então aqui
   usamos só o que já existe: text-strong-sm sobre a superfície corrente. */
.site-footer .fh,.navpanel .pcol .pt,.eco-panel .ehead .elabel{
  font-family:var(--book-font);font-size:.875rem;font-weight:700;
  line-height:1.5;letter-spacing:-.01em;text-transform:none;
  color:var(--inverse-foreground);
}
.navpanel .pcol .pt,.eco-panel .ehead .elabel{color:var(--muted-foreground)}
.site-header.dark .navpanel .pcol .pt{color:var(--inverse-muted-foreground)}

/* ===== SUPERFÍCIE DARK (a única: inverse) ===== */
.inverse{background:var(--inverse);color:var(--inverse-foreground)}
.inverse .sec,.inverse p,.inverse .t-editorial-md,.inverse .t-editorial-sm{color:var(--inverse-foreground)}
.inverse .muted,.inverse .cap{color:var(--inverse-muted-foreground)}
.inverse hr,.inverse .rule{border:none;border-top:1px solid var(--inverse-border)}

/* ===== BOTÃO (contrato do componente Button) =====
   rounded-md fixo · label font-book 600 · sem seta no label
   size lg = h-12 px-6                                              */
.btn,.entrar,a.cta,button.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  height:3rem;padding:0 1.5rem;
  border-radius:var(--radius-md);
  font-family:var(--book-font);font-weight:600;font-size:1rem;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  border:1px solid transparent;appearance:none;
  transition:background-color .15s,border-color .15s,color .15s;
}
.btn,.entrar,a.cta,button.cta{background:var(--primary);color:var(--primary-foreground) !important}
.btn:hover,.entrar:hover,a.cta:hover,button.cta:hover{background:var(--primary-hover)}
.btn:active,.entrar:active,a.cta:active,button.cta:active{background:var(--primary-pressed)}
/* outline: borda CINZA em repouso; hover NÃO preenche sólido */
.btn.outline,a.cta.ghost,button.cta.ghost{background:transparent;border-color:var(--border);color:var(--secondary-foreground) !important}
.btn.outline:hover,a.cta.ghost:hover,button.cta.ghost:hover{background:var(--accent);border-color:var(--primary-hover);color:var(--primary-hover) !important}
/* sobre inverse: primário BRANCO, secundário outline branco */
.inverse .btn,.btn.inverse,section.dark a.cta,section.dark button.cta,.inverse a.cta{
  background:var(--primary-foreground);color:var(--primary) !important;border-color:transparent}
.inverse .btn:hover,.btn.inverse:hover,section.dark a.cta:hover,.inverse a.cta:hover{background:var(--muted)}
.inverse .btn.outline,.btn.outline-inverse,section.dark a.cta.ghost,section.dark button.cta.ghost,.inverse a.cta.ghost{
  background:transparent;border-color:var(--inverse-muted-foreground);color:var(--inverse-foreground) !important}
.inverse .btn.outline:hover,.btn.outline-inverse:hover,section.dark a.cta.ghost:hover,.inverse a.cta.ghost:hover{
  border-color:var(--inverse-foreground);background:transparent}
/* ===== HERO DE MARCA SOBRE PRIMARY =====
   Superfície pedida pelo CPO para o hero do HUB. O fundo é exigência do asset
   oficial da marca (Ilustra-Fam1_HUB), cuja moldura é exatamente #558EFF —
   qualquer outro fundo mostraria a emenda da imagem.
   Texto usa primary-foreground, que é o par que o DS prescreve para primary.
   Ver §15 do relatório: o par branco-sobre-primary rende 3,13:1, que passa
   AA só em texto grande — reportado ao DS. */
section.brandhero{background:var(--primary);color:var(--primary-foreground)}
section.brandhero h1,section.brandhero h2,section.brandhero p,
section.brandhero .sub{color:var(--primary-foreground)}
section.brandhero a.cta,section.brandhero button.cta{
  background:var(--primary-foreground);color:var(--primary) !important;border-color:transparent}
section.brandhero a.cta:hover,section.brandhero button.cta:hover{background:var(--muted)}
section.brandhero a.cta.ghost{background:transparent;border-color:var(--primary-foreground);
  color:var(--primary-foreground) !important}

.btn.sm{height:2rem;padding:0 .75rem;font-size:.875rem}
/* size md do Button (h-9 px-4 text-sm) — o CTA do header não fica ao lado de
   campo de formulário, então não precisa ser lg. */
.btn.md,.entrar{height:2.25rem;padding:0 1rem;font-size:.875rem}

/* ===== BADGE (contrato do componente Badge) =====
   sinalizador não-interativo · soft = pílula tintada radius-sm
   nunca full-rounded, nunca borda, nunca cor de marca como fundo   */
.badge-soft{
  display:inline-flex;align-items:center;gap:.25rem;
  border-radius:var(--radius-sm);
  padding:.125rem .5rem;
  font-family:var(--book-font);font-size:.75rem;font-weight:500;line-height:1.5;
  background:#eff6ff;color:#1d4ed8;         /* info-subtle / info-subtle-foreground */
}
.badge-soft.neutral{background:var(--muted);color:var(--muted-foreground)}

/* ===== RITMO VERTICAL (escala do DS) ===== */
.sect{padding:96px 0}          /* py-24 — respiro padrão entre seções */
.sect.tight{padding:64px 0}
.chapter{padding:160px 0}      /* quebra de capítulo */
.mt-eyebrow{margin-top:32px}   /* eyebrow → título */
.mt-lead{margin-top:32px}      /* título → lead */
.mt-micro{margin-top:12px}     /* micro-ritmo título → texto */

/* ===== MALHA 12 COLUNAS ===== */
.grid12{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px;row-gap:32px}
.col-6{grid-column:span 12}
.col-4{grid-column:span 12}
.col-3{grid-column:span 12}
@media(min-width:768px){
  .col-6{grid-column:span 6}
  .col-4{grid-column:span 4}
  .col-3{grid-column:span 3}
  .aside-4{grid-column:9 / span 4}
}
.strip-3{display:grid;grid-template-columns:1fr;column-gap:20px;row-gap:32px}
.strip-4{display:grid;grid-template-columns:1fr;column-gap:20px;row-gap:32px}
@media(min-width:768px){
  .strip-3{grid-template-columns:repeat(3,1fr)}
  .strip-4{grid-template-columns:repeat(4,1fr)}
}

/* ===== HEADER ===== */
.site-header{position:sticky;top:0;z-index:80}
.site-header .hwrap{padding-top:12px;padding-bottom:12px;display:flex;align-items:center;gap:28px}
.site-header.dark{background:var(--inverse);color:var(--inverse-foreground)}
.site-header.light{background:var(--background);color:var(--foreground);border-bottom:1px solid var(--border)}

/* marca no header — teto duplo, NUNCA altura fixa (guideline de logo).
   flex-shrink:0 é obrigatório: o logo não tem largura definida (só tetos),
   então sem isso o flex do header o esmaga até 0. */
.brand{display:flex;align-items:center;gap:0;text-decoration:none;white-space:nowrap;flex-shrink:0}
.brand img,.brand svg.logo{max-height:32px;max-width:144px;height:auto;object-fit:contain;object-position:left center;display:block;flex-shrink:0}
.brand.ns{gap:10px}
/* Vale para TODO slot de logo: sem isto, marcas cuja proporção não bate com os
   dois tetos (HUB 2,8:1, Simbiose 4,35:1) são centralizadas na caixa e "andam"
   para a direita. Ancorar à esquerda alinha todas com o conteúdo ao lado. */
img.logo{flex-shrink:0;object-fit:contain;object-position:left center}

.mainnav{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
/* Itens de menu conforme o frame aprovado (Figma 511:65 / 511:200):
   Roboto Medium 16px, tracking -0.01em. Bate com o text-label-md do DS
   (1rem / 500 / -0.01em), que é o style de navegação por contrato. */
.mainnav a,.mainnav button{appearance:none;background:none;border:none;cursor:pointer;
  font-family:var(--book-font);font-size:1rem;font-weight:500;line-height:1.5;letter-spacing:-.01em;
  text-decoration:none;padding:10px 12px;border-radius:var(--radius-md);display:flex;align-items:center;gap:6px;position:relative}
.site-header.dark .mainnav a,.site-header.dark .mainnav button{color:var(--inverse-foreground)}
.site-header.dark .mainnav a:hover,.site-header.dark .mainnav button:hover{color:var(--inverse-foreground)}
.site-header.light .mainnav a,.site-header.light .mainnav button{color:var(--navigation)}
.site-header.light .mainnav a:hover,.site-header.light .mainnav button:hover{color:var(--primary)}
.mainnav .chev{width:9px;height:9px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.mainnav [aria-expanded="true"] .chev{transform:rotate(-135deg) translateY(-2px)}
/* indicador ativo de navegação — highlight, 4px (ADR-0019) */
.mainnav [aria-expanded="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-13px;height:4px;border-radius:2px;background:var(--highlight)}

.hright{display:flex;align-items:center;gap:14px;margin-left:10px;flex-shrink:0}
/* Waffle e "Entrar" têm a MESMA altura (frame aprovado 511:165, onde os dois
   medem 46px). Aqui a altura é o size md do Button (h-9 = 36px), que é o
   degrau da escala do DS — 46px não está na escala. */
.waffle-unit{display:flex;align-items:center;gap:10px;height:2.25rem;padding:0 10px;
  border-radius:var(--radius-md);cursor:pointer;border:1px solid transparent;
  background:transparent;appearance:none;flex-shrink:0}
.site-header.dark .waffle-unit{border-color:var(--inverse-border)}
.site-header.dark .waffle-unit:hover{background:var(--inverse-border)}
.site-header.light .waffle-unit{background:var(--muted)}
.site-header.light .waffle-unit:hover{background:var(--accent)}
.waffle-unit svg{display:block;flex-shrink:0}
/* símbolo da Netspaces à ESQUERDA do ícone de waffle (só nas submarcas) */
.waffle-unit img.simb{height:20px;width:auto;display:block;flex-shrink:0}
/* rótulo "Soluções" do waffle (só na Netspaces) — mesma tipografia dos itens de
   menu, para o baseline coincidir com o deles. O botão e os itens de nav são
   ambos centrados no header e a linha de texto é a mesma, então as baselines
   caem no mesmo ponto sem precisar de recuo. */
.waffle-unit .wlabel{font-family:var(--book-font);font-size:1rem;font-weight:500;
  line-height:1.5;letter-spacing:-.01em;white-space:nowrap;flex-shrink:0}
.site-header.light .waffle-unit .wlabel{color:var(--navigation)}
.site-header.dark .waffle-unit .wlabel{color:var(--inverse-foreground)}

/* ===== PAINÉIS DO MENU ===== */
/* ============================================================
   NAVEGAÇÃO MOBILE (≤900px)
   Os itens de menu saem do header e vão para um painel aberto por
   um botão hambúrguer com as MESMAS dimensões do waffle (36px de
   altura, mesmo raio, mesmo tratamento de fundo). Ficam dois botões.

   Disposição medida no netspaces.org no ar — e os dois valores dele
   são token do DS, o que é bom sinal:
     fundo do painel  #F9F9F9 = --elevated
     separador        #D6D6D6 = --border
     1º nível recuado 24px · subitem +30px · "Entrar" de largura cheia
   ============================================================ */
.burger-unit{display:none;align-items:center;justify-content:center;
  width:2.25rem;height:2.25rem;               /* mesma altura do .waffle-unit */
  border-radius:var(--radius-md);cursor:pointer;border:1px solid transparent;
  background:transparent;appearance:none;flex-shrink:0;
  flex-direction:column;gap:5px;padding:0}
.site-header.dark .burger-unit{border-color:var(--inverse-border)}
.site-header.dark .burger-unit:hover{background:var(--inverse-border)}
.site-header.light .burger-unit{background:var(--muted)}
.site-header.light .burger-unit:hover{background:var(--accent)}
.burger-unit .bl{display:block;width:20px;height:2px;border-radius:1px;
  transition:transform .22s ease, opacity .18s ease}
.site-header.dark .burger-unit .bl{background:var(--inverse-foreground)}
.site-header.light .burger-unit .bl{background:var(--primary)}
/* aberto, o próprio botão vira X — o header sticky já mostra a logo,
   então não é preciso repetir uma barra de topo dentro do painel */
.burger-unit[aria-expanded="true"] .bl:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger-unit[aria-expanded="true"] .bl:nth-child(2){opacity:0}
.burger-unit[aria-expanded="true"] .bl:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.m-menu{display:none;position:absolute;left:0;right:0;top:0;z-index:75;
  background:var(--elevated);border-top:1px solid var(--border);
  max-height:calc(100dvh - var(--hh, 90px));
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.m-menu.open{display:block}
.mnav{list-style:none;margin:0;padding:0}
.mnav a,.mnav span{display:block;text-decoration:none;color:var(--primary);
  font-family:var(--book-font);border-bottom:1px solid var(--border)}
.mnav .n1 a,.mnav .n1 span{margin-left:24px;padding:22px 24px 22px 0;
  font-size:1.25rem;font-weight:500;line-height:1.3}
.mnav .n2 a{margin-left:54px;padding:15px 24px 15px 0;
  font-size:1rem;font-weight:400;line-height:1.4}
.m-cta{background:var(--background);padding:24px}
.m-cta .cta{display:flex;align-items:center;justify-content:center;width:100%}

/* NÃO travar o documento com overflow:hidden. Medido: isso faz o documento
   deixar de rolar, e o position:sticky do header passa a resolver contra um
   contêiner não-rolável — ele cai na posição estática e some da tela. Com a
   página em 1200px, o painel abria em -1140, fora da viewport.
   Quem impede o scroll de vazar para a página é o overscroll-behavior:contain
   dos painéis, que já basta. */

@media(max-width:900px){
  .site-header .mainnav{display:none}
  /* quem empurrava o bloco para a direita era o .mainnav (margin-left:auto);
     oculto no mobile, o .hright precisa assumir esse papel — senão os botões
     ficam colados na logo em vez de alinhados à borda do conteúdo */
  .site-header .hright{margin-left:auto}
  .site-header .entrar{display:none}     /* vira o CTA no pé do painel */
  .burger-unit{display:flex}
  .waffle-unit .wlabel{display:none}     /* no celular o waffle é só o ícone */
  /* o painel do ecossistema também rola por dentro, em vez de estourar a tela */
  /* especificidade maior de proposito: a regra base .eco-panel.open{max-height:640px}
     vive mais adiante no arquivo e venceria no empate */
  .site-header .eco-panel.open{max-height:calc(100dvh - var(--hh, 90px));
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .eco-rail{padding:20px 0 30px}
  /* No celular o card ocupa a largura toda e o texto (0.875rem) corre longo
     demais, deixando viúva na última linha. 30px de recuo à direita fazem a
     quebra acontecer antes, com menos caracteres por linha. Só no mobile —
     no desktop o card tem 285px e não precisa. */
  .eco-card p{padding-right:30px}
}
@media(min-width:901px){
  .m-menu{display:none !important}
}

.navpanels{position:relative}
/* top:100% e não 0 — o bloco de contenção do painel é o HEADER (não o
   .navpanels, que tem altura 0), então top:0 o jogava sobre o logo e o menu.
   Com 100% ele encosta na base da barra em qualquer altura de header. */
.navpanel{display:none;position:absolute;left:0;right:0;top:100%;z-index:70}
.navpanel.open{display:block}
.site-header.dark .navpanel{background:var(--inverse);color:var(--inverse-foreground);border-top:1px solid var(--inverse-border);box-shadow:0 30px 60px rgba(1,8,28,.45)}
.site-header.light .navpanel{background:var(--background);color:var(--foreground);border-top:1px solid var(--border);border-bottom:1px solid var(--border);box-shadow:0 26px 50px rgba(7,29,73,.08)}
.navpanel .pwrap{padding-top:26px;padding-bottom:30px;display:flex;gap:48px;flex-wrap:wrap}
.navpanel .pcol{min-width:200px}
.navpanel .pcol .pt{margin-bottom:12px}
.site-header.dark .navpanel .pcol .pt{color:var(--highlight)}
.navpanel .pcol a{display:block;text-decoration:none;font-family:var(--book-font);font-size:1rem;font-weight:500;line-height:1.5;padding:7px 0}
.site-header.dark .navpanel a{color:var(--inverse-foreground)}
.site-header.dark .navpanel a:hover{color:var(--highlight)}
.site-header.light .navpanel a{color:var(--primary)}
.site-header.light .navpanel a:hover{color:var(--foreground)}
.navpanel .pcol a small{display:block;font-weight:400;font-size:.875rem;margin-top:2px}
.site-header.light .navpanel .pcol a small{color:var(--muted-foreground)}
.site-header.dark .navpanel .pcol a small{color:var(--inverse-muted-foreground)}

/* ===== PAINEL DO ECOSSISTEMA (waffle) ===== */
/* Sobrepõe o conteúdo a partir do header (sticky), igual aos painéis de menu.
   Antes ele era inserido no topo do <body> e empurrava a página — com a página
   rolada, abria fora da viewport e o clique no waffle não mostrava nada. */
.eco-panel{position:absolute;left:0;right:0;top:0;z-index:70;
  max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1);
  background:var(--muted)}
.eco-panel.open{max-height:640px}
/* Sombra DURA no topo do painel, medida no frame aprovado (Figma 511:73):
   faixa de 6px em preto 3%, sem blur, logo abaixo da borda do header.
   Sobre o #f3f3f3 do painel isso resolve em #ebebeb — que é exatamente o
   que o Figma renderiza. O frame não tem sombra difusa embaixo do painel:
   depois da borda de 1px vem branco puro. */
/* O fio e a sombra dura vivem no CONTÊINER QUE ROLA, não no conteúdo.
   Antes estavam no .einner: quando o painel rolava por dentro (celular), eles
   subiam junto com o conteúdo e sumiam — medido, o .einner descia de 60 para
   -55 com 115px de scroll. Na borda do .eco-panel eles ficam presos no topo,
   que é o comportamento do Figma. Só no estado aberto, senão o fio apareceria
   com o painel fechado (max-height:0). */
.eco-panel.open{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
/* A sombra dura NÃO pode ser box-shadow inset: inset é pintada abaixo do fundo
   dos filhos, e com o painel rolado um card branco passa por cima dela (medido:
   o pixel logo abaixo do fio vinha #FFFFFF em vez de #EBEBEB). A borda escapa
   disso porque vive fora da área que rola.
   Solução: faixa de 6px em position:sticky, que fica presa no topo do contêiner
   que rola E é pintada acima do conteúdo. margin-bottom negativo para não
   empurrar nada — o layout fica idêntico ao de antes. */
.eco-panel.open::before{
  content:"";display:block;position:sticky;top:0;z-index:3;
  height:6px;margin-bottom:-6px;
  background:rgba(0,0,0,.03);pointer-events:none;
}
.eco-panel .ewrap{padding-top:0;padding-bottom:0}
/* baseline: o link da direita alinha pelo baseline da wordmark, não pela base
   da caixa da imagem. Medido no asset: a baseline fica a 83,5% da altura do
   logo (o "p" desce 16,5% abaixo dela) — daí o recuo de 5px no link. */
.eco-panel .ehead{display:flex;align-items:baseline;gap:14px;padding-top:30px}
.eco-panel .ehead .ehome{display:block;flex-shrink:0;line-height:0}
.eco-panel .ehead img.logo{max-height:29px;max-width:130px;height:auto;display:block;
  object-fit:contain;object-position:left center}
.eco-panel .ehead a.golink{margin-left:auto;position:relative;top:-5px;
  font-family:var(--book-font);font-size:.875rem;font-weight:600;
  color:var(--primary);text-decoration:none;white-space:nowrap}
.eco-panel .ehead a.golink:hover{color:var(--primary-hover)}
/* Grade das 4 marcas — as quatro cabem na tela, SEM scroll lateral.
   Frame aprovado 511:165: 4 cards de 285×178 com gap 20 = 1200px, que é
   exatamente o container mestre. Aqui em fr para acompanhar o container. */
/* 30px de respiro acima e abaixo dos cards — igual em todos os sites */
.eco-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:30px 0}
@media(max-width:1000px){.eco-rail{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.eco-rail{grid-template-columns:1fr}}
/* Retângulo de marca — estado NORMAL medido no frame aprovado (Figma 511:74):
   fundo branco, raio 16px, SEM borda e SEM sombra. Conferido em pixel: a
   transição do painel (#f3f3f3) para o card (#ffffff) é direta, sem borda. */
.eco-card{background:var(--card);border:none;box-shadow:none;border-radius:var(--radius-xl);
  padding:20px;display:flex;flex-direction:column;gap:12px;min-height:178px;position:relative;
  overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .16s ease-out, box-shadow .16s ease-out}

/* HOVER — o card inteiro é a área sensível: sobe 6px e deixa embaixo uma sombra
   DURA de 6px, do mesmo tipo da que existe no topo do painel (preto 3%, sem blur). */
a.eco-card:hover{transform:translateY(-6px);box-shadow:0 6px 0 0 rgba(0,0,0,.03)}
a.eco-card:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

/* ESTADO "VOCÊ ESTÁ AQUI" — traço azul limitado à BASE do retângulo.
   inset shadow em vez de border-bottom para não alterar a caixa nem brigar
   com o raio dos cantos. */
.eco-card.here{box-shadow:inset 0 -3px 0 0 var(--primary)}

/* logo de marca em slot multi-brand — teto duplo 32×144 (~4,5:1) */
.eco-card .eclogo{min-height:32px;display:flex;align-items:center}
.eco-card .eclogo img.logo{max-height:32px;max-width:144px;height:auto;object-fit:contain;display:block;
  object-fit:contain;object-position:left center}
/* Bloco a 75% da altura — a wordmark é larga e pesava demais ao lado das outras */
.eco-card .eclogo img.logo[src*="Logo-Bloco"]{max-width:108px}
/* card estreito (285px): editorial-xs, ainda na escala do DS */
.eco-card p{font-family:var(--book-font);font-size:.875rem;line-height:1.5;letter-spacing:-.01em;color:var(--muted-foreground);margin:0}

/* ===== ILUSTRAÇÕES ===== */
.il{display:block;width:100%;height:auto;border-radius:var(--radius-xl)}
.ph{background:var(--muted);border:1.5px dashed var(--primary);border-radius:var(--radius-xl);display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;text-align:center;padding:18px}
.ph code{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.875rem;color:var(--primary);line-height:1.5}
.ph a.phlink{font-family:var(--book-font);font-size:.75rem;font-weight:500;color:var(--foreground);background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 14px;text-decoration:none}
.ph a.phlink:hover{border-color:var(--primary);color:var(--primary)}
.inverse .ph,.dark .ph{background:transparent;border-color:var(--inverse-muted-foreground)}
.inverse .ph code,.dark .ph code{color:var(--highlight)}
.inverse .ph a.phlink,.dark .ph a.phlink{background:transparent;border-color:var(--inverse-muted-foreground);color:var(--inverse-foreground)}

/* ===== RODAPÉ — superfície inverse (única dark do DS) ===== */
.site-footer{background:var(--inverse);color:var(--inverse-foreground);padding:96px 0 64px;font-family:var(--book-font);font-size:1rem;line-height:1.5}
.site-footer .fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;column-gap:20px;row-gap:40px;margin-bottom:48px}
/* rodape com 4 colunas de links (HUB): a coluna da marca cede largura */
.site-footer .fcols.c4{grid-template-columns:1.15fr 1fr 1fr 1fr 1fr}
@media(max-width:900px){.site-footer .fcols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.site-footer .fcols{grid-template-columns:1fr}}
/* Colunas de link — mesma solução do site no ar: filete no acento acima do
   grupo, título NO ACENTO e links em primary. É a diferença de cor mais o
   filete que separa título de link; antes os dois eram brancos e se misturavam. */
.site-footer .fcol{border-top:1.5px solid var(--highlight);padding-top:16px}
.site-footer .fh{font-family:var(--book-font);font-size:1rem;font-weight:600;
  line-height:1.5;letter-spacing:-.01em;text-transform:none;
  color:var(--highlight);margin-bottom:14px}
.site-footer a{color:var(--primary);text-decoration:none;font-weight:400;display:block;padding:5px 0;font-size:.875rem;line-height:1.5}
.site-footer a:hover{color:var(--inverse-foreground)}
/* assinatura de ecossistema (só PD e HUB) */
.site-footer .eco-sign{display:flex;align-items:center;gap:12px;margin:0 0 32px}
.site-footer .eco-sign-txt{font-family:var(--book-font);font-size:.875rem;font-weight:400;color:var(--inverse-muted-foreground)}
.site-footer .eco-sign img.logo{max-height:22px;max-width:99px;height:auto;display:block;object-fit:contain;object-position:left center}
.site-footer .fsoon{color:var(--inverse-muted-foreground);font-weight:500;padding:4px 0;font-size:1rem}
.site-footer .fsoon small{font-size:.75rem;text-transform:none;letter-spacing:normal}
.site-footer .fsocial{display:flex;gap:12px;margin-top:16px}
.site-footer .fsocial a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--inverse-border);border-radius:var(--radius-md);padding:0}
.site-footer .fsocial a:hover{border-color:var(--inverse-foreground)}
.site-footer .fdiv{border:none;border-top:1px solid var(--inverse-border);margin:8px 0 32px}
.site-footer .fmeta{font-size:.875rem;color:var(--inverse-muted-foreground);margin-bottom:16px;line-height:1.5}
.site-footer .legal{font-size:.75rem;line-height:1.5;color:var(--inverse-muted-foreground);max-width:42rem}
/* logo do rodapé — teto duplo validado (32×144) */
.site-footer .fbrand{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.site-footer .fbrand img.logo{max-height:32px;max-width:144px;height:auto;object-fit:contain;display:block;
  object-fit:contain;object-position:left center}
.site-footer .ftag{font-size:1rem;color:var(--inverse-muted-foreground);line-height:1.5;max-width:20em}

/* selo "integrado à propriedade.digital" (injetado pelo eco.js) */
.site-footer .selo-row{display:flex;align-items:center;gap:16px;margin:0 0 32px;flex-wrap:wrap}
.site-footer .selo-note{font-size:.875rem;font-weight:500;color:var(--inverse-muted-foreground);letter-spacing:normal}
/* selo: contêiner com radius da escala do DS e linha em inverse-border
   (o R1 usava pílula 999px — drift corrigido) */
.selo{display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--inverse-border);border-radius:var(--radius-md);
  padding:8px 14px;background:transparent}
.selo .selo-txt{font-family:var(--book-font);font-size:.875rem;font-weight:500;line-height:1.5;color:var(--inverse-foreground)}
.selo img.logo{max-height:16px;max-width:72px;height:auto;display:block}