/* ============================================================
   FUTURE · TEMA (camada sobre Bootstrap 4.6.2)
   Carregar SEMPRE depois de vendor/bootstrap-4.6.2/css/bootstrap.min.css
   Guia de uso: guia-classes-bs4.md
   ============================================================ */
/* ============================================================
   FUTURE · DESIGN TOKENS (fonte da verdade)
   Camada de tema sobre o Bootstrap 4.6.2
   Guia da marca: abr/2026 · Extensões: design system v0.4
   ============================================================ */
:root {
  /* ---------- PRIMITIVOS · COR ---------- */
  --orange-50:  #fff5ee;  --orange-100: #ffe7d6;  --orange-200: #ffcdab;
  --orange-300: #ffa33c;  /* ★ marca */
  --orange-400: #ff8a55;
  --orange-500: #fe7031;  /* ★ marca · núcleo */
  --orange-600: #e4551a;
  --orange-700: #bc430f;  /* texto/link acessível */
  --orange-800: #96350d;  --orange-900: #7a2b0c;

  --flame-300: #ff9a85;  --flame-500: #f25436; /* ★ marca */  --flame-700: #c2330f;
  --amber-300: #ffbf4d; /* ★ */  --amber-400: #ffb327; /* ★ */  --amber-500: #ffa800; /* ★ */  --amber-700: #b87400;

  --neutral-0: #ffffff; /* ★ */  --neutral-50: #faf8f7;  --neutral-100: #f3eff0; /* ★ */
  --neutral-200: #ebebeb; /* ★ */  --neutral-300: #d7d7d7; /* ★ */  --neutral-400: #cecece; /* ★ */
  --neutral-500: #9d9d9d; /* ★ */  --neutral-600: #6b6b6b; /* ★ */
  --neutral-700: #4a4745;  --neutral-800: #2e2b29;  --neutral-900: #1d1a18;

  --green-100: #d8f3e3;  --green-600: #15803c;  --green-700: #116630;
  --red-100:   #fee2e2;  --red-600:   #d92d20;  --red-700:   #b42318;
  --blue-100:  #dbeafe;  --blue-600:  #175cd3;  --blue-700:  #12489f;
  --yellow-100:#fef3c7;  --yellow-700:#a16207;

  --gradient-brand: linear-gradient(105deg, #ffa33c 0%, #fe7031 52%, #f25436 100%);
  --gradient-brand-soft: linear-gradient(105deg, #fff5ee 0%, #ffe7d6 100%);

  /* ---------- TIPOGRAFIA ---------- */
  /* Combo A · Sora (display) + Manrope (corpo). Para trocar de combo, mude só estas 2 linhas. */
  --font-display: 'Sora', 'Poppins', -apple-system, sans-serif;
  --font-body: 'Manrope', 'Aptos', -apple-system, sans-serif;
  --font-brand: var(--font-body); /* compat: botões, inputs, etc. usam o corpo */
  --text-display: clamp(2.25rem, 7vw, 4rem);
  --text-h1: clamp(1.9rem, 5.5vw, 2.5rem);
  --text-h2: clamp(1.55rem, 4.5vw, 2rem);
  --text-h3: clamp(1.3rem, 3.6vw, 1.5rem);
  --text-h4: 1.25rem;
  --text-body-lg: 1.125rem;  --text-body: 1rem;  --text-body-sm: .875rem;  --text-caption: .75rem;

  /* ---------- ESPAÇAMENTO (base 1rem = spacer BS) ---------- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem; --space-10:8rem;

  /* ---------- FORMA / ELEVAÇÃO / MOVIMENTO ---------- */
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 32px; --radius-pill: 999px;
  --shadow-1: 0 1px 3px rgba(29,26,24,.07), 0 1px 2px rgba(29,26,24,.04);
  --shadow-2: 0 6px 18px -4px rgba(29,26,24,.10), 0 2px 6px rgba(29,26,24,.05);
  --shadow-3: 0 16px 40px -8px rgba(29,26,24,.16), 0 4px 12px rgba(29,26,24,.06);
  --shadow-brand: 0 10px 28px -6px rgba(254,112,49,.38);
  --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 450ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* ---------- SEMÂNTICOS (Light) ---------- */
  --bg-page: var(--neutral-50);
  --bg-surface: var(--neutral-0);
  --bg-subtle: var(--neutral-100);
  --bg-brand: var(--orange-500);
  --bg-brand-subtle: var(--orange-50);
  --text-heading: var(--neutral-900);
  --text-body-c: var(--neutral-700);
  --text-muted-c: var(--neutral-600); /* neutral-600 p/ passar AA (era neutral-500, contraste ~2.7:1) */
  --text-on-brand: var(--neutral-0);
  --text-link: var(--orange-700);
  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --focus-ring: 0 0 0 3px rgba(254,112,49,.35);
}
/* Fontes maiores em telas pequenas · legibilidade primeiro */
@media (max-width: 575.98px) {
  :root { --text-caption: .8125rem; --text-body-sm: .9375rem; }
}

/* ============================================================ BASE sobre o Reboot do BS4 */
:root { --nav-h: 66px; } /* altura real da navbar; sobrescrita por JS (evita valor chumbado) */
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body { font-family: var(--font-body); color: var(--text-body-c); background: var(--bg-page); line-height: 1.65; overflow-x: clip; }
/* Títulos e números de destaque usam a fonte display (Sora) */
h1, h2, h3, h4, h5, h6,
.t-display, .t-h1, .t-h2, .t-h3, .t-h4,
.hd-title, .footer-cta h3, .stat .num, .prin-card .n {
  font-family: var(--font-display); }
::selection { background: var(--orange-200); color: var(--neutral-900); }
h1,h2,h3,h4,h5,h6 { color: var(--text-heading); letter-spacing: -.02em; }
a { color: var(--text-link); }
a:hover { color: var(--orange-800); }
code { background: var(--bg-subtle); padding: .15em .45em; border-radius: 6px; color: var(--neutral-800); font-size: .85em; white-space: nowrap; }

/* ============================================================ NAVBAR (BS4 navbar + mega menu)
   Truque: o painel recebe z-index NEGATIVO, então pinta ATRÁS do fundo da própria navbar.
   Assim a barra (e seus links) fica por cima e o mega menu desliza por trás dela.
   Requisito: nenhum ancestral entre o painel e a navbar pode criar stacking context
   (por isso o .container NÃO tem z-index). */
.f-navbar { background: rgba(250,248,247,.98); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-default); padding-top: .65rem; padding-bottom: .65rem;
  z-index: 1030; transition: box-shadow var(--duration-base) var(--ease-out); }
.f-navbar .navbar-brand { font-weight: 700; color: var(--neutral-900) !important; display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }
.f-navbar .navbar-brand small { font-weight: 500; color: var(--text-muted-c); font-size: .8em; }
.brand-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--gradient-brand); display: inline-block; }
.f-navbar .nav-link { font-weight: 600; font-size: var(--text-body-sm); color: var(--neutral-700) !important;
  border-radius: var(--radius-pill); padding: .5rem 1.1rem !important; transition: all var(--duration-fast) var(--ease-out); }
.f-navbar .nav-link:hover, .f-navbar .show > .nav-link { background: var(--bg-brand-subtle); color: var(--orange-700) !important; }
.f-navbar .navbar-nav > .nav-item > .btn { font-size: var(--text-body-sm); font-weight: 600; }
.f-navbar .navbar-toggler { border-color: var(--border-strong); border-radius: var(--radius-sm); }
.f-navbar .navbar-toggler:focus { outline: none; box-shadow: var(--focus-ring); }
/* Mega menu (desktop ≥ lg): largura total, ABAIXO da barra (top:100%), revela crescendo de
   cima para baixo (max-height + overflow:hidden). Sem overlap com a barra, sem hack de z-index:
   a barra fica naturalmente por cima porque o painel nasce no fim dela. */
@media (min-width: 992px) {
  .f-navbar .dropdown-menu.mega-panel { display: block; width: 100%; left: 0; right: 0; top: 100%; margin: 0;
    border: 0; border-bottom: 1px solid var(--border-default); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-3); background: var(--bg-surface); padding: var(--space-6) 0;
    opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility var(--duration-base); }
  .f-navbar .dropdown-menu.mega-panel.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
}
/* Mobile (< lg): dropdown vira lista empilhada dentro do collapse */
@media (max-width: 991.98px) {
  .f-navbar .dropdown-menu.mega-panel { border: 0; box-shadow: none; background: transparent;
    padding: 0 0 var(--space-3); margin: 0; }
  .f-navbar .navbar-nav { padding-top: var(--space-3); }
  .f-navbar .nav-item.dropdown { border-bottom: 1px solid var(--border-default); }
  .f-navbar .nav-item.dropdown:last-child { border-bottom: 0; }
  .f-navbar .nav-link { padding: .85rem .5rem !important; border-radius: var(--radius-sm); }
  .mega-intro { display: none; } /* no mobile, a intro vira ruído; só os links */
}
/* menu mobile aberto: trava o scroll do fundo, mas permite rolar dentro do menu */
body.nav-open { overflow: hidden; }
@media (max-width: 991.98px) {
  .f-navbar .navbar-collapse.show {
    max-height: calc(100vh - var(--nav-h, 63px)); max-height: calc(100dvh - var(--nav-h, 63px));
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}
/* Coluna de introdução do mega menu — topo alinhado com o rótulo dos pilares */
.mega-intro { padding: 0 1rem var(--space-3); }
.mega-eyebrow { font-size: var(--text-caption); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange-600); margin-bottom: 8px; }
.mega-title { font-family: var(--font-display); font-size: var(--text-h4); font-weight: 700; line-height: 1.18;
  color: var(--neutral-900); margin: 0 0 10px; }
.mega-intro p { font-size: var(--text-body-sm); color: var(--text-muted-c); margin: 0; max-width: 26ch; }
.mega-link { display: block; padding: .7rem 1rem; border-radius: var(--radius-md); transition: background var(--duration-fast) var(--ease-out); }
.mega-link:hover { background: var(--bg-brand-subtle); text-decoration: none; }
.mega-link b { display: block; font-size: var(--text-body-sm); font-weight: 600; color: var(--neutral-800); }
.mega-link span { font-size: var(--text-caption); color: var(--text-muted-c); }

/* ---------- Mega menu RICO (estilo Untitled UI): item com ícone + título + descrição ---------- */
/* Cabeçalho de coluna (reaproveita o eyebrow, mas como rótulo de grupo) */
.mega-coltitle { font-size: var(--text-caption); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted-c); padding: 0 1rem; margin-bottom: 6px; }
/* Item rico: quadradinho de ícone à esquerda, texto empilhado à direita */
.mega-rich { display: flex; gap: 14px; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-out); }
.mega-rich:hover { background: var(--bg-brand-subtle); text-decoration: none; }
/* Base do quadradinho de ícone (centraliza o glifo + raio) — vale para item rico E card */
.mr-ic { flex: none; width: 40px; height: 40px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.mega-rich .mr-ic { background: var(--bg-brand-subtle); color: var(--orange-600);
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.mega-rich:hover .mr-ic { background: var(--gradient-brand); color: #fff; }
.mega-rich b { display: block; font-size: var(--text-body-sm); font-weight: 600; color: var(--neutral-800); line-height: 1.3; }
/* mira só a descrição (span logo após o título), nunca o wrapper do ícone .mr-ic */
.mega-rich b + span { display: block; font-size: var(--text-caption); color: var(--text-muted-c); margin-top: 2px; max-width: 28ch; line-height: 1.4; min-height: 2.8em; }
/* Painel lateral de destaque (não duplica a navbar): card de CTA on-brand */
.mega-aside { background: var(--bg-subtle); border-radius: var(--radius-lg); padding: var(--space-4); }
.mega-feature { display: flex; flex-direction: column; gap: 10px; }
.mega-feature .mf-head { display: flex; align-items: center; gap: 12px; }
.mega-feature .mr-ic { width: 40px; height: 40px; font-size: 1.15rem; border-radius: var(--radius-md);
  background: var(--gradient-brand); color: #fff; box-shadow: none; }
.mega-feature .mf-title { font-size: var(--text-body); font-weight: 700; color: var(--neutral-900); }
.mega-feature .mf-desc { font-size: var(--text-body-sm); color: var(--text-muted-c); }
.mega-feature .btn { align-self: flex-start; margin-top: 2px; }
@media (max-width: 991.98px) {
  .mega-aside { background: transparent; padding: var(--space-2) 1rem; }
  .mega-coltitle { margin-top: var(--space-2); }
}

/* ============================================================ HERO */
/* Fundo do hero: imagem clara (arcos laranja à direita) + véu off-white à esquerda p/ legibilidade do título */
.hero { position: relative; overflow: hidden; padding: var(--space-9) 0 var(--space-8);
  background: linear-gradient(90deg, var(--neutral-50) 0%, rgba(250,248,247,.86) 38%, rgba(250,248,247,.30) 64%, rgba(250,248,247,0) 82%), var(--neutral-50) url("imagery/hero-bg-light.jpg") right center / cover no-repeat; }
@media (min-width: 768px) { .hero { padding: var(--space-10) 0 var(--space-9); } }
@media (max-width: 767.98px) { .hero {
  background: linear-gradient(180deg, var(--neutral-50) 0%, rgba(250,248,247,.72) 60%, rgba(250,248,247,.45) 100%), var(--neutral-50) url("imagery/hero-bg-light.jpg") right center / cover no-repeat; } }
.hero-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-caption);
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-700);
  background: var(--bg-brand-subtle); border: 1px solid var(--orange-200);
  padding: 6px 16px; border-radius: var(--radius-pill); margin-bottom: var(--space-5); }
.hero-kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--orange-500); flex: none; }
.hero h1 { font-size: var(--text-display); font-weight: 700; line-height: 1.08; max-width: 14ch; }
.hero h1 em { font-style: normal; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { font-size: var(--text-body-lg); max-width: 56ch; margin-top: var(--space-5); }
.meta-chip { font-size: var(--text-caption); font-weight: 500; color: var(--neutral-600);
  background: var(--bg-surface); border: 1px solid var(--border-default);
  padding: 6px 14px; border-radius: var(--radius-pill); display: inline-block; margin: 0 8px 8px 0; }
.reveal { opacity: 0; transform: translateY(18px); animation: reveal .8s var(--ease-out) forwards; }
@keyframes reveal { to { opacity: 1; transform: none; } }

/* ============================================================ SEÇÕES */
.block { padding: var(--space-6) 0; }
@media (min-width: 768px) { .block { padding: var(--space-7) 0; } }
.sec-label { display: flex; align-items: center; gap: 12px; font-size: var(--text-caption); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--orange-600); margin-bottom: var(--space-3); }
.sec-label::before { content: ''; width: 26px; height: 13px; border-radius: 13px 13px 0 0; background: var(--gradient-brand); flex: none; }
.f-h2 { font-size: var(--text-h2); font-weight: 600; margin-bottom: var(--space-3); }
.f-h3 { font-size: var(--text-h4); font-weight: 600; margin-top: var(--space-7); margin-bottom: var(--space-3); }
.sec-intro { max-width: none; margin-bottom: var(--space-6); }
.t-caption { font-size: var(--text-caption); color: var(--text-muted-c); font-weight: 400; }
.note { display: flex; gap: 12px; background: var(--bg-brand-subtle); border: 1px solid var(--orange-200);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); font-size: var(--text-body-sm);
  max-width: none; margin-top: var(--space-5); }
.note b { color: var(--orange-800); }
.note::before { content: '→'; color: var(--orange-600); font-weight: 700; }

/* ============================================================ CORES */
.ramp-name { font-size: var(--text-h4); font-weight: 600; color: var(--text-heading); margin: var(--space-8) 0 var(--space-4); }
.ramp-name:first-of-type { margin-top: var(--space-5); }
.ramp-name small { font-size: var(--text-caption); font-weight: 500; color: var(--text-muted-c); margin-left: 8px; }
.ramp { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-4); }
@media (max-width: 575.98px) { .ramp { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } }
.swatch { border-radius: var(--radius-md); overflow: hidden; cursor: pointer; border: 1px solid var(--border-default);
  background: var(--bg-surface); transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.swatch:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.swatch .chip { height: 96px; position: relative; }
.swatch .chip .star { position: absolute; top: 10px; right: 12px; font-size: 11px; }
.swatch .info { padding: 14px 16px 16px; }
.swatch .tk { font-size: 13px; font-weight: 600; color: var(--neutral-800); word-break: break-all; }
.swatch .hex { font-size: 12px; color: var(--text-muted-c); font-family: SFMono-Regular, Consolas, monospace;
  text-transform: uppercase; margin-top: 2px; }
.swatch .wcag { display: inline-block; margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 10px; border-radius: var(--radius-pill); }
.wcag.pass { background: var(--green-100); color: var(--green-700); }
.wcag.large { background: var(--yellow-100); color: var(--yellow-700); }
.wcag.fail { background: var(--neutral-100); color: var(--neutral-500); }
.gradient-bar { height: 88px; border-radius: var(--radius-lg); background: var(--gradient-brand);
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; text-align: center;
  padding: 0 var(--space-4); box-shadow: var(--shadow-brand); margin-top: var(--space-6); font-size: var(--text-body-sm); }

/* Tabelas (BS .table + tema) */
.f-table { font-size: var(--text-body-sm); margin-top: var(--space-5); background: var(--bg-surface); border-radius: var(--radius-md); }
.f-table thead th { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-muted-c); border-top: 0; border-bottom: 2px solid var(--border-strong) !important; }
.f-table td { vertical-align: middle; border-color: var(--border-default); }
.dot-cell { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-default); vertical-align: middle; }

/* ============================================================ MARCA / LOGOS */
.logo-card { background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.logo-card .holder { height: 140px; display: flex; align-items: center; justify-content: center;
  padding: var(--space-4); overflow: hidden; flex: none; }
.logo-card.dark .holder { background: var(--neutral-900); }
.logo-card .holder img { max-height: 96px; max-width: 100%; width: auto; height: auto; }
.logo-card p { padding: var(--space-3) var(--space-4); margin: 0; font-size: var(--text-body-sm);
  font-weight: 600; color: var(--neutral-800); border-top: 1px solid var(--border-default); }
.logo-card p span { display: block; font-weight: 400; font-size: var(--text-caption); color: var(--text-muted-c); }
.brand-mark { height: 34px; width: auto; }
@media (max-width: 575.98px) { .brand-mark { height: 30px; } }
/* telas bem estreitas (≤360px): navbar cabe em 1 linha (logo + busca + idioma + hambúrguer) */
@media (max-width: 360px) {
  .f-navbar > .container { padding-left: 8px; padding-right: 8px; }
  .f-navbar .navbar-brand { margin-right: 0; }
  .f-navbar .brand-mark { height: 28px; }
  .nav-utils-mobile { margin-right: 0 !important; }
  .nav-utils-mobile .nav-util-btn { padding: .4rem .34rem !important; gap: 4px; }
  .nav-utils-mobile .nav-lang-current { font-size: .8rem; }
  .nav-utils-mobile .flag { width: 18px; height: 12px; }
  .f-navbar .navbar-toggler { padding: .35rem .5rem; }
}
.brand-neg { display: none; }
.f-navbar .navbar-brand, .f-navbar .nav-link { transition: color var(--duration-base) var(--ease-out); }

/* Navbar invertida sobre seções escuras: fundo escuro quente, logo negativa, texto branco */
.f-navbar.nav-on-dark { background: #181311; border-bottom-color: rgba(255,255,255,.08); box-shadow: none !important; }
.f-navbar.nav-on-dark .navbar-brand { color: #fff !important; }
.f-navbar.nav-on-dark .navbar-brand small { color: rgba(255,255,255,.65); }
.f-navbar.nav-on-dark .nav-link { color: #fff !important; }
.f-navbar.nav-on-dark .nav-link:hover, .f-navbar.nav-on-dark .show > .nav-link { background: rgba(255,255,255,.14); color: #fff !important; }
.f-navbar.nav-on-dark .brand-pos { display: none; }
/* navbar: ícones utilitários (busca + idioma) */
.nav-util .nav-util-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 1.02rem;
  color: var(--neutral-700) !important; padding: .45rem .6rem !important; border-radius: var(--radius-sm); cursor: pointer; }
.nav-util .nav-util-btn:hover { background: var(--bg-brand-subtle); color: var(--orange-700) !important; }
.nav-util .nav-lang-current { font-size: var(--text-body-sm); font-weight: 600; }
.f-navbar.nav-on-dark .nav-util .nav-util-btn { color: #fff !important; }
.f-navbar.nav-on-dark .nav-util .nav-util-btn:hover { background: rgba(255,255,255,.14); }
/* mobile: mega menu fica sobre a navbar escura (painel transparente) -> textos claros */
@media (max-width: 991.98px) {
  .f-navbar.nav-on-dark .mega-rich b { color: #fff; }
  .f-navbar.nav-on-dark .mega-rich b + span { color: rgba(255,255,255,.62); }
  .f-navbar.nav-on-dark .mf-title { color: #fff; }
  .f-navbar.nav-on-dark .mf-desc { color: rgba(255,255,255,.62); }
  .f-navbar.nav-on-dark .mega-coltitle, .f-navbar.nav-on-dark .mega-eyebrow { color: rgba(255,255,255,.5); }
  .f-navbar.nav-on-dark .mega-intro h6 { color: #fff; }
  .f-navbar.nav-on-dark .mega-intro p { color: rgba(255,255,255,.62); }
  .f-navbar.nav-on-dark .mega-rich:hover { background: rgba(255,255,255,.08); }
}
.nav-util .dropdown-menu { margin-top: 16px; }
.nav-search-menu { padding: 10px; min-width: 290px; }
/* desktop: busca abre larga, alinhada à direita sob a lupa, chegando até o início do menu */
@media (min-width: 992px) {
  .nav-search-menu { width: 765px; max-width: calc(100vw - 96px); }
  .nav-search-form .form-control { flex: 1 1 auto; min-width: 0; }
}
/* mobile: busca vira painel fixo full-width abaixo da navbar (não estoura/desalinha) */
@media (max-width: 991.98px) {
  .nav-search-menu { position: fixed !important; left: 12px; right: 12px; top: 60px; width: auto; min-width: 0; max-width: none; transform: none !important; margin: 0; }
}
.nav-search-form { display: flex; gap: 8px; }
.nav-search-form .form-control { height: 38px; }
.nav-lang-menu { min-width: 168px; padding: 6px; }
.nav-lang-menu .dropdown-item { border-radius: var(--radius-sm); padding: .5rem .75rem; display: flex; align-items: center; gap: 9px; font-size: var(--text-body-sm); font-weight: 600; }
.nav-lang-menu .dropdown-item.active, .nav-lang-menu .dropdown-item:active { background: var(--bg-brand-subtle); color: var(--orange-700); }
/* bandeirinhas SVG inline (renderizam no Windows, ao contrário dos emoji de bandeira) */
.flag { display: inline-block; width: 20px; height: 14px; border-radius: 2px; flex: none; vertical-align: -3px;
  background-size: cover; background-position: center; box-shadow: 0 0 0 1px rgba(0,0,0,.10); }
.nav-util-btn .flag { vertical-align: middle; margin-right: 7px; }
.flag-br { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'><rect width='28' height='20' fill='%23009b3a'/><path d='M14 2.2 25.6 10 14 17.8 2.4 10Z' fill='%23fedf00'/><circle cx='14' cy='10' r='4' fill='%23002776'/></svg>"); }
.flag-us { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'><rect width='28' height='20' fill='%23fff'/><rect width='28' height='2' fill='%23b22234'/><rect width='28' height='2' y='4' fill='%23b22234'/><rect width='28' height='2' y='8' fill='%23b22234'/><rect width='28' height='2' y='12' fill='%23b22234'/><rect width='28' height='2' y='16' fill='%23b22234'/><rect width='12' height='11' fill='%233c3b6e'/></svg>"); }
.f-navbar.nav-on-dark .brand-neg { display: inline-block; }
.f-navbar.nav-on-dark .navbar-toggler { border-color: rgba(255,255,255,.45); }
.f-navbar.nav-on-dark .navbar-toggler-icon { filter: invert(1) brightness(3); }

/* ============================================================ TIPOGRAFIA */
.type-row { padding: var(--space-5) 0; border-bottom: 1px solid var(--border-default); }
.type-meta { font-size: var(--text-caption); color: var(--text-muted-c); line-height: 1.8; }
.type-meta b { display: block; font-size: var(--text-body-sm); color: var(--neutral-800); font-weight: 600; }
.t-display { font-size: var(--text-display); font-weight: 700; letter-spacing: -.025em; color: var(--text-heading); line-height: 1.05; word-break: break-word; }
.t-h1 { font-size: var(--text-h1); font-weight: 700; color: var(--text-heading); }
.t-h2 { font-size: var(--text-h2); font-weight: 600; color: var(--text-heading); }
.t-h3 { font-size: var(--text-h3); font-weight: 600; color: var(--text-heading); }
.t-h4 { font-size: var(--text-h4); font-weight: 600; color: var(--text-heading); }
.t-body-lg { font-size: var(--text-body-lg); }
.t-body-sm { font-size: var(--text-body-sm); }
.t-cap { font-size: var(--text-caption); color: var(--text-muted-c); }
.t-overline { font-size: var(--text-caption); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-700); }

/* ============================================================ ESPAÇO / FORMA / GRID */
.space-row { display: flex; align-items: center; gap: var(--space-4); padding: 6px 0; }
.space-row code { width: 132px; flex: none; }
.space-bar { height: 20px; border-radius: var(--radius-pill); background: var(--gradient-brand); opacity: .85; max-width: calc(100% - 140px); }
.shape-card { background: var(--bg-surface); border: 1px solid var(--border-default); padding: var(--space-4); text-align: center; height: 100%; }
.shape-card .demo { height: 56px; background: var(--gradient-brand-soft); border: 2px solid var(--orange-300); margin-bottom: var(--space-3); }
.shape-card p { font-size: var(--text-caption); color: var(--text-muted-c); margin: 0; }
.shadow-card { background: var(--bg-surface); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-4);
  text-align: center; font-size: var(--text-body-sm); font-weight: 500; color: var(--neutral-700); height: 100%; }
.bs-cell { background: var(--gradient-brand-soft); border: 1px solid var(--orange-200); border-radius: var(--radius-sm);
  padding: 12px 6px; text-align: center; font-size: var(--text-caption); color: var(--orange-800); font-weight: 600; margin-bottom: 12px; }

/* ============================================================ ICONOGRAFIA / PRINCÍPIOS */
/* base .ic (usado em sol-card, hierarquia): círculo preenchido com degradê */
.ic { width: 52px; height: 52px; border-radius: 50%; background: var(--gradient-brand);
  display: grid; place-items: center; margin: 0 auto var(--space-3); flex: none; }
.ic svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Iconografia moderna: tile arredondado + line icon com traço-degradê, hover preenche e brilha */
.icon-cell { background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: 18px; padding: var(--space-5) var(--space-3); text-align: center; height: 100%;
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); }
.icon-cell:hover { transform: translateY(-4px); border-color: var(--orange-300);
  box-shadow: 0 14px 32px -12px rgba(254,112,49,.42); }
.icon-cell .ic { width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(150deg, var(--orange-50), #fff); border: 1px solid var(--orange-100);
  transition: background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-spring); }
.icon-cell .ic i { font-size: 26px; line-height: 1;
  background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  transition: color var(--duration-base) var(--ease-out); }
.icon-cell:hover .ic { background: var(--gradient-brand); border-color: transparent; transform: scale(1.06) rotate(-4deg); }
.icon-cell:hover .ic i { background: none; -webkit-text-fill-color: #fff; color: #fff; }
.icon-cell span { font-size: var(--text-caption); color: var(--text-muted-c); font-weight: 500; }
.prin-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  padding: var(--space-5); height: 100%; }
.prin-card .n { font-size: 2.4rem; font-weight: 800; line-height: 1;
  background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.prin-card h4 { font-size: var(--text-h4); margin: var(--space-3) 0 var(--space-2); }
.prin-card p { font-size: var(--text-body-sm); margin: 0; }

/* ============================================================ BOTÕES (BS .btn + tema Future) */
.btn { font-family: var(--font-brand); font-weight: 600; border-radius: var(--radius-pill);
  padding: .62rem 1.6rem; border-width: 2px; transition: all var(--duration-fast) var(--ease-out); }
.btn:focus, .btn.focus { box-shadow: var(--focus-ring) !important; }
.btn-lg { padding: .85rem 2.1rem; font-size: var(--text-body); border-radius: var(--radius-pill); }
.btn-sm { padding: .42rem 1.1rem; font-size: var(--text-caption); border-radius: var(--radius-pill); }
.btn-f-primary { background: var(--gradient-brand); background-origin: border-box; background-clip: border-box;
  color: var(--text-on-brand); border-color: transparent; box-shadow: var(--shadow-1); }
.btn-f-primary:hover { color: #fff; box-shadow: var(--shadow-brand); transform: translateY(-2px); }
.btn-f-primary:active { transform: none; filter: brightness(.94); }
.btn-f-primary.disabled, .btn-f-primary:disabled { background: var(--neutral-200); color: var(--neutral-500); box-shadow: none; }
.btn-f-secondary { background: transparent; color: var(--orange-700); border-color: var(--orange-500); }
.btn-f-secondary:hover { background: var(--bg-brand-subtle); color: var(--orange-800); }
.btn-f-secondary.disabled, .btn-f-secondary:disabled { color: var(--neutral-500); border-color: var(--neutral-300); }
.btn-f-ghost { background: transparent; color: var(--neutral-700); border-color: transparent; }
.btn-f-ghost:hover { background: var(--bg-subtle); color: var(--neutral-900); }
.btn-f-dark { background: var(--neutral-900); color: #fff; border-color: transparent; }
.btn-f-dark:hover { background: var(--neutral-800); color: #fff; transform: translateY(-2px); }
.btn-f-dark.disabled, .btn-f-dark:disabled { background: var(--neutral-200); color: var(--neutral-500); }
.btn-demo-row { display: flex; flex-wrap: wrap; align-items: center; margin: 0 -6px var(--space-4); }
.btn-demo-row > * { margin: 6px; }
.btn-demo-label { font-size: var(--text-caption); font-weight: 600; color: var(--text-muted-c);
  text-transform: uppercase; letter-spacing: .08em; width: 100%; margin: var(--space-4) 6px 2px; }

/* ============================================================ FORMS (BS4 custom controls + tema) */
.form-control, .custom-select { font-family: var(--font-brand); font-size: var(--text-body-sm);
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-md);
  padding: .7rem 1rem; height: auto; color: var(--neutral-800); }
.form-control:hover:not(:disabled) { border-color: var(--neutral-500); }
.form-control:focus, .custom-select:focus { border-color: var(--orange-500); box-shadow: var(--focus-ring); }
.form-control.is-invalid { border-color: var(--red-600); background-image: none; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(217,45,32,.25); }
.invalid-feedback { color: var(--red-700); font-weight: 500; font-size: var(--text-caption); }
label { font-size: var(--text-body-sm); font-weight: 600; color: var(--neutral-800); }
.form-text { font-size: var(--text-caption); color: var(--text-muted-c) !important; }
.custom-control-label { font-weight: 400; color: var(--neutral-700); font-size: var(--text-body-sm); padding-top: 1px; }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--orange-500); border-color: var(--orange-500); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: var(--focus-ring); }
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--orange-500); }
.custom-switch .custom-control-label::before { border-radius: var(--radius-pill); }
.ctl-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  padding: var(--space-5); height: 100%; display: flex; flex-direction: column;
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.ctl-card:hover { border-color: var(--orange-200); box-shadow: var(--shadow-2); }
.ctl-card h5 { display: flex; align-items: center; gap: 8px; font-size: var(--text-caption);
  text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted-c); font-weight: 600;
  margin-bottom: var(--space-4); }
.ctl-card h5 i { font-size: 15px; color: var(--orange-500); }
.ctl-card p { font-size: var(--text-body-sm); margin: 0; }
.ctl-card .ctl-help { margin-top: auto; padding-top: var(--space-3); font-size: var(--text-caption);
  color: var(--text-muted-c); }
.ctl-card-wide { margin-top: var(--space-2); }
.ctl-card-wide h5 { margin-bottom: var(--space-3); }

/* Input com ícone embutido */
.f-input-icon { position: relative; }
.f-input-icon i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--orange-600); font-size: 16px; pointer-events: none; }
.f-input-icon .form-control { padding-left: 40px; }

/* Link com seta animada */
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--text-body-sm); }
.link-arrow i { transition: transform var(--duration-fast) var(--ease-out); }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover i { transform: translateX(4px); }

/* ============================================================ BADGES (BS .badge + tema) */
.badge { font-family: var(--font-brand); font-weight: 600; font-size: var(--text-caption);
  padding: .45em 1.1em; border-radius: var(--radius-pill); }
.badge-f-brand { background: var(--orange-50); color: var(--orange-800); }
.badge-f-success { background: var(--green-100); color: var(--green-700); }
.badge-f-error { background: var(--red-100); color: var(--red-700); }
.badge-f-info { background: var(--blue-100); color: var(--blue-700); }
.badge-f-neutral { background: var(--neutral-100); color: var(--neutral-700); }
.status { vertical-align: middle; margin-left: 10px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }

/* ============================================================ DO'S & DON'TS */
.dd-card { border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); border: 1px solid;
  font-size: var(--text-body-sm); height: 100%; }
.dd-do { background: #f4fbf7; border-color: #bbe5cc; }
.dd-dont { background: #fdf3f2; border-color: #f5c6c0; }
.dd-card h5 { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-bottom: var(--space-3); }
.dd-do h5 { color: var(--green-700); } .dd-dont h5 { color: var(--red-700); }
.dd-card ul { padding-left: 18px; margin: 0; }
.dd-card li { padding: 3px 0; }

/* ============================================================ VOZ & MICROCOPY */
.vp { border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg-surface); margin-bottom: var(--space-4); }
.vp .ctx { background: var(--bg-subtle); font-size: var(--text-caption); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted-c); padding: 8px var(--space-5); }
.vp .pair > div { padding: var(--space-4) var(--space-5); font-size: var(--text-body-sm); }
.vp .bad { color: var(--neutral-500); text-decoration: line-through; text-decoration-color: rgba(217,45,32,.45);
  border-bottom: 1px solid var(--border-default); }
.vp .good { color: var(--neutral-800); font-weight: 500; }
@media (min-width: 768px) {
  .vp .pair { display: flex; }
  .vp .pair > div { flex: 1; }
  .vp .bad { border-bottom: 0; border-right: 1px solid var(--border-default); }
}

/* ============================================================ HIERARQUIA · escada do token à página */
.a-step { display: flex; gap: var(--space-4); }
.a-rail { flex: none; width: 44px; display: flex; flex-direction: column; align-items: center; }
.a-rail span { width: 44px; height: 44px; border-radius: 50%; background: var(--gradient-brand);
  color: #fff; font-weight: 700; font-size: 1.1rem; display: grid; place-items: center; flex: none; }
.a-rail::after { content: ''; flex: 1; width: 2px; border-radius: 2px; margin: 8px 0 2px;
  background: linear-gradient(var(--orange-300), var(--orange-100)); }
.a-step:last-child .a-rail::after { display: none; }
.a-body { flex: 1; min-width: 0; padding-bottom: var(--space-7); }
.a-step:last-child .a-body { padding-bottom: 0; }
.a-body h4 { font-size: var(--text-h4); font-weight: 600; margin: 8px 0 4px; }
.a-body h4 small { font-size: var(--text-caption); color: var(--text-muted-c); font-weight: 500; margin-left: 8px; }
.a-body > p { font-size: var(--text-body-sm); max-width: 58ch; margin-bottom: var(--space-3); }
.a-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  background: var(--bg-surface); border: 1px dashed var(--orange-300);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); max-width: 640px; }
.tk-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--orange-500); }
.tk-type { font-weight: 700; font-size: 22px; color: var(--neutral-900); line-height: 1; }
.tk-space { width: 48px; height: 12px; border-radius: 6px; background: var(--gradient-brand); opacity: .8; }
.mini-field { width: 220px; max-width: 100%; }
.mini-field label { font-size: var(--text-caption); margin-bottom: 2px; display: block; }
.mini-field .form-control { padding: .4rem .8rem; font-size: var(--text-caption); }
.wire { width: 210px; max-width: 100%; border: 1.5px solid var(--border-strong); border-radius: 10px;
  overflow: hidden; background: #fff; }
.wire .w-nav { height: 14px; background: var(--neutral-100); border-bottom: 1px solid var(--border-default); }
.wire .w-hero { height: 36px; background: var(--gradient-brand-soft); margin: 6px; border-radius: 6px; }
.wire .w-cards { display: flex; gap: 6px; margin: 0 6px 6px; }
.wire .w-cards i { flex: 1; height: 24px; background: var(--neutral-100); border-radius: 5px; }

/* ============================================================ TICKER */
.ticker-shell { background: var(--neutral-900); border-radius: var(--radius-lg); overflow: hidden;
  display: flex; align-items: stretch; box-shadow: var(--shadow-3); }
.ticker-tag { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px;
  background: var(--gradient-brand); color: #fff; font-size: var(--text-caption);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
@media (min-width: 768px) { .ticker-tag { padding: 0 22px; } }
.ticker-tag .pulse { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; transform: scale(.75); } }
.ticker-viewport { overflow: hidden; flex: 1; display: flex; align-items: center; min-width: 0; }
.ticker-track { display: flex; gap: var(--space-7); padding: 14px 0; white-space: nowrap;
  animation: ticker 38s linear infinite; will-change: transform; }
.ticker-shell:hover .ticker-track { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: 10px; color: var(--neutral-300); font-size: var(--text-body-sm); }
.ticker-item .sev { font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 3px 10px; border-radius: var(--radius-pill); }
.sev-crit { background: rgba(242,84,54,.18); color: #ff9a85; }
.sev-high { background: rgba(255,163,60,.16); color: var(--orange-300); }
.sev-med  { background: rgba(255,191,77,.14); color: var(--amber-300); }
.ticker-item b { color: #fff; font-weight: 600; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ============================================================ CONTADOR */
.stats-band { position: relative; overflow: hidden; background: var(--neutral-900);
  border-radius: var(--radius-xl); padding: var(--space-6) var(--space-5); }
@media (min-width: 768px) { .stats-band { padding: var(--space-8) var(--space-7); } }
.stats-band::before { content: ''; position: absolute; left: -120px; bottom: -260px; width: 460px; height: 460px;
  border-radius: 50%; background: var(--gradient-brand); opacity: .22; filter: blur(8px); }
.stats-band::after { content: ''; position: absolute; right: -60px; top: -160px; width: 300px; height: 300px;
  border-radius: 50%; border: 2px solid rgba(255,163,60,.25); }
.stat { position: relative; }
.stat .num { font-size: clamp(1.7rem, 5vw, 2.9rem); font-weight: 700; letter-spacing: -.02em;
  background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat .lbl { font-size: var(--text-caption); color: #b3aeab; margin-top: 4px; }
.mini-dark { background: var(--neutral-900); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); display: inline-flex; align-items: center; max-width: 100%; overflow: hidden; }

/* ============================================================ CARDS */
.sol-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  padding: var(--space-5); height: 100%; transition: all var(--duration-base) var(--ease-out); }
.sol-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-3); border-color: var(--orange-300); }
.sol-card .ic { margin: 0 0 var(--space-4); transition: transform var(--duration-base) var(--ease-spring); }
.sol-card:hover .ic { transform: scale(1.12) rotate(-6deg); }
.sol-card h4 { font-size: var(--text-h4); font-weight: 600; margin-bottom: var(--space-2); }
.sol-card p { font-size: var(--text-body-sm); }
.sol-card .link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2);
  font-size: var(--text-body-sm); font-weight: 600; color: var(--orange-700); }
.sol-card .link::after { content: '→'; transition: transform var(--duration-fast) var(--ease-out); }
.sol-card:hover .link::after { transform: translateX(4px); }

/* ============================================================ MOVIMENTO */
.motion-card { background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: var(--space-4); height: 100%; }
.motion-card .lane { height: 48px; background: var(--bg-subtle); border-radius: var(--radius-md);
  position: relative; margin-bottom: var(--space-3); overflow: hidden; }
.motion-card .ball { position: absolute; top: 12px; left: 8px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--gradient-brand); }
.motion-card:hover .b-fast { transition: left var(--duration-fast) var(--ease-out); left: calc(100% - 32px); }
.motion-card:hover .b-base { transition: left var(--duration-base) var(--ease-out); left: calc(100% - 32px); }
.motion-card:hover .b-slow { transition: left var(--duration-slow) var(--ease-out); left: calc(100% - 32px); }
.motion-card:hover .b-spring { transition: left var(--duration-slow) var(--ease-spring); left: calc(100% - 32px); }
.motion-card b { font-size: var(--text-body-sm); color: var(--neutral-800); display: block; }
.motion-card span { font-size: var(--text-caption); color: var(--text-muted-c); }

/* ============================================================ FOOTER / TOAST */
.f-footer { border-top: 1px solid var(--border-default); padding: var(--space-6) 0 var(--space-7);
  font-size: var(--text-body-sm); color: var(--text-muted-c); }
.changelog { font-size: var(--text-caption); color: var(--text-muted-c); line-height: 2; margin-top: var(--space-4); }
.changelog b { color: var(--neutral-700); }
/* changelog como timeline (montada via JS a partir das entradas) */
.changelog-tl { position: relative; margin-top: var(--space-3); padding-left: 24px; line-height: 1.5; }
.changelog-tl::before { content: ''; position: absolute; left: 5px; top: 7px; bottom: 7px; width: 2px;
  background: linear-gradient(180deg, var(--orange-300), var(--border-default) 18%, var(--border-default)); }
.cl-item { position: relative; padding-bottom: var(--space-4); }
.cl-item:last-child { padding-bottom: 0; }
.cl-item::before { content: ''; position: absolute; left: -24px; top: 5px; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid var(--orange-400); box-shadow: 0 0 0 3px var(--bg-page); }
.cl-item.is-latest::before { background: var(--gradient-brand); border-color: transparent; }
.cl-item.is-hidden { display: none; }
.cl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.cl-ver { font-family: var(--font-display); font-weight: 700; color: var(--neutral-900); font-size: var(--text-body-sm); }
.cl-date { font-size: var(--text-caption); color: var(--text-muted-c); }
.cl-type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 9px; border-radius: var(--radius-pill); }
.cl-type.t-novo { background: var(--bg-brand-subtle); color: var(--orange-700); }
.cl-type.t-fix { background: #e6f4ec; color: #1f7a4d; }
.cl-type.t-refino { background: var(--neutral-100); color: var(--neutral-700); }
.cl-type.t-infra { background: #eceefb; color: #3c3b6e; }
.cl-text { font-size: var(--text-caption); color: var(--neutral-700); line-height: 1.6; }
.cl-text code { background: var(--neutral-100); border-radius: var(--radius-sm); padding: 1px 5px; font-size: .92em; }
.cl-more { margin-top: var(--space-5); }
.cl-more button { background: transparent; border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  padding: 7px 18px; font-size: var(--text-body-sm); font-weight: 600; color: var(--neutral-700); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.cl-more button:hover { border-color: var(--orange-400); color: var(--orange-700); }
.cl-more button .bi { transition: transform var(--duration-fast) var(--ease-out); }
.cl-more button.is-open .bi { transform: rotate(180deg); }
#toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 80px);
  background: var(--neutral-900); color: #fff; font-size: var(--text-body-sm); font-weight: 500;
  padding: 12px 24px; border-radius: var(--radius-pill); box-shadow: var(--shadow-3);
  transition: transform var(--duration-base) var(--ease-spring); z-index: 1080; }
#toast.show { transform: translate(-50%, 0); }

/* Microtextos: nunca abaixo de 12px em telas pequenas */
@media (max-width: 767.98px) {
  .swatch .hex { font-size: 12px; }
  .swatch .tk { font-size: 13px; }
  .swatch .wcag { font-size: 11.5px; }
  .badge { font-size: .8125rem; }
  .status { font-size: 11.5px; }
  .ticker-item .sev { font-size: 11px; }
}

/* ============================================================ ALERTS */
.alert { border-radius: var(--radius-md); border-width: 1px; font-size: var(--text-body-sm);
  padding: var(--space-4) var(--space-5); }
.alert b { font-weight: 600; }
.alert-f-success { background: #f4fbf7; border-color: #bbe5cc; color: var(--green-700); }
.alert-f-error { background: #fdf3f2; border-color: #f5c6c0; color: var(--red-700); }
.alert-f-info { background: #f0f6ff; border-color: #c6dbf7; color: var(--blue-700); }
.alert-f-warning { background: var(--orange-50); border-color: var(--orange-200); color: var(--orange-800); }

/* ============================================================ BREADCRUMB & PAGINAÇÃO */
.f-breadcrumb { background: transparent; padding: 0; margin: 0; font-size: var(--text-body-sm); }
.f-breadcrumb .breadcrumb-item.active { color: var(--text-muted-c); }
.f-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: '›'; color: var(--neutral-400); }
.f-pagination { margin: 0; }
.f-pagination .page-link { border: 1px solid var(--border-default); color: var(--neutral-700); font-weight: 600;
  font-size: var(--text-body-sm); margin: 0 3px; border-radius: var(--radius-pill) !important;
  min-width: 40px; text-align: center; }
.f-pagination .page-link:hover { background: var(--bg-brand-subtle); color: var(--orange-700); }
.f-pagination .page-link:focus { box-shadow: var(--focus-ring); }
.f-pagination .page-item.active .page-link { background: var(--gradient-brand); border-color: transparent; color: #fff; }
.f-pagination .page-item.disabled .page-link { color: var(--neutral-400); }

/* ============================================================ TABS */
.f-tabs { border-bottom: 1px solid var(--border-default); }
.f-tabs .nav-link { border: 0; border-bottom: 3px solid transparent; border-radius: 0; font-weight: 600;
  font-size: var(--text-body-sm); color: var(--neutral-600); padding: .8rem 1.2rem; }
.f-tabs .nav-link:hover { color: var(--orange-700); border-bottom-color: var(--orange-200); }
.f-tabs .nav-link.active { color: var(--orange-700); background: transparent; border-bottom-color: var(--orange-500); }
.f-tab-content { padding: var(--space-5) 0 0; font-size: var(--text-body-sm); max-width: 64ch; }

/* ============================================================ ACCORDION (FAQ) */
.f-accordion .card { border: 1px solid var(--border-default); border-radius: var(--radius-md) !important;
  margin-bottom: var(--space-3); overflow: hidden; }
.f-accordion .card-header { background: var(--bg-surface); border: 0; padding: 0; }
.f-accordion .btn-faq { display: flex; justify-content: space-between; align-items: center; width: 100%;
  text-align: left; font-family: var(--font-brand); font-weight: 600; font-size: var(--text-body-sm);
  color: var(--neutral-800); padding: var(--space-4) var(--space-5); border: 0; background: none; cursor: pointer; }
.f-accordion .btn-faq:hover { color: var(--orange-700); }
.f-accordion .btn-faq:focus { outline: none; }
.f-accordion .btn-faq:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.f-accordion .btn-faq[aria-expanded="true"] { color: var(--orange-700); }
.f-accordion .faq-chev { flex: none; margin-left: var(--space-4); font-size: 1rem; color: var(--orange-500);
  transition: transform var(--duration-base) var(--ease-out); }
.f-accordion .btn-faq[aria-expanded="true"] .faq-chev { transform: rotate(180deg); }
/* card aberto: realce intencional */
.f-accordion .card:hover { border-color: var(--orange-200); }
.f-accordion .btn-faq[aria-expanded="true"] { border-bottom: 1px solid var(--border-default); }
.f-accordion .card-body { padding-top: var(--space-4); }
.f-accordion .card-body { font-size: var(--text-body-sm); padding: 0 var(--space-5) var(--space-4); }

/* ============================================================ MODAL */
.modal-content { border-radius: var(--radius-lg); border: 0; box-shadow: var(--shadow-3); }
.modal-header { border-bottom: 1px solid var(--border-default); padding: var(--space-4) var(--space-5); }
.modal-title { font-size: var(--text-h4); font-weight: 600; }
.modal-body { padding: var(--space-5); }
.modal-footer { border-top: 1px solid var(--border-default); padding: var(--space-3) var(--space-5); }

/* ============================================================ CARROSSEL DE CASES
   Altura uniforme (min-height + flex) e controles agrupados numa barra interna,
   centralizada na base do card: ‹ · · · › */
.f-carousel .case-slide { background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-xl); text-align: center;
  min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-7) var(--space-6) calc(var(--space-6) + 64px); }
@media (max-width: 575.98px) { .f-carousel .case-slide { min-height: 420px; } }
.f-carousel .case-slide .quote { font-size: var(--text-h4); font-weight: 500; color: var(--neutral-800);
  max-width: 46ch; margin: 0 auto var(--space-4); line-height: 1.5; }
.f-carousel .case-slide .who { font-size: var(--text-caption); color: var(--text-muted-c); }
.f-carousel .case-slide .who b { color: var(--orange-700); display: block; font-size: var(--text-body-sm); }
.f-carousel .carousel-indicators { bottom: 40px; margin: 0; }
.f-carousel .carousel-indicators li { width: 10px; height: 10px; border-radius: 50%;
  background: var(--neutral-300); border: 0; margin: 0 5px; }
.f-carousel .carousel-indicators .active { background: var(--orange-500); }
.f-carousel .carousel-control-prev, .f-carousel .carousel-control-next {
  top: auto; bottom: 25px; width: 40px; height: 40px; opacity: 1; }
.f-carousel .carousel-control-prev { left: calc(50% - 116px); }
.f-carousel .carousel-control-next { right: calc(50% - 116px); }
.f-carousel .ctrl { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-surface);
  border: 1px solid var(--border-strong); display: grid; place-items: center;
  color: var(--orange-700); font-size: 1.3rem; line-height: 1;
  transition: all var(--duration-fast) var(--ease-out); }
.f-carousel .carousel-control-prev:hover .ctrl, .f-carousel .carousel-control-next:hover .ctrl {
  background: var(--bg-brand-subtle); border-color: var(--orange-500); }

/* ============================================================ FOOTER DO SITE (organismo) */
.f-site-footer { background: #181311; color: var(--neutral-400);
  min-height: 100vh; display: flex; align-items: flex-end;
  padding: var(--space-9, 96px) 0 var(--space-7); font-size: var(--text-body-sm); position: relative; }
.f-site-footer > .container { width: 100%; }
/* ===== TELAS ALTAS / MONITORES GRANDES (ex.: 29"): limita secoes 100vh p/ nao gerar vao excessivo.
   So ativa acima de 1100px de altura -> notebooks (16" etc.) ficam intactos. ===== */
@media (min-height: 1100px) {
  .f-hero-dark { min-height: 900px !important; }
  .f-site-footer { min-height: 660px !important; }
}
/* CTA pré-footer · companheiro do hero, mesma luz quente */
.footer-cta { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--space-5); padding-bottom: var(--space-8, 64px); margin-bottom: var(--space-8, 64px);
  border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-cta-text { flex: 1 1 auto; min-width: 0; }
@media (min-width: 1200px) { .footer-cta h3, .footer-cta p { white-space: nowrap; } }
.footer-cta h3 { color: #fff; font-size: var(--text-h2); font-weight: 700; line-height: 1.15;
  margin: 0 0 8px; max-width: none; }
.footer-cta h3 em { font-style: normal; background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.footer-cta p { color: #a39d99; margin: 0; font-size: var(--text-body); max-width: none; }
.f-site-footer h6 { color: #fff; font-size: var(--text-caption); text-transform: uppercase;
  letter-spacing: .12em; font-weight: 700; margin-bottom: var(--space-4); }
.f-site-footer a:not(.btn) { color: var(--neutral-400); display: inline-block; padding: 3px 0; }
.f-site-footer a:not(.btn):hover { color: var(--orange-300); text-decoration: none; }
.f-site-footer .social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--neutral-700);
  display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; padding: 0;
  color: var(--neutral-400); transition: all var(--duration-fast) var(--ease-out); }
.f-site-footer .social a svg { width: 17px; height: 17px; display: block; }
.f-site-footer .social a:hover { background: var(--gradient-brand); border-color: transparent; color: #fff; }
.f-site-footer .f-logo { height: 30px; margin-bottom: var(--space-4); }
.f-site-footer .bottom { border-top: 1px solid var(--neutral-800); margin-top: var(--space-8, 64px);
  padding-top: var(--space-5); font-size: var(--text-caption); color: var(--neutral-500); }
/* mobile: CTA do rodapé centralizado, botão até as margens, menos respiro no topo */
@media (max-width: 767.98px) {
  .f-site-footer { min-height: auto; padding-top: var(--space-7); }
  .footer-cta { flex-direction: column; align-items: center; text-align: center; }
  .footer-cta-text { flex: 0 0 auto; width: 100%; }
  .footer-cta .btn { width: 100%; }
}

/* ============================================================ HERO DO SITE · dark quente imersivo
   Ref. SentinelOne adaptada ao guia: luz laranja sobre quase-preto AQUECIDO
   (nada de dark+neon frio · proibição do guia da marca) */
/* Primeira dobra: navbar (66px, sticky) + hero = 100% da altura da tela; depois rola normal */
.f-hero-dark { position: relative; overflow: hidden; border-radius: var(--radius-xl);
  color: var(--neutral-300); padding: 0;
  display: flex; flex-direction: column;
  min-height: calc(100vh - var(--nav-h, 66px)); min-height: calc(100dvh - var(--nav-h, 66px));
  background: linear-gradient(90deg, rgba(24,19,17,.97) 0%, rgba(24,19,17,.82) 42%, rgba(24,19,17,.40) 72%, rgba(24,19,17,.15) 100%), #181311 url("imagery/hero-bg-dark.jpg") right center / cover no-repeat; }
/* área de conteúdo cresce e centraliza na vertical; ticker fica no rodapé da dobra */
.f-hero-dark > .container { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--space-7); padding-bottom: var(--space-7); }
/* mobile: imagem da esfera no topo, textos abaixo (sem sobreposição) */
@media (max-width: 767.98px) {
  .f-hero-dark { background: #181311; min-height: 0; }
  .f-hero-dark .hd-glow, .f-hero-dark .hd-ring { display: none; }
  .f-hero-dark::before { content: ''; display: block; order: -1; width: 100%; aspect-ratio: 1 / 1;
    background: #181311 url("imagery/hero-nodes-mobile.png") center top / cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .f-hero-dark > .container { flex: 0 0 auto; justify-content: flex-start;
    padding-top: var(--space-2); padding-bottom: var(--space-6); }
}
@media (min-width: 992px) { .f-hero-dark > .container { padding-top: var(--space-8); padding-bottom: var(--space-8); } }
/* mobile: centraliza badge, título, subtítulo e CTAs da hero */
@media (max-width: 767.98px) {
  .f-hero-dark .row > .col-12 { text-align: center; }
  .f-hero-dark .hd-title, .f-hero-dark .hd-sub { max-width: none; margin-left: auto; margin-right: auto; }
  .f-hero-dark .hd-ctas { display: flex; flex-direction: column; align-items: center; }
  .f-hero-dark .hd-ctas .btn { margin: 0 0 12px; width: 100%; max-width: 360px; }
}
.hd-glow { position: absolute; left: 50%; top: -42%; transform: translateX(-50%);
  width: 920px; height: 720px; max-width: 160vw; pointer-events: none; filter: blur(10px);
  background: radial-gradient(ellipse at center, rgba(254,112,49,.30), rgba(254,112,49,.07) 45%, transparent 70%);
  animation: breathe 9s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .72; transform: translateX(-50%) scale(1.06); } }
.hd-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,163,60,.14); pointer-events: none; }
.hd-ring.r1 { width: 560px; height: 560px; right: -180px; top: -180px; }
.hd-ring.r2 { width: 380px; height: 380px; right: -60px; top: -40px; border-color: rgba(255,163,60,.08); }
.hd-badge { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-caption);
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-300);
  background: rgba(255,163,60,.09); border: 1px solid rgba(255,163,60,.22);
  padding: 6px 16px; border-radius: var(--radius-pill); }
.hd-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--orange-500); flex: none; }
.hd-title { font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 400; color: #fff;
  line-height: 1.14; letter-spacing: -.02em; margin: var(--space-5) 0; max-width: 20ch; }
.hd-title em { font-style: normal; background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hd-sub { font-size: var(--text-body-lg); color: #a39d99; max-width: 56ch; margin-bottom: var(--space-6); }
.hd-ctas .btn { margin: 0 12px 12px 0; }
.btn-f-dark-outline { background: transparent; color: #fff; border-color: var(--neutral-700); }
.btn-f-dark-outline:hover { color: #fff; border-color: var(--orange-300); background: rgba(255,163,60,.08); }
.hd-glow-btn { box-shadow: 0 0 36px -6px rgba(254,112,49,.55); animation: ctaPulse 3.5s ease-in-out infinite; }
@keyframes ctaPulse { 50% { box-shadow: 0 0 54px -4px rgba(254,112,49,.78); } }
.hd-stats { display: flex; flex-wrap: wrap; color: var(--neutral-500);
  font-size: var(--text-body-sm); padding-bottom: var(--space-7); }
.hd-stats span { margin: 0 var(--space-6) 8px 0; }
.hd-stats b { color: var(--orange-300); font-weight: 700; margin-right: 6px; }
.hd-glass { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-lg); padding: var(--space-5); }
.hd-glass-h { font-size: var(--text-caption); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--neutral-400); display: flex; align-items: center;
  gap: 8px; margin-bottom: var(--space-5); }
.hd-glass-h .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--orange-500);
  animation: pulse 1.6s ease-in-out infinite; }
.hd-row { display: flex; align-items: center; gap: 12px; font-size: var(--text-caption);
  color: var(--neutral-500); margin-bottom: 14px; }
.hd-row > span { width: 88px; flex: none; }
.hd-row i { display: block; height: 6px; border-radius: 3px; background: var(--gradient-brand);
  box-shadow: 0 0 12px -2px rgba(254,112,49,.5); }
.hd-row small { margin-left: auto; color: var(--neutral-600); }
.hd-ticker { position: relative; border-top: 1px solid rgba(255,255,255,.08); margin-top: var(--space-5); }
.hd-ticker .ticker-track { padding: 13px 0; }
@media (max-width: 767.98px) { .hd-ring { display: none; } }

/* ============================================================ SCROLL REVEAL
   .rv é aplicada via JS (progressive enhancement · sem JS, tudo visível) */
.rv { opacity: 0; transform: translateY(26px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }

/* ============================================================ NAVBAR · sombra ao rolar */
.f-navbar.scrolled { box-shadow: var(--shadow-2); }

/* ============================================================ CONTADOR · mesma luz do hero */
.stats-band { background: #181311; }
.stats-band::before { animation: glowPulse 8s ease-in-out infinite; }
@keyframes glowPulse { 50% { opacity: .38; } }

/* ============================================================ FAIXA DE CONFIANÇA (marquee) */
.trust-marquee { overflow: hidden; background: var(--bg-surface);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.trust-track { display: flex; gap: var(--space-8); white-space: nowrap; padding: 18px 0;
  animation: ticker 32s linear infinite; will-change: transform; }
.trust-marquee:hover .trust-track { animation-play-state: paused; }
.trust-item { display: inline-flex; align-items: center; gap: 10px; font-weight: 600;
  font-size: var(--text-body-sm); color: var(--neutral-600); letter-spacing: .01em; }
.trust-item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gradient-brand); flex: none; }

/* ============================================================ LARGURA DE FRAME (desktop)
   O conteúdo usa mais do monitor em telas grandes · mas o texto corrido
   segue limitado por max-width próprio (.sec-intro, prosa) para não perder legibilidade. */
@media (min-width: 1200px) { .container { max-width: 1280px; } }
@media (min-width: 1680px) { .container { max-width: 1440px; } }

/* ============================================================ FULL-BLEED · seção edge-to-edge
   Faixa ocupa toda a largura do frame; o conteúdo interno continua num .container centrado.
   overflow-x: clip no html evita scroll horizontal sem quebrar a navbar sticky
   (clip não cria contexto de rolagem, ao contrário de hidden). */
html { overflow-x: clip; }
.full-bleed { width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0 !important; }

/* ============================================================ PARCEIROS E FABRICANTES */
.partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-6) var(--space-8); }
.partner-logo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display);
  font-weight: 700; font-size: 1.35rem; letter-spacing: -.02em; color: var(--neutral-400);
  filter: grayscale(1); opacity: .75; transition: all var(--duration-base) var(--ease-out); }
.partner-logo i { font-size: 1.5rem; }
.partner-logo:hover { color: var(--orange-600); opacity: 1; filter: none; }

/* ============================================================ MURAL DE CLIENTES (logos reais) */
.client-logos { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-7); justify-content: center; align-items: center; }
.client-logo { height: 56px; display: flex; align-items: center; }
.client-logo img { max-height: 56px; max-width: 160px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .6; transition: filter var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out); }
.client-logo:hover img { filter: none; opacity: 1; }
@media (max-width: 575.98px) { .client-logo { height: 42px; } .client-logo img { max-height: 42px; max-width: 115px; } }

/* ============================================================ VÍDEO DESTAQUE (full-width, facade) */
.video-feature .embed-responsive { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-3); background: #000; }
/* apresentação (antes de abrir): banner cinematográfico ~2.4:1, poster cortado pelo centro, play centralizado */
.video-feature .embed-responsive::before { padding-top: 41.67%; }
.video-facade { display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: #000; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out); }
.video-facade:hover img { transform: scale(1.03); opacity: .92; }
/* play em vidro fosco: desfoca o poster atrás, ícone branco */
.video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2.2rem;
  box-shadow: 0 12px 34px -8px rgba(0,0,0,.55); pointer-events: none;
  transition: transform var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out); }
.video-facade:hover .video-play { transform: translate(-50%, -50%) scale(1.08); background: rgba(255,255,255,.24); }
.video-play i { margin-left: 5px; line-height: 1; }
/* mobile: proporção normal de vídeo (16:9) em vez do banner cinematográfico */
@media (max-width: 767.98px) {
  .video-feature .embed-responsive::before { padding-top: 56.25%; }
  .video-play { width: 68px; height: 68px; font-size: 1.8rem; }
  /* sem margem superior e vídeo full-bleed até as bordas */
  #video.block { padding-top: 0; }
  #video .video-feature .embed-responsive { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    border-radius: 0; }
}
/* Modal de vídeo */
.video-modal .modal-content { background: transparent; border: 0; }
.video-modal .embed-responsive { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-3); background: #000; }
.video-modal-close { position: absolute; top: -16px; right: -16px; z-index: 3; width: 42px; height: 42px;
  border: 0; border-radius: 50%; background: #fff; color: var(--neutral-800); display: flex; align-items: center;
  justify-content: center; font-size: 1.05rem; box-shadow: var(--shadow-2); cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out); }
.video-modal-close:hover { transform: scale(1.08); }
@media (max-width: 575.98px) { .video-modal-close { top: -46px; right: 4px; } }

/* ============================================================ MARQUEE DE LOGOS (infinito, suave, colorido) */
/* fundo branco + overlays brancos nas laterais (logos somem/aparecem nas bordas) */
.logo-marquee { position: relative; overflow: hidden; background: var(--bg-page); padding: var(--space-5) 0; }
.logo-marquee::before, .logo-marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 14%;
  z-index: 2; pointer-events: none; }
.logo-marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-page) 18%, rgba(250,248,247,0)); }
.logo-marquee::after { right: 0; background: linear-gradient(270deg, var(--bg-page) 18%, rgba(250,248,247,0)); }
.logo-track { display: flex; align-items: center; gap: var(--space-8); width: max-content;
  animation: logoScroll 42s linear infinite; will-change: transform; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-item { flex: none; height: 54px; display: flex; align-items: center; }
.logo-item img { max-height: 54px; max-width: 150px; width: auto; object-fit: contain; }
@keyframes logoScroll { to { transform: translateX(-50%); } }
@media (max-width: 575.98px) { .logo-item { height: 40px; } .logo-item img { max-height: 40px; max-width: 110px; } }

/* ============================================================ ORGANISMO: FLUXO DE OPERAÇÃO (node graph) */
/* node graph FULL-WIDTH (fundo pontilhado de ponta a ponta), altura limitada; nós no estilo da referência */
.flow-organism { position: relative; }
.flow-start { position: absolute; z-index: 3; top: 24px; left: 4%; font-size: var(--text-caption); font-weight: 600;
  color: var(--neutral-700); background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 4px 13px; box-shadow: var(--shadow-1); }
.flow-canvas { position: relative; width: 100%; height: 540px; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--border-default);
  background-color: var(--neutral-100);
  background-image: radial-gradient(circle, rgba(24,19,17,.09) 1.1px, transparent 1.3px);
  background-size: 24px 24px; }
.flow-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.fl-path { fill: none; stroke: var(--neutral-800); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.flow-dot { position: absolute; z-index: 2; width: 11px; height: 11px; border-radius: 50%;
  background: var(--neutral-900); transform: translate(-50%, -50%); }
.flow-node { position: absolute; z-index: 2; width: 16%; transform: translate(-50%, -50%);
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  box-shadow: var(--shadow-2); overflow: hidden; font-size: 11px; line-height: 1.3; }
.fn-head { display: flex; align-items: center; gap: 9px; padding: 10px 13px; color: var(--neutral-900); }
.fn-head b { flex: 1; font-size: 13px; font-weight: 700; }
.fn-ic { display: inline-flex; color: var(--orange-600); font-size: 14px; }
.fn-dots { color: var(--neutral-400); }
.fn-sub { border-top: 1px solid var(--border-default); padding: 9px 0 11px; }
.fn-cap { padding: 0 13px 3px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--neutral-400); }
.fn-text { padding: 0 13px; font-size: 12px; color: var(--text-muted-c); line-height: 1.5; }
/* ---------- enriquecimento do canvas ---------- */
/* profundidade: glow quente atrás dos nós */
.flow-canvas::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 65% at 48% 52%, rgba(254,112,49,.10), transparent 70%); }
/* fluxo animado: pulso laranja correndo pelos conectores */
.fl-flow { fill: none; stroke: var(--orange-500); stroke-width: 3.5; stroke-linecap: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 14 360;
  filter: drop-shadow(0 0 4px rgba(254,112,49,.65)); animation: flowPulse 2.8s linear infinite; }
@keyframes flowPulse { to { stroke-dashoffset: -374; } }
/* chip de status ao vivo (perto do Start) */
.flow-chip { position: absolute; z-index: 3; top: 64px; left: 4%; display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-caption); font-weight: 600; color: var(--neutral-700);
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  padding: 5px 14px; box-shadow: var(--shadow-1); }
.fc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange-500); animation: livePulse 1.5s ease-in-out infinite; }
@keyframes livePulse { 50% { opacity: .3; transform: scale(.65); } }
/* status nos nós */
.fn-status { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-right: 4px; }
.fn-status.ok { background: #1f9d57; }
.fn-status.live { background: var(--orange-500); animation: liveRing 1.7s ease-out infinite; }
@keyframes liveRing { 0% { box-shadow: 0 0 0 0 rgba(254,112,49,.5); } 70%,100% { box-shadow: 0 0 0 6px rgba(254,112,49,0); } }
/* card de resultado (canto sup. direito) */
.flow-result { position: absolute; z-index: 3; top: 24px; right: 24px; width: 232px;
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  box-shadow: var(--shadow-2); padding: 12px 15px; }
.fr-head { display: flex; align-items: center; gap: 8px; font-size: var(--text-body-sm); font-weight: 700; color: var(--neutral-900); }
.fr-head i { color: #1f9d57; font-size: 15px; }
.fr-metric { margin-top: 7px; display: flex; align-items: baseline; gap: 8px; }
.fr-metric b { font-family: var(--font-display); font-size: var(--text-h4); color: var(--orange-600); line-height: 1; }
.fr-metric span { font-size: var(--text-caption); color: var(--text-muted-c); }
/* controles do canvas (canto inf. esquerdo) */
.flow-controls { position: absolute; z-index: 3; left: 24px; bottom: 24px; display: inline-flex; flex-direction: column;
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1); overflow: hidden; }
.flow-controls button { width: 34px; height: 34px; border: 0; background: transparent; color: var(--neutral-600);
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px;
  border-bottom: 1px solid var(--border-default); transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.flow-controls button:last-child { border-bottom: 0; }
.flow-controls button:hover { background: var(--bg-subtle); color: var(--orange-600); }
/* minimapa (canto inf. direito) */
.flow-minimap { position: absolute; z-index: 3; right: 24px; bottom: 24px; width: 172px; height: 94px;
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1); overflow: hidden; }
.flow-minimap::before { content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(24,19,17,.06) 1px, transparent 1.2px); background-size: 12px 12px; }
.mm-node { position: absolute; width: 20px; height: 12px; border-radius: 3px; background: var(--orange-500);
  opacity: .85; transform: translate(-50%, -50%); }
.mm-view { position: absolute; inset: 12% 7%; border: 1.5px solid rgba(254,112,49,.7); border-radius: 4px; }
/* mobile/tablet: cards iguais ao desktop, empilhados, com conector animado embaixo de cada um */
@media (max-width: 1199.98px) {
  .flow-canvas { height: auto; background-image: none; padding: var(--space-4);
    display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
  .flow-canvas::before { display: none; }
  .flow-links, .flow-dot, .flow-controls, .flow-minimap { display: none; }

  /* nó mantém o visual de card do desktop; só reposiciona e empilha (com margem lateral) */
  .flow-node { position: relative; left: auto !important; top: auto !important; transform: none;
    width: 100%; max-width: 480px; margin: 0 auto; overflow: visible; font-size: 13px; }
  .flow-node .fn-text { font-size: 14px; }

  /* linha base entre os cards — igual ao .fl-path do desktop (traço fino escuro) */
  .flow-node:not(:last-child)::before { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
    width: 2px; height: var(--space-6); background: var(--neutral-800); z-index: 0; }
  /* pulso laranja viajando pela linha — igual ao .fl-flow do desktop (dash + glow) */
  .flow-node:not(:last-child)::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
    width: 2px; height: 14px; border-radius: 2px; background: var(--orange-500);
    box-shadow: 0 0 5px 1px rgba(254,112,49,.6); z-index: 1;
    animation: flowDashMob 1.9s linear infinite; }

  /* elementos trazidos do desktop, reposicionados no fluxo empilhado */
  /* Start: rótulo no topo, acima dos cards */
  .flow-start { position: static; display: block; width: max-content; max-width: 100%;
    margin: 0 auto var(--space-4); top: auto; left: auto; }
  /* chip de status ao vivo: topo do bloco de cards */
  .flow-chip { position: static; order: -1; top: auto; left: auto; }
  /* card de resultado: fim da timeline, depois do último card */
  .flow-result { position: static; top: auto; right: auto; width: auto; max-width: 100%; }
}
@keyframes flowDashMob {
  0% { transform: translate(-50%, -10px); opacity: 0; }
  20%, 80% { opacity: 1; }
  100% { transform: translate(-50%, var(--space-6)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .flow-node::after { animation: none; } }
/* ============================================================ FLOW SCROLLYTELLING (takeover preto + ativação por scroll) */
.flow-track { position: relative; }
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  .flow-track { height: 320vh; }
  .flow-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center;
    overflow: hidden; background: transparent; transition: background .55s var(--ease-out); }
  .flow-stage .flow-organism { width: min(1320px, 94vw); transition: width .55s var(--ease-out); }
  .flow-stage .flow-canvas { transition: height .55s var(--ease-out), background-color .55s var(--ease-out),
    border-radius .55s var(--ease-out), border-color .55s var(--ease-out); }
  /* ---- TAKEOVER escuro ---- */
  .flow-stage.is-dark { background: #08070b; }
  .flow-stage.is-dark .flow-organism { width: 100%; }
  .flow-stage.is-dark .flow-canvas { height: 84vh; border-radius: 0; border-color: rgba(255,255,255,.07);
    background-color: #0b0a0e; background-image: radial-gradient(circle, rgba(255,255,255,.12) 1.1px, transparent 1.3px); }
  .flow-stage.is-dark .flow-canvas::before { background: radial-gradient(58% 60% at 50% 50%, rgba(254,112,49,.13), transparent 72%); }
  /* nós apagados: card de vidro escuro bem esmaecido (texto claro); acendem pra branco com texto escuro */
  .flow-stage.is-dark .flow-node { opacity: .34; filter: grayscale(.55);
    background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); box-shadow: none;
    transition: opacity .5s var(--ease-out), filter .5s var(--ease-out), background .5s, border-color .5s, box-shadow .5s; }
  .flow-stage.is-dark .flow-node .fn-head { color: rgba(255,255,255,.92); }
  .flow-stage.is-dark .flow-node .fn-text { color: rgba(255,255,255,.6); }
  .flow-stage.is-dark .flow-node .fn-cap, .flow-stage.is-dark .flow-node .fn-dots { color: rgba(255,255,255,.42); }
  .flow-stage.is-dark .flow-node .fn-sub { border-top-color: rgba(255,255,255,.1); }
  .flow-stage.is-dark .flow-node.is-on { opacity: 1; filter: none; background: var(--bg-surface); border-color: var(--border-default); box-shadow: var(--shadow-2); }
  .flow-stage.is-dark .flow-node.is-on .fn-head { color: var(--neutral-900); }
  .flow-stage.is-dark .flow-node.is-on .fn-text { color: var(--neutral-700); }
  .flow-stage.is-dark .flow-node.is-on .fn-cap { color: var(--orange-600); font-weight: 700; }
  .flow-stage.is-dark .flow-node.is-on .fn-dots { color: var(--neutral-500); }
  .flow-stage.is-dark .flow-node.is-on .fn-sub { border-top-color: var(--border-default); }
  /* conectores: cinza, desenhados via JS (stroke-dashoffset) */
  .flow-stage.is-dark .fl-path { stroke: rgba(255,255,255,.30); }
  .flow-stage.is-dark .fl-flow { opacity: 0; transition: opacity .4s var(--ease-out); }
  .flow-stage.is-dark .fl-flow.is-on { opacity: 1; }
  /* dots: cinza -> laranja */
  .flow-stage.is-dark .flow-dot { background: rgba(255,255,255,.32); transition: background .35s, box-shadow .35s; }
  .flow-stage.is-dark .flow-dot.is-on { background: var(--orange-500); box-shadow: 0 0 8px rgba(254,112,49,.7); }
  /* chrome: vidro escuro discreto + texto claro, secundário aos nós brancos */
  .flow-stage.is-dark .flow-start, .flow-stage.is-dark .flow-chip, .flow-stage.is-dark .flow-controls,
  .flow-stage.is-dark .flow-minimap, .flow-stage.is-dark .flow-result {
    background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); box-shadow: none; color: rgba(255,255,255,.82); }
  .flow-stage.is-dark .flow-result .fr-head { color: rgba(255,255,255,.92); }
  .flow-stage.is-dark .flow-result .fr-metric span { color: rgba(255,255,255,.55); }
  .flow-stage.is-dark .flow-controls button { color: rgba(255,255,255,.7); border-bottom-color: rgba(255,255,255,.12); }
  .flow-stage.is-dark .flow-controls button:hover { background: rgba(255,255,255,.08); color: #fff; }
}

/* ============================================================ ORBITAL (selos + reconhecimentos ao redor da Future) */
.orbit-sec { background: var(--neutral-50); } /* alinhado ao creme base da página (#faf8f7) */
/* orbital inteiro e contido; os anéis giram no eixo via JS (selos contra-rotacionam p/ ficar em pé) */
.orbit { position: relative; width: 100%; max-width: 1100px; margin: 80px auto; aspect-ratio: 1 / 1; }
.orbit-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%;
  border: 1.5px dashed rgba(242,84,54,.28); will-change: transform; }
.orbit-ring.outer { width: 100%; height: 100%; }
.orbit-ring.inner { width: 60%; height: 60%; border-color: rgba(242,84,54,.36); }
.orbit-seal { position: absolute; transform: translate(-50%,-50%); width: 112px; height: 112px; border-radius: 50%;
  background: #fff; border: 1px solid var(--border-default); box-shadow: var(--shadow-2);
  display: inline-flex; align-items: center; justify-content: center; }
.orbit-seal img { width: 90%; height: auto; max-height: 62%; object-fit: contain; display: block; }
/* tooltip estilizado no hover do selo */
.orbit-seal::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  background: var(--neutral-900); color: #fff; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
  padding: 7px 11px; border-radius: var(--radius-md); box-shadow: var(--shadow-2); opacity: 0; pointer-events: none;
  transition: opacity .16s var(--ease-out), transform .16s var(--ease-out); z-index: 5; }
.orbit-seal::before { content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--neutral-900); opacity: 0; transition: opacity .16s var(--ease-out); z-index: 5; }
.orbit-seal:hover::after, .orbit-seal:hover::before { opacity: 1; }
.orbit-seal:hover::after { transform: translateX(-50%) translateY(-2px); }
.orbit-ring.inner .orbit-seal { width: 96px; height: 96px; }
.orbit-ico { position: absolute; transform: translate(-50%, -50%); width: 50px; height: 50px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 21px; color: var(--neutral-400);
  background: var(--neutral-100); border: 1px solid var(--border-default); box-shadow: var(--shadow-1); }
.orbit-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3;
  width: 150px; height: 150px; border-radius: 36px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 32%, #fe7031, #f25436 72%);
  box-shadow: 0 0 0 10px rgba(254,112,49,.10), 0 20px 48px rgba(242,84,54,.30), inset 0 1px 0 rgba(255,255,255,.3); }
.orbit-core img { width: 90px; height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.18)); }
.orbit-wrap { position: relative; }
.orbit-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3;
  width: 100%; max-width: 560px; padding: 0 var(--space-4); text-align: center; }
.orbit-center .orbit-stats { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: start;
  gap: var(--space-4) var(--space-7); max-width: none; margin: 0 auto; }
.orbit-center .orbit-stats .stat:nth-child(5) { grid-column: 1 / -1; }
.orbit-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-5) var(--space-7); text-align: center; }
.orbit-stats .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3.8vw, 2.5rem); line-height: 1;
  background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.orbit-stats .lbl { font-size: var(--text-body-sm); color: var(--text-muted-c); margin-top: 6px; }
.orbit-symbol { display: none; }
/* tablet/mobile: número/título PRIMEIRO, depois a órbita (sem sobreposição) */
@media (max-width: 991.98px) {
  .orbit-wrap { position: static; }
  .orbit-center { position: static; transform: none; max-width: 680px; margin: 0 auto var(--space-7); padding: 0; }
  .orbit { max-width: 420px; margin: 0 auto; }
  .orbit-ico { display: none; }
  .orbit-seal { width: 62px; height: 62px; } .orbit-ring.inner .orbit-seal { width: 56px; height: 56px; }
  .orbit-symbol { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 26%; max-width: 96px; height: auto; z-index: 2; pointer-events: none; }
}
@media (max-width: 575.98px) {
  .orbit { max-width: 300px; }
  .orbit-seal { width: 50px; height: 50px; } .orbit-ring.inner .orbit-seal { width: 44px; height: 44px; }
  .orbit-center .orbit-stats .num { font-size: clamp(1.5rem, 7vw, 2rem); }
}
@media (prefers-reduced-motion: reduce) { .orbit-ring { transition: none; } }

/* ============================================================ SOLUÇÃO-CARD (hover reveal estilo SentinelOne)
   classe própria p/ não colidir com o .sol-card antigo do design-system (que tinha padding) */
.solucao-card { display: flex; flex-direction: column; height: 430px; overflow: hidden; text-decoration: none;
  border-radius: var(--radius-lg); border: 1px solid var(--border-default); background: var(--bg-surface);
  box-shadow: var(--shadow-1); transition: box-shadow var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); }
.solucao-card:hover { box-shadow: var(--shadow-3); text-decoration: none; transform: translateY(-4px); }
/* foto encosta no topo e laterais (sem margem); o respiro inferior vem do padding-top do corpo */
.sc-img { flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative; }
/* selo do pilar sobre a foto (estilo .b-ic do DS, um pouco maior) */
.sc-icon { position: absolute; left: 16px; bottom: 16px; z-index: 2; width: 62px; height: 62px; border-radius: 17px;
  display: grid; place-items: center; background: #fff; border: 1px solid var(--orange-100); box-shadow: var(--shadow-2); }
.sc-icon i { font-size: 28px; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }
.sc-img img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease-out); }
.solucao-card:hover .sc-img img { transform: scale(1.06); }
.sc-body { flex: none; padding: var(--space-4) var(--space-5) var(--space-5); }
.sc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sc-top h4 { margin: 0; color: var(--neutral-900); }
.sc-cta { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-body-sm); font-weight: 600; color: var(--orange-600); }
.sc-cta i { transition: transform var(--duration-fast) var(--ease-out); }
.sc-cta:hover i { transform: translateX(3px); }
/* parado: CTA à direita do título. No hover ele cede lugar e reaparece embaixo, à esquerda (dentro do reveal) */
.sc-cta-rest { flex: none; }
.solucao-card:hover .sc-cta-rest { display: none; }
.sc-cta-open { margin-top: var(--space-3); }
.sc-reveal { max-height: 0; opacity: 0; overflow: hidden; transform: translateY(6px);
  transition: max-height .55s var(--ease-out), opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.solucao-card:hover .sc-reveal { max-height: 200px; opacity: 1; transform: none; }
.sc-reveal p { margin: var(--space-2) 0 var(--space-3); font-size: var(--text-body-sm); color: var(--text-muted-c); }
.sc-reveal .link-arrow { color: var(--orange-600); font-weight: 600; font-size: var(--text-body-sm); }
/* sem hover (mobile/touch): já mostra a descrição */
@media (max-width: 767.98px), (hover: none) {
  .solucao-card { height: auto; }
  .sc-img { flex: none; height: 220px; }
  .sc-reveal { max-height: 220px; opacity: 1; transform: none; }
  .sc-cta-rest { display: none; }
}

/* ============================================================ METODOLOGIA (timeline de passos) */
.method { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-5); }
@media (min-width: 768px) { .method { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }
.method-step .m-head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-3); }
.method-step .m-num { width: 42px; height: 42px; border-radius: 50%; background: var(--gradient-brand);
  color: #fff; font-family: var(--font-display); font-weight: 700; display: grid; place-items: center;
  flex: none; box-shadow: var(--shadow-brand); }
.method-step .m-line { flex: 1; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--orange-300), var(--orange-100)); }
.method-step:last-child .m-line { display: none; }
@media (max-width: 767.98px) { .method-step .m-line { display: none; } }
.method-step h4 { font-size: var(--text-h4); margin-bottom: 6px; }
.method-step p { font-size: var(--text-body-sm); margin: 0; }

/* ============================================================ BENTO DE CAPACIDADES */
.bento { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-5); }
@media (min-width: 576px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .bento { grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; } }
.bento-item { background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column;
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); }
.bento-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: var(--orange-300); }
.bento-item .b-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--orange-50), #fff); border: 1px solid var(--orange-100); margin-bottom: var(--space-4); }
.bento-item .b-ic i { font-size: 22px; background: var(--gradient-brand); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.bento-item h4 { font-size: var(--text-h4); margin-bottom: 6px; }
.bento-item p { font-size: var(--text-body-sm); color: var(--text-body-c); margin: 0; }
@media (min-width: 992px) {
  .bento-feature { grid-column: span 2; grid-row: span 2; }
  .bento-wide { grid-column: span 2; }
}
.bento-feature { position: relative; overflow: hidden; background: #181311; border-color: transparent;
  justify-content: flex-end; }
.bento-feature::before { content: ''; position: absolute; right: -80px; top: -100px; width: 320px; height: 320px;
  border-radius: 50%; background: radial-gradient(circle at center, rgba(254,112,49,.32), transparent 65%);
  filter: blur(8px); pointer-events: none; animation: glowPulse 8s ease-in-out infinite; }
.bento-feature .b-ic { background: #fff; border-color: transparent; box-shadow: var(--shadow-2); }
.bento-feature h4 { color: #fff; font-size: var(--text-h3); text-shadow: 0 2px 12px rgba(0,0,0,.55); }
.bento-feature p { color: #d8d2ce; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.bento-feature .b-tag { display: inline-flex; align-items: center; align-self: flex-start; margin-bottom: auto;
  font-size: var(--text-caption); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber-300); background: rgba(24,19,17,.55); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,163,60,.30); padding: 6px 14px; border-radius: var(--radius-pill); }

/* ============================================================ PREVIEW RESPONSIVO (molduras de device) */
.rp-devices { display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: center;
  align-items: flex-start; margin-top: var(--space-5); }
.device { background: var(--neutral-900); border-radius: var(--radius-lg); padding: 10px;
  box-shadow: var(--shadow-3); max-width: 100%; min-width: 0; }
.device .d-bar { display: flex; align-items: center; gap: 6px; padding: 4px 6px 8px; }
.device .d-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--neutral-700); display: inline-block; }
.device .d-bar span { margin-left: auto; font-size: var(--text-caption); font-weight: 600; color: var(--neutral-400);
  letter-spacing: .04em; }
.device iframe { display: block; border: 0; width: 100%; border-radius: var(--radius-sm); background: #fff; }
.device-desktop { flex: 1 1 100%; }
.device-desktop iframe { height: 430px; }
.device-tablet { flex: 1 1 720px; }
.device-tablet iframe { height: 520px; }
.device-mobile { flex: 0 1 320px; }
.device-mobile iframe { height: 560px; }
.rp-hint { font-size: var(--text-body-sm); color: var(--text-muted-c); text-align: center; margin-top: var(--space-4); }
.rp-hint b { color: var(--orange-700); }

/* ============================================================ FEATURE SPLIT (texto + mídia) */
.feature-split { margin-top: var(--space-6); }
.feature-split + .feature-split { margin-top: var(--space-8); }
.fs-text .t-overline { display: block; margin-bottom: var(--space-2); }
.fs-text h3 { font-size: var(--text-h2); font-weight: 600; margin-bottom: var(--space-3); }
.fs-text p { margin-bottom: var(--space-4); }
.fs-text .f-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.fs-text .f-list li { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; font-size: var(--text-body-sm); }
.fs-text .f-list i { color: var(--orange-600); font-size: 1.1rem; line-height: 1.4; flex: none; }
.fs-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-2); }
.fs-media > img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 280px; }
/* selos sobre o rodapé da foto, em card branco */
.fs-media .afuture-selos { position: absolute; left: 16px; bottom: 16px; margin: 0;
  background: #fff; border-radius: var(--radius-md); padding: 11px 16px; box-shadow: var(--shadow-2);
  display: inline-flex; align-items: center; }
.fs-media .afuture-selos img { width: auto; max-height: 64px; height: auto; display: block; }
@media (max-width: 575.98px) {
  .fs-media .afuture-selos { left: 12px; right: 12px; max-width: none; padding: 9px 12px; justify-content: center; }
  .fs-media .afuture-selos img { max-width: 100%; max-height: 44px; }
}
/* mobile: imagem da seção A Future vai para cima do texto, full-bleed (sem bordas) */
@media (max-width: 767.98px) {
  #afuture.block { padding-top: 0 !important; }
  #afuture .feature-split .row > .fs-text { order: 2; }
  #afuture .feature-split .row > div:last-child { order: 1; margin-bottom: var(--space-5); }
  #afuture .fs-media { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    border-radius: 0; box-shadow: none; }
  #afuture .fs-media > img { min-height: 440px; }
  /* faixa de selos full-width, flush no rodapé da imagem */
  #afuture .fs-media .afuture-selos { left: 0; right: 0; bottom: 0; border-radius: 0;
    padding: 14px 16px; justify-content: center; }
  #afuture .fs-media .afuture-selos img { max-width: 100%; max-height: 60px; }
  #afuture .afuture-cert { margin-top: var(--space-5); white-space: nowrap; font-size: clamp(10px, 3vw, 13px); }
  #afuture .fs-text .btn { display: block; width: 100%; text-align: center; }
}
/* Lado direito da seção A Future: vídeo no topo, frase de certificações + selos abaixo */
.afuture-cert { margin: var(--space-4) 0 var(--space-3); font-size: var(--text-body); line-height: 1.5; }
.afuture-selos { margin: 0; }
.afuture-selos img { width: 100%; max-width: 400px; height: auto; display: block; }
/* stats abaixo da foto (vindos do hero) — discretos, inline, distribuídos na largura da foto, 1 linha */
.afuture-stats { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4);
  font-size: var(--text-body-sm); color: var(--text-muted-c); }
.afs-item { white-space: nowrap; }
.afs-item b { color: var(--orange-600); font-weight: 700; font-size: var(--text-body-lg); margin-right: 5px; }
/* Vídeo (façade: poster + play, carrega o iframe só no clique) */
.fs-video { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-2); cursor: pointer; }
.fs-video img { width: 100%; display: block; min-height: 280px; object-fit: cover; }
.fs-video::after { content: ''; position: absolute; inset: 0; background: rgba(24,19,17,.30); transition: background var(--duration-base) var(--ease-out); }
.fs-video:hover::after { background: rgba(24,19,17,.15); }
.fs-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2;
  width: 74px; height: 74px; border-radius: 50%; border: 0; background: var(--gradient-brand); color: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow-brand); cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-spring); }
.fs-play i { font-size: 2.1rem; margin-left: 3px; }
.fs-video:hover .fs-play { transform: translate(-50%,-50%) scale(1.09); }
.fs-video .embed-responsive { border-radius: var(--radius-lg); }
/* Carrossel compacto de mídia */
.fs-carousel { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-2); }
.fs-carousel .fs-slide { height: 340px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-6); color: #fff; position: relative; }
.fs-carousel .fs-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,19,17,.1), rgba(24,19,17,.75)); }
.fs-carousel .fs-slide > * { position: relative; z-index: 1; }
.fs-carousel .fs-slide h4 { color: #fff; font-size: var(--text-h4); margin-bottom: 4px; }
.fs-carousel .fs-slide p { color: #d8d2ce; font-size: var(--text-body-sm); margin: 0; }
.fs-carousel .carousel-indicators { margin-bottom: 8px; }
.fs-carousel .carousel-indicators li { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); border: 0; }
.fs-carousel .carousel-indicators .active { background: #fff; }

/* ============================================================ HOME: certificações */
/* carrossel de logos de certificação (sem caixa, maiores) — BS4 carousel */
.cert-carousel { padding-bottom: 44px; }
.cert-carousel .carousel-item { padding: 6px 0; }
.cert-cell { display: flex; align-items: center; justify-content: center; height: 96px; padding: 0 var(--space-3); }
.cert-cell img { max-height: 60px; max-width: 100%; width: auto; object-fit: contain; display: block; }
.cert-carousel .carousel-indicators { bottom: 0; margin: 0; }
.cert-carousel .carousel-indicators li { width: 9px; height: 9px; border-radius: 50%; background: var(--neutral-400); border: 0; }
.cert-carousel .carousel-indicators .active { background: var(--orange-500); }
@media (max-width: 575.98px) { .cert-cell { height: 76px; } .cert-cell img { max-height: 44px; } }
.cert-seal { height: 84px; width: auto; }
.cert-strip { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-7); justify-content: center; align-items: center; }
.cert-item { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--neutral-700); font-size: var(--text-body-sm); }
.cert-item i { font-size: 1.7rem; color: var(--orange-600); flex: none; }
.cert-item span small { display: block; font-weight: 400; color: var(--text-muted-c); font-size: var(--text-caption); }

/* ============================================================ HOME: newsletter (faixa dark) */
.newsletter { background: #181311; border-radius: var(--radius-xl); padding: var(--space-8) var(--space-6);
  position: relative; overflow: hidden; }
.newsletter::before { content: ''; position: absolute; right: -120px; top: -150px; width: 380px; height: 380px;
  border-radius: 50%; background: radial-gradient(circle at center, rgba(254,112,49,.26), transparent 64%); filter: blur(8px); pointer-events: none; }
.newsletter h3 { color: #fff; font-size: var(--text-h2); font-weight: 700; }
.newsletter p { color: #a39d99; }
.newsletter .form-control { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff; }
.newsletter .form-control::placeholder { color: var(--neutral-500); }
.newsletter .form-control:focus { background: rgba(255,255,255,.10); }

/* ============================================================ CARDS COM FOTO */
.photo-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  overflow: hidden; height: 100%; display: flex; flex-direction: column;
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); }
.photo-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-3); border-color: var(--orange-200); }
/* moldura de mídia com proporção fixa (padding-top = compatível com BS4) */
.pc-media { position: relative; padding-top: 62%; overflow: hidden; flex: none; }
.pc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out); }
.photo-card:hover .pc-media img { transform: scale(1.05); }
.pc-media .badge { position: absolute; top: 12px; left: 12px; z-index: 2; }
/* blog: capas 16:9 (não mudam no site) — media na mesma proporção p/ a imagem não cortar */
#blog .pc-media { padding-top: 56.25%; }
/* placeholder cinza (trocar por <img> quando a foto real chegar) */
.pc-media.is-ph { background: linear-gradient(135deg, #ebe8e6, #d7d7d7); }
.pc-media.is-ph > i { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-size: 2.6rem; color: var(--neutral-500); opacity: .7; }
/* selo de ícone do pilar, sobre a foto (canto inferior esquerdo) */
.pc-icon { position: absolute; left: 14px; bottom: 14px; z-index: 2; width: 46px; height: 46px;
  border-radius: 13px; background: var(--gradient-brand); display: grid; place-items: center;
  box-shadow: 0 6px 16px -4px rgba(24,19,17,.4); }
.pc-icon i { color: #fff; font-size: 20px; }
.pc-body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.pc-body h4 { font-size: 1.0625rem; line-height: 1.3; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-body p { font-size: var(--text-body-sm); margin: 0; flex: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-meta { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: var(--space-4);
  font-size: var(--text-caption); color: var(--text-muted-c); }
.pc-meta .link-arrow { margin-left: auto; font-size: var(--text-body-sm); }

/* Variante: foto de fundo com texto sobreposto */
.photo-card-overlay { position: relative; border: 0; min-height: 320px; display: flex; align-items: flex-end; border-radius: var(--radius-lg); }
.photo-card-overlay img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out); }
.photo-card-overlay:hover img { transform: scale(1.05); }
.photo-card-overlay::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(24,19,17,.05) 0%, rgba(24,19,17,.55) 55%, rgba(24,19,17,.90) 100%); }
.photo-card-overlay .pc-body { position: relative; z-index: 1; }
.photo-card-overlay .pc-body h4 { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.photo-card-overlay .pc-body p { color: #d8d2ce; flex: none; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.photo-card-overlay .badge { position: relative; align-self: flex-start; margin-bottom: var(--space-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .rv { opacity: 1; transform: none; }
}

/* ============================================================ MITIGAÇÕES DE COMPATIBILIDADE
   Fallbacks para navegadores antigos (alvo do Publique pode ser amplo). Browsers modernos
   ignoram estes blocos (a feature é suportada); só os antigos caem aqui. */

/* aspect-ratio (Chrome 88 / Safari 15 / 2021+): sem suporte, a altura colapsa a 0 e o
   elemento some. Fallback: padding-top (hack clássico de proporção). */
@supports not (aspect-ratio: 1 / 1) {
  .orbit { height: 0; }
  .orbit::before { content: ''; display: block; padding-top: 100%; }
  @media (max-width: 767.98px) {
    .f-hero-dark::before { height: 0; padding-top: 100%; }
  }
}

/* backdrop-filter (Firefox <103, browsers antigos): sem suporte, o "vidro fosco" vira um
   retângulo translúcido. Damos fundos sólidos o suficiente para manter legibilidade. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .f-navbar { background: rgba(250,248,247,.99); }
  .f-navbar.nav-on-dark { background: #181311; }
  .hd-glass { background: rgba(255,255,255,.10); }
  /* play do vídeo: sem o blur, o ícone branco sumiria no vidro claro -> fundo escuro sólido */
  .video-play { background: rgba(20,15,12,.55); border-color: rgba(255,255,255,.55); }
  .hd-badge { background: rgba(24,19,17,.85); }
}

/* overflow: clip (2022+): escolhido em vez de hidden para não quebrar o position:sticky da
   navbar. Sem suporte, cai para hidden no html (preserva o sticky melhor que no body) e
   troca a barra horizontal do 100vw por corte. */
@supports not (overflow: clip) {
  html { overflow-x: hidden; }
}