/* Template 4 — Funilaria e Pintura (base: MF Funilaria e Pintura)
   Adaptado para a Nova Mais Centro Automotivo: laranja da fachada + grafite,
   com seções extras de estrutura, como funciona, galeria e seguradoras. */

.center{ text-align:center; margin-top:2.5rem; }

.split-head{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:center; }
.split-head p{ color:var(--color-text-muted); }
@media (max-width:900px){ .split-head{ grid-template-columns:1fr; } }

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* A fachada tem o letreiro no terço de cima: ancora o corte ali. */
.hero__bg{ object-position:65% 30%; }
.hero__kicker{
  display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-accent); margin-bottom:1rem;
}
.hero__content h1{ text-wrap:balance; }
.hero__badges{ padding:0; }
.hero__badge{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:999px;
  padding:.45rem .95rem; opacity:1;
}
.hero__badge--google{ background:#fff; color:var(--color-dark); border-color:#fff; }
.hero__stars{ color:var(--color-accent); letter-spacing:.05em; margin-right:.3rem; }
.hero .btn-outline{ color:#fff; }

/* ── Estrutura ────────────────────────────────────────────────────────── */
.structure-photos{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.structure-photos img{ width:100%; height:380px; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); }
.structure-photos img:last-child{ margin-top:2.5rem; }
@media (max-width:640px){ .structure-photos img{ height:240px; } }
.structure-cards{ margin-top:clamp(2.5rem, 5vw, 4rem); }
.structure-cards .card{ border:1px solid var(--color-border); }
.structure-cards .card h3{ font-size:1.02rem; }

/* ── Serviços ─────────────────────────────────────────────────────────── */
.service-card{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius); padding:1.25rem;
  display:flex; flex-direction:column;
}
.service-card img{ width:100%; height:220px; object-fit:cover; border-radius:var(--radius-sm); margin-bottom:1rem; }
.service-card h3{ font-size:1.15rem; }
.service-card p{ color:var(--color-text-muted); font-size:.92rem; margin:0 0 1rem; }
.service-card--featured{ border:2px solid var(--color-primary); box-shadow:var(--shadow-lg); }
.service-card__tag{
  align-self:flex-start; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--color-primary); margin-bottom:.4rem;
}
.service-card__link{ margin-top:auto; font-weight:700; font-size:.9rem; color:var(--color-primary-dark); }
.service-card__link:hover{ text-decoration:underline; }

.other-services{ margin-top:2.5rem; text-align:center; }
.other-services h4{ margin-bottom:1rem; }
.other-services ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; }
.other-services li{
  background:#fff; border:1px solid var(--color-border); border-radius:999px; padding:.5rem 1.1rem;
  font-size:.85rem; font-weight:600;
}

/* ── Como funciona ───────────────────────────────────────────────────── */
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); counter-reset:none; }
@media (max-width:960px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
.steps__item{ position:relative; padding:1.5rem; border-radius:var(--radius); background:var(--color-bg-alt); }
.steps__num{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--color-primary); color:#fff; font-weight:800; font-size:1.1rem; margin-bottom:1rem;
}
.steps__item h3{ font-size:1.05rem; }
.steps__item p{ margin:0; color:var(--color-text-muted); font-size:.92rem; }

/* ── Galeria ─────────────────────────────────────────────────────────── */
.gallery--mosaic{ grid-template-columns:repeat(3,1fr); }
.gallery--mosaic img{ height:280px; }
@media (max-width:900px){ .gallery--mosaic{ grid-template-columns:repeat(2,1fr); } .gallery--mosaic img{ height:200px; } }

/* ── Avaliações: 3 colunas no desktop (5 reviews não deixa card órfão sozinho numa linha de 4) */
@media (min-width:1000px){ .reviews__grid{ grid-template-columns:repeat(3, 1fr); } }

/* ── Seguradoras: bloco próprio, mas mais discreto que o do particular ─ */
.insurance{
  display:grid; grid-template-columns:1.2fr .8fr; gap:var(--gap); align-items:center;
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:clamp(1.5rem, 4vw, 3rem);
}
.insurance h2{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); }
.insurance p{ color:var(--color-text-muted); }
.insurance__list{ display:grid; gap:.6rem; margin:0 0 1.75rem; }
.insurance__list li{ display:flex; gap:.6rem; align-items:flex-start; font-weight:600; font-size:.95rem; }
.insurance__list li::before{
  content:"✓"; flex:none; width:22px; height:22px; border-radius:50%; background:var(--color-accent); color:#1C1818;
  display:grid; place-items:center; font-size:.72rem; font-weight:900; margin-top:.1rem;
}
.insurance__photo{ width:100%; height:100%; min-height:300px; object-fit:cover; border-radius:var(--radius); }
@media (max-width:860px){
  .insurance{ grid-template-columns:1fr; }
  .insurance__photo{ min-height:220px; height:220px; }
}
.insurance .btn{ white-space:normal; text-align:center; }

/* ── Sobre ───────────────────────────────────────────────────────────── */
.about-story{ max-width:780px; margin:0 auto; text-align:center; }
.about-story p{ color:rgba(255,255,255,.8); font-size:1.05rem; }
.values{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-top:2rem; }
.values li{
  border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:.45rem 1rem;
  font-size:.85rem; font-weight:600; color:#fff;
}

/* ── Contato ─────────────────────────────────────────────────────────── */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:stretch; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-box{
  background:var(--color-bg-alt); border-radius:var(--radius);
  padding:clamp(1.5rem, 3vw, 2.5rem); display:grid; gap:.5rem; align-content:center; text-align:left;
}
.contact-box .unit-card__row{ display:block; }
.contact-box .btn{ margin-top:1rem; justify-self:start; white-space:normal; text-align:center; }
.contact-map{ width:100%; height:100%; min-height:320px; border:0; border-radius:var(--radius); }

/* ── Correções do shared/base.css (mesmas aplicadas na MB Prime Service) ─
   1) Menu mobile: com backdrop-filter no .header, o painel position:fixed
      mede contra o header (84px) em vez da tela; e escondido à direita
      ele gera rolagem horizontal. Tira o blur no mobile e esconde o
      painel para cima. */
@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); }
}
/* 2) O logo é item flex e encolhia até ~30px esmagado pelo botão do header. */
.header__logo{ flex:none; }
@media (max-width:560px){
  .header__actions .btn-primary{ display:none; }
  .header__logo img{ height:42px; }
}