@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* =====================================================================
   HAL-AI — DESIGN SYSTEM (site institucional estático, 46 páginas)
   CSS puro, sem framework, sem !important.
   Tema escuro roxo-índigo + vidro. Aqui mora ESTRUTURA, COMPONENTE e
   RESPONSIVIDADE, mais transições curtas de estado (hover/focus).
   Animação de entrada, keyframes decorativos e marquee ficam em motion.css.

   ÍNDICE
    01. Tokens da marca
    02. Reset e base
    03. Acessibilidade (skip link, sr-only, foco visível)
    04. Utilitários
    05. Barra utilitária (topo)
    06. Navbar fixa + mega-menu
    07. Botões
    08. Layout (container, section, hero, grids, split, bento, cluster)
    09. Tipografia
    10. Cards
    11. Passos, pílulas, comparativo, feature-row
    12. Citação, badges, tabela, FAQ, CTA, breadcrumb, page-nav
    13. Timeline, stats, credenciais, patente, imprensa
    14. Product card, industry card, trilhas, lista de modelos, tabs
    15. Media frame (peças azuis dentro do tema roxo)
    16. Formulário
    17. Toast
    18. Mockup de conversa (chat em HTML)
    19. Rodapé
    20. Responsivo — 1200 / 1024 / 900 / 600 / 380
    21. Preferências do usuário (movimento reduzido, contraste, impressão)
   ===================================================================== */


/* =====================================================================
   01. TOKENS DA MARCA — os mesmos do app real da Hal-AI
   ===================================================================== */
:root {
  /* --- cores --- */
  --brand: #080bef;
  --brand-2: #540494;
  --bg-0: #0d0524;
  --bg-1: #170128;
  --bg-2: #1e0a2d;
  --text: #ffffff;
  --text-soft: #e2d5f7;
  --muted: #c5b0e4;
  --accent: #818cf8;
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #fbbf24;
  --gradient: linear-gradient(90deg, #080bef, #540494);

  /* --- superfícies --- */
  --panel: rgba(255, 255, 255, .05);
  --panel-2: rgba(255, 255, 255, .08);
  --panel-flat: rgba(23, 1, 40, .72);      /* fallback sólido do glass */
  --stroke: rgba(197, 176, 228, .12);
  --stroke-strong: rgba(197, 176, 228, .26);
  --stroke-live: rgba(129, 140, 248, .38);  /* borda que "acende" no hover */

  /* --- tempo e curvas (ver pesquisa-estilo: 200ms é o timing de estado) --- */
  --ease: cubic-bezier(.12, .23, .5, 1);
  --ease-io: cubic-bezier(.44, 0, .56, 1);
  --t: 200ms;
  --t-slow: 320ms;

  /* --- tipografia --- */
  --font: 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* --- métricas do chrome do site --- */
  --nav-h: 64px;
  --util-h: 34px;
  --chrome-h: calc(var(--nav-h) + var(--util-h));

  /* --- raios --- */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* --- profundidade no escuro: sombra + glow + luz interna no topo --- */
  --shadow-sm: 0 6px 20px rgba(0, 0, 0, .28);
  --shadow: 0 18px 45px rgba(0, 0, 0, .38);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, .5);
  --glow-brand: 0 24px 60px -30px rgba(8, 11, 239, .75);
  --glow-accent: 0 22px 55px -28px rgba(129, 140, 248, .7);
  --inner-light: inset 0 1px 0 rgba(255, 255, 255, .1);

  /* --- ritmo --- */
  --container: 1200px;
  --container-narrow: 860px;
  --gutter: 24px;
  --gap: 24px;
}


/* =====================================================================
   02. RESET E BASE
   ===================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Fonte ÚNICA do deslocamento de âncora. Não colocar scroll-margin-top nos
     alvos: `scroll-padding-top` do contêiner e `scroll-margin-top` do alvo se
     SOMAM, e o destino ficava o dobro abaixo (o clique em "Materiais" caía
     fora do trecho de materiais). */
  scroll-padding-top: calc(var(--chrome-h) + 16px);
  overflow-x: clip;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-soft);
  background-color: var(--bg-0);
  /* leve radial da marca; opacidades baixas para o roxo do fundo não somar */
  background-image:
    radial-gradient(900px 620px at 8% -10%, rgba(8, 11, 239, .18), transparent 62%),
    radial-gradient(820px 560px at 94% 0%, rgba(84, 4, 148, .16), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  flex: 1 0 auto;
  width: 100%;
  padding-top: var(--chrome-h);
}

/* âncoras não somem atrás do chrome fixo */
section[id],
[id].anchor-offset {
  scroll-margin-top: 0;
}

img,
svg,
video,
canvas,
picture { display: block; max-width: 100%; }

img,
video { height: auto; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--t) var(--ease);
}

a:hover { color: var(--text); }

ul, ol { list-style: none; }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  text-align: inherit;
}

table { border-collapse: collapse; width: 100%; }

strong, b { color: var(--text); font-weight: 700; }

small { font-size: .86em; }

hr {
  height: 1px;
  border: 0;
  background-color: var(--stroke);
  margin: 32px 0;
}

[hidden] { display: none; }

::selection {
  background: rgba(129, 140, 248, .35);
  color: #fff;
}

/* barra de rolagem discreta (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(197, 176, 228, .2);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: rgba(197, 176, 228, .34); }


/* =====================================================================
   03. ACESSIBILIDADE
   O benchmark usa outline:none global — NÃO copiamos. O foco é visível
   e idêntico em tudo que é interativo.
   ===================================================================== */
.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 300;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  background-color: var(--brand);
  color: #fff;
  font-weight: 700;
}

.skip-link:focus,
.skip-link:focus-visible {
  left: 0;
  color: #fff;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
details:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* campos e cartões com raio próprio pedem offset menor */
.form-control:focus-visible,
.card--link:focus-visible,
.mega-link:focus-visible,
.faq-item summary:focus-visible {
  outline-offset: 2px;
}


/* =====================================================================
   04. UTILITÁRIOS
   ===================================================================== */
.center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.muted { color: var(--muted); }
.soft { color: var(--text-soft); }
.strongtext { color: var(--text); }
.nowrap { white-space: nowrap; }
.full { width: 100%; }
.relative { position: relative; }
.narrow { max-width: 720px; margin-left: auto; margin-right: auto; }
.narrow-sm { max-width: 560px; margin-left: auto; margin-right: auto; }
.hide { display: none; }

.mt-0 { margin-top: 0; }
.mt-sm { margin-top: 12px; }
.mt-md { margin-top: 24px; }
.mt-lg { margin-top: 40px; }
.mt-xl { margin-top: 64px; }
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: 12px; }
.mb-md { margin-bottom: 24px; }
.mb-lg { margin-bottom: 40px; }

/* trilho horizontal genérico: nada estoura a largura da tela */
.scroll-x {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* faixa de rolagem infinita: só o LAYOUT mora aqui;
   a animação de [data-marquee] é de motion.css */
.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  padding: 4px 0;
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: .95rem;
  font-weight: 600;
  white-space: nowrap;
}


/* =====================================================================
   05. BARRA UTILITÁRIA (topo, acima da navbar)
   ===================================================================== */
.utility-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  height: var(--util-h);
  background-color: #0a0320;
  border-bottom: 1px solid rgba(197, 176, 228, .08);
}

.utility-inner {
  height: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.utility-tagline {
  min-width: 0;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.utility-links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

.utility-links a {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--t) var(--ease);
}

.utility-links a:hover { color: var(--text); }

/* troca de idioma */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stroke);
  background-color: rgba(255, 255, 255, .04);
}

.lang-switch a {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease);
}

.lang-switch a:hover {
  color: var(--text);
  background-color: rgba(255, 255, 255, .07);
}

.lang-switch a.active {
  background-image: var(--gradient);
  background-color: var(--brand);
  color: #fff;
}

.lang-switch a.active:hover { color: #fff; }


/* =====================================================================
   06. NAVBAR FIXA + MEGA-MENU
   Peça mais delicada do sistema. Desktop: painéis absolutos abaixo da
   barra. Mobile (<=1024px): painel de tela cheia rolável + acordeões.
   ===================================================================== */
.navbar {
  position: fixed;
  top: var(--util-h);
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  /* fallback sólido primeiro: no escuro, translúcido sem blur mata contraste */
  background-color: rgba(13, 5, 36, .94);
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-slow) var(--ease),
              border-color var(--t-slow) var(--ease),
              box-shadow var(--t-slow) var(--ease);
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .navbar {
    background-color: rgba(13, 5, 36, .72);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
  }
}

.navbar.scrolled {
  background-color: rgba(13, 5, 36, .96);
  border-bottom-color: var(--stroke);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .navbar.scrolled { background-color: rgba(13, 5, 36, .88); }
}

.nav-inner {
  position: relative;
  height: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* --- marca --- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: var(--text);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}

.brand img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: cover;
}

.brand:hover { color: var(--text); }

.brand-accent {
  background-image: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* --- menu --- */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.nav-item { position: relative; }

/* itens que são link simples */
.nav-item > a {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: .93rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease);
}

.nav-item > a:hover,
.nav-item > a.active {
  color: var(--text);
  background-color: rgba(255, 255, 255, .06);
}

/* item com mega-menu: o painel se posiciona contra a .navbar */
.nav-item--mega { position: static; }

.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: .93rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease);
}

.nav-trigger::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t) var(--ease);
}

.nav-trigger:hover,
.nav-trigger.active,
.nav-trigger[aria-expanded="true"] {
  color: var(--text);
  background-color: rgba(255, 255, 255, .06);
}

.nav-trigger[aria-expanded="true"]::after {
  transform: rotate(-135deg);
  margin-top: 2px;
}

/* --- painel do mega-menu --- */
.mega-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 90;
  width: min(940px, calc(100% - 2 * var(--gutter)));
  max-height: calc(100vh - var(--chrome-h) - 40px);
  overflow-y: auto;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke-strong);
  background-color: var(--bg-1);
  box-shadow: var(--shadow-lg), var(--inner-light);
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity var(--t) var(--ease),
              transform var(--t) var(--ease),
              visibility var(--t) var(--ease);
}

/* [hidden] é o contrato do JS; sobrescrevemos o display para preservar a
   transição, mantendo o painel fora da árvore de acessibilidade */
.mega-panel[hidden] {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -8px);
}

.mega-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.mega-col > h3,
.mega-title {
  margin: 4px 8px 8px;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mega-link {
  display: block;
  position: relative;
  padding: 11px 34px 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.mega-link strong {
  display: block;
  color: var(--text);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.3;
}

.mega-link span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.45;
}

.mega-link::after {
  content: "→";
  position: absolute;
  top: 11px;
  right: 14px;
  color: var(--accent);
  font-size: .95rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}

.mega-link:hover,
.mega-link:focus-visible {
  background-color: rgba(129, 140, 248, .1);
  border-color: var(--stroke-live);
}

.mega-link:hover::after,
.mega-link:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

/* rodapé opcional dentro do painel */
.mega-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--stroke);
  color: var(--muted);
  font-size: .86rem;
}

/* --- ações da direita --- */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-login {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stroke-strong);
  color: var(--text-soft);
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease),
              background-color var(--t) var(--ease);
}

.nav-login:hover {
  color: var(--text);
  border-color: var(--stroke-live);
  background-color: rgba(129, 140, 248, .12);
}

.nav-cta {
  height: 38px;
  padding: 0 18px;
  font-size: .9rem;
}

/* --- hambúrguer --- */
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--stroke-strong);
  background-color: var(--panel);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.menu-toggle:hover { background-color: var(--panel-2); }

.menu-toggle span {
  display: block;
  width: 19px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--text);
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* trava o scroll do corpo quando o menu mobile está aberto */
body.nav-open { overflow: hidden; }


/* =====================================================================
   07. BOTÕES — matriz tom × tamanho.
   Regra do sistema: hover NÃO move o botão; só troca o preenchimento
   em 200ms. A elevação pertence ao card.
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-size: .97rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t) var(--ease),
              background-image var(--t) var(--ease),
              border-color var(--t) var(--ease),
              color var(--t) var(--ease),
              box-shadow var(--t) var(--ease),
              opacity var(--t) var(--ease);
}

.btn-primary {
  background-image: var(--gradient);
  background-color: var(--brand);
  color: #fff;
  box-shadow: var(--glow-brand), var(--inner-light);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-image: linear-gradient(90deg, #1a1dff, #6b0bb8);
  color: #fff;
  box-shadow: 0 26px 60px -28px rgba(8, 11, 239, .95), var(--inner-light);
}

.btn-success {
  background-color: var(--success);
  color: #04220f;
  box-shadow: 0 22px 55px -28px rgba(34, 197, 94, .9), var(--inner-light);
}

.btn-success:hover,
.btn-success:focus-visible {
  background-color: #16a34a;
  color: #04220f;
}

.btn-outline {
  background-color: transparent;
  border-color: var(--stroke-strong);
  color: var(--text);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  color: var(--text);
  border-color: var(--stroke-live);
  background-color: rgba(129, 140, 248, .12);
}

.btn-ghost {
  padding-left: 14px;
  padding-right: 14px;
  background-color: transparent;
  color: var(--muted);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  color: var(--text);
  background-color: rgba(255, 255, 255, .07);
}

/* tamanhos */
.btn-sm {
  padding: 8px 16px;
  font-size: .86rem;
  gap: 7px;
}

.btn-lg {
  padding: 16px 32px;
  font-size: 1.04rem;
}

/* modificadores */
.btn-block {
  display: flex;
  width: 100%;
}

.btn[disabled],
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.btn-row.center { justify-content: center; }
.btn-row--tight { gap: 10px; }

/* seta que desliza (só no botão que a pede explicitamente) */
.btn .btn-arrow {
  display: inline-block;
  transition: transform var(--t) var(--ease);
}

.btn:hover .btn-arrow { transform: translateX(3px); }


/* =====================================================================
   08. LAYOUT
   ===================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: 1360px; }

.section {
  position: relative;
  padding: clamp(56px, 7.5vw, 100px) 0;
}

.section--alt {
  background-color: var(--bg-1);
  border-top: 1px solid rgba(197, 176, 228, .07);
  border-bottom: 1px solid rgba(197, 176, 228, .07);
}

.section--deep {
  background-color: var(--bg-2);
  border-top: 1px solid rgba(197, 176, 228, .07);
  border-bottom: 1px solid rgba(197, 176, 228, .07);
}

.section--tight { padding: clamp(36px, 4.5vw, 60px) 0; }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* seção logo abaixo do hero, feita para receber a peça de mídia */
.section--hero-media {
  padding-top: 0;
  padding-bottom: clamp(48px, 6vw, 84px);
}

.section--hero-media .media-frame {
  max-width: 1072px;
  margin: 0 auto;
}

.section-header {
  max-width: 760px;
  margin: 0 auto clamp(32px, 4.5vw, 54px);
  text-align: center;
}

.section-header--left {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

.section-header p {
  margin-top: 14px;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.08rem);
}

/* --- hero --- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 7vw, 88px) 0 clamp(52px, 7vw, 92px);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.hero::before {
  width: 520px;
  height: 520px;
  top: -180px;
  left: -160px;
  background-color: rgba(8, 11, 239, .18);
}

.hero::after {
  width: 420px;
  height: 420px;
  right: -130px;
  bottom: -160px;
  background-color: rgba(84, 4, 148, .16);
}

.hero > * { position: relative; z-index: 1; }

.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}

.hero-inner--center {
  grid-template-columns: 1fr;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.hero-inner--center .hero-actions,
.hero-inner--center .badge-row { justify-content: center; }

.hero-copy { min-width: 0; }
.hero-media { min-width: 0; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.hero-note {
  margin-top: 18px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.6;
}

/* --- grids --- */
.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.grid-2 { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }

.grid--tight { gap: 14px; }
.grid--loose { gap: 32px; }
.grid--top { align-items: start; }

/* --- duas colunas: texto + mídia --- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}

.split--top { align-items: start; }
.split--wide-text { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.split--reverse .split-media { order: -1; }

.split-content { min-width: 0; }
.split-media { min-width: 0; }

/* --- pilha vertical --- */
.stack { display: flex; flex-direction: column; gap: 20px; }
.stack--sm { gap: 12px; }
.stack--lg { gap: 32px; }
.stack--center { align-items: center; text-align: center; }

/* --- linha que quebra bem (chips, botões, selos) --- */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.cluster--center { justify-content: center; }
.cluster--between { justify-content: space-between; }
.cluster--sm { gap: 8px; }

/* --- bento: grade assimétrica de destaque --- */
.bento {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(180px, auto);
}

.bento-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  padding: 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke);
  background-color: var(--panel);
  box-shadow: var(--inner-light);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}

.bento-item:hover {
  transform: translateY(-4px);
  border-color: var(--stroke-live);
  box-shadow: var(--shadow), var(--inner-light);
}

.bento-item h3 { font-size: 1.15rem; }
.bento-item p { color: var(--muted); font-size: .95rem; }

.bento-item--wide { grid-column: span 2; }
.bento-item--tall { grid-row: span 2; }

.bento-item--brand {
  border-color: var(--stroke-live);
  background-image: linear-gradient(150deg, rgba(8, 11, 239, .22), rgba(84, 4, 148, .18));
}

.bento-media {
  margin: -26px -26px 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}


/* =====================================================================
   09. TIPOGRAFIA
   ===================================================================== */
h1, h2, h3, h4, h5, h6 {
  color: var(--text);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 5vw, 3.5rem); font-weight: 900; line-height: 1.08; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.12rem, 1.9vw, 1.38rem); font-weight: 700; line-height: 1.3; }
h4 { font-size: clamp(1rem, 1.5vw, 1.1rem); font-weight: 700; line-height: 1.35; }
h5 { font-size: .96rem; font-weight: 700; }
h6 { font-size: .88rem; font-weight: 700; }

p { line-height: 1.7; }
p + p { margin-top: 14px; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 6px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stroke-strong);
  background-color: rgba(129, 140, 248, .1);
  color: var(--accent);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--accent);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.overline {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.lead {
  margin-top: 18px;
  color: var(--text-soft);
  font-size: clamp(1.02rem, 1.8vw, 1.2rem);
  line-height: 1.7;
  text-wrap: pretty;
}

.gradient-text {
  background-image: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* a frase de contraste da marca */
.contrast-line {
  display: block;
  margin: 26px 0;
  padding: 14px 0 14px 22px;
  border-left: 3px solid var(--accent);
  color: var(--accent);
  font-size: clamp(1.05rem, 2.1vw, 1.32rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1.5;
}

.contrast-line.center {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* listas de texto corrido */
.prose-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--muted);
}

.prose-list li {
  position: relative;
  padding-left: 20px;
  line-height: 1.6;
}

.prose-list li::before {
  content: "";
  position: absolute;
  top: .68em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-image: var(--gradient);
  background-color: var(--accent);
}


/* =====================================================================
   10. CARDS
   No escuro a sombra quase não eleva: a profundidade vem de borda que
   acende + glow + luz interna no topo.
   ===================================================================== */
.card {
  position: relative;
  min-width: 0;
  padding: 26px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background-color: var(--panel);
  box-shadow: var(--inner-light);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease), background-color var(--t) var(--ease);
}

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .card {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--stroke-live);
  box-shadow: var(--shadow), var(--glow-brand), var(--inner-light);
}

.card > h3 { margin-bottom: 10px; }
.card > p { color: var(--muted); font-size: .97rem; }
.card > p + .btn,
.card > p + .btn-row { margin-top: 18px; }

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-bottom: 16px;
  border-radius: 14px;
  border: 1px solid var(--stroke-strong);
  background-color: rgba(129, 140, 248, .12);
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
}

.card-icon svg { width: 24px; height: 24px; }

.card--highlight {
  border-color: var(--stroke-live);
  background-color: rgba(129, 140, 248, .08);
  background-image: linear-gradient(155deg, rgba(8, 11, 239, .16), rgba(84, 4, 148, .12));
  box-shadow: var(--glow-brand), var(--inner-light);
}

.card--highlight .card-icon {
  background-image: var(--gradient);
  border-color: transparent;
}

.card--danger {
  border-color: rgba(239, 68, 68, .32);
  background-color: rgba(239, 68, 68, .07);
}

.card--danger .card-icon {
  border-color: rgba(239, 68, 68, .3);
  background-color: rgba(239, 68, 68, .16);
}

.card--danger:hover { border-color: rgba(239, 68, 68, .55); box-shadow: var(--shadow), var(--inner-light); }

.card--success {
  border-color: rgba(34, 197, 94, .32);
  background-color: rgba(34, 197, 94, .07);
}

.card--success .card-icon {
  border-color: rgba(34, 197, 94, .3);
  background-color: rgba(34, 197, 94, .16);
}

.card--success:hover { border-color: rgba(34, 197, 94, .55); box-shadow: var(--shadow), var(--inner-light); }

.card--flat {
  background-color: transparent;
  box-shadow: none;
}

.card--flat:hover { box-shadow: none; border-color: var(--stroke-live); }

.card--pad-sm { padding: 20px; }
.card--pad-lg { padding: clamp(26px, 3.5vw, 38px); }

/* card inteiro clicável, com seta */
.card--link {
  display: block;
  padding-right: 48px;
  color: var(--text-soft);
}

.card--link:hover { color: var(--text-soft); }

.card--link::after {
  content: "→";
  position: absolute;
  top: 26px;
  right: 22px;
  color: var(--accent);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform var(--t) var(--ease), color var(--t) var(--ease);
}

.card--link:hover::after {
  transform: translateX(4px);
  color: var(--text);
}

/* aura que segue o cursor — o JS entrega --mx/--my em [data-spotlight] */
/* spotlight vive em motion.css (::before); ::after fica reservado a seta de .card--link */

.card[data-spotlight]:hover::before,
.card[data-spotlight]:focus-within::before { opacity: 1; }

.card[data-spotlight] > * { position: relative; }

/* grade de cards com ícone */
.card-grid-icon {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.card-grid-icon .card { padding: 22px; }
.card-grid-icon .card-icon { width: 44px; height: 44px; font-size: 1.3rem; margin-bottom: 14px; }


/* =====================================================================
   11. PASSOS, PÍLULAS, COMPARATIVO, FEATURE-ROW
   ===================================================================== */
.steps {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.step {
  position: relative;
  min-width: 0;
  padding: 26px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background-color: rgba(255, 255, 255, .04);
  box-shadow: var(--inner-light);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}

.step:hover {
  transform: translateY(-4px);
  border-color: var(--stroke-live);
  box-shadow: var(--shadow), var(--inner-light);
}

.step h3 { margin-bottom: 8px; }
.step p { color: var(--muted); font-size: .95rem; }

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 50%;
  background-image: var(--gradient);
  background-color: var(--brand);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: var(--glow-brand);
}

/* variante em coluna, com linha ligando os passos */
.steps--vertical {
  grid-template-columns: 1fr;
  gap: 0;
}

.steps--vertical .step {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  padding: 0 0 30px 62px;
}

.steps--vertical .step:hover { transform: none; box-shadow: none; }

.steps--vertical .step::before {
  content: "";
  position: absolute;
  top: 46px;
  bottom: 0;
  left: 21px;
  width: 1px;
  background-image: linear-gradient(180deg, var(--stroke-live), transparent);
}

.steps--vertical .step:last-child { padding-bottom: 0; }
.steps--vertical .step:last-child::before { display: none; }

.steps--vertical .step-number {
  position: absolute;
  top: 0;
  left: 0;
  margin-bottom: 0;
}

/* --- lista em pílulas --- */
.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill-list--stack {
  flex-direction: column;
  align-items: flex-start;
}

.pill {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 17px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stroke);
  background-color: var(--panel);
  color: var(--text-soft);
  font-size: .93rem;
  font-weight: 500;
  line-height: 1.45;
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}

.pill::before {
  content: "✓";
  color: var(--success);
  font-weight: 800;
  line-height: 1.45;
}

.pill:hover {
  border-color: rgba(34, 197, 94, .4);
  background-color: rgba(34, 197, 94, .08);
}

.pill--plain::before { content: none; }

.pill--brand::before { content: "▸"; color: var(--accent); }

.pill--brand:hover {
  border-color: var(--stroke-live);
  background-color: rgba(129, 140, 248, .1);
}

/* --- comparativo (fluxo engessado × agente operacional) --- */
.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.compare-col {
  min-width: 0;
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke);
  background-color: rgba(255, 255, 255, .04);
  box-shadow: var(--inner-light);
}

.compare-col h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 15px;
  margin-bottom: 17px;
  border-bottom: 1px solid var(--stroke);
}

.compare-col--bad {
  border-color: rgba(239, 68, 68, .3);
  background-color: rgba(239, 68, 68, .05);
}

.compare-col--bad h3 { color: #fca5a5; }

.compare-col--good {
  border-color: rgba(34, 197, 94, .32);
  background-color: rgba(34, 197, 94, .06);
  box-shadow: var(--shadow-sm), var(--inner-light);
}

.compare-col--good h3 { color: #86efac; }

.compare-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--muted);
  font-size: .96rem;
  line-height: 1.55;
}

.compare-list li::before {
  content: "•";
  flex-shrink: 0;
  color: var(--muted);
  font-weight: 800;
}

.compare-col--bad .compare-list li::before { content: "✕"; color: var(--danger); }
.compare-col--good .compare-list li::before { content: "✓"; color: var(--success); }

/* --- linha de destaque (ícone + texto) --- */
.feature-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--stroke);
}

.feature-row:last-child { border-bottom: 0; }
.feature-row:first-child { padding-top: 0; }

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  border: 1px solid var(--stroke-strong);
  background-color: rgba(129, 140, 248, .12);
  font-size: 1.35rem;
  line-height: 1;
}

.feature-text { min-width: 0; }
.feature-text h3 { margin-bottom: 5px; }
.feature-text p { color: var(--muted); font-size: .96rem; }

/* --- faixa de selos / segmentos --- */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke);
  background-color: rgba(255, 255, 255, .04);
}

.logo-strip span,
.logo-strip a {
  color: var(--muted);
  font-size: .93rem;
  font-weight: 600;
}

.logo-strip img { height: 28px; width: auto; opacity: .85; }


/* =====================================================================
   12. CITAÇÃO, BADGES, TABELA, FAQ, CTA, BREADCRUMB, PAGE-NAV
   ===================================================================== */
.quote {
  position: relative;
  padding: 30px 28px 28px 60px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke);
  background-color: var(--panel);
  color: var(--text-soft);
  font-size: 1.04rem;
  line-height: 1.65;
  box-shadow: var(--inner-light);
}

.quote::before {
  content: "\201C";
  position: absolute;
  top: 8px;
  left: 20px;
  color: var(--accent);
  font-size: 3.4rem;
  line-height: 1;
  opacity: .55;
}

.quote-author {
  display: block;
  margin-top: 14px;
  color: var(--muted);
  font-size: .89rem;
  font-style: normal;
  font-weight: 600;
}

/* --- badges --- */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.badge-row.center { justify-content: center; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stroke-strong);
  background-color: var(--panel);
  color: var(--text-soft);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.badge--brand {
  border-color: var(--stroke-live);
  background-color: rgba(129, 140, 248, .14);
  color: #c7d2fe;
}

.badge--success {
  border-color: rgba(34, 197, 94, .4);
  background-color: rgba(34, 197, 94, .12);
  color: #86efac;
}

.badge--warning {
  border-color: rgba(251, 191, 36, .4);
  background-color: rgba(251, 191, 36, .12);
  color: #fde68a;
}

.badge--ghost {
  border-color: var(--stroke);
  background-color: transparent;
  color: var(--muted);
}

/* --- tabela --- */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background-color: rgba(255, 255, 255, .04);
}

.table { min-width: 520px; }

.table caption {
  padding: 14px 20px;
  color: var(--muted);
  font-size: .86rem;
  text-align: left;
}

.table th,
.table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--stroke);
  font-size: .95rem;
  text-align: left;
  vertical-align: top;
}

.table th {
  background-color: rgba(255, 255, 255, .04);
  color: var(--text);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.table td { color: var(--muted); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color var(--t) var(--ease); }
.table tbody tr:hover { background-color: rgba(255, 255, 255, .03); }

.table td strong { color: var(--text); }

/* --- FAQ com <details> --- */
.faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.faq-item {
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background-color: rgba(255, 255, 255, .04);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}

.faq-item:hover { border-color: var(--stroke-strong); }

.faq-item[open] {
  border-color: var(--stroke-live);
  background-color: rgba(129, 140, 248, .06);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }

/* marcador próprio: chevron que gira quando [open] */
.faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: -3px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform var(--t) var(--ease);
}

.faq-item[open] summary::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.faq-answer {
  padding: 0 22px 20px;
  color: var(--muted);
  font-size: .97rem;
  line-height: 1.7;
}

.faq-answer p + p { margin-top: 12px; }
.faq-answer ul { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.faq-answer li { padding-left: 18px; position: relative; }
.faq-answer li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* --- faixa de CTA --- */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 5.5vw, 64px) clamp(22px, 4vw, 54px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke-live);
  background-color: rgba(255, 255, 255, .04);
  background-image: linear-gradient(120deg, rgba(8, 11, 239, .26), rgba(84, 4, 148, .22));
  box-shadow: var(--shadow), var(--inner-light);
  text-align: center;
}

.cta-band::before {
  content: "";
  position: absolute;
  top: -220px;
  right: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background-color: rgba(8, 11, 239, .18);
  filter: blur(120px);
  pointer-events: none;
}

.cta-band > * { position: relative; }

.cta-band p {
  max-width: 620px;
  margin: 14px auto 0;
  color: var(--text-soft);
  font-size: clamp(1rem, 1.7vw, 1.06rem);
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

.cta-band--left { text-align: left; }
.cta-band--left p { margin-left: 0; }
.cta-band--left .cta-actions { justify-content: flex-start; }

/* --- breadcrumb --- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: .84rem;
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb li + li::before {
  content: "/";
  color: rgba(197, 176, 228, .45);
}

.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb [aria-current="page"] { color: var(--text-soft); font-weight: 600; }

/* --- navegação interna da página (chips) --- */
.page-nav {
  position: sticky;
  top: var(--chrome-h);
  z-index: 40;
  display: flex;
  gap: 8px;
  margin: 0 0 clamp(24px, 4vw, 40px);
  padding: 10px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background-color: rgba(13, 5, 36, .9);
  border-bottom: 1px solid var(--stroke);
}

.page-nav::-webkit-scrollbar { display: none; }

.page-nav a {
  flex-shrink: 0;
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stroke);
  background-color: rgba(255, 255, 255, .04);
  color: var(--muted);
  font-size: .86rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease),
              border-color var(--t) var(--ease);
}

.page-nav a:hover {
  color: var(--text);
  border-color: var(--stroke-strong);
  background-color: rgba(255, 255, 255, .08);
}

.page-nav a.active {
  border-color: transparent;
  background-image: var(--gradient);
  background-color: var(--brand);
  color: #fff;
}


/* =====================================================================
   13. TIMELINE, STATS, CREDENCIAIS, PATENTE, IMPRENSA
   ===================================================================== */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-left: 30px;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 5px;
  width: 1px;
  background-image: linear-gradient(180deg, var(--stroke-live), rgba(197, 176, 228, .1));
}

.timeline-item {
  position: relative;
  min-width: 0;
}

.timeline-item::before {
  content: "";
  position: absolute;
  top: 8px;
  left: -30px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--bg-0);
  background-image: var(--gradient);
  background-color: var(--accent);
}

.timeline-year {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}

.timeline-item h3 { margin-bottom: 6px; }
.timeline-item p { color: var(--muted); font-size: .96rem; }

/* --- números (contador via [data-count]) --- */
.stats {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.stat {
  min-width: 0;
  padding: 24px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background-color: rgba(255, 255, 255, .04);
  box-shadow: var(--inner-light);
  text-align: center;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.stat:hover {
  border-color: var(--stroke-live);
  box-shadow: var(--glow-accent), var(--inner-light);
}

.stat-value {
  display: block;
  background-image: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: clamp(1.9rem, 4.2vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: .89rem;
  line-height: 1.5;
}

.stats--inline {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.stats--inline .stat {
  border: 0;
  background-color: transparent;
  box-shadow: none;
  padding: 12px;
}

/* --- credenciais (NVIDIA Inception, Meta, AWS, IEEE) --- */
.credentials {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.credential {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background-color: rgba(255, 255, 255, .04);
  box-shadow: var(--inner-light);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.credential:hover {
  border-color: var(--stroke-live);
  box-shadow: var(--glow-accent), var(--inner-light);
}

.credential-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--stroke-strong);
  background-color: rgba(129, 140, 248, .12);
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
}

.credential-mark img { width: 26px; height: 26px; object-fit: contain; }

.credential h3 {
  font-size: 1rem;
  line-height: 1.3;
}

.credential-note {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.5;
}

/* --- bloco da patente (o objeto técnico central) --- */
.patent {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 4vw, 40px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke-live);
  background-color: rgba(255, 255, 255, .04);
  background-image: linear-gradient(150deg, rgba(8, 11, 239, .2), rgba(84, 4, 148, .16));
  box-shadow: var(--shadow), var(--inner-light);
}

.patent-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stroke-strong);
  background-color: rgba(13, 5, 36, .5);
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.patent-title {
  margin-top: 16px;
  color: var(--text);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 800;
  line-height: 1.25;
}

.patent-title em {
  font-style: italic;
  color: var(--text-soft);
}

.patent-body {
  margin-top: 14px;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 68ch;
}

.patent-body p + p { margin-top: 12px; }

/* --- imprensa --- */
.press-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.press-item {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background-color: rgba(255, 255, 255, .04);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}

.press-item:hover {
  transform: translateY(-3px);
  border-color: var(--stroke-live);
  box-shadow: var(--shadow-sm), var(--inner-light);
}

.press-date {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.press-content { min-width: 0; }

.press-title {
  color: var(--text);
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.35;
}

.press-title a { color: var(--text); }
.press-title a:hover { color: var(--accent); }

.press-excerpt {
  margin-top: 8px;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.6;
}

.press-tag {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stroke-strong);
  background-color: rgba(129, 140, 248, .1);
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* =====================================================================
   14. PRODUCT CARD, INDUSTRY CARD, TRILHAS, MODELOS, TABS
   ===================================================================== */
.product-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke);
  background-color: var(--panel);
  box-shadow: var(--inner-light);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}

.product-card:hover {
  transform: translateY(-4px);
  border-color: var(--stroke-live);
  box-shadow: var(--shadow), var(--glow-brand), var(--inner-light);
}

.product-card__eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.product-card__title {
  color: var(--text);
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.25;
}

.product-card__desc {
  margin-top: 10px;
  color: var(--muted);
  font-size: .96rem;
  line-height: 1.65;
}

.product-card__features {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 18px 0 22px;
}

.product-card__features li {
  position: relative;
  padding-left: 22px;
  color: var(--text-soft);
  font-size: .93rem;
  line-height: 1.55;
}

.product-card__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 800;
}

.product-card__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  color: var(--accent);
  font-size: .93rem;
  font-weight: 700;
}

.product-card__link::after {
  content: "→";
  transition: transform var(--t) var(--ease);
}

.product-card__link:hover { color: var(--text); }
.product-card__link:hover::after { transform: translateX(4px); }

.product-card--featured {
  border-color: var(--stroke-live);
  background-image: linear-gradient(155deg, rgba(8, 11, 239, .18), rgba(84, 4, 148, .14));
}

/* --- setores --- */
.industry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background-color: rgba(255, 255, 255, .04);
  box-shadow: var(--inner-light);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}

.industry-card:hover {
  transform: translateY(-4px);
  border-color: var(--stroke-live);
  box-shadow: var(--shadow), var(--inner-light);
}

.industry-card img {
  width: 100%;
  height: 168px;
  object-fit: cover;
}

.industry-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px 24px;
}

.industry-card h3 { font-size: 1.08rem; }
.industry-card p { color: var(--muted); font-size: .93rem; }

.industry-card__link {
  margin-top: 6px;
  color: var(--accent);
  font-size: .9rem;
  font-weight: 700;
}

.industry-card--case {
  border-color: var(--stroke-live);
  background-image: linear-gradient(160deg, rgba(8, 11, 239, .14), transparent 60%);
}

.industry-card--case .industry-card__body { padding-top: 22px; }

/* --- as duas trilhas: Enterprise × PME --- */
.tracks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.track {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(24px, 3.5vw, 34px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke);
  background-color: var(--panel);
  box-shadow: var(--inner-light);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}

.track:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow), var(--inner-light);
}

.track--enterprise {
  border-color: var(--stroke-live);
  background-image: linear-gradient(155deg, rgba(8, 11, 239, .2), rgba(84, 4, 148, .14));
}

.track--enterprise:hover { box-shadow: var(--shadow), var(--glow-brand), var(--inner-light); }

.track--smb {
  border-color: rgba(34, 197, 94, .32);
  background-image: linear-gradient(155deg, rgba(34, 197, 94, .12), rgba(84, 4, 148, .1));
}

.track--smb:hover {
  border-color: rgba(34, 197, 94, .55);
  box-shadow: var(--shadow), 0 24px 60px -30px rgba(34, 197, 94, .6), var(--inner-light);
}

.track-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stroke-strong);
  background-color: rgba(13, 5, 36, .45);
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.track--smb .track-eyebrow {
  border-color: rgba(34, 197, 94, .4);
  color: #86efac;
}

.track-title {
  margin-top: 16px;
  color: var(--text);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 800;
  line-height: 1.2;
}

.track-desc {
  margin-top: 12px;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.7;
}

.track-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0 26px;
}

.track-list li {
  position: relative;
  padding-left: 24px;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.6;
}

.track-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 800;
}

.track--smb .track-list li::before { color: var(--success); }

.track-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
}

/* --- linha de modelos Hal (Core+, Echo, Infinity, …) --- */
.model-list {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.model-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background-color: rgba(255, 255, 255, .04);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}

.model-item:hover {
  border-color: var(--stroke-live);
  background-color: rgba(129, 140, 248, .07);
  box-shadow: var(--inner-light);
}

.model-name {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.model-name::before {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background-image: var(--gradient);
  background-color: var(--accent);
}

.model-desc {
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.55;
}

/* --- abas genéricas [data-tabs] --- */
.tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  margin-bottom: 24px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stroke);
  background-color: rgba(255, 255, 255, .05);
}

.tabs--center { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
.tabs--block { display: flex; width: 100%; }

.tab {
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: .91rem;
  font-weight: 700;
  white-space: nowrap;
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}

.tab:hover { color: var(--text); }

.tab.active,
.tab[aria-selected="true"] {
  background-image: var(--gradient);
  background-color: var(--brand);
  color: #fff;
  box-shadow: var(--glow-brand);
}

.tab-panel { display: none; }
.tab-panel.active,
.tab-panel[aria-hidden="false"] { display: block; }
.tab-panel[hidden] { display: none; }


/* =====================================================================
   15. MEDIA FRAME — peça CRÍTICA.
   As artes originais da Hal-AI (marca-*, conversa-*, painel-modelos) são
   AZUIS (#0b3a86/#1a73e8) e o site é roxo-índigo. Elas nunca aparecem
   nuas: entram nesta moldura, que aplica um véu de gradiente da marca.
   O véu usa mix-blend-mode:color — troca matiz/croma e PRESERVA a
   luminância, ou seja, o texto embutido na peça continua legível.
   Toda peça com texto embutido pede alt descritivo + .media-note visível.
   ===================================================================== */
.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background-color: var(--bg-1);
  box-shadow: var(--shadow-lg), var(--inner-light);
  isolation: isolate;
}

.media-frame img,
.media-frame video,
.media-frame picture img {
  display: block;
  width: 100%;
  height: auto;
}

/* vinheta escura nas bordas (mistura normal, fica por baixo do véu) */
.media-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 45%, transparent 52%, rgba(6, 2, 18, .55) 100%);
}

/* véu de gradiente da marca */
.media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(8, 11, 239, .28), rgba(84, 4, 148, .34));
  mix-blend-mode: color;
}

/* véu mais fraco: quando o texto da peça precisa ser lido com folga */
.media-frame--soft::after { opacity: .55; }
.media-frame--soft::before {
  background: radial-gradient(120% 100% at 50% 45%, transparent 60%, rgba(6, 2, 18, .38) 100%);
}

/* peça em retrato (marca-6, painel-modelos) */
.media-frame--tall {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* recorte fixo quando a peça precisa casar altura com o texto ao lado */
.media-frame--crop img {
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

.media-frame--flush { border-radius: 0; border-left: 0; border-right: 0; }

/* moldura sem véu, para foto de banco livre já na paleta certa */
.media-frame--plain::after { content: none; }

/* legenda obrigatória das peças ilustrativas */
.media-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.media-note--left { text-align: left; }

/* par de selos com fundo transparente (publico-clientes / colaboradores) */
.media-pair {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
}

.media-pair img { max-width: 220px; }


/* =====================================================================
   16. FORMULÁRIO
   ===================================================================== */
.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(22px, 3.5vw, 34px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke);
  background-color: var(--panel);
  box-shadow: var(--inner-light);
}

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .form {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.form-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.form-group label {
  color: var(--text);
  font-size: .89rem;
  font-weight: 600;
}

.req { color: var(--danger); }

.form-control {
  width: 100%;
  min-height: 46px;
  padding: 12px 15px;
  border-radius: 12px;
  border: 1px solid var(--stroke-strong);
  background-color: rgba(255, 255, 255, .04);
  color: var(--text);
  font-family: var(--font);
  font-size: .97rem;
  line-height: 1.5;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
              background-color var(--t) var(--ease);
}

.form-control::placeholder { color: rgba(197, 176, 228, .5); }

.form-control:hover { border-color: rgba(197, 176, 228, .38); }

.form-control:focus {
  outline: none;
  border-color: var(--accent);
  background-color: rgba(255, 255, 255, .07);
  box-shadow: 0 0 0 4px rgba(8, 11, 239, .28);
}

textarea.form-control {
  min-height: 140px;
  resize: vertical;
}

select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 42px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5b0e4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 17px;
}

select.form-control option {
  background-color: var(--bg-1);
  color: var(--text);
}

.form-control.is-invalid,
.form-control[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, .18);
}

.form-hint {
  color: var(--muted);
  font-size: .81rem;
  line-height: 1.5;
}

.form-error {
  color: #fca5a5;
  font-size: .81rem;
  font-weight: 600;
  line-height: 1.4;
}

.form-error:empty { display: none; }

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
  font-size: .89rem;
  line-height: 1.5;
}

.form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--brand);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}

/* o autofill do Chrome não pode estourar branco no tema escuro */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px #1a0f31 inset;
  box-shadow: 0 0 0 1000px #1a0f31 inset;
  border-color: var(--stroke-strong);
  transition: background-color 5000s ease-in-out 0s;
}


/* =====================================================================
   17. TOAST
   ===================================================================== */
.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  width: min(340px, calc(100vw - 48px));
  padding: 15px 19px;
  border-radius: 14px;
  border: 1px solid var(--stroke-strong);
  border-left: 4px solid var(--success);
  background-color: rgba(23, 1, 40, .97);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease),
              visibility var(--t-slow) var(--ease);
}

.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.toast--error { border-left-color: var(--danger); }
.toast--warning { border-left-color: var(--warning); }

.toast-title {
  color: var(--text);
  font-size: .97rem;
  font-weight: 700;
  line-height: 1.3;
}

.toast-body {
  margin-top: 5px;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5;
}


/* =====================================================================
   18. MOCKUP DE CONVERSA EM HTML
   (o mockup vivo; as artes conversa-*.jpg vão em .media-frame)
   ===================================================================== */
.chat {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid var(--stroke-strong);
  background-color: #0b141a;
  box-shadow: var(--shadow-lg), 0 0 0 6px rgba(255, 255, 255, .03);
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  background-image: linear-gradient(180deg, #075e54, #054d44);
}

.chat-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 50%;
  background-image: var(--gradient);
  background-color: var(--brand);
  color: #fff;
  font-size: 1.02rem;
  font-weight: 800;
}

.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }

.chat-name {
  color: #fff;
  font-size: .94rem;
  font-weight: 700;
  line-height: 1.25;
}

.chat-status {
  display: block;
  color: rgba(255, 255, 255, .72);
  font-size: .73rem;
  font-weight: 500;
}

.chat-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 300px;
  max-height: 440px;
  overflow-y: auto;
  padding: 17px 13px;
  background-color: #0b141a;
  background-image:
    radial-gradient(circle at 20% 18%, rgba(129, 140, 248, .07), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(84, 4, 148, .12), transparent 45%);
}

/* balões */
.bubble {
  position: relative;
  max-width: 82%;
  padding: 9px 12px 6px;
  border-radius: 14px;
  color: #e9edef;
  font-size: .89rem;
  line-height: 1.45;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

.bubble--in {
  align-self: flex-start;
  border-top-left-radius: 4px;
  background-color: #1f2c34;
}

.bubble--out {
  align-self: flex-end;
  border-top-right-radius: 4px;
  background-color: #005c4b;
}

.bubble strong { color: #fff; }

.bubble-time {
  display: block;
  margin-top: 3px;
  color: rgba(233, 237, 239, .55);
  font-size: .67rem;
  line-height: 1;
  text-align: right;
}

/* balão de áudio */
.bubble--audio {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
  padding: 10px 12px;
}

.audio-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: .7rem;
}

.audio-play::before { content: "▶"; transform: translateX(1px); }

.audio-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  height: 22px;
}

.audio-wave span {
  display: block;
  width: 3px;
  height: 40%;
  border-radius: 2px;
  background-color: rgba(233, 237, 239, .55);
}

.audio-wave span:nth-child(3n) { height: 90%; background-color: rgba(233, 237, 239, .8); }
.audio-wave span:nth-child(3n + 1) { height: 55%; }
.audio-wave span:nth-child(4n) { height: 30%; }
.audio-wave span:nth-child(5n) { height: 75%; }

.audio-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #fff;
}

.audio-time {
  flex-shrink: 0;
  color: rgba(233, 237, 239, .6);
  font-size: .69rem;
}

/* indicador de digitação — só a caixa; o piscar é de motion.css */
.chat-typing {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 11px 14px;
  border-radius: 14px;
  border-top-left-radius: 4px;
  background-color: #1f2c34;
}

.chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(233, 237, 239, .7);
}

/* abas Cliente × Gestor ([data-chat-group]) */
.chat-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  margin: 0 auto 20px;
  padding: 4px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stroke);
  background-color: rgba(255, 255, 255, .06);
}

.chat-tab {
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: .9rem;
  font-weight: 700;
  white-space: nowrap;
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}

.chat-tab:hover { color: var(--text); }

.chat-tab.active,
.chat-tab[aria-selected="true"] {
  background-image: var(--gradient);
  background-color: var(--brand);
  color: #fff;
  box-shadow: var(--glow-brand);
}

.chat-panel { display: none; }
.chat-panel.active,
.chat-panel[aria-hidden="false"] { display: block; }
.chat-panel[hidden] { display: none; }

.chat-caption {
  margin-top: 14px;
  color: var(--muted);
  font-size: .9rem;
  text-align: center;
}


/* =====================================================================
   19. RODAPÉ
   ===================================================================== */
.site-footer {
  flex-shrink: 0;
  margin-top: auto;
  padding: clamp(40px, 5.5vw, 64px) 0 26px;
  border-top: 1px solid var(--stroke);
  background-color: rgba(10, 3, 32, .7);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
  gap: 36px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.footer-brand > a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 800;
}

.footer-brand img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
}

.footer-brand p {
  max-width: 320px;
  color: var(--muted);
  font-size: .91rem;
  line-height: 1.6;
}

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.footer-badges .badge { font-size: .74rem; padding: 5px 11px; }

.footer-col { min-width: 0; }

.footer-col h2 {
  margin-bottom: 14px;
  color: var(--text);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a {
  color: var(--muted);
  font-size: .91rem;
  line-height: 1.5;
}

.footer-col a:hover { color: var(--text); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: var(--container);
  margin: 36px auto 0;
  padding: 20px var(--gutter) 0;
  border-top: 1px solid var(--stroke);
  color: var(--muted);
  font-size: .84rem;
}

.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-bottom a { color: var(--muted); }
.footer-bottom a:hover { color: var(--text); }


/* =====================================================================
   20. RESPONSIVO
   Breakpoints: 1200 / 1024 / 900 / 600 / 380.
   Regra do dono: nenhum overflow horizontal em 320px e alvo de toque
   >= 44px no mobile.
   ===================================================================== */

/* --------------------------------------------------------- ATÉ 1200px */
@media (max-width: 1200px) {
  :root { --gutter: 20px; --gap: 20px; }

  .nav-menu { gap: 14px; }
  .nav-links { gap: 2px; }
  .nav-item > a,
  .nav-trigger { padding: 0 10px; font-size: .9rem; }
  .nav-actions { gap: 8px; }
  .nav-login { padding: 0 12px; font-size: .86rem; }
  .nav-cta { padding: 0 15px; font-size: .86rem; }

  .container--wide { max-width: 100%; }

  .grid-4 { gap: 16px; }
  .bento { gap: 16px; }
}


/* --------------------------------------------------------- ATÉ 1024px
   Aqui o mega-menu vira acordeão dentro de um painel de tela cheia.    */
@media (max-width: 1024px) {
  .menu-toggle { display: flex; }

  /* painel de navegação: ancorado na barra, rolável, nunca estoura a tela.
     É absolute (e não fixed) de propósito: a .navbar tem backdrop-filter e
     por isso vira bloco contentor de descendentes fixos — top:100% do
     .nav-inner é o único jeito robusto de encostar o painel na barra. */
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 95;
    display: block;
    max-height: calc(100vh - var(--chrome-h));
    max-height: calc(100dvh - var(--chrome-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 16px var(--gutter) 32px;
    background-color: rgba(13, 5, 36, .99);
    border-bottom: 1px solid var(--stroke);
    box-shadow: 0 26px 50px rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease),
                visibility var(--t) var(--ease);
  }

  .nav-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .nav-item { position: static; }

  .nav-item > a,
  .nav-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: auto;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 1rem;
  }

  .nav-trigger::after { margin-top: -3px; }
  .nav-trigger[aria-expanded="true"]::after { margin-top: 2px; }

  /* o painel entra no fluxo, como acordeão */
  .mega-panel {
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    margin: 2px 0 8px;
    padding: 8px;
    border-radius: var(--radius-sm);
    border-color: var(--stroke);
    background-color: rgba(255, 255, 255, .04);
    box-shadow: none;
    transform: none;
    transition: none;
  }

  .mega-panel[hidden] { display: none; }

  .mega-grid { grid-template-columns: 1fr; gap: 2px; }

  .mega-col > h3,
  .mega-title { margin: 10px 8px 4px; }

  .mega-link { min-height: 48px; padding: 11px 34px 11px 12px; }
  .mega-link::after { top: 50%; margin-top: -10px; opacity: 1; transform: none; }

  .mega-footer { margin-top: 10px; padding-top: 10px; }

  .nav-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--stroke);
  }

  .nav-login,
  .nav-cta {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 48px;
  }

  /* layout geral */
  .hero-inner { grid-template-columns: 1fr; }
  .hero-media { max-width: 560px; }
  .hero-inner:not(.hero-inner--center) .hero-media { margin: 0 auto; }

  .split,
  .split--wide-text { grid-template-columns: 1fr; }
  .split--reverse .split-media { order: 0; }

  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-item--wide { grid-column: span 2; }
  .bento-item--tall { grid-row: auto; }

  .footer-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
  .footer-brand { grid-column: span 3; }
  .footer-brand p { max-width: none; }
}


/* ---------------------------------------------------------- ATÉ 900px */
@media (max-width: 900px) {
  .section { padding: clamp(48px, 8vw, 72px) 0; }

  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .compare { grid-template-columns: 1fr; }
  .tracks { grid-template-columns: 1fr; }

  .track:hover,
  .card:hover,
  .step:hover,
  .press-item:hover,
  .product-card:hover,
  .industry-card:hover,
  .bento-item:hover { transform: none; }

  /* imprensa empilha: data acima do conteúdo */
  .press-item {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .press-tag { margin-top: 10px; }

  .media-frame--tall { max-width: 360px; }

  .quote { padding: 26px 22px 24px 52px; }
  .quote::before { left: 16px; font-size: 3rem; }

  .patent { padding: 26px 22px; }
}


/* ---------------------------------------------------------- ATÉ 600px */
@media (max-width: 600px) {
  :root { --gutter: 18px; --gap: 16px; }

  body { font-size: 15.5px; }

  .section { padding: 52px 0; }
  .section--tight { padding: 34px 0; }

  /* tudo que era grade vira coluna única */
  .grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .steps,
  .stats,
  .credentials,
  .model-list,
  .card-grid-icon,
  .bento,
  .media-pair,
  .form-row,
  .form-row--3 { grid-template-columns: 1fr; }

  .bento-item--wide { grid-column: auto; }
  .bento-item { padding: 22px; }

  .section-header { margin-bottom: 28px; }

  /* alvo de toque confortável e CTA de largura total */
  .btn { min-height: 46px; }
  .btn-sm { min-height: 40px; }

  .hero-actions .btn,
  .cta-actions .btn,
  .track-cta .btn,
  .form-actions .btn,
  .btn-row .btn { width: 100%; }

  .btn-row--tight .btn { width: auto; }

  .hero { padding: 40px 0 48px; }
  .hero-actions { margin-top: 24px; }

  .utility-tagline { display: none; }
  .utility-inner { justify-content: center; }
  .utility-links { gap: 14px; }

  .card { padding: 22px; }
  .card--link { padding-right: 42px; }
  .card--link::after { top: 22px; right: 18px; }

  .compare-col,
  .track { padding: 22px 20px; }

  .feature-row { gap: 14px; padding: 16px 0; }
  .feature-icon { width: 42px; height: 42px; font-size: 1.2rem; }

  .steps--vertical .step { padding-left: 54px; }

  .timeline { padding-left: 26px; }
  .timeline-item::before { left: -26px; }

  .faq-item summary { padding: 16px 18px; font-size: .97rem; }
  .faq-answer { padding: 0 18px 18px; }

  .cta-band { padding: 32px 20px; }

  .tabs,
  .chat-tabs {
    display: flex;
    width: 100%;
    justify-content: stretch;
  }

  .tab,
  .chat-tab {
    flex: 1 1 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    text-align: center;
  }

  .chat { max-width: 100%; }
  .chat-body { min-height: 260px; max-height: 380px; }
  .bubble { max-width: 88%; }

  .page-nav { margin-bottom: 24px; }
  .page-nav a { min-height: 40px; display: inline-flex; align-items: center; }

  .table th,
  .table td { padding: 12px 14px; font-size: .9rem; }

  .toast {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
  }

  .form { padding: 20px 18px; }

  .footer-inner { grid-template-columns: 1fr; gap: 26px; }
  .footer-brand { grid-column: auto; }
  .footer-bottom {
    justify-content: center;
    text-align: center;
    margin-top: 28px;
  }
  .footer-bottom nav { justify-content: center; }

  .logo-strip { gap: 12px 18px; padding: 16px; }
  .marquee-track { gap: 26px; }
}


/* ---------------------------------------------------------- ATÉ 380px */
@media (max-width: 380px) {
  :root { --gutter: 14px; --util-h: 30px; }

  body { font-size: 15px; }

  .brand { font-size: .98rem; gap: 8px; }
  .brand img { width: 30px; height: 30px; }

  .utility-links { gap: 10px; }
  .utility-links a { font-size: .72rem; }
  .lang-switch a { padding: 2px 8px; }

  .kicker { font-size: .68rem; padding: 5px 12px; letter-spacing: .1em; }
  .badge { font-size: .74rem; padding: 5px 10px; }

  .btn { padding: 12px 18px; font-size: .93rem; }
  .btn-lg { padding: 14px 22px; font-size: .98rem; }

  .card,
  .compare-col,
  .track,
  .step,
  .product-card { padding: 18px 16px; }

  .card-icon { width: 44px; height: 44px; font-size: 1.3rem; }

  .quote { padding: 22px 16px 20px 42px; }
  .quote::before { left: 12px; font-size: 2.6rem; }

  .patent { padding: 20px 16px; }
  .patent-body { font-size: .95rem; }

  .chat { border-radius: 20px; }
  .chat-body { padding: 14px 10px; }
  .bubble { max-width: 92%; font-size: .86rem; }
  .bubble--audio { min-width: 0; }

  .media-frame { border-radius: 14px; }
  .media-frame--tall { max-width: 100%; }

  .form-control { padding: 11px 13px; }

  .steps--vertical .step { padding-left: 48px; }
  .step-number { width: 38px; height: 38px; font-size: 1rem; }
}


/* --- proteção final: nada, em nenhuma largura, empurra o eixo X ------ */
.container,
.container--narrow,
.section,
.hero,
.footer-inner,
.footer-bottom { max-width: 100%; }

.card,
.step,
.track,
.compare-col,
.product-card,
.industry-card,
.bento-item,
.press-item,
.model-item,
.credential,
.stat { overflow-wrap: anywhere; }

pre,
code {
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* =====================================================================
   21. PREFERÊNCIAS DO USUÁRIO
   Sem !important: as regras abaixo têm a mesma especificidade das que
   sobrescrevem e vêm depois na folha. As animações de entrada e o
   marquee são desligados em motion.css.
   ===================================================================== */
/* A .page-nav aparece ora solta no <main>, ora dentro de .container. Estas duas
   regras alinham os dois casos ao grid da página sem mexer no HTML: quando está
   solta, ela mesma vira contêiner; quando já está dentro de um, desliga o próprio. */
.page-nav {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container > .page-nav {
  max-width: none;
  padding-inline: 0;
}

/* Onde existe a régua de seções (sticky logo abaixo da navbar), o alvo precisa
   parar abaixo dela também — senão a régua cobre o título da seção. */
html:has([data-page-nav]) {
  scroll-padding-top: calc(var(--chrome-h) + 84px);
}

@media (max-width: 600px) {
  .app-shot__body {
    font-size: .92em;
  }

  .app-a2a,
  .app-fields,
  .app-toggle-row,
  .app-strip,
  .app-card,
  .app-head {
    flex-wrap: wrap;
    min-width: 0;
  }

  .app-shot__body :is(p, span, div, li) {
    overflow-wrap: anywhere;
  }

  .app-shot__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Embrulho das telas do app: dá respiro, centraliza e segura a legenda.
   O desdobramento 3D vem de [data-reveal="unfold"], em motion.css. */
.app-figure {
  margin: clamp(24px, 3.5vw, 40px) 0 0;
  max-width: 100%;
}

.app-figure > .media-note {
  margin-top: 12px;
}

/* ==========================================================================
   SELOS DE PARCERIA (Meta, AWS, NVIDIA)
   As três marcas proíbem recolorir, distorcer ou aplicar sombra sobre o
   logotipo. Dois deles são escuros sobre transparente e sumiriam no fundo
   roxo do site — então o logotipo entra INTACTO sobre uma placa clara, que é
   o tratamento que as próprias diretrizes pedem.
   ========================================================================== */
.selos-parceria {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 22px);
  margin-top: clamp(20px, 3vw, 32px);
}

.selo-parceiro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  padding: 12px 22px;
  border-radius: 14px;
  background-color: #f4f6fb;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .38);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.selo-parceiro img {
  display: block;
  width: auto;
  height: 34px;
  max-width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .selo-parceiro:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .48), 0 0 0 1px rgba(129, 140, 248, .35);
  }
}

/* O selo Meta Business Partner já vem com moldura branca própria — envolvê-lo
   na placa daria borda dupla. Aqui ele dispensa a placa e vale por si.
   O logotipo não é alterado: só deixa de ganhar um cartão em volta. */
.selo-parceiro--nu {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.selo-parceiro--nu img {
  height: 62px;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .38);
}

@media (hover: hover) and (pointer: fine) {
  .selo-parceiro--nu:hover img {
    box-shadow: 0 16px 34px rgba(0, 0, 0, .48), 0 0 0 1px rgba(129, 140, 248, .35);
  }
}

@media (max-width: 600px) {
  .selo-parceiro--nu img { height: 54px; }
}

/* Selo solto, ao lado de um texto (ex.: "API Cloud Oficial da Meta") */
.selo-parceiro--inline {
  min-height: 56px;
  padding: 10px 16px;
}

.selo-parceiro--inline img { height: 28px; }

.selos-legenda {
  margin-top: 12px;
  text-align: center;
  font-size: .82rem;
  color: var(--muted);
}

@media (max-width: 600px) {
  .selo-parceiro { min-height: 60px; padding: 10px 16px; }
  .selo-parceiro img { height: 28px; }
}

/* ==========================================================================
   ATALHOS PERMANENTES: agente no WhatsApp e porta de entrada PME
   Nasceram de um teste de uso: como PME, o visitante não achava a landing de
   adesão, e o telefone do rodapé não abria o WhatsApp.
   ========================================================================== */

/* --- Ícone flutuante do agente de IA no WhatsApp ------------------------- */
.fab-cluster {
  position: fixed;
  right: clamp(14px, 2.5vw, 26px);
  bottom: clamp(14px, 2.5vw, 26px);
  z-index: 90;
}

.wa-fab {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;
  color: #05331c;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 0 0 rgba(37, 211, 102, .55);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.wa-fab svg { width: 34px; height: 34px; fill: currentColor; }

.wa-fab:hover { transform: scale(1.07); }

.wa-fab:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

/* Anel que pulsa — é o que faz o olho encontrar o botão. */
.wa-fab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(37, 211, 102, .45);
  animation: wa-pulso 2.4s var(--ease-io) infinite;
  z-index: -1;
}

@keyframes wa-pulso {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.65); opacity: 0; }
  100% { transform: scale(1.65); opacity: 0; }
}

/* Rótulo que abre no hover/foco, à esquerda do círculo. */
.wa-fab-label {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  white-space: nowrap;
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--bg-1);
  border: 1px solid var(--stroke);
  color: var(--text);
  font-size: .86rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}

.wa-fab:hover .wa-fab-label,
.wa-fab:focus-visible .wa-fab-label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (max-width: 600px) {
  .wa-fab { width: 54px; height: 54px; }
  .wa-fab svg { width: 30px; height: 30px; }
  .wa-fab-label { display: none; }
}

/* --- Destaque PME dentro do mega-painel de Soluções ---------------------- */
.mega-cta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(34, 197, 94, .35);
  background: linear-gradient(120deg, rgba(34, 197, 94, .12), rgba(84, 4, 148, .16));
}

.mega-cta strong { display: block; color: var(--text); font-size: .98rem; }
.mega-cta span { display: block; color: var(--muted); font-size: .84rem; margin-top: 2px; }

/* --- Duas chamadas na navbar: especialista (enterprise) e agente (PME) ---
   O design system nasceu com UM botão aqui, então `.nav-cta` recebeu altura,
   padding e font-size como se fosse o próprio botão (height: 38px lá em cima,
   height: 48px na regra de 1024px). Com dois botões dentro, essa altura fixa
   espremia o contêiner: os botões transbordavam e o verde subia por cima do
   último item do menu no celular. Aqui `.nav-cta` volta a ser só contêiner. */
.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  height: auto;
  padding: 0;
  font-size: inherit;
}

.nav-cta .btn { white-space: nowrap; }

@media (max-width: 1200px) {
  .nav-cta .btn { padding: 10px 14px; font-size: .86rem; }
}

@media (max-width: 1024px) {
  .nav-cta {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: auto;
    padding: 0;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--stroke);
  }

  .nav-cta .btn {
    width: 100%;
    height: auto;
    min-height: 52px;
    justify-content: center;
    font-size: .95rem;
    padding: 14px 18px;
  }
}

/* ==========================================================================
   CORREÇÕES DE RESPONSIVIDADE E TOQUE (revisão pós-build)
   ========================================================================== */

/* Alvos de toque da barra utilitária: 44px é o mínimo em telas de dedo.
   A barra precisa crescer junto, senão ela mesma impede o alvo. */
@media (max-width: 1024px) {
  :root { --util-h: 48px; }

  .utility-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 6px;
  }

  .lang-switch a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
  }
}

/* A barra utilitária tem quatro coisas (idioma + três links) e não cabe em
   tela de celular: o conteúdo vazava para fora dos dois lados. Como o `html`
   está com `overflow-x: clip`, o vazamento ficava invisível para o scroll —
   e o visitante via "PT" e "Área do Cliente" cortados.
   Abaixo de 900px sobram os dois itens que só existem aqui: o seletor de
   idioma e a área do cliente. O WhatsApp continua no ícone flutuante, e
   "Seja Revendedor" continua no rodapé e na página de contato. */
@media (max-width: 900px) {
  .utility-inner {
    justify-content: flex-end;
    gap: 8px;
  }

  .utility-tagline { display: none; }

  .utility-links {
    gap: 8px;
    min-width: 0;
  }

  /* Sobra só o último link (Área do Cliente). Não dá para mirar pelo destino:
     "Seja Revendedor" aponta para contato.html em pt e contact.html em en. */
  .utility-links > a:not(:last-of-type) {
    display: none;
  }

  .utility-links > a:last-of-type {
    max-width: 52vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Rótulo de botão longo (há alguns com 50 caracteres) estourava a tela em
   380px porque .btn nunca relaxava o nowrap. No mobile o botão já ocupa a
   largura toda, então pode quebrar em duas linhas. */
@media (max-width: 600px) {
  .btn {
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }
}

@media (max-width: 380px) {
  :root { --util-h: 46px; }

  .utility-links a { font-size: .72rem; padding: 0 4px; }
  .lang-switch a { padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .card:hover,
  .step:hover,
  .bento-item:hover,
  .press-item:hover,
  .product-card:hover,
  .industry-card:hover,
  .track:hover { transform: none; }

  .btn:hover .btn-arrow,
  .card--link:hover::after,
  .mega-link:hover::after,
  .product-card__link:hover::after { transform: none; }

  .mega-panel,
  .nav-menu,
  .toast { transition-duration: 1ms; }
}

/* contraste alto: bordas param de ser sugestão */
@media (prefers-contrast: more) {
  :root {
    --stroke: rgba(197, 176, 228, .3);
    --stroke-strong: rgba(197, 176, 228, .5);
    --muted: #d9c9f2;
  }

  .navbar { background-color: rgba(13, 5, 36, .98); }
}

/* impressão: o site vira documento */
@media print {
  .utility-bar,
  .navbar,
  .menu-toggle,
  .page-nav,
  .toast,
  .cta-band,
  .site-footer { display: none; }

  body {
    background-image: none;
    background-color: #fff;
    color: #111;
  }

  main { padding-top: 0; }

  h1, h2, h3, h4, strong { color: #000; }

  .card,
  .step,
  .track,
  .compare-col,
  .product-card {
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: none;
  }

  .media-frame::before,
  .media-frame::after { display: none; }

  .faq-answer { display: block; }
}


/* =====================================================================
   22. PONTES DE ATRIBUTO
   O JS enxerga atributos, não classes. Estas regras dão o LAYOUT mínimo
   para os hooks do contrato funcionarem mesmo sem a classe irmã.
   (Animação e duplicação de faixa continuam em motion.css / halai.js.)
   ===================================================================== */
[data-marquee] {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

[data-page-nav] { scrollbar-width: none; }
[data-page-nav]::-webkit-scrollbar { display: none; }

/* contadores não podem "pular" largura enquanto sobem */
[data-count] { font-variant-numeric: tabular-nums; }


/* =====================================================================
   23. MOCKUPS DA INTERFACE DO APP (OMEGA)
   Telas do produto desenhadas em HTML/CSS puro — sem imagem, sem
   screenshot, sem biblioteca. São ILUSTRAÇÕES: nada aqui é interativo,
   o markup usa <span>/<div> e o texto de verdade fica ao redor da peça
   (título, parágrafo e .media-note descrevem o que a tela mostra).
   Como as páginas não podem escrever style="", toda medida variável
   (altura de barra, largura de trilho) vem de classe utilitária .h-NN.
   ===================================================================== */

/* --- tokens locais desta seção (não mexem em nada que já existe) --- */
:root {
  --app-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --app-serif: Georgia, 'Times New Roman', serif;
  --app-surface: #140a24;      /* fundo da janela */
  --app-surface-2: #1b1030;    /* cartões dentro da janela */
  --app-surface-3: #0a0518;    /* consoles e poços */
  --app-line: rgba(197, 176, 228, .14);
  --app-line-2: rgba(197, 176, 228, .26);
}


/* ---------------------------------------------------------------------
   23.1 MOLDURA DE APLICAÇÃO — a janela que embrulha qualquer tela
   --------------------------------------------------------------------- */
.app-shot {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background-color: var(--app-surface);
  box-shadow: var(--shadow-lg), var(--inner-light);
  isolation: isolate;
}

/* barra de título: três bolinhas + nome do módulo + selo opcional */
.app-shot__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--app-line);
  background-color: rgba(255, 255, 255, .04);
}

.app-shot__dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.app-shot__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(197, 176, 228, .28);
}

.app-shot__dots span:nth-child(1) { background-color: rgba(239, 68, 68, .55); }
.app-shot__dots span:nth-child(2) { background-color: rgba(251, 191, 36, .55); }
.app-shot__dots span:nth-child(3) { background-color: rgba(34, 197, 94, .5); }

.app-shot__title {
  min-width: 0;
  color: var(--text-soft);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-shot__tag {
  margin-left: auto;
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--app-line-2);
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.app-shot__body {
  padding: 18px;
  background-image:
    radial-gradient(680px 380px at 12% -10%, rgba(8, 11, 239, .16), transparent 62%),
    radial-gradient(560px 320px at 96% 0%, rgba(84, 4, 148, .16), transparent 60%);
}

/* corpo sem respiro: para chat e console que já têm o próprio padding */
.app-shot__body--flat { padding: 0; }

/* janela alta: a tela pede altura (console, chat, documento) */
.app-shot--tall .app-shot__body {
  min-height: 460px;
}

/* pilha de telas: uma peça atrás da outra na mesma coluna */
.app-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}


/* ---------------------------------------------------------------------
   23.2 CROMO DO APP — menu horizontal, coluna lateral, migalha
   --------------------------------------------------------------------- */
.app-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  margin-bottom: 16px;
}

.app-nav::-webkit-scrollbar { display: none; }

.app-nav__item {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}

.app-nav__item--active {
  border-color: var(--stroke-live);
  background-color: rgba(129, 140, 248, .18);
  color: #e0e7ff;
}

/* coluna lateral estreita */
.app-side {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--app-line);
  background-color: rgba(255, 255, 255, .03);
}

.app-side__group {
  padding: 10px 8px 4px;
  color: var(--muted);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
}

.app-side__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  border-left: 2px solid transparent;
  color: var(--text-soft);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.35;
}

.app-side__item--active {
  border-left-color: var(--accent);
  background-color: rgba(129, 140, 248, .14);
  color: var(--text);
  font-weight: 700;
}

.app-side__item span { display: block; }

.app-side__sub {
  display: block;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 500;
}

/* migalha de navegação dentro da tela */
.app-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 600;
}

.app-crumb__item + .app-crumb__item::before {
  content: "›";
  margin-right: 6px;
  opacity: .6;
}

.app-crumb__item--current { color: var(--text); }

/* lateral + conteúdo lado a lado */
.app-split {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.app-split--wide { grid-template-columns: 250px minmax(0, 1fr); }


/* ---------------------------------------------------------------------
   23.3 CABEÇALHO DE MÓDULO, BARRA DE FILTROS E BOTÕES FALSOS
   Botões são <span>: enfeite, nunca alvo de clique.
   --------------------------------------------------------------------- */
.app-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.app-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--accent);
  font-size: .8rem;
  line-height: 1;
}

.app-ico svg { width: 100%; height: 100%; fill: currentColor; }

.app-head__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--stroke-live);
  background-color: rgba(129, 140, 248, .16);
  color: #c7d2fe;
}

.app-head__text { display: block; min-width: 0; }

.app-head__title {
  display: block;
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
}

.app-head__sub {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
}

.app-head__action { margin-left: auto; flex-shrink: 0; }

.app-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

/* campo de busca desenhado (não é <input>) */
.app-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 190px;
  min-width: 0;
  padding: 8px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--app-line-2);
  background-color: rgba(255, 255, 255, .04);
  color: var(--muted);
  font-size: .8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-search--big {
  flex-basis: 100%;
  padding: 14px 20px;
  font-size: .92rem;
  box-shadow: 0 18px 40px -26px rgba(129, 140, 248, .8);
}

/* select desenhado, com a setinha em ::after */
.app-select {
  position: relative;
  flex-shrink: 0;
  padding: 8px 30px 8px 13px;
  border-radius: 9px;
  border: 1px solid var(--app-line-2);
  background-color: rgba(255, 255, 255, .04);
  color: var(--text-soft);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}

.app-select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
}

.app-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.app-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--app-line);
  background-color: rgba(255, 255, 255, .04);
  color: var(--muted);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}

.app-filter--active {
  border-color: var(--stroke-live);
  background-color: rgba(129, 140, 248, .2);
  color: #e0e7ff;
}

.app-filter__count {
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, .1);
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
}

.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 9px;
  border: 1px solid var(--app-line-2);
  background-color: rgba(255, 255, 255, .05);
  color: var(--text-soft);
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}

.app-btn--primary {
  border-color: transparent;
  background-image: linear-gradient(90deg, #6366f1, #4f46e5);
  color: #fff;
  box-shadow: var(--glow-accent);
}

.app-btn--ghost {
  border-color: var(--app-line);
  background-color: transparent;
  color: var(--muted);
}

.app-btn--danger {
  border-color: rgba(239, 68, 68, .45);
  background-color: rgba(239, 68, 68, .12);
  color: #fca5a5;
}

.app-btn--round {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
}

.app-btn-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* avatar circular do agente/squad/contato */
.app-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(99, 102, 241, .55);
  background-image: var(--gradient);
  color: #fff;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.app-avatar--sm { width: 32px; height: 32px; font-size: .74rem; border-width: 1px; }

/* abas do editor */
.app-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--app-line);
  margin-bottom: 16px;
}

.app-tabs::-webkit-scrollbar { display: none; }

.app-tab {
  flex-shrink: 0;
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}

.app-tab--active {
  border-bottom-color: #6366f1;
  background-color: rgba(99, 102, 241, .1);
  color: var(--text);
}

/* estado vazio */
.app-empty {
  padding: 34px 20px;
  border-radius: 12px;
  border: 1px dashed var(--app-line-2);
  color: var(--muted);
  font-size: .82rem;
  text-align: center;
}

.app-empty__ico {
  display: block;
  margin: 0 auto 10px;
  width: 34px;
  height: 34px;
  color: rgba(197, 176, 228, .4);
}

/* legenda curta abaixo da janela (irmã de .media-note) */
.app-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.app-note--left { text-align: left; }


/* ---------------------------------------------------------------------
   23.4 LISTA / TABELA DE DADOS — vai dentro de .table-wrap
   --------------------------------------------------------------------- */
.app-table {
  min-width: 460px;
  font-variant-numeric: tabular-nums;
}

.app-table th,
.app-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--app-line);
  font-size: .78rem;
  text-align: left;
  vertical-align: middle;
}

.app-table th {
  background-color: rgba(255, 255, 255, .04);
  color: var(--muted);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.app-table td { color: var(--text-soft); }
.app-table td strong { color: var(--text); font-weight: 700; }
.app-table tbody tr:last-child td { border-bottom: 0; }

/* célula numérica: à direita e em largura fixa de dígito */
.app-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* célula em fonte mono (id, telefone, horário) */
.app-table__mono {
  font-family: var(--app-mono);
  font-size: .72rem;
  letter-spacing: -.01em;
}

.app-table tfoot td {
  border-top: 1px solid var(--app-line-2);
  border-bottom: 0;
  color: var(--text);
  font-weight: 700;
}

.app-table--compact th,
.app-table--compact td { padding: 7px 10px; font-size: .74rem; }

/* poço com rolagem própria quando a lista é longa */
.app-scroll {
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
}


/* ---------------------------------------------------------------------
   23.5 ESTADOS — selo de status e faixa de execução
   --st guarda a cor do estado; os modificadores só trocam essa variável.
   --------------------------------------------------------------------- */
.app-badge {
  --st: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--st) 40%, transparent);
  background-color: color-mix(in srgb, var(--st) 14%, transparent);
  color: var(--st);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.5;
  white-space: nowrap;
}

/* fallback para navegador sem color-mix */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .app-badge {
    border-color: var(--app-line-2);
    background-color: rgba(255, 255, 255, .06);
  }
}

.app-badge::before {
  content: "";
  position: relative;
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: currentColor;
}

.app-badge--ok   { --st: #4ade80; }
.app-badge--run  { --st: #7dd3fc; }
.app-badge--warn { --st: #fbbf24; }
.app-badge--off  { --st: #a8a29e; }
.app-badge--stop { --st: #f87171; }

/* o azul "em execução" ganha o ponto que pulsa */
.app-badge--run::before { animation: app-ping 1.8s var(--ease-io) infinite; }

@keyframes app-ping {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70%  { box-shadow: 0 0 0 7px transparent; opacity: .65; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

/* ponto solto que pulsa (ao lado de um nome, num cartão) */
.app-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--success);
}

.app-dot--live { animation: app-ping 1.8s var(--ease-io) infinite; }
.app-dot--warn { background-color: var(--warning); }
.app-dot--off  { background-color: #a8a29e; }

/* faixa de aviso dentro do cartão (execução em curso, guardião, takeover) */
.app-strip {
  --st: var(--accent);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--st);
  background-color: rgba(255, 255, 255, .05);
  font-size: .76rem;
  line-height: 1.4;
}

.app-strip--live { --st: #fbbf24; background-color: rgba(251, 191, 36, .1); }
.app-strip--warn { --st: #f87171; background-color: rgba(239, 68, 68, .1); }
.app-strip--info { --st: #7dd3fc; background-color: rgba(125, 211, 252, .1); }

.app-strip__title {
  color: var(--text);
  font-weight: 700;
}

.app-strip__meta {
  color: var(--muted);
  font-size: .72rem;
}

.app-strip__end { margin-left: auto; }

.app-strip__log {
  flex-basis: 100%;
  font-family: var(--app-mono);
  font-size: .68rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ---------------------------------------------------------------------
   23.6 KANBAN E CARTÕES
   --------------------------------------------------------------------- */
.app-kanban {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 8px;
}

.app-col {
  --col-c: var(--accent);
  flex: 1 0 200px;
  min-width: 200px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--app-line);
  background-color: rgba(255, 255, 255, .03);
}

.app-col--todo { --col-c: #a8a29e; }
.app-col--live { --col-c: #4ade80; }
.app-col--hold { --col-c: #fbbf24; }
.app-col--done { --col-c: #7dd3fc; }

.app-col__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  border-top: 3px solid var(--col-c);
}

.app-col__name {
  color: var(--text);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.app-col__count {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, .1);
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.app-col__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.app-col__empty {
  padding: 20px 10px;
  border-radius: 8px;
  border: 1px dashed var(--app-line);
  color: rgba(197, 176, 228, .5);
  font-size: .72rem;
  text-align: center;
}

/* cartão de campanha / contato / squad */
.app-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--app-line);
  background-color: var(--app-surface-2);
  box-shadow: var(--shadow-sm);
}

.app-card > * { padding-left: 12px; padding-right: 12px; }
.app-card > :first-child { padding-top: 12px; }
.app-card > :last-child { padding-bottom: 12px; }

/* selo do Guardião: faixa de largura total colada no topo */
.app-card__flag {
  --st: #fbbf24;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
  padding-bottom: 6px;
  background-color: color-mix(in srgb, var(--st) 16%, transparent);
  color: var(--st);
  font-size: .68rem;
  font-weight: 700;
}

.app-card__flag--stop { --st: #f87171; }
.app-card__flag--info { --st: #7dd3fc; }

.app-card__title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.35;
}

.app-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.4;
}

.app-card__line {
  display: block;
  color: var(--text-soft);
  font-size: .75rem;
  line-height: 1.45;
}

.app-card__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 9px;
  padding-bottom: 9px;
  border-top: 1px solid var(--app-line);
  background-color: rgba(0, 0, 0, .2);
  color: var(--muted);
  font-size: .7rem;
}

.app-card__foot .app-btn-row { margin-left: auto; }

/* etiqueta miúda do cartão */
.app-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--app-line-2);
  color: var(--muted);
  font-size: .66rem;
  font-weight: 600;
  white-space: nowrap;
}

/* grade de cartões (console de squads, agentes, CRM) */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

/* quatro micro-itens de informação dentro do cartão */
.app-runinfo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  font-size: .7rem;
  color: var(--muted);
}

.app-runinfo__item {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.app-runinfo__item strong {
  color: var(--text-soft);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------------------
   23.7 CONSOLE DE EXECUÇÃO — o log carimbado da rodada
   --------------------------------------------------------------------- */
.app-run {
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--app-line);
  background-color: var(--app-surface-3);
  font-family: var(--app-mono);
  font-size: .72rem;
  line-height: 1.55;
}

.app-run__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--app-line);
  background-color: rgba(255, 255, 255, .04);
  color: var(--text);
  font-size: .72rem;
  font-weight: 700;
}

.app-run__head .app-badge { font-family: var(--font); }

/* "Rodada 3 de 20" */
.app-run__round {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stroke-live);
  background-color: rgba(129, 140, 248, .14);
  color: #c7d2fe;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.app-run__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.app-run__line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 2px 0;
  color: var(--text-soft);
}

/* coluna de horário, largura fixa para as mensagens alinharem */
.app-run__time {
  flex-shrink: 0;
  width: 54px;
  color: rgba(197, 176, 228, .55);
  font-variant-numeric: tabular-nums;
}

.app-run__msg { min-width: 0; }

.app-run__msg b {
  color: var(--text);
  font-weight: 700;
}

/* variações de linha */
.app-run__line--tool .app-run__msg { color: #c7d2fe; }

.app-run__line--tool .app-run__msg::before {
  content: "→ ";
  color: var(--accent);
}

.app-run__line--think .app-run__msg {
  color: rgba(197, 176, 228, .7);
  font-style: italic;
}

.app-run__line--ok .app-run__msg { color: #86efac; }
.app-run__line--ok .app-run__msg::before { content: "✓ "; }

.app-run__line--warn .app-run__msg { color: #fde68a; }
.app-run__line--warn .app-run__msg::before { content: "! "; }

.app-run__line--err .app-run__msg { color: #fca5a5; }
.app-run__line--err .app-run__msg::before { content: "× "; }

/* cursor piscando no fim do log */
.app-run__caret {
  display: inline-block;
  width: 7px;
  height: 1em;
  vertical-align: -2px;
  background-color: var(--accent);
  animation: app-caret 1.1s steps(2, start) infinite;
}

@keyframes app-caret {
  50% { opacity: 0; }
}

.app-run__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--app-line);
  background-color: rgba(255, 255, 255, .03);
  color: var(--muted);
  font-size: .68rem;
}

/* par de linhas A2A / subagente: seta de ida e de volta */
.app-a2a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--app-line);
  background-color: rgba(255, 255, 255, .03);
  font-size: .74rem;
}

.app-a2a__line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;          /* sem isto a linha não quebra e a etiqueta do fim
                               era cortada pela moldura em telas de 360px */
  gap: 4px 8px;
  min-width: 0;
  color: var(--text-soft);
  line-height: 1.45;
}

.app-a2a__line > * {
  min-width: 0;
}

.app-a2a__line--out::before { content: "→"; color: var(--accent); }
.app-a2a__line--in::before  { content: "←"; color: #4ade80; }

.app-a2a__who {
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}

.app-a2a__tools {
  font-family: var(--app-mono);
  font-size: .68rem;
  color: var(--muted);
}


/* ---------------------------------------------------------------------
   23.8 CHAT DO PRODUTO — só o que falta ao .chat/.bubble que já existem
   --------------------------------------------------------------------- */
.app-chat-split {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

/* dentro do split o mockup de conversa ocupa a coluna inteira */
.app-chat-split .chat {
  max-width: none;
  margin: 0;
}

.app-chat-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--app-line);
  background-color: rgba(255, 255, 255, .04);
}

.app-chat-side__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 10px;
  border-bottom: 1px solid var(--app-line);
  color: var(--text);
  font-size: .8rem;
  font-weight: 800;
}

.app-chat-side__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
}

.app-chat-side__item--active {
  border-color: var(--stroke-live);
  background-color: rgba(129, 140, 248, .14);
}

.app-chat-side__name {
  min-width: 0;
  color: var(--text);
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-chat-side__time {
  color: var(--muted);
  font-size: .66rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.app-chat-side__snippet {
  min-width: 0;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-chat-side__badge {
  align-self: center;
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background-color: #22c55e;
  color: #05331c;
  font-size: .64rem;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* faixa de takeover: pessoa assumiu, bot pausado */
.app-takeover {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 10px 13px;
  border-radius: 10px;
  border: 1px solid rgba(251, 191, 36, .35);
  background-color: rgba(251, 191, 36, .12);
  color: #fde68a;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.4;
}

.app-takeover__who {
  color: #fff;
  font-weight: 800;
}

.app-takeover__end { margin-left: auto; }

/* balão de documento publicado (aparece no chat e no relatório) */
.app-file {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px;
  border-radius: 10px;
  border: 1px solid var(--app-line-2);
  background-color: rgba(255, 255, 255, .05);
}

.app-file__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 54px;
  border-radius: 4px;
  border: 1px solid var(--app-line-2);
  background-image: linear-gradient(180deg, #f5f7f9 0 38%, #e4e9ee 38% 100%);
  color: #6b7280;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .06em;
}

.app-file__text { display: block; min-width: 0; }

.app-file__name {
  display: block;
  color: var(--text);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.35;
}

.app-file__meta {
  display: block;
  color: var(--muted);
  font-size: .7rem;
}

.app-file__cta {
  display: block;
  margin-top: 3px;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
}


/* ---------------------------------------------------------------------
   23.9 GRÁFICOS EM CSS/SVG
   Altura de barra e largura de trilho vêm SEMPRE de .h-NN (a página não
   pode escrever style=""). A classe pode ir na peça ou no pai — --h é
   herdado. Sem classe, o padrão é 50%.
   --------------------------------------------------------------------- */
.h-5   { --h: 5%; }
.h-10  { --h: 10%; }
.h-15  { --h: 15%; }
.h-20  { --h: 20%; }
.h-25  { --h: 25%; }
.h-30  { --h: 30%; }
.h-35  { --h: 35%; }
.h-40  { --h: 40%; }
.h-45  { --h: 45%; }
.h-50  { --h: 50%; }
.h-55  { --h: 55%; }
.h-60  { --h: 60%; }
.h-65  { --h: 65%; }
.h-70  { --h: 70%; }
.h-75  { --h: 75%; }
.h-80  { --h: 80%; }
.h-85  { --h: 85%; }
.h-90  { --h: 90%; }
.h-95  { --h: 95%; }
.h-100 { --h: 100%; }

.app-chart {
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--app-line);
  background-color: rgba(255, 255, 255, .03);
}

.app-chart__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.app-chart__title {
  color: var(--text);
  font-size: .82rem;
  font-weight: 700;
}

.app-chart__hint {
  margin-left: auto;
  color: var(--muted);
  font-size: .7rem;
}

/* --- barras verticais --- */
.app-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 150px;
  padding-top: 4px;
  border-bottom: 1px solid var(--app-line-2);
}

.app-bar {
  --bar-c: #6366f1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
}

.app-bar--brand { --bar-c: #6366f1; }
.app-bar--ok    { --bar-c: #22c55e; }
.app-bar--warn  { --bar-c: #fbbf24; }
.app-bar--stop  { --bar-c: #ef4444; }
.app-bar--soft  { --bar-c: rgba(197, 176, 228, .3); }

.app-bar__fill {
  display: block;
  height: var(--h, 50%);
  border-radius: 4px 4px 0 0;
  background-image: linear-gradient(180deg, var(--bar-c), color-mix(in srgb, var(--bar-c) 45%, transparent));
  background-color: var(--bar-c);
}

.app-bar__label {
  display: block;
  padding-top: 6px;
  color: var(--muted);
  font-size: .62rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-bar__value {
  display: block;
  padding-bottom: 4px;
  color: var(--text-soft);
  font-size: .62rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- trilho horizontal: funil, termômetro de humor, cota --- */
.app-meters {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.app-meter {
  --st: #6366f1;
  display: grid;
  grid-template-columns: minmax(90px, 130px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.app-meter--ok   { --st: #22c55e; }
.app-meter--warn { --st: #fbbf24; }
.app-meter--stop { --st: #ef4444; }
.app-meter--info { --st: #7dd3fc; }

.app-meter__label {
  min-width: 0;
  color: var(--text-soft);
  font-size: .74rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-meter__track {
  display: block;
  height: 8px;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.app-meter__fill {
  display: block;
  width: var(--h, 50%);
  height: 100%;
  border-radius: var(--radius-pill);
  background-color: var(--st);
}

.app-meter__value {
  color: var(--muted);
  font-family: var(--app-mono);
  font-size: .7rem;
  text-align: right;
  white-space: nowrap;
}

/* --- legenda de cores --- */
.app-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 12px;
  color: var(--muted);
  font-size: .7rem;
}

.app-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.app-legend__dot {
  --st: #6366f1;
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 3px;
  background-color: var(--st);
}

.app-legend__dot--ok   { --st: #22c55e; }
.app-legend__dot--run  { --st: #7dd3fc; }
.app-legend__dot--warn { --st: #fbbf24; }
.app-legend__dot--stop { --st: #ef4444; }
.app-legend__dot--off  { --st: #a8a29e; }

/* --- sparkline em SVG inline --- */
.app-spark {
  display: block;
  width: 100%;
  height: 56px;
  overflow: visible;
}

.app-spark__area { fill: rgba(99, 102, 241, .18); stroke: none; }

.app-spark__line {
  fill: none;
  stroke: #818cf8;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.app-spark__grid {
  stroke: rgba(197, 176, 228, .14);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.app-spark__dot { fill: #c7d2fe; }


/* ---------------------------------------------------------------------
   23.10 CONFIGURAÇÃO DE AGENTE — pares, interruptor, chips, slider
   --------------------------------------------------------------------- */
.app-fields {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: 10px;
  border: 1px solid var(--app-line);
  overflow: hidden;
  background-color: var(--app-line);
}

.app-field {
  display: grid;
  grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
  gap: 4px 14px;
  align-items: center;
  padding: 10px 13px;
  background-color: var(--app-surface-2);
}

.app-field__label {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.app-field__value {
  min-width: 0;
  color: var(--text-soft);
  font-size: .8rem;
  line-height: 1.5;
}

.app-field__value strong { color: var(--text); }

.app-field__hint {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.5;
}

/* bloco de texto longo (prompt do sistema) */
.app-textarea {
  display: block;
  padding: 11px 13px;
  border-radius: 8px;
  border: 1px solid var(--app-line-2);
  background-color: var(--app-surface-3);
  color: var(--text-soft);
  font-size: .74rem;
  line-height: 1.6;
  white-space: pre-line;
}

/* interruptor puramente visual */
.app-toggle {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 34px;
  height: 19px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--app-line-2);
  background-color: rgba(255, 255, 255, .1);
  vertical-align: middle;
}

.app-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .7);
  transition: transform var(--t) var(--ease);
}

.app-toggle--on {
  border-color: rgba(34, 197, 94, .5);
  background-color: rgba(34, 197, 94, .45);
}

.app-toggle--on::after {
  background-color: #fff;
  transform: translateX(15px);
}

.app-toggle-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  color: var(--text-soft);
  font-size: .76rem;
  font-weight: 600;
}

.app-toggle-row__hint {
  flex-basis: 100%;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 400;
  line-height: 1.5;
}

/* chips de ferramentas ligadas */
.app-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.app-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--app-line-2);
  background-color: rgba(255, 255, 255, .05);
  color: var(--text-soft);
  font-size: .7rem;
  font-weight: 600;
  white-space: nowrap;
}

.app-chip--on {
  border-color: rgba(34, 197, 94, .4);
  background-color: rgba(34, 197, 94, .12);
  color: #86efac;
}

.app-chip--off {
  border-color: var(--app-line);
  background-color: transparent;
  color: rgba(197, 176, 228, .55);
}

.app-chip--mono { font-family: var(--app-mono); font-size: .68rem; }

/* slider de temperatura (visual; a posição vem de .h-NN) */
.app-slider {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.app-slider__track {
  display: block;
  position: relative;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, .1);
}

.app-slider__fill {
  display: block;
  width: var(--h, 50%);
  height: 100%;
  border-radius: var(--radius-pill);
  background-image: linear-gradient(90deg, #6366f1, #a855f7);
}

.app-slider__knob {
  position: absolute;
  top: 50%;
  left: var(--h, 50%);
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 2px solid #c7d2fe;
  background-color: var(--bg-1);
}

.app-slider__ends {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: .68rem;
}


/* ---------------------------------------------------------------------
   23.11 DOCUMENTO PUBLICADO — a folha clara sobre o fundo escuro
   Paleta editorial própria; vive dentro de .app-shot__body--flat.
   --------------------------------------------------------------------- */
.app-doc {
  --doc-paper: #f5f7f9;
  --doc-surface: #ffffff;
  --doc-ink: #0f151d;
  --doc-ink-soft: #4a5766;
  --doc-line: #d8dfe6;
  --doc-up: #0e6b59;
  --doc-down: #a02d22;
  --doc-alert: #8a6410;
  padding: 26px 24px 34px;
  background-color: var(--doc-paper);
  color: var(--doc-ink);
  font-size: .82rem;
  line-height: 1.6;
}

.app-doc__kicker {
  display: block;
  color: var(--doc-ink-soft);
  font-family: var(--app-mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.app-doc__title {
  margin-top: 6px;
  color: var(--doc-ink);
  font-family: var(--app-serif);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.2;
}

.app-doc__lede {
  display: block;
  max-width: 62ch;
  margin-top: 8px;
  color: var(--doc-ink-soft);
  font-size: .88rem;
  line-height: 1.55;
}

.app-doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 14px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--doc-ink);
  color: var(--doc-ink-soft);
  font-family: var(--app-mono);
  font-size: .66rem;
}

.app-doc__meta-item strong { color: var(--doc-ink); font-weight: 700; }

.app-doc__sec {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--doc-line);
}

.app-doc__sec-num {
  color: var(--doc-ink-soft);
  font-family: var(--app-mono);
  font-size: .7rem;
  font-weight: 700;
}

.app-doc__sec-title {
  color: var(--doc-ink);
  font-family: var(--app-serif);
  font-size: 1.02rem;
  font-weight: 700;
}

.app-doc__prose {
  display: block;
  max-width: 62ch;
  color: var(--doc-ink-soft);
}

.app-doc__prose strong { color: var(--doc-ink); }

/* cartões de número */
.app-doc__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin: 14px 0;
  border: 1px solid var(--doc-line);
  background-color: var(--doc-line);
}

.app-doc__stat {
  --doc-c: var(--doc-ink);
  padding: 12px 13px;
  background-color: var(--doc-surface);
}

.app-doc__stat--up    { --doc-c: var(--doc-up); }
.app-doc__stat--down  { --doc-c: var(--doc-down); }
.app-doc__stat--alert { --doc-c: var(--doc-alert); }

.app-doc__stat-label {
  display: block;
  color: var(--doc-ink-soft);
  font-family: var(--app-mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.app-doc__stat-value {
  display: block;
  margin-top: 4px;
  color: var(--doc-c);
  font-family: var(--app-serif);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.app-doc__stat-sub {
  display: block;
  color: var(--doc-ink-soft);
  font-size: .68rem;
  line-height: 1.4;
}

/* tabela da folha clara */
.app-doc__table {
  width: 100%;
  margin: 12px 0;
  border: 1px solid var(--doc-line);
  background-color: var(--doc-surface);
  font-variant-numeric: tabular-nums;
}

.app-doc__table th,
.app-doc__table td {
  padding: 8px 11px;
  border-bottom: 1px solid var(--doc-line);
  font-size: .74rem;
  text-align: left;
}

.app-doc__table th {
  background-color: #eef2f6;
  color: var(--doc-ink-soft);
  font-family: var(--app-mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.app-doc__table td { color: var(--doc-ink-soft); }
.app-doc__table td strong { color: var(--doc-ink); }
.app-doc__table .app-table__num { text-align: right; }
.app-doc__table tbody tr:last-child td { border-bottom: 0; }

.app-doc__table tfoot td {
  border-top: 1px solid var(--doc-ink);
  border-bottom: 0;
  color: var(--doc-ink);
  font-weight: 700;
}

/* selo de estado dentro da folha */
.app-doc__seal {
  --doc-c: var(--doc-ink-soft);
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--doc-c);
  border-radius: 3px;
  color: var(--doc-c);
  font-family: var(--app-mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.app-doc__seal--up    { --doc-c: var(--doc-up); }
.app-doc__seal--down  { --doc-c: var(--doc-down); }
.app-doc__seal--alert { --doc-c: var(--doc-alert); }

/* bloco de destaque e legenda de figura */
.app-doc__note {
  margin: 14px 0;
  padding: 12px 14px;
  border-left: 3px solid var(--doc-ink);
  background-color: var(--doc-surface);
}

.app-doc__note strong { display: block; color: var(--doc-ink); }

.app-doc__cap {
  display: block;
  margin-top: 6px;
  color: var(--doc-ink-soft);
  font-family: var(--app-mono);
  font-size: .62rem;
}

/* o .table-wrap escuro do site não pode vazar sobre a folha clara */
.app-doc .table-wrap {
  border-color: var(--doc-line);
  background-color: transparent;
}

/* funil dentro da folha: reaproveita .app-meter com a paleta clara */
.app-doc .app-meter__track { background-color: #e6ecf1; }
.app-doc .app-meter__label { color: var(--doc-ink); }
.app-doc .app-meter__value { color: var(--doc-ink-soft); }
.app-doc .app-meter        { --st: #2c4a7c; }
.app-doc .app-meter--ok    { --st: var(--doc-up); }
.app-doc .app-meter--warn  { --st: var(--doc-alert); }
.app-doc .app-meter--stop  { --st: var(--doc-down); }


/* ---------------------------------------------------------------------
   23.12 RESPONSIVO DOS MOCKUPS
   ≤900px: tudo vira coluna única ou trilho rolável.
   ≤600px / ≤380px: fonte menor na tabela e no console; nada estoura.
   O reflow de celular propriamente dito está em 23.13, logo abaixo.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .app-split,
  .app-split--wide,
  .app-chat-split { grid-template-columns: minmax(0, 1fr); }

  /* a coluna lateral vira trilho horizontal */
  .app-split .app-side,
  .app-split--wide .app-side {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .app-split .app-side__group { display: none; }
  .app-split .app-side__item { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; }
  .app-split .app-side__item--active { border-bottom-color: var(--accent); }

  .app-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .app-shot--tall .app-shot__body { min-height: 0; }
}

@media (max-width: 600px) {
  .app-shot__body { padding: 14px; }
  .app-shot__title { font-size: .74rem; }
  .app-shot__tag { display: none; }

  .app-grid { grid-template-columns: minmax(0, 1fr); }

  .app-table th,
  .app-table td { padding: 7px 9px; font-size: .72rem; }
  .app-table th { font-size: .58rem; }
  .app-table { min-width: 380px; }

  .app-run { font-size: .66rem; }
  .app-run__time { width: 44px; }
  .app-run__body { padding: 10px; max-height: 260px; }

  .app-col { flex: 0 0 76%; min-width: 76%; }

  .app-field {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .app-meter { grid-template-columns: minmax(0, 1fr) auto; }
  .app-meter__track { grid-column: 1 / -1; grid-row: 2; }

  .app-bars { height: 120px; }
  .app-bar__label { font-size: .56rem; }

  .app-doc { padding: 20px 16px 26px; }
  .app-doc__title { font-size: 1.28rem; }
  .app-doc__stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

@media (max-width: 380px) {
  .app-shot__body { padding: 11px; }
  .app-head { flex-wrap: wrap; }
  .app-head__action { margin-left: 0; }
  .app-search { flex-basis: 100%; }
  .app-col { flex: 0 0 86%; min-width: 86%; }
  .app-bars { height: 100px; gap: 5px; }
  .app-runinfo { grid-template-columns: minmax(0, 1fr); }
  .app-doc__title { font-size: 1.14rem; }
}


/* ---------------------------------------------------------------------
   23.13 CELULAR — as telas do Omega reflowam em vez de rolar para o lado
   Substitui a saída provisória (`.app-shot__body { overflow-x: auto }` +
   `> * { min-width: 600px }`), que mantinha a largura de desktop e obrigava
   o visitante a arrastar a tela. Aqui cada família reorganiza o próprio
   conteúdo, como o app faz num telefone: coluna única, réguas de chips e
   cartões no lugar de linhas de tabela.
   A rolagem horizontal SÓ sobrevive onde ela é o gesto certo — Kanban e
   réguas de chips — e sempre com scroll-snap.
   Referência de aperto: 360px de viewport.
   --------------------------------------------------------------------- */
@media (max-width: 760px) {

  /* --- 1. a moldura -------------------------------------------------- */
  .app-shot { border-radius: 10px; }

  .app-shot__bar {
    gap: 8px;
    padding: 8px 11px;
  }

  .app-shot__dots { gap: 5px; }
  .app-shot__dots span { width: 8px; height: 8px; }

  /* o nome do módulo cede espaço por ellipsis; o selo continua visível */
  .app-shot__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .76rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-shot__tag {
    display: inline-block;
    max-width: 42%;
    padding: 3px 7px;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* --app-pad é a fonte única do respiro do corpo: as réguas que sangram
     até a borda da moldura leem essa mesma medida. */
  .app-shot__body {
    --app-pad: 13px;
    padding: var(--app-pad);
    overflow: visible;
  }

  .app-shot__body--flat {
    --app-pad: 0px;
    padding: 0;
  }

  /* o antigo piso de 600px sai daqui */
  .app-shot__body > * { min-width: 0; }

  /* Rede de segurança do reflow: item de flex/grid nasce com min-width:auto,
     ou seja, se recusa a encolher abaixo do próprio conteúdo — era o que
     fazia um cartão de 350px furar uma moldura de 295px e ser cortado pelo
     `overflow: hidden`. Vai em :where() para valer zero de especificidade:
     qualquer regra de classe (largura de avatar, de balão de áudio) continua
     mandando mais que ela. */
  :where(.app-shot__body) * { min-width: 0; }

  .app-shot--tall .app-shot__body { min-height: 0; }

  /* --- 2. réguas roláveis de chips ------------------------------------
     Um só corpo de regras para tudo que vira trilho: nav, abas, filtros,
     coluna lateral, lista de conversas e Kanban. Máscara de fade nas duas
     bordas para o corte de conteúdo virar sinal de "tem mais para o lado". */
  .app-nav,
  .app-tabs,
  .app-filters,
  .app-kanban,
  .app-split .app-side,
  .app-chat-split .app-chat-side {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }

  .app-nav::-webkit-scrollbar,
  .app-tabs::-webkit-scrollbar,
  .app-filters::-webkit-scrollbar,
  .app-kanban::-webkit-scrollbar,
  .app-split .app-side::-webkit-scrollbar,
  .app-chat-split .app-chat-side::-webkit-scrollbar { display: none; }

  /* quando a régua é filha direta do corpo, ela sangra até a borda da
     moldura — é o que faz o trilho parecer o do app, e não um bloco solto.
     Só filhas diretas: dentro de cartão a sangria estouraria a borda. */
  .app-shot__body > .app-nav,
  .app-shot__body > .app-tabs,
  .app-shot__body > .app-kanban,
  .app-shot__body > .app-split > .app-side,
  .app-shot__body > .app-chat-split > .app-chat-side,
  .app-shot__body > .app-toolbar > .app-filters {
    margin-inline: calc(var(--app-pad, 13px) * -1);
    padding-inline: var(--app-pad, 13px);
    scroll-padding-inline: var(--app-pad, 13px);
  }

  /* menu horizontal */
  .app-nav {
    gap: 6px;
    padding-bottom: 8px;
    margin-bottom: 13px;
  }

  .app-nav__item {
    scroll-snap-align: start;
    padding: 7px 12px;
    font-size: .76rem;
  }

  /* abas do editor */
  .app-tabs { margin-bottom: 13px; }

  .app-tab {
    scroll-snap-align: start;
    padding: 9px 12px;
    font-size: .76rem;
  }

  /* barra de ferramentas: continua quebrando em linhas; o que vira trilho
     é a fita de filtros, que ganha a linha inteira. */
  .app-toolbar {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 13px;
  }

  .app-toolbar > .app-filters { flex: 1 1 100%; }

  .app-filters {
    gap: 6px;
    padding-block: 2px;
  }

  .app-filter {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .app-search {
    flex: 1 1 100%;
    min-width: 0;
  }

  .app-search--big {
    padding: 11px 15px;
    font-size: .84rem;
  }

  .app-select { flex: 0 0 auto; }

  /* --- 3. duas colunas viram uma --------------------------------------
     .app-split, .app-split--wide e .app-chat-split já são coluna única a
     partir de 900px; aqui a lateral deixa de ser uma lista vertical e vira
     a régua de seções do topo. */
  .app-split,
  .app-split--wide,
  .app-chat-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .app-split .app-side {
    gap: 6px;
    padding-block: 0 10px;
    border: 0;
    border-bottom: 1px solid var(--app-line);
    border-radius: 0;
    background-color: transparent;
  }

  /* o rótulo do grupo volta a aparecer (≤900px o escondia): no trilho ele
     separa os blocos de itens sem ocupar altura. */
  .app-split .app-side__group {
    display: block;
    flex: 0 0 auto;
    align-self: center;
    scroll-snap-align: start;
    padding: 0 2px;
    font-size: .7rem;
    letter-spacing: .08em;
    white-space: nowrap;
  }

  .app-split .app-side__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 7px 12px;
    border: 1px solid var(--app-line);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .04);
    font-size: .76rem;
    line-height: 1.3;
    white-space: nowrap;
  }

  .app-split .app-side__item--active {
    border-color: var(--stroke-live);
    background-color: rgba(129, 140, 248, .18);
  }

  .app-side__sub { font-size: .7rem; }

  /* --- 4. tabela vira lista de cartões --------------------------------
     Uma tabela de 4 a 6 colunas não cabe em 360px. Como o HTML não muda e
     os <td> não têm data-rotulo, não há como imprimir o rótulo de cada
     valor; então o cabeçalho sai e cada <tr> vira um cartão: a primeira
     célula é o título (linha inteira) e as demais formam a faixa de
     valores embaixo, com a última empurrada para a direita — que é onde
     mora o selo de estado. */
  /* só o poço que embrulha uma tabela que sabe virar cartão perde a
     rolagem própria; se um dia entrar uma .table comum aqui dentro, ela
     continua rolando no poço em vez de ser cortada pela moldura */
  .app-shot .table-wrap:has(.app-table, .app-doc__table) {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
    background-color: transparent;
  }

  .app-shot .app-table,
  .app-shot .app-table thead,
  .app-shot .app-table tbody,
  .app-shot .app-table tfoot,
  .app-shot .app-table tr,
  .app-shot .app-table th,
  .app-shot .app-table td { display: block; }

  .app-shot .app-table {
    width: 100%;
    min-width: 0;
    border-collapse: separate;
  }

  .app-shot .app-table thead { display: none; }

  /* Agora que cada <td> carrega data-rotulo (702 células, geradas a partir do
     <th> da própria tabela), o cartão do celular pode dizer de onde vem cada
     número. Antes lia-se "47 / via agenda / 18" sem saber que 18 eram
     disparos. A regra é aditiva: onde não houver o atributo, o chip continua
     como estava. */
  .app-shot .app-table td[data-rotulo]::before {
    content: attr(data-rotulo);
    display: block;
    margin-bottom: 1px;
    color: var(--muted);
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .78;
  }

  /* a primeira célula é o título do cartão: não precisa de rótulo em cima */
  .app-shot .app-table td[data-rotulo]:first-child::before {
    display: none;
  }

  .app-shot .app-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 8px;
    margin-bottom: 7px;
    padding: 10px 11px;
    border: 1px solid var(--app-line);
    border-radius: 9px;
    background-color: rgba(255, 255, 255, .035);
  }

  .app-shot .app-table th,
  .app-shot .app-table td,
  .app-shot .app-table--compact th,
  .app-shot .app-table--compact td {
    padding: 0;
    border-bottom: 0;
    font-size: .73rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  /* célula vazia (acontece no tfoot) não vira chip fantasma */
  .app-shot .app-table td:empty { display: none; }

  .app-shot .app-table td:first-child {
    flex: 1 1 100%;
    color: var(--text);
    font-size: .8rem;
    font-weight: 600;
  }

  /* os valores viram chips */
  .app-shot .app-table :is(tbody, tfoot) td:not(:first-child) {
    /* 0 1 auto (e não 0 0 auto): a célula de frase longa precisa encolher
       para caber na linha do cartão, senão sai pela borda da moldura */
    flex: 0 1 auto;
    min-width: 0;
    padding: 2px 8px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, .07);
    color: var(--text-soft);
  }

  /* a célula que já traz selo, etiqueta ou botão não ganha o chip por fora
     (o :has é progressivo: sem suporte, o selo só fica dentro de um chip) */
  .app-shot .app-table :is(tbody, tfoot) td:not(:first-child):has(:is(.app-badge, .app-doc__seal, .app-tag, .app-btn, .app-chip)) {
    padding: 0;
    background-color: transparent;
  }

  .app-shot .app-table td:last-child:not(:first-child) {
    margin-left: auto;
    text-align: right;
  }

  .app-shot .app-table td.app-table__num {
    text-align: right;
    font-weight: 700;
  }

  .app-shot .app-table tfoot tr {
    border-color: var(--stroke-live);
    background-color: rgba(129, 140, 248, .12);
  }

  .app-shot .app-table tfoot td { border-top: 0; }

  .app-scroll { max-height: 300px; }

  /* --- 5. Kanban: trilho com parada por coluna ------------------------
     Aqui a rolagem lateral FICA — é o gesto do quadro. A coluna ocupa 82%
     da largura útil para a próxima aparecer pela beirada. */
  .app-kanban {
    gap: 10px;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
  }

  .app-col {
    flex: 0 0 82%;
    min-width: 82%;
    scroll-snap-align: start;
    padding: 11px;
  }

  .app-col__name { font-size: .76rem; }
  .app-col__empty { padding: 16px 8px; }

  /* --- 6. grade de cartões: uma coluna -------------------------------- */
  .app-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .app-card { min-width: 0; }
  .app-card__title { font-size: .84rem; }
  .app-card__meta,
  .app-card__foot { font-size: .72rem; }
  .app-card__foot .app-btn-row { margin-left: 0; }

  /* --- 7. chat: a lista de conversas vira faixa de duas linhas -------- */
  .app-chat-split .app-chat-side {
    gap: 8px;
    padding-block: 0 10px;
    border: 0;
    border-bottom: 1px solid var(--app-line);
    border-radius: 0;
    background-color: transparent;
  }

  .app-chat-side__head {
    flex: 0 0 auto;
    align-self: center;
    scroll-snap-align: start;
    padding: 0 10px 0 0;
    border-bottom: 0;
    border-right: 1px solid var(--app-line);
    font-size: .74rem;
    white-space: nowrap;
  }

  .app-chat-split .app-chat-side__item {
    flex: 0 0 66%;
    scroll-snap-align: start;
    padding: 8px 10px;
    border-color: var(--app-line);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .04);
  }

  .app-chat-split .app-chat-side__item--active {
    border-color: var(--stroke-live);
    background-color: rgba(129, 140, 248, .16);
  }

  .app-chat-side__time,
  .app-chat-side__badge { font-size: .7rem; }

  /* --- 8. console de execução: quebra, não rola ----------------------- */
  .app-run { font-size: .7rem; }

  .app-run__head { padding: 8px 10px; font-size: .7rem; }
  .app-run__round { margin-left: 0; }

  .app-run__body {
    padding: 10px;
    max-height: 240px;
  }

  .app-run__line {
    flex-wrap: wrap;
    gap: 0 8px;
  }

  /* o carimbo de hora não tem largura fixa no celular: em 42px o
     `overflow-wrap: anywhere` quebrava "06:00:02" no meio */
  .app-run__time {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .app-run__msg {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .app-run__foot { padding: 8px 10px; font-size: .7rem; }

  .app-a2a { font-size: .73rem; }

  .app-a2a__line { overflow-wrap: anywhere; }

  .app-a2a__who { white-space: normal; }

  .app-a2a__tools { font-size: .7rem; }

  /* --- 9. cabeçalho, faixas e pares rótulo/valor ---------------------- */
  .app-head {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 13px;
  }

  .app-head__ico { width: 34px; height: 34px; }
  .app-head__text { flex: 1 1 140px; }
  .app-head__title { font-size: .95rem; }
  .app-head__sub { font-size: .75rem; }

  .app-head__action {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .app-strip,
  .app-takeover,
  .app-a2a,
  .app-fields,
  .app-toggle-row,
  .app-card,
  .app-head { min-width: 0; }

  .app-strip__end,
  .app-takeover__end { margin-left: 0; }

  /* a linha de log da faixa deixa de ser uma linha só com ellipsis: em
     nowrap o min-content dela é a frase inteira, e o Chrome esticava o
     cartão até 350px dentro de uma moldura de 295px — o resto sumia no
     `overflow: hidden`. Quebrando em duas linhas, cabe e aparece inteira. */
  .app-strip__log {
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
  }

  .app-field {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    padding: 9px 11px;
  }

  .app-field__label { font-size: .71rem; }

  .app-field__value {
    font-size: .78rem;
    overflow-wrap: anywhere;
  }

  .app-field__hint { font-size: .71rem; }

  .app-textarea {
    padding: 10px 11px;
    font-size: .72rem;
  }

  .app-runinfo { gap: 5px 8px; }

  .app-file__thumb { width: 38px; height: 48px; font-size: .7rem; }
  .app-file__name { font-size: .78rem; }
  .app-file__meta,
  .app-file__cta { font-size: .71rem; }

  .app-empty { padding: 26px 16px; }

  /* selo, etiqueta e chip fora de régua podem quebrar em duas linhas: um
     selo de frase inteira ("Enquanto o estoque não estiver...") em nowrap
     furava a moldura. Nas réguas o nowrap continua — é o que as faz rolar. */
  .app-badge,
  .app-tag,
  .app-chip,
  .app-doc__seal {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* piso de legibilidade: nenhum micro-rótulo abaixo de ~11px no celular */
  .app-badge,
  .app-tag,
  .app-chip,
  .app-filter__count,
  .app-col__count,
  .app-card__flag,
  .app-strip__meta,
  .app-strip__log,
  .app-slider__ends,
  .app-run__round,
  .app-shot .bubble-time,
  .app-shot__tag { font-size: .7rem; }

  /* --- 10. gráficos: barras mais finas, tudo cabe ---------------------- */
  .app-chart { padding: 11px; }

  .app-chart__head { margin-bottom: 10px; }
  .app-chart__title { font-size: .8rem; }
  .app-chart__hint { margin-left: 0; font-size: .71rem; }

  /* de flex para grade: `minmax(0, 1fr)` deixa a coluna encolher abaixo do
     conteúdo, coisa que o item de flex se recusa a fazer. É o que permite
     manter o rótulo em uma linha (nowrap + ellipsis) sem que o min-content
     dele empurre o gráfico — e todas as barras cabem, mais finas. */
  .app-bars {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: end;
    height: 132px;
    gap: 4px;
  }

  .app-bar__fill { border-radius: 3px 3px 0 0; }

  .app-bar__label,
  .app-bar__value { font-size: .7rem; }

  .app-bar__label {
    padding-top: 4px;
    overflow-wrap: normal;
  }

  .app-meters { gap: 8px; }

  .app-meter {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 8px;
  }

  .app-meter__label {
    white-space: normal;
    font-size: .73rem;
  }

  .app-meter__track {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .app-meter__value { font-size: .71rem; }

  .app-legend {
    flex-wrap: wrap;
    gap: 5px 12px;
    font-size: .71rem;
  }

  .app-chips { flex-wrap: wrap; }
  .app-chip { font-size: .71rem; }
  .app-chip--mono { font-size: .7rem; }

  /* --- 11. documento publicado: folha em coluna única ------------------ */
  .app-doc {
    padding: 18px 14px 24px;
    font-size: .8rem;
  }

  .app-doc__title { font-size: 1.2rem; }

  .app-doc__lede,
  .app-doc__prose { max-width: none; }

  .app-doc__lede { font-size: .82rem; }

  .app-doc__meta {
    gap: 4px 14px;
    font-size: .7rem;
  }

  .app-doc__sec { margin: 18px 0 9px; }
  .app-doc__sec-title { font-size: .96rem; }
  .app-doc__sec-num { font-size: .71rem; }

  .app-doc__stats { grid-template-columns: minmax(0, 1fr); }

  .app-doc__stat-label { font-size: .7rem; letter-spacing: .08em; }
  .app-doc__stat-value { font-size: 1.3rem; }
  .app-doc__stat-sub { font-size: .71rem; }

  .app-doc__kicker { font-size: .7rem; letter-spacing: .1em; }
  .app-doc__cap { font-size: .7rem; }
  .app-doc__seal { font-size: .7rem; }

  /* a tabela da folha clara segue a mesma regra de cartão da escura */
  .app-doc .table-wrap { overflow-x: visible; }

  .app-shot .app-doc__table,
  .app-shot .app-doc__table thead,
  .app-shot .app-doc__table tbody,
  .app-shot .app-doc__table tfoot,
  .app-shot .app-doc__table tr,
  .app-shot .app-doc__table th,
  .app-shot .app-doc__table td { display: block; }

  .app-shot .app-doc__table {
    width: 100%;
    min-width: 0;
    border: 0;
    border-collapse: separate;
    background-color: transparent;
  }

  .app-shot .app-doc__table thead { display: none; }

  .app-shot .app-doc__table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 8px;
    margin-bottom: 7px;
    padding: 9px 11px;
    border: 1px solid var(--doc-line);
    border-radius: 6px;
    background-color: var(--doc-surface);
  }

  .app-shot .app-doc__table th,
  .app-shot .app-doc__table td {
    padding: 0;
    border-bottom: 0;
    font-size: .73rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .app-shot .app-doc__table td:empty { display: none; }

  .app-shot .app-doc__table td:first-child {
    flex: 1 1 100%;
    color: var(--doc-ink);
    font-size: .78rem;
    font-weight: 600;
  }

  .app-shot .app-doc__table :is(tbody, tfoot) td:not(:first-child) {
    flex: 0 1 auto;
    min-width: 0;
    padding: 2px 8px;
    border-radius: 4px;
    background-color: #eef2f6;
    color: var(--doc-ink-soft);
  }

  .app-shot .app-doc__table :is(tbody, tfoot) td:not(:first-child):has(:is(.app-doc__seal, .app-badge, .app-tag)) {
    padding: 0;
    background-color: transparent;
  }

  .app-shot .app-doc__table td:last-child:not(:first-child) {
    margin-left: auto;
    text-align: right;
  }

  .app-shot .app-doc__table tfoot tr {
    border-color: var(--doc-ink);
    background-color: #eef2f6;
  }

  .app-shot .app-doc__table tfoot td { border-top: 0; }

  .app-doc__note { padding: 11px 12px; }
}


/* Ajuste fino do telefone estreito (360px de referência). */
@media (max-width: 420px) {
  .app-shot { border-radius: 8px; }

  .app-shot__bar { gap: 7px; padding: 7px 9px; }
  .app-shot__dots span { width: 7px; height: 7px; }
  .app-shot__title { font-size: .73rem; }
  .app-shot__tag { max-width: 34%; padding: 2px 6px; }

  .app-shot__body { --app-pad: 11px; padding: var(--app-pad); }
  .app-shot__body--flat { --app-pad: 0px; padding: 0; }

  .app-nav__item,
  .app-tab,
  .app-split .app-side__item { font-size: .74rem; }

  .app-nav__item { padding: 6px 11px; }

  /* a coluna do Kanban cresce, mas a beirada da próxima continua à vista */
  .app-col {
    flex: 0 0 84%;
    min-width: 84%;
    padding: 10px;
  }

  .app-chat-split .app-chat-side__item { flex: 0 0 74%; }

  .app-shot .app-table tr,
  .app-shot .app-doc__table tr {
    gap: 4px 7px;
    padding: 9px 10px;
  }

  .app-shot .app-table td:first-child { font-size: .78rem; }

  .app-shot .app-table tbody td:not(:first-child),
  .app-shot .app-doc__table tbody td:not(:first-child) { padding: 2px 7px; }

  .app-run__body { max-height: 210px; }

  .app-runinfo { grid-template-columns: minmax(0, 1fr); }

  .app-head__ico { width: 30px; height: 30px; }
  .app-avatar { width: 38px; height: 38px; }
  .app-avatar--sm { width: 28px; height: 28px; }

  .app-file__thumb { width: 34px; height: 44px; }

  .app-empty { padding: 22px 14px; }

  .app-bars { height: 112px; gap: 3px; }

  .app-chart { padding: 10px; }

  .app-doc { padding: 15px 12px 20px; }
  .app-doc__title { font-size: 1.08rem; }
  .app-doc__stat-value { font-size: 1.2rem; }
}


/* movimento reduzido: os pulsos e o cursor param, e as réguas de celular
   deixam de "puxar" o dedo para a próxima parada */
@media (prefers-reduced-motion: reduce) {
  .app-badge--run::before,
  .app-dot--live,
  .app-run__caret { animation: none; }

  .app-toggle::after { transition: none; }

  .app-nav,
  .app-tabs,
  .app-filters,
  .app-kanban,
  .app-split .app-side,
  .app-chat-split .app-chat-side {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }

  .app-nav__item,
  .app-tab,
  .app-filter,
  .app-col,
  .app-split .app-side__item,
  .app-chat-side__item { scroll-snap-align: none; }
}


/* =====================================================================
   ===== BLOG DE NOTÍCIAS E SALA DE MÍDIA =====
   24.1 Índice do blog — grade, cartão de notícia, filtros de editoria
   24.2 Página do artigo — progresso, herói, cabeçalho, corpo, navegação
   24.3 Sala de mídia — vídeos, modal, nota de uso, materiais
   24.4 Cartão da patente com imagem
   24.5 Responsivo (1200 / 1024 / 900 / 600 / 380) e preferências

   Herda as regras da casa: profundidade = borda que acende + glow + luz
   interna; arte azul sempre em moldura com véu de marca (mix-blend-mode:
   color); zoom é transform:scale, nunca width; progresso é scaleX.
   ===================================================================== */

/* ---------------------------------------------------------------------
   24.1 ÍNDICE DO BLOG
   O mínimo da grade é min(320px, 100%): a 320px a coluna encolhe junto e
   nada estoura a janela.
   --------------------------------------------------------------------- */
.post-grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: stretch;
}

/* o cartão inteiro é um <a> */
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background-color: var(--panel);
  box-shadow: var(--inner-light);
  color: var(--text-soft);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease), background-color var(--t) var(--ease);
}

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .post-card { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}

.post-card:hover,
.post-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--stroke-live);
  background-color: var(--panel-2);
  box-shadow: var(--shadow), var(--glow-brand), var(--inner-light);
  color: var(--text-soft);
}

/* cartão-link inteiro com foco visível (raio próprio pede offset menor) */
.post-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.post-card__media {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-1);
  isolation: isolate;
}

.post-card__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transform: scale(1);
  transition: transform var(--t-slow) var(--ease);
}

.post-card:hover .post-card__img,
.post-card:focus-visible .post-card__img { transform: scale(1.05); }

/* véu de marca + escurecimento no pé da foto, para a etiqueta ter contraste */
.post-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(13, 5, 36, .72), transparent 46%),
    linear-gradient(150deg, rgba(8, 11, 239, .22), rgba(84, 4, 148, .26));
}

/* etiqueta de editoria sobre a imagem */
.post-card__tag {
  position: absolute;
  z-index: 2;
  left: 14px;
  bottom: 12px;
  max-width: calc(100% - 28px);
  overflow: hidden;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stroke-strong);
  background-color: rgba(13, 5, 36, .68);
  color: var(--accent);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.5;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 22px;
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* separador "·" entre data e tempo de leitura */
.post-card__meta > * + *::before { content: "·"; margin-right: 8px; color: var(--stroke-strong); }

.post-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  color: var(--text);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.35;
  transition: color var(--t) var(--ease);
}

.post-card:hover .post-card__title,
.post-card:focus-visible .post-card__title { color: var(--accent); }

.post-card__resumo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.6;
}

.post-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  color: var(--accent);
  font-size: .9rem;
  font-weight: 700;
}

.post-card__link::after { content: "→"; line-height: 1; transition: transform var(--t) var(--ease); }

.post-card:hover .post-card__link::after,
.post-card:focus-visible .post-card__link::after { transform: translateX(5px); }

/* matéria de capa: duas colunas na grade e imagem ao lado do texto.
   Só ≥901px — abaixo disso o span forçaria uma 2ª coluna na auto-fit. */
@media (min-width: 901px) {
  .post-card--destaque {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }

  .post-card--destaque .post-card__media { height: 100%; }
  .post-card--destaque .post-card__img { height: 100%; min-height: 300px; aspect-ratio: auto; }

  .post-card--destaque .post-card__body {
    justify-content: center;
    gap: 12px;
    padding: clamp(24px, 3vw, 36px);
  }

  .post-card--destaque .post-card__title {
    font-size: clamp(1.3rem, 2.2vw, 1.75rem);
    line-height: 1.25;
  }

  .post-card--destaque .post-card__resumo { font-size: 1rem; }
}

/* chips de editoria: o visual é daqui, o filtro é do JS por [data-editoria] */
.post-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(24px, 3.5vw, 38px);
}

.post-filtro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stroke);
  background-color: rgba(255, 255, 255, .04);
  color: var(--muted);
  font-size: .84rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease),
              background-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.post-filtro:hover {
  border-color: var(--stroke-strong);
  background-color: var(--panel-2);
  color: var(--text);
}

.post-filtro:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.post-filtro--ativo {
  border-color: var(--stroke-live);
  background-image: var(--gradient);
  color: #fff;
  box-shadow: var(--glow-brand), var(--inner-light);
}

.post-filtro--ativo:hover { color: #fff; }

/* contador opcional dentro do chip */
.post-filtro__conta { font-size: .74rem; font-weight: 800; opacity: .7; }

/* nenhuma notícia nesta editoria */
.post-vazio {
  grid-column: 1 / -1;
  padding: clamp(32px, 5vw, 56px) 24px;
  border-radius: var(--radius);
  border: 1px dashed var(--stroke-strong);
  background-color: rgba(255, 255, 255, .03);
  color: var(--muted);
  text-align: center;
}

.post-vazio strong { display: block; margin-bottom: 6px; color: var(--text); font-size: 1.05rem; }

/* ---------------------------------------------------------------------
   24.2 PÁGINA DO ARTIGO
   --------------------------------------------------------------------- */

/* barra fina fixa abaixo do cromo; o JS escreve --p entre 0 e 1 */
.progresso-leitura {
  position: fixed;
  z-index: 120;
  top: var(--chrome-h);
  left: 0;
  width: 100%;
  height: 3px;
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  background-image: var(--gradient);
  box-shadow: 0 0 14px rgba(129, 140, 248, .5);
  pointer-events: none;
  will-change: transform;
  transition: transform 90ms linear;
}

/* herói: mesma receita do .media-frame, porque a arte original é azul */
.artigo-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-bottom: clamp(24px, 3.5vw, 40px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke);
  background-color: var(--bg-1);
  box-shadow: var(--shadow-lg), var(--inner-light);
}

.artigo-hero img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

/* vinheta (mistura normal, por baixo do véu) */
.artigo-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 40%, transparent 52%, rgba(6, 2, 18, .58) 100%);
}

/* véu da marca: troca a matiz e preserva a luminância do texto embutido */
.artigo-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(8, 11, 239, .28), rgba(84, 4, 148, .34));
  mix-blend-mode: color;
}

.artigo-cabecalho { max-width: 760px; margin: 0 auto clamp(22px, 3vw, 34px); }

.artigo-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stroke-strong);
  background-color: rgba(129, 140, 248, .1);
  color: var(--accent);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.artigo-titulo {
  margin-top: 16px;
  color: var(--text);
  font-size: clamp(1.7rem, 4.2vw, 2.7rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.artigo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--stroke);
  color: var(--muted);
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
}

.artigo-meta__item { display: inline-flex; align-items: center; gap: 7px; }
.artigo-meta__item + .artigo-meta__item::before { content: "·"; color: var(--stroke-strong); }

/* "compartilhar" encostado à direita quando cabe */
.artigo-compartilhar { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }

.artigo-compartilhar__rotulo {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.artigo-compartilhar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--stroke);
  background-color: rgba(255, 255, 255, .04);
  color: var(--text-soft);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease),
              background-color var(--t) var(--ease), transform var(--t) var(--ease);
}

.artigo-compartilhar__btn svg { width: 16px; height: 16px; }

.artigo-compartilhar__btn:hover {
  transform: translateY(-2px);
  border-color: var(--stroke-live);
  background-color: rgba(129, 140, 248, .14);
  color: var(--text);
}

.artigo-compartilhar__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* corpo: coluna de leitura confortável */
.artigo {
  max-width: 760px;
  margin: 0 auto;
  color: var(--text-soft);
  font-size: 1.06rem;
  line-height: 1.75;
}

.artigo > * + * { margin-top: 20px; }
.artigo p { color: var(--text-soft); }

/* primeiro parágrafo: maior e mais claro */
.artigo-lead { color: var(--text); font-size: 1.18rem; font-weight: 500; line-height: 1.65; }

.artigo h2 {
  margin-top: 44px;
  color: var(--text);
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  font-weight: 800;
  line-height: 1.3;
}

.artigo h3 {
  margin-top: 32px;
  color: var(--text);
  font-size: clamp(1.08rem, 2vw, 1.24rem);
  font-weight: 700;
  line-height: 1.35;
}

.artigo ul { display: flex; flex-direction: column; gap: 10px; padding-left: 4px; }
.artigo li { position: relative; padding-left: 26px; color: var(--text-soft); }

.artigo ul li::before {
  content: "";
  position: absolute;
  top: .68em;
  left: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-image: var(--gradient);
}

.artigo strong { color: var(--text); font-weight: 700; }

.artigo a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(129, 140, 248, .45);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t) var(--ease), text-decoration-color var(--t) var(--ease);
}

.artigo a:hover { color: var(--text); text-decoration-color: var(--accent); }

/* barra da marca à esquerda da citação */
.artigo blockquote {
  padding: 4px 0 4px 22px;
  border-left: 3px solid transparent;
  border-image: var(--gradient) 1;
  color: var(--text);
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.6;
}

.artigo blockquote cite {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: .86rem;
  font-style: normal;
  font-weight: 700;
}

/* encerramento com chamada */
.artigo-fim {
  max-width: 760px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding: clamp(24px, 3.5vw, 36px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke-live);
  background-color: rgba(255, 255, 255, .04);
  background-image: linear-gradient(150deg, rgba(8, 11, 239, .18), rgba(84, 4, 148, .14));
  box-shadow: var(--inner-light);
  text-align: center;
}

.artigo-fim__titulo {
  color: var(--text);
  font-size: clamp(1.15rem, 2.4vw, 1.42rem);
  font-weight: 800;
  line-height: 1.3;
}

.artigo-fim__texto { margin-top: 10px; color: var(--text-soft); }
.artigo-fim .btn-row,
.artigo-fim > .btn { margin-top: 20px; }

/* anterior / próxima */
.artigo-nav {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
  margin: clamp(36px, 4.5vw, 56px) auto 0;
}

.artigo-nav__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 20px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background-color: rgba(255, 255, 255, .04);
  color: var(--text-soft);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease),
              background-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.artigo-nav__item:hover {
  transform: translateY(-3px);
  border-color: var(--stroke-live);
  background-color: var(--panel-2);
  box-shadow: var(--shadow-sm), var(--inner-light);
  color: var(--text-soft);
}

.artigo-nav__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.artigo-nav__dir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.artigo-nav__item--anterior .artigo-nav__dir::before {
  content: "←";
  transition: transform var(--t) var(--ease);
}

.artigo-nav__item--proxima { text-align: right; }
.artigo-nav__item--proxima .artigo-nav__dir { justify-content: flex-end; margin-left: auto; }

.artigo-nav__item--proxima .artigo-nav__dir::after {
  content: "→";
  transition: transform var(--t) var(--ease);
}

.artigo-nav__item--anterior:hover .artigo-nav__dir::before { transform: translateX(-4px); }
.artigo-nav__item--proxima:hover .artigo-nav__dir::after { transform: translateX(4px); }

.artigo-nav__titulo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--text);
  font-weight: 700;
  line-height: 1.4;
}

/* relacionadas: a grade é a .post-grid */
.artigo-relacionadas {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--stroke);
}

.artigo-relacionadas__titulo {
  margin-bottom: clamp(20px, 3vw, 30px);
  color: var(--text);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  font-weight: 800;
}

/* ---------------------------------------------------------------------
   24.3 SALA DE MÍDIA — vídeos, apresentações e materiais
   --------------------------------------------------------------------- */
.video-grid {
  display: grid;
  gap: clamp(18px, 2.6vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

/* trilha dos verticais (reels): colunas bem mais estreitas */
.video-grid--vertical {
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.video-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background-color: var(--panel);
  box-shadow: var(--inner-light);
  color: var(--text-soft);
  text-align: left;
  cursor: pointer;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease), background-color var(--t) var(--ease);
}

.video-card:hover {
  transform: translateY(-4px);
  border-color: var(--stroke-live);
  background-color: var(--panel-2);
  box-shadow: var(--shadow), var(--glow-brand), var(--inner-light);
}

.video-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* moldura do pôster — paisagem por padrão */
.video-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-color: var(--bg-1);
  isolation: isolate;
}

.video-card__poster {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform var(--t-slow) var(--ease);
}

.video-card:hover .video-card__poster { transform: scale(1.04); }

/* escurecimento sobre o pôster, para o play aparecer em qualquer foto */
.video-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(13, 5, 36, .7), transparent 52%),
    linear-gradient(160deg, rgba(8, 11, 239, .2), rgba(84, 4, 148, .22));
  transition: opacity var(--t) var(--ease);
}

.video-card:hover .video-card__media::after { opacity: .78; }

/* verticais */
.video-card--vertical .video-card__media { aspect-ratio: 9 / 16; }
.video-card--vertical .video-card__body { padding: 16px; gap: 6px; }
.video-card--vertical .video-card__title { font-size: .98rem; }
.video-card--vertical .video-card__desc { font-size: .86rem; }

/* botão de play em CSS: círculo com gradiente + triângulo de borda */
.video-card__play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background-image: var(--gradient);
  box-shadow: var(--glow-brand), 0 10px 30px rgba(0, 0, 0, .45);
  transform: translate(-50%, -50%) scale(1);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
  pointer-events: none;
}

.video-card__play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 18px solid #fff;
}

/* halo que aparece no hover */
.video-card__play::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(129, 140, 248, .45);
  opacity: 0;
  transform: scale(.85);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}

.video-card:hover .video-card__play,
.video-card:focus-visible .video-card__play {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: var(--glow-brand), 0 16px 40px rgba(0, 0, 0, .55);
}

.video-card:hover .video-card__play::after,
.video-card:focus-visible .video-card__play::after { opacity: 1; transform: scale(1); }

.video-card--vertical .video-card__play { width: 54px; height: 54px; }

.video-card--vertical .video-card__play::before {
  border-top-width: 9px;
  border-bottom-width: 9px;
  border-left-width: 15px;
}

/* duração no canto do pôster */
.video-card__dur {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  padding: 3px 9px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--stroke-strong);
  background-color: rgba(13, 5, 36, .78);
  color: var(--text);
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.video-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 20px;
}

.video-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
}

.video-card__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.6;
}

/* sobreposição de reprodução */
.video-modal {
  position: fixed;
  z-index: 400;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background-color: rgba(6, 2, 18, .82);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t) var(--ease), visibility 0s linear var(--t);
}

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .video-modal {
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
  }
}

.video-modal.aberto {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t) var(--ease), visibility 0s;
}

.video-modal__box {
  position: relative;
  width: 100%;
  max-width: 980px;
  max-height: 86vh;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke-live);
  background-color: var(--bg-1);
  box-shadow: var(--shadow-lg), var(--glow-brand);
  transform: translateY(14px) scale(.985);
  transition: transform var(--t-slow) var(--ease);
}

.video-modal.aberto .video-modal__box { transform: translateY(0) scale(1); }

/* caixa estreita para o vídeo vertical */
.video-modal__box--vertical { max-width: 420px; }

.video-modal__box video {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 86vh;
  aspect-ratio: 16 / 9;
  background-color: #000;
}

.video-modal__box--vertical video { aspect-ratio: 9 / 16; }

.video-modal__legenda { padding: 14px 20px 18px; color: var(--muted); font-size: .9rem; }
.video-modal__legenda strong { display: block; color: var(--text); font-size: 1rem; }


/* Título do vídeo dentro do modal — o JS escreve o texto ao abrir. */
.video-modal__titulo {
  margin: 0 0 12px;
  color: var(--text);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 700;
  line-height: 1.35;
  padding-right: 48px;
}
.video-modal__fechar {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--stroke-strong);
  background-color: rgba(13, 5, 36, .78);
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease),
              background-color var(--t) var(--ease);
}

.video-modal__fechar:hover {
  transform: rotate(90deg);
  border-color: var(--stroke-live);
  background-color: rgba(8, 11, 239, .38);
}

.video-modal__fechar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* condições de uso do material */
.midia-nota {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: clamp(20px, 3vw, 28px);
  border-radius: var(--radius);
  border: 1px solid var(--stroke-strong);
  background-color: rgba(255, 255, 255, .03);
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.65;
}

.midia-nota__icone {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--stroke-strong);
  background-color: rgba(129, 140, 248, .12);
  color: var(--accent);
  font-size: 1.15rem;
  line-height: 1;
}

.midia-nota__icone svg { width: 20px; height: 20px; }
.midia-nota__titulo { margin-bottom: 6px; color: var(--text); font-size: 1rem; font-weight: 700; }
.midia-nota ul { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.midia-nota li { position: relative; padding-left: 18px; }
.midia-nota li::before { content: "•"; position: absolute; left: 2px; color: var(--accent); }

/* materiais para baixar */
.download-list { display: flex; flex-direction: column; gap: 12px; }

.download-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background-color: rgba(255, 255, 255, .04);
  color: var(--text-soft);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease),
              background-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.download-item:hover {
  transform: translateY(-2px);
  border-color: var(--stroke-live);
  background-color: var(--panel-2);
  box-shadow: var(--shadow-sm), var(--inner-light);
  color: var(--text-soft);
}

.download-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.download-item__icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--stroke-strong);
  background-color: rgba(129, 140, 248, .12);
  color: var(--accent);
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.download-item__icone svg { width: 20px; height: 20px; }
.download-item__info { min-width: 0; }
.download-item__nome { color: var(--text); font-size: 1rem; font-weight: 700; line-height: 1.35; }

.download-item__meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

.download-item__meta > * + *::before { content: "·"; margin: 0 7px; color: var(--stroke-strong); }

.download-item__acao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: .86rem;
  font-weight: 700;
  white-space: nowrap;
}

.download-item__acao::after { content: "↓"; transition: transform var(--t) var(--ease); }
.download-item:hover .download-item__acao::after { transform: translateY(3px); }

/* ---------------------------------------------------------------------
   24.4 CARTÃO DA PATENTE COM IMAGEM
   Variação em duas colunas do .patent existente: a arte entra em moldura
   com véu de marca e ganha um selo sobreposto desenhado em CSS.
   --------------------------------------------------------------------- */
.patent--figura {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 44px);
  align-items: center;
}

/* imagem à direita */
.patent--figura-direita .patent__media { order: 2; }

.patent__media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius);
  border: 1px solid var(--stroke-strong);
  background-color: var(--bg-1);
  box-shadow: var(--shadow), var(--inner-light);
}

.patent__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.patent__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 42%, transparent 54%, rgba(6, 2, 18, .52) 100%);
}

.patent__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(8, 11, 239, .3), rgba(84, 4, 148, .32));
  mix-blend-mode: color;
}

/* selo circular sobreposto (USPTO · 2025), inteiro em CSS */
.patent__selo {
  position: absolute;
  z-index: 3;
  right: 16px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  padding: 6px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .3);
  background-color: rgba(13, 5, 36, .8);
  background-image: linear-gradient(150deg, rgba(8, 11, 239, .7), rgba(84, 4, 148, .68));
  box-shadow: var(--glow-brand), 0 10px 26px rgba(0, 0, 0, .45);
  color: #fff;
  text-align: center;
}

/* anel interno pontilhado */
.patent__selo::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .42);
}

.patent__selo-org {
  position: relative;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1.1;
  text-transform: uppercase;
}

.patent__selo-ano {
  position: relative;
  margin-top: 2px;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.1;
  opacity: .88;
  font-variant-numeric: tabular-nums;
}

.patent__texto { min-width: 0; }

/* nome/número da patente em destaque */
.patent__num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke-live);
  background-color: rgba(13, 5, 36, .55);
  color: var(--text);
  font-size: clamp(.95rem, 1.8vw, 1.1rem);
  font-weight: 800;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.patent__num span {
  color: var(--accent);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.patent--figura .patent-body { max-width: none; }
.patent--figura .patent-title { margin-top: 14px; }

/* ---------------------------------------------------------------------
   24.5 RESPONSIVO E PREFERÊNCIAS
   --------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .post-grid { gap: 22px; }
  .video-grid { gap: 20px; }
  .patent--figura { gap: 26px; }
  .patent__selo { width: 84px; height: 84px; }
}

@media (max-width: 1024px) {
  .post-card--destaque .post-card__img { min-height: 260px; }
  .post-card__body { padding: 20px; }
  .video-card__body { padding: 18px; }
  .artigo-hero img { aspect-ratio: 16 / 8; }
  .patent--figura { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  .patent__media img { aspect-ratio: 1 / 1; }
}

@media (max-width: 900px) {
  /* a matéria de capa volta a ser um cartão comum (ver 24.1) */
  .post-card--destaque { grid-column: auto; }

  .video-grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
  .video-grid--vertical { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
  .video-card__play { width: 58px; height: 58px; }

  /* sem elevação no toque: o hover fica "grudado" em tela sensível */
  .post-card:hover,
  .video-card:hover,
  .download-item:hover,
  .artigo-nav__item:hover { transform: none; }

  .artigo { font-size: 1.02rem; }
  .artigo-hero { border-radius: var(--radius); }
  .artigo-hero img { aspect-ratio: 16 / 9; }

  /* patente vira uma coluna, imagem sempre acima do texto */
  .patent--figura { grid-template-columns: minmax(0, 1fr); }
  .patent--figura-direita .patent__media { order: 0; }
  .patent__media img { aspect-ratio: 16 / 9; }
  .patent__selo { width: 78px; height: 78px; right: 14px; bottom: 14px; }
}

@media (max-width: 600px) {
  .post-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .post-card__body { padding: 18px; gap: 8px; }
  .post-card__title { font-size: 1.05rem; }
  .post-card__tag { left: 12px; bottom: 10px; font-size: .64rem; }

  /* os chips viram trilho rolável */
  .post-filtros {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .post-filtro { padding: 7px 14px; font-size: .8rem; }

  .artigo-meta { gap: 8px 10px; font-size: .8rem; }
  .artigo-compartilhar { width: 100%; margin-left: 0; }
  .artigo-lead { font-size: 1.08rem; }
  .artigo blockquote { padding-left: 16px; font-size: 1.04rem; }
  .artigo h2 { margin-top: 34px; }

  .artigo-nav { grid-template-columns: minmax(0, 1fr); }
  .artigo-nav__item--proxima { text-align: left; }
  .artigo-nav__item--proxima .artigo-nav__dir { justify-content: flex-start; margin-left: 0; }

  .video-grid,
  .video-grid--vertical { grid-template-columns: minmax(0, 1fr); }
  .video-card--vertical .video-card__media { aspect-ratio: 3 / 4; }
  .video-modal { padding: 12px; }
  .video-modal__box { max-height: 80vh; }
  .video-modal__legenda { padding: 12px 16px 16px; font-size: .86rem; }

  .midia-nota { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .download-item { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 16px; }
  .download-item__acao { grid-column: 1 / -1; }
  .patent--figura { gap: 20px; }
}

@media (max-width: 380px) {
  .post-card__body { padding: 16px; }
  .post-card__title { font-size: 1rem; }
  .post-card__resumo { font-size: .9rem; }
  .post-card__meta { font-size: .72rem; }

  .artigo { font-size: .99rem; line-height: 1.7; }
  .artigo-titulo { font-size: 1.5rem; }
  .artigo-lead { font-size: 1.02rem; }
  .artigo li { padding-left: 22px; }
  .artigo-fim { padding: 20px 16px; }
  .artigo-nav__item { padding: 16px; }

  .video-card__body { padding: 15px; }
  .video-card__play { width: 50px; height: 50px; }
  .video-card__dur { right: 9px; bottom: 9px; font-size: .68rem; }

  .midia-nota { padding: 18px 15px; font-size: .9rem; }
  .download-item__icone { width: 38px; height: 38px; font-size: .62rem; }
  .patent__selo { width: 66px; height: 66px; }
  .patent__selo-org { font-size: .62rem; }
  .patent__selo-ano { font-size: .6rem; }
  .patent__num { padding: 7px 12px; font-size: .92rem; }
}

/* movimento reduzido: nada desliza, cresce ou pulsa */
@media (prefers-reduced-motion: reduce) {
  .post-card,
  .post-card__img,
  .video-card,
  .video-card__poster,
  .video-card__play,
  .video-card__play::after,
  .download-item,
  .artigo-nav__item,
  .video-modal__box,
  .video-modal__fechar,
  .progresso-leitura { transition: none; }

  .post-card:hover,
  .video-card:hover,
  .download-item:hover,
  .artigo-nav__item:hover,
  .video-modal__fechar:hover,
  .video-modal__box { transform: none; }

  .post-card:hover .post-card__img,
  .video-card:hover .video-card__poster { transform: none; }

  .video-card:hover .video-card__play,
  .video-card:focus-visible .video-card__play { transform: translate(-50%, -50%); }

  .post-card:hover .post-card__link::after,
  .download-item:hover .download-item__acao::after,
  .artigo-nav__item--anterior:hover .artigo-nav__dir::before,
  .artigo-nav__item--proxima:hover .artigo-nav__dir::after { transform: none; }
}

/* mais contraste: bordas e textos secundários mais firmes */
@media (prefers-contrast: more) {
  .post-card,
  .video-card,
  .download-item,
  .artigo-nav__item,
  .midia-nota { border-color: var(--stroke-strong); }

  .post-card__resumo,
  .post-card__meta,
  .video-card__desc,
  .download-item__meta { color: var(--text-soft); }

  .artigo a { text-decoration-color: var(--accent); }
}

/* impressão: o artigo vira texto preto e o cromo some */
@media print {
  .progresso-leitura,
  .post-filtros,
  .video-modal,
  .video-card__play,
  .artigo-compartilhar { display: none; }

  .artigo,
  .artigo p,
  .artigo li,
  .artigo-titulo,
  .artigo h2,
  .artigo h3 { color: #000; }

  .post-card,
  .video-card,
  .download-item,
  .artigo-nav__item,
  .artigo-fim { border-color: #bbb; background-image: none; box-shadow: none; }

  .artigo-hero::before,
  .artigo-hero::after,
  .patent__media::before,
  .patent__media::after { display: none; }
}


/* =====================================================================
   24. TABELA DE DOCUMENTO LEGAL — .tabela-legal
   A seção 6 da política de privacidade é uma grade de quatro colunas
   (finalidade, dados, público, base legal). Numa coluna de leitura de
   760px isso já é apertado; em 390px é ilegível.

   Por isso a mesma solução usada nas telas do Omega: no celular cada
   linha vira um cartão e cada célula imprime o próprio rótulo a partir
   de data-rotulo. Nada é escondido — o conteúdo é legal e precisa estar
   inteiro, em qualquer largura.
   ===================================================================== */

.tabela-legal__caixa {
  margin: 22px 0 6px;
  overflow-x: auto;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: var(--panel-flat);
}

.tabela-legal {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: .92rem;
  line-height: 1.55;
}

.tabela-legal th {
  padding: 13px 16px;
  border-bottom: 1px solid var(--stroke);
  color: var(--text);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  vertical-align: bottom;
  background: var(--panel);
}

.tabela-legal td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--stroke);
  color: var(--text-soft);
  vertical-align: top;
}

.tabela-legal tbody tr:last-child td { border-bottom: 0; }

.tabela-legal__nota {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--stroke);
  color: var(--muted);
  font-size: .92rem;
}

/* --------------------------------------------------------- ATÉ 720px */
@media (max-width: 720px) {
  .tabela-legal__caixa {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .tabela-legal,
  .tabela-legal tbody,
  .tabela-legal tr,
  .tabela-legal td { display: block; width: auto; min-width: 0; }

  .tabela-legal thead { display: none; }

  .tabela-legal tbody tr {
    margin-bottom: 14px;
    border: 1px solid var(--stroke);
    border-radius: 14px;
    background: var(--panel-flat);
    overflow: hidden;
  }

  .tabela-legal tbody td { border-bottom: 1px solid var(--stroke); }
  .tabela-legal tbody tr td:last-child { border-bottom: 0; }

  .tabela-legal td[data-rotulo]::before {
    content: attr(data-rotulo);
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
}