/* ============================================================
   SEÇÕES
   ============================================================ */

/* ---------- HERO ---------- */
.hero {
  display: flex;
  align-items: flex-end;
  /* exatamente uma viewport: assim o rodapé do hero coincide com a
     faixa da estrada e o texto nunca cai sobre a S10.
     min-height evita qualquer corte se o conteúdo precisar de mais. */
  height: 100vh;
  height: 100svh;
  min-height: max-content;
  padding-top: calc(var(--header-h) + clamp(36px, 7vh, 110px));
  /* espaço reservado para a S10 percorrer sem colidir com o texto */
  padding-bottom: var(--road-space);
  overflow: hidden;
}
/* Foto de fundo do hero: bem apagada, atrás de tudo.
   O véu é mais forte à esquerda/centro, onde fica a headline, para o
   contraste do texto continuar alto; a foto respira à direita, onde
   só passa a S10. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  opacity: var(--hero-bg-opacidade);
  filter: grayscale(.5);
  /* espelhada na horizontal: leva o volume da praça para a direita,
     onde o véu é mais leve, e deixa a esquerda mais limpa para a headline */
  transform: scaleX(-1);
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(20, 20, 20, .935) 0%,
      rgba(20, 20, 20, .67) 38%,
      rgba(20, 20, 20, .16) 100%),
    linear-gradient(to bottom,
      rgba(20, 20, 20, .70) 0%,
      rgba(20, 20, 20, .115) 34%,
      rgba(20, 20, 20, .835) 100%);
}

/* Entrada do hero por animação CSS: dispara assim que a folha é
   aplicada, sem esperar JavaScript, IntersectionObserver ou scroll.
   O hero está acima da dobra — não há motivo para detectar visibilidade.
   Com JS quebrado ou desativado, a animação roda igual. */
.hero [data-anima] {
  animation: heroEntra var(--t-hero) var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}
.hero [data-anima="title"] { --anima-y: 40px; }
.hero [data-anima="text"]  { --anima-y: 20px; }

@keyframes heroEntra {
  from { opacity: 0; transform: translateY(var(--anima-y, 20px)); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__inner { position: relative; z-index: 4; width: 100%; }

.hero__title {
  display: grid;
  font-size: var(--fs-hero);
  line-height: .92;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero__line { display: block; color: var(--off); }
.hero__line--accent { color: var(--amarelo); }
.hero__line:nth-child(2) { padding-left: clamp(0px, 4vw, 88px); }
.hero__line:nth-child(3) { padding-left: clamp(0px, 8vw, 176px); }

.hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(26px, 3.5vh, 56px);
  padding-top: clamp(22px, 2.6vh, 38px);
  border-top: 1px solid var(--linha-dark);
}
.hero__lead { max-width: 46ch; color: var(--off-72); font-size: var(--fs-lead); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .875rem; }

.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-top: clamp(22px, 3vh, 44px);
  color: var(--off-56);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.hero__scroll .icon {
  width: 1.1rem; height: 1.1rem;
  color: var(--amarelo);
  animation: nudge 2.4s var(--ease) infinite;
}
@keyframes nudge {
  0%, 62%, 100% { transform: translateY(0); }
  78%           { transform: translateY(5px); }
}

/* ---------- MANIFESTO ---------- */
/* O manifesto é continuação do hero, não uma seção nova: a margem
   superior é curta de propósito, senão sobra um trecho morto de preto
   entre os CTAs e "O IMPREVISTO" enquanto a S10 atravessa.
   No rodapé não há reserva para a S10 — ali o scroll já está em 100% e
   ela saiu pela direita. */
.manifesto {
  padding-top: clamp(20px, 3vh, 44px);
  padding-bottom: var(--section-y);
}
.manifesto__title {
  max-width: 17ch;
  color: var(--amarelo);
  font-size: clamp(2rem, 5.2vw, 4.75rem);
  text-transform: uppercase;
}
.manifesto__text { margin-top: clamp(26px, 3vw, 44px); }

/* ---------- SERVIÇOS ---------- */
.services__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(24px, 4vw, 72px);
  margin-bottom: clamp(44px, 5vw, 76px);
}
.services__head .lead { margin-top: 0; }

/* ---------- SOCORRO MECÂNICO ---------- */
.mech__head { margin-bottom: clamp(44px, 5vw, 76px); }
.mech__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
}
.mech__item { display: grid; gap: clamp(16px, 1.6vw, 24px); }
.mech__label {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--amarelo);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.mech__name {
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  color: var(--off);
  text-transform: uppercase;
}
.mech__item p { color: var(--muted); }
.mech__cta { margin-top: -.5rem; }

/* Ação principal ao fim de uma seção de serviço */
.secao__acao { margin-top: clamp(40px, 5vw, 68px); }

/* ---------- REBOQUE ---------- */
.tow__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}
.tow__actions { margin-top: clamp(28px, 3.4vw, 44px); }

/* Foto da frota sobre os dois blocos, formando uma pilha só:
   as frestas de 2px repetem a linguagem dos cards de serviço. */
.tow__midia {
  display: grid;
  gap: 2px;
}
.tow__tipos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.tow__tipo {
  display: grid;
  gap: clamp(14px, 1.6vw, 22px);
  padding: clamp(30px, 3.4vw, 52px) clamp(20px, 2.4vw, 34px);
  background: var(--preto);
  color: var(--off);
}
.tow__tipo .icon { color: var(--amarelo); }
.tow__tipoNome {
  font-size: clamp(1.2rem, 1.8vw, 1.65rem);
  color: var(--off);
  text-transform: uppercase;
}

/* ---------- CHAVEIRO ---------- */
.keys__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: clamp(44px, 5vw, 76px);
  background: var(--line);
  border: 1px solid var(--line);
}
.keys__col {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.2vw, 30px);
  padding: clamp(30px, 3.4vw, 54px);
  background: var(--bg);
}
.keys__name {
  font-size: clamp(1.25rem, 1.9vw, 1.7rem);
  color: var(--off);
  text-transform: uppercase;
}
.keys__list { display: grid; gap: .8rem; color: var(--muted); }
.keys__list li { display: flex; align-items: flex-start; gap: .7rem; }
.keys__list .icon { width: 1.05rem; height: 1.05rem; margin-top: .32em; }
.keys__acao { margin-top: auto; padding-top: clamp(6px, 1vw, 14px); }

/* ---------- SOBRE ---------- */
.about { max-width: 96ch; }
.about__text { margin-top: clamp(24px, 3vw, 40px); }
.about__year {
  display: block;
  margin-bottom: clamp(14px, 1.6vw, 22px);
  color: var(--amarelo);
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 800;
  line-height: .85;
  letter-spacing: var(--ls-tight);
  /* contorno preto: mantém o 2017 legível em fundo claro — é a única
     exceção de amarelo em escala grande prevista na identidade */
  -webkit-text-stroke: 1px rgba(20, 20, 20, .9);
}

@media (min-width: 1024px) {
  .about__text {
    columns: 2;
    column-gap: clamp(40px, 4vw, 72px);
  }
  .about__text .body-text { break-inside: avoid; }
  .about__text .body-text:first-child { margin-top: 0; }
}

/* ---------- DIFERENCIAL ---------- */
.diff__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: clamp(44px, 5vw, 76px);
  background: var(--line);
  border-block: 1px solid var(--line);
}
.diff__item {
  display: grid;
  gap: clamp(16px, 1.8vw, 24px);
  padding: clamp(30px, 3.4vw, 52px) clamp(24px, 2.6vw, 40px);
  background: var(--bg);
  transition: background-color var(--t-med) var(--ease);
}
.diff__item:hover { background: var(--preto-elev); }
.diff__item:hover .icon { transform: translateY(-4px); }
.diff__name {
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  color: var(--off);
  text-transform: uppercase;
}
.diff__item p { color: var(--muted); }

/* ---------- NÚMEROS / DESDE 2017 ---------- */
.numbers { text-align: center; }
.numbers__big {
  color: var(--preto);
  font-size: clamp(3rem, 12vw, 11rem);
  line-height: .84;
  text-transform: uppercase;
}
.numbers__sub {
  max-width: 34ch;
  margin: clamp(22px, 2.6vw, 34px) auto 0;
  color: var(--preto-70);
  font-size: var(--fs-lead);
}
/* Grade de indicadores — sem dados fornecidos, permanece oculta.
   Para ativar: remova o atributo hidden no HTML e preencha os valores. */
.numbers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: clamp(44px, 5vw, 72px);
  background: var(--line);
  border-block: 1px solid var(--line);
}
.numbers__cell { padding: clamp(24px, 3vw, 40px) 1rem; background: var(--bg); }
.numbers__value {
  display: block;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1;
  color: var(--preto);
}
.numbers__label {
  display: block;
  margin-top: .6rem;
  color: var(--preto-70);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ---------- CTA FINAL / CONTATO ---------- */
.final { overflow: hidden; }
.final__title {
  /* dimensionado para "CHAMOU A SR." caber em uma linha no desktop */
  font-size: clamp(2.6rem, 11.2vw, 9.5rem);
  line-height: .86;
  text-transform: uppercase;
}
.final__stop { display: block; color: var(--off); }
.final__call { display: block; color: var(--amarelo); }
.final__text {
  max-width: 46ch;
  margin-top: clamp(26px, 3vw, 42px);
  color: var(--off-72);
  font-size: var(--fs-lead);
}
.final__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(32px, 4vw, 52px);
}
.final__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.4vw, 40px);
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--linha-dark);
}
.final__contact {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 44px;
  color: var(--off-72);
  font-weight: 700;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.final__contact:hover { color: var(--amarelo); transform: translateX(3px); }

/* ---------- LOCALIZAÇÃO ---------- */
.local {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}
.local__endereco {
  margin-top: clamp(20px, 2.6vw, 32px);
  color: var(--text);
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: var(--ls-tight);
}
.local__acao {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-top: clamp(26px, 3.2vw, 40px);
}

/* Cartão preto clicável, mesma linguagem dos cards de serviço.
   Abre o Google Maps em nova aba — sem iframe, a CSP segue fechada. */
.local__cartao {
  --bg: var(--preto);
  --text: var(--off);
  --muted: var(--off-72);
  --icon: var(--amarelo);

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 30px);
  padding: clamp(34px, 3.6vw, 56px) clamp(26px, 2.8vw, 44px);
  background: var(--preto);
  color: var(--off);
  overflow: hidden;
  transition: background-color var(--t-med) var(--ease);
}
.local__cartao:hover { background: var(--preto-elev); }
.local__cartao:hover .card__rule { transform: scaleX(1); }
.local__pin { width: 2.6rem; height: 2.6rem; color: var(--amarelo); }

/* Mapa: dessaturado para não brigar com a paleta, mas com as ruas
   perfeitamente legíveis. Sem link estendido por cima — o mapa
   precisa continuar interativo. */
.local__mapa {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--preto-elev);
  border: 1px solid var(--linha-dark);
}
.local__mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(.75) contrast(1.05) brightness(.94);
}
.local__cartaoAcoes {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 28px);
  margin-top: auto;
}
.card__cta--sec { color: var(--off-72); }
.card__cta--sec .icon { color: var(--amarelo); }
.local__cartaoEndereco {
  color: var(--off);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 700;
  line-height: 1.35;
}
@supports selector(:has(*)) {
  .local__cartao:has(.card__cta:focus-visible) {
    outline: 3px solid var(--amarelo);
    outline-offset: -3px;
    background: var(--preto-elev);
  }
  .local__cartao:has(.card__cta:focus-visible) .card__rule { transform: scaleX(1); }
}