/* INDUSIA: site institucional.
   Layout: faixas de largura total que alternam claro, superfície, marinho e uma faixa de realce
   para o diferencial; conteúdo em coluna de 1160px. Verde-água só onde pedimos ação ou destaque. */
:root {
  --fundo: #F4F6F9;
  --superficie: #FFFFFF;
  --tinta: #0F1A2B;
  --suave: #4A5872;
  --linha: #D9E0EA;
  --azul: #1F5FBF;
  --azul-claro: #E3ECFA;
  --realce: #2BC4B0;            /* verde-água: fundo de botões e faixas, sempre com texto marinho */
  --realce-forte: #1FA896;
  --realce-texto: #0B7A6E;     /* verde-água para texto sobre fundo claro */
  --realce-claro: #DCF5F1;
  --verde: #1E7A4C;
  --verde-claro: #DDF1E6;
  --erro: #B42318;
  --marinho: #0F1A2B;
  --marinho-2: #13233D;
  --marinho-tinta: #EEF3FA;
  --marinho-suave: #A7B6CD;
  --marinho-linha: #263A5E;
  --ceu: #5B9BFF;

  --f-logo: "Audiowide", "Space Grotesk", system-ui, sans-serif;
  --f-titulo: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-texto: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --t-1: .875rem; --t0: 1rem; --t1: 1.125rem; --t2: 1.375rem; --t3: 1.75rem; --t4: 2.375rem; --t5: 3.25rem;
  --largura: 1160px;
  --raio: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #0B1424; --superficie: #12203A; --tinta: #EEF3FA; --suave: #A7B6CD; --linha: #26395C;
    --azul: #7FB0FF; --azul-claro: #1A3358; --realce-texto: #5EE0CC; --realce-claro: #10332F;
    --verde: #6FD3A0; --verde-claro: #163A2A; --erro: #FF8A80;
    --marinho: #070E1A; --marinho-2: #0E1B31; --marinho-linha: #22365A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #0B1424; --superficie: #12203A; --tinta: #EEF3FA; --suave: #A7B6CD; --linha: #26395C;
  --azul: #7FB0FF; --azul-claro: #1A3358; --realce-texto: #5EE0CC; --realce-claro: #10332F;
  --verde: #6FD3A0; --verde-claro: #163A2A; --erro: #FF8A80;
  --marinho: #070E1A; --marinho-2: #0E1B31; --marinho-linha: #22365A;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: var(--f-texto); font-size: var(--t0); line-height: 1.6; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--marinho); }
h1, h2, h3, h4 { font-family: var(--f-titulo); line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
p, ul, ol, dl, dd, figure { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ceu); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--realce); color: #0F1A2B; padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.pular:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

.wrap { max-width: var(--largura); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.faixa { padding-block: clamp(56px, 8vw, 104px); }
.faixa-superficie { background: var(--superficie); border-block: 1px solid var(--linha); }
.faixa-marinho { background: linear-gradient(160deg, var(--marinho) 0%, var(--marinho-2) 100%); color: var(--marinho-tinta); }
.sobretitulo { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--azul); font-weight: 500; }
.faixa-marinho .sobretitulo { color: var(--ceu); }
.sobretitulo-realce, .faixa-marinho .sobretitulo-realce { color: var(--realce); }
.lead { font-size: var(--t1); color: var(--suave); max-width: 62ch; }
.faixa-marinho .lead { color: var(--marinho-suave); }
.cabeca-secao { display: grid; gap: 14px; margin-bottom: 44px; max-width: 760px; }
.cabeca-secao h2 { font-size: clamp(1.75rem, 3.4vw, var(--t4)); }
.cabeca-com-acao { max-width: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; }
.cabeca-com-acao > div { display: grid; gap: 14px; max-width: 760px; }
.subtitulo-secao { font-size: var(--t2); margin: 56px 0 24px; }
.nota { margin-top: 18px; font-size: var(--t-1); color: var(--suave); }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 var(--t-1)/1 var(--f-titulo); padding: 13px 20px; border-radius: 8px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-realce { background: var(--realce); color: #0F1A2B; box-shadow: 0 6px 18px -8px rgba(43, 196, 176, .8); }
.btn-realce:hover { background: #4FD6C3; }
.btn-contorno { border-color: var(--marinho-linha); color: var(--marinho-tinta); }
.btn-contorno:hover { border-color: var(--ceu); }
.btn-contorno-escuro { border-color: var(--linha); color: var(--tinta); background: var(--superficie); }
.btn-contorno-escuro:hover { border-color: var(--azul); }
.btn-grande { padding: 16px 24px; font-size: var(--t0); }
.btn-pequeno { padding: 10px 14px; }

/* Cabeçalho */
.topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--marinho); color: var(--marinho-tinta); border-bottom: 1px solid var(--marinho-linha); }
.topo-linha { display: flex; align-items: center; gap: 28px; padding-block: 12px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--marinho-tinta); }
.marca-simbolo { width: 30px; height: 31px; flex: none; }
.marca-texto b { display: block; font-family: var(--f-logo); font-weight: 400; font-size: 1.2rem; letter-spacing: .06em; line-height: 1.1; }
.marca-texto small { display: block; font-family: var(--f-titulo); font-size: .58rem; letter-spacing: .22em; color: var(--marinho-suave); }
.nav { display: flex; gap: 22px; margin-left: auto; font-size: var(--t-1); }
.nav a { text-decoration: none; color: var(--marinho-suave); padding-block: 6px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--marinho-tinta); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--realce); }
.nav-entrar { border-left: 1px solid var(--marinho-linha); padding-left: 22px; }
.topo-cta { padding: 11px 16px; }
.menu-botao { display: none; background: transparent; border: 1px solid var(--marinho-linha); color: var(--marinho-tinta); border-radius: 8px; padding: 8px; cursor: pointer; }
@media (max-width: 1000px) {
  .menu-botao { display: inline-flex; }
  .topo-cta { margin-left: auto; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--marinho); border-bottom: 1px solid var(--marinho-linha); padding: 8px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); }
  .nav.aberto { display: flex; }
  .nav a { padding: 12px 0; border-top: 1px solid var(--marinho-linha); font-size: var(--t0); }
  .nav-entrar { border-left: 0; padding-left: 0; }
}
@media (max-width: 480px) { .topo-cta { display: none; } .menu-botao { margin-left: auto; } }

/* Topo da página inicial */
.topo-grade { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.topo-texto { min-width: 0; }
.topo-pagina h1 { font-size: clamp(2.1rem, 5vw, var(--t5)); margin-top: 16px; }
.destaque { color: var(--realce); }
.topo-pagina .lead { margin-top: 20px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.fatos { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 32px; padding: 0; list-style: none; font-size: var(--t-1); color: var(--marinho-suave); }
.fatos li { display: inline-flex; align-items: center; gap: 8px; }
.fatos svg { color: var(--ceu); }
@media (max-width: 900px) { .topo-grade { grid-template-columns: 1fr; gap: 40px; } }

.topo-ilustracao { min-width: 0; }
.op { background: #F7F9FC; color: #0F1A2B; border-radius: 12px; box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .6); font-size: var(--t-1); overflow: hidden; }
.op-cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #D9E0EA; flex-wrap: wrap; }
.op-cabeca strong { font-family: var(--f-mono); font-size: 1rem; }
.op-situacao { font-family: var(--f-mono); font-size: .72rem; padding: 3px 9px; border-radius: 999px; background: #DDF1E6; color: #1E7A4C; }
.op-dados { padding: 14px 20px 4px; display: grid; gap: 10px; }
.op-dados div { display: grid; grid-template-columns: 8.5em 1fr; gap: 8px; }
.op-dados dt { color: #4A5872; }
.op-dados dd { font-family: var(--f-mono); font-size: .8rem; min-width: 0; overflow-wrap: anywhere; }
.op-progresso { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 12px 20px 4px; }
.op-progresso span { font-size: .7rem; color: #4A5872; padding-top: 10px; background: linear-gradient(90deg, #1F5FBF var(--p), #D9E0EA var(--p)) top / 100% 5px no-repeat; }
.op-trava, .op-aviso { display: flex; gap: 10px; align-items: flex-start; margin: 12px 20px 0; padding: 12px 14px; border-radius: 8px; }
.op-trava { background: #E3ECFA; color: #14336A; }
.op-aviso { background: #DCF5F1; color: #08433C; margin-bottom: 20px; }
.op-trava svg, .op-aviso svg { flex: none; margin-top: 2px; }
.op-legenda { font-size: .75rem; color: var(--marinho-suave); margin-top: 10px; text-align: right; }

/* Problema */
.dores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dor { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 24px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.dor-icone { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--realce-claro); color: var(--realce-texto); }
.dor h3 { font-size: var(--t1); }
.dor p { color: var(--suave); font-size: .95rem; }
@media (max-width: 1000px) { .dores { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .dores { grid-template-columns: 1fr; } }

/* Como funciona (abas) */
.etapas { display: grid; gap: 24px; }
.etapas-abas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.etapas-abas button { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--raio); border: 1.5px solid var(--linha); background: var(--fundo); color: var(--tinta); font: 600 var(--t0) var(--f-titulo); cursor: pointer; text-align: left; min-width: 0; transition: border-color .15s, background .15s; }
.etapas-abas button:hover { border-color: var(--azul); }
.etapas-abas button[aria-selected="true"] { background: var(--marinho); color: var(--marinho-tinta); border-color: var(--marinho); }
.etapa-num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 500 .78rem var(--f-mono); background: var(--azul-claro); color: var(--azul); }
.etapas-abas button[aria-selected="true"] .etapa-num { background: var(--realce); color: #0F1A2B; }
.etapa-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.etapa-painel { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; padding: clamp(20px, 3vw, 36px); border-radius: 14px; background: var(--fundo); border: 1px solid var(--linha); }
.etapa-tela { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; font-size: var(--t-1); min-width: 0; box-shadow: 0 14px 40px -24px rgba(15, 26, 43, .5); }
.etapa-texto { display: grid; gap: 18px; min-width: 0; }
.etapa-texto h3 { font-size: var(--t2); }
.etapa-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.etapa-colunas > div { padding: 16px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--linha); min-width: 0; }
.etapa-colunas .etapa-sistema { background: var(--azul-claro); border-color: transparent; }
.etapa-colunas h4 { font-size: .8rem; font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--suave); margin-bottom: 8px; }
.etapa-colunas .etapa-sistema h4 { color: var(--azul); }
.etapa-colunas ul { padding-left: 1.1em; display: grid; gap: 6px; font-size: .95rem; }
.etapa-proxima { justify-self: start; background: none; border: 0; padding: 0; color: var(--realce-texto); font: 600 var(--t0) var(--f-titulo); cursor: pointer; }
.etapa-proxima:hover { text-decoration: underline; }
@media (max-width: 1000px) { .etapas-abas { grid-template-columns: repeat(3, 1fr); } .etapa-painel { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 560px) { .etapas-abas { grid-template-columns: 1fr 1fr; } .etapa-colunas { grid-template-columns: 1fr; } }

/* Mini telas desenhadas dentro de "Como funciona" */
.mini-titulo { font-family: var(--f-titulo); font-weight: 600; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.mini-pill { font: 500 .7rem var(--f-mono); padding: 2px 8px; border-radius: 999px; background: var(--azul-claro); color: var(--azul); }
.mini-ok { background: var(--verde-claro); color: var(--verde); }
.mini-lista { display: grid; font-family: var(--f-mono); font-size: .76rem; overflow-x: auto; }
.mini-lista > div { display: grid; grid-template-columns: 1.1fr 1.6fr .7fr .8fr; gap: 8px; padding: 9px 6px; border-bottom: 1px solid var(--linha); min-width: 300px; }
.mini-lista span:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }
.mini-cab { color: var(--suave); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }
.mini-alerta { background: var(--realce-claro); border-radius: 6px; }
.mini-realce { color: var(--realce-texto); font-weight: 600; }
.mini-verde { color: var(--verde); font-weight: 600; }
.mini-arvore ul { list-style: none; padding: 0 0 0 14px; border-left: 2px solid var(--linha); display: grid; gap: 8px; }
.mini-arvore li { display: flex; justify-content: space-between; gap: 10px; font-family: var(--f-mono); font-size: .78rem; }
.mini-arvore b { font-weight: 500; color: var(--suave); }
.mini-rodape { margin-top: 12px; font-size: .78rem; color: var(--suave); }
.mini-op ol { margin-top: 12px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; counter-reset: e; }
.mini-op li { counter-increment: e; text-align: center; padding: 10px 4px; border-radius: 6px; background: var(--azul-claro); color: var(--azul); font-size: .75rem; }
.mini-op li::before { content: counter(e) ". "; }
.mini-tablet { text-align: center; }
.mini-tablet .mini-titulo { justify-content: center; }
.mini-contador { font-family: var(--f-mono); color: var(--suave); }
.mini-contador b { display: block; font-size: 2.6rem; color: var(--tinta); font-family: var(--f-titulo); line-height: 1.1; }
.mini-botoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.mini-botoes span { padding: 14px 6px; border-radius: 8px; background: var(--fundo); border: 1px solid var(--linha); font-weight: 600; }
.mini-botoes .mini-b-verde { background: #1E7A4C; color: #fff; border-color: #1E7A4C; }
.mini-botoes .mini-b-realce { background: var(--realce); color: #0F1A2B; border-color: var(--realce); }

/* Vídeos */
.video-grade { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.video-grade > div { min-width: 0; }
.video-grade h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: 12px; }
.video-grade .lead { margin-top: 14px; }
.video-quadro { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--marinho-linha); background: radial-gradient(120% 90% at 30% 20%, #1B3561 0%, #0F1A2B 70%); text-decoration: none; color: #0F1A2B; }
.video-quadro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--realce); display: grid; place-items: center; box-shadow: 0 10px 30px -8px rgba(43, 196, 176, .9); }
.video-play svg { margin-left: 4px; }
.video-grande .video-play { width: 84px; height: 84px; }
.video-nota { position: absolute; left: 14px; bottom: 12px; font: .72rem var(--f-mono); color: var(--marinho-suave); }
.capitulos { list-style: none; padding: 0; margin-top: 20px; }
.capitulos li { display: grid; grid-template-columns: 4.2em 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--marinho-linha); font-size: .95rem; }
.capitulos time { font-family: var(--f-mono); color: var(--realce); font-variant-numeric: tabular-nums; }
.videos-curtos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.videos-curtos .video-play { width: 48px; height: 48px; }
.videos-curtos figcaption { color: var(--marinho-suave); font-size: var(--t-1); margin-top: 8px; }
@media (max-width: 900px) { .video-grade, .videos-curtos { grid-template-columns: 1fr; } }

/* Módulos */
.modulos-atalhos { display: flex; flex-wrap: wrap; gap: 8px; margin: -16px 0 40px; }
.modulos-atalhos a { text-decoration: none; font-size: var(--t-1); font-weight: 500; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linha); background: var(--superficie); }
.modulos-atalhos a:hover { border-color: var(--azul); color: var(--azul); }
.modulos { display: grid; }
.modulo { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; padding-block: 40px; border-top: 1px solid var(--linha); }
.modulo:first-child { border-top: 0; padding-top: 0; }
.modulo:nth-child(even) .modulo-texto { order: 2; }
.modulo-texto { display: grid; gap: 14px; min-width: 0; }
.modulo-texto h3 { font-size: var(--t3); }
.modulo-texto > p:not(.sobretitulo) { color: var(--suave); }
.ticks { list-style: none; padding: 0; display: grid; gap: 8px; }
.ticks li { padding-left: 26px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 7px; border-left: 2px solid var(--realce-texto); border-bottom: 2px solid var(--realce-texto); transform: rotate(-45deg); }
@media (max-width: 900px) { .modulo { grid-template-columns: 1fr; gap: 24px; } .modulo:nth-child(even) .modulo-texto { order: 0; } }

/* Prints */
.tela { display: grid; gap: 10px; min-width: 0; }
.tela-moldura { aspect-ratio: 16 / 10; max-width: 100%; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--superficie); overflow: hidden; display: grid; grid-template-rows: 28px 1fr; box-shadow: 0 18px 40px -28px rgba(15, 26, 43, .6); }
.tela-moldura img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.tela-barra { display: flex; align-items: center; gap: 6px; padding-inline: 12px; background: var(--fundo); border-bottom: 1px solid var(--linha); min-width: 0; }
.tela-barra i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--linha); }
.tela-barra code { margin-left: 10px; font: .7rem var(--f-mono); color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tela-vazia { display: grid; place-items: center; text-align: center; padding: 16px; color: var(--suave); font-size: var(--t-1); background-image: repeating-linear-gradient(135deg, transparent 0 14px, var(--azul-claro) 14px 15px); }
.tela-vazia b { display: block; color: var(--tinta); font-family: var(--f-titulo); font-size: var(--t0); margin-bottom: 4px; }
.tela figcaption { font-size: var(--t-1); color: var(--suave); }
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 20px; }
@media (max-width: 900px) { .galeria { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .galeria { grid-template-columns: 1fr; } }

/* Faixa de realce do diferencial */
.faixa-realce { background: var(--realce); color: #0F1A2B; padding-block: clamp(48px, 7vw, 88px); }
.diferencial-grade { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: start; }
.diferencial-grade > div { display: grid; gap: 16px; max-width: 900px; min-width: 0; }
.diferencial-icone { width: 80px; height: 80px; border-radius: 20px; background: #0F1A2B; color: var(--realce); display: grid; place-items: center; }
.faixa-realce .sobretitulo { color: #06433C; }
.faixa-realce h2 { font-size: clamp(1.5rem, 3.2vw, 2.25rem); }
.faixa-realce p:not(.sobretitulo) { font-size: var(--t1); color: #08302B; max-width: 70ch; }
@media (max-width: 640px) { .diferencial-grade { grid-template-columns: 1fr; gap: 20px; } .diferencial-icone { width: 60px; height: 60px; border-radius: 16px; } }

/* Tabelas (comparação e posts) */
.tabela { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); }
.tabela table { width: 100%; border-collapse: collapse; min-width: 560px; }
.tabela th, .tabela td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela tbody tr:last-child > * { border-bottom: 0; }
.tabela thead th { font: 600 var(--t-1) var(--f-titulo); color: var(--suave); background: var(--fundo); }
.tabela td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.comparacao th[scope="row"] { font-family: var(--f-titulo); width: 22%; }
.comparacao td { color: var(--suave); width: 39%; }
.comparacao .com { color: var(--tinta); background: var(--realce-claro); font-weight: 500; }
.comparacao thead .com { color: var(--realce-texto); background: var(--realce-claro); }

/* Chamada intermediária */
.chamada { background: var(--marinho); color: var(--marinho-tinta); }
.chamada-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 28px; }
.chamada p { font: 600 var(--t2) var(--f-titulo); min-width: 0; }

/* Para quem é */
.perfis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.perfil { padding: 24px; border-radius: var(--raio); background: var(--fundo); border: 1px solid var(--linha); display: grid; gap: 10px; align-content: start; min-width: 0; }
.perfil-check { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--realce); color: #0F1A2B; }
.perfil h3 { font-size: var(--t1); }
.perfil p { color: var(--suave); font-size: .95rem; }
.atributos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 36px; }
.atributo { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.atributo-icone { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--azul-claro); color: var(--azul); }
.atributo h4 { font-size: var(--t1); margin-bottom: 4px; }
.atributo p { color: var(--suave); font-size: .95rem; }
@media (max-width: 900px) { .perfis, .atributos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .perfis, .atributos { grid-template-columns: 1fr; } }

/* Roteiro */
.roteiro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.roteiro-coluna { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); padding: 24px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.roteiro-coluna h3 { font-size: var(--t2); }
.roteiro-coluna ul { padding-left: 1.1em; display: grid; gap: 6px; color: var(--suave); }
.pill { justify-self: start; font: 500 .74rem var(--f-mono); padding: 5px 11px; border-radius: 999px; letter-spacing: .02em; }
.pill-ok { background: var(--verde-claro); color: var(--verde); }
.pill-breve { background: var(--realce); color: #0F1A2B; }
.pill-plano { background: var(--azul-claro); color: var(--azul); }
@media (max-width: 900px) { .roteiro { grid-template-columns: 1fr; } }

/* Planos */
.planos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.plano { border: 1px solid var(--linha); border-radius: var(--raio); padding: 24px; display: grid; gap: 12px; grid-template-rows: auto 1fr auto; background: var(--fundo); min-width: 0; }
.plano h3 { font-size: var(--t2); }
.plano p { color: var(--suave); font-size: .95rem; }
.plano-link { font: 600 var(--t-1) var(--f-titulo); color: var(--realce-texto); text-decoration: none; }
.plano-link::after { content: " →"; }
.plano-link:hover { text-decoration: underline; }
.planos-rodape { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 20px; padding: 0; list-style: none; font-size: var(--t-1); color: var(--suave); }
.planos-rodape li::before { content: "• "; color: var(--realce-texto); }
@media (max-width: 900px) { .planos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .planos { grid-template-columns: 1fr; } }

/* Implantação */
.passos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; padding: 0; }
.passos li { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 2px solid var(--marinho-linha); min-width: 0; }
.passo-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--realce); color: #0F1A2B; font: 600 .9rem var(--f-mono); }
.passos h3 { font-size: var(--t1); }
.passos p { color: var(--marinho-suave); font-size: .95rem; }
@media (max-width: 900px) { .passos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .passos { grid-template-columns: 1fr; } }

/* Blog: cartões */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.posts-2 { grid-template-columns: 1fr 1fr; }
.post-cartao { position: relative; display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--linha); min-width: 0; transition: border-color .15s, transform .15s; }

.post-cartao h3 { font-size: var(--t1); }
.post-cartao h3 a { text-decoration: none; }
.post-cartao h3 a::after { content: ""; position: absolute; inset: 0; }
.post-cartao > p:not(.post-meta) { color: var(--suave); font-size: .95rem; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .8rem; color: var(--suave); }
.faixa-marinho .post-meta { color: var(--marinho-suave); }
.post-tag { font: 500 .72rem var(--f-mono); padding: 3px 9px; border-radius: 999px; background: var(--realce-claro); color: var(--realce-texto); }
.faixa-marinho .post-tag { background: var(--realce); color: #0F1A2B; }
.post-leitura { font-size: .8rem; color: var(--suave); }
.siga { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--suave); }
@media (max-width: 900px) { .posts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .posts, .posts-2 { grid-template-columns: 1fr; } }

.blog-topo h1 { font-size: clamp(2rem, 4.4vw, var(--t5)); margin: 14px 0 16px; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.filtro { font: 500 var(--t-1) var(--f-texto); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--marinho-linha); background: transparent; color: var(--marinho-tinta); cursor: pointer; }
.filtro[aria-pressed="true"] { background: var(--realce); color: #0F1A2B; border-color: var(--realce); }

/* Redes */
.redes { display: flex; gap: 10px; }
.redes a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; text-decoration: none; transition: background .15s, color .15s; }
.redes-rodape a, .redes-claras a { border: 1px solid var(--marinho-linha); color: var(--marinho-tinta); }
.redes-rodape a:hover, .redes-claras a:hover { background: var(--realce); color: #0F1A2B; border-color: var(--realce); }
.redes-escuras a { border: 1px solid var(--linha); color: var(--tinta); background: var(--superficie); }
.redes-escuras a:hover { border-color: var(--realce); color: var(--realce-texto); }

/* Artigo */
.artigo-largura { max-width: 780px; }
.artigo-topo h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); margin: 16px 0; }
.trilha { font-size: var(--t-1); color: var(--marinho-suave); margin-bottom: 18px; }
.trilha a { color: var(--marinho-suave); }
.sumario { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); padding: 18px 22px; margin-bottom: 36px; }
.sumario h2 { font: 500 .78rem var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--suave); margin-bottom: 8px; }
.sumario ol { padding-left: 1.2em; display: grid; gap: 4px; }
.sumario a { color: var(--azul); text-decoration: none; }
.sumario a:hover { text-decoration: underline; }
.prosa { font-size: 1.075rem; line-height: 1.75; display: grid; gap: 18px; }
.prosa h2 { font-size: var(--t3); margin-top: 22px; }
.prosa h3 { font-size: var(--t2); margin-top: 12px; }
.prosa ul, .prosa ol { padding-left: 1.3em; display: grid; gap: 8px; }
.prosa a { color: var(--azul); }
.prosa code { font: .9em var(--f-mono); background: var(--azul-claro); padding: 1px 5px; border-radius: 4px; }
.prosa blockquote { margin: 6px 0; padding: 18px 22px; border-radius: 0 var(--raio) var(--raio) 0; background: var(--realce-claro); border-left: 4px solid var(--realce); font: 600 var(--t1)/1.5 var(--f-titulo); }
.prosa .tabela { font-size: .95rem; }
.aviso-rascunho { padding: 12px 16px; border-radius: 8px; border: 1px dashed var(--realce-texto); color: var(--realce-texto); font-weight: 600; }
.compartilhar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--linha); }
.compartilhar > span { font-weight: 600; margin-right: 4px; }
.compartilhar a, .compartilhar button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--linha); background: var(--superficie); color: var(--tinta); text-decoration: none; font: 500 var(--t-1) var(--f-texto); cursor: pointer; }
.compartilhar a:hover, .compartilhar button:hover { border-color: var(--realce); }
.siga-caixa { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; margin-top: 40px; padding: 28px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--linha); border-top: 4px solid var(--realce); }
.siga-caixa > div { display: grid; gap: 10px; align-content: start; justify-items: start; }
.siga-caixa h2 { font-size: var(--t1); }
.siga-caixa p { color: var(--suave); }
.relacionados { margin-top: 56px; }
.relacionados h2 { font-size: var(--t2); margin-bottom: 20px; }

/* Perguntas */
.perguntas-grade { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.faq { min-width: 0; }
.faq details { border-top: 1px solid var(--linha); }
.faq details:last-child { border-bottom: 1px solid var(--linha); }
.faq summary { cursor: pointer; padding: 18px 40px 18px 0; font: 600 var(--t1) var(--f-titulo); list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 13px; font-size: 1.6rem; font-weight: 400; color: var(--realce-texto); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 20px; color: var(--suave); max-width: 68ch; }
@media (max-width: 900px) { .perguntas-grade { grid-template-columns: 1fr; gap: 8px; } }

/* Contato */
.contato { border-top: 4px solid var(--realce); }
.contato-grade { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.contato-texto { min-width: 0; }
.contato h2 { font-size: clamp(1.75rem, 3.4vw, var(--t4)); margin-top: 12px; }
.proximos { margin-top: 28px; padding: 0; list-style: none; counter-reset: p; display: grid; gap: 14px; }
.proximos li { counter-increment: p; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center; color: var(--marinho-tinta); }
.proximos li::before { content: counter(p); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--realce); color: var(--realce); font: 600 .85rem var(--f-mono); }
.email-caixa { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--marinho-linha); display: grid; gap: 10px; justify-items: start; }
.rotulo { font: 500 .75rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--marinho-suave); }
.email-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.email-linha a { font: 600 var(--t2) var(--f-titulo); color: var(--marinho-tinta); text-decoration: none; overflow-wrap: anywhere; }
.copiar { font: 500 .78rem var(--f-texto); padding: 6px 10px; border-radius: 6px; border: 1px solid var(--marinho-linha); background: transparent; color: var(--marinho-suave); cursor: pointer; }
.copiar:hover { color: var(--marinho-tinta); border-color: var(--realce); }
@media (max-width: 900px) { .contato-grade { grid-template-columns: 1fr; gap: 36px; } }

.form { background: var(--superficie); color: var(--tinta); border-radius: 14px; padding: clamp(20px, 3vw, 32px); display: grid; gap: 20px; min-width: 0; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form legend { font: 500 .75rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--realce-texto); padding: 0; margin-bottom: 12px; }
.form-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.campo { display: grid; gap: 6px; align-content: start; min-width: 0; }
.campo-inteiro { grid-column: 1 / -1; }
.campo label { font-size: var(--t-1); font-weight: 500; }
.campo label em { font-style: normal; color: var(--suave); font-weight: 400; }
.campo input, .campo select, .campo textarea { font: inherit; color: var(--tinta); background: var(--fundo); border: 1px solid var(--linha); border-radius: 8px; padding: 11px 12px; width: 100%; min-width: 0; }
.campo textarea { min-height: 100px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.campo [aria-invalid="true"] { border-color: var(--erro); }
.erro { font-size: .8rem; color: var(--erro); }
.erro:empty { display: none; }
.campo-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aceite { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-1); color: var(--suave); }
.aceite input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--realce-forte); }
.aceite a { color: var(--azul); }
.form .btn[disabled] { opacity: .7; cursor: progress; transform: none; }
.resultado { border-radius: 10px; padding: 16px; display: grid; gap: 10px; font-size: .95rem; }
.resultado-ok { background: var(--verde-claro); color: var(--tinta); border-left: 4px solid var(--verde); }
.resultado-pendente { background: var(--azul-claro); color: var(--tinta); }
.resultado-erro { background: var(--realce-claro); color: var(--tinta); border-left: 4px solid var(--realce); }
.resultado strong { font-family: var(--f-titulo); }
.resultado pre { margin: 0; white-space: pre-wrap; font: .82rem/1.5 var(--f-mono); background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; padding: 12px; max-height: 220px; overflow: auto; }
.resultado-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.resultado-acoes a, .resultado-acoes button { font: 600 var(--t-1) var(--f-titulo); padding: 9px 14px; border-radius: 8px; border: 1px solid var(--linha); background: var(--superficie); color: var(--tinta); cursor: pointer; text-decoration: none; }
@media (max-width: 560px) { .form-grade { grid-template-columns: 1fr; } }

/* Rodapé */
.rodape { background: var(--marinho); color: var(--marinho-suave); font-size: var(--t-1); }
.rodape-grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; padding-block: 56px 36px; }
.rodape-grade > * { display: grid; gap: 10px; align-content: start; justify-items: start; min-width: 0; }
.rodape h2 { font: 500 .75rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--marinho-tinta); margin-bottom: 4px; }
.rodape a { color: var(--marinho-suave); text-decoration: none; }
.rodape a:hover { color: var(--marinho-tinta); }
.rodape .btn-realce { color: #0F1A2B; margin-top: 6px; }
.rodape-marca p { max-width: 34ch; }
.rodape-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 20px; border-top: 1px solid var(--marinho-linha); }
@media (max-width: 900px) { .rodape-grade { grid-template-columns: 1fr 1fr; } .rodape-marca { grid-column: 1 / -1; } }
@media (max-width: 480px) { .rodape-grade { grid-template-columns: 1fr; } }

.whats-flutuante { position: fixed; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 25; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .5); }

/* Cartões de destaque: sobem e ganham sombra e borda de realce ao passar o mouse (ou ao receber foco pelo teclado). */
.dor, .perfil, .roteiro-coluna, .plano, .post-cartao, .tela-moldura, .etapa-colunas > div {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (hover: hover) {
  .dor:hover, .perfil:hover, .roteiro-coluna:hover, .plano:hover, .post-cartao:hover, .tela:hover .tela-moldura, .etapa-colunas > div:hover {
    transform: translateY(-6px);
    border-color: var(--realce);
    box-shadow: 0 22px 44px -22px rgba(15, 26, 43, .45), 0 0 0 1px var(--realce);
  }
}
.dor:focus-within, .perfil:focus-within, .roteiro-coluna:focus-within, .plano:focus-within, .post-cartao:focus-within {
  transform: translateY(-6px);
  border-color: var(--realce);
  box-shadow: 0 22px 44px -22px rgba(15, 26, 43, .45), 0 0 0 1px var(--realce);
}
@media (prefers-reduced-motion: reduce) {
  .dor:hover, .perfil:hover, .roteiro-coluna:hover, .plano:hover, .post-cartao:hover, .tela:hover .tela-moldura, .etapa-colunas > div:hover,
  .dor:focus-within, .perfil:focus-within, .roteiro-coluna:focus-within, .plano:focus-within, .post-cartao:focus-within { transform: none; }
}