/* ==========================================================================
   HEADER — fixo, com foto de fundo, título 100% fluido e menu mobile

   TÍTULO RESPONSIVO: o tamanho é o MENOR entre dois valores:
     a) o que ainda cabe na barra: (largura da tela - espaço do logo e do
        botão) / 9.6  -> garante que nunca estoure, mesmo a 280px;
     b) um teto (2rem; 2.25rem em telas grandes) para não ficar gigante.
   O nome fica sempre em 2 linhas ("Auto Mecânica" / "Albaro Lima").
   O menu de links só aparece quando há espaço (>= 1180px); antes disso
   entra o botão hambúrguer.
   ========================================================================== */

.header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; color: #fff;
  background: var(--azul-900) url('../assets/img/header-fundo.jpg') center / cover no-repeat;
  box-shadow: var(--sombra-lg);
}
.header::before {                /* camada escura para o texto ficar legível */
  content: ""; position: absolute; inset: 0;
  background: rgba(15,23,42,.8); pointer-events: none;
}
.header__barra {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: var(--altura-header);
}

/* ---- Marca: logo + nome ---- */
.marca { display: flex; align-items: center; gap: clamp(.5rem, 1.5vw, .75rem); min-width: 0; }

.marca__logo {
    width: clamp(5rem, 14vw, 11rem);
    height: auto;
    flex-shrink: 0;
    border-radius: .5rem;
    transition: transform .3s;
}

.marca:hover .marca__logo { transform: scale(1.05); }

.marca__nome {
  display: flex; flex-direction: column; min-width: 0;
  /* 9.5rem = padding + logo + gaps + hambúrguer; 9.6 = largura do texto em "em" */
  font-size: min(calc((100vw - 9.5rem) / 9.6), 2.5rem);   /* <- título fluido */
  font-weight: 800; font-style: italic; text-transform: uppercase;
  letter-spacing: .025em; line-height: 1.05;
}
.marca__linha { white-space: nowrap; text-shadow: 0 2px 4px rgba(0,0,0,.6); }
.marca__linha--azul     { color: var(--azul-600); }
.marca__linha--amarela  { color: var(--amarelo-500); }

/* ---- Navegação desktop ---- */
.nav, .header__cta { display: none; }
.nav__link {
  padding-block: .5rem; border-bottom: 2px solid transparent;
  font-size: .8125rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  transition: color .2s, border-color .2s;
}
.nav__link:hover { color: var(--vermelho-500); border-color: var(--vermelho-600); }

/* ---- Botão hambúrguer ---- */
.menu-btn {
  display: inline-flex; padding: .5rem; border: 0; border-radius: .375rem;
  background: none; color: var(--cinza-300); font-size: 1.75rem; cursor: pointer;
}
.menu-btn:hover { color: #fff; }

/* ---- Menu mobile (abre abaixo da barra) ---- */
.menu-mobile {
  position: relative; max-height: calc(100vh - var(--altura-header)); overflow-y: auto;
  background: var(--azul-900); border-top: 1px solid var(--azul-800);
}
.menu-mobile__lista { display: grid; gap: .75rem; padding: .75rem 1rem 1.5rem; font-weight: 600; }
.menu-mobile__link {
  display: block; padding: .5rem .75rem; border-radius: .375rem; color: var(--cinza-300);
}
.menu-mobile__link:hover { color: #fff; background: var(--azul-800); }
.menu-mobile__cta { padding-top: .5rem; }

/* ---- Desktop: a partir de 1180px sobra espaço para o menu completo ---- */
@media (min-width: 1180px) {
  .nav { display: flex; gap: clamp(1rem, 1.8vw, 2rem); }
  .header__cta { display: inline-flex; }
  .menu-btn, .menu-mobile { display: none; }
}
@media (min-width: 1180px) and (max-width: 1365px) {
  .nav__link { font-size: .75rem; }
  .header__cta { padding-inline: 1rem; }
}

/* ---- Telas grandes: sobra espaço, o título cresce mais ---- */
@media (min-width: 1366px) {
  .marca__nome { font-size: 2.25rem; }
}