/* ==========================================================================
   IDENTIDADE VISUAL DA CENTRAL S2V (29/10/2026)
   Meio-termo entre a Central (fundo escuro, anéis, verde/azul da marca) e o
   site s2vengenharia.com.br (liquid glass: painéis translúcidos com borda
   clara, botões em pílula, cantos bem arredondados, títulos em Outfit).
   O vidro aqui é ESCURO (não branco): fica legível com muito campo e não
   clareia a tela. Toda tela nova usa estes tokens e classes — nada de cor ou
   raio "solto" no HTML.
   ========================================================================== */
@font-face{font-family:Outfit;src:url(/fonts/Outfit-Bold.ttf) format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/Inter-Regular.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/Inter-Bold.ttf) format('truetype');font-weight:700;font-display:swap}

:root{
 color-scheme:dark;
 /* marca */
 --s2v-verde:#12c39a; --s2v-verde-forte:#089C83;
 --s2v-azul:#2f8bdb;  --s2v-azul-forte:#004D94;
 --s2v-degrade:linear-gradient(90deg,#004D94,#089C83);
 /* base */
 --s2v-bg:#0b1016; --s2v-bg2:#0e141b;
 --s2v-texto:#e8eef4; --s2v-mudo:#93a4b4; --s2v-apagado:#5f7080;
 --s2v-erro:#ff7b84; --s2v-aviso:#e8b23a;
 /* vidro escuro */
 --s2v-vidro:rgba(16,24,33,.62);
 --s2v-vidro-forte:rgba(16,24,33,.82);
 --s2v-borda:rgba(255,255,255,.10);
 --s2v-borda-forte:rgba(255,255,255,.18);
 --s2v-luz:inset 0 1px 0 rgba(255,255,255,.10);
 --s2v-desfoque:blur(18px) saturate(140%);
 --s2v-sombra:0 24px 60px rgba(0,0,0,.45);
 --s2v-brilho:0 0 28px rgba(8,156,131,.28);
 /* forma */
 --s2v-raio:24px; --s2v-raio-p:14px; --s2v-pilula:999px;
 --s2v-fonte:Inter,'Segoe UI',system-ui,Arial,sans-serif;
 --s2v-titulo:Outfit,Inter,'Segoe UI',sans-serif;
}
html{background:var(--s2v-bg)}

/* ---- fundo padrão: escuro com o brilho verde/azul da Central ---- */
.s2v-fundo{background-color:var(--s2v-bg);
 background-image:
  radial-gradient(ellipse 60% 50% at 15% 0%,rgba(0,77,148,.22),transparent 70%),
  radial-gradient(ellipse 60% 50% at 90% 100%,rgba(8,156,131,.16),transparent 70%),
  radial-gradient(circle at 50% 50%,#121c27 0,var(--s2v-bg) 70%);
 color:var(--s2v-texto);font-family:var(--s2v-fonte)}

/* ---- painel de vidro escuro ---- */
.s2v-vidro{background:var(--s2v-vidro);border:1px solid var(--s2v-borda);border-radius:var(--s2v-raio);
 -webkit-backdrop-filter:var(--s2v-desfoque);backdrop-filter:var(--s2v-desfoque);
 box-shadow:var(--s2v-sombra),var(--s2v-luz)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .s2v-vidro{background:var(--s2v-vidro-forte)}}

/* ---- textos ---- */
.s2v-sobre{font:700 11px/1 var(--s2v-fonte);letter-spacing:.26em;color:var(--s2v-verde);text-transform:uppercase}
.s2v-h1{font:700 30px/1.1 var(--s2v-titulo);letter-spacing:.01em;color:var(--s2v-texto)}
.s2v-h2{font:700 20px/1.2 var(--s2v-titulo);color:var(--s2v-texto)}
.s2v-rot{font:700 11px/1 var(--s2v-fonte);letter-spacing:.14em;color:#c3d0dc;text-transform:uppercase}

/* ---- campos ---- */
.s2v-campo{width:100%;height:50px;padding:0 18px;font:400 16px var(--s2v-fonte);color:var(--s2v-texto);
 background:rgba(5,9,14,.55);border:1px solid var(--s2v-borda-forte);border-radius:var(--s2v-raio-p);outline:none;
 transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.s2v-campo:focus{border-color:var(--s2v-verde);box-shadow:0 0 0 4px rgba(18,195,154,.16)}

/* ---- botões em pílula ---- */
.s2v-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 26px;
 border-radius:var(--s2v-pilula);border:1px solid transparent;cursor:pointer;text-decoration:none;
 font:700 14px var(--s2v-fonte);letter-spacing:.06em;color:#fff;
 background:linear-gradient(90deg,var(--s2v-verde-forte),var(--s2v-verde));
 box-shadow:0 8px 24px rgba(8,156,131,.38),inset 0 1px 0 rgba(255,255,255,.25);transition:filter .15s,transform .1s}
.s2v-btn:hover,.s2v-btn:focus-visible{filter:brightness(1.1);outline:none}
.s2v-btn:active{transform:translateY(1px)}
.s2v-btn.sec{background:rgba(255,255,255,.04);border-color:var(--s2v-borda-forte);box-shadow:var(--s2v-luz);color:var(--s2v-texto)}
.s2v-btn.sec:hover{border-color:var(--s2v-verde)}

/* ---- chip / pílula pequena (status, abas, rodapé) ---- */
.s2v-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--s2v-pilula);
 font-size:12px;color:#c9d6e2;background:var(--s2v-vidro);border:1px solid var(--s2v-borda);
 -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.s2v-ponto{width:7px;height:7px;border-radius:50%;background:var(--s2v-verde);box-shadow:0 0 8px var(--s2v-verde)}