/* ==========================================================
   GOLD CAR — Centro de Estética Automotiva
   Paleta e tratamento metálico tirados do material da marca.
   ========================================================== */

:root{
  --carbono:    #090908;
  --carbono-2:  #101010;
  --carbono-3:  #191817;
  --risco:      #262421;   /* hairline */

  /* O dourado da marca tem 3 paradas: reflexo, corpo e sombra do chanfro. */
  --ouro-1:     #ffe08a;
  --ouro-2:     #f2b91d;
  --ouro-3:     #9c6b06;

  --bronze-1:   #e8b184;
  --bronze-2:   #c07d3e;
  --prata-1:    #f0f3f6;
  --prata-2:    #aab1b9;

  --osso:       #f3f0ea;
  --fumaca:     #9b958c;
  --whats:      #25d366;

  --metal: linear-gradient(168deg, var(--ouro-1) 0%, var(--ouro-2) 44%, var(--ouro-3) 100%);

  --display: 'Archivo Black', 'Arial Black', sans-serif;
  --corpo:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tecnica: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  --e1: 10px; --e2: 18px; --e3: 28px; --e4: 44px; --e5: 68px; --e6: 104px;
  --largura: 1180px;
  --topo-h: 76px;

  --curva: cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + 20px); }

body{
  margin: 0;
  background: var(--carbono);
  color: var(--osso);
  font-family: var(--corpo);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }

/* Container só dos <symbol>; nunca é desenhado. */
.sprite{ display: none; }

.wrap{
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--e3);
}

.skip-link{
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--ouro-2); color: #140f02;
  padding: 12px 20px; font-weight: 600;
}
.skip-link:focus{ left: 0; }

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

/* Sem viewBox aqui de propósito: o <use> herda o do <symbol>. */
.ic{ width: 20px; height: 20px; fill: currentColor; flex: none; }
.ic-p{ width: 15px; height: 15px; }

/* ---------- Tipografia base ---------- */

.selo{
  font-family: var(--tecnica);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ouro-2);
  margin: 0 0 var(--e2);
}

/* O display leva um leve skew — é assim que o logotipo da marca é desenhado. */
.secao-titulo,
.hero-titulo,
.svc-nome,
.escudo-nome,
.passo-titulo,
.of-titulo{
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: -.015em;
  transform: skewX(-6deg);
  transform-origin: left bottom;
  font-weight: 400;
}

.secao-titulo{
  font-size: clamp(2.3rem, 6.5vw, 4rem);
  line-height: .96;
  margin: 0 0 var(--e2);
}

.secao-texto{
  color: var(--fumaca);
  max-width: 58ch;
  margin: 0;
  font-size: 1.02rem;
}

/* Preenchimento metálico: reflexo em cima, sombra do chanfro embaixo. */
.metal{
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Botões ---------- */

.botao{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 13px 26px;
  border: none;
  font-family: var(--tecnica);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  transition: transform .2s ease, filter .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

.botao-ouro{
  background: var(--metal);
  color: #150f02;
}
.botao-ouro:hover{ transform: translateY(-2px); filter: brightness(1.12); }

/* Lustro que atravessa o botão no hover — a mesma ideia de luz na lataria. */
.botao-ouro::after{
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg);
  transition: left .55s var(--curva);
}
.botao-ouro:hover::after{ left: 120%; }

.botao-vazado{
  background: rgba(242,185,29,.07);
  color: var(--osso);
  box-shadow: inset 0 0 0 1px rgba(242,185,29,.45);
}
.botao-vazado:hover{
  background: rgba(242,185,29,.16);
  box-shadow: inset 0 0 0 1px var(--ouro-2);
  transform: translateY(-2px);
}

.botao-p{ min-height: 44px; padding: 10px 18px; font-size: .72rem; gap: 8px; }
.botao-g{ min-height: 58px; padding: 17px 32px; font-size: .88rem; }
.botao-cheio{ display: flex; width: 100%; margin-top: auto; }

/* ---------- Topo ---------- */

.topo{
  position: sticky; top: 0; z-index: 100;
  height: var(--topo-h);
  display: flex; align-items: center;
  background: rgba(9,9,8,.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--risco);
  transition: background .3s ease, border-color .3s ease;
}
.topo.rolado{ background: rgba(9,9,8,.96); border-bottom-color: rgba(242,185,29,.28); }

.topo-linha{ display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }

.marca{ display: flex; align-items: center; min-height: 48px; }
.marca img{ height: 42px; width: auto; }

.menu{ display: flex; gap: var(--e3); }
.menu a{
  font-family: var(--tecnica);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 10px 0;
  position: relative;
  color: var(--osso);
  transition: color .2s ease;
}
.menu a::after{
  content: '';
  position: absolute; left: 0; right: 100%; bottom: 4px;
  height: 2px; background: var(--metal);
  transition: right .26s ease;
}
.menu a:hover{ color: var(--ouro-1); }
.menu a:hover::after{ right: 0; }

.topo-acoes{ display: flex; align-items: center; gap: var(--e2); }

.hamburguer{
  display: none;
  width: 46px; height: 46px; padding: 0;
  background: transparent; border: none; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 5px;
}
.hamburguer span{
  display: block; height: 2px; width: 24px; margin-inline: auto;
  background: var(--osso);
  transition: transform .25s ease, opacity .2s ease;
}
.hamburguer[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburguer[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.hamburguer[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */

.hero{
  position: relative;
  padding-block: var(--e6) var(--e5);
  overflow: hidden;
  background:
    radial-gradient(62% 58% at 8% 92%, rgba(156,107,6,.3), transparent 66%),
    var(--carbono);
}

/* Vídeo de fundo: só existe no mobile (ver <source media> no HTML). */
.hero-video{
  display: none;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-veu{ display: none; }

/* Chevrons: o mesmo motivo das artes impressas da marca. */
.hero-chevrons{
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(118deg,
      transparent 0 70px,
      rgba(242,185,29,.085) 70px 71px,
      transparent 71px 142px);
  -webkit-mask-image: linear-gradient(to left, #000, transparent 60%);
  mask-image: linear-gradient(to left, #000, transparent 60%);
  pointer-events: none;
}

/* Brilho especular que atravessa devagar, como luz correndo na lataria. */
.hero-brilho{
  position: absolute; top: -40%; bottom: -40%; width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255,224,138,.07) 45%, transparent);
  transform: skewX(-14deg);
  animation: varrer 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes varrer{
  0%, 100% { left: -45%; opacity: 0; }
  45%      { opacity: 1; }
  70%, 100%{ left: 105%; opacity: 0; }
}

.hero-grade{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: var(--e5);
  align-items: center;
}

.hero-titulo{
  font-size: clamp(2.9rem, 7.5vw, 5.4rem);
  line-height: .92;
  margin: 0 0 var(--e3);
}
.hero-titulo .linha{ display: block; }

.hero-sub{
  color: #cdc7bd;
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  max-width: 46ch;
  margin: 0 0 var(--e4);
}

.hero-botoes{ display: flex; flex-wrap: wrap; gap: var(--e2); }

/* Colagem do hero: três retratos escalonados, com paralaxe leve no scroll. */
.hero-galeria{
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e2);
}
.hg-item{
  margin: 0;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(242,185,29,.28), 0 24px 60px rgba(0,0,0,.55);
  will-change: transform;
}
.hg-item img{ width: 100%; height: 100%; object-fit: cover; }

.hg-1{ grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 3/4; }
.hg-2{ grid-column: 2; grid-row: 1; aspect-ratio: 1; margin-top: var(--e4); }
.hg-3{ grid-column: 2; grid-row: 2; aspect-ratio: 1; }

/* Seta de rolagem: um filete que desce em loop. */
.hero-rolar{
  position: absolute; left: 50%; bottom: 22px;
  transform: translateX(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  z-index: 3;
}
.hero-rolar-linha{
  width: 1px; height: 34px;
  background: linear-gradient(to bottom, transparent, var(--ouro-2));
  animation: descer 2.2s ease-in-out infinite;
}
@keyframes descer{
  0%   { opacity: 0; transform: translateY(-10px) scaleY(.6); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(12px) scaleY(1); }
}

/* ---------- Faixa rolante ---------- */

.faixa{
  overflow: hidden;
  border-block: 1px solid var(--risco);
  background: var(--carbono-2);
  padding-block: 14px;
}
.faixa-trilho{ display: flex; width: max-content; animation: correr 34s linear infinite; }
.faixa-grupo{ display: flex; align-items: center; }
.faixa-grupo b{
  font-family: var(--display);
  /* 1.25rem = 20px: acima do limite de "texto grande" do WCAG, porque o fim
     escuro do gradiente dourado fica em 4,29:1 sobre o carbono. */
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  transform: skewX(-6deg);
  background: var(--metal);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-inline: var(--e3);
}
.faixa-grupo i{ width: 6px; height: 6px; background: var(--ouro-3); transform: rotate(45deg); }
@keyframes correr{ from{ transform: translateX(0) } to{ transform: translateX(-50%) } }

/* ---------- Seções ---------- */

.secao{ padding-block: var(--e6); }
.secao-compacta{ padding-block: var(--e5); }
.secao-escura{ background: var(--carbono-2); }
.secao-cabeca{ margin-bottom: var(--e5); }

/* ---------- Números ---------- */

.numeros{ border-bottom: 1px solid var(--risco); }

.grade-num{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e3);
  margin: 0;
}
.num{ padding-left: var(--e2); border-left: 2px solid rgba(242,185,29,.3); }

.num-valor{
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  line-height: 1;
  transform: skewX(-6deg);
  transform-origin: left bottom;
  background: var(--metal);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.num-texto{ font-size: clamp(1.3rem, 2.6vw, 1.9rem); }
.num-texto span{ display: block; font-size: .55em; opacity: .8; }

.num-rotulo{
  margin: 0;
  font-family: var(--tecnica);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fumaca);
  line-height: 1.5;
}

/* ---------- Serviços (lista editorial, sem foto) ---------- */

.lista-svc{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--risco); }

.svc{
  display: grid;
  grid-template-columns: minmax(190px, 24%) 1fr auto;
  gap: var(--e3);
  align-items: start;
  padding-block: var(--e3);
  border-bottom: 1px solid var(--risco);
  position: relative;
  transition: padding-left .3s var(--curva), background .3s ease;
}
.svc::before{
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--metal);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .3s var(--curva);
}
.svc:hover{ padding-left: var(--e2); background: rgba(242,185,29,.03); }
.svc:hover::before{ transform: scaleY(1); }

.svc-nome{
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.05;
  color: var(--osso);
  transition: color .25s ease;
}
.svc:hover .svc-nome{
  background: var(--metal);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.svc-txt{ color: var(--fumaca); font-size: .98rem; max-width: 62ch; }
.svc-cta{ align-self: center; }

/* ---------- Processo ---------- */

.passos{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e3);
  counter-reset: passo;
}
.passo{
  position: relative;
  padding-top: var(--e3);
  border-top: 1px solid var(--risco);
  transition: border-color .3s ease;
}
.passo:hover{ border-top-color: var(--ouro-2); }

.passo-num{
  display: block;
  font-family: var(--tecnica);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ouro-2);
  margin-bottom: var(--e2);
}
.passo-titulo{
  font-size: 1.32rem;
  line-height: 1.1;
  margin: 0 0 12px;
  color: var(--osso);
}
.passo p{ margin: 0; color: var(--fumaca); font-size: .95rem; }

/* ---------- Pacotes ---------- */

.abas{
  display: flex; gap: 4px;
  margin-bottom: var(--e4);
  border-bottom: 1px solid var(--risco);
}
.aba{
  min-height: 52px;
  padding: 14px 26px;
  border: none; background: transparent;
  font-family: var(--tecnica);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--fumaca);
  cursor: pointer;
  position: relative;
  transition: color .2s ease;
}
.aba::after{
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--metal);
  transform: scaleX(0);
  transition: transform .25s ease;
}
.aba:hover{ color: var(--osso); }
.aba.ativa{ color: var(--ouro-1); }
.aba.ativa::after{ transform: scaleX(1); }

.escudos{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e3);
}

.escudo{
  display: flex; flex-direction: column;
  padding: var(--e4) var(--e3) var(--e3);
  background: linear-gradient(180deg, var(--carbono-3), var(--carbono));
  box-shadow: inset 0 0 0 1px var(--risco);
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  transition: transform .3s var(--curva), box-shadow .3s ease;
}
.escudo:hover{ transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(242,185,29,.45); }
.escudo.destaque{ box-shadow: inset 0 0 0 1px rgba(242,185,29,.5), 0 24px 60px rgba(0,0,0,.5); }

.escudo-tag{
  position: absolute; top: 0; left: 0;
  font-family: var(--tecnica);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 6px 14px;
  background: var(--metal);
  color: #150f02;
}

.escudo-brasao{ display: flex; align-items: center; gap: 14px; margin-bottom: var(--e3); }

/* Coroa em CSS, no espírito dos brasões do material impresso. */
.escudo-coroa{
  width: 34px; height: 26px;
  flex: none;
  clip-path: polygon(0 100%, 8% 18%, 30% 52%, 50% 0, 70% 52%, 92% 18%, 100% 100%);
}
.escudo[data-metal="bronze"] .escudo-coroa{ background: linear-gradient(160deg, var(--bronze-1), var(--bronze-2)); }
.escudo[data-metal="prata"]  .escudo-coroa{ background: linear-gradient(160deg, var(--prata-1), var(--prata-2)); }
.escudo[data-metal="gold"]   .escudo-coroa{ background: var(--metal); }

.escudo-nome{ font-size: 1.75rem; line-height: 1; }
.escudo[data-metal="bronze"] .escudo-nome{ background: linear-gradient(160deg, var(--bronze-1), var(--bronze-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.escudo[data-metal="prata"]  .escudo-nome{ background: linear-gradient(160deg, var(--prata-1), var(--prata-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.escudo[data-metal="gold"]   .escudo-nome{ background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }

.escudo-txt{ color: var(--fumaca); font-size: .96rem; margin: 0 0 var(--e3); }

.escudo-garantia{
  font-family: var(--tecnica);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .06em;
  color: var(--ouro-1);
  margin: 0 0 var(--e3);
  padding-top: var(--e2);
  border-top: 1px solid var(--risco);
}

.nota{
  font-family: var(--tecnica);
  font-size: .72rem;
  color: var(--fumaca);
  margin: var(--e3) 0 0;
}

/* ---------- Adicionais (tabela de oficina) ---------- */

.tabela-precos{ margin: 0; border-top: 1px solid var(--risco); }

.linha-preco{
  display: grid;
  grid-template-columns: minmax(170px, 20%) 1fr auto auto;
  gap: var(--e3);
  align-items: center;
  padding-block: var(--e2);
  border-bottom: 1px solid var(--risco);
  transition: background .25s ease;
}
.linha-preco:hover{ background: rgba(242,185,29,.04); }

.linha-preco dt{ font-weight: 600; font-size: 1.06rem; }
.linha-preco dd{ margin: 0; }

.lp-txt{ color: var(--fumaca); font-size: .95rem; }

.lp-val{
  font-family: var(--tecnica);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--ouro-1);
  text-align: right;
  white-space: nowrap;
}
.lp-val small{
  display: inline;
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fumaca);
}

/* ---------- A oficina (blocos alternados) ---------- */

.oficina{ display: flex; flex-direction: column; gap: var(--e5); }

.of-bloco{
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--e5);
  align-items: center;
}
/* Alterna o lado: par tem a foto à direita. */
.of-bloco:nth-child(even){ grid-template-columns: 1fr 340px; }
.of-bloco:nth-child(even) > .of-foto{ order: 2; }
.of-bloco:nth-child(even) > .of-texto{ order: 1; }

.of-foto{
  width: 100%;
  padding: 0; border: none;
  background: var(--carbono);
  box-shadow: inset 0 0 0 1px var(--risco);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 3 / 4;
  transition: box-shadow .25s ease;
}
.of-foto img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--curva); }
.of-foto:hover{ box-shadow: inset 0 0 0 1px rgba(242,185,29,.55); }
.of-foto:hover img{ transform: scale(1.06); }

.of-titulo{
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.04;
  margin: 0 0 var(--e2);
  background: var(--metal);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.of-texto p{ color: var(--fumaca); font-size: 1.02rem; margin: 0; max-width: 52ch; }

/* ---------- Localização ---------- */

.loc-grade{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e5);
  align-items: center;
}

.loc-texto .secao-texto{ margin-bottom: var(--e3); }
.loc-acoes{ display: flex; flex-wrap: wrap; gap: var(--e2); }

.loc-mapa{
  position: relative;
  aspect-ratio: 4 / 3;
  box-shadow: inset 0 0 0 1px var(--risco);
  /* O mapa do Google não aceita filtro de cor — o chanfro nas bordas é o que
     mantém a peça no mesmo idioma visual do resto do site. */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
.loc-mapa iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  filter: grayscale(.15) contrast(1.05);
}

/* ---------- Contato ---------- */

.contato{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(58% 62% at 50% 0%, rgba(156,107,6,.24), transparent 68%),
    var(--carbono);
  border-top: 1px solid var(--risco);
  text-align: center;
}
.contato-chevrons{
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%);
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
}
.contato-conteudo{ position: relative; }
.contato .secao-titulo{ transform: skewX(-6deg); }
.contato .secao-texto{ margin-inline: auto; }

.contatos{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--e2);
  max-width: 880px;
  margin: var(--e5) auto 0;
}

.contato-card{
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  padding: var(--e3);
  min-height: 140px;
  justify-content: center;
  background: var(--carbono-2);
  box-shadow: inset 0 0 0 1px var(--risco);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  transition: transform .25s ease, box-shadow .25s ease;
}
a.contato-card:hover{ transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(242,185,29,.55); }
.contato-card .ic{ width: 28px; height: 28px; color: var(--ouro-2); margin-bottom: 6px; }

.contato-rotulo{
  font-family: var(--tecnica);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--fumaca);
}
.contato-valor{ font-size: 1.04rem; font-weight: 500; }

/* ---------- Rodapé ---------- */

.rodape{ background: var(--carbono-2); border-top: 1px solid var(--risco); padding-top: var(--e5); }

.rodape-grade{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--e4);
  padding-bottom: var(--e4);
}
.rodape-logo{ height: 38px; width: auto; opacity: .9; margin-bottom: var(--e2); }
.rodape-txt{ color: var(--fumaca); font-size: .92rem; margin: 0; max-width: 40ch; }

.rodape-nav{ display: flex; flex-direction: column; }
.rodape-titulo{
  font-family: var(--tecnica);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ouro-2);
  margin: 0 0 6px;
}
/* Padding vertical em vez de gap: o alvo de toque precisa ter 44px de altura,
   não só o texto de 24px com espaço vazio entre os links. */
.rodape-nav a{
  color: var(--fumaca);
  font-size: .92rem;
  padding-block: 11px;
  transition: color .2s ease;
}
.rodape-nav a:hover{ color: var(--ouro-1); }

.rodape-base{
  border-top: 1px solid var(--risco);
  padding-block: var(--e3);
}
.rodape-base p{ margin: 0; color: var(--fumaca); font-size: .82rem; }

/* ---------- Botão flutuante ---------- */

.flutuante{
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--whats);
  box-shadow: 0 10px 30px rgba(37,211,102,.38);
  transition: transform .25s ease;
}
.flutuante svg{ width: 30px; height: 30px; fill: #fff; }
.flutuante:hover{ transform: scale(1.08); }

/* ---------- Visor (lightbox) ---------- */

.visor{
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: rgba(5,5,4,.95);
  padding: var(--e3);
}
.visor[hidden]{ display: none; }
.visor figure{ margin: 0; max-width: 900px; text-align: center; }
.visor img{
  max-width: 100%; max-height: 76vh; object-fit: contain;
  box-shadow: 0 0 0 1px rgba(242,185,29,.35);
}
.visor figcaption{
  font-family: var(--tecnica);
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ouro-1);
  margin-top: var(--e2);
}
.visor-fechar{
  position: absolute; top: 16px; right: 16px;
  width: 48px; height: 48px;
  background: rgba(16,16,16,.9); color: var(--osso);
  border: 1px solid var(--risco);
  font-size: 1.9rem; line-height: 1; cursor: pointer;
}
.visor-fechar:hover{ border-color: var(--ouro-2); color: var(--ouro-1); }

/* ---------- Revelação ao rolar ---------- */

.revelar{ opacity: 0; transform: translateY(20px); }
.revelar.visivel{
  opacity: 1; transform: none;
  transition: opacity .65s ease, transform .65s var(--curva);
}

/* ==========================================================
   Responsivo
   ========================================================== */

@media (max-width: 1000px){
  .hero-grade{ grid-template-columns: 1fr; gap: var(--e4); }
  .escudos{ grid-template-columns: 1fr; }
  .escudo{ padding-top: var(--e4); }

  .passos{ grid-template-columns: repeat(2, 1fr); gap: var(--e4) var(--e3); }

  .grade-num{ grid-template-columns: repeat(2, 1fr); gap: var(--e4) var(--e3); }

  .of-bloco,
  .of-bloco:nth-child(even){ grid-template-columns: 260px 1fr; gap: var(--e4); }
  .of-bloco:nth-child(even){ grid-template-columns: 1fr 260px; }

  .loc-grade{ grid-template-columns: 1fr; }

  .rodape-grade{ grid-template-columns: 1fr 1fr; }
  .rodape-marca{ grid-column: 1 / -1; }
}

@media (max-width: 900px){
  /* Aqui o <source media> do vídeo passa a valer: fundo em movimento. */
  .hero-video{ display: block; }
  .hero-veu{
    display: block;
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(9,9,8,.86) 0%, rgba(9,9,8,.7) 45%, rgba(9,9,8,.95) 100%);
    z-index: 1;
  }
  .hero-galeria{ display: none; }
  .hero{ min-height: 88vh; display: flex; align-items: center; }
  .hero-chevrons{ opacity: .5; }
}

@media (max-width: 820px){
  :root{ --e5: 52px; --e6: 68px; }

  .hamburguer{ display: flex; }
  #ctaTopo{ display: none; }

  .menu{
    position: fixed;
    inset: var(--topo-h) 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: rgba(9,9,8,.98);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--risco);
    padding: var(--e2) var(--e3) var(--e3);
    transform: translateY(-115%);
    transition: transform .3s var(--curva);
    visibility: hidden;
  }
  .menu.aberto{ transform: translateY(0); visibility: visible; }
  .menu a{ padding: 16px 0; border-bottom: 1px solid var(--risco); font-size: .92rem; }
  .menu a::after{ display: none; }

  .hero{ padding-block: var(--e5); }
  .hero-botoes .botao{ flex: 1 1 100%; }

  /* Serviços: nome, texto e botão empilhados. */
  .svc{
    grid-template-columns: 1fr;
    gap: 10px;
    padding-block: var(--e3);
  }
  .svc-cta{ justify-self: start; align-self: start; }

  /* Adicionais: nome e preço na primeira linha, resto embaixo.
     A posição vai explícita — deixando no automático, o preço era empurrado
     para uma linha só dele e a segunda coluna colapsava em 0px. */
  .linha-preco{
    grid-template-columns: 1fr auto;
    gap: 8px var(--e2);
    padding-block: var(--e3);
    align-items: baseline;
  }
  .linha-preco dt{ grid-column: 1; grid-row: 1; }
  .lp-val{ grid-column: 2; grid-row: 1; }
  .lp-txt{ grid-column: 1 / -1; grid-row: 2; }
  .lp-cta{ grid-column: 1 / -1; grid-row: 3; margin-top: 6px; }

  /* Rótulo curto: os dois nomes completos não cabem lado a lado em 375px,
     e rolagem lateral esconderia a segunda aba. */
  .aba-extra{ display: none; }
  .aba{ flex: 1; padding: 14px 12px; font-size: .74rem; white-space: nowrap; }

  /* Oficina empilhada: a foto sempre vem antes do texto. */
  .of-bloco,
  .of-bloco:nth-child(even){ grid-template-columns: 1fr; gap: var(--e3); }
  .of-bloco > .of-foto,
  .of-bloco:nth-child(even) > .of-foto{ order: 1; max-width: 380px; }
  .of-bloco > .of-texto,
  .of-bloco:nth-child(even) > .of-texto{ order: 2; }
  .oficina{ gap: var(--e4); }

  .loc-acoes .botao{ flex: 1 1 100%; }
}

@media (max-width: 560px){
  .passos{ grid-template-columns: 1fr; }
}

@media (max-width: 460px){
  .marca img{ height: 34px; }
  .cmp-rotulo{ font-size: .6rem; padding: 5px 9px; }
  .of-foto{ aspect-ratio: 4 / 3; }
  .grade-num{ grid-template-columns: 1fr; gap: var(--e3); }
  .rodape-grade{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero-brilho{ display: none; }
  .faixa-trilho{ animation: none; }
  .revelar{ opacity: 1; transform: none; }
  .hero-rolar-linha{ animation: none; opacity: .8; }
}