/* HIVE Datalab · site L1 (variação 1a) · valores do handoff design_handoff_site_d3 (README §5.1 e §5.2). Desktop >= 860 px, mobile abaixo.
   A família "IBM Plex Sans" aparece sem lista de fallback nos elementos medidos pela régua de paridade, como na referência. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#FFFFFF;color:#141B2E;font-family:"IBM Plex Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,p,ol{margin:0}
ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid #1C4ED8;outline-offset:2px}

/* ── cabeçalho ───────────────────────────────────────────────────────────────────────────────── */
.site-hdr{position:relative;height:72px;border-bottom:1px solid #E7E4DD;display:flex;align-items:center;gap:40px;padding:0 72px;background:#FFFFFF}
.site-logo{display:flex;align-items:center;flex:none;border-radius:3px;text-decoration:none;color:inherit}
.site-logo svg{display:block;width:auto}
/* HA-60 D-L3 (Design c/24426, c/24429, c/24440): o lockup COMPLETO oficial a 36 px; abaixo de 600 px o lockup SEM DATALAB centrado a 24 px (o 48 px do c/24425 foi substituido; o sem-datalab antigo e' proibido) */
.site-logo .logo-completo{height:36px}
.site-logo .logo-compacto{display:none;height:24px}
@media (max-width:599px){.site-logo .logo-completo{display:none}.site-logo .logo-compacto{display:block}}
.site-logo svg text{font-family:"Jost",sans-serif;font-weight:300}
.site-logo:focus-visible{outline:2px solid #1C4ED8;outline-offset:4px}
.menu{display:contents}
.site-nav{display:flex;gap:28px}
.site-nav a{font:400 15px/1 "IBM Plex Sans";color:#3A4152;white-space:nowrap}
.btn-nav{margin-left:auto;height:40px;padding:0 18px;border:1px solid #141B2E;border-radius:3px;background:#FFFFFF;color:#141B2E;font:600 14px/1 "IBM Plex Sans";white-space:nowrap;display:flex;align-items:center;justify-content:center;text-align:center}
.menu-btn{display:none;width:44px;height:44px;margin:0 -11px 0 0;padding:0;border:0;background:transparent;cursor:pointer;align-items:center;justify-content:center}
.menu-btn .ic-fechar,.menu-camada{display:none}

/* ── hero ────────────────────────────────────────────────────────────────────────────────────── */
.eyebrow{font:600 12px/1.2 "IBM Plex Sans";letter-spacing:.08em;text-transform:uppercase;color:#6B7280}
.hero{padding:88px 72px 56px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:64px;align-items:end}
.hero-texto{display:flex;flex-direction:column;gap:22px}
.hero-h1{font:600 52px/1.08 "IBM Plex Sans";letter-spacing:-.02em;text-wrap:balance}
.hero-p{font:400 19px/1.55 "IBM Plex Sans";color:#3A4152;max-width:620px}
.hero-garantia{font:600 17px/1.5 "IBM Plex Sans"}
.portas{display:flex;flex-direction:column;gap:14px;scroll-margin-top:24px}
.porta{border:1px solid;border-radius:3px;padding:22px 24px;display:flex;flex-direction:column;gap:8px}
.porta-eyebrow{font:600 12px/1.2 "IBM Plex Sans";letter-spacing:.08em;text-transform:uppercase}
.porta-titulo{font:600 21px/1.3 "IBM Plex Sans"}
.porta-texto{font:400 15px/1.5 "IBM Plex Sans"}
.porta-acao{font:600 15px/1.4 "IBM Plex Sans";margin-top:4px}
.porta-estudo{background:#141B2E;color:#FFFFFF;border-color:#141B2E}
.porta-estudo .porta-eyebrow{color:#9AA3B2}
.porta-estudo .porta-texto{color:#DEDBD3}
.porta-plat{background:#FFFFFF;color:#141B2E;border-color:#1C4ED8}
.porta-plat .porta-eyebrow{color:#6B7280}
.porta-plat .porta-texto{color:#3A4152}
.porta-plat .porta-acao{color:#1C4ED8}
.porta-topo{display:flex;justify-content:space-between;align-items:center;gap:12px}
.porta-tag{font:600 10px/1 "IBM Plex Sans";letter-spacing:.05em;text-transform:uppercase;padding:4px 6px;border-radius:3px;border:1px dashed #1C4ED8;color:#1C4ED8;white-space:nowrap}

/* ── veja os dados ───────────────────────────────────────────────────────────────────────────── */
.dados{margin:0 72px;padding:48px 0 64px;border-top:1px solid #E7E4DD;display:grid;grid-template-columns:360px minmax(0,1fr);gap:56px}
.dados-esq{display:flex;flex-direction:column;gap:14px}
.dados-h2{font:600 30px/1.18 "IBM Plex Sans"}
.dados-texto{font:400 16px/1.55 "IBM Plex Sans";color:#3A4152}
.dados-meta{display:flex;flex-direction:column;gap:6px;border-top:1px solid #E7E4DD;padding-top:14px;font:400 13px/1.5 "IBM Plex Sans";color:#3A4152}
.rot{color:#6B7280}
.dados-dir{display:flex;flex-direction:column;gap:10px}
.barras{display:flex;flex-direction:column;gap:10px}
.barra-lin{display:grid;grid-template-columns:44px minmax(0,1fr) 84px;gap:14px;align-items:center}
.uf{font:600 15px/1.2 "IBM Plex Sans"}
.trilho{display:block;height:22px;background:#F7F6F3}
.barra{display:block;height:22px;background:#1C4ED8}
.valor{font:400 14px/1.2 "IBM Plex Mono";text-align:right}
/* largura de cada barra = valor / 114.267 (SP), competência 06/2026 */
.b-sp{width:100%}.b-mg{width:55.5%}.b-rs{width:36.8%}.b-rj{width:33.7%}.b-pr{width:28%}.b-sc{width:26.1%}.b-ba{width:21.4%}.b-ce{width:14.3%}
.dados-linha{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.dados-resto{font:400 14px/1.4 "IBM Plex Sans";color:#6B7280}
.dados-link{font:600 15px/1.4 "IBM Plex Sans";color:#1C4ED8;white-space:nowrap}

/* ── como ajudamos ───────────────────────────────────────────────────────────────────────────── */
.ajuda{background:#F7F6F3;padding:64px 72px}
.sec-h3{font:600 30px/1.2 "IBM Plex Sans"}
.ajuda .sec-h3{margin:0 0 28px}
.ajuda-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ajuda-card{background:#FFFFFF;border:1px solid #E7E4DD;border-radius:3px;padding:26px;display:flex;flex-direction:column;gap:10px}
.ajuda-titulo{font:600 19px/1.3 "IBM Plex Sans"}
.ajuda-texto{font:400 15px/1.55 "IBM Plex Sans";color:#3A4152}

/* ── áreas + como trabalhamos ────────────────────────────────────────────────────────────────── */
.duas{padding:64px 72px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
.areas,.passos{display:flex;flex-direction:column;gap:16px;scroll-margin-top:24px}
.area-lista{display:flex;flex-direction:column;border-top:1px solid #E7E4DD}
.area-lin{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #E7E4DD}
.area-nome{font:400 17px/1.4 "IBM Plex Sans"}
.area-foco{font:600 17px/1.4 "IBM Plex Sans"}
.area-tag{font:600 11px/1 "IBM Plex Sans";letter-spacing:.06em;text-transform:uppercase;color:#1C4ED8;white-space:nowrap}
.area-nota{font:400 14px/1.5 "IBM Plex Sans";color:#6B7280}
.passo-lista{display:flex;flex-direction:column}
.passo-lin{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:14px 0;border-top:1px solid #E7E4DD}
.passo-num{font:600 18px/1.3 "IBM Plex Mono";color:#6B7280}
.passo-mais{color:#1C4ED8}
.passo-corpo{display:flex;flex-direction:column;gap:4px}
.passo-titulo{font:600 17px/1.35 "IBM Plex Sans"}
.passo-texto{font:400 15px/1.5 "IBM Plex Sans";color:#3A4152}

/* ── CTA final ───────────────────────────────────────────────────────────────────────────────── */
.cta-final{margin:0 72px 64px;background:#141B2E;border-radius:3px;padding:44px 48px;display:flex;align-items:center;gap:40px}
.cta-texto{flex:1 1 0%;display:flex;flex-direction:column;gap:10px}
.cta-titulo{font:600 28px/1.25 "IBM Plex Sans";color:#FFFFFF}
.cta-p{font:400 16px/1.55 "IBM Plex Sans";color:#DEDBD3}
.cta-botoes{display:flex;flex-direction:column;gap:10px;flex:0 0 auto}
.btn{padding:0 22px;border-radius:3px;white-space:nowrap;display:flex;align-items:center;justify-content:center;text-align:center}
.btn-primario{height:48px;border:0;background:#1C4ED8;color:#FFFFFF;font:600 15px/1 "IBM Plex Sans"}
.btn-secundario{height:44px;border:1px solid #3A4258;background:transparent;color:#FFFFFF;font:400 15px/1 "IBM Plex Sans"}
.cta-final a:focus-visible{outline-color:#FFFFFF}

/* ── rodapé ──────────────────────────────────────────────────────────────────────────────────── */
.site-rodape{padding:24px 72px;border-top:1px solid #E7E4DD;display:flex;justify-content:space-between;gap:24px;font:400 14px/1.4 "IBM Plex Sans";color:#6B7280}
.site-rodape a:hover{text-decoration:underline}

/* ── larguras do meio (860 a 1199 px): a referencia define so 1440 e 390; aqui o hero de duas colunas deixa de caber (o titulo de 52 px quebraria em 5 a 6 linhas),
   entao ele passa a uma coluna e as duas portas ficam lado a lado. Decisao de implementacao, sujeita a revisao do Design. ───────────────────────────────── */
@media (min-width:860px) and (max-width:1199px){
  .hero{grid-template-columns:minmax(0,1fr);gap:40px;align-items:start}
  .portas{flex-direction:row}
  .porta{flex:1 1 0;min-width:0}
}

/* ── mobile (390 px) ─────────────────────────────────────────────────────────────────────────── */
@media (max-width:859px){
  .site-hdr{height:56px;padding:0 20px;gap:normal;justify-content:space-between}
  .site-hdr{z-index:11}  /* o cabecalho (com o botao) fica acima da camada que escurece a pagina */
  .menu-btn{display:inline-flex}
  .menu-btn[aria-expanded="true"] .ic-abrir{display:none}
  .menu-btn[aria-expanded="true"] .ic-fechar{display:block}
  .menu{display:none}
  .menu.aberto{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:56px;left:0;right:0;z-index:10;padding:0;background:#FFFFFF;border-bottom:1px solid #E7E4DD;box-shadow:0 8px 16px rgba(20,27,46,.08)}
  .menu-camada:not([hidden]){display:block;position:fixed;inset:0;z-index:5;background:rgba(20,27,46,.24)}
  .site-nav{flex-direction:column;gap:0}
  .site-nav a{display:flex;align-items:center;height:44px;padding:0 20px;border-bottom:1px solid #E7E4DD;font:400 16px/1 "IBM Plex Sans"}
  .btn-nav{margin:16px 20px 20px;height:48px}

  .hero{display:block;padding:0}
  .hero-texto{padding:32px 20px 28px;gap:16px}
  .hero-eyebrow{font:600 11px/1.3 "IBM Plex Sans"}
  .hero-h1{font:600 30px/1.12 "IBM Plex Sans";letter-spacing:-.015em}
  .hero-p{font:400 16px/1.55 "IBM Plex Sans"}
  .hero-garantia{font:600 15px/1.5 "IBM Plex Sans"}
  .portas{padding:0 20px 32px;gap:12px}
  .porta{padding:18px;gap:6px}
  .porta-eyebrow{font:600 11px/1.2 "IBM Plex Sans"}
  .porta-titulo{font:600 18px/1.3 "IBM Plex Sans"}
  .porta-texto{font:400 14px/1.5 "IBM Plex Sans"}
  .porta-acao{font:600 14px/1.4 "IBM Plex Sans"}
  .porta-topo{gap:10px}

  .dados{margin:0 20px;padding:28px 0 32px;display:flex;flex-direction:column;gap:12px}
  .dados-esq,.dados-dir,.dados-linha{display:contents}
  .dados-eyebrow{order:1;font:600 11px/1.2 "IBM Plex Sans"}
  .dados-h2{order:2;font:600 22px/1.2 "IBM Plex Sans"}
  .dados-texto{order:3;font:400 15px/1.5 "IBM Plex Sans"}
  .barras{order:4;gap:8px;padding-top:4px}
  .barra-lin{grid-template-columns:30px minmax(0,1fr) 64px;gap:10px}
  .uf{font:600 14px/1.2 "IBM Plex Sans"}
  .trilho,.barra{height:16px}
  .valor{font:400 13px/1.2 "IBM Plex Mono"}
  .dados-resto{order:5;font:400 13px/1.45 "IBM Plex Sans"}
  .dados-meta{order:6;gap:4px;padding-top:12px;font:400 12px/1.5 "IBM Plex Sans"}
  .dados-link{order:7}

  .ajuda{padding:32px 20px}
  .sec-h3{font:600 22px/1.2 "IBM Plex Sans"}
  .ajuda .sec-h3{margin:0 0 16px}
  .ajuda-grade{display:flex;flex-direction:column;gap:12px}
  .ajuda-card{padding:18px;gap:8px}
  .ajuda-titulo{font:600 17px/1.3 "IBM Plex Sans"}
  .ajuda-texto{font:400 14px/1.5 "IBM Plex Sans"}

  .duas{padding:32px 20px;display:flex;flex-direction:column;gap:32px}
  .areas,.passos{gap:12px}
  .area-lin{padding:12px 0}
  .area-nome{font:400 15px/1.4 "IBM Plex Sans"}
  .area-foco{font:600 15px/1.4 "IBM Plex Sans"}
  .area-tag{font:600 10px/1 "IBM Plex Sans"}
  .area-nota{font:400 13px/1.5 "IBM Plex Sans"}
  .passo-lin{grid-template-columns:32px 1fr;gap:10px;padding:12px 0}
  .passo-num{font:600 16px/1.35 "IBM Plex Mono"}
  .passo-titulo{font:600 15px/1.35 "IBM Plex Sans"}
  .passo-texto{font:400 14px/1.5 "IBM Plex Sans"}

  .cta-final{margin:0 20px 32px;padding:24px 20px;flex-direction:column;align-items:stretch;gap:16px}
  .cta-texto,.cta-botoes{display:contents}
  .cta-titulo{font:600 20px/1.3 "IBM Plex Sans"}
  .cta-p{font:400 15px/1.5 "IBM Plex Sans"}
  .btn-secundario{height:46px}

  .site-rodape{padding:20px;flex-direction:column;gap:6px;font:400 13px/1.4 "IBM Plex Sans"}
}