/* Template 1 — Clássica (base: Oficina Campo Belo) */

.about{
  display:grid; grid-template-columns:1.1fr .9fr; gap:var(--gap); align-items:start;
}
.about__values{ display:grid; gap:1.5rem; background:var(--color-bg-alt); padding:2rem; border-radius:var(--radius); }
.about__values h4{ color:var(--color-primary); margin-bottom:.35rem; }
.about__values p{ margin:0; color:var(--color-text-muted); font-size:.95rem; }
@media (max-width:900px){ .about{ grid-template-columns:1fr; } }

/* Aperta o cabeçalho em larguras intermediárias pra caber os 5 itens + botão */
@media (max-width:1120px) and (min-width:901px){
  .header__nav{ gap:1.3rem; }
  .header .container{ gap:1rem; }
}

/* Galeria com 6 fotos — 3 colunas em vez das 4 padrão */
.gallery{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:900px){ .gallery{ grid-template-columns:repeat(2, 1fr); } }

.units{ grid-template-columns:1fr 1fr; align-items:stretch; }
.units iframe{ min-height:340px; }
@media (max-width:900px){ .units{ grid-template-columns:1fr; } }

.section--dark .unit-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.section--dark .unit-card__row{ color:rgba(255,255,255,.75); }
.section--dark .unit-card__row strong{ color:#fff; }

/* ── Quem atendemos: caminhonetes, vans e frotas ───────────────────────────── */
.fleet{ display:grid; gap:var(--gap); grid-template-columns:repeat(3, 1fr); }
.fleet-card{
  display:flex; flex-direction:column; overflow:hidden; background:#fff;
  border-radius:var(--radius); border-top:3px solid var(--color-primary);
  box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease;
}
.fleet-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.fleet-card__media{ position:relative; }
.fleet-card__media img{ width:100%; height:230px; object-fit:cover; }
.fleet-card__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, color-mix(in srgb, var(--color-dark) 60%, transparent) 0%, transparent 58%);
}
.fleet-card__tag{
  position:absolute; left:1.1rem; bottom:1.1rem; z-index:1;
  font-family:var(--font-heading); font-weight:700; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:#fff;
  background:var(--color-primary); padding:.4rem .8rem; border-radius:var(--radius-sm);
}
.fleet-card__body{ display:flex; flex-direction:column; gap:.9rem; flex:1; padding:1.6rem 1.7rem 1.8rem; }
.fleet-card__body h3{ margin:0; font-size:1.15rem; }
.fleet-card__body p{ margin:0; color:var(--color-text-muted); font-size:.95rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:auto; padding-top:.35rem; }
.chips span{
  font-size:.78rem; font-weight:600; color:var(--color-secondary);
  background:var(--color-bg-alt); border:1px solid var(--color-border);
  border-radius:999px; padding:.32rem .75rem;
}
@media (max-width:960px){ .fleet{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px){ .fleet{ grid-template-columns:1fr; } }

/* ── Faixa de destaque com foto de caminhonete ─────────────────────────────── */
.band{ position:relative; overflow:hidden; background:var(--color-dark); }
.band__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,
    var(--color-dark) 0%,
    color-mix(in srgb, var(--color-dark) 88%, transparent) 42%,
    color-mix(in srgb, var(--color-dark) 22%, transparent) 100%);
}
.band > .container{ position:relative; z-index:1; padding-block:clamp(3.25rem, 6vw, 5.5rem); }
.band__inner{ max-width:620px; }
.band__inner h2{ color:#fff; font-size:clamp(1.7rem, 2.8vw, 2.3rem); }
.band__inner p{ color:rgba(255,255,255,.82); margin:.5rem 0 1.75rem; font-size:1.05rem; }
.band__inner .eyebrow{ color:#fff; background:rgba(255,255,255,.14); }
@media (max-width:700px){
  .band::after{ background:linear-gradient(0deg, var(--color-dark) 18%, color-mix(in srgb, var(--color-dark) 82%, transparent) 100%); }
}

/* Nav ganhou um 6º item ("Atendemos") — aperta mais cedo pra não quebrar linha */
@media (max-width:1200px) and (min-width:901px){
  .header__nav{ gap:1.1rem; }
  .header__nav a{ font-size:.9rem; }
  .header .container{ gap:.85rem; }
}

/* ── Correções de bug do shared/base.css ─────────────────────────────────
   Os quatro defeitos abaixo vêm do base.css da skill e valem para todos os
   templates. A correção mora aqui (no style.css do cliente) porque o
   base.css é a cópia do cliente e não deve divergir do fonte. */

/* 1. Foto do card não preenchia a largura. `.card__photo` pede
   width:calc(100% + 3.7rem) para sangrar nas duas laterais, mas a regra
   global `img{max-width:100%}` do base.css trava essa largura. A foto saía
   deslocada para a esquerda, com um vão de 3.7rem à direita. */
.card__photo{ max-width:none; }

/* 2 e 3. Rolagem horizontal no celular e menu com altura errada. No mobile
   o menu fechado fica position:fixed com translateX(100%), parado fora da
   tela à direita — o Chrome conta esse painel na largura de rolagem do
   documento e a página inteira rolava na horizontal. visibility:hidden e
   overflow-x:hidden não resolvem, só esconder o painel para CIMA, porque
   transbordo acima do topo não gera área rolável e a animação continua.
   O backdrop-filter do header também precisa sair: ele torna o header
   bloco de contenção do painel fixed, que passa a medir 84px de altura em
   vez da tela inteira. Sem o blur, o header volta a medir contra o
   viewport — por isso o fundo fica mais opaco aqui. */
@media (max-width:900px){
  .header{ background:rgba(255,255,255,.97); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .header__nav{ transform:translateY(-100vh); }
  .header__nav.is-open{ transform:translateY(0); }
}

/* 4. Logo espremido no header estreito: `.header__logo` é item flex e
   encolhia até ~30px de largura, esmagado pelo botão "Orçamento". O logo
   passa a não encolher e abaixo de 560px o botão do header sai — nenhum
   CTA se perde, porque o botão flutuante do WhatsApp fica sempre visível e
   o hero já traz "Fazer orçamento no WhatsApp" logo abaixo. */
.header__logo{ flex:none; }
@media (max-width:560px){
  .header__actions .btn-primary{ display:none; }
}

/* O card "Bomba de alta pressão" é o único serviço sem foto: o banco de
   imagens não tem foto de bomba de alta nem de bico injetor, e foto de
   outra peça ilustraria o serviço errado. Em vez de deixar um buraco na
   fileira, o espaço da imagem recebe um painel na cor da marca — mesma
   altura e mesmo sangramento da .card__photo, então o ritmo do grid se
   mantém sem afirmar nada falso. */
.card__swatch{
  display:block; height:170px; width:calc(100% + 3.7rem); margin:0 -1.85rem -28px;
  background:
    radial-gradient(120% 110% at 18% 0%, color-mix(in srgb, var(--color-primary) 60%, transparent) 0%, transparent 68%),
    linear-gradient(135deg, var(--color-dark) 0%, var(--color-secondary) 100%);
}