/* =========================
   VARIÁVEIS GLOBAIS DE TEMA
   ========================= */
:root{
  /* palette */
  --bg-light: #f8f9fa;
  --bg-page: #f4f4f9;
  --primary: #1e2a38;       /* tom escuro principal */
  --muted: #495057;
  --border: #dee2e6;
  --highlight: #fa0200;     /* vermelho vibrante (destaque) */
  --accent: #007bff;        /* azul secundário (se precisar) */
  --text-dark: #212529;
  --text-light: #f8f9fa;

  /* tokens visuais */
  --radius-md: 12px;
  --shadow-sm: 0 2px 5px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 30px rgba(0,0,0,0.08);
  --trans-fast: 180ms;
  --trans-slow: 400ms;

  /* tipografia */
  --font-main: 'Poppins', 'Segoe UI', Tahoma, sans-serif;
}

/* Preferência do usuário por reduzir animações */
@media (prefers-reduced-motion: reduce) {
  :root { --trans-fast: 0ms; --trans-slow: 0ms; }
}

/* =========================
   BASE
   ========================= */
* { box-sizing: border-box; }
html,body { height:100%; }
body {
  margin:0;
  background: var(--bg-page);
  color: var(--text-dark);
  font-family: var(--font-main);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* links */
a { color: inherit; text-decoration: none; transition: color var(--trans-fast); }
a:focus { outline: 3px solid rgba(250,2,0,0.12); outline-offset: 2px; }

/* containers utilitários */
.container-fluid, .container { max-width: 1140px; margin-inline:auto; padding-inline:1rem; }



/* =========================
   OFFCANVAS (detalhes / financiamento)
   ========================= */
.offcanvas {
  border-radius: 12px 12px 0 0;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}
.offcanvas .offcanvas-header { border-bottom: 1px solid var(--border); padding:1rem 1.25rem; }
.offcanvas .offcanvas-body { padding:1rem 1.25rem; }

/* =========================
   NAVBAR (tema escuro com destaque vermelho)
   ========================= */
.site-top { background: #333333; }
.navbar { padding: .5rem 0; background: transparent; }
.navbar-brand img { max-height:56px; height:auto; }

/* links do menu */
.navbar-nav .nav-link {
  color: var(--text-light) !important;
  display:flex; align-items:center;
  gap:.5rem;
  padding: .35rem .6rem;
  border-radius:6px;
  transition: background-color var(--trans-fast), color var(--trans-fast), transform var(--trans-fast);
}

/* ícone (bootstrap icons) */
.navbar-nav .nav-link i { font-size:1.05rem; }

/* hover / focus */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--text-light) !important;
  background: linear-gradient(90deg, rgba(250,2,0,0.12), rgba(250,2,0,0.06));
  transform: translateY(-1px);
}

/* destaque do link ativo - use classe .active no backend */
.navbar-nav .nav-link.active {
  background: var(--highlight);
  color: var(--text-light) !important;
  box-shadow: 0 6px 18px rgba(250,2,0,0.12);
}

/* responsivo: centraliza menu em mobile quando aberto */
@media (max-width:991.98px) {
  .navbar-nav { width:100%; text-align:center; }
  .navbar-nav .nav-item { display:block; padding: .25rem 0; }
}

/* =========================
   RODAPÉ
   ========================= */
.footer {
  background: var(--primary);
  color: var(--text-light);
  padding: 2rem 0;
}
.footer a { color: inherit; }
.footer a:hover { color: var(--highlight); }

/* =========================
   BOTÕES SOCIAIS FIXOS
   ========================= */
/* Estilos para Botões Sociais Flutuantes */
.social-float-section {
    position: fixed;
    bottom: 220px;
    right: 20px;
    z-index: 1050;
}

.social-icon {
    display: block;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 50%;
    color: white;
    margin-top: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
    font-size: 20px;
}

.social-icon:hover {
    transform: scale(1.1);
}

/* Cores padrão das redes sociais mantidas */
.whatsapp {
    background-color: #25D366;
}
.facebook {
    background-color: #1877F2;
}
.instagram {
    background-color: #E4405F;
} 

/* =========================
   UTILIDADES
   ========================= */
.text-center { text-align:center; }
.mt-1 { margin-top:.25rem; }
.mb-1 { margin-bottom:.25rem; }

/* =========================
   NOTAS & BOAS PRÁTICAS
   =========================
   - Evite usar !important; só use quando estritamente necessário.
   - Para marcar o item de menu ativo, defina no servidor/front: <a class="nav-link active" ...>
   - Garanta carregar Google Fonts / Poppins no <head> se usar a família Poppins.
   - Carregue Bootstrap Icons (CDN) no head:
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
   - Se usar PHP para detectar página atual, prefira injetar a classe `active` no markup em vez de CSS com PHP embutido.
*/