/* ===========================================================
   RHI F1rst — tema "fable"
   Extraído/adaptado de docs/referencia-tema/{home-fable-v2,curso-fable,catalogo-fable}.html
   Mantém nomes de classe já referenciados pelas páginas (card-lift, nc-card, pdot, rise, hazard, eyebrow).
   =========================================================== */

:root {
  --navy: #0a1f33;
  --deep: #071624;
  --ember: #f1521c;
  --ember2: #ff6a33;
  --mist: #eef2f7;
  --apto: #16a34a;
  --fog: #9db2c6;
  --hairline: rgba(157, 178, 198, .16);
  --psi: #9e2233;
  --psi2: #ef6b78;
  --ind: #1f6fb0;
  --ind2: #4f9be0;
  --tmp: #7c3aed;
  --tmp2: #a78bfa;
  --ctr: #0d9488;
  --ctr2: #2dd4bf;
  --eqp: #9a3412;
  --eqp2: #d97757;
  --rst: #0891b2;
  --rst2: #22d3ee;
  --cnt: #db2777;
  --cnt2: #f472b6;
  --prj: #4f46e5;
  --prj2: #818cf8;
  --sal: #5a9e1a;
  --sal2: #8ed13a;
  --fin: #059669;
  --fin2: #34d399;
}

/* ---------- Type roles ---------- */
.display {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 125;
  font-stretch: 125%;
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: .96;
  text-transform: uppercase;
}
.display-cond {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 78;
  font-stretch: 78%;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1;
}
.eyebrow {
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ember2);
}
.mono-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nr-code {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 125;
  font-stretch: 125%;
  font-weight: 900;
  line-height: .9;
}

/* ---------- Hazard tape (vernáculo do tema) ---------- */
.tape, .hazard {
  height: 10px;
  background: repeating-linear-gradient(-45deg, var(--ember) 0 14px, var(--deep) 14px 28px);
}
.tape-thin {
  height: 5px;
  background: repeating-linear-gradient(-45deg, var(--ember) 0 9px, transparent 9px 18px);
  opacity: .85;
}

/* ---------- Blueprint (grid ambiente do hero) ---------- */
.blueprint {
  background-image:
    linear-gradient(rgba(157, 178, 198, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157, 178, 198, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, black 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, black 30%, transparent 78%);
}

/* ---------- Lanyard + credencial (elemento assinatura) ---------- */
.lanyard {
  width: 34px;
  background: repeating-linear-gradient(-45deg, var(--ember) 0 11px, #b93a10 11px 22px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), inset 0 0 14px rgba(0, 0, 0, .35);
}
.lanyard-clip {
  width: 46px; height: 22px;
  background: linear-gradient(#c8d4e0, #8fa2b5 60%, #67788a);
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .55);
  position: relative;
}
.lanyard-clip::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 22px; height: 6px; transform: translate(-50%, -50%);
  background: var(--deep); border-radius: 3px;
}

.cred-card {
  background: linear-gradient(160deg, #10304e 0%, #0b2440 55%, #081b31 100%);
  border: 1px solid rgba(157, 178, 198, .28);
  border-radius: 16px;
  box-shadow:
    0 30px 60px -18px rgba(0, 0, 0, .65),
    0 0 0 1px rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}
.cred-sheen {
  position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .075) 45%, transparent 60%);
  background-size: 250% 100%;
  animation: sheen 7s ease-in-out infinite;
}
@keyframes sheen { 0%, 55%, 100% { background-position: 120% 0; } 75% { background-position: -30% 0; } }
.cred-float { animation: floaty 7s ease-in-out infinite; transform-origin: top center; }
@keyframes floaty { 0%, 100% { transform: rotate(-1.1deg); } 50% { transform: rotate(1.1deg); } }

.status-apto {
  background: rgba(22, 163, 74, .16);
  border: 1px solid rgba(22, 163, 74, .55);
  color: #4ade80;
}

/* ---------- Pulse dot (mantém .pdot, nome já usado nas páginas) ---------- */
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.pdot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ember); display: inline-block;
  animation: pulse-dot 1.5s ease-in-out infinite;
}
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }

/* ---------- Botões ---------- */
.btn-ember {
  background: var(--ember);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .2s ease;
}
.btn-ember:hover { background: var(--ember2); transform: translateY(-1px); color: #fff; }
.btn-ghost {
  border: 1px solid rgba(157, 178, 198, .4);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.btn-ghost:hover { border-color: var(--ember2); background: rgba(241, 82, 28, .08); }

:focus-visible { outline: 2px solid var(--ember2); outline-offset: 3px; border-radius: 4px; }

/* ---------- Cards de placar (nr-card) + acento por categoria (campo `cor` do registro) ---------- */
.nr-card, .nc-card {
  border: 1px solid var(--hairline);
  border-top: 3px solid transparent;
  background: linear-gradient(180deg, rgba(14, 42, 68, .55), rgba(10, 31, 51, .2));
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.nr-card:hover, .nr-card:focus-within, .nc-card:hover, .nc-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(241, 82, 28, .6);
  background: linear-gradient(180deg, rgba(16, 48, 78, .75), rgba(10, 31, 51, .35));
}
.nr-card .nr-icon { color: var(--ember2); }

/* t-psi → vermelho (categoria psicossocial) */
.nr-card.cor-t-psi { border-top-color: var(--psi); }
.nr-card.cor-t-psi:hover, .nr-card.cor-t-psi:focus-within {
  border-color: rgba(239, 107, 120, .6);
  box-shadow: 0 22px 44px -26px rgba(158, 34, 51, .6);
}
.nr-card.cor-t-psi .nr-icon { color: var(--psi2); }

/* t-ind → azul (operações industriais) */
.nr-card.cor-t-ind { border-top-color: var(--ind); }
.nr-card.cor-t-ind:hover, .nr-card.cor-t-ind:focus-within {
  border-color: rgba(79, 155, 224, .6);
  box-shadow: 0 22px 44px -26px rgba(31, 111, 176, .6);
}
.nr-card.cor-t-ind .nr-icon { color: var(--ind2); }

/* t-nr → verde (NR / capacitação, ecoa "apto") */
.nr-card.cor-t-nr { border-top-color: var(--apto); }
.nr-card.cor-t-nr:hover, .nr-card.cor-t-nr:focus-within {
  border-color: rgba(74, 222, 128, .6);
  box-shadow: 0 22px 44px -26px rgba(22, 163, 74, .6);
}
.nr-card.cor-t-nr .nr-icon { color: #4ade80; }

/* t-out → ember (comunicação / financeiro / outros) */
.nr-card.cor-t-out { border-top-color: var(--ember); }
.nr-card.cor-t-out:hover, .nr-card.cor-t-out:focus-within {
  border-color: rgba(255, 106, 51, .6);
  box-shadow: 0 22px 44px -26px rgba(241, 82, 28, .6);
}
.nr-card.cor-t-out .nr-icon { color: var(--ember2); }

/* t-tmp → violeta (Ponto & Tempo / Tempo & Afastamento) */
.nr-card.cor-t-tmp { border-top-color: var(--tmp); }
.nr-card.cor-t-tmp:hover, .nr-card.cor-t-tmp:focus-within {
  border-color: rgba(167, 139, 250, .6);
  box-shadow: 0 22px 44px -26px rgba(124, 58, 237, .6);
}
.nr-card.cor-t-tmp .nr-icon { color: var(--tmp2); }

/* t-ctr → teal (Contratação & Convocação) */
.nr-card.cor-t-ctr { border-top-color: var(--ctr); }
.nr-card.cor-t-ctr:hover, .nr-card.cor-t-ctr:focus-within {
  border-color: rgba(45, 212, 191, .6);
  box-shadow: 0 22px 44px -26px rgba(13, 148, 136, .6);
}
.nr-card.cor-t-ctr .nr-icon { color: var(--ctr2); }

/* t-eqp → cobre/telha (Equipamentos NR-12) */
.nr-card.cor-t-eqp { border-top-color: var(--eqp); }
.nr-card.cor-t-eqp:hover, .nr-card.cor-t-eqp:focus-within {
  border-color: rgba(217, 119, 87, .6);
  box-shadow: 0 22px 44px -26px rgba(154, 52, 18, .6);
}
.nr-card.cor-t-eqp .nr-icon { color: var(--eqp2); }

/* t-rst → ciano (Rastreador / telemetria) */
.nr-card.cor-t-rst { border-top-color: var(--rst); }
.nr-card.cor-t-rst:hover, .nr-card.cor-t-rst:focus-within {
  border-color: rgba(34, 211, 238, .6);
  box-shadow: 0 22px 44px -26px rgba(8, 145, 178, .6);
}
.nr-card.cor-t-rst .nr-icon { color: var(--rst2); }

/* t-cnt → rosa (Contábil & Folha) */
.nr-card.cor-t-cnt { border-top-color: var(--cnt); }
.nr-card.cor-t-cnt:hover, .nr-card.cor-t-cnt:focus-within {
  border-color: rgba(244, 114, 182, .6);
  box-shadow: 0 22px 44px -26px rgba(219, 39, 119, .6);
}
.nr-card.cor-t-cnt .nr-icon { color: var(--cnt2); }

/* t-prj → índigo (Projetos) */
.nr-card.cor-t-prj { border-top-color: var(--prj); }
.nr-card.cor-t-prj:hover, .nr-card.cor-t-prj:focus-within {
  border-color: rgba(129, 140, 248, .6);
  box-shadow: 0 22px 44px -26px rgba(79, 70, 229, .6);
}
.nr-card.cor-t-prj .nr-icon { color: var(--prj2); }
.mod-card.cor-t-prj .mod-thumb { background: linear-gradient(135deg, #1e1b4b 0%, var(--prj) 55%, var(--prj2) 100%); }
.subsite-hero.cor-t-prj { --mod-accent: var(--prj2); --mod-deep: #1e1b4b; }
.cor-t-prj { --mod-accent: var(--prj2); }
.modulo-modal-head.cor-t-prj { background: linear-gradient(135deg, #1e1b4b 0%, var(--prj) 55%, var(--prj2) 100%); }

/* t-sal → verde-folha (RHI Salas / reuniões & transmissões) */
.nr-card.cor-t-sal { border-top-color: var(--sal); }
.nr-card.cor-t-sal:hover, .nr-card.cor-t-sal:focus-within {
  border-color: rgba(142, 209, 58, .6);
  box-shadow: 0 22px 44px -26px rgba(90, 158, 26, .6);
}
.nr-card.cor-t-sal .nr-icon { color: var(--sal2); }
.mod-card.cor-t-sal .mod-thumb { background: linear-gradient(135deg, #14300a 0%, var(--sal) 55%, var(--sal2) 100%); }
.subsite-hero.cor-t-sal { --mod-accent: var(--sal2); --mod-deep: #14300a; }
.cor-t-sal { --mod-accent: var(--sal2); }
.modulo-modal-head.cor-t-sal { background: linear-gradient(135deg, #14300a 0%, var(--sal) 55%, var(--sal2) 100%); }

/* t-fin → esmeralda (Fiscal & Financeiro / dinheiro) */
.nr-card.cor-t-fin { border-top-color: var(--fin); }
.nr-card.cor-t-fin:hover, .nr-card.cor-t-fin:focus-within {
  border-color: rgba(52, 211, 153, .6);
  box-shadow: 0 22px 44px -26px rgba(5, 150, 105, .6);
}
.nr-card.cor-t-fin .nr-icon { color: var(--fin2); }
.mod-card.cor-t-fin .mod-thumb { background: linear-gradient(135deg, #04231b 0%, var(--fin) 55%, var(--fin2) 100%); }
.subsite-hero.cor-t-fin { --mod-accent: var(--fin2); --mod-deep: #04231b; }
.cor-t-fin { --mod-accent: var(--fin2); }
.modulo-modal-head.cor-t-fin { background: linear-gradient(135deg, #04231b 0%, var(--fin) 55%, var(--fin2) 100%); }

/* ---------- Grade de módulos: stats mono sob o eyebrow ---------- */
.mod-stats-line { color: var(--fog); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.mod-stats-dot { color: var(--ember2); }

/* ---------- Grade de módulos: cabeçalho de grupo por categoria (padrão dos grupos do catálogo) ---------- */
.mod-group-tag {
  color: var(--fog);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: .3rem .8rem;
  white-space: nowrap;
}
.mod-group-rule {
  background: linear-gradient(90deg, rgba(255, 106, 51, .55), transparent);
}

/* ---------- Grade de módulos: thumb animado (padrão dos cards de NR do catálogo tema v2) ---------- */
.mod-card { display: flex; flex-direction: column; }
.mod-thumb {
  position: relative;
  height: 118px;
  overflow: hidden;
  background: linear-gradient(135deg, #33210c 0%, var(--ember) 55%, var(--ember2) 100%);
}
.mod-card.cor-t-psi .mod-thumb { background: linear-gradient(135deg, #5c1420 0%, var(--psi) 55%, var(--psi2) 100%); }
.mod-card.cor-t-nr  .mod-thumb { background: linear-gradient(135deg, #0c4a26 0%, var(--apto) 55%, #4ade80 100%); }
.mod-card.cor-t-ind .mod-thumb { background: linear-gradient(135deg, #0f2f4d 0%, var(--ind) 55%, var(--ind2) 100%); }
.mod-card.cor-t-out .mod-thumb { background: linear-gradient(135deg, #7a2a0c 0%, var(--ember) 55%, var(--ember2) 100%); }
.mod-card.cor-t-tmp .mod-thumb { background: linear-gradient(135deg, #2e1065 0%, var(--tmp) 55%, var(--tmp2) 100%); }
.mod-card.cor-t-ctr .mod-thumb { background: linear-gradient(135deg, #042f2e 0%, var(--ctr) 55%, var(--ctr2) 100%); }
.mod-card.cor-t-eqp .mod-thumb { background: linear-gradient(135deg, #2a1206 0%, var(--eqp) 55%, var(--eqp2) 100%); }
.mod-card.cor-t-rst .mod-thumb { background: linear-gradient(135deg, #083344 0%, var(--rst) 55%, var(--rst2) 100%); }
.mod-card.cor-t-cnt .mod-thumb { background: linear-gradient(135deg, #500724 0%, var(--cnt) 55%, var(--cnt2) 100%); }

.mod-thumb-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px);
  background-size: 24px 24px;
  mix-blend-mode: overlay;
}

.mod-thumb-glow {
  position: absolute; left: 50%; top: 52%; width: 96px; height: 96px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .4), transparent 62%);
  animation: mod-thumb-glow-pulse 3s ease-in-out infinite;
  transition: opacity .25s ease;
  pointer-events: none;
}
@keyframes mod-thumb-glow-pulse {
  0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: .7; transform: translate(-50%, -50%) scale(1.16); }
}
.mod-card:hover .mod-thumb-glow, .mod-card:focus-within .mod-thumb-glow { opacity: 1; }

.mod-thumb-cat {
  position: absolute; top: 10px; left: 12px; z-index: 2;
  font-family: "IBM Plex Mono", monospace;
  font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.mod-thumb-codigo {
  position: absolute; top: 6px; right: 12px; z-index: 2;
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 125;
  font-stretch: 125%;
  font-weight: 900;
  font-size: 20px; letter-spacing: .01em;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
.mod-thumb-icone {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  font-size: 2.5rem; z-index: 1;
  color: #fff;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, .45));
  animation: mod-thumb-icon-pulse 2.6s ease-in-out infinite;
}
@keyframes mod-thumb-icon-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1) translateY(0); opacity: .92; }
  50% { transform: translate(-50%, -50%) scale(1.08) translateY(-3px); opacity: 1; }
}
.mod-card:hover .mod-thumb-icone, .mod-card:focus-within .mod-thumb-icone {
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, .65));
}

/* Variante grande da grade da home (4 cards-produto, mais altos/imponentes) */
.mod-thumb-lg { height: 168px; }
.mod-thumb-lg .mod-thumb-icone { font-size: 3.2rem; }
.mod-thumb-lg .mod-thumb-glow { width: 128px; height: 128px; }
.mod-thumb-lg .mod-thumb-codigo { font-size: 26px; }
.mod-thumb-lg .mod-thumb-cat { font-size: 9.5px; }

.mod-card-rodape { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.mod-recursos-badge {
  display: inline-flex; align-items: baseline; gap: .35rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fog);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: .3rem .7rem;
}
.mod-recursos-badge b { color: var(--ember2); font-size: .82rem; }

/* ===========================================================
   Subsite de módulo (pages/modulo.php) — template dirigido pelo registro
   =========================================================== */
.subsite-hero { position: relative; overflow: hidden; }
.subsite-hero.cor-t-psi { --mod-accent: var(--psi2); --mod-deep: #4a1019; }
.subsite-hero.cor-t-nr  { --mod-accent: #4ade80;      --mod-deep: #0a3a1f; }
.subsite-hero.cor-t-ind { --mod-accent: var(--ind2);  --mod-deep: #0d2740; }
.subsite-hero.cor-t-out { --mod-accent: var(--ember2); --mod-deep: #5f210a; }
.subsite-hero.cor-t-tmp { --mod-accent: var(--tmp2); --mod-deep: #2a1055; }
.subsite-hero.cor-t-ctr { --mod-accent: var(--ctr2); --mod-deep: #052e2c; }
.subsite-hero.cor-t-eqp { --mod-accent: var(--eqp2); --mod-deep: #2a1206; }
.subsite-hero.cor-t-rst { --mod-accent: var(--rst2); --mod-deep: #072b39; }
.subsite-hero.cor-t-cnt { --mod-accent: var(--cnt2); --mod-deep: #45061f; }
.subsite-hero { background: linear-gradient(158deg, var(--mod-deep, #0e2a44) 0%, var(--navy) 58%); }
.subsite-hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 18% 6%, var(--mod-accent, var(--ember2)), transparent 46%);
  opacity: .16;
}
.subsite-hero-icone {
  width: 3.5rem; height: 3.5rem; border-radius: 14px; flex: none;
  display: grid; place-items: center; font-size: 1.7rem;
  color: var(--mod-accent, var(--ember2));
  background: rgba(157, 178, 198, .08);
  border: 1px solid var(--hairline);
}
.subsite-badge {
  display: inline-flex; align-items: baseline; gap: .3rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fog); border: 1px solid var(--hairline);
  border-radius: 999px; padding: .3rem .75rem;
}
.subsite-badge b { color: var(--mod-accent, var(--ember2)); font-size: .82rem; }

/* Dor → virada */
.subsite-dor { border-left: 2px solid rgba(239, 68, 68, .5); }
.subsite-dor .subsite-dor-ico { color: #f87171; }
.subsite-vira .subsite-vira-ico { color: var(--apto); }

/* Jornada: imagem alternando lado a lado com o texto */
.subsite-jornada-item { align-items: center; }
.subsite-shot {
  width: 100%; border-radius: 12px; border: 1px solid var(--hairline);
  cursor: zoom-in; display: block;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .7);
  transition: border-color .2s ease, transform .2s ease;
}
.subsite-shot:hover { border-color: rgba(241, 82, 28, .6); transform: translateY(-3px); }
.subsite-num { color: var(--mod-accent, var(--ember2)); }

/* Acento por categoria disponível fora do hero (seções ricas + PWA) */
.cor-t-psi { --mod-accent: var(--psi2); }
.cor-t-nr  { --mod-accent: #4ade80; }
.cor-t-ind { --mod-accent: var(--ind2); }
.cor-t-out { --mod-accent: var(--ember2); }
.cor-t-tmp { --mod-accent: var(--tmp2); }
.cor-t-ctr { --mod-accent: var(--ctr2); }
.cor-t-eqp { --mod-accent: var(--eqp2); }
.cor-t-rst { --mod-accent: var(--rst2); }
.cor-t-cnt { --mod-accent: var(--cnt2); }

/* ---------- Seções ricas (subsite.secoes) — bloco alternado imagem/texto ---------- */
.subsite-sec-imgs { display: flex; flex-direction: column; gap: 1rem; }
.subsite-sec-shot {
  width: 100%; border-radius: 12px; border: 1px solid var(--hairline);
  cursor: zoom-in; display: block;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .7);
  transition: border-color .2s ease, transform .2s ease;
}
.subsite-sec-shot:hover { border-color: rgba(241, 82, 28, .6); transform: translateY(-3px); }
.subsite-sec-bullet {
  display: flex; align-items: flex-start; gap: .7rem;
  border: 1px solid var(--hairline); border-radius: 12px;
  padding: .8rem .9rem; background: rgba(157, 178, 198, .035);
  transition: border-color .2s ease, background .2s ease;
}
.subsite-sec-bullet:hover { border-color: rgba(157, 178, 198, .3); background: rgba(157, 178, 198, .06); }
.subsite-sec-bullet > i {
  color: var(--mod-accent, var(--ember2)); font-size: 1.05rem;
  line-height: 1.2; flex: none; margin-top: .1rem;
}
.subsite-sec-bullet-t {
  font-weight: 600; font-size: .9rem; color: var(--mist);
  line-height: 1.25; margin-bottom: .2rem;
}
.subsite-sec-bullet-d { font-size: .8rem; line-height: 1.45; color: rgba(157, 178, 198, .82); }

/* ---------- Seção PWA (subsite.pwa) — "No bolso do colaborador" ---------- */
.subsite-pwa-chip {
  font-family: "IBM Plex Mono", monospace;
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fog);
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: .4rem .8rem; background: rgba(157, 178, 198, .05);
}
.subsite-pwa-rail {
  display: flex; gap: 1.75rem;
  overflow-x: auto; padding: .5rem .25rem 1.25rem;
  scroll-snap-type: x proximity; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.subsite-pwa-item {
  flex: none; width: 264px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center;
}
/* Moldura de celular — o showpiece */
/* iPhone atual: bezel fino uniforme, borda "titânio", Dynamic Island */
.pwa-phone {
  position: relative; width: 300px; padding: 9px;
  border: 0; border-radius: 52px;
  background: linear-gradient(155deg, #3d4650 0%, #171d24 30%, #0a0e13 70%, #232b34 100%);
  box-shadow:
    0 44px 70px -30px rgba(0, 0, 0, .9),
    0 0 0 1.5px rgba(120, 132, 145, .45),
    inset 0 0 0 1px rgba(0, 0, 0, .8);
  cursor: zoom-in; display: block;
  transition: transform .3s ease, box-shadow .3s ease;
}
/* botões laterais (volume à esquerda, power à direita) */
.pwa-phone::before {
  content: ""; position: absolute; left: -2.5px; top: 108px;
  width: 2.5px; height: 88px; border-radius: 2px 0 0 2px;
  background: linear-gradient(180deg, #4a545f, #171d24 30%, #171d24 44%, #4a545f 50%, #171d24 78%, #4a545f);
}
.pwa-phone::after {
  content: ""; position: absolute; right: -2.5px; top: 150px;
  width: 2.5px; height: 64px; border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, #4a545f, #171d24 40%, #171d24 60%, #4a545f);
}
.pwa-phone:hover, .pwa-phone:focus-visible, .pwa-phone:focus {
  transform: translateY(-7px);
  box-shadow:
    0 54px 84px -28px rgba(0, 0, 0, .95),
    0 0 0 1.5px rgba(150, 164, 178, .6),
    inset 0 0 0 1px rgba(0, 0, 0, .8);
  outline: none !important;
}
/* Dynamic Island: pílula flutuante, alinhada com a barra de status da captura */
.pwa-phone-notch {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 88px; height: 25px; border-radius: 14px;
  background: #000; z-index: 3;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03), 0 0 6px rgba(0, 0, 0, .8);
}
.pwa-phone-screen {
  position: relative; display: block;
  /* mesma proporção das capturas (iPhone 390×844): a tela acompanha a imagem, sem corte */
  aspect-ratio: 390 / 844; height: auto; overflow: hidden;
  border-radius: 44px; background: #04080d;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6);
}
.pwa-phone-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* fade sutil no rodapé: sinaliza que a tela tem mais conteúdo (abre completa no lightbox) */
.pwa-phone-screen::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 72px;
  background: linear-gradient(to top, rgba(5, 9, 15, .32), transparent);
  pointer-events: none;
}
.pwa-phone-zoom {
  position: absolute; bottom: 22px; right: 22px; z-index: 4;
  width: 2.3rem; height: 2.3rem; border-radius: 999px;
  display: grid; place-items: center;
  color: #fff; font-size: .85rem;
  background: rgba(7, 22, 36, .6);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transform: scale(.85);
  transition: opacity .25s ease, transform .25s ease;
}
.pwa-phone:hover .pwa-phone-zoom, .pwa-phone:focus-visible .pwa-phone-zoom {
  opacity: 1; transform: scale(1);
}
.subsite-pwa-cap {
  margin-top: 1.1rem; max-width: 240px; text-align: center;
  color: rgba(246, 248, 251, .72); font-size: .9rem; line-height: 1.45;
}
@media (max-width: 640px) {
  .subsite-pwa-item, .pwa-phone { width: 232px; }
  .pwa-phone-screen { height: auto; }
}
/* Toque (sem mouse): nada de levitar nem anel aceso preso depois do tap */
@media (hover: none) {
  .pwa-phone:hover, .pwa-phone:focus-visible, .pwa-phone:focus, .pwa-phone:active {
    transform: none;
    box-shadow:
      0 44px 70px -30px rgba(0, 0, 0, .9),
      0 0 0 1.5px rgba(120, 132, 145, .45),
      inset 0 0 0 1px rgba(0, 0, 0, .8);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pwa-phone, .pwa-phone-zoom { transition: none !important; }
}

/* ---------- card-lift (hover genérico, usado fora do grid de módulos) ---------- */
.card-lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease; }
.card-lift:hover {
  transform: translateY(-4px);
  border-color: rgba(241, 82, 28, .6);
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .6);
}

/* ---------- Reveal on scroll + entrada da hero ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .6s ease both; }

/* ---------- Modal de módulos ("por dentro") ---------- */
.modulo-modal-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(7, 22, 36, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
}
.modulo-modal-overlay[hidden] { display: none; }

.modulo-modal-panel {
  width: 100%; max-width: 48rem; /* max-w-3xl */
  max-height: 85vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}

.modulo-modal-head {
  position: relative;
  display: flex; align-items: center; gap: 1rem;
  padding: 1.5rem 3.25rem 1.5rem 1.5rem;
  flex: none;
}
.modulo-modal-head.cor-t-psi { background: linear-gradient(135deg, #5c1420 0%, var(--psi) 55%, var(--psi2) 100%); }
.modulo-modal-head.cor-t-nr  { background: linear-gradient(135deg, #0c4a26 0%, var(--apto) 55%, #4ade80 100%); }
.modulo-modal-head.cor-t-ind { background: linear-gradient(135deg, #0f2f4d 0%, var(--ind) 55%, var(--ind2) 100%); }
.modulo-modal-head.cor-t-out { background: linear-gradient(135deg, #7a2a0c 0%, var(--ember) 55%, var(--ember2) 100%); }
.modulo-modal-head.cor-t-tmp { background: linear-gradient(135deg, #2e1065 0%, var(--tmp) 55%, var(--tmp2) 100%); }
.modulo-modal-head.cor-t-ctr { background: linear-gradient(135deg, #042f2e 0%, var(--ctr) 55%, var(--ctr2) 100%); }
.modulo-modal-head.cor-t-eqp { background: linear-gradient(135deg, #2a1206 0%, var(--eqp) 55%, var(--eqp2) 100%); }
.modulo-modal-head.cor-t-rst { background: linear-gradient(135deg, #083344 0%, var(--rst) 55%, var(--rst2) 100%); }
.modulo-modal-head.cor-t-cnt { background: linear-gradient(135deg, #500724 0%, var(--cnt) 55%, var(--cnt2) 100%); }

.modulo-modal-icone {
  font-size: 2.1rem;
  color: rgba(255, 255, 255, .92);
  flex: none;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.modulo-modal-head-txt .mono-label { color: rgba(255, 255, 255, .78); }
.modulo-modal-head-tags { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* ---------- Linha de badges do modal (abaixo do título): recursos + categoria + status ---------- */
.modulo-modal-badges { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.modulo-modal-badge {
  display: inline-flex; align-items: baseline; gap: .3rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: .3rem .75rem;
  color: var(--fog);
}
.modulo-modal-badge b { color: var(--ember2); font-size: .85rem; }

.modulo-modal-close {
  position: absolute; top: .9rem; right: .9rem;
  width: 2.1rem; height: 2.1rem; border-radius: 999px;
  background: rgba(7, 22, 36, .35);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff; font-size: 1rem; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.modulo-modal-close:hover { background: rgba(7, 22, 36, .6); transform: scale(1.05); }

.modulo-modal-body {
  overflow-y: auto;
  padding: 1.75rem;
  -webkit-overflow-scrolling: touch;
}

.modulo-modal-funcoes { list-style: none; margin: 0; padding: 0; }
.modulo-modal-funcoes li {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .5rem 0;
  font-size: .92rem;
  color: rgba(246, 248, 251, .85);
}
.modulo-modal-funcoes li .bullet { color: var(--apto); flex: none; line-height: 1.4; }
@media (min-width: 640px) {
  .modulo-modal-funcoes { columns: 2; column-gap: 1.5rem; }
  .modulo-modal-funcoes li { break-inside: avoid; }
}

.modulo-modal-galeria {
  display: flex; gap: .75rem; overflow-x: auto;
  padding-bottom: .5rem; scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.modulo-modal-galeria img {
  flex: none; height: 150px; width: auto;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  scroll-snap-align: start;
  cursor: zoom-in;
  transition: border-color .2s ease, transform .2s ease;
}
.modulo-modal-galeria img:hover { border-color: rgba(241, 82, 28, .6); transform: translateY(-2px); }

/* ---------- Áudio (hook) — player pill acima de "O que ele faz" ---------- */
.modulo-audio-pill {
  display: flex; align-items: center; gap: .85rem;
  background: rgba(157, 178, 198, .08);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: .55rem .9rem;
  margin-bottom: 1.25rem;
  width: fit-content;
}
.modulo-audio-btn {
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: 999px;
  border: none; background: var(--ember); color: #fff;
  display: grid; place-items: center; font-size: .85rem; cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.modulo-audio-btn:hover { background: var(--ember2); transform: scale(1.05); }
.modulo-audio-pill .mono-label { color: var(--fog); }
.modulo-audio-bars { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.modulo-audio-bars span {
  width: 3px; height: 30%; border-radius: 2px;
  background: var(--fog); opacity: .5;
  transition: opacity .2s ease;
}
.modulo-audio-pill.playing .mono-label,
.modulo-audio-pill.playing .modulo-audio-bars span { color: var(--ember2); opacity: 1; }
.modulo-audio-pill.playing .modulo-audio-bars span {
  background: var(--ember2);
  animation: audio-bar 1s ease-in-out infinite;
}
.modulo-audio-bars span:nth-child(1) { animation-delay: 0s; }
.modulo-audio-bars span:nth-child(2) { animation-delay: .12s; }
.modulo-audio-bars span:nth-child(3) { animation-delay: .24s; }
.modulo-audio-bars span:nth-child(4) { animation-delay: .36s; }
.modulo-audio-bars span:nth-child(5) { animation-delay: .48s; }
@keyframes audio-bar {
  0%, 100% { height: 30%; }
  50% { height: 100%; }
}

/* ---------- Lightbox das telas do módulo ---------- */
.rhi-lightbox-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(7, 22, 36, .95);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
}
.rhi-lightbox-overlay[hidden] { display: none; }
.rhi-lightbox-img {
  max-width: 95vw; max-height: 90vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .7);
}
.rhi-lightbox-close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  width: 2.4rem; height: 2.4rem; border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff; font-size: 1.1rem; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.rhi-lightbox-close:hover { background: rgba(255, 255, 255, .18); transform: scale(1.05); }
.rhi-lightbox-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 3rem; height: 3rem; border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff; font-size: 1.5rem; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  transition: background .2s ease;
}
.rhi-lightbox-arrow:hover { background: rgba(255, 255, 255, .18); }
.rhi-lightbox-arrow[hidden] { display: none; }
.rhi-lightbox-prev { left: 1rem; }
.rhi-lightbox-next { right: 1rem; }
.rhi-lightbox-counter {
  position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  padding: .3rem .8rem;
}

.modulo-modal-rodape {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  margin-top: 1.5rem;
}
.modulo-modal-link-pagina {
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--fog);
  text-decoration: none;
  transition: color .2s ease;
}
.modulo-modal-link-pagina:hover { color: var(--ember2); }

@media (max-width: 640px) {
  .modulo-modal-overlay { padding: 0; align-items: flex-end; }
  .modulo-modal-panel {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
  }
}

/* ===========================================================
   Desafio Preditivo — modal-jogo (assets/js/desafio.js)
   =========================================================== */
.desafio-overlay {
  position: fixed; inset: 0; z-index: 75;
  background: rgba(7, 22, 36, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
}
.desafio-overlay[hidden] { display: none; }

.desafio-panel {
  width: 100%; max-width: 34rem;
  max-height: 85vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}

.desafio-close {
  position: absolute; top: .9rem; right: .9rem; z-index: 2;
  width: 2.1rem; height: 2.1rem; border-radius: 999px;
  background: rgba(7, 22, 36, .5);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff; font-size: 1rem; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.desafio-close:hover { background: rgba(7, 22, 36, .75); transform: scale(1.05); }

.desafio-dots { display: flex; align-items: center; gap: .5rem; padding: 1.5rem 1.5rem 0; flex: none; }
.desafio-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: rgba(157, 178, 198, .3);
  transition: background .25s ease, transform .25s ease;
}
.desafio-dot.feito { background: var(--apto); }
.desafio-dot.ativo { background: var(--ember2); transform: scale(1.3); }

.desafio-body {
  overflow-y: auto;
  padding: 1.5rem 1.75rem 1.75rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

@keyframes desafio-slide { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
.desafio-step { animation: desafio-slide .35s ease both; }

.desafio-chip {
  border: 1px solid var(--hairline);
  background: rgba(157, 178, 198, .06);
  border-radius: .85rem;
  padding: .85rem 1rem;
  cursor: pointer; text-align: left;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.desafio-chip:hover { border-color: rgba(241, 82, 28, .5); transform: translateY(-2px); }
.desafio-chip.sel {
  border-color: var(--ember2);
  background: rgba(241, 82, 28, .12);
}

.desafio-scan-wrap {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(157, 178, 198, .12);
  position: relative;
}
.desafio-scan-bar {
  position: absolute; inset: 0; width: 40%;
  background: linear-gradient(90deg, transparent, var(--ember2), transparent);
  animation: desafio-scan 1.1s ease-in-out infinite;
}
@keyframes desafio-scan {
  0% { left: -40%; }
  100% { left: 100%; }
}

.desafio-gauge-track {
  height: 14px; border-radius: 999px; overflow: hidden;
  background: rgba(157, 178, 198, .12);
}
.desafio-gauge-fill {
  height: 100%; border-radius: 999px;
  transition: width .8s ease;
}
.desafio-gauge-fill.nivel-moderado { background: linear-gradient(90deg, #eab308, #facc15); }
.desafio-gauge-fill.nivel-alto { background: linear-gradient(90deg, var(--ember), var(--ember2)); }
.desafio-gauge-fill.nivel-critico { background: linear-gradient(90deg, #b91c1c, #ef4444); }
.desafio-nivel-moderado { color: #facc15; }
.desafio-nivel-alto { color: var(--ember2); }
.desafio-nivel-critico { color: #ef4444; }

.desafio-fator-chip {
  border: 1px solid var(--hairline);
  background: rgba(157, 178, 198, .06);
  border-radius: .75rem;
  padding: .6rem .85rem;
  font-size: .85rem;
}

/* Quiz-game (desafio NR-01) */
.desafio-opt {
  display: block; width: 100%; margin-bottom: .6rem;
  line-height: 1.35;
}
.desafio-opt[disabled] { cursor: default; opacity: 1; }
.desafio-opt .desafio-opt-mark { font-weight: 700; margin-right: .35rem; }
.desafio-opt.correta {
  border-color: var(--apto);
  background: rgba(22, 163, 74, .14);
  color: #eafaf0;
}
.desafio-opt.errada {
  border-color: #ef4444;
  background: rgba(239, 68, 68, .12);
  color: #ffe9e9;
}
.desafio-opt.apagada { opacity: .5; }

@keyframes desafio-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.desafio-feedback {
  margin-top: 1rem; border-radius: .85rem;
  padding: .95rem 1.05rem;
  border: 1px solid var(--hairline);
  background: rgba(157, 178, 198, .06);
  animation: desafio-reveal .3s ease both;
}
.desafio-feedback.certo { border-color: rgba(22, 163, 74, .5); background: rgba(22, 163, 74, .08); }
.desafio-feedback.errado { border-color: rgba(239, 68, 68, .45); background: rgba(239, 68, 68, .07); }
.desafio-fb-head { font-weight: 700; display: flex; align-items: center; gap: .45rem; margin-bottom: .4rem; }
.desafio-feedback.certo .desafio-fb-head { color: var(--apto); }
.desafio-feedback.errado .desafio-fb-head { color: #f87171; }
.desafio-fb-texto { font-size: .92rem; line-height: 1.5; }

.desafio-gauge-fill.quiz-baixo { background: linear-gradient(90deg, #b91c1c, #ef4444); }
.desafio-gauge-fill.quiz-medio { background: linear-gradient(90deg, #eab308, #facc15); }
.desafio-gauge-fill.quiz-bom   { background: linear-gradient(90deg, var(--apto), #4ade80); }
.desafio-nivel-quiz-baixo { color: #ef4444; }
.desafio-nivel-quiz-medio { color: #facc15; }
.desafio-nivel-quiz-bom   { color: #4ade80; }

.desafio-auto-list { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.desafio-auto-list li {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; letter-spacing: .02em;
  color: rgba(157, 178, 198, .85);
  padding: .35rem 0; display: flex; align-items: baseline; gap: .5rem;
}
.desafio-auto-list li::before { content: '·'; color: var(--ember2); font-weight: 700; }

@media (max-width: 640px) {
  .desafio-overlay { padding: 0; align-items: flex-end; }
  .desafio-panel {
    max-width: 100%;
    max-height: 92vh;   /* fallback p/ navegadores sem dvh */
    max-height: 92dvh;  /* altura VISÍVEL real do celular: a barra de endereço não corta mais o topo do painel (onde fica o ✕) */
    border-radius: 16px 16px 0 0;
  }
  /* Área de toque maior no ✕ para o dedo no celular */
  .desafio-close { top: .75rem; right: .75rem; width: 2.4rem; height: 2.4rem; }
}

/* ===========================================================
   Setores vivos — simulação do Radar em funcionamento (home #sistema)
   assets/js/setores-vivos.js
   =========================================================== */
.sv-panel {
  background: var(--navy);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 1.25rem 1.25rem 1.4rem;
}
.sv-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: .9rem;
}
.sv-title-row { display: flex; align-items: center; gap: .55rem; }
.sv-sub { color: rgba(157, 178, 198, .55); margin-top: .4rem; }
.sv-voltar {
  border-radius: 999px; padding: .5rem .95rem;
  color: var(--fog); cursor: pointer; white-space: nowrap; flex: none;
}
.sv-voltar:hover { color: var(--mist); }

.sv-stage { display: grid; gap: 1rem; }
@media (min-width: 1024px) {
  .sv-stage.com-card { grid-template-columns: 1fr 280px; align-items: stretch; }
}
.sv-canvas-wrap {
  position: relative; height: 380px;
  background: rgba(7, 22, 36, .55);
  border: 1px solid rgba(157, 178, 198, .1);
  border-radius: 12px; overflow: hidden;
}
@media (max-width: 640px) { .sv-canvas-wrap { height: 300px; } }
.sv-canvas-wrap canvas { display: block; width: 100%; height: 100%; }

.sv-card {
  background: rgba(7, 22, 36, .55);
  border: 1px solid var(--hairline);
  border-radius: 12px; padding: 1.1rem 1.2rem;
  animation: rise .45s ease both;
}
.sv-card-k { color: rgba(157, 178, 198, .5); margin-bottom: .25rem; }

.sv-legenda { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.sv-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: .38rem .75rem;
  color: var(--fog); background: rgba(157, 178, 198, .04);
}
button.sv-chip {
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, color .2s ease;
}
button.sv-chip:hover, button.sv-chip:focus-visible {
  border-color: rgba(241, 82, 28, .55); color: var(--mist); transform: translateY(-2px);
}
.sv-chip-dot { width: 14px; height: 3px; border-radius: 2px; flex: none; }
.sv-chip-dash { width: 14px; height: 0; border-top: 2px dashed rgba(255, 255, 255, .7); flex: none; }
.sv-chip-media { border-style: dashed; }
.sv-chip-eye { color: #60a5fa; font-size: .8rem; line-height: 1; }

.sv-fila { margin-top: 1.1rem; border-top: 1px dashed var(--hairline); padding-top: 1rem; }
.sv-fila-head { color: rgba(157, 178, 198, .7); }
.sv-fila-sub { color: rgba(157, 178, 198, .4); }
.sv-fila-vazio { font-size: .72rem; letter-spacing: .06em; color: rgba(157, 178, 198, .45); padding: .8rem 0 .1rem; }
.sv-fila-item {
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--ember2);
  border-radius: 12px;
  background: rgba(7, 22, 36, .5);
  padding: .9rem 1rem; margin-top: .75rem;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.sv-fila-item.entrou { opacity: 1; transform: none; }
.sv-fila-cego { border-left-color: #60a5fa; }
.sv-fila-titulo { font-weight: 700; font-size: .95rem; color: var(--mist); }
.sv-fila-texto { font-size: .83rem; line-height: 1.45; color: rgba(157, 178, 198, .85); margin: .25rem 0 .7rem; }
.sv-fila-botoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.sv-btn {
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 8px; padding: .45rem .8rem; cursor: pointer;
  border: 1px solid var(--hairline); color: var(--fog); background: transparent;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.sv-btn:hover { color: var(--mist); border-color: rgba(157, 178, 198, .45); }
.sv-btn-ember { background: var(--ember); border-color: var(--ember); color: #fff; }
.sv-btn-ember:hover { background: var(--ember2); border-color: var(--ember2); color: #fff; }
.sv-btn-azul { background: #2563eb; border-color: #2563eb; color: #fff; }
.sv-btn-azul:hover { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.sv-fila-ok {
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem; letter-spacing: .06em; color: #4ade80;
}

/* ===========================================================
   TV + Totem — simulação em retrato (subsite rhi_comunica)
   assets/js/tv-toten.js · aparelhos 100% CSS, slides = "conteúdos gerados"
   =========================================================== */
.tvt-stage {
  display: flex; flex-wrap: wrap; align-items: stretch;
  justify-content: center; gap: 3.5rem 5.5rem;
}
.tvt-item { display: flex; flex-direction: column; margin: 0; }
/* Cena: a base dos aparelhos alinha no "chão" (linha de piso sutil) */
.tvt-scene {
  position: relative; flex: 1;
  display: flex; align-items: flex-end; justify-content: center;
}
.tvt-scene::after {
  content: ""; position: absolute; left: -2.5rem; right: -2.5rem; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(157, 178, 198, .3), transparent);
}

/* ---------- TV de parede: moldura fina, "pendurada" acima do piso ---------- */
.tvt-tv {
  position: relative; width: min(300px, 72vw);
  margin-bottom: 3.4rem; /* na parede, acima da linha do chão */
  padding: 10px; border-radius: 18px;
  background: linear-gradient(155deg, #1d2937 0%, #0d151e 58%, #05090f 100%);
  box-shadow:
    0 44px 64px -26px rgba(0, 0, 0, .85),   /* sombra projetada na parede */
    0 0 0 1px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .1);
}

/* ---------- Totem de chão: carcaça clara (como os reais), tela com borda preta ---------- */
.tvt-totem {
  position: relative; width: min(236px, 60vw);
  margin-bottom: 26px; /* espaço ocupado pela base/pedestal */
  padding: 16px 14px 30px;
  border-radius: 22px 22px 10px 10px;
  background: linear-gradient(165deg, #f5f7f9 0%, #dde3e8 48%, #b8c1c9 100%);
  box-shadow:
    0 30px 50px -22px rgba(0, 0, 0, .85),
    0 0 0 1px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -3px 8px rgba(0, 0, 0, .16);
}
/* Moldura preta da tela dentro da carcaça clara */
.tvt-totem .tvt-screen {
  box-shadow: 0 0 0 7px #0a0e13, inset 0 0 0 1px rgba(0, 0, 0, .7);
}
.tvt-totem-base {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  width: 78%; height: 26px;
  background: linear-gradient(180deg, #e6eaee 0%, #b6bfc8 65%, #949ea8 100%);
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
  box-shadow: 0 16px 26px -10px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.tvt-totem-marca {
  position: absolute; left: 0; right: 0; bottom: 8px;
  text-align: center; font-size: .52rem;
  color: rgba(26, 36, 47, .62);
}

/* LED de status (verde) na moldura */
.tvt-led {
  position: absolute; z-index: 4;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--apto);
  box-shadow: 0 0 6px rgba(22, 163, 74, .95);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
.tvt-tv .tvt-led { right: 18px; bottom: 2.5px; }
.tvt-totem .tvt-led { right: 15px; bottom: 12px; }

/* ---------- Tela retrato 9:16 + reflexo de vidro ---------- */
.tvt-screen {
  position: relative; overflow: hidden;
  /* fallback p/ browsers sem aspect-ratio: padding-top mantém o 9:16 */
  height: 0; padding-top: 177.78%;
  border-radius: 10px; background: #04080d;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6);
  font-size: 16px; /* base tipográfica: os slides usam em (o totem reduz) */
}
@supports (aspect-ratio: 9 / 16) {
  .tvt-screen { height: auto; padding-top: 0; aspect-ratio: 9 / 16; }
}
.tvt-totem .tvt-screen { font-size: 13px; border-radius: 12px; }
.tvt-screen::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .07) 50%, transparent 60%);
}

/* ---------- Slides (crossfade via .on, controlado pelo tv-toten.js) ---------- */
.tvt-slide {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 1.15em 1.05em; opacity: 0;
  transition: opacity .6s ease;
}
.tvt-slide.on { opacity: 1; z-index: 2; }
.tvt-kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: .55em; letter-spacing: .2em; text-transform: uppercase;
  opacity: .8; margin-bottom: 1em;
}
.tvt-h { font-size: 1.5em; line-height: 1; color: #fff; margin-bottom: .55em; }
.tvt-sub { font-size: .78em; line-height: 1.5; opacity: .92; }
.tvt-foot {
  position: absolute; left: 1.05em; right: 1.05em; bottom: 1em;
  font-family: "IBM Plex Mono", monospace;
  font-size: .55em; letter-spacing: .14em; text-transform: uppercase;
  opacity: .85;
}

/* 1 · Institucional (ember) */
.tvt-s-inst { background: linear-gradient(165deg, #7a2a0c 0%, var(--ember) 55%, var(--ember2) 100%); color: #fff; }
.tvt-s-inst .tvt-brand {
  position: absolute; left: 1.05em; bottom: 1em;
  border: 1px solid rgba(255, 255, 255, .65); border-radius: .3em;
  padding: .4em .7em;
  font-family: "IBM Plex Mono", monospace;
  font-size: .55em; letter-spacing: .26em; text-transform: uppercase;
}

/* 2 · Comunicado (navy) + QR fake (padrão CSS, não escaneável) */
.tvt-s-com { background: linear-gradient(180deg, #0e2a44, #0a1f33); color: var(--mist); }
.tvt-foot-qr { display: flex; align-items: center; gap: 1.2em; color: var(--fog); }
.tvt-qr {
  position: relative; flex: none;
  width: 4.6em; height: 4.6em; border-radius: .4em; background: #fff;
}
.tvt-qr::before {
  content: ""; position: absolute; left: .55em; top: .55em;
  width: .7em; height: .7em; background: #0a1f33;
  box-shadow: /* quadradinhos: só sugere um QR */
    2.8em 0 0 #0a1f33, 0 2.8em 0 #0a1f33,
    1.4em 0 0 #0a1f33, 2.1em .7em 0 #0a1f33,
    .7em 1.4em 0 #0a1f33, 1.4em 1.4em 0 #0a1f33, 2.8em 1.4em 0 #0a1f33,
    2.1em 2.1em 0 #0a1f33, .7em 2.1em 0 #0a1f33,
    1.4em 2.8em 0 #0a1f33, 2.8em 2.8em 0 #0a1f33;
}

/* 3 · Segurança/SST (teal escuro, pictograma) */
.tvt-s-sst { background: linear-gradient(165deg, #03251f 0%, #0a4a3e 60%, #116e57 100%); color: #eafaf0; }
.tvt-picto { font-size: 2.4em; line-height: 1; color: var(--hi, #ffc400); margin-bottom: .35em; }

/* 4/5 · Quiz de NR (navy + alternativas; resposta certa em verde) */
.tvt-s-quiz { background: linear-gradient(180deg, #12293f, #0a1f33); color: var(--mist); }
.tvt-q { font-size: .92em; font-weight: 700; line-height: 1.35; color: #fff; margin-bottom: 1em; }
.tvt-opt {
  display: block; margin-bottom: .55em;
  border: 1px solid rgba(157, 178, 198, .3); border-radius: .55em;
  background: rgba(157, 178, 198, .07);
  padding: .55em .75em;
  font-size: .72em; line-height: 1.3;
}
.tvt-opt-certa {
  border-color: var(--apto); background: rgba(22, 163, 74, .18);
  color: #4ade80; font-weight: 700;
}
.tvt-opt-apagada { opacity: .45; }
.tvt-explica { font-size: .62em; line-height: 1.5; color: #4ade80; margin-top: .6em; }

/* 6 · Aniversariante (gradiente roxo + avatar de iniciais) */
.tvt-s-niver {
  background: linear-gradient(165deg, #33245e 0%, #5b3fae 55%, #8b6ee0 100%);
  color: #fff; align-items: center; text-align: center;
}
.tvt-s-niver .tvt-avatar {
  width: 3.4em; height: 3.4em; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .18);
  border: 2px solid rgba(255, 255, 255, .55);
  font-weight: 800; font-size: 1em; letter-spacing: .05em;
  margin-bottom: 1em;
}

/* 7 · Termômetro / onde agir (navy + barras) */
.tvt-s-termo { background: linear-gradient(180deg, #0e2a44, #071624); color: var(--mist); }
.tvt-bar { margin-bottom: .8em; }
.tvt-bar-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: "IBM Plex Mono", monospace;
  font-size: .55em; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fog); margin-bottom: .5em;
}
.tvt-bar-track { height: .5em; border-radius: 999px; background: rgba(157, 178, 198, .14); overflow: hidden; }
.tvt-bar-fill { display: block; height: 100%; border-radius: 999px; }
.tvt-bar-verde { background: var(--apto); }
.tvt-bar-ambar { background: #ffc400; }
.tvt-bar-verm  { background: #ef4444; }

/* ---------- Dots de progresso + legenda ---------- */
.tvt-dots { display: flex; justify-content: center; gap: .45rem; margin-top: 1.2rem; min-height: 6px; }
.tvt-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(157, 178, 198, .28);
  transition: background .3s ease, transform .3s ease;
}
.tvt-dot.on { background: var(--ember2); transform: scale(1.25); }
.tvt-cap { text-align: center; color: rgba(157, 178, 198, .65); margin-top: .6rem; }

@media (max-width: 640px) {
  .tvt-stage { gap: 3.25rem; }
  .tvt-tv { margin-bottom: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .cred-float, .cred-sheen { animation: none !important; }
  .mod-thumb-glow, .mod-thumb-icone { animation: none !important; }
}

/* ===========================================================
   Calculadora — sliders (mobile-first: alvo de toque generoso)
   =========================================================== */
.calc-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px; background: transparent; cursor: pointer;
}
.calc-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 196, 0, .5), rgba(241, 82, 28, .7));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%; margin-top: -9px;
  background: #f1521c; border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(241, 82, 28, .6);
}
.calc-range::-moz-range-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 196, 0, .5), rgba(241, 82, 28, .7));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.calc-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #f1521c; border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(241, 82, 28, .6);
}
.calc-range:focus-visible { outline: 2px solid #ff6a33; outline-offset: 4px; border-radius: 999px; }

/* ===========================================================
   Navegação: "Voltar ao topo" (flutuante, global) + "Voltar" (subsite)
   =========================================================== */
/* Botão flutuante translúcido, discreto — aparece ao rolar, some no topo */
.rhi-top {
  position: fixed; left: 50%; bottom: 1rem; z-index: 60;
  width: 2.35rem; height: 2.35rem; border-radius: 999px;
  display: grid; place-items: center;
  color: var(--mist);
  background: rgba(10, 31, 51, .55);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .7);
  font-size: .92rem; line-height: 1; cursor: pointer;
  opacity: 0; transform: translateX(-50%) translateY(12px) scale(.9); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.rhi-top.on { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.rhi-top:hover { background: rgba(241, 82, 28, .9); border-color: rgba(255, 106, 51, .7); color: #fff; }
.rhi-top:focus-visible { outline: 2px solid var(--ember2); outline-offset: 3px; }
@media (max-width: 640px) { .rhi-top { bottom: .8rem; width: 2.2rem; height: 2.2rem; } }
@media (prefers-reduced-motion: reduce) { .rhi-top { transition: opacity .2s ease; transform: translateX(-50%); } }

/* Botão "Voltar aos módulos" no topo do subsite de cada módulo */
.subsite-back {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
  color: rgba(238, 242, 247, .72);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  padding: .5rem .85rem; border-radius: 999px;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.subsite-back:hover {
  background: rgba(255, 255, 255, .09);
  border-color: var(--mod-accent, var(--ember2));
  color: #fff; transform: translateX(-2px);
}
.subsite-back i { font-size: .8rem; }

/* ===========================================================
   Raio-X da sua carteira — modal interativo (assets/js/raiox.js)
   =========================================================== */
.rx-overlay { position: fixed; inset: 0; z-index: 82; background: var(--deep); overflow-y: auto; }
.rx-overlay[hidden] { display: none; }
.rx-overlay::before { content: ""; position: fixed; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(157,178,198,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(157,178,198,.05) 1px, transparent 1px);
  background-size: 34px 34px; }
.rx-panel { position: relative; max-width: 920px; margin: 0 auto; padding: 22px 20px 80px; min-height: 100%; }
.rx-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.rx-brand { font-family: "Archivo", sans-serif; font-weight: 900; letter-spacing: .5px; font-size: 1.02rem; color: var(--mist); }
.rx-brand b { color: var(--ember2); }
.rx-brand span { font-weight: 600; font-family: "IBM Plex Sans", sans-serif; font-size: .82rem; color: var(--fog); }
.rx-topr { display: flex; align-items: center; gap: 8px; }
.rx-waskip { font-family: "IBM Plex Mono", monospace; font-size: .66rem; color: rgba(157,178,198,.7); text-decoration: none; border: 1px solid transparent; padding: 5px 11px; border-radius: 20px; transition: color .2s, border-color .2s; white-space: nowrap; }
.rx-waskip:hover { color: #4ade80; border-color: rgba(74,222,128,.35); }
.rx-close { width: 2rem; height: 2rem; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--hairline); color: var(--mist); font-size: .9rem; cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.rx-close:hover { background: rgba(255,255,255,.14); }
.rx-dots { display: flex; gap: 6px; margin: 16px 0 24px; }
.rx-dot { width: 26px; height: 4px; border-radius: 9px; background: rgba(157,178,198,.22); }
.rx-dot.on { background: var(--ember); } .rx-dot.done { background: var(--apto); }
.rx-step { animation: rx-slide .4s ease both; }
@keyframes rx-slide { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rx-eyebrow { font-family: "IBM Plex Mono", monospace; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ember2); }
.rx-dimx { color: var(--fog); }
.rx-h1 { font-family: "Archivo", sans-serif; font-weight: 900; font-stretch: 120%; text-transform: uppercase; line-height: 1; letter-spacing: -.01em; font-size: clamp(2rem, 5vw, 3.2rem); max-width: 14ch; margin-bottom: 16px; color: var(--mist); }
.rx-h2 { font-family: "Archivo", sans-serif; font-weight: 900; font-stretch: 120%; text-transform: uppercase; line-height: 1.02; font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin: 6px 0 4px; color: var(--mist); }
.rx-lead { font-size: 1.15rem; color: var(--fog); max-width: 52ch; margin-bottom: 8px; } .rx-lead b { color: var(--mist); }
.rx-muted { color: var(--fog); } .rx-small { font-size: .85rem; } .rx-mb { margin-bottom: 18px; } .rx-mt { margin-top: 22px; } .rx-center { text-align: center; }
.rx-muted b { color: var(--mist); }
.rx-badge { display: inline-flex; gap: 7px; align-items: center; font-family: "IBM Plex Mono", monospace; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fog); border: 1px solid var(--hairline); border-radius: 20px; padding: 6px 12px; margin-bottom: 22px; }
.rx-pdot { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 4px rgba(241,82,28,.2); }
.rx-btn { font-family: "IBM Plex Sans", sans-serif; font-weight: 700; border: none; border-radius: 13px; padding: 15px 26px; font-size: 1rem; cursor: pointer; transition: transform .15s, filter .15s; }
.rx-btn.rx-sm { padding: 9px 16px; font-size: .82rem; }
.rx-ember { background: linear-gradient(135deg, #e0450f, var(--ember)); color: #fff; box-shadow: 0 14px 30px -14px rgba(241,82,28,.7); }
.rx-ember:hover { transform: translateY(-1px); filter: brightness(1.06); }
.rx-ghost { background: transparent; border: 1px solid var(--hairline); color: var(--fog); }
.rx-btn:disabled { opacity: .4; cursor: not-allowed; }
.rx-backlink { font-family: "IBM Plex Mono", monospace; font-size: .66rem; color: rgba(157,178,198,.55); background: none; border: none; cursor: pointer; padding: 6px 0; }
.rx-backlink:hover { color: var(--fog); }
/* checklist */
.rx-checkbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 6px 0 20px; flex-wrap: wrap; }
.rx-count { font-family: "IBM Plex Mono", monospace; font-size: .8rem; color: var(--fog); } .rx-count b { color: var(--ember2); }
.rx-tiergrp { margin-bottom: 22px; }
.rx-tierlbl { font-family: "IBM Plex Mono", monospace; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.rx-tierlbl .rx-bar { height: 1px; flex: 1; background: var(--hairline); }
.rx-tier-1 .rx-tierlbl { color: #ef4444; } .rx-tier-2 .rx-tierlbl { color: #ffc400; } .rx-tier-3 .rx-tierlbl { color: #4ade80; }
.rx-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .rx-cards { grid-template-columns: 1fr; } }
.rx-pain { position: relative; border: 1px solid var(--hairline); background: #0c2338; border-radius: 15px; padding: 15px 16px 15px 46px; cursor: pointer; transition: border-color .18s, background .18s, transform .12s; user-select: none; }
.rx-pain:hover { border-color: rgba(255,106,51,.45); transform: translateY(-2px); }
.rx-pain .rx-ic { position: absolute; left: 14px; top: 15px; font-size: 1.15rem; }
.rx-pain .rx-pt { font-weight: 700; font-size: .95rem; margin-bottom: 3px; color: var(--mist); }
.rx-pain .rx-pd { font-size: .8rem; color: var(--fog); line-height: 1.35; }
.rx-pain .rx-chk { position: absolute; right: 12px; top: 12px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #6f8398; display: grid; place-items: center; font-size: .7rem; color: transparent; transition: .18s; }
.rx-pain.sel { border-color: var(--ember); background: rgba(241,82,28,.08); }
.rx-pain.sel .rx-chk { background: var(--ember); border-color: var(--ember); color: #fff; }
/* espelho */
.rx-mirror { border: 1px solid var(--hairline); border-left: 3px solid var(--ember); background: #0c2338; border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; animation: rx-slide .4s ease both; }
.rx-mdor { font-weight: 700; font-size: 1rem; margin-bottom: 10px; color: var(--mist); }
.rx-mrow { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 5px 0; font-size: .86rem; border-top: 1px dashed var(--hairline); }
.rx-mrow:first-of-type { border-top: none; }
.rx-mk { font-family: "IBM Plex Mono", monospace; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: #6f8398; padding-top: 3px; }
.rx-mk.prev { color: var(--ember2); } .rx-mk.imp { color: #4ade80; }
.rx-mv { color: var(--mist); } .rx-mv.imp { color: #4ade80; font-weight: 600; }
/* simulador */
.rx-sim { border: 1px solid var(--hairline); background: var(--navy); border-radius: 16px; padding: 18px; }
.rx-simkpi { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.rx-kpi { flex: 1; min-width: 130px; background: #0c2338; border: 1px solid var(--hairline); border-radius: 12px; padding: 12px 14px; }
.rx-kpi .v { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.5rem; }
.rx-kpi .l { font-family: "IBM Plex Mono", monospace; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: #6f8398; margin-top: 2px; }
.rx-kpi.risk .v { color: #ef4444; } .rx-kpi.ok .v { color: #4ade80; } .rx-kpi.money .v { color: var(--ember2); }
.rx-simhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.rx-feed { display: flex; flex-direction: column; gap: 8px; }
.rx-ev { display: flex; gap: 10px; align-items: flex-start; background: #0c2338; border: 1px solid var(--hairline); border-radius: 11px; padding: 10px 12px; animation: rx-evin .5s ease both; }
@keyframes rx-evin { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.rx-badge2 { font-family: "IBM Plex Mono", monospace; font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 20px; white-space: nowrap; margin-top: 1px; }
.rx-badge2.b-prev { background: rgba(255,196,0,.14); color: #ffc400; } .rx-badge2.b-ok { background: rgba(22,163,74,.16); color: #4ade80; }
.rx-evt { font-size: .85rem; line-height: 1.35; color: var(--fog); } .rx-evt b { color: var(--mist); } .rx-co { color: var(--ember2); font-weight: 600; }
/* gate */
.rx-gate { max-width: 460px; margin: 0 auto; }
.rx-field { margin-bottom: 11px; }
.rx-field label { display: block; font-family: "IBM Plex Mono", monospace; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: #6f8398; margin-bottom: 5px; }
.rx-field input { width: 100%; background: #0e2a44; border: 1px solid var(--hairline); border-radius: 10px; padding: 12px 13px; color: var(--mist); font-family: "IBM Plex Sans", sans-serif; font-size: .95rem; }
.rx-field input:focus { outline: none; border-color: var(--ember); }
.rx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.rx-reassure { font-size: .78rem; color: var(--fog); text-align: center; margin-top: 12px; }
.rx-err { color: #ef4444; font-size: .82rem; text-align: center; margin-top: 8px; }
.rx-thanks { text-align: center; padding: 20px 0; }
.rx-big { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 2rem; text-transform: uppercase; color: #4ade80; margin: 10px 0; }
/* Dica sob o CNPJ + painel preditivo (raio-X do CNPJ) */
.rx-cnpj-hint { display: block; font-family: "IBM Plex Mono", monospace; font-size: .7rem; margin-top: 6px; color: var(--fog); }
.rx-cnpj-hint.load { color: #7cc4ff; }
.rx-cnpj-hint.load::before { content: "◌ "; }
.rx-cnpj-hint.warn { color: #ffc400; }
.rx-xray { margin: 4px 0 14px; background: linear-gradient(180deg, rgba(30,66,99,.55), rgba(14,42,68,.55)); border: 1px solid rgba(124,196,255,.28); border-radius: 12px; padding: 13px 14px; animation: rx-xray-in .4s ease both; }
@keyframes rx-xray-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rx-xray-head { display: flex; align-items: center; gap: 8px; font-family: "Archivo", sans-serif; font-weight: 700; font-size: .95rem; color: #eaf2fb; margin-bottom: 10px; line-height: 1.2; }
.rx-xray-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: rx-xray-pulse 1.8s infinite; flex: none; }
@keyframes rx-xray-pulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.5); } 70% { box-shadow: 0 0 0 7px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
.rx-xray-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.rx-xray-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rx-xray-cell .k { font-family: "IBM Plex Mono", monospace; font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: #6f8398; }
.rx-xray-cell .v { font-size: .84rem; color: var(--mist); overflow-wrap: anywhere; }
.rx-xray-grau { grid-column: 1 / -1; }
.rx-xray-grau .v { font-family: "Archivo", sans-serif; font-weight: 800; }
.rx-xray-grau[data-grau="1"] .v { color: #4ade80; }
.rx-xray-grau[data-grau="2"] .v { color: #ffc400; }
.rx-xray-grau[data-grau="3"] .v { color: #ff8a3c; }
.rx-xray-grau[data-grau="4"] .v { color: #ef4444; }
.rx-xray-read { margin-top: 11px; padding-top: 10px; border-top: 1px dashed rgba(124,196,255,.22); font-size: .82rem; color: #cfe0f0; line-height: 1.45; }
.rx-xray-read::before { content: "⚡ "; }
.rx-scorebox { position: fixed; left: 14px; bottom: 14px; z-index: 5; font-family: "IBM Plex Mono", monospace; font-size: .64rem; background: rgba(7,22,36,.9); border: 1px solid rgba(255,196,0,.35); border-radius: 10px; padding: 9px 12px; color: #ffc400; max-width: 230px; line-height: 1.5; }
.rx-scorebox b { color: #fff; }
/* Gancho animado do passo 0 — valores escapando, sobrecarga, tags, CTA pulsante */
.rx-hook { position: relative; min-height: 64vh; }
/* tempestade real: flash do céu + relâmpagos irregulares (SVG) piscando fora de sincronia */
.rx-hook-storm { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.rx-hook-storm::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(150% 90% at 30% -12%, rgba(200,222,255,.18), transparent 60%); opacity: 0; animation: rx-skyflash 8s infinite; }
@keyframes rx-skyflash { 0%,100% { opacity: 0; } 1% { opacity: .9; } 3% { opacity: .1; } 4.5% { opacity: .7; } 7% { opacity: 0; } 52% { opacity: 0; } 53.5% { opacity: .5; } 56% { opacity: 0; } }
.rx-lbolt { position: absolute; top: -3%; height: 62%; width: 120px; opacity: 0; }
.rx-lbolt path { fill: none; stroke: #eaf2ff; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(190,215,255,.95)) drop-shadow(0 0 15px rgba(120,160,240,.6)); }
.rx-lbolt-1 { left: 9%;   animation: rx-strike 8s infinite; }
.rx-lbolt-2 { right: 11%; animation: rx-strike 8s infinite 4s; }
.rx-lbolt-3 { left: 46%; height: 42%; animation: rx-strike 8s infinite 6.4s; }
@keyframes rx-strike { 0%,100% { opacity: 0; } 1% { opacity: 1; } 3% { opacity: .12; } 4% { opacity: .95; } 6% { opacity: 0; } }
/* "bages" caindo do meio até sumir embaixo — maiores e translúcidos, como chuva de prejuízo */
.rx-hook-loss { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.rx-loss { position: absolute; top: 46%; font-family: "IBM Plex Mono", monospace; font-size: .95rem; white-space: nowrap;
  color: rgba(239,68,68,.5); border: 1px solid rgba(239,68,68,.16); background: rgba(239,68,68,.05); padding: 8px 16px; border-radius: 22px;
  opacity: 0; animation: rx-fall 8s ease-in infinite; }
@keyframes rx-fall { 0% { transform: translateY(-30px) rotate(-1deg); opacity: 0; } 14% { opacity: .5; } 60% { opacity: .34; } 100% { transform: translateY(340px) rotate(2deg); opacity: 0; } }
.rx-hook-content { position: relative; z-index: 1; }
.rx-slogan { font-family: "IBM Plex Mono", monospace; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ember2); margin-bottom: 6px; }
.rx-hl { color: var(--ember2); }
.rx-hook .rx-h1 { max-width: 22ch; }
.rx-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; }
.rx-tag { font-family: "IBM Plex Mono", monospace; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fog);
  border: 1px solid var(--hairline); border-radius: 20px; padding: 5px 11px; animation: rx-tagpulse 4.5s ease-in-out infinite; }
.rx-tag:nth-child(2) { animation-delay: .9s; } .rx-tag:nth-child(3) { animation-delay: 1.8s; }
.rx-tag:nth-child(4) { animation-delay: 2.7s; } .rx-tag:nth-child(5) { animation-delay: 3.6s; }
@keyframes rx-tagpulse { 0%,100% { border-color: var(--hairline); color: var(--fog); } 50% { border-color: rgba(255,106,51,.55); color: var(--ember2); } }
.rx-pulse { position: relative; }
.rx-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 13px; pointer-events: none; animation: rx-cta 2.1s ease-out infinite; }
@keyframes rx-cta { 0% { box-shadow: 0 0 0 0 rgba(241,82,28,.5); } 70% { box-shadow: 0 0 0 15px rgba(241,82,28,0); } 100% { box-shadow: 0 0 0 0 rgba(241,82,28,0); } }
@media (prefers-reduced-motion: reduce) {
  .rx-loss, .rx-tag, .rx-pulse::after, .rx-hook-storm::before, .rx-lbolt { animation: none; }
  .rx-loss { opacity: .4; }
}

/* ===========================================================
   Infográfico do ciclo (subsite.infografico) — abertura de módulo
   =========================================================== */
.ciclo-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(198px, 1fr)); gap: 18px 14px; }
.ciclo-step { position: relative; background: var(--navy); border: 1px solid var(--hairline); border-radius: 14px; padding: 20px 15px 15px; transition: border-color .2s ease, transform .2s ease; }
.ciclo-step:hover { border-color: var(--mod-accent, var(--ember2)); transform: translateY(-3px); }
.ciclo-num { position: absolute; top: -12px; left: 15px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mod-accent, var(--ember2)); color: var(--deep); font-family: "IBM Plex Mono", monospace; font-weight: 700; font-size: .8rem; box-shadow: 0 4px 12px -4px rgba(0,0,0,.6); }
.ciclo-ico { font-size: 1.5rem; color: var(--mod-accent, var(--ember2)); display: block; margin: 4px 0 9px; }
.ciclo-t { font-family: "Archivo", sans-serif; font-weight: 700; font-stretch: 90%; font-size: 1.02rem; line-height: 1.1; color: var(--mist); margin-bottom: 6px; }
.ciclo-d { font-size: .82rem; line-height: 1.4; color: var(--fog); }
.ciclo-loop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  border: 1px dashed var(--mod-accent, var(--ember2)); border-radius: 14px; padding: 20px 12px;
  font-family: "IBM Plex Mono", monospace; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mod-accent, var(--ember2)); opacity: .85; }
.ciclo-loop i { font-size: 1.35rem; }

/* Card 'Em breve' — informativo, não navega */
.mod-card-breve { cursor: default; }
.mod-card-breve:hover { transform: none; }
.mod-card-breve .mod-thumb-icone { opacity: .82; }
/* Selo 'Em breve' pulsante — chama o olho do usuário */
.mod-breve-badge { animation: breve-pulse 1.7s ease-in-out infinite; }
@keyframes breve-pulse {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 196, 0, .55); }
  50% { opacity: .72; box-shadow: 0 0 0 7px rgba(255, 196, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .mod-breve-badge { animation: none; } }

/* ===== Nav dropdowns (Quem é você / Módulos) + Login — desktop ===== */
.navdd { position: relative; }
.navdd-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: transparent;
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: .42rem .9rem; line-height: 1; color: var(--fog);
  font-family: "IBM Plex Mono", monospace; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.navdd-btn:hover, .navdd.open .navdd-btn { color: var(--mist); border-color: rgba(255,255,255,.4); }
.navdd-btn i { font-size: .95rem; }
.navdd-caret { font-size: .68rem !important; opacity: .7; transition: transform .18s ease; }
.navdd.open .navdd-caret { transform: rotate(180deg); }
/* variante ember para "Conheça os Módulos" */
.navdd-btn-ember { color: var(--ember2); border-color: var(--ember2); }
.navdd-btn-ember:hover, .navdd.open .navdd-btn-ember { color: #fff; background: var(--ember2); border-color: var(--ember2); box-shadow: 0 6px 18px -8px rgba(255,106,51,.7); }
.navdd-menu {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 232px; display: none; flex-direction: column;
  background: #0e2a44; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 6px;
  box-shadow: 0 18px 42px rgba(0,0,0,.5); z-index: 60;
}
.navdd.open .navdd-menu { display: flex; animation: navdd-in .16s ease both; }
@keyframes navdd-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.navdd-menu-scroll { max-height: min(70vh, 470px); overflow-y: auto; overscroll-behavior: contain; }
.navdd-item {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 10px; color: var(--mist);
  font-family: "IBM Plex Sans", sans-serif; font-size: .9rem; letter-spacing: 0; text-transform: none; white-space: nowrap; text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.navdd-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.navdd-item i { color: var(--ember2); font-size: 1.05rem; width: 1.25em; text-align: center; flex: none; }
.navdd-item-strong { font-weight: 700; color: #fff; }
.navdd-sep { height: 1px; background: rgba(255,255,255,.1); margin: 5px 8px; }
.navdd-soon {
  margin-left: auto; font-family: "IBM Plex Mono", monospace; font-size: .56rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ember2); border: 1px solid rgba(255,106,51,.4); border-radius: 999px; padding: 2px 7px;
}
@media (prefers-reduced-motion: reduce) { .navdd.open .navdd-menu { animation: none; } }

/* ===== Mobile: hambúrguer + painel ===== */
.navburger {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: transparent; color: var(--mist); font-size: 1.35rem; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.navburger:hover, .navburger[aria-expanded="true"] { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.05); }
.navpanel {
  position: fixed; top: 68px; left: 0; right: 0; bottom: 0;
  background: #0b2038; box-shadow: 0 24px 50px rgba(0,0,0,.55);
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; z-index: 55;
  animation: navpanel-in .2s ease both;
}
@keyframes navpanel-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.navpanel-inner { padding: 10px 14px 44px; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }
.navpanel-label { font-family: "IBM Plex Mono", monospace; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fog); margin: 15px 8px 5px; }
.navpanel-label:first-child { margin-top: 6px; }
.navpanel-item {
  display: flex; align-items: center; gap: 13px; padding: 13px 12px; border-radius: 11px; color: var(--mist);
  font-family: "IBM Plex Sans", sans-serif; font-size: 1rem; text-decoration: none; transition: background .12s ease;
}
.navpanel-item:hover, .navpanel-item:active { background: rgba(255,255,255,.06); color: #fff; }
.navpanel-item i { color: var(--ember2); font-size: 1.15rem; width: 1.3em; text-align: center; flex: none; }
.navpanel-item-strong { font-weight: 700; color: #fff; }

/* ===== Banner rotativo (home) ===== */
.promo { position: relative; background: linear-gradient(180deg, #0e2a44, #0b2038); border-bottom: 1px solid rgba(255,255,255,.06); overflow: hidden; }
.promo::before { content: ''; position: absolute; inset: 0; background: radial-gradient(680px 240px at 82% -40px, rgba(255,106,51,.12), transparent); pointer-events: none; }
.promo-wrap { position: relative; max-width: 80rem; margin: 0 auto; padding: 2.6rem 1.25rem 1.5rem; }
.promo-slide { display: none; }
.promo-slide.active { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.2rem; align-items: center; animation: promo-fade .5s ease both; }
@media (max-width: 900px) { .promo-slide.active { grid-template-columns: 1fr; gap: 1.4rem; } }
@keyframes promo-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .promo-slide.active { animation: none; } }
.promo-eyebrow { font-family: "IBM Plex Mono", monospace; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ember2); margin-bottom: .7rem; }
.promo-title { font-family: "Archivo", sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(1.5rem, 3vw, 2.15rem); line-height: 1.05; letter-spacing: -.01em; color: #fff; margin-bottom: .7rem; }
.promo-title b { color: var(--ember2); font-weight: 800; }
.promo-sub { color: var(--mist); opacity: .82; font-size: .98rem; line-height: 1.5; max-width: 42ch; margin-bottom: 1.15rem; }
.promo-chips { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 460px) { .promo-chips { grid-template-columns: 1fr; } }
.promo-chip { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 13px; padding: .85rem .95rem; }
.promo-chip i { color: var(--ember2); font-size: 1.1rem; }
.promo-chip b { display: block; font-family: "Archivo", sans-serif; font-weight: 700; font-size: .92rem; color: #fff; margin: .35rem 0 .18rem; }
.promo-chip span { font-size: .78rem; color: var(--mist); opacity: .72; line-height: 1.4; }
.promo-dots { display: flex; gap: 8px; justify-content: center; margin-top: 1.5rem; }
.promo-dot { width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,.22); border: 0; cursor: pointer; padding: 0; transition: background .2s ease, width .2s ease; }
.promo-dot.active { background: var(--ember2); width: 26px; }

/* Ícone flutuante do WhatsApp — sempre visível, canto inferior-direito */
.rhi-wa {
  position: fixed; right: 1.15rem; bottom: 1.15rem; z-index: 61;
  width: 3.5rem; height: 3.5rem; border-radius: 999px;
  display: grid; place-items: center;
  background: #25d366; color: #fff; font-size: 1.7rem; text-decoration: none;
  box-shadow: 0 10px 28px -8px rgba(37, 211, 102, .6);
  transition: transform .2s ease, box-shadow .2s ease;
}
.rhi-wa:hover { transform: scale(1.06); box-shadow: 0 14px 34px -8px rgba(37, 211, 102, .8); color: #fff; }
.rhi-wa::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px; pointer-events: none;
  animation: wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
  70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (max-width: 640px) { .rhi-wa { width: 3.2rem; height: 3.2rem; font-size: 1.55rem; right: .9rem; bottom: .9rem; } }
@media (prefers-reduced-motion: reduce) { .rhi-wa::after { animation: none; } }