/* Identidade AutoControl — tokens oficiais (os mesmos dos produtos), topo, rodapé e botões.
   Carregado por último em todas as páginas: vale por cima do layout antigo até cada página
   ser reescrita. Cores: azul = ação, amarelo = acento (nunca em botão), marinho = fundos. */

:root {
  --cor-primaria: #1e9cd8;
  --cor-primaria-hover: #1786bd;
  --cor-primaria-suave: #e4f3fb;
  --cor-amarelo: #e9c400;
  --cor-amarelo-texto: #3a3000;
  --cor-marinho: #2c5f87;
  --cor-marinho-800: #1b3a54;
  --cor-marinho-900: #12293c;
  --cor-texto: #1d2733;
  --cor-texto-suave: #5c6b7a;
  --cor-texto-invertido: #ffffff;
  --cor-borda: #dce3ea;
  --cor-borda-suave: #e9eef3;
  --cor-fundo: #f5f7fa;
  --cor-superficie: #ffffff;
  --cor-superficie-2: #f8fafc;
  --cor-sucesso: #1e9e56;
  --fonte: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --raio-m: 8px;
  --raio-g: 12px;
  --raio-gg: 20px;
  --sombra-1: 0 1px 2px rgba(18, 41, 60, 0.06), 0 1px 3px rgba(18, 41, 60, 0.08);
  --sombra-2: 0 8px 24px rgba(18, 41, 60, 0.14);
  --sombra-3: 0 24px 60px rgba(18, 41, 60, 0.18);
  --foco: 0 0 0 3px rgba(30, 156, 216, 0.35);
  --largura: 1200px;

  /* Ponte para o layout antigo: as páginas ainda não reescritas passam a usar as cores oficiais. */
  --global-blue: var(--cor-marinho);
  --global-blue-dark: var(--cor-marinho-800);
  --global-blue-soft: var(--cor-primaria-suave);
  --global-accent: var(--cor-primaria);
  --global-text: var(--cor-texto);
  --global-muted: var(--cor-texto-suave);
  --global-line: var(--cor-borda);
  --global-shadow: var(--sombra-2);
  --global-container: var(--largura);
}

html { scroll-behavior: smooth; }
body { font-family: var(--fonte); color: var(--cor-texto); }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--raio-m); }

/* ── Botões ─────────────────────────────────────────────────── */
/* O `display` do botão do topo fica a cargo das regras de celular, abaixo (compacto até 640 px,
   escondido onde nem compacto cabe). Aqui só o desenho. */
.btn { display: inline-flex; }
.btn,
.topbar a.btn,
.topbar a.btn:visited {
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--raio-m);
  font-family: var(--fonte);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
/* Só o botão do topo não quebra linha; nas páginas, botão com texto longo quebra em vez de alargar a tela. */
.topbar a.btn { white-space: nowrap; }
.btn:hover, .topbar a.btn:hover { transform: translateY(-1px); }
.btn-primary, .topbar a.btn-primary, .topbar a.btn-primary:visited {
  color: #fff;
  background: var(--cor-primaria);
  box-shadow: 0 10px 24px rgba(30, 156, 216, 0.28);
}
.btn-primary:hover, .topbar a.btn-primary:hover { background: var(--cor-primaria-hover); color: #fff; }
.btn-secondary, .btn-secondary:visited {
  color: var(--cor-marinho);
  background: var(--cor-superficie);
  border-color: var(--cor-borda);
}
.btn-secondary:hover { border-color: var(--cor-primaria); color: var(--cor-primaria-hover); }
.btn-light, .btn-light:visited { color: #fff; background: transparent; border-color: rgba(255, 255, 255, .5); }
.btn-light:hover { background: rgba(255, 255, 255, .1); }

/* ── Topo ───────────────────────────────────────────────────── */
.topbar {
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--cor-borda-suave);
  backdrop-filter: blur(14px);
  font-family: var(--fonte);
}
.topbar .topbar-inner { min-height: 80px; gap: 20px; }
.topbar .brand img { height: 52px; width: auto; }
.topbar .nav { gap: 2px; font-size: 14.5px; }
.topbar .nav a {
  padding: 9px 12px;
  border-radius: var(--raio-m);
  color: var(--cor-texto);
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.topbar .nav a:hover, .topbar .nav a:focus-visible { background: var(--cor-primaria-suave); color: var(--cor-primaria-hover); }
.topbar .nav a[aria-current="page"] { color: var(--cor-primaria-hover); }

/* Produtos: submenu que abre no desktop e fica aberto no celular */
.nav-grupo { position: relative; }
.nav-grupo > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 3px 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .7;
}
.nav-sub {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 330px;
  padding: 8px;
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-g);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.nav-grupo:hover .nav-sub, .nav-grupo:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.topbar .nav .nav-sub a { display: grid; gap: 2px; padding: 10px 12px; font-weight: 600; }
.topbar .nav .nav-sub a span { color: var(--cor-texto-suave); font-size: 13px; font-weight: 500; }
.topbar .nav .nav-sub a strong { color: var(--cor-marinho); font-weight: 700; }
.topbar .nav .nav-sub a:hover strong { color: var(--cor-primaria-hover); }

.menu-toggle { border-color: var(--cor-borda); }
.menu-toggle span { background: var(--cor-marinho); }

@media (max-width: 860px) {
  body { padding-top: 72px; }
  .topbar .topbar-inner { min-height: 72px; }
  .topbar .brand img { height: 44px; width: auto; }
  .topbar .nav { gap: 4px; padding: 10px; border-radius: var(--raio-g); }
  .topbar .nav a { padding: 12px 14px; background: #fff; border: 1px solid var(--cor-borda-suave); }
  .nav-grupo > a { display: block; }
  .nav-grupo > a::after { display: none; }
  .nav-sub {
    position: static;
    min-width: 0;
    margin: 4px 0 2px 12px;
    padding: 0;
    border: 0;
    border-left: 2px solid var(--cor-primaria-suave);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: grid;
    gap: 4px;
    padding-left: 10px;
  }
}

/* Celular estreito: logo menor e botão compacto; some só onde nem compacto cabe (a consulta de
   contêiner `topo` é declarada em global-layout.css; limite medido: 348 px úteis). */
@media (max-width: 640px) {
  .topbar .topbar-inner { gap: 8px; }
  .topbar .brand img { width: 128px; height: auto; }
  .topbar a.btn,
  .topbar a.btn:visited {
    display: inline-flex;
    width: auto;
    min-height: 40px;
    padding: 0 12px;
    font-size: 13px;
    box-shadow: none;
  }
}
@container topo (max-width: 350px) {
  .topbar a.btn,
  .topbar a.btn:visited { display: none; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 390px) {
    .topbar a.btn,
    .topbar a.btn:visited { display: none; }
  }
}

/* ── Rodapé ─────────────────────────────────────────────────── */
.footer, .site-footer {
  margin-top: 0;
  padding: 64px 0 28px;
  background: var(--cor-marinho-900);
  color: rgba(255, 255, 255, .82);
  border-top: 0;
}
.footer .footer-grid { gap: 40px; }
.footer img { height: 44px; width: auto; margin-bottom: 14px; }
.footer p, .footer span { color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 1.6; }
.footer strong { display: block; margin-bottom: 12px; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.footer a { color: rgba(255, 255, 255, .82); font-size: 14px; text-decoration: none; }
.footer a:hover { color: var(--cor-amarelo); }
.footer .footer-selo { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; font-size: 12px; color: rgba(255, 255, 255, .8); }
.footer .footer-selo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cor-amarelo); }
.footer .footer-bottom { margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); }
.footer .footer-bottom span { font-size: 13px; }

/* ── Flutuantes ─────────────────────────────────────────────── */
.cookie-consent { font-family: var(--fonte); border-color: var(--cor-borda); box-shadow: var(--sombra-2); }
.cookie-consent .cookie-primary { background: var(--cor-primaria); }
.cookie-consent .cookie-primary:hover { background: var(--cor-primaria-hover); }
.cookie-consent a { color: var(--cor-primaria-hover); }