/* Template 6 — LP de marca (uma landing page por montadora)

   IMPORTANTE: todos os componentes exclusivos da LP de marca vivem AQUI,
   e não no shared/base.css. Motivo: cada cliente tem a própria cópia de
   shared/base.css (com as cores dele já substituídas), gerada quando o
   site principal foi criado. Se estes estilos morassem lá, gerar uma LP
   de marca pra um cliente antigo exigiria editar o base.css dele — que é
   justamente o arquivo que nunca deve ser sobrescrito. Este style.css é
   copiado junto com o index.html pra dentro de <slug>/<marca>/, então
   viaja com a LP e não encosta em nada do site principal. */

/* ── Header: lockup logo da oficina + emblema da montadora ────────────
   O emblema entra MENOR que o logo da oficina. Quem assina a página é a
   oficina, não a montadora.
   O seletor usa `img.brand-lockup__emblem` (e não só a classe) de
   propósito: o base.css tem `.header__logo img{height:48px}`, que tem a
   mesma especificidade de uma classe + elemento. Só com o `img.` na
   frente esta regra ganha — testado, sem isso o emblema sai com 48px. */
.brand-lockup{ display:flex; align-items:center; gap:.85rem; }
.brand-lockup__divider{ width:1px; height:26px; background:var(--color-border); flex:none; }
img.brand-lockup__emblem{ height:30px; width:auto; display:block; }

/* Emblema gigante como marca d'água no hero */
.hero__emblem{
  position:absolute; right:-4%; top:50%; transform:translateY(-50%);
  height:min(78%, 520px); width:auto; opacity:.10; pointer-events:none;
  filter:grayscale(1) brightness(1.6);
}
@media (max-width:900px){ .hero__emblem{ right:-18%; opacity:.07; } }

/* Hero um pouco mais baixo que o do site principal: a LP de marca é de
   tráfego pago, o CTA precisa aparecer sem rolagem no desktop. */
.hero--brand{ min-height:clamp(520px, 72vh, 680px); }
.hero--brand .hero__content{ max-width:640px; }
.hero--brand h1{ text-wrap:balance; }

/* ── Bloco comparativo com a concessionária ──────────────────────────── */
.compare{
  display:grid; grid-template-columns:1.15fr .85fr; gap:var(--gap); align-items:center;
}
.compare__list{ list-style:none; padding:0; margin:1.25rem 0 0; display:grid; gap:.7rem; }
.compare__list li{ display:flex; gap:.65rem; align-items:flex-start; font-size:.95rem; }
.compare__list li::before{
  content:"✓"; flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--color-accent); color:#fff; font-size:.72rem; font-weight:700;
  display:grid; place-items:center; margin-top:.1rem;
}
.compare__media img{ width:100%; border-radius:var(--radius); display:block; box-shadow:var(--shadow); }
@media (max-width:860px){ .compare{ grid-template-columns:1fr; } }

/* Na seção #sobre o .compare aparece invertido (imagem à esquerda). */
#sobre .compare{ grid-template-columns:.85fr 1.15fr; }
@media (max-width:860px){
  #sobre .compare{ grid-template-columns:1fr; }
  #sobre .compare__media{ order:2; }
}

/* ── Modelos atendidos — chips de texto ───────────────────────────────
   Só entram modelos que o cliente REALMENTE atende (ver SKILL.md). */
.brand-models{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.brand-models__chip{
  border:1px solid var(--color-border); border-radius:999px;
  padding:.5rem 1.05rem; font-size:.88rem; font-weight:600;
  color:var(--color-text); background:var(--color-light);
}
.section--dark .brand-models__chip{
  background:transparent; border-color:rgba(255,255,255,.28); color:#fff;
}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq{ display:grid; gap:.75rem; max-width:820px; margin:0 auto; }
.faq__item{
  border:1px solid var(--color-border); border-radius:var(--radius-sm);
  background:var(--color-light); overflow:hidden;
}
.faq__item summary{
  cursor:pointer; padding:1rem 1.15rem; font-weight:700; font-size:.95rem;
  font-family:var(--font-heading); list-style:none; display:flex;
  justify-content:space-between; align-items:center; gap:1rem;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; color:var(--color-primary); font-size:1.3rem; flex:none; }
.faq__item[open] summary::after{ content:"−"; }
.faq__item p{ margin:0; padding:0 1.15rem 1.15rem; font-size:.92rem; color:var(--color-text-muted); }

/* ── Disclaimer de marca — OBRIGATÓRIO em toda LP que use emblema ──────
   Não remova: é o que separa "oficina especializada" de "concessionária
   autorizada" aos olhos de quem lê (e da montadora). */
.footer__disclaimer{
  margin-top:1.15rem; padding-top:1.15rem; border-top:1px solid rgba(255,255,255,.12);
  font-size:.76rem; line-height:1.55; opacity:.62; max-width:70ch;
}

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

/* ── MB Prime Service: header escuro ──────────────────────────────────
   O logo do cliente é cromado sobre fundo preto e não tem versão com
   fundo transparente utilizável (o texto "Prime Service" é branco, some
   em header claro). Em vez de recortar o logo e quebrar o cromado, o
   header inteiro fica escuro: o fundo do PNG encosta no fundo do header
   e a emenda desaparece. Também combina com o hero e o rodapé. */
.header{
  background:rgba(10,12,15,.90);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.header__logo img{ border-radius:4px; }
.brand-lockup__divider{ background:rgba(255,255,255,.22); }
.header__nav a{ color:rgba(255,255,255,.82); }
.header__nav a:hover{ color:#fff; }
.header__nav a::after{ background:var(--color-accent); }
.header__burger span{ background:#fff; }
@media (max-width:900px){ .header__nav{ background:#0C0E11; } }

/* CTA do header em verde: o botão diz "Falar no WhatsApp" e o grafite da
   primária teria contraste fraco sobre o header escuro. */
.header__actions .btn-primary{
  background:#25D366; box-shadow:0 10px 24px rgba(37,211,102,.30);
}
.header__actions .btn-primary:hover{ background:#1ebe57; }

/* Marcador dourado antes de cada selo. Fica DENTRO do selo (e não entre
   eles) para que uma quebra de linha não deixe um ponto solto começando
   a linha de baixo. */
.hero__badge::before{
  content:"●"; color:var(--color-accent); font-size:.55em;
  vertical-align:.18em; margin-right:.5rem;
}
/* O logo agora tem fundo transparente, então o header pode ser sólido. */
.header{ background:rgba(11,13,16,.97); }
.header__logo img{ border-radius:0; }

/* "Mercedes-Benz" nunca quebra no meio do hifen. */
.nb{ white-space:nowrap; }

/* Correção de bug do shared/base.css: .card__photo pede
   width:calc(100% + 3.7rem) para sangrar nas duas laterais do card, mas a
   regra global `img{max-width:100%}` do base.css trava essa largura em
   100%. Resultado: a foto fica deslocada para a esquerda e sobra um vão
   de 3.7rem do lado direito. Liberar o max-width resolve.
   Vale para todos os templates com .card--photo, não só este. */
.card__photo{ max-width:none; }

/* Avaliações: 3 colunas no desktop. Com 5 reviews (teto da Places API),
   o auto-fit padrão fazia 4 colunas e deixava 1 card órfão na 2ª linha. */
@media (min-width:1000px){
  .reviews__grid{ grid-template-columns:repeat(3, 1fr); }
}

/* Correção de bug do shared/base.css: no mobile o menu fechado fica em
   position:fixed com transform:translateX(100%), ou seja, parado FORA da
   tela à direita. O Chrome conta esse painel na largura de rolagem do
   documento, então a página inteira rolava na horizontal (scrollWidth de
   750px num viewport de 375px) mesmo com o menu fechado. Testado:
   visibility:hidden e overflow-x:hidden no html não resolvem, só
   display:none — que mataria a animação.
   A saída é esconder o painel para CIMA em vez de para a direita:
   transbordo acima do topo não gera área rolável, e a animação continua.
   Vale para todos os templates, não só este. */
@media (max-width:900px){
  /* Causa raiz: .header tem backdrop-filter, e isso o torna o bloco de
     contenção de qualquer descendente position:fixed. O painel do menu usa
     inset:84px 0 0 0 esperando medir a TELA, mas passa a medir contra os
     84px do header e sai com ~64px de altura, com os links vazando por
     cima do hero. No template original o defeito ficava escondido porque o
     painel era empurrado para a direita e saía de vista.
     Tirar o blur só no mobile devolve o viewport como bloco de contenção.
     O header continua opaco (rgba .97), então não se perde nada visual. */
  .header{ backdrop-filter:none; -webkit-backdrop-filter:none; }
  /* -100vh em vez de -115%: a porcentagem resolve contra a própria caixa
     do painel, e essa base se mostrou instável depois da primeira abertura
     (o menu abria e não voltava a esconder). vh não depende da caixa. */
  .header__nav{ transform:translateY(-100vh); }
  .header__nav.is-open{ transform:translateY(0); }
}

/* Header em telas estreitas: o .header__logo é item flex e encolhia até
   ~30px de largura, esmagado pelo botão "Falar no WhatsApp" (215px).
   O logo passa a não encolher, e abaixo de 560px o botão do header sai —
   não se perde CTA nenhum, porque o botão flutuante do WhatsApp fica
   sempre visível e o hero já traz "Agendar pelo WhatsApp" logo abaixo. */
.header__logo, .brand-lockup img, .brand-lockup__divider{ flex:none; }
@media (max-width:560px){
  .header__actions .btn-primary{ display:none; }
}

/* ── Galeria de modelos ──────────────────────────────────────────────
   Os chips da seção #modelos viraram botões: cada um abre a foto do
   modelo. As fotos vêm do Wikimedia Commons e o crédito de autoria e
   licença aparece no rodapé do modal — não remova, é exigência das
   licenças CC BY-SA. */
button.brand-models__chip{
  font-family:inherit; cursor:pointer; transition:border-color .18s ease, color .18s ease, transform .18s ease;
}
button.brand-models__chip:hover{
  border-color:var(--color-accent); color:var(--color-dark); transform:translateY(-2px);
}
button.brand-models__chip:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }
button.brand-models__chip::after{
  content:"›"; margin-left:.5rem; color:var(--color-accent); font-weight:700;
}

.modelo-modal{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:1.25rem; }
.modelo-modal[hidden]{ display:none !important; }
.modelo-modal__fundo{ position:absolute; inset:0; background:rgba(6,8,11,.82); backdrop-filter:blur(3px); }
.modelo-modal__caixa{
  position:relative; width:min(880px, 100%); max-height:92vh; overflow:auto;
  background:var(--color-light); border-radius:var(--radius); box-shadow:var(--shadow-lg);
}
.modelo-modal__x{
  position:absolute; top:.6rem; right:.6rem; z-index:2; width:38px; height:38px;
  border:0; border-radius:50%; background:rgba(12,14,17,.62); color:#fff;
  font-size:1.5rem; line-height:1; display:grid; place-items:center;
}
.modelo-modal__x:hover{ background:rgba(12,14,17,.85); }
.modelo-modal__img{ width:100%; aspect-ratio:16/10; object-fit:cover; max-width:100%; display:block; background:#0C0E11; }
.modelo-modal__rodape{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 1.35rem .35rem;
}
.modelo-modal__marca{
  display:block; font-size:.7rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--color-text-muted);
}
.modelo-modal__rodape h3{ margin:.15rem 0 0; font-size:1.45rem; }
.modelo-modal__nav{ display:flex; align-items:center; gap:.5rem; flex:none; }
.modelo-modal__nav button{
  width:38px; height:38px; border:1px solid var(--color-border); border-radius:50%;
  background:var(--color-light); color:var(--color-dark); font-size:1.3rem; line-height:1;
}
.modelo-modal__nav button:hover{ border-color:var(--color-accent); color:var(--color-primary); }
.modelo-modal__nav span{ font-size:.82rem; color:var(--color-text-muted); min-width:64px; text-align:center; }
.modelo-modal__credito{
  margin:0; padding:0 1.35rem 1.25rem; font-size:.74rem; line-height:1.5; color:var(--color-text-muted);
}
.modelo-modal__credito a{ text-decoration:underline; }
@media (max-width:560px){
  .modelo-modal{ padding:.75rem; }
  .modelo-modal__rodape{ flex-direction:column; align-items:flex-start; gap:.75rem; }
  .modelo-modal__rodape h3{ font-size:1.2rem; }
}