/* Cinalpecar 4x4 · versão final
   Base: direção B · Muro Azul (documental premium da oficina de verdade),
   com enxertos da A (Raid) e da C (Agenda Aberta) e as correções do júri.
   Paleta só da marca: marinho, royal, vermelho, branco frio. */

:root {
  --marinho: #012056;
  --fundo: #021233;
  --noite: #010f29;
  --royal: #0c0dff;          /* royal da marca: fios, foco no claro, números */
  --muro: #1330bf;           /* superfície "muro azul": royal menos elétrico para seção chapada */
  --muro-escuro: #0d2496;
  --azul-claro: #7a90ff;     /* royal clareado só para texto pequeno sobre marinho (AA) */
  --vermelho: #bb0607;
  --vermelho-vivo: #d60a0c;
  --vermelho-texto: #ff4a4c; /* só texto pequeno sobre marinho (AA 5:1) */
  --branco: #ffffff;
  --gelo: #f4f6fa;
  --prata: #c9c7cc;
  --linha-clara: #d5dbe7;
  --texto-suave: #3f4d6b;

  --display: "Anton", "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --texto: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --g: clamp(16px, 3.4vw, 48px);
  --gap: clamp(12px, 1.7vw, 24px);
  --max: 1440px;
  --corte: clamp(28px, 3.6vw, 56px);
  --topo-h: 80px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --foco: var(--royal);
  --sec: clamp(72px, 8.4vw, 128px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--gelo);
  color: var(--marinho);
  font: 400 17px/1.6 var(--texto);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
/* o telefone nunca quebra no meio, em nenhuma largura */
a[href^="tel:"] { white-space: nowrap; }
p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.escuro, .hero, .topo, .menu, .royal, .cta-final, .rodape, .barra, .muro-faixa { --foco: #ffffff; }

.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: 16px; top: -120px; z-index: 100; background: #fff; color: var(--marinho); padding: 14px 18px; font-weight: 700; text-decoration: none; }
.pular:focus { top: 16px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--g); }
.grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.grade > * { min-width: 0; }

/* voz que etiqueta: mono pequena, nunca abaixo de 13px (14px no celular) */
.mono { font-family: var(--mono); font-weight: 500; font-size: 13px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; }

/* fio azul + vermelho, como no selo ("OFICINA MECÂNICA" entre fios) */
.fio-duplo { display: inline-block; flex: none; width: 28px; height: 6px; background: linear-gradient(var(--royal) 0 2px, transparent 2px 4px, var(--vermelho) 4px 6px); }
.escuro .fio-duplo, .hero .fio-duplo, .cta-final .fio-duplo { background: linear-gradient(#3346ff 0 2px, transparent 2px 4px, var(--vermelho-vivo) 4px 6px); }
.royal .fio-duplo { background: linear-gradient(#fff 0 2px, transparent 2px 4px, var(--vermelho) 4px 6px); }

.rotulo { grid-column: 1 / span 3; display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; align-self: start; padding-top: .35em; }
.rotulo-n { color: var(--royal); }
.escuro .rotulo-n { color: var(--azul-claro); }
.royal .rotulo-n { color: #fff; }

.titulo-xg, .titulo-g, .titulo-m { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .004em; }
.titulo-xg { font-size: clamp(54px, 8.6vw, 136px); line-height: .98; }
.titulo-g { font-size: clamp(44px, 6.2vw, 98px); line-height: 1; }
.titulo-m { font-size: clamp(40px, 4.8vw, 76px); line-height: 1.08; }
/* acento em caixa alta (Ã, Â, Ê, À) na 2ª linha ou abaixo: a palavra acentuada ganha respiro em cima
   (o chapéu do Anton sobe ~.24em acima da maiúscula; sem isso ele encosta na linha de cima) */
.ac { display: inline-block; padding-top: .2em; }
.lead { font-size: clamp(18px, 1.35vw, 20px); line-height: 1.55; max-width: 42ch; }

.sec { padding-block: var(--sec); }
.escuro { background: var(--fundo); color: #fff; }
.escuro .lead { color: rgba(255,255,255,.84); }

.moldura { position: relative; overflow: hidden; background: var(--marinho); }
.moldura picture { display: block; width: 100%; height: 100%; }
.moldura img { width: 100%; height: 100%; object-fit: cover; }

.link-seta { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-top: 4px; }
.link-seta span { transition: transform .25s var(--ease); }
.link-seta:hover span { transform: translateX(4px); }

/* tag do 4x4: paralelogramo vermelho com texto branco (o corte do letreiro) */
/* padding maior à direita: o corte inclinado avança ~.1em no alto, e o último "4" não pode encostar nele */
.tag4x4 { display: inline-block; background: var(--vermelho); color: #fff; transform: skewX(-12deg); padding: .02em .17em 0 .13em; margin-inline: .02em; line-height: .96; }
.tag4x4 > span { display: inline-block; transform: skewX(12deg); text-transform: none; }

/* ---------- Botões: paralelogramo do letreiro ---------- */
.btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 700 16px/1 var(--texto); letter-spacing: .05em; text-transform: uppercase;
}
.btn svg { flex: none; }
.btn .seta { transition: transform .25s var(--ease); }
.btn:hover .seta { transform: translateX(4px); }
.btn-wa { color: #fff; background: var(--vermelho); clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding-inline: 32px; overflow: hidden; }
.btn-wa::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -25%; width: 150%; background: var(--vermelho-vivo); transform: translateX(-102%) skewX(-24deg); transition: transform .45s var(--ease); }
.btn-wa:hover::before { transform: translateX(0) skewX(-24deg); }
.btn-wa:focus-visible { clip-path: none; }
.btn-linha { color: #fff; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); transition: background .25s, box-shadow .25s; }
.btn-linha:hover { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px #fff; }
.btn-g { min-height: 58px; }
.btn-p { min-height: 48px; font-size: 15px; padding-inline: 26px; }

/* prévia honesta: avisa antes do toque que a mensagem vai ser copiada */
.previa { font-size: 16px; line-height: 1.45; color: rgba(255,255,255,.82); max-width: 72ch; }
.previa q { font-weight: 600; color: #fff; quotes: "“" "”"; }
.previa-claro { color: var(--texto-suave); }
.previa-claro q { color: var(--marinho); }

/* ---------- Cabeçalho com selo pendurado ---------- */
.topo { position: absolute; inset: 0 0 auto 0; z-index: 50; color: #fff; }
.js .topo { position: fixed; }
.topo::before { content: ""; position: absolute; inset: 0 0 -60px 0; background: linear-gradient(rgba(1,15,41,.72), rgba(1,15,41,0)); pointer-events: none; transition: opacity .35s; }
/* mesma largura máxima da grade (.wrap): navegação e Agendar alinham com o conteúdo em qualquer tela larga */
.topo-barra { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--topo-h); padding-inline: var(--g); max-width: var(--max); margin-inline: auto; transition: height .35s var(--ease); }
/* faixa sólida da marca (sem transparência: nada de texto "fantasma" passando por trás) */
.topo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fundo); opacity: 0; transition: opacity .35s; box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.topo.rolado::before { opacity: 0; }
.topo.rolado::after { opacity: 1; }
.topo.rolado .topo-barra { height: 64px; }

.topo-nav { display: flex; gap: clamp(16px, 1.6vw, 24px); }
/* alvo de 48px de altura também no computador (tablet grande na horizontal mostra esta navegação) */
.topo-nav a { position: relative; padding: 17px 0; white-space: nowrap; font: 600 14px/1 var(--texto); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.topo-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 11px; height: 2px; background: var(--vermelho-vivo); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.topo-nav a:hover::after { transform: scaleX(1); }

.topo-marca { grid-column: 2; position: relative; display: block; width: 220px; height: 100%; }
.pendente {
  position: absolute; top: 0; left: 50%; width: 208px; transform: translateX(-50%);
  padding: 18px 18px 30px; background: var(--fundo);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px));
  transition: transform .5s cubic-bezier(.6,0,.2,1);
}
.pendente::after { content: ""; position: absolute; left: 30px; right: 30px; bottom: 12px; height: 3px; background: linear-gradient(90deg, var(--royal) 50%, var(--vermelho) 50%); }
.pendente img { width: 100%; }
.topo-logo { position: absolute; left: 50%; top: 50%; height: 46px; width: auto; max-width: none; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: opacity .3s .1s; }
.topo.rolado .pendente { transform: translate(-50%, -105%); }
.topo.rolado .topo-logo { opacity: 1; }

.topo-acoes { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); }
.topo-tel { font: 600 15px/1 var(--texto); letter-spacing: .03em; text-decoration: none; padding: 17px 0; white-space: nowrap; }
.topo-tel:hover { text-decoration: underline; text-underline-offset: 4px; }
.status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.88); white-space: nowrap; }
/* cabeçalho: sempre o texto curto do status (o completo fica no title e para leitor de tela).
   A barra tem no máximo var(--max) = 1440px, a largura da grade: nela o texto mais longo
   ("Fechado · abre amanhã às 08h") não cabe ao lado do selo em nenhuma tela. */
.status-curto { display: none; }
.topo-acoes .status-longo { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.topo-acoes .status-curto { display: inline; }
.status-ponto { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--prata); }
.aberto .status-ponto { background: #fff; box-shadow: 0 0 0 4px rgba(12,13,255,.55); }
@media (prefers-reduced-motion: no-preference) { .aberto .status-ponto { animation: pulso 2.4s ease-in-out infinite; } }
@keyframes pulso { 50% { box-shadow: 0 0 0 7px rgba(12,13,255,0); } }
.topo-menu { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: #fff; }
.topo-agendar-m { display: none; }
.topo-agendar-m .ag-icone { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative; display: grid; grid-template-rows: 1fr auto; min-height: 100vh; min-height: max(680px, 100svh);
  color: #fff; background: var(--fundo); overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corte)), 0 100%);
}
.hero-midia { position: absolute; inset: 0; }
.hero-midia picture, .hero-foto, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero-video { opacity: 0; transition: opacity 1s; }
.hero.tem-video .hero-video { opacity: 1; }
.hero-duo { position: absolute; inset: 0; background: var(--royal); mix-blend-mode: color; opacity: 0; }
.hero-veu {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(2,18,51,.92) 0%, rgba(2,18,51,.76) 36%, rgba(2,18,51,.62) 46%, rgba(2,18,51,.16) 70%, rgba(2,18,51,.24) 100%),
    linear-gradient(180deg, rgba(2,18,51,.55) 0%, rgba(2,18,51,0) 24%, rgba(2,18,51,0) 70%, rgba(2,18,51,.6) 100%);
}
.grao { position: absolute; inset: 0; opacity: .14; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.hero-conteudo { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; align-self: end; padding-top: 150px; padding-bottom: 18px; }
.hero-conteudo > * { min-width: 0; }
.hero-texto { grid-column: 1 / span 8; }
.hero-local { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-bottom: 10px; font: 600 16px/1.2 var(--texto); letter-spacing: .02em; color: #fff; text-decoration: none; }
.hero-local svg { flex: none; color: var(--vermelho-texto); }
.hero-local span { border-bottom: 1.5px solid rgba(255,255,255,.4); padding-bottom: 2px; }
.hero-local:hover span { border-color: #fff; }
.hero-local, .hero-titulo { text-shadow: 0 2px 16px rgba(2,18,51,.6); }
/* texto pequeno sobre o vídeo: sombra curta junto da letra garante AA mesmo no quadro mais claro do loop */
.hero-local, .hero-sub { text-shadow: 0 1px 3px rgba(2,18,51,.75), 0 2px 16px rgba(2,18,51,.6); }
.hero-titulo .tag4x4 { text-shadow: none; }
.hero-titulo { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(50px, 7vw, 104px); line-height: .9; letter-spacing: .004em; }
.hero-titulo .linha { display: block; overflow: hidden; padding-block: .05em .02em; margin-block: -.03em; }
.hero-titulo .linha > span { display: inline-block; }
.hero-sub { margin-top: 20px; max-width: 62ch; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: #fff; }
.hero-prova { display: flex; flex-wrap: wrap; align-items: center; margin-top: 8px; font-weight: 600; font-size: 16px; color: #fff; }
.hero-prova li { display: inline-flex; align-items: center; min-height: 48px; }
.hero-prova li + li::before { content: ""; width: 1px; height: 16px; margin-inline: 14px; background: rgba(255,255,255,.4); }
.hero-prova a { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: 4px; }
.hero-prova a:hover { text-decoration-color: #fff; }
.estrela { color: var(--vermelho-texto); }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.hero-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 12px; }
.hero-parcela { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; color: rgba(255,255,255,.92); }
.hero-parcela svg { color: var(--azul-claro); }
.hero-status { display: none; }
/* aviso curto da cópia (a mensagem completa só aparece no seletor "Qual é o seu 4x4?") */
.hero-nota { font-size: 16px; line-height: 1.4; color: rgba(255,255,255,.8); }
/* sem JS não há cópia: os avisos de "mensagem pronta" somem para não prometer o que não acontece */
html:not(.js) .hero-nota, html:not(.js) .previa, html:not(.js) .servicos-dica { display: none; }

.hero-rodape { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-top: 4px; padding-bottom: calc(var(--corte) + 12px); }
.pausa { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 4px; background: none; border: 0; cursor: pointer; color: #fff; }
.pausa[hidden], html:not(.js) .pausa { display: none; }
.pausa .i-play { display: none; }
.pausa[aria-pressed="true"] .i-play { display: block; }
.pausa[aria-pressed="true"] .i-pausa { display: none; }
.hero-descer { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; text-decoration: none; }
.hero-descer span { transition: transform .3s var(--ease); }
.hero-descer:hover span { transform: translateY(3px); }

/* Movimento 1: revelação da cor + entrada do título (só com JS e sem reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-duo { animation: duo 1.2s .35s ease-in-out both; }
  .js .hero-foto { animation: deriva 26s ease-in-out infinite alternate; }
  .js .hero.pausado .hero-foto { animation-play-state: paused; }
  .js .hero-titulo .linha > span { animation: sobe 1s var(--ease) both; }
  .js .hero-titulo .linha:nth-child(1) > span { animation-delay: .35s; }
  .js .hero-titulo .linha:nth-child(2) > span { animation-delay: .45s; }
  .js .hero-titulo .linha:nth-child(3) > span { animation-delay: .55s; }
}
@keyframes duo { from { opacity: .85; } to { opacity: 0; } }
@keyframes deriva { from { transform: scale(1.03); } to { transform: scale(1.1) translate3d(-1.2%, -1%, 0); } }
@keyframes sobe { from { transform: translateY(110%); } to { transform: none; } }

/* ---------- 01 Manifesto + prova ---------- */
.manifesto { background: var(--gelo); }
.manifesto-texto { grid-column: 4 / span 9; font: 500 clamp(27px, 3.1vw, 46px)/1.17 var(--texto); letter-spacing: -.018em; color: var(--marinho); text-wrap: pretty; }
.js .manifesto-texto .p { color: #6f7c99; transition: color .35s; }
.js .manifesto-texto .p.on { color: var(--marinho); }
.prova { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); margin-top: clamp(64px, 7vw, 112px); }
.prova-item { border-top: 2px solid var(--marinho); padding-top: 22px; min-width: 0; }
.prova-rot { color: var(--texto-suave); }
.prova-num { display: flex; align-items: flex-start; gap: .06em; margin: 16px 0 18px; font: 400 clamp(88px, 11vw, 176px)/.84 var(--display); color: var(--marinho); letter-spacing: -.005em; }
.prova-estrela { width: .26em; height: .26em; margin-top: .02em; color: var(--vermelho); }
.prova-txt { max-width: 30ch; color: var(--texto-suave); }
.prova-txt .link-seta { color: var(--marinho); }
.prova-link-m { display: none; }

/* ---------- 02 Serviços ---------- */
.servicos-titulo { grid-column: 4 / span 9; }
.servicos-lead { grid-column: 4 / span 6; margin-top: 24px; }
.servicos-corpo { margin-top: clamp(48px, 5vw, 80px); align-items: start; }
.servicos-lado { grid-column: 1 / span 4; align-self: start; position: sticky; top: 96px; }
.servicos-foto .moldura { aspect-ratio: 4 / 5; }
.loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s; }
.loop.tocando { opacity: 1; }
.loop-pausa { position: absolute; z-index: 3; right: 10px; bottom: 10px; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: rgba(1,15,41,.78); }
.loop-pausa[hidden] { display: none; }
.loop-pausa .i-play { display: none; }
.loop-pausa[aria-pressed="true"] .i-play { display: block; }
.loop-pausa[aria-pressed="true"] .i-pausa { display: none; }
/* balance: nenhuma legenda termina com uma palavra sozinha na segunda linha */
figcaption.mono { margin-top: 12px; color: rgba(255,255,255,.74); text-wrap: balance; }
.servicos-lista { grid-column: 6 / span 7; }
.servicos-dica { color: rgba(255,255,255,.74); margin-bottom: 18px; }
.lista { border-top: 1px solid rgba(255,255,255,.18); }
.lista-item { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 48px; align-items: center; min-height: 84px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.18); text-decoration: none; color: #fff; }
.lista-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--vermelho-vivo); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.lista-item:hover::after, .lista-item:focus-visible::after { transform: scaleX(1); }
.lista-n { color: var(--azul-claro); align-self: start; padding-top: 4px; }
.lista-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lista-sobre { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--vermelho-texto); }
.lista-nome { font: 400 clamp(30px, 3vw, 44px)/1 var(--display); text-transform: uppercase; letter-spacing: .005em; transition: transform .4s var(--ease); }
.lista-item:hover .lista-nome { transform: translateX(10px); }
.lista-seta { justify-self: end; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.34); transition: background .3s, box-shadow .3s; }
.lista-item:hover .lista-seta { background: var(--vermelho); box-shadow: inset 0 0 0 1.5px var(--vermelho); }
.pecas { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 40px; padding: 20px; border: 1px solid rgba(255,255,255,.2); }
.pecas img { width: 112px; aspect-ratio: 4 / 5; object-fit: cover; }
.pecas-rot { color: var(--azul-claro); }
.pecas-txt { margin: 8px 0 4px; color: rgba(255,255,255,.86); font-size: 16px; }
.pecas .link-seta { white-space: nowrap; }

/* ---------- 03 Especialidade 4x4: "Qual é o seu 4x4?" ---------- */
.especialidade { background: #fff; }
.esp-cabeca { grid-column: 4 / span 9; }
.esp-cabeca .titulo-g { line-height: 1.04; }
/* o "?" vem colado na caixa: o respiro à direita impede que ele passe por cima do corte inclinado */
.esp-cabeca .tag4x4 { font-size: .92em; margin-right: .15em; }
.junto { white-space: nowrap; }
.esp-nota { margin-top: 22px; max-width: 46ch; color: var(--texto-suave); font-size: clamp(17px, 1.3vw, 19px); }
.esp-corpo { margin-top: clamp(40px, 4.4vw, 64px); align-items: start; }
.veiculos-bloco { grid-column: 1 / span 7; }
.veiculos-dica { color: var(--texto-suave); margin-bottom: 12px; }
.veiculos { border-top: 1px solid var(--linha-clara); padding-top: 10px; }
.veiculo {
  position: relative; display: flex; align-items: center; width: 100%; min-height: 48px; padding: 2px 0; background: none; border: 0; cursor: pointer; text-align: left;
  font: 400 clamp(40px, 5vw, 76px)/1.02 var(--display); text-transform: uppercase; letter-spacing: .01em; color: #627596;
  transition: color .3s, -webkit-text-fill-color .3s, transform .45s var(--ease);
}
.veiculo small { margin-left: .5em; font: 500 13px/1 var(--mono); letter-spacing: .07em; color: var(--texto-suave); -webkit-text-fill-color: currentColor; align-self: center; -webkit-text-stroke: 0; }
.veiculo::before { content: ""; flex: none; width: 0; height: .5em; margin-right: 0; background: var(--vermelho);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 40'%3E%3Cpath d='M16 3Q3 20 16 37M32 3Q19 20 32 37M48 3Q35 20 48 37' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") left center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 40'%3E%3Cpath d='M16 3Q3 20 16 37M32 3Q19 20 32 37M48 3Q35 20 48 37' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") left center / contain no-repeat;
  transition: width .45s var(--ease), margin .45s var(--ease); }
/* letra vazada: o contorno marinho é a letra (fio fino conta como a própria letra no critério 1.4.3 da WCAG),
   por isso a cor do texto é o marinho e só o miolo fica claro, via text-fill-color */
@supports ((-webkit-text-stroke: 1px black) or (text-stroke: 1px black)) {
  /* contorno proporcional à letra (no mínimo .032em): fino demais ele deixa de "ser a letra" para quem enxerga pouco */
  .veiculo { color: var(--marinho); -webkit-text-fill-color: rgba(1,32,86,.16); -webkit-text-stroke: max(1.6px, .032em) var(--marinho); }
  .veiculo:hover { -webkit-text-fill-color: rgba(1,32,86,.32); }
  .veiculo.ativo { -webkit-text-fill-color: var(--marinho); }
}
.veiculo.ativo { color: var(--marinho); }
@media (forced-colors: active) { .veiculo { -webkit-text-fill-color: currentColor; -webkit-text-stroke: 0; } }
.veiculo.ativo::before { width: .82em; margin-right: .12em; }
.esp-painel { grid-column: 8 / span 5; position: sticky; top: 96px; }
.esp-foto .moldura { aspect-ratio: 4 / 5; }
.esp-foto .moldura img { position: absolute; left: 0; top: -6%; height: 112%; transform: translate3d(0, var(--py, 0px), 0); transition: opacity .25s, filter .25s; }
.esp-foto .moldura img.trocando { opacity: .15; filter: blur(4px); }
.esp-foto figcaption { color: var(--texto-suave); }
.esp-cta { width: 100%; margin-top: 20px; }
.especialidade .previa { margin-top: 12px; }
.esp-rodape { margin-top: 18px; font-size: 16px; color: var(--texto-suave); }
.esp-fim-m { display: none; }

/* ---------- 04 Frotas ---------- */
.frotas { background: var(--marinho); }
.frotas-cabeca { grid-column: 4 / span 9; }
.frotas-texto { grid-column: 4 / span 6; margin-top: 36px; }
.frotas-texto .btn { margin-top: 30px; }
/* tipos de veículo: só uma etiqueta (não é tocável, então nada de vermelho nem marcador) */
.tipos { margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.8); max-width: 52ch; }
.cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(56px, 6vw, 96px); }
.cartao { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; color: #fff; text-decoration: none; background: var(--fundo); }
.cartao img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform .9s var(--ease); }
.cartao::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1,15,41,0) 40%, rgba(1,15,41,.9) 100%); }
.cartao:hover img { transform: scale(1.08); }
.cartao-txt { position: absolute; z-index: 1; left: 22px; right: 76px; bottom: 20px; display: flex; flex-direction: column; gap: 6px; }
.cartao-txt .mono { color: #fff; }
.cartao-nome { font: 400 clamp(28px, 2.5vw, 38px)/1 var(--display); text-transform: uppercase; }
.cartao::before { content: ""; position: absolute; z-index: 2; right: 16px; bottom: 16px; width: 48px; height: 48px; background: var(--vermelho) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 2l6 6-6 6' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center / 16px no-repeat; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); transition: transform .3s var(--ease); }
.cartao:hover::before { transform: translateX(4px); }

/* ---------- 05 Como funciona ---------- */
.como { background: var(--gelo); }
.como-titulo { grid-column: 4 / span 9; }
.passos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(48px, 5vw, 80px); }
.passo { position: relative; padding-top: 26px; border-top: 2px solid var(--linha-clara); min-width: 0; }
.passo::before { content: ""; position: absolute; left: 0; top: -2px; width: 100%; height: 2px; background: var(--royal); transform-origin: left; transition: transform .9s var(--ease); }
.passo:first-child::before { background: var(--vermelho); }
.js .passos:not(.in) .passo::before { transform: scaleX(0); }
.passo:nth-child(2)::before { transition-delay: .25s; }
.passo:nth-child(3)::before { transition-delay: .5s; }
.passo:nth-child(4)::before { transition-delay: .75s; }
.passo-n { display: block; font: 400 clamp(56px, 5.2vw, 84px)/.9 var(--display); color: var(--royal); }
.passo:first-child .passo-n { color: var(--vermelho); }
.passo-titulo { margin: 20px 0 10px; font: 700 clamp(20px, 1.6vw, 24px)/1.2 var(--texto); letter-spacing: -.01em; }
.passo p { color: var(--texto-suave); max-width: 30ch; }
.passo .link-seta { margin-top: 10px; color: var(--vermelho); }

/* ---------- 06 A oficina: o muro em sangria total + bloco royal ---------- */
/* computador: foto do letreiro inteiro em dia de chuva. A altura acompanha a LARGURA (não a altura da tela),
   então o quadro é sempre o mesmo: de logo acima de "Cinalpe" até logo abaixo de "48 3240-4424"
   (na foto de 1346x902, o letreiro vai de y≈72 a y≈766; o quadro mostra 740 linhas, de y≈46 a y≈786).
   Nunca corta uma linha do letreiro no meio, em 1280, 1440 ou 1920. A legenda fica numa faixa marinho embaixo. */
.muro-faixa { position: relative; background: var(--fundo); color: #fff; }
.muro-midia { position: relative; overflow: hidden; aspect-ratio: 1346 / 740; }
.muro-midia picture, .muro-midia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.muro-midia img { object-position: 50% 28.4%; }
.muro-faixa .grao { opacity: .16; }
.muro-midia::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,18,51,.32) 0%, rgba(2,18,51,0) 9%, rgba(2,18,51,0) 88%, rgba(2,18,51,.5) 100%); pointer-events: none; }
.muro-leg { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 16px; padding-bottom: 18px; background: var(--fundo); }
.muro-leg .mono { color: #fff; }


.royal { background: var(--muro); color: #fff; }
.oficina .grade { row-gap: 0; }
.oficina-titulo { grid-column: 1 / span 7; grid-row: 2; margin-top: clamp(32px, 4vw, 56px); }
.oficina-galpao { grid-column: 8 / span 5; grid-row: 1 / span 3; align-self: start; }
.oficina-galpao .moldura { aspect-ratio: 4 / 5; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.oficina-galpao .moldura img { object-position: 50% 50%; transform: scale(1.01); }
.oficina-galpao figcaption.mono { color: #fff; }
.oficina-texto { grid-column: 1 / span 6; grid-row: 3; margin-top: 36px; }
.oficina-lead { font: 500 clamp(19px, 1.6vw, 24px)/1.45 var(--texto); max-width: 36ch; }
.selos { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 12px 32px; margin-top: 28px; font-size: 16px; font-weight: 600; }
.selos li { display: flex; align-items: center; gap: 10px; }
.selos li::before { content: ""; width: 16px; height: 16px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.2'/%3E%3C/svg%3E") center / contain no-repeat; }
.linha-tempo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(64px, 7vw, 104px); }
.linha-tempo li { border-top: 1px solid rgba(255,255,255,.55); padding-top: 20px; min-width: 0; }
.linha-tempo li.destaque { border-top: 3px solid #fff; padding-top: 18px; }
.lt-ano { display: flex; align-items: center; gap: .18em; font: 400 clamp(48px, 4.4vw, 68px)/.9 var(--display); }
.lt-ano svg { width: .62em; height: .4em; color: #fff; }
.linha-tempo p { margin-top: 14px; color: #fff; max-width: 30ch; text-wrap: pretty; }
.linha-tempo strong { font-weight: 700; }

/* ---------- 07 Onde e quando ---------- */
.onde .grade { row-gap: 0; }
.onde-endereco { grid-column: 1 / span 7; grid-row: 2; margin-top: clamp(32px, 4vw, 56px); }
.onde-bairro { margin-top: 20px; color: rgba(255,255,255,.84); }
.onde-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.onde-acess { display: flex; align-items: center; gap: 12px; margin-top: 26px; color: rgba(255,255,255,.86); font-size: 16px; }
.onde-acess svg { flex: none; color: var(--azul-claro); }
.horario { grid-column: 9 / span 4; grid-row: 2; align-self: end; padding: 28px; background: var(--marinho); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
.horario-rot { color: var(--azul-claro); }
.horario-status { display: flex; align-items: center; gap: 12px; margin-top: 12px; font: 600 clamp(20px, 1.7vw, 25px)/1.25 var(--texto); }
.horario-status .status-ponto { width: 10px; height: 10px; }
.horario-tabela { margin-top: 18px; border-top: 1px solid rgba(255,255,255,.2); }
.horario-tabela div { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; padding: 8px 10px; margin-inline: -10px; border-bottom: 1px solid rgba(255,255,255,.14); }
.horario-tabela dt { color: rgba(255,255,255,.88); display: flex; align-items: center; gap: 10px; }
.horario-tabela dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.horario-tabela .hoje { background: var(--royal); border-bottom-color: transparent; }
.horario-tabela .hoje dt { color: #fff; font-weight: 700; }
.hoje-tag { font: 500 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px; background: #fff; color: var(--marinho); }
.horario-nota { margin-top: 14px; font-size: 16px; color: rgba(255,255,255,.84); }
.horario-plus { margin-top: 14px; color: rgba(255,255,255,.7); }
.onde-fotos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(56px, 6vw, 96px); }
.onde-fotos figure { min-width: 0; }
.onde-fotos .f-porta { grid-column: 1 / span 4; }
.onde-fotos .f-fachada { grid-column: 5 / span 8; }
.onde-fotos .moldura { height: clamp(300px, 34vw, 500px); }
.onde-fotos .moldura img { transform: scale(1.01); }
.onde-fotos .f-fachada img { object-position: 50% 42%; }

/* ---------- 08 Perguntas ---------- */
.perguntas { background: var(--gelo); }
.perguntas-lado { grid-column: 1 / span 4; align-self: start; position: sticky; top: 96px; }
.perguntas-lado .titulo-m { margin-top: 32px; }
.faq { grid-column: 6 / span 7; border-top: 1px solid var(--linha-clara); }
.faq details { border-bottom: 1px solid var(--linha-clara); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 72px; padding: 16px 0; cursor: pointer; list-style: none; font: 600 clamp(19px, 1.55vw, 23px)/1.3 var(--texto); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--royal); }
.mais { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--linha-clara); transition: transform .35s var(--ease), background .3s, box-shadow .3s; }
.mais::before, .mais::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: currentColor; transform: translate(-50%, -50%); }
.mais::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] .mais { transform: rotate(45deg); background: var(--vermelho); color: #fff; box-shadow: none; }
.faq details p { padding: 0 64px 26px 0; color: var(--texto-suave); max-width: 62ch; }
.faq details a { display: inline-block; padding-block: 12px; margin-block: -12px; font-weight: 600; color: var(--marinho); }

/* ---------- CTA final ---------- */
.cta-final { position: relative; color: #fff; background: var(--fundo); clip-path: polygon(0 var(--corte), 100% 0, 100% 100%, 0 100%); margin-top: calc(var(--corte) * -1); }
.cta-fundo { position: absolute; inset: 0; }
/* os elevadores vermelhos do galpão aparecem à direita, atrás do título; o véu só fecha onde está o texto */
.cta-fundo { overflow: hidden; }
.cta-fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 92%; opacity: .82; }
.cta-fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,18,51,.95) 0%, rgba(2,18,51,.86) 30%, rgba(2,18,51,.42) 62%, rgba(2,18,51,.24) 100%), linear-gradient(180deg, rgba(2,18,51,.55) 0%, rgba(2,18,51,0) 34%, rgba(2,18,51,0) 72%, rgba(2,18,51,.6) 100%); }
.cta-conteudo { position: relative; padding-top: calc(var(--corte) + clamp(80px, 8vw, 128px)); padding-bottom: clamp(80px, 9vw, 136px); }
.cta-conteudo > .mono { display: flex; align-items: center; gap: 14px; color: #fff; margin-bottom: 24px; }
.cta-final .hero-ctas { margin-top: 26px; }
.cta-nota { margin-top: 10px; font-size: 16px; color: rgba(255,255,255,.86); }

/* ---------- Rodapé ---------- */
.rodape { background: var(--noite); color: #fff; }
.fio-largo { height: 4px; background: linear-gradient(90deg, var(--royal) 50%, var(--vermelho) 50%); }
.rodape-topo-bloco { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; padding-top: clamp(64px, 7vw, 104px); }
.rodape-selo { grid-column: 1 / span 4; }
.rodape-selo img { width: clamp(220px, 19vw, 280px); }
.rodape-slogan { grid-column: 5 / span 8; font: 400 clamp(44px, 5.4vw, 84px)/.98 var(--display); text-transform: uppercase; letter-spacing: .005em; }
.rodape-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-top: clamp(48px, 5vw, 80px); padding-bottom: clamp(40px, 5vw, 72px); }
.rodape-grade > * { min-width: 0; }
.rodape-col { font-size: 16px; color: rgba(255,255,255,.9); }
.rodape-col:nth-child(1) { grid-column: 1 / span 4; }
.rodape-col:nth-child(2) { grid-column: 5 / span 3; }
.rodape-col:nth-child(3) { grid-column: 8 / span 3; }
.rodape-col:nth-child(4) { grid-column: 11 / span 2; }
.rodape-rot { color: var(--azul-claro); margin-bottom: 14px; }
.rodape-rot-2 { margin-top: 28px; }
.rodape-col address { line-height: 1.65; }
.rodape-col .link-seta { margin-top: 8px; }
.rodape-status { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-weight: 600; }
.rodape-lista li a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; text-decoration: none; overflow-wrap: anywhere; }
.rodape-lista li a:hover { text-decoration: underline; text-underline-offset: 4px; }
.rodape-assinatura { padding-block: 8px 36px; }
.rodape-assinatura img { width: 100%; height: auto; opacity: .96; }
.rodape-base { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 20px; padding-bottom: 28px; border-top: 1px solid rgba(255,255,255,.14); font-size: 14px; color: rgba(255,255,255,.72); }
.rodape-voltar { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; text-decoration: none; color: #fff; font-weight: 600; }
.rodape-voltar img { width: 28px; height: 28px; transition: transform .6s var(--ease); }
.rodape-voltar:hover img { transform: rotate(-60deg); }

/* ---------- Barra fixa (celular), aviso e menu ---------- */
.barra { display: none; }
.aviso { position: fixed; z-index: 70; left: 50%; bottom: 32px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); padding: 14px 20px 14px 18px; background: #fff; color: var(--marinho); font-weight: 600; font-size: 16px; box-shadow: 0 12px 40px rgba(1,15,41,.35), inset 4px 0 0 var(--vermelho); transition: opacity .3s, transform .3s var(--ease); }
.aviso.on { opacity: 1; transform: translate(-50%, 0); }
.menu { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; padding: 0 var(--g) calc(24px + env(safe-area-inset-bottom)); background: var(--fundo); color: #fff; overflow-y: auto; }
.menu[hidden] { display: none; }
.menu-topo { display: flex; justify-content: space-between; align-items: center; min-height: 72px; }
.menu-logo { width: 200px; height: auto; }
.menu-fechar { width: 48px; height: 48px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; }
.menu-nav { margin-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }
.menu-nav a { display: flex; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.14); font: 400 clamp(32px, 8.6vw, 50px)/1.05 var(--display); text-transform: uppercase; text-decoration: none; }
.menu-nav .mono { color: var(--azul-claro); font-size: 14px; }
.menu-acoes { display: grid; gap: 10px; margin-top: 24px; }
.menu-status { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-weight: 600; font-size: 16px; }

/* ---------- Responsivo ---------- */
@media (max-width: 1240px) {
  .topo-tel { display: none; }
  /* 1161 a 1240px: a navegação inteira ainda cabe à esquerda do selo, com folga */
  .topo-nav { gap: 14px; }
  .topo-nav a { letter-spacing: .05em; }
}
/* tablet: o status sai do cabeçalho (não cabe ao lado do selo) e aparece no herói, junto do parcelamento */
@media (max-width: 960px) {
  .topo-acoes .status { display: none; }
  .hero-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; color: rgba(255,255,255,.92); }
}
/* abaixo de 1160px os cinco links não cabem numa linha ao lado do selo: vira menu */
@media (max-width: 1160px) {
  .topo-nav { display: none; }
  .topo-menu { display: inline-flex; justify-self: start; }
}
@media (max-width: 1080px) {
  .topo-nav { display: none; }
  .topo-menu { display: inline-flex; justify-self: start; }
  .hero-texto { grid-column: 1 / span 12; }
  /* tablet: a etiqueta da seção ganha linha própria acima do título (como no celular); nas colunas 1 a 3
     ela quebrava em duas linhas e encostava no título ao lado */
  .grade > .rotulo { grid-column: 1 / -1; margin-bottom: 24px; }
  .manifesto-texto { grid-column: 1 / span 11; }
  .esp-cabeca, .frotas-cabeca, .servicos-titulo, .como-titulo { grid-column: 1 / span 10; }
  .oficina-titulo, .onde-endereco { margin-top: 0; }
  .servicos-lead { grid-column: 1 / span 9; }
  /* a foto de ofício (freio da Pajero) vira faixa larga entre a abertura e a lista */
  .servicos-lado { grid-column: 1 / span 12; position: static; margin-bottom: 36px; }
  .servicos-foto .moldura { aspect-ratio: 2 / 1; }
  .servicos-foto .moldura img { object-position: 50% 24%; }
  .servicos-foto .moldura video { object-position: 50% 50%; }
  .servicos-lista { grid-column: 1 / span 12; }
  .veiculos-bloco { grid-column: 1 / span 7; }
  .esp-painel { grid-column: 8 / span 5; }
  .frotas-texto { grid-column: 1 / span 9; }
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
  .oficina-titulo { grid-column: 1 / span 12; grid-row: auto; }
  /* tablet: foto do galpão (colunas vermelhas, a mesma do computador) e texto lado a lado, sem vazio azul à direita */
  .oficina-galpao { grid-column: 1 / span 6; grid-row: auto; margin-top: 40px; }
  .oficina-galpao .moldura { aspect-ratio: 1 / 1; }
  .oficina-galpao .moldura img { object-position: 50% 46%; }
  .oficina-texto { grid-column: 7 / span 6; grid-row: auto; align-self: center; margin-top: 40px; }
  .oficina-texto .selos { grid-template-columns: minmax(0, 1fr); }
  .linha-tempo { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .onde-endereco { grid-column: 1 / span 12; }
  .horario { grid-column: 1 / span 8; grid-row: auto; margin-top: 44px; }
  .perguntas-lado { grid-column: 1 / span 12; position: static; }
  .faq { grid-column: 1 / span 12; margin-top: 44px; }
  .rodape-selo { grid-column: 1 / span 5; }
  .rodape-slogan { grid-column: 6 / span 7; }
  .rodape-col:nth-child(1) { grid-column: 1 / span 6; }
  .rodape-col:nth-child(2) { grid-column: 7 / span 6; }
  .rodape-col:nth-child(3) { grid-column: 1 / span 6; margin-top: 32px; }
  .rodape-col:nth-child(4) { grid-column: 7 / span 6; margin-top: 32px; }
}

@media (max-width: 760px) {
  :root { --topo-h: 56px; --corte: 24px; --sec: 64px; }
  body { font-size: 17px; }
  /* o espaço da barra fixa fica dentro do rodapé (marinho), então nunca aparece um fio claro entre os dois */
  .rodape { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .titulo-xg { line-height: 1.04; }
  .mono, .rotulo { font-size: 14px; letter-spacing: .06em; }
  .grade { grid-template-columns: minmax(0, 1fr); }
  .grade > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .rotulo, .grade > .rotulo { margin-bottom: 22px; }
  .previa { font-size: 16px; }

  /* cabeçalho: selo pendurado à esquerda, Agendar (WhatsApp) e menu à direita */
  .topo-barra { grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; padding-inline: 12px 6px; }
  /* PRINCIPIOS, padrão de celular 9: cabeçalho de no máximo 56px (o logotipo de 200x44 fica com 6px de respiro) */
  .topo.rolado .topo-barra { height: 56px; }
  .topo-marca { grid-column: 1; grid-row: 1; width: 100%; }
  .pendente { left: 0; width: 176px; padding: 8px 8px 22px; transform: none; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px)); }
  .pendente::after { left: 24px; right: 24px; bottom: 9px; }
  .topo.rolado .pendente { transform: translateY(-105%); }
  /* LOGO.md: logotipo-horizontal com no mínimo 200px de largura (44px de altura) e respiro de ~0,5X até o botão */
  .topo-logo { left: 0; width: 200px; height: auto; max-width: calc(100% - 12px); transform: translateY(-50%); }
  .topo-acoes { display: contents; }
  .topo-acoes .status, .topo-acoes .btn-p, .topo-tel { display: none; }
  .topo-agendar-m { display: inline-flex; grid-column: 2; grid-row: 1; min-height: 48px; padding-inline: 18px; font-size: 16px; letter-spacing: .04em; clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%); }
  .topo-menu { display: inline-flex; grid-column: 3; grid-row: 1; }

  .hero { min-height: max(620px, 100svh); }
  /* o céu do vídeo fica atrás do cabeçalho; a fachada e o letreiro caem no vão entre o selo e o título */
  .hero-midia picture, .hero-video { top: -18vh; top: -18svh; bottom: auto; height: 92vh; height: 92svh; }
  .hero-foto, .hero-video { object-position: 50% 50%; }
  .hero-veu { background: linear-gradient(180deg, rgba(2,18,51,.55) 0%, rgba(2,18,51,.06) 20%, rgba(2,18,51,.5) 33%, rgba(2,18,51,.86) 52%, var(--fundo) 70%); }
  /* o local fica na altura mais clara do vídeo (a faixa da fachada): halo escuro curto para AA em qualquer quadro */
  .hero-local { text-shadow: 0 0 8px rgba(2,18,51,.85), 0 1px 3px rgba(2,18,51,.8); }
  .hero-conteudo { padding-top: 196px; padding-bottom: 4px; }
  .hero-local { margin-bottom: 4px; }
  .hero-titulo { font-size: clamp(44px, 13.2vw, 58px); line-height: .92; }
  .hero-sub { display: none; }
  .hero-prova { margin-top: 4px; }
  .hero-prova li + li::before { margin-inline: 10px; }
  .hero-ctas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 8px; }
  .hero-ctas .btn { width: 100%; }
  .hero-ligar { min-height: 50px; }
  .hero-info { gap: 4px 16px; margin-top: 8px; }
  .hero-nota { flex-basis: 100%; font-size: 16px; }
  .hero-parcela, .hero-status { font-size: 16px; }
  .hero-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: rgba(255,255,255,.92); }
  .hero-rodape { grid-template-columns: 1fr auto; padding-top: 0; }
  .hero-descer { grid-column: 2; }

  .manifesto-texto { font-size: clamp(24px, 6.8vw, 29px); line-height: 1.24; }
  .prova { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; margin-top: 40px; }
  .prova-item { padding-top: 12px; }
  .prova-rot { font-size: 14px; letter-spacing: .02em; }
  .prova-num { font-size: clamp(46px, 14vw, 58px); margin: 8px 0 0; }
  .prova-txt { display: none; }
  .prova-link-m { display: block; margin-top: 18px; }
  .prova-link-m .link-seta { color: var(--marinho); }

  .servicos-lead { margin-top: 18px; }
  .servicos-lado { margin-top: -12px; margin-bottom: 28px; }
  .servicos-foto .moldura { aspect-ratio: 16 / 9; }
  .lista-item { grid-template-columns: 38px minmax(0, 1fr) 48px; min-height: 76px; }
  .lista-sobre { font-size: 14px; letter-spacing: .04em; }
  .lista-nome { font-size: clamp(28px, 8.4vw, 34px); }
  /* peças: a foto do pneu vira uma faixa baixa no alto do cartão (sangrando até a borda) e o texto vem embaixo */
  .pecas { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0 16px 12px; }
  .pecas img { width: calc(100% + 32px); max-width: none; margin-inline: -16px; aspect-ratio: 2 / 1; object-position: 50% 17%; }

  .esp-cabeca .titulo-g { font-size: clamp(44px, 13vw, 54px); }
  .esp-nota { margin-top: 16px; }
  .esp-corpo { margin-top: 28px; }
  /* painel grudado: o fundo branco vai de borda a borda (os nomes com contorno passam por baixo sem deixar lasca
     na margem) e termina num esfumado curto, para o pé das letras não aparecer cortado logo abaixo da legenda */
  .esp-painel { order: -1; position: sticky; top: 56px; z-index: 2; background: #fff; padding-bottom: 8px; margin-inline: calc(-1 * var(--g)); padding-inline: var(--g); }
  .esp-painel::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; background: linear-gradient(#fff, rgba(255,255,255,0)); pointer-events: none; }
  .esp-foto { position: relative; }
  .esp-foto .moldura { aspect-ratio: 16 / 9; }
  /* no celular a foto fica parada (o painel já está grudado no topo) e o enquadramento vem de data-pos-m */
  .esp-foto .moldura img { top: 0; height: 100%; transform: none; }
  /* legenda numa faixa marinho logo abaixo da foto, nunca por cima do carro (igual ao muro) */
  .esp-foto figcaption { position: static; min-height: 58px; margin: 0; padding: 9px 12px 10px; background: var(--fundo); color: #fff; font-size: 14px; line-height: 1.4; }
  .esp-painel .esp-cta, .esp-painel .previa, .esp-rodape { display: none; }
  .esp-fim-m { display: block; }
  .esp-fim-m .btn { display: flex; width: 100%; margin-top: 24px; }
  .esp-rodape-m { margin-top: 18px; font-size: 16px; color: var(--texto-suave); }
  .veiculos-bloco { margin-top: 20px; }
  .veiculo { font-size: clamp(34px, 10vw, 40px); min-height: 50px; }
  .veiculo small { font-size: 14px; letter-spacing: .02em; }
  .hoje-tag { font-size: 14px; }

  .frotas-texto { margin-top: 20px; }
  .frotas-texto .btn { width: 100%; margin-top: 24px; }
  .tipos { margin-top: 20px; }
  .cartoes { grid-template-columns: minmax(0, 1fr); margin-top: 40px; gap: 10px; }
  .cartao { aspect-ratio: 16 / 9; }

  /* celular: número à esquerda e conteúdo à direita (a seção encolhe e o caminho até o mapa fica curto);
     o fio vermelho e azul continua acendendo no alto de cada passo */
  .passos { grid-template-columns: minmax(0, 1fr); row-gap: 22px; margin-top: 32px; }
  .passo { display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 14px; align-content: start; padding-top: 16px; }
  .passo-n { grid-column: 1; grid-row: 1 / span 3; align-self: start; font-size: 44px; line-height: .9; }
  .passo > :not(.passo-n) { grid-column: 2; }
  .passo-titulo { margin: 1px 0 4px; }
  .passo p { max-width: none; }
  .passo .link-seta { justify-self: start; margin-top: 4px; }

  /* celular: o letreiro inteiro, de frente (foto vertical), e a legenda numa faixa marinho embaixo, fora da foto */
  .muro-midia { aspect-ratio: 9 / 10; }
  .muro-midia img { object-position: 50% 40%; }
  /* o canto de cima à direita (onde sobra um fio do arame do muro) afunda no marinho */
  .muro-midia::after { background: radial-gradient(ellipse 62% 15% at 92% 0%, rgba(2,18,51,.92) 0%, rgba(2,18,51,.55) 55%, rgba(2,18,51,0) 100%), linear-gradient(180deg, rgba(2,18,51,.5) 0%, rgba(2,18,51,0) 14%, rgba(2,18,51,0) 84%, rgba(2,18,51,.5) 100%); }
  .muro-leg { position: static; flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 14px; padding-bottom: 16px; padding-right: var(--g); background: var(--fundo); }
  .muro-leg .mono { font-size: 14px; }
  /* "O muro azul" numa linha e o endereço inteiro na outra (o número nunca fica sozinho) */
  .muro-leg-a, .muro-leg-b { display: block; }
  .muro-leg-b { white-space: nowrap; }
  .muro-leg-sep { display: none; }
  .oficina-galpao { margin-top: 28px; }
  /* celular: volta a foto horizontal do galpão (carro suspenso no elevador vermelho) */
  .oficina-galpao .moldura { aspect-ratio: 16 / 10; }
  .oficina-galpao .moldura img { object-position: 50% 72%; }
  .oficina-texto { margin-top: 36px; }
  .selos { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .linha-tempo { grid-template-columns: minmax(0, 1fr); row-gap: 0; margin-top: 44px; }
  .linha-tempo li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 14px 0; }
  .linha-tempo li.destaque { padding-top: 12px; }
  .lt-ano { font-size: 34px; }
  .lt-ano svg { display: none; }
  .linha-tempo p { margin-top: 0; font-size: 16px; }

  .horario { margin-top: 36px; padding: 20px; }
  .onde-ctas { display: grid; grid-template-columns: minmax(0, 1fr); }
  .onde-ctas .btn { width: 100%; }
  .onde-fotos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 44px; }
  .onde-fotos .f-porta { grid-column: span 2; }
  .onde-fotos .f-fachada { grid-column: span 3; }
  .onde-fotos .moldura { height: 220px; }
  .onde-fotos figcaption.mono { font-size: 14px; letter-spacing: .03em; }

  .faq summary { min-height: 64px; font-size: 19px; }
  .faq details p { padding-right: 0; }

  .cta-conteudo .titulo-xg { font-size: clamp(52px, 15vw, 64px); }
  /* celular: a foto vira uma janela no alto da seção, aproximada nos elevadores vermelhos (metade de baixo da foto),
     e some no marinho por trás do título; os botões ficam sobre o marinho chapado */
  .cta-fundo { bottom: auto; height: 330px; }
  .cta-fundo img { position: absolute; left: 0; bottom: 0; height: 200%; object-position: 46% 100%; opacity: .92; }
  .cta-fundo::after { background: linear-gradient(180deg, rgba(2,18,51,.5) 0%, rgba(2,18,51,.08) 22%, rgba(2,18,51,.2) 50%, rgba(2,18,51,.82) 78%, var(--fundo) 100%); }
  .cta-conteudo { padding-top: calc(var(--corte) + 214px); }
  .cta-final .hero-ctas { display: grid; }

  .rodape-topo-bloco { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .rodape-topo-bloco > * { grid-column: 1 / -1 !important; }
  .rodape-selo img { width: 200px; }
  .rodape-slogan { font-size: clamp(40px, 12vw, 50px); }
  .rodape-grade { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .rodape-grade > * { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  /* LOGO.md: no celular, logotipo-horizontal (200 a 240px), não a versão em linha */
  .rodape-assinatura { padding-bottom: 24px; }
  .rodape-assinatura img { width: 240px; }
  .rodape-base { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 16px; }

  .barra { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--noite); box-shadow: 0 -1px 0 rgba(255,255,255,.1); transition: transform .4s var(--ease); }
  .barra .btn { min-height: 54px; width: 100%; padding-inline: 12px; }
  .js .barra.escondida, .barra.menu-aberto { transform: translateY(110%); }
  /* aviso no alto, longe dos botões do herói e da barra */
  .aviso { top: calc(70px + env(safe-area-inset-top)); bottom: auto; transform: translate(-50%, -12px); }
  .aviso.on { transform: translate(-50%, 0); }
  /* sem JS a barra fica sempre visível: o herói reserva espaço para ela */
  html:not(.js) .hero-rodape { padding-bottom: calc(var(--corte) + 84px); }
}
@media (max-width: 760px) and (max-height: 700px) {
  .hero-conteudo { padding-top: 188px; }
  .hero-titulo { font-size: clamp(42px, 12.4vw, 52px); }
}
/* Agendar no cabeçalho do celular: o logotipo precisa de 200px + respiro.
   - até 374px: sempre ícone do WhatsApp (o selo pendurado e o texto não cabem lado a lado);
   - de 375 a 409px: texto "Agendar" no topo (ao lado do selo) e ícone depois de rolar (ao lado do logotipo de 200px);
   - de 410px para cima: texto sempre. O nome acessível fica no aria-label. */
@media (max-width: 374px) {
  .topo-agendar-m { width: 56px; padding: 0; }
  .topo-agendar-m .ag-icone { display: block; }
  .topo-agendar-m .ag-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 375px) and (max-width: 409px) {
  .topo.rolado .topo-agendar-m { width: 56px; padding: 0; }
  .topo.rolado .topo-agendar-m .ag-icone { display: block; }
  .topo.rolado .topo-agendar-m .ag-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 761px) { .esp-rodape-m { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}