/* ==========================================================================
   Garagem BC — Estilos
   Derivado do protótipo Figma "Site - Aprovado" (1920px desktop)
   ========================================================================== */

/* -------------------------------------------------- Fontes */
@font-face {
  font-family: 'Arcane Nine';
  src: url('../fonts/ArcaneNine.woff2') format('woff2'),
       url('../fonts/ArcaneNine.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------- Tokens */
:root {
  --laranja: #F18A00;
  --laranja-escuro: #C97300;
  --preto: #000000;
  --preto-suave: #181512;
  --cinza-campo: #222222;
  --cinza-card: #1D1D1D;
  --cinza-borda: #404040;
  --branco: #FFFFFF;
  --verde-whatsapp: #39BB37;

  --texto: #FFFFFF;
  --texto-suave: rgba(255, 255, 255, 0.78);
  --texto-fraco: rgba(255, 255, 255, 0.55);

  --fonte-titulo: 'Saira Semi Condensed', 'Saira', sans-serif;
  --fonte-botao: 'Saira', sans-serif;
  --fonte-corpo: 'Roboto', sans-serif;
  --fonte-eyebrow: 'Arcane Nine', 'Saira', sans-serif;

  /* Container: 1240px úteis dentro de 1920px (margem 340px no Figma) */
  --container: 1240px;
  --gutter: 24px;

  --header-h: 92px;

  --r-btn: 4px;
  --r-card: 8px;
  --r-banner: 25px;   /* moldura da hero */

  --t-rapida: 180ms ease;
  --t-media: 320ms ease;
  --t-lenta: 800ms ease;
}

/* -------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* compensa o header fixo ao pular pra uma âncora */
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--preto);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.55;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
/* figure vem com margin 1em 40px do navegador — quebraria o gap dos carrosséis */
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--laranja);
  outline-offset: 3px;
}

/* -------------------------------------------------- Layout */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.secao { padding-block: 110px; position: relative; }
.secao--compacta { padding-block: 72px; }

/* -------------------------------------------------- Tipografia */
.eyebrow {
  font-family: var(--fonte-eyebrow);
  font-size: 18px;
  line-height: 1.3;
  color: var(--laranja);
  margin: 0 0 14px;
  letter-spacing: 0.02em;
}

.titulo {
  font-family: var(--fonte-titulo);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}
/* segunda linha do título, em peso leve — padrão do layout */
.titulo .leve { font-weight: 300; }

.texto {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--texto-suave);
  margin: 0 0 18px;
}
.texto:last-child { margin-bottom: 0; }
.texto strong { font-weight: 500; color: var(--texto); }

/* -------------------------------------------------- Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--fonte-botao);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 16px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  transition: background var(--t-rapida), color var(--t-rapida),
              border-color var(--t-rapida), transform var(--t-rapida);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.btn--primario {
  background: var(--laranja);
  color: var(--preto);
  font-weight: 600;
}
.btn--primario:hover { background: #FF9B14; }

.btn--contorno {
  background: transparent;
  color: var(--laranja);
  border-color: var(--laranja);
  font-weight: 500;
}
.btn--contorno:hover { background: rgba(241, 138, 0, 0.12); }

.hero__acoes .btn--contorno:hover { background: rgba(241, 138, 0, 0.18); }

.btn--whatsapp {
  background: var(--verde-whatsapp);
  color: var(--branco);
  font-weight: 500;
  padding: 17px 22px;
}
.btn--whatsapp:hover { background: #2FA82D; }

.btn--bloco { width: 100%; }

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  transition: background var(--t-media), box-shadow var(--t-media);
}
/* ganha fundo assim que a página rola */
.header.is-fixo {
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* O bloco logo + menu + CTA é centralizado na página, dentro da mesma
   faixa útil do conteúdo (1240px + respiro para o CTA). */
.header__interno {
  overflow: visible;
  max-width: 1400px;
  margin-inline: auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}

/* O logo é a entrada do site: no topo da Home ele vem grande e transborda
   o header, sobrepondo o banner (como no Figma, 183x201). A altura reservada
   no fluxo é menor que a imagem, então ele "desce" sobre a hero sem empurrar
   o menu. Ao rolar, encolhe e volta pra dentro da barra. */
.header__logo {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
}
/* na Home o logo transborda: a caixa reserva menos altura que a imagem */
.header--home:not(.is-fixo) .header__logo {
  height: 56px;
  align-items: flex-start;
}
.header__logo img {
  height: 56px;
  width: auto;
  transition: height var(--t-media);
}
/* o logo grande que transborda existe só na Home, no topo */
.header--home:not(.is-fixo) .header__logo img {
  height: 132px;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55));
}

.nav {
  display: flex;
  align-items: center;
  gap: 33px;
  /* centralizado no espaço entre o logo e o CTA */
  margin-inline: auto;
}
.nav__link {
  font-family: var(--fonte-corpo);
  font-size: 16px;
  font-weight: 300;
  color: var(--texto);
  position: relative;
  padding-block: 4px;
  transition: color var(--t-rapida);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--laranja);
  transition: width var(--t-media);
}
.nav__link:hover { color: var(--laranja); }
.nav__link:hover::after { width: 100%; }
.nav__link.is-ativo { color: var(--laranja); }
.nav__link.is-ativo::after { width: 100%; }

.header__cta { flex-shrink: 0; }
.header__cta .btn { font-size: 14px; padding: 13px 19px; }

/* CTA que só existe dentro da gaveta mobile */
.nav__cta { display: none; }

/* botão hambúrguer — só aparece no mobile */
.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  padding: 0;
  position: relative;
  flex-shrink: 0;
}
.menu-toggle span {
  display: block;
  width: 26px; height: 2px;
  background: var(--branco);
  margin: 6px auto;
  transition: transform var(--t-media), opacity var(--t-rapida);
}
.menu-toggle.is-aberto span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle.is-aberto span:nth-child(2) { opacity: 0; }
.menu-toggle.is-aberto span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 780px;
  padding-top: var(--header-h);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__moldura {
  position: relative;
  width: 100%;
  max-width: 1824px;
  margin-inline: auto;
  min-height: 684px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: var(--r-banner);
}

/* slideshow — imagens empilhadas, uma visível por vez */
.slideshow { position: absolute; inset: 0; z-index: 0; }
.slideshow__item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--t-lenta);
}
.slideshow__item.is-ativo { opacity: 1; }
.slideshow__item picture {
  display: block;
  width: 100%; height: 100%;
}
.slideshow__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* gradiente que garante leitura do texto por cima da foto */
.hero__veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 32%, rgba(0,0,0,0.12) 60%, rgba(0,0,0,0.35) 100%);
}

.hero__conteudo {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 clamp(24px, 4vw, 64px) 64px;
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 490px);
  gap: 48px;
  align-items: end;
  justify-content: space-between;
}

/* sombra mínima: garante a leitura sobre a foto sem criar halo */
.hero__conteudo .eyebrow {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.hero__titulo {
  font-family: var(--fonte-titulo);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 28px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.hero__acoes { display: flex; flex-wrap: wrap; gap: 16px; }

.hero__apoio {
  font-size: 18px;
  line-height: 1.6;
  color: var(--texto-suave);
  margin: 0;
  padding-bottom: 6px;
}
.hero__apoio strong { color: var(--texto); font-weight: 500; }

/* ==========================================================================
   Atrações (carrossel horizontal)
   ========================================================================== */
.atracoes__topo { margin-bottom: 26px; }

.beneficios {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-bottom: 34px;
}
.beneficio {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 300;
  color: var(--texto);
}
.beneficio svg { color: var(--laranja); flex-shrink: 0; }
.beneficio__icone { display: flex; width: 34px; height: 34px; align-items: center; justify-content: center; }
.beneficio__icone svg { width: 100%; height: auto; }

/* trilho que rola horizontalmente — equivalente ao overflow do protótipo */
/* Carrossel de atrações: começa alinhado ao conteúdo e sangra até a borda
   direita da tela, deslizando devagar em loop. Sem barra de scroll. */
/* clip prende a sangria sem criar barra horizontal na página */
#atracoes { overflow-x: clip; }

.carrossel {
  overflow: hidden;
  padding-bottom: 0;
  margin-right: calc(50% - 50vw);
}
.carrossel__trilho {
  display: flex;
  width: max-content;
  animation: desliza-carrossel 90s linear infinite;
}
.carrossel:hover .carrossel__trilho { animation-play-state: paused; }

@keyframes desliza-carrossel {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 10px)); }
}

/* Item 450x318 no Figma (ratio 1.415), raio 5px */
.carrossel__item { margin-right: 20px; }
.galeria__item { margin-right: 20px; }
.carros-recortados__trilho img,
.hero-interno__carros img { margin-right: 54px; }

.carrossel__item {
  flex: 0 0 450px;
  scroll-snap-align: start;
  border-radius: 5px;
  overflow: hidden;
  background: var(--cinza-campo);
  aspect-ratio: 450 / 318;
}
.carrossel__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-media);
}
.carrossel__item:hover img { transform: scale(1.04); }

/* enquanto arrasta, desliga o clique nas imagens */
.carrossel.esta-arrastando { scroll-snap-type: none; }
.carrossel.esta-arrastando img { pointer-events: none; }

/* Cada metade duplicada do marquee.
   O trilho NÃO usa gap: o espaçamento vem da margem de cada item, senão
   o gap entre as duas sequências desalinha o -50% em gap/2 por volta. */
.marquee-seq {
  display: flex;
  flex-shrink: 0;
  width: max-content;   /* sem isso a sequência colapsa na largura de 1 item */
}


/* ==========================================================================
   Espaço Coca-Cola — texto à esquerda, trio de fotos à direita
   Geometria do frame "Espaço Coca-cola" no Figma (Frame 32, 498x607):
     coca-1  x=24  y=0    427x285  raio TL 69
     coca-2  x=0   y=264  225x281  raio TL 58
     coca-3  x=216 y=233  282x374  raio TR 58
   ========================================================================== */
/* a composição de fotos já traz bastante respiro visual — menos padding
   que o padrão de 110px das outras seções */
#coca-cola { padding-block: 72px; }

.trio-fotos {
  position: relative;
  max-width: 498px;
  aspect-ratio: 498 / 607;
  margin-left: auto;   /* encosta à direita da coluna */
}
.trio-fotos img {
  position: absolute;
  object-fit: cover;
  /* height:auto é obrigatório: sem ele o atributo height do HTML vence o
     aspect-ratio e as fotos esticam (mesmo bug da fachada em "Visite-nos") */
  height: auto;
}
.trio-fotos__a {
  left: 4.82%;
  top: 0;
  width: 85.74%;
  aspect-ratio: 427 / 285;
  border-top-left-radius: clamp(28px, 5.6vw, 69px);
}
.trio-fotos__b {
  left: 0;
  top: 43.49%;
  width: 45.18%;
  aspect-ratio: 225 / 281;
  border-top-left-radius: clamp(24px, 4.7vw, 58px);
}
.trio-fotos__c {
  left: 43.37%;
  top: 38.39%;
  width: 56.63%;
  aspect-ratio: 282 / 374;
  border-top-right-radius: clamp(24px, 4.7vw, 58px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Seções de conteúdo lado a lado
   ========================================================================== */
.dupla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px;
  align-items: center;
}
.dupla--invertida .dupla__midia { order: 2; }

/* start evita que o grid estique a coluna e quebre o aspect-ratio do par */
.dupla__midia { position: relative; align-self: start; }
/* imagem solta da coluna de mídia — o par escalonado tem regras próprias abaixo */
.dupla__midia > img { width: 100%; border-radius: var(--r-card); }

/* Duas fotos escalonadas, como no layout da Home.
   Geometria do Figma (área de 615x678 a partir de x=336,y=1674):
     foto A  x+84  y+0    531x354   (em cima, deslocada à direita)
     foto B  x+0   y+327  527x351   (embaixo, encostada à esquerda)
   Convertido em % sobre a largura da área (615px). */
.midia-par {
  position: relative;
  /* área de 615x678 no Figma — aspect-ratio mantém a proporção mesmo com max-width */
  max-width: 615px;
  aspect-ratio: 615 / 678;
}
.midia-par__principal,
.midia-par__secundaria {
  position: absolute;
  /* as duas são 3:2 no Figma (531x354 e 527x351) — travar a proporção
     impede que object-fit estique e distorça a foto */
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
}
/* Raio em um canto só, como no Figma. Os valores são proporcionais à
   largura da foto (76/531 e 109/527), então acompanham a escala da tela. */
.midia-par__principal {
  left: 13.66%;          /*  84 / 615 */
  top: 0;
  width: 86.34%;         /* 531 / 615 */
  /* 76px na escala do Figma (531px de largura); encolhe junto com a coluna */
  border-top-right-radius: clamp(34px, 6.2vw, 76px);
}
.midia-par__secundaria {
  left: 0;
  top: 48.23%;           /* 327 / 678 */
  width: 85.69%;         /* 527 / 615 */
  /* 109px na escala do Figma (527px de largura) */
  border-top-left-radius: clamp(48px, 8.9vw, 109px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65);
}

/* ==========================================================================
   Faixa Nosso Acervo (fundo com textura)
   ========================================================================== */
.faixa-acervo {
  position: relative;
  background: var(--preto);
  overflow: hidden;
  /* 91px do topo do divisor até o eyebrow, como no Figma */
  padding-top: 91px;
}

/* Divisor "porta de garagem" (BG-Nosso-Acervo no Figma, 1933x360 em y=2555):
   textura de linhas horizontais + halo laranja central, recortada por uma
   máscara radial. Fica no topo, sangrando até as bordas da tela. */
.faixa-acervo__divisor {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  z-index: 0;
  pointer-events: none;
}
.faixa-acervo__divisor img {
  width: 100%;
  height: auto;
  display: block;
}
.faixa-acervo > .container { position: relative; z-index: 2; }

.faixa-acervo__grid {
  display: grid;
  grid-template-columns: minmax(0, 675px) minmax(0, 477px);
  gap: 80px;
  /* a coluna da direita (texto + "Saiba mais") assenta na base do título */
  align-items: end;
}
.faixa-acervo .titulo { margin-bottom: 0; }

/* fileira de carros recortados */
/* Marquee: a faixa de carros desliza continuamente em loop.
   O conteúdo é duplicado no HTML; a animação desloca exatamente
   metade da largura, então a emenda passa despercebida. */
.carros-recortados {
  margin-top: 56px;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  padding-bottom: 8px;
  /* esmaece as pontas, pra faixa não "nascer" e "morrer" cortada */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.carros-recortados__trilho {
  display: flex;
  align-items: flex-end;
  width: max-content;
  animation: desliza-carros 42s linear infinite;
}
.carros-recortados:hover .carros-recortados__trilho { animation-play-state: paused; }

.carros-recortados img {
  height: 167px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.55));
}

/* -50% = exatamente uma cópia da sequência; o gap extra entra no cálculo
   porque a duplicata começa logo após um gap. */
@keyframes desliza-carros {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   Cards (Como funciona)
   ========================================================================== */
.cards {
  display: grid;
  /* 3 cards de 327px com 60px de respiro, como no protótipo */
  grid-template-columns: repeat(3, minmax(0, 327px));
  justify-content: center;
  gap: 60px;
  margin-top: 56px;
}
.card {
  background: var(--cinza-card);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--r-card);
  padding: 34px 28px 30px;
  text-align: center;
  transition: border-color var(--t-media), transform var(--t-media);
}
.card:hover {
  border-color: rgba(241, 138, 0, 0.4);
  transform: translateY(-4px);
}
.card__icone {
  width: 65px; height: 65px;
  margin: 0 auto 18px;
  color: var(--laranja);
}
.card__icone svg { width: 100%; height: 100%; }
.card__titulo {
  font-family: var(--fonte-titulo);
  font-size: 28px;
  font-weight: 500;
  margin: 0 0 14px;
}
.card__texto {
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto-suave);
  margin: 0;
}
.card__texto strong { color: var(--texto); font-weight: 500; }

/* ==========================================================================
   Localização (Visite-nos)

   Geometria do Figma, frame 1920 x faixa y=4104..4999 (895px de altura):

   ESQUERDA — bloco laranja com raio 200px no canto superior direito
     Rectangle 1   x=-45  y=4237  744x631   #F18A00, raio TR 200
       └ foto "13"        opacidade 43%, dentro da máscara
       └ foto _MG_7817b   por cima, dentro da máscara
     _MG_7763 1    x=356  y=4331  628x444   fachada, SOBRE o bloco laranja

   DIREITA — foto da Kombi com véu laranja
     _MG_8098 / VW.COM  x=1114 y=4106  983x893  (máscara com fade lateral)
     Rectangle 4        laranja #F18A00 a 71% por cima
     Rectangle 4 (topo) gradiente preto→transparente, 948x184
   ========================================================================== */
.localizacao {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--preto);
}
.localizacao__grid {
  position: relative;
  /* 895 / 1920 = 46.6% — mantém a proporção da faixa original */
  aspect-ratio: 1920 / 895;
  min-height: 560px;
}

/* -------------------------------------------------- lado esquerdo
   Bloco laranja SÓLIDO (Rectangle 1, x=-45 w=744 h=631, raio TR 200)
   com a torre de Fuscas dentro, em multiply — por isso a foto fica
   alaranjada no layout.

   No desktop o wrapper é transparente: o bloco e a fachada se posicionam
   em relação ao .localizacao__grid. No mobile ele vira o contêiner da
   composição (ver breakpoint de 900px). */
.localizacao__composicao { display: contents; }
.localizacao__bloco {
  position: absolute;
  left: 0;
  top: 14.9%;                 /* (4237-4104) / 895 */
  width: 36.7%;               /* 699 visível (744 - 45 de sangria) / 1905 */
  height: 70.5%;              /* 631 / 895 */
  background: var(--laranja);
  border-top-right-radius: clamp(80px, 10.4vw, 200px);
  overflow: hidden;
  isolation: isolate;
}
.localizacao__bloco img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  /* luminosity: mantém o laranja do bloco e usa só a luz da foto,
     resultando na torre alaranjada e clara do layout */
  mix-blend-mode: luminosity;
  opacity: 0.9;
}

/* foto da fachada, por cima do bloco laranja e transbordando à direita */
.localizacao__fachada {
  position: absolute;
  left: 18.5%;                /* 356 / 1920 */
  top: 25.4%;                 /* (4331-4104) / 895 */
  width: 32.7%;               /* 628 / 1920 */
  height: 49.6%;              /* 444 / 895 — altura explícita, o aspect-ratio
                                 sozinho é ignorado por causa do height dos atributos */
  object-fit: cover;
  object-position: 50% 79%;   /* recorte convertido do imageTransform do Figma */
  /* 220px sobre 628 de largura no Figma — encolhe junto com a foto */
  border-top-left-radius: clamp(90px, 11.5vw, 220px);
  z-index: 3;
}

/* -------------------------------------------------- lado direito
   Kombi + véu laranja LINEAR_BURN 71% + gradiente preto que a
   dissolve por trás do texto. */
.localizacao__midia {
  position: absolute;
  left: 58%;                  /* 1114 / 1920 */
  top: 0;
  right: 0;
  height: 100%;
  overflow: hidden;
  /* isola o blend pra ele não afetar o fundo da seção */
  isolation: isolate;
}
.localizacao__midia img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* O LINEAR_BURN do Figma escurece e satura a foto em laranja.
     sepia + hue-rotate levam o azul da Kombi ao âmbar do layout;
     o véu laranja abaixo completa o tom. */
  filter: sepia(0.9) saturate(1.5) hue-rotate(-14deg) brightness(0.85);
}
/* Véu laranja #F18A00 a 71%, "Plus darker" no Figma.
   O Chrome ainda não suporta plus-darker, então o fallback usa multiply
   mais forte + o filtro sépia da imagem pra chegar no mesmo âmbar escuro. */
.localizacao__midia::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: var(--laranja);
  opacity: 0.52;
  mix-blend-mode: multiply;
}
@supports (mix-blend-mode: plus-darker) {
  .localizacao__midia::before {
    opacity: 0.71;
    mix-blend-mode: plus-darker;
  }
  /* com o blend correto a imagem não precisa do sépia tão forte */
  .localizacao__midia img {
    filter: sepia(0.35) saturate(1.15) brightness(0.9);
  }
}
/* Duas dissoluções numa camada só:
   1. vertical — apaga a borda superior (Rectangle 4, 948x184 no Figma)
   2. lateral  — dissolve a foto à esquerda, por trás do texto */
.localizacao__midia::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(
      to bottom,
      var(--preto) 0%,
      rgba(0,0,0,0.72) 8%,
      rgba(0,0,0,0.3) 16%,
      rgba(0,0,0,0) 24%
    ),
    linear-gradient(
      95deg,
      var(--preto) 0%,
      rgba(0,0,0,0.95) 16%,
      rgba(0,0,0,0.78) 32%,
      rgba(0,0,0,0.45) 50%,
      rgba(0,0,0,0.15) 66%,
      rgba(0,0,0,0) 80%
    );
}

/* -------------------------------------------------- texto */
.localizacao__texto {
  position: absolute;
  z-index: 3;
  left: 55%;                  /* 1055 / 1920 */
  top: 33.7%;                 /* (4406-4104) / 895 */
  width: 30%;
  display: flex;
  flex-direction: column;
}

.localizacao__marcador {
  width: 46px; height: 46px;
  color: var(--laranja);
  margin-bottom: 26px;
}
.localizacao__marcador svg { width: 100%; height: 100%; }

.endereco {
  font-size: 18px;
  line-height: 1.75;
  color: var(--texto-suave);
  font-style: normal;
  margin: 0;
}

/* ==========================================================================
   Chamada final (Viva essa história)
   ========================================================================== */
.chamada {
  position: relative;
  text-align: center;
  padding-block: 130px;
  overflow: hidden;
  background: var(--preto);
}
/* divisor "porta de garagem" no topo da chamada (BG_Viva_Essa_História) */
.chamada__divisor {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  z-index: 0;
  pointer-events: none;
}
.chamada__divisor img { width: 100%; height: auto; display: block; }
.chamada::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.95) 75%);
}
/* o divisor fica acima do véu escuro */
.chamada__divisor { z-index: 1; }
.chamada > .container { position: relative; z-index: 2; }
.chamada__titulo {
  font-family: var(--fonte-titulo);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.35;
  max-width: 810px;
  margin: 0 auto 32px;
}

/* ==========================================================================
   Página Acervo — blocos texto + galeria alternados
   ========================================================================== */
/* clip prende a sangria da galeria sem criar barra horizontal na página */
.bloco-acervo { padding-block: 86px; overflow-x: clip; }
.bloco-acervo__grid {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
/* inverte: galeria na esquerda, texto na direita */
.bloco-acervo--invertido .bloco-acervo__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
}
.bloco-acervo--invertido .bloco-acervo__texto { order: 2; }

/* A galeria sangra até a borda da tela, como no layout:
   min-width:0 libera o item do grid para estourar, e a largura
   calculada leva a faixa até o fim da viewport. */
.bloco-acervo__grid > .galeria { min-width: 0; }

/* Galerias do Acervo: deslizam devagar em loop, sem barra de scroll.
   Continuam sangrando até a borda da tela, como no layout. */
.galeria {
  overflow: hidden;
  padding-bottom: 0;
  margin-right: calc(50% - 50vw);
}
/* no bloco invertido a galeria fica à esquerda, então sangra pro outro lado */
.bloco-acervo--invertido .galeria {
  margin-right: 0;
  margin-left: calc(50% - 50vw);
}
.galeria__trilho {
  display: flex;
  width: max-content;
  animation: desliza-carrossel 90s linear infinite;
}
.galeria:hover .galeria__trilho { animation-play-state: paused; }
/* na galeria invertida o sentido é o oposto, pra variar o movimento */
.bloco-acervo--invertido .galeria__trilho {
  animation-name: desliza-carrossel-reverso;
}
@keyframes desliza-carrossel-reverso {
  from { transform: translateX(calc(-50% - 10px)); }
  to   { transform: translateX(0); }
}
.galeria:active { cursor: grabbing; }
.galeria::-webkit-scrollbar { height: 6px; }
.galeria::-webkit-scrollbar-track { background: transparent; }
.galeria::-webkit-scrollbar-thumb { background: var(--cinza-borda); border-radius: 3px; }
.galeria::-webkit-scrollbar-thumb:hover { background: var(--laranja); }
.galeria__item {
  flex: 0 0 450px;
  scroll-snap-align: start;
  border-radius: 5px;
  overflow: hidden;
  aspect-ratio: 450 / 318;
}
.galeria__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-media);
}
.galeria__item:hover img { transform: scale(1.04); }
.galeria.esta-arrastando { scroll-snap-type: none; }
.galeria.esta-arrastando img { pointer-events: none; }

/* hero curto das páginas internas */
.hero-interno {
  position: relative;
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* divisor "porta de garagem" no topo do hero do Acervo */
.hero-interno__divisor {
  position: absolute;
  top: calc(var(--header-h) - 20px);
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  z-index: 0;
  pointer-events: none;
}
.hero-interno__divisor img { width: 100%; height: auto; display: block; }
.hero-interno > .container,
.hero-interno__carros { position: relative; z-index: 1; }

/* mesma faixa em loop do "Nosso acervo" da Home */
.hero-interno__carros {
  margin-bottom: 44px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hero-interno__carros .carros-recortados__trilho {
  display: flex;
  align-items: flex-end;
  width: max-content;
  animation: desliza-carros 42s linear infinite;
}
.hero-interno__carros:hover .carros-recortados__trilho { animation-play-state: paused; }
.hero-interno__carros img {
  height: 167px; width: auto;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,0.6));
}
.hero-interno__texto { max-width: 620px; margin-inline: auto; }
.hero-interno .titulo { margin-bottom: 18px; }

/* ==========================================================================
   Página Contato
   ========================================================================== */
.contato {
  position: relative;
  padding-top: calc(var(--header-h) + 90px);
  padding-bottom: 110px;
  overflow: hidden;
}
.contato__fundo {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 56%;
  z-index: 0;
}
.contato__fundo img { width: 100%; height: 100%; object-fit: cover; }
.contato__fundo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--preto) 0%, rgba(0,0,0,0.75) 34%, rgba(0,0,0,0.25) 100%);
}
.contato > .container { position: relative; z-index: 1; }
.contato__grid {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 342px);
  gap: 86px;
  align-items: start;
}

/* formulário */
.campo { margin-bottom: 12px; }
.campo__rotulo {
  display: block;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 8px;
  color: var(--texto);
}
.campo__entrada {
  width: 100%;
  background: var(--cinza-campo);
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  font-size: 15px;
  font-weight: 300;
  padding: 12px 18px;
  transition: border-color var(--t-rapida), background var(--t-rapida);
}
.campo__entrada::placeholder { color: var(--texto-fraco); }
.campo__entrada:focus {
  outline: none;
  border-color: var(--laranja);
  background: #282828;
}
textarea.campo__entrada { min-height: 91px; resize: vertical; }

.form__envio { margin-top: 20px; }

/* mensagem de retorno do formulário */
.form__aviso {
  margin-top: 14px;
  font-size: 15px;
  padding: 12px 16px;
  border-radius: var(--r-btn);
  display: none;
}
.form__aviso.is-visivel { display: block; }
.form__aviso--ok {
  background: rgba(57, 187, 55, 0.14);
  border: 1px solid rgba(57, 187, 55, 0.4);
  color: #7FE07D;
}
.form__aviso--erro {
  background: rgba(220, 60, 60, 0.14);
  border: 1px solid rgba(220, 60, 60, 0.4);
  color: #FF9A9A;
}

/* ==========================================================================
   Rodapé
   ========================================================================== */
.rodape {
  background: var(--preto-suave);
  padding-block: 62px 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.rodape__grid {
  display: grid;
  grid-template-columns: 240px 150px minmax(0, 1fr) auto;
  gap: 60px;
  align-items: start;
}
.rodape__logo img {
  width: 160px;
  height: auto;   /* sem isso o height do HTML estica o logo */
}

.rodape__titulo {
  font-size: 16px;
  font-weight: 500;
  color: var(--texto);
  margin: 0 0 20px;
}

.rodape__lista { list-style: none; margin: 0; padding: 0; }
.rodape__lista li { margin-bottom: 15px; }
.rodape__lista a {
  font-size: 16px;
  font-weight: 300;
  color: var(--texto-suave);
  transition: color var(--t-rapida);
}
.rodape__lista a:hover { color: var(--laranja); }

.rodape__contato {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--texto-suave);
  font-style: normal;
}
.rodape__contato a { transition: color var(--t-rapida); }
.rodape__contato a:hover { color: var(--laranja); }
.rodape__email { display: inline-block; margin-bottom: 18px; }

.rodape__horario {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--texto-suave);
  margin: 0 0 24px;
}

.rodape__acoes { display: flex; flex-direction: column; gap: 12px; }
.rodape__acoes .btn { font-size: 15px; }

.redes { display: flex; gap: 18px; margin-top: 24px; }
.redes a {
  width: 24px; height: 24px;
  color: var(--laranja);
  transition: transform var(--t-rapida), color var(--t-rapida);
}
.redes a:hover { transform: translateY(-2px); color: #FF9B14; }
.redes svg { width: 100%; height: 100%; }

.rodape__base {
  margin-top: 46px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.rodape__copy {
  font-size: 15px;
  color: var(--texto-fraco);
  margin: 0;
}
.rodape__credito {
  font-size: 13px;
  line-height: 1.6;
  color: var(--texto-fraco);
  text-align: right;
  margin: 0;
  /* três parceiros agora: mais espaço pra não espremer em 2 linhas curtas */
  max-width: 420px;
}
.rodape__credito a {
  color: var(--texto-suave);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255,255,255,0.25);
}
.rodape__credito a:hover {
  color: var(--laranja);
  text-decoration-color: var(--laranja);
}
.rodape__credito a { transition: color var(--t-rapida); }
.rodape__credito a:hover { color: var(--laranja); }

/* ==========================================================================
   Animação de entrada ao rolar
   ========================================================================== */
.revelar {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms ease, transform 620ms ease;
}
.revelar.is-visivel { opacity: 1; transform: none; }

/* Rede de segurança: se o JS não rodar (erro, bloqueio, conexão ruim),
   nada de .revelar recebe is-visivel e o conteúdo some. O main.js marca
   <html class="js"> assim que carrega — sem essa classe, tudo aparece. */
html:not(.js) .revelar { opacity: 1; transform: none; }

/* ==========================================================================
   RESPONSIVO — derivado do desktop 1920
   ========================================================================== */

/* --- Laptop (até 1400px): reduz respiros e colunas fixas --- */
@media (max-width: 1400px) {
  :root { --container: 1120px; }
  .faixa-acervo__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 56px; }
  .dupla { gap: 56px; }
  .bloco-acervo__grid,
  .bloco-acervo--invertido .bloco-acervo__grid { gap: 48px; }
  .rodape__grid { grid-template-columns: 200px 140px minmax(0, 1fr) auto; gap: 44px; }
}

/* --- Tablet grande (até 1100px): header compacto, hero empilha --- */
@media (max-width: 1100px) {
  :root { --header-h: 80px; }

  .nav { gap: 24px; }
  .header__interno { gap: 20px; }
  .header__logo img { height: 50px; }

  .hero { min-height: auto; }
  .hero__moldura { min-height: 620px; }
  /* coluna única: o texto cai sobre a foto, o véu precisa ser mais forte */
  .hero__veu {
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.95) 0%,
      rgba(0,0,0,0.85) 38%,
      rgba(0,0,0,0.45) 66%,
      rgba(0,0,0,0.35) 100%
    );
  }
  /* Coluna única: ordem eyebrow > título > descrição > botões.
     display:contents dissolve o .hero__bloco, então eyebrow, título e
     botões viram irmãos diretos da descrição e o order funciona entre eles. */
  .hero__conteudo {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 0;
    padding-bottom: 48px;
  }
  .hero__bloco { display: contents; }
  .hero__conteudo .eyebrow      { order: 1; }
  .hero__conteudo .hero__titulo { order: 2; margin-bottom: 14px; }
  .hero__conteudo .hero__apoio  { order: 3; margin-bottom: 22px; max-width: 560px; padding-bottom: 0; }
  .hero__conteudo .hero__acoes  { order: 4; justify-content: flex-start; }

  .cards { gap: 32px; }
  .card { padding: 30px 22px 26px; }
}

/* --- Tablet (até 900px): menu vira gaveta, grids de 2 colunas colapsam --- */
@media (max-width: 900px) {
  .secao { padding-block: 76px; }
  #coca-cola { padding-block: 52px; }
  .secao--compacta { padding-block: 56px; }

  /* menu mobile */
  .menu-toggle { display: block; }
  .header__interno {
    justify-content: space-between;
    padding-left: var(--gutter);
    gap: 12px;
  }
  /* mesma dinâmica do desktop: na Home, no topo, o logo vem maior e
     transborda o header; ao rolar, encolhe pra dentro da barra */
  .header--home:not(.is-fixo) .header__logo {
    height: 48px;
    align-items: flex-start;
  }
  .header--home:not(.is-fixo) .header__logo img { height: 96px; }
  .header--home.is-fixo .header__logo img { height: 46px; }

  /* CTA depois do hambúrguer, encostado à direita */
  .header__logo { order: 1; margin-right: auto; }
  .menu-toggle { order: 2; }
  .header__cta { display: block; order: 3; }
  .header__cta .btn {
    font-size: 13px;
    padding: 10px 14px;
    white-space: nowrap;
  }
  /* o CTA duplicado da gaveta some, já que o do cabeçalho aparece */
  .nav__cta { display: none; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.97);
    backdrop-filter: blur(12px);
    padding: 8px var(--gutter) 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
    transform: translateY(-140%);
    transition: transform var(--t-media);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .nav.is-aberto { transform: translateY(0); }
  .nav__link {
    padding: 15px 0;
    font-size: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
  .nav__link::after { display: none; }
  /* CTA repetido dentro da gaveta */
  /* o CTA já aparece no cabeçalho no mobile; não repetir na gaveta */
  .nav__cta { display: none; }

  /* seções em coluna única */
  .dupla,
  .faixa-acervo__grid,
  .localizacao__grid,
  .bloco-acervo__grid,
  .bloco-acervo--invertido .bloco-acervo__grid,
  .contato__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  /* zera a inversão: no mobile tudo vira texto → mídia */
  .dupla--invertida .dupla__midia,
  .bloco-acervo--invertido .bloco-acervo__texto,
  .galeria { order: 0; }

  .titulo, .hero__titulo, .chamada__titulo { font-size: 32px; }
  .card__titulo { font-size: 24px; }

  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  /* o 3º card fica sozinho na linha: centraliza ocupando as duas colunas */
  .cards .card:last-child {
    grid-column: 1 / -1;
    max-width: 380px;
    margin-inline: auto;
  }

  /* Divisores "porta de garagem": em 100vw ficam finos demais no mobile.
     Aumentamos a largura e deixamos transbordar pelas laterais, preservando
     a presença do halo laranja. */
  .faixa-acervo__divisor,
  .hero-interno__divisor,
  .chamada__divisor {
    width: 260vw;
  }
  /* as seções contêm a sangria dos divisores */
  .faixa-acervo, .hero-interno, .chamada { overflow-x: clip; }
  .faixa-acervo { padding-top: 62px; }

  /* A composição sobreposta é preservada no mobile, em escala menor:
     a Kombi é omitida e o bloco laranja + fachada seguem escalonados,
     como no desktop. */
  .localizacao__grid {
    aspect-ratio: auto;
    min-height: auto;
    display: block;
    padding-bottom: 32px;
  }
  /* no mobile a Kombi sai: a composição do bloco + fachada carrega a seção */
  .localizacao__midia { display: none; }

  /* bloco laranja + fachada: mesma sobreposição do desktop, menor */
  .localizacao__composicao {
    display: block;
    position: relative;
    aspect-ratio: 615 / 580;
  }
  .localizacao__bloco {
    position: absolute;
    left: 0;
    top: 0;
    width: 84%;
    height: 64%;
    border-top-right-radius: clamp(50px, 16vw, 110px);
  }
  /* desce bastante: o bloco laranja fica bem visível acima e à esquerda */
  .localizacao__fachada {
    position: absolute;
    left: 30%;
    top: 44%;
    width: 70%;
    height: auto;
    aspect-ratio: 628 / 444;
    border-top-left-radius: clamp(34px, 11vw, 74px);
    box-shadow: 0 14px 34px rgba(0,0,0,0.65);
  }
  .localizacao__texto {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    padding: 36px var(--gutter) 0;
  }

  .contato { padding-top: calc(var(--header-h) + 56px); padding-bottom: 76px; }
  .contato__fundo { width: 100%; opacity: 0.42; }
  .contato__fundo::after {
    background: linear-gradient(to bottom, rgba(0,0,0,0.82), rgba(0,0,0,0.95));
  }

  .rodape__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .rodape__logo { grid-column: 1 / -1; display: flex; justify-content: center; }
  /* textos centralizados no mobile */
  .rodape { text-align: center; }
  .rodape__lista a,
  .rodape__contato,
  .rodape__horario { text-align: center; }
  .redes { justify-content: center; }
  .rodape__acoes { align-items: center; }
  .rodape__base {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .rodape__credito { text-align: center; max-width: none; }

  /* carrosséis: itens menores */
  .carrossel__item, .galeria__item { flex: 0 0 340px; }
}

/* --- Celular (até 620px) --- */
@media (max-width: 620px) {
  :root { --gutter: 16px; --header-h: 72px; }

  body { font-size: 16px; }

  .secao { padding-block: 56px; }
  #coca-cola { padding-block: 40px; }
  .secao--compacta { padding-block: 44px; }

  .titulo, .hero__titulo, .chamada__titulo { font-size: 26px; }
  /* evita "entretenimento" cair sozinho numa linha */
  .titulo { text-wrap: balance; }
  .eyebrow { font-size: 15px; }
  .texto { font-size: 16px; }

  .header__logo img { height: 42px; }
  /* na Home o logo grande também vale em telas menores */
  .header--home:not(.is-fixo) .header__logo { height: 42px; }
  .header--home:not(.is-fixo) .header__logo img { height: 84px; }
  .header--home.is-fixo .header__logo img { height: 40px; }
  .header__cta .btn { font-size: 12px; padding: 9px 12px; }

  .hero { padding-top: var(--header-h); }
  /* mais altura = mais foto visível antes do texto */
  /* respiro lateral: a moldura não encosta nas bordas da tela */
  .hero { padding-inline: 12px; }
  .hero__moldura { min-height: 680px; border-radius: 14px; }
  /* as imagens mobile já vêm recortadas em retrato do Figma */
  .slideshow__item picture {
  display: block;
  width: 100%; height: 100%;
}
.slideshow__item img { object-position: center; }
  .hero__conteudo { padding: 0 20px 34px; gap: 0; }
  /* botões compactos pra caberem lado a lado em 390px */
  .hero__conteudo .hero__acoes {
    flex-wrap: nowrap;
    gap: 10px;
  }
  .hero__acoes .btn {
    padding: 13px 12px;
    font-size: 14px;
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;   /* não deixa o texto quebrar dentro do botão */
  }
  .hero__acoes .btn svg { display: none; }
  .hero__apoio { font-size: 14px; line-height: 1.55; }


  /* no mobile o texto cai sobre a foto clara — o véu precisa ser mais forte */
  .hero__veu {
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.95) 0%,
      rgba(0,0,0,0.88) 42%,
      rgba(0,0,0,0.55) 70%,
      rgba(0,0,0,0.45) 100%
    );
  }
  .hero__apoio { font-size: 15px; }

  .beneficios { gap: 16px 20px; }
  .beneficio { font-size: 15px; }

  .cards { grid-template-columns: minmax(0, 1fr); }

  /* fotos sobrepostas viram empilhadas */
  /* mantém o par escalonado do desktop, só em escala menor.
     aspect-ratio explícito evita que a foto de cima seja cortada. */
  .midia-par {
    max-width: none;
    aspect-ratio: 615 / 678;
  }
  .midia-par__principal { border-top-right-radius: clamp(28px, 9vw, 60px); }
  .midia-par__secundaria {
    border-top-left-radius: clamp(38px, 12vw, 80px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6);
  }

  .carrossel__item, .galeria__item { flex: 0 0 78vw; }

  .carros-recortados__trilho img,
  .hero-interno__carros img { margin-right: 26px; }
  /* Ritmo constante em px/s — antes os carros corriam 81px/s e a galeria
     29px/s, o que fazia um parecer nervoso e o outro parado.
     Carros ~55px/s (decorativo), carrossel e galeria ~38px/s (leitura). */
  .carros-recortados__trilho,
  .hero-interno__carros .carros-recortados__trilho { animation-duration: 30s; }
  .carrossel__trilho { animation-duration: 68s; }
  .galeria__trilho { animation-duration: 34s; }
  .carros-recortados img, .hero-interno__carros img { height: 110px; }

  .localizacao__texto { padding: 40px var(--gutter); }
  .localizacao__midia { height: 230px; }
  .localizacao__bloco { height: 200px; border-top-right-radius: 60px; }

  .chamada { padding-block: 80px; }

  .rodape { padding-block: 46px 32px; }
  .rodape__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .rodape__acoes .btn { width: 100%; }
}

/* --- Respeita quem prefere menos movimento --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* faixa de carros: para o loop e devolve o scroll manual */
  .carros-recortados__trilho { animation: none; }
  .carros-recortados, .hero-interno__carros { overflow-x: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .revelar { opacity: 1; transform: none; }
}

/* --- Impressão --- */
@media print {
  .header, .menu-toggle, .rodape__acoes, .carrossel, .galeria { display: none; }
  body { background: #fff; color: #000; }
}