/* ===========================================================
   CÓDIGO SST — TEMA (dark padrão + light mode)
   Carregado por último: sobrepõe cores fixas e completa
   variáveis legadas usadas pela calculadora.
   Os acentos da marca (elétrico, ciano, verde) são iguais
   nos dois temas — só os neutros se invertem.
   =========================================================== */

/* -----------------------------------------------------------
   1 · DARK (padrão) — completa as variáveis legadas que a
   calculadora referencia e que não existiam no v2.
   ----------------------------------------------------------- */
:root{
  --marinho:#0E1B30;
  --noturno:#0A1322;
  --noturno-2:#070D18;
  --ambar:#F5A623;
  --vermelho:#FF6B6B;
  --quente:oklch(62% 0.09 40);
  --borda:rgba(77,166,255,.18);
  --borda-forte:rgba(77,166,255,.35);

  /* superfícies internas (campos, trilhas) da calculadora */
  --calc-inset:rgba(10,22,40,.7);
  --calc-inset-soft:rgba(10,22,40,.55);
  --calc-hairline:rgba(255,255,255,.05);
  --panel-shadow:none;
}

/* -----------------------------------------------------------
   2 · LIGHT — invertendo apenas os neutros (paleta fria/tech)
   ----------------------------------------------------------- */
html[data-theme="light"]{
  --bg:#F2F6FC;
  --bg-2:#E7EEF7;
  --branco:#0C1828;   /* texto primário → tinta */
  --prata:#42566F;    /* texto secundário */
  --quente:oklch(57% 0.10 40);
  --mute:#5A6E84;     /* texto de apoio */
  --line:rgba(12,24,40,.12);
  --line-soft:rgba(12,24,40,.07);
  --line-strong:rgba(41,121,255,.42);

  /* calculadora (light) */
  --marinho:#FFFFFF;
  --noturno:#F5F9FE;
  --noturno-2:#EAF1F9;
  --borda:rgba(12,24,40,.12);
  --borda-forte:rgba(41,121,255,.35);
  --calc-inset:rgba(12,24,40,.04);
  --calc-inset-soft:rgba(12,24,40,.05);
  --calc-hairline:rgba(12,24,40,.08);
  --panel-shadow:0 18px 44px rgba(20,40,80,.08);
}

/* -----------------------------------------------------------
   3 · Transições suaves ao alternar (só após 1º paint)
   ----------------------------------------------------------- */
html.theme-ready body,
html.theme-ready .bg-noturno,
html.theme-ready .bg-marinho,
html.theme-ready .bg-noturno-deep,
html.theme-ready .site-header,
html.theme-ready .site-footer,
html.theme-ready #calculadora-fap .panel,
html.theme-ready .form-card{
  transition:background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}

/* -----------------------------------------------------------
   4 · BOTÃO DE TEMA
   ----------------------------------------------------------- */
.header-actions{
  display:flex;align-items:center;gap:14px;
}
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;
  background:none;
  border:1px solid var(--line);
  border-radius:3px;
  color:var(--branco);
  cursor:pointer;
  flex:none;
  transition:background var(--t-base),border-color var(--t-base),color var(--t-base);
}
.theme-toggle:hover{border-color:var(--ciano);color:var(--ciano)}
.theme-toggle svg{width:18px;height:18px;display:block}
.theme-toggle .icon-moon{display:none}
html[data-theme="light"] .theme-toggle .icon-sun{display:none}
html[data-theme="light"] .theme-toggle .icon-moon{display:block}

/* -----------------------------------------------------------
   5 · OVERRIDES PARA O LIGHT — cores fixas que não usam var()
   ----------------------------------------------------------- */

/* header translúcido ao rolar */
html[data-theme="light"] .site-header.scrolled{
  background:rgba(242,246,252,.82);
}

/* hovers que iam para #fff (invisíveis no claro) */
html[data-theme="light"] .nav-links a:hover{color:var(--branco)}
html[data-theme="light"] .urgency-bridge a:hover{color:var(--branco);border-color:var(--branco)}
html[data-theme="light"] .wpp-link:hover{color:var(--branco)}
html[data-theme="light"] .service-list li:hover .tag{color:var(--branco)}

/* tags com texto = --bg (ficaria branco sobre ciano) */
html[data-theme="light"] .featured-tag{color:#0A1322}
html[data-theme="light"] .platform-tag{color:#fff}

/* hover sutil do pilar */
html[data-theme="light"] .pillar-card:hover{background:rgba(41,121,255,.05)}

/* float NR1 */
html[data-theme="light"] .nr1-float{
  background:rgba(255,255,255,.92);
  box-shadow:0 14px 40px rgba(20,40,80,.16),0 0 24px rgba(77,166,255,.12);
}
html[data-theme="light"] .nr1-float-tag{color:var(--branco)}

/* card do formulário */
html[data-theme="light"] .form-card{background:rgba(12,24,40,.02)}

/* case section: cream mais quente, distinto do bg azul frio */
html[data-theme="light"] #case{background:#EDE6D8}

/* grão de filme um pouco mais discreto no claro */
html[data-theme="light"] body::after{opacity:.018}

/* -----------------------------------------------------------
   6 · CALCULADORA NO LIGHT — superfícies internas
   ----------------------------------------------------------- */
html[data-theme="light"] #calculadora-fap .panel{
  box-shadow:var(--panel-shadow);
}
html[data-theme="light"] #calculadora-fap .input-wrap,
html[data-theme="light"] #calculadora-fap select{
  background:var(--calc-inset);
}
html[data-theme="light"] #calculadora-fap option{
  background:#fff;color:var(--branco);
}
html[data-theme="light"] #calculadora-fap .eco-perc{
  background:rgba(255,255,255,.7);
}
html[data-theme="light"] #calculadora-fap .bar-track{
  background:var(--calc-inset);
}
html[data-theme="light"] #calculadora-fap .disclaimer{
  background:rgba(12,24,40,.03);
}
html[data-theme="light"] #calculadora-fap .rline{
  border-bottom-color:var(--calc-hairline);
}
/* polegar do slider visível no claro */
html[data-theme="light"] #calculadora-fap input[type=range]::-webkit-slider-thumb{
  background:#fff;
}
html[data-theme="light"] #calculadora-fap input[type=range]::-moz-range-thumb{
  background:#fff;
}

/* dark: aplica também as superfícies via variável (consistência) */
#calculadora-fap .input-wrap,
#calculadora-fap select{background:var(--calc-inset)}
#calculadora-fap .eco-perc{background:var(--calc-inset-soft)}
#calculadora-fap .bar-track{background:var(--calc-inset)}
#calculadora-fap .rline{border-bottom-color:var(--calc-hairline)}

/* -----------------------------------------------------------
   7 · BIO TRUNCATION
   ----------------------------------------------------------- */
.expert-bio.bio-truncatable{
  max-height:8.5em;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 50%,transparent 100%);
  transition:max-height .7s var(--ease);
}
.expert-bio.bio-truncatable.expanded{
  max-height:900px;
  -webkit-mask-image:none;
  mask-image:none;
}
.bio-toggle{
  display:inline-flex;align-items:center;gap:11px;
  margin-top:22px;
  padding:10px 8px 10px 18px;
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--branco);
  background:transparent;
  border:1px solid var(--line-strong);
  border-radius:100px;
  cursor:pointer;
  -webkit-appearance:none;appearance:none;
  transition:color var(--t-base),background var(--t-base),border-color var(--t-base),box-shadow var(--t-base);
}
.bio-toggle .bio-arr{
  display:inline-grid;place-items:center;
  width:22px;height:22px;border-radius:50%;
  font-size:12px;line-height:1;
  color:var(--ciano);
  background:rgba(77,166,255,.12);
  transition:transform var(--t-base),background var(--t-base),color var(--t-base);
}
.bio-toggle:hover{
  color:#fff;
  background:var(--eletrico);
  border-color:var(--eletrico);
  box-shadow:0 10px 26px rgba(41,121,255,.28);
}
.bio-toggle:hover .bio-arr{background:rgba(255,255,255,.24);color:#fff}
.bio-toggle:focus-visible{outline:2px solid var(--ciano);outline-offset:3px}
.bio-toggle[aria-expanded="true"] .bio-arr{transform:rotate(180deg)}

/* hero glow: bem mais sutil no light (no escuro permanece como base) */
html[data-theme="light"] .hero .hero-glow{
  width:min(720px,78vw);height:min(720px,78vw);
  background:radial-gradient(circle,rgba(41,121,255,.06) 0%,rgba(41,121,255,0) 66%);
}