/* SOS Farol — camada de tema "Mosaico" para as paginas internas (2026-10-01).
   Carregada DEPOIS do CSS proprio de cada pagina: troca cores, letras,
   cantos, botoes e cartoes. Nao mexe na estrutura nem nos textos. */
:root{
  --navy:#14163a; --navy-2:#24275a; --navy2:#24275a;
  --ink:#14163a; --muted:#5a5d7a; --soft:#f3f4f8; --white:#ffffff;
  --accent:#ff7a3c; --accent-2:#ff9a5c; --accent2:#ff9a5c;
  --ok:#0f6b3a; --teal:#2f6fed; --coral:#e0344f; --coral-light:rgba(224,52,79,.08);
  --line:#e3e6f0; --radius:24px;
  --shadow:0 1px 2px rgba(20,22,58,.04),0 10px 30px rgba(20,22,58,.07);
}
html{scroll-behavior:smooth}
body{background:#f3f4f8!important;color:#14163a;font-family:Inter,system-ui,sans-serif!important;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Inter,system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.08;color:inherit}
h1{letter-spacing:-.04em}

/* cabecalhos das paginas (bar / nav) viram a "pilula" branca */
header.bar,header:not(.hero){background:rgba(243,244,248,.85)!important;backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border:0!important;box-shadow:none!important}
header.bar>*,header .nav{background:#fff;border-radius:20px;box-shadow:var(--shadow)}
.brand,.brand *{color:#14163a}

/* botoes */
.btn,button.btn,a.btn,.copy,.product-btn{border-radius:16px!important;font-weight:700!important;transition:transform .15s,background .15s}
.btn:hover,.copy:hover{transform:translateY(-2px)}
.btn-primary,.copy{background:#ff7a3c!important;color:#fff!important;border:0!important;box-shadow:0 8px 22px rgba(255,122,60,.3)!important}
.btn-primary:hover{background:#e2611f!important}
.btn-secondary,.btn-ghost{background:#fff!important;color:#14163a!important;box-shadow:inset 0 0 0 1.5px #e3e6f0!important;border:0!important}

/* cartoes e caixas = blocos do mosaico */
.card,.box,.form,.result,.gate,.help-box,.sidebox,.callout,.related-card,.guide-card,.hero-card,.price-card,.trust-item,.bridge-box,.note,.warnbox{border-radius:24px!important}
.card,.box,.form,.result,.gate,.related-card,.guide-card,.sidebox{background:#fff;border:0!important;box-shadow:var(--shadow)!important}
.warnbox{background:#fff4ec!important;border:0!important}
.callout{background:#dfe7ff!important;border:0!important}
.highlight,.destaque{border-radius:16px}

/* campos de formulario */
input,select,textarea{border-radius:14px!important;border:1.5px solid #e3e6f0!important;background:#fff!important;font-family:Inter,system-ui,sans-serif!important}
input:focus,select:focus,textarea:focus{outline:none;border-color:#ff7a3c!important;box-shadow:0 0 0 4px rgba(255,122,60,.15)!important}

/* etiquetas */
.eyebrow,.tag,.pill,.category{border-radius:99px!important;font-weight:700!important;letter-spacing:.12em}
.eyebrow{color:#e2611f!important;background:rgba(255,122,60,.1)!important;border:1px solid rgba(255,122,60,.22)!important;text-transform:uppercase;font-size:12px!important}

/* codigo de ativacao em destaque */
.code{border-radius:18px!important;letter-spacing:.08em}

/* artigos (conteudos/) */
.article{background:#fff;border-radius:28px;box-shadow:var(--shadow);padding:clamp(22px,4vw,48px)!important}
.hero{background:transparent!important}
.hero-figure img{border-radius:24px}
.breadcrumbs a{color:#e2611f}

/* rodapes */
footer{background:transparent!important}
footer>.wrap,footer .footer-grid{background:#14163a;color:#fff;border-radius:28px;padding:clamp(22px,4vw,40px)}
footer a{color:rgba(255,255,255,.78)!important}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}