/* Sinal RT · fundação comum do site e da plataforma (proposta do manual v3, 29/10/2026).
   Os valores são os do manual v2 e da camada de vidro da plataforma (app: vidro.css). O site carrega este arquivo depois
   de site.css; a plataforma passa a carregá-lo na etapa seguinte, no lugar das cópias de tokens que hoje vivem em vidro.css.
   Regra de uso no site: vidro só onde a página mostra o produto (janela do produto, cartões de resumo da demonstração);
   texto corrido, tabelas, documentos e resultados de risco continuam sólidos. */

:root {
  /* Cor: mesmas do manual v2 */
  --ambiente: #E9EEF6;
  --ambiente-claro: #F3F6FA;
  --tinta-2-vidro: #2E4157;
  --tinta-suave-vidro: #4A5F78;
  /* Luz de estado (nunca tinta: só ponto, halo e quadrado da marca de fundo) */
  --luz-sua-vez: #FFE44D;
  --luz-aguardando: #245EC7;
  --luz-concluida: #39FF78;
  --luz-critica: #FF3B55;
  /* Vidro */
  --vidro-fio: rgba(16, 26, 44, .11);
  --vidro-raio: 24px;
  --vidro-raio-compacto: 16px;
  --raio-controle: 6px;
  --vidro-fundo: linear-gradient(165deg, rgba(255, 255, 255, .80) 0%, rgba(246, 249, 252, .58) 50%, rgba(238, 243, 249, .68) 100%);
  --vidro-relevo: inset 0 16px 24px -20px #FFFFFF, inset 0 -16px 26px -22px rgba(16, 26, 44, .16), 0 0 0 1px var(--vidro-fio), 0 2px 4px rgba(16, 26, 44, .07);
  --vidro-altura: 0 28px 48px -28px rgba(16, 26, 44, .34);
  /* Movimento */
  --curva: cubic-bezier(.45, 0, .55, 1);
  --curva-saida: cubic-bezier(.2, .7, .2, 1);
  --t-controle: 140ms;
  --t-texto: 350ms;
  --t-estado: 600ms;
  --t-regua: 900ms;
  --t-entrada: 800ms;
  /* Tipo (escala do site, alinhada aos títulos da plataforma) */
  --tipo-display: 800 clamp(40px, 5.4vw, 76px)/1 var(--f-texto);
  --tipo-secao: 800 clamp(30px, 3.7vw, 50px)/1.05 var(--f-texto);
  --tipo-tela: 700 clamp(22px, 2.4vw, 30px)/1.15 var(--f-texto);
}

/* ---------- Cabeçalho claro, nível 1 (o mesmo da plataforma) ---------- */
body::before { background: var(--ambiente-claro); }
.cabeca { background: rgba(255, 255, 255, .92); color: var(--tinta); border-bottom: 1px solid var(--vidro-fio); }
@supports (backdrop-filter: blur(8px)) { .cabeca { background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: saturate(1.5) blur(12px); backdrop-filter: saturate(1.5) blur(12px); } }
.cabeca :focus-visible { outline-color: var(--foco); }
.nav a { color: var(--tinta-suave); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--tinta); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--tinta); }
.entrar { color: var(--tinta-suave); }
.entrar:hover { color: var(--tinta); }
.cabeca .botao-primario { background: var(--tinta); color: #FFFFFF; }
.cabeca .botao-primario:hover { background: var(--tinta-2); }
.menu-botao { border-color: var(--rastro); color: var(--tinta); }
.menu-painel { background: #FFFFFF; border-top-color: var(--borda); }
.menu-painel a { color: var(--tinta); border-bottom-color: var(--borda); }
.menu-entrar { color: var(--tinta-suave) !important; }

/* Botões de parceria no cabeçalho (02/11/2026): dois botões com borda depois dos itens do menu; no celular ficam no Menu
   e, na home, logo abaixo das ações da abertura. */
.nav-parceiros { display: flex; align-items: center; gap: 8px; margin-left: 6px; }
.nav-parceiro { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px !important; border: 1px solid var(--rastro); border-radius: var(--raio-controle);
  color: var(--tinta) !important; font: 700 13px/16px var(--f-texto) !important; text-decoration: none; white-space: nowrap; transition: border-color var(--t-controle), background-color var(--t-controle), color var(--t-controle); }
.nav-parceiro svg { width: 13px; height: 13px; flex: none; transition: transform .2s; }
.nav-parceiro:hover { border-color: var(--tinta); background: rgba(16, 26, 44, .05); }
.nav-parceiro:hover svg { transform: translateX(3px); }
.nav a.nav-parceiro[aria-current="page"] { background: var(--tinta); border-color: var(--tinta); color: #FFFFFF !important; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .nav-parceiro, .nav-parceiro svg { transition: none; } }
.menu-grupo { padding: 20px 0 6px; font: 600 12px/16px var(--f-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.menu-painel a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--tinta); padding-left: 12px; }
@media (prefers-reduced-motion: reduce) { .botao-parceiro, .botao-parceiro svg { transition: none; } }

/* ---------- Vidro do site ---------- */
.vd { position: relative; isolation: isolate; border-radius: var(--vidro-raio); background: var(--vidro-fundo); box-shadow: var(--vidro-relevo); }
.vd::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; pointer-events: none; z-index: -1;
  background: linear-gradient(150deg, #FFFFFF 0%, rgba(255, 255, 255, .6) 32%, rgba(255, 255, 255, .12) 62%, rgba(16, 26, 44, .20) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.vd::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: .03; background: url(../img/vidro-grao.png) 0 0 / 128px 128px repeat; }
.vd-alto { box-shadow: var(--vidro-relevo), var(--vidro-altura); }
.vd-1 { border-radius: var(--vidro-raio-compacto); background: rgba(255, 255, 255, .84); box-shadow: 0 0 0 1px var(--vidro-fio); }
.vd-1::after, .vd-1::before { display: none; }
.vd-compacto { border-radius: var(--vidro-raio-compacto); }
.sobre-marca.vd, .sobre-marca .vd { -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%); }
.vd p, .vd li { color: var(--tinta-2-vidro); }
.vd .rotulo, .vd .apoio, .vd .nota { color: var(--tinta-suave-vidro); }
.vd :focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; box-shadow: 0 0 0 6px #FFFFFF; }
@media (prefers-reduced-transparency: reduce) {
  .vd, .vd-1 { background: #FFFFFF; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .vd { background: rgba(255, 255, 255, .9); } }

/* ---------- Marca de fundo (símbolo oficial ampliado; o quadrado do sinal acende só na demonstração do produto) ---------- */
.mf { position: absolute; pointer-events: none; --u: 11px; width: calc(61 * var(--u)); height: calc(58 * var(--u)); }
.mf > span { position: absolute; inset: 0; }
.mf .mf-grade { background: rgba(16, 26, 44, .14); -webkit-mask: url(../img/marca-fundo-grade.png) 0 0 / 100% 100% no-repeat; mask: url(../img/marca-fundo-grade.png) 0 0 / 100% 100% no-repeat; }
.mf .mf-sinal { background-color: var(--luz, var(--sinal)); opacity: .82; transition: background-color var(--t-estado) var(--curva);
  -webkit-mask: url(../img/marca-fundo-sinal.png) 0 0 / 100% 100% no-repeat; mask: url(../img/marca-fundo-sinal.png) 0 0 / 100% 100% no-repeat; }
.mf .mf-halo { inset: auto; width: calc(34 * var(--u)); height: calc(34 * var(--u)); left: calc(29 * var(--u)); top: calc(12 * var(--u)); border-radius: 50%;
  background-color: var(--luz, transparent); transition: background-color var(--t-estado) var(--curva);
  -webkit-mask: radial-gradient(closest-side, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .22) 40%, transparent 100%); mask: radial-gradient(closest-side, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .22) 40%, transparent 100%); }
@media (max-width: 820px) { .mf { --u: 6.5px; } }
[data-luz="sua-vez"] { --luz: var(--luz-sua-vez); }
[data-luz="aguardando"] { --luz: var(--luz-aguardando); }
[data-luz="concluida"] { --luz: var(--luz-concluida); }
[data-luz="prazo-vencido"] { --luz: var(--luz-critica); }

/* ---------- Selo de estado (sólido; a luz é só o ponto) ---------- */
.selo-estado { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 3px 10px 3px 8px; border-radius: var(--raio-controle);
  background: #FFFFFF; box-shadow: 0 0 0 1px var(--borda); font: 700 13px/18px var(--f-texto); color: var(--tinta); white-space: nowrap; }
.selo-estado::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--luz, var(--rastro)); box-shadow: 0 0 0 1.5px var(--tinta); }

/* ---------- Marca de nível (anel vazio, meio, cheio; a palavra sempre junto) ---------- */
.nivel { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/18px var(--f-texto); color: var(--tinta); white-space: nowrap; }
.nivel::before { content: ""; width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 2px currentColor; }
.nivel-favoravel { color: var(--favoravel); }
.nivel-atencao { color: var(--atencao); }
.nivel-atencao::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.nivel-risco { color: var(--sinal); }
.nivel-risco::before { background: currentColor; }
.nivel-n5 { color: var(--tinta-suave); }
.nivel-n5::before { box-shadow: none; border: 1.5px dashed var(--rastro); width: 11px; height: 11px; }

/* ---------- Abas em pílula (controle segmentado) ---------- */
.pilulas { display: inline-flex; flex-wrap: nowrap; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px var(--vidro-fio); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.pilulas::-webkit-scrollbar { display: none; }
.pilulas [role="tab"] { appearance: none; border: 0; background: transparent; min-height: 44px; padding: 0 16px; border-radius: 9px; font: 700 14px/20px var(--f-texto); color: var(--tinta-suave); cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-controle), color var(--t-controle); }
.pilulas [role="tab"]:hover { color: var(--tinta); }
.pilulas [role="tab"][aria-selected="true"] { background: var(--tinta); color: #FFFFFF; }
.pilulas [role="tab"] .n { font-variant-numeric: tabular-nums; opacity: .7; margin-right: 6px; }

/* ---------- Troca de texto (350 ms, some até 15%) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .troca { animation: troca var(--t-texto) var(--curva-saida); }
  @keyframes troca { from { opacity: .15; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* ---------- Entrada de seção: 18 px, de 40% para 100%, uma vez ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-revela] { opacity: .4; transform: translateY(18px); transition: opacity var(--t-entrada) var(--curva-saida), transform var(--t-entrada) var(--curva-saida); }
  .js [data-revela].revelado { opacity: 1; transform: none; }
}

/* ---------- Abertura das páginas internas: o mesmo ambiente claro da plataforma ---------- */
main > section.faixa[data-barra-depois] { background: linear-gradient(180deg, var(--ambiente-claro) 0%, var(--ambiente) 100%); color: var(--tinta); }
main > section.faixa[data-barra-depois] :focus-visible { outline-color: var(--foco); }
main > section.faixa[data-barra-depois] .rotulo { color: var(--tinta-suave-vidro); }
main > section.faixa[data-barra-depois] .lead, main > section.faixa[data-barra-depois] .apoio, main > section.faixa[data-barra-depois] .nota { color: var(--tinta-2-vidro); }
main > section.faixa[data-barra-depois] .trilha, main > section.faixa[data-barra-depois] .trilha a { color: var(--tinta-suave-vidro); }
main > section.faixa[data-barra-depois] .botao-primario { background: var(--tinta); color: #FFFFFF; }
main > section.faixa[data-barra-depois] .botao-primario:hover { background: var(--tinta-2); }
main > section.faixa[data-barra-depois] .botao-secundario { color: var(--tinta); border-color: var(--rastro); background: rgba(255, 255, 255, .6); }
main > section.faixa[data-barra-depois] .botao-secundario:hover { border-color: var(--tinta); }
main > section.faixa[data-barra-depois] .registro-figura figcaption { color: var(--tinta-suave-vidro); }
/* A imagem escura de cada página fica como um quadro do produto, com o mesmo canto do vidro compacto. */
main > section.faixa[data-barra-depois] .foto-quadro, main > section.faixa[data-barra-depois] .video-quadro, main > section.faixa[data-barra-depois] .registro-figura img { border-radius: var(--vidro-raio-compacto); overflow: hidden; }
main > section.faixa[data-barra-depois] .video-quadro.faixa-painel { box-shadow: var(--vidro-altura); }