/* 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; } }

.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; }

/* ── Ajustes Alfa Centro Automotivo ─────────────────────────────── */

/* Selo "Credenciada Porto Serviço" acima do título do hero. */
.hero__badge{
  display:inline-block; margin-bottom:1rem; padding:.4rem .9rem; border-radius:999px;
  font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:color-mix(in srgb, var(--color-primary) 35%, transparent);
  border:1px solid color-mix(in srgb, var(--color-secondary) 60%, transparent); color:#fff;
}
.about p + p{ margin-top:0; }

/* Correção de bug do shared/base.css: `img{max-width:100%}` trava a
   largura de .card__photo e sobra um vão de 3.7rem à direita. */
.card__photo{ max-width:none; }

/* Correção de bug do shared/base.css: menu mobile.
   1) .header tem backdrop-filter, que o torna bloco de contenção do painel
      position:fixed — o painel media 84px em vez da tela. Sem blur no mobile.
   2) Painel fechado escondido para a direita gerava rolagem horizontal;
      escondido para cima não gera. */
@media (max-width:900px){
  .header{ backdrop-filter:none; -webkit-backdrop-filter:none; background:#fff; }
  .header__nav{ transform:translateY(-100vh); }
  .header__nav.is-open{ transform:translateY(0); }
}

/* Logo não encolhe no header estreito; abaixo de 560px o botão do header
   sai (o botão flutuante do WhatsApp e o do hero continuam). */
.header__logo{ flex:none; }
@media (max-width:560px){
  .header__actions .btn-primary{ display:none; }
  .header__logo img{ height:40px; }
}

/* Seção escura (#contato): o texto de apoio e o selo herdavam o cinza das
   seções claras e ficavam quase invisíveis sobre o fundo preto. */
.section--dark .section-head p{ color:rgba(255,255,255,.75); }
.section--dark .eyebrow{ color:#fff; background:color-mix(in srgb, var(--color-primary) 55%, transparent); }

/* Sobre nós: foto da fachada acima dos pilares, na coluna da direita. */
.about__side{ display:grid; gap:1.5rem; }
.about__photo{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius);
  box-shadow:0 10px 24px rgba(16,20,30,.12);
}