/* ===== tokens e cromado do tema: theme_lib.php do SCENG Tools (copiado no build) ===== */
    /* --------------------------------------------------------------------
       Tokens do sistema. Os nomes vêm da prancha de projeto, não de uma
       paleta genérica: traço (a cor da marca, que é o vermelho de corte),
       papel, grafite, malha, terreno natural, aterro. A escala de espaço
       é o estaqueamento: base 4px, como as estacas de 20 em 20 m.
       Fonte: theme_lib.php (claro em :root, escuro em [data-theme="dark"]).
       -------------------------------------------------------------------- */
    :root {
      color-scheme: light;
      /* traço — marca e corte. --traco preenche; --traco-texto escreve/contorna */
      --traco:#800000; --traco-esc:#4d0808; --traco-vivo:#a01818; --traco-lav:#fdeeee;
      --traco-texto:#800000; --traco-borda:#f2d4d4;
      --faixa-traco:linear-gradient(135deg,#800000,#4d0808);
      /* papel — a nota de serviço impressa */
      --papel:#fff; --papel-fundo:#f5f5f7; --papel-margem:#f0f1f5; --papel-pagina:#f7f8fa;
      /* grafite — quatro níveis de texto, não dois */
      --grafite:#1f2430; --grafite-2:#475065; --grafite-3:#6b7280; --grafite-4:#9aa0ac;
      /* malha — linhas finas do desenho; opacidade, não hex, para sumirem no fundo */
      --malha-suave:rgba(31,36,48,.06); --malha:rgba(31,36,48,.11);
      --malha-forte:rgba(31,36,48,.20);
      /* terreno natural — o cinza-frio do que já existe (coluna "Civil 3D nativo") */
      --terreno:#eef0f3; --terreno-tinta:#5a6270;
      /* aterro — o verde do que se ganha (já é a cor dos ✓) */
      --aterro:#0f7b3d;
      /* estados */
      --alerta:#856404; --alerta-fundo:#fff8e6; --alerta-borda:#f0dda4;
      --ok:#155724; --ok-fundo:#d4edda; --ok-suave:#f0f8f2; --ok-borda:#cfe7d6;
      --erro:#b3261e; --erro-fundo:#f8d7da; --erro-suave:#fdf2f2; --erro-borda:#f2d4d4;
      --info:#0a3f75; --info-fundo:#e7f3ff; --info-borda:#0066cc;
      /* estaqueamento — escala de espaço, base 4 */
      --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:24px;
      --e8:32px; --e10:40px; --e12:48px; --e16:64px; --e20:80px;
      /* raio — três degraus e a pílula, no lugar dos nove valores soltos */
      --r-peq:8px; --r-med:12px; --r-gde:16px; --r-pilula:999px;
      /* profundidade — UMA estratégia: borda fina + sombra rasa em dois degraus */
      --relevo:0 1px 2px rgba(31,36,48,.04), 0 8px 24px rgba(31,36,48,.06);
      --relevo-alto:0 2px 4px rgba(31,36,48,.06), 0 16px 40px rgba(31,36,48,.10);
      /* controles de formulário — o campo "afunda" em vez de saltar */
      --campo:#fbfbfc; --campo-borda:#d4d8e2; --campo-rotulo:#475065;
      /* tempo */
      --t-rapido:.12s; --t-medio:.22s; --ease:cubic-bezier(.2,.7,.3,1);
    }
    :root[data-theme="dark"] {
      color-scheme: dark;
      --traco:#800000; --traco-esc:#4d0808; --traco-vivo:#9a1a1a; --traco-lav:#3d1414;
      --traco-texto:#ff9b9b; --traco-borda:rgba(255,155,155,.30);
      --papel:#16181d; --papel-fundo:#0f1115; --papel-margem:#1b1e25; --papel-pagina:#0f1115;
      --grafite:#e7e9ee; --grafite-2:#c7ccd6; --grafite-3:#9aa0ac; --grafite-4:#7d8492;
      --malha-suave:rgba(231,233,238,.05); --malha:rgba(231,233,238,.10); --malha-forte:rgba(231,233,238,.20);
      --terreno:#2a2d36; --terreno-tinta:#c7ccd6;
      --aterro:#3ddc84;
      --alerta:#ffd166; --alerta-fundo:rgba(255,209,102,.12); --alerta-borda:rgba(255,209,102,.35);
      --ok:#3ddc84; --ok-fundo:rgba(61,220,132,.14); --ok-suave:rgba(61,220,132,.08); --ok-borda:rgba(61,220,132,.35);
      --erro:#ff6b6b; --erro-fundo:rgba(255,107,107,.14); --erro-suave:rgba(255,107,107,.08); --erro-borda:rgba(255,107,107,.35);
      --info:#5aa9ff; --info-fundo:rgba(90,169,255,.14); --info-borda:#5aa9ff;
      --relevo:0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.22);
      --relevo-alto:0 8px 28px rgba(0,0,0,.45);
      --campo:#1b1e25; --campo-borda:rgba(231,233,238,.20); --campo-rotulo:#c7ccd6;
    }

    /* Botão de tema — mesmo desenho do seletor de idioma (.langsel). */
    .themesel { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--campo-borda); border-radius:30px;
      background:var(--papel); padding:7px 12px; font-size:13px; font-weight:700; color:var(--grafite-2); cursor:pointer;
      font-family:inherit; line-height:1.2; }
    .themesel:hover { border-color:var(--traco-texto); color:var(--traco-texto); }
    .themesel .t-dark, .themesel .t-light { display:inline-flex; align-items:center; gap:5px; }
    .themesel .t-light { display:none; }
    :root[data-theme="dark"] .themesel .t-dark { display:none; }
    :root[data-theme="dark"] .themesel .t-light { display:inline-flex; }
    .navextra .themesel { width:100%; justify-content:center; padding:11px 12px; }
    /* Logotipo: as duas versões estão no HTML; só a do tema atual aparece. */
    :root:not([data-theme="dark"]) .brandlogo-escuro { display:none !important; }
    :root[data-theme="dark"] .brandlogo-claro { display:none !important; }

/* site.css — site institucional Soethe Cursino Engenharia (www.sceng.com.br).
   Os TOKENS (claro/escuro) e o cromado do tema (botão ☾/☀, troca do logotipo) são inseridos
   no topo pelo build.py, lidos de theme_lib.php do SCENG Tools — a mesma fonte do /plugin/.
   Aqui só componentes, sempre com var(--…): cor é informação, HEX solto não entra.
   Regra: --traco PREENCHE (faixas, botões, a linha da barra); texto/link/contorno = --traco-texto. */

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:86px; }
body { font-family:'Inter',-apple-system,'Segoe UI',sans-serif; color:var(--grafite); line-height:1.5;
  background-color:var(--papel-pagina);
  background-image:
    linear-gradient(rgba(128,0,0,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128,0,0,.026) 1px, transparent 1px);
  background-size:32px 32px, 32px 32px; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--traco-texto); }
.pular { position:absolute; left:-9999px; top:8px; z-index:200; background:var(--traco); color:#fff; padding:10px 16px; border-radius:var(--r-peq); }
.pular:focus { left:12px; }

/* ---------- barra do topo (mesmo desenho do SCENG Tools) ---------- */
.topbar { position:sticky; top:0; z-index:120; background:var(--papel); padding:11px 26px; border-bottom:2px solid var(--traco);
  display:flex; align-items:center; justify-content:space-between; gap:14px; }
.topbar .logo { display:block; flex:none; }
.topbar .logo img { height:40px; width:auto; display:block; }
.navlinks { display:flex; align-items:center; gap:4px; flex:1; justify-content:center; }
.navlinks a { color:var(--grafite-2); font-weight:700; font-size:14px; text-decoration:none; padding:8px 12px; border-radius:8px; white-space:nowrap; }
.navlinks a:hover, .navlinks a.ativo { color:var(--traco-texto); background:var(--traco-lav); }
.navlinks a.tools { border:1.5px solid var(--traco-texto); color:var(--traco-texto); border-radius:30px; padding:6px 14px; }
.navlinks a.tools:hover { background:var(--traco); border-color:var(--traco); color:#fff; }
.navextra { display:none; }
.actions { display:flex; align-items:center; gap:10px; flex:none; }
.navtoggle { display:none; align-items:center; justify-content:center; width:42px; height:42px; flex:none;
  border:1px solid var(--campo-borda); border-radius:30px; background:var(--papel); color:var(--grafite-2); cursor:pointer; padding:0; }
.navtoggle:hover { border-color:var(--traco-texto); color:var(--traco-texto); }
.navtoggle svg { width:20px; height:20px; display:block; }
.navtoggle .ic-x { display:none; }
.navtoggle[aria-expanded="true"] { background:var(--traco); border-color:var(--traco); color:#fff; }
.navtoggle[aria-expanded="true"] .ic-x { display:block; }
.navtoggle[aria-expanded="true"] .ic-b { display:none; }
@media (max-width:920px) {
  .topbar { padding:10px 16px; gap:10px; }
  .topbar .logo img { height:32px; }
  .actions .themesel { display:none; }
  .navtoggle { display:inline-flex; }
  .navlinks { position:absolute; top:100%; left:0; right:0; flex:none; display:none; flex-direction:column; align-items:stretch; gap:2px;
    background:var(--papel); border-bottom:2px solid var(--traco); box-shadow:var(--relevo-alto); padding:10px 12px 14px;
    max-height:calc(100vh - 62px); overflow-y:auto; }
  .navlinks.aberto { display:flex; }
  .navlinks a { padding:13px 14px; border-radius:10px; font-size:15.5px; }
  .navlinks a.tools { text-align:center; }
  .navextra { display:flex; gap:10px; margin-top:10px; padding-top:12px; border-top:1px solid var(--malha); }
  .navextra .themesel { flex:1; justify-content:center; padding:11px 12px; display:inline-flex; }
}
@media (max-width:420px) { .topbar .logo img { height:26px; } }

/* ---------- capas ---------- */
.capa { position:relative; color:#fff; background:var(--traco-esc) var(--faixa-traco); padding:var(--e16) var(--e5) var(--e16); text-align:center; overflow:hidden; }
.capa.foto { background-color:var(--traco-esc); background-size:cover; background-position:center; }
.capa.foto::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(77,8,8,.88), rgba(15,17,21,.72)); }
.capa > * { position:relative; }
.capa .kicker { font-size:12.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; opacity:.85; margin-bottom:var(--e3); }
.capa h1 { font-size:clamp(30px, 4.4vw, 46px); line-height:1.12; letter-spacing:-.02em; max-width:880px; margin:0 auto var(--e4); }
.capa p { font-size:18px; line-height:1.55; max-width:720px; margin:0 auto; opacity:.92; }
.capa .tag { margin-top:var(--e4); font-size:15px; font-style:italic; opacity:.8; }
.capa .ctas { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:var(--e8); }
/* botões sobre a faixa bordô/foto: a faixa é escura nos dois temas, então o botão é branco nos dois */
.btn-claro { display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--traco); font-weight:800; padding:13px 26px; border-radius:30px; text-decoration:none; font-size:15.5px; }
.btn-claro:hover { background:rgba(255,255,255,.86); }
.btn-vazado { display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:800; padding:13px 26px; border-radius:30px; text-decoration:none;
  border:2px solid rgba(255,255,255,.85); font-size:15.5px; }
.btn-vazado:hover { background:rgba(255,255,255,.12); }
:where(.capa, .faixa-traco) :focus-visible { outline-color:#fff; }

/* ---------- seções e cartões ---------- */
.sec { max-width:1140px; margin:0 auto; padding:var(--e16) var(--e5) var(--e4); }
.sec-h { text-align:center; max-width:740px; margin:0 auto var(--e8); }
.sec-h .kicker { color:var(--traco-texto); font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-bottom:var(--e2); }
.sec-h h2 { font-size:clamp(25px, 3vw, 32px); line-height:1.2; letter-spacing:-.015em; }
.sec-h p { color:var(--grafite-3); font-size:16.5px; margin-top:var(--e3); line-height:1.6; }
.cartoes { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--e5); }
.cartao { flex:1 1 300px; max-width:360px; background:var(--papel); border:1px solid var(--malha); border-radius:var(--r-gde);
  box-shadow:var(--relevo); overflow:hidden; display:flex; flex-direction:column; }
.cartao img { width:100%; aspect-ratio:4 / 3; object-fit:cover; background:var(--papel-margem); }
.cartao .corpo { padding:var(--e5) var(--e6) var(--e6); }
.cartao h3 { font-size:19px; color:var(--traco-texto); margin-bottom:var(--e2); }
.cartao p { color:var(--grafite-2); font-size:15px; line-height:1.6; }
.mais { text-align:center; margin-top:var(--e8); }
.btn { display:inline-flex; align-items:center; gap:8px; background:var(--traco); color:#fff; font-weight:800; padding:12px 22px; border-radius:10px;
  text-decoration:none; font-size:15px; border:0; cursor:pointer; }
.btn:hover { background:var(--traco-vivo); }
.btn-o { display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--traco-texto); color:var(--traco-texto); background:var(--papel);
  font-weight:800; padding:11px 21px; border-radius:10px; text-decoration:none; font-size:15px; }
.btn-o:hover { background:var(--traco-lav); }

/* ---------- faixa SCENG Tools (Home) ---------- */
.tools-faixa { max-width:1140px; margin:var(--e16) auto 0; padding:0 var(--e5); }
.tools-card { display:grid; grid-template-columns:minmax(0, 300px) minmax(0, 1fr); gap:var(--e10); align-items:center;
  background:var(--papel); border:1px solid var(--malha); border-left:6px solid var(--traco); border-radius:var(--r-gde);
  box-shadow:var(--relevo-alto); padding:var(--e10) var(--e10); }
.tools-card .marca img { width:100%; max-width:300px; height:auto; }
.tools-card .kicker { color:var(--traco-texto); font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-bottom:var(--e2); }
.tools-card h2 { font-size:clamp(23px, 2.6vw, 30px); line-height:1.2; letter-spacing:-.015em; margin-bottom:var(--e3); }
.tools-card p { color:var(--grafite-2); font-size:16px; line-height:1.6; margin-bottom:var(--e6); }
.tools-card .ctas { display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:760px) {
  .tools-card { grid-template-columns:1fr; gap:var(--e5); padding:var(--e6); text-align:left; }
  .tools-card .marca img { max-width:220px; }
}

/* ---------- depoimento e "sobre nós" (Home) ---------- */
.depo { max-width:820px; margin:var(--e16) auto 0; padding:0 var(--e5); text-align:center; }
.depo blockquote { font-size:clamp(19px, 2.2vw, 23px); line-height:1.5; color:var(--grafite); font-weight:600; }
.depo .quem { display:inline-flex; align-items:center; gap:12px; margin-top:var(--e5); color:var(--grafite-2); font-weight:700; font-size:15px; }
.depo .quem img { width:48px; height:48px; border-radius:50%; object-fit:cover; }
.lado { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); gap:var(--e10); align-items:center; }
.lado .foto img { width:100%; border-radius:var(--r-gde); box-shadow:var(--relevo-alto); object-fit:cover; max-height:520px; }
.lado .kicker { color:var(--traco-texto); font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-bottom:var(--e2); }
.lado h2 { font-size:clamp(25px, 3vw, 32px); line-height:1.2; margin-bottom:var(--e4); }
.lado p { color:var(--grafite-2); font-size:16.5px; line-height:1.7; margin-bottom:var(--e6); }
@media (max-width:820px) { .lado { grid-template-columns:1fr; gap:var(--e6); } .lado .foto img { max-height:340px; } }

/* ---------- Sobre ---------- */
.banner img { width:100%; border-radius:var(--r-gde); box-shadow:var(--relevo); }
.dupla { display:grid; grid-template-columns:1fr 1fr; gap:var(--e5); }
.bloco { background:var(--papel); border:1px solid var(--malha); border-radius:var(--r-gde); padding:var(--e8); box-shadow:var(--relevo); }
.bloco h2, .bloco h3 { font-size:21px; color:var(--traco-texto); margin-bottom:var(--e3); }
.bloco p { color:var(--grafite-2); font-size:15.5px; line-height:1.75; }
.bloco p + p { margin-top:var(--e3); }
@media (max-width:760px) { .dupla { grid-template-columns:1fr; } .bloco { padding:var(--e6); } }
.equipe { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--e5); }
.pessoa { flex:1 1 300px; max-width:350px; background:var(--papel); border:1px solid var(--malha); border-radius:var(--r-gde);
  padding:var(--e6); display:flex; gap:var(--e4); align-items:flex-start; box-shadow:var(--relevo); }
.pessoa img { width:72px; height:72px; border-radius:50%; object-fit:cover; flex:none; background:var(--papel-margem); }
.pessoa h3 { font-size:16.5px; color:var(--grafite); }
.pessoa .cargo { font-size:13px; font-weight:700; color:var(--traco-texto); margin:2px 0 6px; }
.pessoa p { font-size:14.5px; color:var(--grafite-2); line-height:1.5; }

/* ---------- Serviços: abas e galerias ---------- */
.abas { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:var(--e6); }
.abas.sub { justify-content:flex-start; margin:0 0 var(--e5); padding-bottom:var(--e4); border-bottom:1px solid var(--malha); }
.aba { font:inherit; font-weight:800; font-size:15px; padding:11px 20px; border-radius:30px; cursor:pointer;
  border:1.5px solid var(--campo-borda); background:var(--papel); color:var(--grafite-2); }
.aba:hover { border-color:var(--traco-texto); color:var(--traco-texto); }
.aba[aria-selected="true"] { background:var(--traco); border-color:var(--traco); color:#fff; }
.abas.sub .aba { font-size:14px; padding:8px 16px; }
.abas.sub .aba[aria-selected="true"] { background:var(--traco-lav); border-color:var(--traco-texto); color:var(--traco-texto); }
.painel { background:var(--papel); border:1px solid var(--malha); border-radius:var(--r-gde); padding:var(--e8); box-shadow:var(--relevo); }
.painel .painel { border:0; box-shadow:none; padding:0; background:none; }
.painel[hidden] { display:none; }
.topicos { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:var(--e5) var(--e8); }
.topico h3 { font-size:17px; color:var(--traco-texto); margin-bottom:var(--e2); }
.topico ul { list-style:none; }
.topico li { position:relative; padding:4px 0 4px 20px; color:var(--grafite-2); font-size:15px; line-height:1.55; }
.topico li::before { content:""; position:absolute; left:2px; top:13px; width:8px; height:2px; background:var(--traco-texto); }
.topico li strong { color:var(--grafite); }
.nota { margin-top:var(--e6); padding:var(--e4) var(--e5); background:var(--papel-fundo); border-left:4px solid var(--traco); border-radius:0 10px 10px 0;
  color:var(--grafite-2); font-size:15px; line-height:1.6; }
.galeria { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px; margin-top:var(--e6); }
.galeria button { padding:0; border:1px solid var(--malha); border-radius:var(--r-med); overflow:hidden; cursor:zoom-in; background:var(--papel-margem); }
.galeria img { width:100%; aspect-ratio:4 / 3; object-fit:cover; transition:transform var(--t-medio) var(--ease); }
.galeria button:hover img { transform:scale(1.04); }
@media (max-width:640px) { .painel { padding:var(--e5); } .topicos { grid-template-columns:1fr; } .galeria { grid-template-columns:repeat(2, 1fr); } }

/* janela de imagem (mesmo padrão do SCENG Tools: <dialog>, fecha com Esc, clique fora ou ×) */
.lb { border:0; padding:0; background:transparent; max-width:96vw; max-height:96vh; margin:auto; }
.lb::backdrop { background:rgba(10,11,14,.88); }
.lb figure { position:relative; }
.lb img { max-width:94vw; max-height:84vh; width:auto; height:auto; border-radius:10px; background:#fff; }
.lb figcaption { color:#e7e9ee; text-align:center; font-size:14px; margin-top:10px; }
.lb .lb-x, .lb .lb-ant, .lb .lb-prox { position:fixed; border:0; border-radius:50%; width:48px; height:48px; font-size:26px; line-height:1;
  background:rgba(255,255,255,.16); color:#fff; cursor:pointer; }
.lb .lb-x { top:16px; right:16px; }
.lb .lb-ant { left:16px; top:50%; transform:translateY(-50%); }
.lb .lb-prox { right:16px; top:50%; transform:translateY(-50%); }
.lb button:hover { background:rgba(255,255,255,.28); }
.lb :focus-visible { outline-color:#fff; }

/* ---------- Contato ---------- */
.contatos { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--e5); }
.contato { flex:1 1 260px; max-width:340px; background:var(--papel); border:1px solid var(--malha); border-radius:var(--r-gde);
  padding:var(--e8) var(--e6); text-align:center; box-shadow:var(--relevo); }
.contato .ic { width:52px; height:52px; border-radius:50%; background:var(--traco-lav); color:var(--traco-texto); display:inline-flex;
  align-items:center; justify-content:center; margin-bottom:var(--e4); }
.contato .ic svg { width:24px; height:24px; }
.contato h2 { font-size:18px; margin-bottom:var(--e2); }
.contato p, .contato a { font-size:16px; color:var(--grafite-2); text-decoration:none; overflow-wrap:anywhere; }
.contato a:hover { color:var(--traco-texto); text-decoration:underline; }
.contato .mapa { display:inline-block; margin-top:var(--e3); font-size:14px; font-weight:700; color:var(--traco-texto); }

/* ---------- 404 ---------- */
.erro404 { max-width:640px; margin:0 auto; padding:var(--e20) var(--e5); text-align:center; }
.erro404 .n { font-size:72px; font-weight:800; color:var(--traco-texto); line-height:1; }
.erro404 h1 { font-size:28px; margin:var(--e4) 0 var(--e3); }
.erro404 p { color:var(--grafite-3); margin-bottom:var(--e6); }

/* ---------- rodapé ---------- */
.foot { margin-top:var(--e16); border-top:1px solid var(--malha); background:var(--papel); padding:var(--e10) var(--e5) var(--e8); text-align:center; }
.foot nav { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 18px; margin-bottom:var(--e4); }
.foot nav a { color:var(--grafite-2); text-decoration:none; font-weight:700; font-size:14px; }
.foot nav a:hover { color:var(--traco-texto); }
.foot .dados { color:var(--grafite-3); font-size:13.5px; line-height:1.7; }
.foot .dados a { color:var(--grafite-3); }

/* ---------- foco e movimento ---------- */
:where(a, button, [tabindex]):focus-visible { outline:2.5px solid var(--traco-texto); outline-offset:3px; border-radius:var(--r-peq); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}