/* Sinal RT · site · vidro no site inteiro (cópia de teste, 30/10/2026, pedido do fundador).
   Objetivo: menos cortes secos entre seções e menos sensação de site frio.
   - Um fundo ambiente só, do topo ao rodapé (tons do manual v2), com luzes suaves que derivam devagar.
   - Seções sem troca de cor de fundo; a separação vem do espaço, não de réguas.
   - Blocos de conteúdo em cartões de vidro do manual v2; faixas escuras viram ilhas arredondadas.
   - Documentos, tabelas e resultados de risco continuam sólidos (cartão claro opaco), para leitura.
   Carregado depois das outras folhas. Remover este arquivo e vidro-site.js volta ao site anterior. */

:root {
  --vs-ambiente: #E9EEF6;
  --vs-ambiente-claro: #F3F6FA;
  --vs-raio: 22px;
  --vs-raio-ilha: 32px;
  --vs-margem-ilha: clamp(8px, 1.6vw, 24px);
  --vs-vidro: linear-gradient(160deg, rgba(255, 255, 255, .80) 0%, rgba(250, 252, 255, .60) 55%, rgba(241, 245, 251, .70) 100%);
  --vs-solido: rgba(255, 255, 255, .94);
  --vs-fio: rgba(16, 26, 44, .09);
  --vs-relevo: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px var(--vs-fio), 0 18px 40px -28px rgba(16, 26, 44, .32);
  --vs-relevo-alto: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px rgba(16, 26, 44, .12), 0 28px 54px -28px rgba(16, 26, 44, .42);
  --vs-vidro-escuro: linear-gradient(160deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .035) 100%);
  --vs-relevo-escuro: inset 0 1px 0 rgba(255, 255, 255, .10), 0 0 0 1px rgba(255, 255, 255, .10);
  --vs-desfoque: blur(14px) saturate(1.35);
  --vs-curva: cubic-bezier(.2, .7, .2, 1);
  --respiro: clamp(64px, 8vw, 116px);
}

/* ---------- Fundo ambiente contínuo ---------- */
html { background: var(--vs-ambiente); }
body { background: transparent; }
html::after {
  content: ""; position: fixed; inset: -12vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40vmax 30vmax at 14% 8%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(34vmax 26vmax at 78% 6%, rgba(255, 196, 160, .26), rgba(255, 196, 160, 0) 70%),
    radial-gradient(38vmax 32vmax at 90% 36%, rgba(36, 94, 199, .17), rgba(36, 94, 199, 0) 70%),
    radial-gradient(34vmax 28vmax at 76% 88%, rgba(185, 56, 32, .09), rgba(185, 56, 32, 0) 70%),
    radial-gradient(40vmax 32vmax at 12% 72%, rgba(23, 107, 82, .10), rgba(23, 107, 82, 0) 70%),
    linear-gradient(180deg, var(--vs-ambiente-claro) 0%, var(--vs-ambiente) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  html::after { animation: vs-deriva 56s ease-in-out infinite alternate; }
}
@keyframes vs-deriva {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-2vmax, 1.5vmax, 0) scale(1.03); }
  100% { transform: translate3d(1.5vmax, -1vmax, 0) scale(1.05); }
}

/* Seções sem fundo próprio e sem régua entre elas: tudo corre sobre o mesmo ambiente. */
.secao, .secao-sup, .h-secao, .h-sup, .h-perguntas, main > section.faixa[data-barra-depois] { background: transparent; }
/* Abertura da home: o claro do topo se dissolve no ambiente (sem corte na borda de baixo). */
.h-abertura { background: linear-gradient(180deg, var(--vs-ambiente-claro) 0%, rgba(243, 246, 250, .6) 55%, rgba(243, 246, 250, 0) 100%); }
.secao + .secao:not(.faixa):not(.secao-sup) { border-top: 0; }
.secao-sup + .secao, .h-secao + .h-secao { border-top: 0; }

/* ---------- Faixas escuras: ilhas arredondadas sobre o ambiente ---------- */
main > section.faixa:not([data-barra-depois]), main > .h-escura, main > .h-fim, main > section.fechamento {
  margin: clamp(12px, 2vw, 28px) var(--vs-margem-ilha);
  border-radius: var(--vs-raio-ilha);
  overflow: clip; isolation: isolate;
  background: linear-gradient(165deg, #142236 0%, #0B1320 62%, #0E1A2B 100%); /* opaca: a marca passa por trás e some (leitura e contraste garantidos) */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 34px 70px -38px rgba(11, 19, 32, .55);
}
main > section.faixa-painel:not([data-barra-depois]) { background: linear-gradient(165deg, #1A2A40 0%, #131F30 100%); }
@media (max-width: 600px) { main > section.faixa:not([data-barra-depois]), main > .h-escura, main > .h-fim, main > section.fechamento { border-radius: 24px; } }
.rodape { border-radius: var(--vs-raio-ilha) var(--vs-raio-ilha) 0 0; margin-top: clamp(24px, 4vw, 48px); background: linear-gradient(180deg, #101C2E 0%, #0B1320 100%); }
aside.faixa { border-radius: var(--vs-raio); border: 0 !important; box-shadow: var(--vs-relevo-escuro), 0 24px 48px -30px rgba(11, 19, 32, .5); }

/* ---------- Cartões de vidro (claros) ---------- */
.celula, .opcao, .tema, .perguntas details, .h-plano, .h-limiar, .h-areas, .ve, .lista-num, .formulario, .e-book, .h-tempo, .grupo-perguntas > .perguntas > details {
  background: var(--vs-vidro);
  border: 0; border-radius: var(--vs-raio);
  box-shadow: var(--vs-relevo);
}
/* Grades de três e de dois: de tabela com réguas para cartões soltos. */
.grade-3, .grade-2 { border-top: 0; gap: clamp(12px, 1.6vw, 20px); }
.grade-3 .celula, .grade-2 .celula { padding: 26px 26px 30px; border-bottom: 0; }
.celula .no-sinal { border-top-color: rgba(16, 26, 44, .14); }
/* Opções e temas: sem a régua preta no topo. */
.opcao { border-top: 0; }
.temas { gap: clamp(12px, 1.6vw, 18px); background: transparent; border: 0; }
.tema { padding: 26px 24px; }
/* Perguntas: cada pergunta é um cartão. */
.perguntas { border-top: 0; gap: 10px; }
.perguntas details { border-bottom: 0; }
.perguntas summary { padding: 18px 22px; }
.perguntas .resposta { padding: 0 44px 20px 22px; }
.perguntas details[open] { box-shadow: var(--vs-relevo-alto); }
/* Listas numeradas e "o que entra / o que não entra" */
.lista-num { border-top: 0; padding: 6px 22px; }
.lista-num li:last-child { border-bottom: 0; }
.ve { border-top: 0; overflow: hidden; }
.ve > div { padding: 22px; }
.formulario { padding: clamp(20px, 3vw, 32px); }
.h-tempo { padding: clamp(18px, 2.4vw, 28px); }
.h-plano { border: 0; }
.h-limiar { border: 0; }
.h-areas { border: 0; }

/* Home: os quatro números e os três itens da NR-1 viram cartões soltos. */
.h-regua { border-top: 0; gap: clamp(10px, 1.4vw, 16px); }
.h-regua li, .h-regua li + li, .h-regua li:nth-child(3) { padding: 20px 20px 18px; border-left: 0; }
.h-tres li { padding: 22px 24px 24px; border-top: 0; }
.h-regua li, .h-tres li {
  background: var(--vs-vidro);
  border-radius: var(--vs-raio); box-shadow: var(--vs-relevo);
}

/* Dentro das ilhas escuras: vidro escuro. */
.faixa .celula, .h-escura .h-confere, .faixa .tema, .faixa .opcao {
  background: var(--vs-vidro-escuro); box-shadow: var(--vs-relevo-escuro);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.faixa .grade-3, .faixa .grade-2 { border-top: 0; }
.h-escura .h-confere { border: 0; border-radius: var(--vs-raio); }

/* ---------- Sólidos: documento, tabela, janela do produto, celular ---------- */
.folha, .h-doc, .h-area-ui { border-radius: var(--vs-raio); border: 0; background: #FFFFFF; box-shadow: var(--vs-relevo); }
.janela { border-radius: 18px; border: 0; box-shadow: 0 0 0 1px var(--vs-fio), 0 34px 70px -40px rgba(11, 19, 32, .45); }
.palco, .h-painel { border-radius: var(--vs-raio); }
.h-folha img { border-radius: 14px; border: 0; box-shadow: var(--vs-relevo); }
.foto-quadro, .video-quadro, .registro-figura img { border-radius: 18px; overflow: hidden; }
/* Tabelas fora do documento: cartão claro opaco em volta, cantos arredondados. */
main .secao .rolagem-x:not(.folha .rolagem-x):not(.faixa .rolagem-x) {
  background: var(--vs-solido); border-radius: 18px; box-shadow: var(--vs-relevo); padding: 6px clamp(12px, 2vw, 22px);
}

/* ---------- Movimento: cartões sobem um pouco no passar do mouse; entram suavemente ao rolar ---------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .celula, .opcao, .tema, .h-plano, .perguntas details, .h-regua li, .h-tres li { transition: transform 320ms var(--vs-curva), box-shadow 320ms var(--vs-curva); }
  .celula:hover, .opcao:hover, .tema:hover, .h-plano:hover, .perguntas details:hover, .h-regua li:hover, .h-tres li:hover { transform: translateY(-3px); box-shadow: var(--vs-relevo-alto); }
  .faixa .celula:hover, .faixa .tema:hover, .faixa .opcao:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px rgba(255, 255, 255, .16); }
}
@media (prefers-reduced-motion: no-preference) {
  .vs-js .vs-revela { opacity: 0; transform: translateY(18px); }
  .vs-js .vs-revela.vs-visivel { opacity: 1; transform: none; transition: opacity 700ms var(--vs-curva) var(--vs-atraso, 0ms), transform 700ms var(--vs-curva) var(--vs-atraso, 0ms); }
}
@media print {
  html::after { display: none; }
  .vs-js .vs-revela { opacity: 1 !important; transform: none !important; }
}
/* Sem suporte a desfoque: vidro mais opaco, para o texto não perder contraste. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .celula, .opcao, .tema, .perguntas details, .h-plano, .h-limiar, .h-areas, .ve, .lista-num, .formulario, .e-book, .h-tempo, .h-regua li, .h-tres li { background: rgba(255, 255, 255, .9); }
}

/* ---------- Marca de fundo atrás do vidro (como na plataforma, manual v2) ----------
   O símbolo fica preso à tela, à direita; o conteúdo rola por cima. Cartão que passa sobre a marca desfoca o que está atrás
   (só os mais próximos, como na plataforma); entre os cartões, a marca aparece nítida.
   Leitura em primeiro lugar: quando um texto solto (fora de cartão) cruza a grade ou o quadrado, essa parte da marca
   esmaece até virar marca-d'água e volta quando o texto passa (vidro-site.js). */
main { position: relative; isolation: isolate; }
.vs-marca-trilho { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: clip; }
.vs-marca { position: sticky; --u: 11px; width: calc(61 * var(--u)); height: calc(58 * var(--u)); top: calc(50vh - 29 * var(--u)); margin-top: var(--vs-marca-y, 92vh); /* entra depois da abertura: a vitrine do produto fica limpa */ margin-left: var(--vs-marca-x, 50%); }
@media (max-width: 820px) { .vs-marca { --u: 5px; top: calc(56vh - 29 * var(--u)); } }
.vs-marca > span { position: absolute; transition: opacity 520ms var(--vs-curva); }
.vs-marca .mf-grade, .vs-marca .mf-sinal { inset: 0; }
.vs-marca .mf-grade { background: rgba(16, 26, 44, .16); -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; }
.vs-marca .mf-sinal { background-color: var(--sinal, #B93820); opacity: .82; -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; }
.vs-marca .mf-halo, .vs-marca .mf-propaga { border-radius: 50%; background-color: var(--sinal, #B93820); }
.vs-marca .mf-halo { width: calc(34 * var(--u)); height: calc(34 * var(--u)); left: calc(29 * var(--u)); top: calc(12 * var(--u)); opacity: .55;
  -webkit-mask: radial-gradient(closest-side, rgba(0,0,0,.50) 0%, rgba(0,0,0,.20) 38%, transparent 100%); mask: radial-gradient(closest-side, rgba(0,0,0,.50) 0%, rgba(0,0,0,.20) 38%, transparent 100%); }
.vs-marca .mf-propaga { width: calc(120 * var(--u)); height: calc(120 * var(--u)); left: calc(-14 * var(--u)); top: calc(-31 * var(--u)); opacity: .5;
  -webkit-mask: radial-gradient(closest-side, rgba(0,0,0,.20) 0%, rgba(0,0,0,.08) 45%, transparent 100%); mask: radial-gradient(closest-side, rgba(0,0,0,.20) 0%, rgba(0,0,0,.08) 45%, transparent 100%); }
/* Texto solto sobre a marca: a parte cruzada vira marca-d'água (contraste do texto mantido). */
.vs-marca.grade-discreta .mf-grade { opacity: .28; }
.vs-marca.sinal-discreto .mf-sinal { opacity: .08; }
.vs-marca.sinal-discreto .mf-halo, .vs-marca.sinal-discreto .mf-propaga { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .vs-marca .mf-halo { animation: vs-pulsa 7s ease-in-out infinite; }
}
@keyframes vs-pulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
/* Cartão sobre a marca: desfoque e vidro um pouco mais denso, para o texto do cartão manter contraste. */
.sobre-marca { -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%); }
.sobre-marca:not(.faixa):not(.h-escura):not(.h-fim):not(.fechamento):not(aside) { background: linear-gradient(160deg, rgba(255, 255, 255, .92) 0%, rgba(250, 252, 255, .85) 55%, rgba(244, 247, 252, .89) 100%); }
@media print { .vs-marca-trilho { display: none; } }

/* Aparelho lento (vidro-site.js mede): fundo parado e sem desfoque; o resto fica igual. */
html.vs-economico::after { animation: none; }
.vs-economico .vs-marca .mf-halo { animation: none; }
.vs-economico .sobre-marca { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Caixa escura da calculadora (para RH): cantos do vidro e rótulo claro (o cinza de antes ficava com contraste 3,2:1 no escuro). */
.calc-saida { border-radius: var(--vs-raio); box-shadow: 0 24px 48px -30px rgba(11, 19, 32, .5); }
.calc-saida .rotulo { color: var(--faixa-suave, #C0CCDA); }

/* Cabeçalho claro sobre as ilhas escuras: um pouco mais denso, para os links manterem 4,5:1. */
@supports (backdrop-filter: blur(8px)) { .cabeca { background: rgba(255, 255, 255, .9); } }