/* ============================================================
   BLOCO 01 — SITE INTEIRO AZUL ESCURO (SEM “BRANCO OPACO”)
   ARQUIVO: public/assets/css/app.css
   AÇÃO: substituir TODO o arquivo por este bloco
   OBJETIVO:
   - corpo e seções azuis
   - cards azuis (não branco)
   - header sólido e fixo sem sumir
   - mapa SEM overlay/texto e com altura correta (mapa.png aparece)
============================================================ */

:root{
  /* Base azul (site inteiro) */
  --azul-900:#0B1626;     /* fundo principal (mais escuro) */
  --azul-850:#0E1A2B;     /* variação */
  --azul-800:#13233D;     /* cards */
  --azul-750:#182B4A;     /* hover/realce */

  /* Marca */
  --vermelho:#E30613;
  --amarelo:#F5C400;

  /* Texto */
  --branco:#FFFFFF;
  --texto:#EAF0FF;
  --muted:#BFC7D5;

  /* UI */
  --borda:rgba(255,255,255,.10);
  --sombra:0 10px 28px rgba(0,0,0,.25);
}

body{
  font-family:system-ui;
  background:var(--azul-900);
  color:var(--texto);
}

/* Força todas as seções a ficarem no tema azul */
section{
  background:var(--azul-900);
}

/* Títulos */
h1,h2,h3,h4,h5{
  color:var(--branco);
}

/* Bootstrap “text-muted” vira cinza claro */
.text-muted{
  color:var(--muted)!important;
}

/* =========================
   HEADER fixo (sem sumir)
========================= */
.site-header{
  position:sticky;
  top:0;
  z-index:2000; /* garante acima do hero/sections */
  background:var(--azul-850);
  border-bottom:1px solid var(--borda);
}

.brand-logo{
  height:34px;
  width:auto;
  display:block;
}

.site-nav-link{
  text-decoration:none;
  color:rgba(255,255,255,.88);
}
.site-nav-link:hover{
  color:var(--branco);
}

/* =========================
   HERO
========================= */
.hero-slide{
  height:90vh;
  background-size:cover;
  background-position:center;
  position:relative;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(11,22,38,.88),
    rgba(11,22,38,.62)
  );
}

.hero-content{
  position:relative;
  color:#fff;
  padding-top:22vh;
}

/* =========================
   Seções que estavam “bg-light” (ficam azul também)
========================= */
.bg-light{
  background:linear-gradient(180deg,var(--azul-850),var(--azul-900))!important;
}

/* =========================
   Cards e blocos (remover branco opaco)
========================= */
.card,
.bg-white,
.p-4.border.rounded-4,
.p-3.border.rounded-4,
.border.rounded-4{
  background:var(--azul-800)!important;
  border:1px solid var(--borda)!important;
  color:var(--texto)!important;
  box-shadow:var(--sombra);
}

/* Badges escuras mantêm leitura */
.badge.text-bg-dark{
  background:#0A1320!important;
}

/* =========================
   Formulários
========================= */
.form-label{
  color:rgba(255,255,255,.90);
}

.form-control{
  background:rgba(255,255,255,.06);
  border:1px solid var(--borda);
  color:var(--branco);
}

.form-control::placeholder{
  color:rgba(191,199,213,.75);
}

.form-control:focus{
  background:rgba(255,255,255,.08);
  border-color:rgba(245,196,0,.40);
  box-shadow:0 0 0 .25rem rgba(245,196,0,.12);
  color:var(--branco);
}

/* =========================
   Botões
========================= */
.btn-primary{
  background:var(--vermelho);
  border:none;
}

.btn-primary:hover{
  background:#c5040f;
}

/* =========================
   Bloco de imagem (FROTA)
========================= */
.img-card{
  min-height:420px;
  border-radius:16px;
  background-size:cover;
  background-position:center;
  position:relative;
  overflow:hidden;
  border:1px solid var(--borda);
  box-shadow:var(--sombra);
}

.img-card-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,.12));
}

.img-card-text{
  position:absolute;
  left:18px;
  bottom:16px;
  color:#fff;
}

/* =========================
   MAPA (ÁREAS): altura correta + background (mapa.png aparece)
   E sem texto/overlay em cima (você pediu)
========================= */
.map-card{
  width:100%;
  min-height:520px;                 /* desktop (encaixa certo) */
  border-radius:18px;
  overflow:hidden;

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}

/* remove qualquer texto por cima do mapa */
.map-card-text{
  display:none !important;
}

/* remove qualquer véu por cima do mapa */
.map-card-overlay{
  display:none !important;
}

/* =========================
   Destaques amarelos
========================= */
.text-warning,
.highlight{
  color:var(--amarelo)!important;
}

/* =========================
   Reveal
========================= */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s ease, transform .55s ease;
  will-change:opacity, transform;
}
.reveal.show{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   Rodapé
========================= */
footer{
  background:var(--azul-900);
  border-top:1px solid var(--borda)!important;
}

/* =========================
   Responsivo
========================= */
@media(max-width:991.98px){
  .map-card{min-height:360px}
}

@media(max-width:768px){
  .hero-slide{height:75vh}
  .hero-content{padding-top:18vh}
  .img-card{min-height:320px}
  .map-card{min-height:260px}
}


/* ============================================================
   BLOCO — HEADER MOBILE (CORRIGE SCROLL HORIZONTAL)
   OBJETIVO:
   - no mobile: botões em coluna
   - elimina overflow lateral
============================================================ */

@media (max-width: 768px){

  /* impede qualquer estouro lateral */
  body{
    overflow-x: hidden;
  }

  .site-header .container{
    flex-wrap: wrap;
    gap: 10px;
  }

  /* logo + nome continuam ok */
  .site-header .d-flex.align-items-center.gap-2{
    width: 100%;
  }

  /* bloco dos botões */
  .site-header .d-flex.gap-2{
    width: 100%;
    flex-direction: column;
  }

  .site-header .d-flex.gap-2 .btn{
    width: 100%;
    text-align: center;
  }
}
/* ============================================================
   BLOCO — HEADER: BOTÕES ALINHADOS À DIREITA
   OBJETIVO:
   - WhatsApp + Cotação ficam no canto direito
   - desktop e mobile estáveis
============================================================ */

/* empurra o grupo de botões para a direita */
.site-header .container > .d-flex.gap-2{
  margin-left: auto;
}

/* mobile: mantém alinhado à direita, sem estourar */
@media (max-width: 768px){
  .site-header .container > .d-flex.gap-2{
    align-items: flex-end;
  }
}



/* ============================================================
   BLOCO 02 — NAVBAR (TEMA AZUL ESCURO + LINKS OK)
   ARQUIVO: public/assets/css/app.css
   AÇÃO: colar no final
============================================================ */

.site-header{
  position: sticky;
  top: 0;
  z-index: 2000;
  background: var(--azul-850);
  border-bottom: 1px solid var(--borda);
}

/* marca */
.brand-logo{
  height: 34px;
  width: auto;
  display: block;
}

/* links */
.navbar-dark .navbar-nav .nav-link{
  color: rgba(255,255,255,.88);
  font-size: .92rem;
}
.navbar-dark .navbar-nav .nav-link:hover{
  color: var(--branco);
}

/* botão hambúrguer visível no fundo azul */
.navbar-dark .navbar-toggler{
  border-color: rgba(255,255,255,.18);
}