/* ==========================================================================
   SÁ MARCOS VEÍCULOS — Paulo Afonso, BA
   Folha de estilo única. Sem framework, sem dependência.
   Conceito: "farol aceso no escuro" — preto absoluto, cromo e vermelho
   #E10606, com a inclinação e os filetes de velocidade do logotipo.
   ========================================================================== */

/* --------------------------------------------------------- 1. Tokens ---- */
:root{
  /* Superfícies (preto e grafite do manual) */
  --preto:      #000000;
  --carvao:     #0B0B0B;
  --superficie: #141414;
  --elevado:    #1B1B1B;
  --grafite:    #2A2A2A;
  --borda:      #232323;
  --borda-viva: #353535;

  /* Marca */
  --vermelho:      #E10606;
  --vermelho-alto: #FF2A2A;
  --vermelho-baixo:#9E0303;
  --vermelho-veu:  rgba(225,6,6,.16);
  --grad-fogo:  linear-gradient(135deg,var(--vermelho-alto) 0%,var(--vermelho) 50%,var(--vermelho-baixo) 100%);

  /* Cromo (cinza metálico #BFBFBF) */
  --cromo:      #BFBFBF;
  --cromo-baixo:#7A7A7A;
  --grad-cromo: linear-gradient(135deg,#FFFFFF 0%,#CFCFCF 20%,#7D7D7D 44%,#F0F0F0 60%,#9C9C9C 80%,#F5F5F5 100%);
  --grad-cromo-alto: linear-gradient(172deg,#FFFFFF 0%,#EDEDED 38%,#9A9A9A 52%,#E4E4E4 70%,#FFFFFF 100%);

  /* Tinta */
  --tinta:       #F4F4F4;
  --tinta-media: #B9B9B9;
  --tinta-fraca: #858585;

  /* Tipografia */
  --display: "Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --corpo:   "Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* Métrica */
  --largura: 1240px;
  --gutter:  clamp(16px,5vw,64px);
  --raio:    8px;
  --corte:   18px;   /* canto chanfrado dos cartões */

  /* Movimento */
  --ease: cubic-bezier(.22,.61,.36,1);

  --sombra-alta: 0 30px 70px rgba(0,0,0,.75);
}

/* --------------------------------------------------------- 2. Reset ----- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{
  margin:0;background:var(--preto);color:var(--tinta);
  font-family:var(--corpo);font-size:16.5px;font-weight:400;line-height:1.7;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,picture,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.015em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
figure{margin:0}
svg{flex:none}
:focus-visible{outline:2px solid var(--vermelho);outline-offset:3px}
::selection{background:var(--vermelho);color:#fff}

/* ------------------------------------------------- 3. Utilitários ------- */
.env{width:100%;max-width:var(--largura);margin-inline:auto;padding-inline:var(--gutter)}
.secao{padding-block:clamp(72px,10vw,128px);position:relative}
.secao--carvao{background:var(--carvao)}

/* chapéu com os três filetes de velocidade do "M" do logo */
.chapeu{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--display);font-size:11.5px;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--cromo);margin-bottom:20px;
}
.chapeu::before{
  content:"";width:26px;height:11px;flex:none;
  background:
    linear-gradient(var(--vermelho),var(--vermelho)) 0 0/100% 2.2px,
    linear-gradient(var(--vermelho),var(--vermelho)) 5px 50%/calc(100% - 5px) 2.2px,
    linear-gradient(var(--vermelho),var(--vermelho)) 10px 100%/calc(100% - 10px) 2.2px;
  background-repeat:no-repeat;
  transform:skewX(-20deg);
}

.titulo{
  font-size:clamp(2rem,5vw,3.6rem);font-weight:900;font-style:italic;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1;
}
.titulo--m{font-size:clamp(1.8rem,4vw,2.8rem)}
.titulo em,.hero h1 em,.destaque em,.fechamento em{
  font-style:italic;background:var(--grad-fogo);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:.08em;
}
.titulo .cromo,.hero h1 .cromo{
  background:var(--grad-cromo-alto);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:.08em;
}

.linha{font-size:clamp(1rem,1.8vw,1.1rem);color:var(--tinta-media);max-width:60ch;margin-top:22px;font-weight:300}
.cabeca-secao{max-width:820px;margin-bottom:clamp(40px,5.5vw,64px)}
.cabeca-secao--centro{text-align:center;margin-inline:auto}

/* Botões — paralelogramo, como o emblema -------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:17px 34px;border:0;cursor:pointer;
  font-family:var(--display);font-size:13.5px;font-weight:800;font-style:italic;
  letter-spacing:.08em;text-transform:uppercase;
  background:var(--grad-fogo);background-size:160% 100%;background-position:0 0;color:#fff;
  clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);
  transition:background-position .45s var(--ease),transform .3s var(--ease),filter .3s var(--ease);
}
.btn:hover{background-position:100% 0;transform:translateY(-2px);filter:brightness(1.12) drop-shadow(0 0 18px rgba(225,6,6,.5))}
.btn:active{transform:translateY(0)}
.btn svg{width:17px;height:17px}
.btn--sm{padding:12px 24px;font-size:12px}

.btn--vidro{
  background:rgba(255,255,255,.07);color:var(--tinta);
  box-shadow:inset 0 0 0 1px var(--borda-viva);
}
.btn--vidro:hover{background:rgba(255,255,255,.13);filter:none}

/* --------------------------------------------------- 4. Cabeçalho ------- */
.cabecalho{
  position:fixed;inset:0 0 auto;z-index:90;
  transition:background .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.cabecalho.solido{
  background:rgba(0,0,0,.84);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--borda);
}
.cabecalho.solido::after{ /* filete vermelho de luz sob o cabeçalho */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--vermelho) 30%,var(--vermelho) 70%,transparent);opacity:.55;
}
.cabecalho__linha{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px}
.marca{flex:none}
.marca img{height:34px;width:auto;transition:transform .4s var(--ease)}
.marca:hover img{transform:scale(1.04)}

.menu{display:flex;align-items:center;gap:2px}
.menu a{
  position:relative;padding:10px 14px;
  font-family:var(--display);font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-media);white-space:nowrap;
  transition:color .25s var(--ease);
}
.menu a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;
  background:var(--vermelho);transform:scaleX(0) skewX(-30deg);transform-origin:left;
  transition:transform .35s var(--ease);
}
.menu a:hover,.menu a.ativo{color:var(--tinta)}
.menu a:hover::after,.menu a.ativo::after{transform:scaleX(1) skewX(-30deg)}

.hamburguer{
  display:none;width:44px;height:44px;flex:none;
  background:rgba(255,255,255,.05);border:1px solid var(--borda-viva);
  border-radius:var(--raio);cursor:pointer;position:relative;
}
.hamburguer span{
  position:absolute;left:12px;width:20px;height:2px;background:var(--tinta);
  transition:transform .35s var(--ease),opacity .2s var(--ease);
}
.hamburguer span:nth-child(1){top:14px}
.hamburguer span:nth-child(2){top:20px;left:15px;width:17px;background:var(--vermelho)}
.hamburguer span:nth-child(3){top:26px}
.hamburguer[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburguer[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguer[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ------------------------------------------------------- 5. Hero -------- */
.hero{
  position:relative;min-height:min(100svh,900px);display:flex;align-items:center;
  overflow:hidden;isolation:isolate;background:var(--preto);
}
/* carro à direita, fundindo no preto */
.hero__carro{position:absolute;top:0;right:0;bottom:0;width:66%;z-index:-3}
.hero__carro img{
  width:100%;height:100%;object-fit:cover;object-position:28% 50%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 38%);
  animation:acende 2.4s var(--ease) both;
}
@keyframes acende{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}

/* chapa perfurada (a mesma textura do manual) */
.hero__malha{
  position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle,rgba(255,255,255,.09) 1.3px,transparent 1.8px);
  background-size:9px 9px;
  -webkit-mask-image:radial-gradient(ellipse 45% 55% at 0% 0%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 45% 55% at 0% 0%,#000,transparent 75%);
}
/* feixe de luz vermelha diagonal */
.hero__feixe{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 42%,#000 72%);mask-image:linear-gradient(90deg,transparent 42%,#000 72%);
}
.hero__feixe::before,.hero__feixe::after{
  content:"";position:absolute;height:2px;width:130%;left:-40%;
  background:linear-gradient(90deg,transparent,var(--vermelho) 40%,#ff6b6b 50%,var(--vermelho) 60%,transparent);
  box-shadow:0 0 18px 2px rgba(225,6,6,.55);
  transform:rotate(-38deg);transform-origin:center;
}
.hero__feixe::before{top:72%;opacity:.8;animation:varre 7s var(--ease) infinite}
.hero__feixe::after{top:96%;opacity:.35;height:1px;animation:varre 7s var(--ease) 1.2s infinite}
@keyframes varre{0%,100%{filter:brightness(.7)}50%{filter:brightness(1.35)}}

.hero__conteudo{position:relative;padding-block:clamp(120px,16vh,170px) clamp(56px,8vh,90px)}
.hero__local{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px 8px 13px;
  border-left:2px solid var(--vermelho);background:linear-gradient(90deg,rgba(225,6,6,.14),transparent);
  font-family:var(--display);font-size:11px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-media);
  margin-bottom:26px;
}
.hero__local .ponto{
  width:7px;height:7px;border-radius:50%;background:var(--vermelho);
  box-shadow:0 0 0 0 rgba(225,6,6,.7);animation:pulso 2.6s infinite;
}
@keyframes pulso{70%{box-shadow:0 0 0 11px rgba(225,6,6,0)}100%{box-shadow:0 0 0 0 rgba(225,6,6,0)}}

.hero h1{
  font-size:clamp(2.4rem,6.6vw,5.2rem);font-weight:900;font-style:italic;
  text-transform:uppercase;letter-spacing:-.03em;line-height:.93;
  max-width:11ch;
}
.hero h1 .cromo{filter:drop-shadow(0 4px 18px rgba(0,0,0,.7))}
.hero h1 em{filter:drop-shadow(0 0 26px rgba(225,6,6,.35))}

.hero__sub{font-size:clamp(1rem,1.7vw,1.1rem);font-weight:300;color:var(--tinta-media);max-width:50ch;margin-top:26px}
.hero__acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

.hero__rodape{
  display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,52px);
  margin-top:clamp(36px,5vh,56px);
}
.hero__stat{display:flex;flex-direction:column;gap:4px;padding-left:16px;border-left:1px solid var(--borda-viva)}
.hero__stat b{
  font-family:var(--display);font-size:clamp(1.7rem,3.3vw,2.3rem);font-weight:900;font-style:italic;line-height:1;
  background:var(--grad-cromo-alto);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__stat b i{font-size:.6em;background:var(--grad-fogo);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__stat small{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-fraca);font-weight:500}

/* ------------------------------------------------ 6. Faixa rolante ------ */
.faixa{
  background:var(--vermelho);overflow:hidden;position:relative;
  transform:skewY(-1.2deg);margin-block:-10px 0;z-index:2;
  box-shadow:0 0 40px rgba(225,6,6,.35);
}
.faixa__trilho{display:flex;align-items:center;gap:26px;width:max-content;padding-block:15px;animation:rola 38s linear infinite}
.faixa span{
  font-family:var(--display);font-size:13px;font-weight:800;font-style:italic;
  letter-spacing:.2em;text-transform:uppercase;color:#fff;white-space:nowrap;
}
.faixa i{width:22px;height:8px;flex:none;background:#000;transform:skewX(-30deg)}
@keyframes rola{to{transform:translateX(-50%)}}

/* ----------------------------------------------------- 7. Pilares ------- */
.pilares{background:var(--carvao);border-bottom:1px solid var(--borda)}
.pilares__grade{display:grid;grid-template-columns:repeat(4,1fr);padding-block:clamp(44px,5.5vw,64px)}
.pilar{display:flex;gap:16px;align-items:flex-start;padding-inline:clamp(12px,2vw,26px);border-left:1px solid var(--borda)}
.pilar:first-child{border-left:0;padding-left:0}
.pilar__ico{
  width:50px;height:50px;flex:none;display:grid;place-items:center;color:var(--vermelho);
  background:linear-gradient(160deg,var(--elevado),var(--preto));
  border:1px solid var(--borda-viva);
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
.pilar__ico svg{width:25px;height:25px}
.pilar b{display:block;font-family:var(--display);font-size:13.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.25}
.pilar span:not(.pilar__ico){display:block;margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--tinta-fraca)}

/* --------------------------------------------------- 8. Serviços -------- */
.servicos__grade{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.servico{
  position:relative;padding:34px 30px 30px;
  background:linear-gradient(165deg,var(--elevado),var(--carvao) 70%);
  border:1px solid var(--borda);overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;
  clip-path:polygon(0 0,calc(100% - var(--corte)) 0,100% var(--corte),100% 100%,var(--corte) 100%,0 calc(100% - var(--corte)));
  transition:transform .45s var(--ease),background .45s var(--ease);
}
.servico::before{ /* filete que acende em vermelho */
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--grad-cromo);opacity:.35;transition:opacity .45s var(--ease),background .45s var(--ease);
}
.servico::after{ /* brilho vermelho */
  content:"";position:absolute;right:-30%;bottom:-40%;width:80%;height:80%;z-index:-1;
  background:radial-gradient(closest-side,var(--vermelho-veu),transparent);
  opacity:0;transition:opacity .5s var(--ease);
}
.servico:hover{transform:translateY(-5px);background:linear-gradient(165deg,#222,var(--carvao) 70%)}
.servico:hover::before{background:var(--vermelho);opacity:1}
.servico:hover::after{opacity:1}
.servico__num{
  position:absolute;top:14px;right:30px;
  font-family:var(--display);font-size:3.4rem;font-weight:900;font-style:italic;line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--borda-viva);
  transition:-webkit-text-stroke-color .45s var(--ease);
}
.servico:hover .servico__num{-webkit-text-stroke-color:rgba(225,6,6,.6)}
.servico__tag{
  font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--vermelho-alto);margin-bottom:16px;
}
.servico h3{font-size:1.28rem;font-weight:800;font-style:italic;text-transform:uppercase;margin-bottom:12px;max-width:15ch}
.servico p{color:var(--tinta-media);font-size:15px;font-weight:300;line-height:1.65}
.servico__link{
  display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:22px;align-self:flex-start;
  font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta);transition:gap .3s var(--ease),color .3s var(--ease);
}
.servico__link svg{width:14px;height:14px;color:var(--vermelho)}
.servico__link:hover{gap:13px;color:var(--vermelho-alto)}

/* bloco de destaque */
.destaque{
  margin-top:14px;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;
  border:1px solid var(--borda);position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 60% 90% at 85% 50%,rgba(225,6,6,.18),transparent 70%),
    linear-gradient(120deg,var(--elevado),var(--preto));
}
.destaque::before{ /* diagonal vermelha, como no manual */
  content:"";position:absolute;top:-20%;bottom:-20%;left:58%;width:2px;
  background:linear-gradient(180deg,transparent,var(--vermelho),transparent);
  box-shadow:0 0 16px rgba(225,6,6,.7);transform:rotate(24deg);
}
.destaque__texto{padding:clamp(32px,4.6vw,56px);position:relative}
.destaque__texto h3{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:900;font-style:italic;text-transform:uppercase;margin-bottom:16px}
.destaque__texto p{color:var(--tinta-media);font-weight:300;max-width:52ch}
.destaque__lista{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.destaque__lista li{
  padding:7px 14px;border:1px solid var(--borda-viva);background:rgba(255,255,255,.03);
  font-size:12.5px;color:var(--tinta-media);
}
.destaque__marca{display:grid;place-items:center;padding:30px;position:relative}
.destaque__marca img{width:min(100%,330px);filter:drop-shadow(0 20px 40px rgba(0,0,0,.8)) drop-shadow(0 0 30px rgba(225,6,6,.25));animation:flutua 6s ease-in-out infinite}
@keyframes flutua{50%{transform:translateY(-10px)}}

/* ------------------------------------------------ 8b. GWM 0 km ------- */
.zerokm{overflow:hidden;isolation:isolate;border-top:1px solid var(--borda)}
.zerokm::before{ /* brilho vermelho atrás da foto + chapa perfurada */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 40% 60% at 22% 50%,rgba(225,6,6,.2),transparent 70%),
    radial-gradient(circle,rgba(255,255,255,.07) 1.2px,transparent 1.7px) 0 0/9px 9px;
  -webkit-mask-image:linear-gradient(90deg,#000 30%,transparent 70%);mask-image:linear-gradient(90deg,#000 30%,transparent 70%);
}
.zerokm__grade{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,80px);align-items:center}
.zerokm__foto{position:relative;max-width:480px;width:100%;justify-self:center}
.zerokm__foto img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 62%;
  clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,34px 100%,0 calc(100% - 34px));
}
.zerokm__foto figcaption{
  position:absolute;left:-14px;bottom:28px;display:flex;align-items:center;gap:12px;
  padding:10px 20px 10px 10px;background:rgba(0,0,0,.88);border-left:3px solid var(--vermelho);
  font-family:var(--display);font-size:11.5px;font-weight:800;font-style:italic;letter-spacing:.12em;text-transform:uppercase;
}
.zerokm__selo{
  padding:6px 12px;background:var(--grad-fogo);color:#fff;font-size:13px;letter-spacing:.06em;
  clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);
}
.modelos{margin-top:30px;display:flex;flex-direction:column;gap:10px}
.modelo{
  display:flex;align-items:center;gap:18px;padding:16px 22px;
  background:linear-gradient(90deg,var(--elevado),var(--carvao));
  border:1px solid var(--borda);border-left:3px solid var(--borda-viva);
  transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease);
}
.modelo:hover{border-color:var(--borda-viva);border-left-color:var(--vermelho);transform:translateX(4px);background:linear-gradient(90deg,#221313,var(--carvao))}
.modelo__nome{flex:1;display:flex;flex-direction:column;gap:2px}
.modelo__nome small{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-fraca)}
.modelo__nome b{
  font-family:var(--display);font-size:clamp(1.15rem,2vw,1.4rem);font-weight:900;font-style:italic;text-transform:uppercase;line-height:1.1;
  background:var(--grad-cromo-alto);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em;
}
.modelo__status{
  padding:6px 12px;border:1px solid var(--borda-viva);white-space:nowrap;
  font-family:var(--display);font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-media);
}
.modelo__status--estoque{background:var(--vermelho);border-color:var(--vermelho);color:#fff}
.modelo>svg{width:18px;height:18px;color:var(--vermelho);transition:transform .3s var(--ease)}
.modelo:hover>svg{transform:translateX(4px)}

/* ---------------------------------------------------- 9. Estoque ------- */
.categorias{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.categoria{
  position:relative;display:flex;flex-direction:column;gap:10px;
  padding:30px 26px 26px;min-height:250px;
  background:linear-gradient(170deg,var(--elevado),var(--preto));
  border:1px solid var(--borda);overflow:hidden;isolation:isolate;
  transition:transform .45s var(--ease),border-color .45s var(--ease);
}
.categoria::after{ /* varredura de luz ao passar o mouse */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 30%,rgba(225,6,6,.22) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .8s var(--ease);
}
.categoria:hover{transform:translateY(-5px);border-color:var(--vermelho)}
.categoria:hover::after{transform:translateX(100%)}
.categoria__num{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.24em;color:var(--tinta-fraca)}
.categoria b{
  font-family:var(--display);font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:900;font-style:italic;
  text-transform:uppercase;line-height:1;margin-top:34px;
  background:var(--grad-cromo-alto);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.categoria > span:not(.categoria__num){font-size:14px;font-weight:300;color:var(--tinta-media);line-height:1.55}
.categoria em{
  display:inline-flex;align-items:center;gap:8px;font-style:normal;margin-top:auto;padding-top:8px;
  font-family:var(--display);font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--vermelho-alto);
  transition:gap .3s var(--ease);
}
.categoria em svg{width:14px;height:14px}
.categoria:hover em{gap:13px}

.insta{
  margin-top:14px;display:flex;align-items:center;gap:20px;padding:22px 26px;
  border:1px solid var(--borda);background:linear-gradient(90deg,rgba(225,6,6,.12),transparent 60%);
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.insta:hover{border-color:var(--vermelho);background:linear-gradient(90deg,rgba(225,6,6,.22),transparent 70%)}
.insta__ico{width:50px;height:50px;flex:none;display:grid;place-items:center;background:var(--grad-fogo);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.insta__ico svg{width:24px;height:24px;color:#fff}
.insta__texto{flex:1}
.insta__texto b{display:block;font-family:var(--display);font-size:15px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.insta__texto span{font-size:14px;color:var(--tinta-fraca)}
.insta__seta svg{width:22px;height:22px;color:var(--vermelho);transition:transform .3s var(--ease)}
.insta:hover .insta__seta svg{transform:translateX(5px)}

/* ---------------------------------------------- 9b. Showroom --------- */
.galeria{overflow:hidden;isolation:isolate}
.galeria::before{ /* chapa perfurada + brilho vermelho no canto */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 40% 45% at 100% 0%,rgba(225,6,6,.16),transparent 70%),
    radial-gradient(circle,rgba(255,255,255,.07) 1.2px,transparent 1.7px) 0 0/9px 9px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 55%);mask-image:linear-gradient(180deg,#000,transparent 55%);
}
.mosaico{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;grid-auto-rows:205px;grid-auto-flow:row dense}
.tile{
  position:relative;overflow:hidden;cursor:pointer;margin:0;
  background:var(--elevado);
  clip-path:polygon(0 0,calc(100% - var(--corte)) 0,100% var(--corte),100% 100%,var(--corte) 100%,0 calc(100% - var(--corte)));
  transition:transform .5s var(--ease);
}
.tile img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) contrast(1.06) brightness(.84);
  transition:transform .8s var(--ease),filter .5s var(--ease);
}
.tile::before{ /* filete que acende em vermelho, como nos cartões de serviço */
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;z-index:2;
  background:var(--vermelho);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease);
}
.tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.88));
  opacity:.75;transition:opacity .4s var(--ease);
}
.tile figcaption{
  position:absolute;left:20px;right:20px;bottom:16px;z-index:2;
  font-family:var(--display);font-size:11.5px;font-weight:800;font-style:italic;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta);line-height:1.35;
  transform:translateY(6px);opacity:0;transition:transform .45s var(--ease),opacity .45s var(--ease);
}
.tile:hover,.tile:focus-visible{transform:translateY(-3px)}
.tile:hover img,.tile:focus-visible img{transform:scale(1.06);filter:saturate(1) contrast(1.05) brightness(1)}
.tile:hover::before,.tile:focus-visible::before{transform:scaleY(1)}
.tile:hover::after{opacity:.95}
.tile:hover figcaption,.tile:focus-visible figcaption{transform:none;opacity:1}
.tile:focus-visible{outline:none}
.tile .lupa{
  position:absolute;top:14px;right:24px;z-index:2;width:36px;height:34px;
  display:grid;place-items:center;background:var(--vermelho);
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
  opacity:0;transform:translateY(-6px);transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.tile:hover .lupa,.tile:focus-visible .lupa{opacity:1;transform:none}
.tile .lupa svg{width:15px;height:15px;stroke:#fff}
.t-2x2{grid-column:span 2;grid-row:span 2}
.t-2x1{grid-column:span 2}
.t-1x2{grid-row:span 2}

/* ------------------------------------------------- 10. Processo --------- */
.processo__grade{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.processo__grade::before{
  content:"";position:absolute;top:28px;left:0;right:8%;height:1px;
  background:linear-gradient(90deg,var(--vermelho),var(--borda-viva) 30%,var(--borda-viva) 80%,transparent);
}
.passo{padding-right:clamp(14px,2.4vw,30px);position:relative}
.passo__no{
  width:74px;height:56px;display:grid;place-items:center;position:relative;z-index:2;
  background:var(--carvao);
  clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);
  font-family:var(--display);font-size:19px;font-weight:900;font-style:italic;color:var(--tinta-fraca);
  box-shadow:inset 0 0 0 1px var(--borda-viva);
  transition:background .4s var(--ease),color .4s var(--ease);
}
.passo:hover .passo__no{background:var(--vermelho);color:#fff}
.passo h3{font-size:1.15rem;font-weight:800;font-style:italic;text-transform:uppercase;margin:24px 0 10px}
.passo p{color:var(--tinta-media);font-size:15px;font-weight:300;line-height:1.62}

/* ------------------------------------------------- 11. Cotação ---------- */
.cotacao{background:var(--carvao);overflow:hidden;border-block:1px solid var(--borda)}
.cotacao::before{
  content:"";position:absolute;top:-25%;right:-15%;width:60%;height:150%;
  background:radial-gradient(closest-side,rgba(225,6,6,.12),transparent);pointer-events:none;
}
.cotacao__grade{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,80px);align-items:start;position:relative}
.cotacao__lado p{color:var(--tinta-media);font-weight:300}
.cotacao__vias{margin-top:30px;display:flex;flex-direction:column;gap:10px}
.via{
  display:flex;align-items:center;gap:15px;padding:14px 18px;
  border:1px solid var(--borda);border-left:2px solid var(--borda-viva);background:rgba(255,255,255,.02);
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
.via:hover{border-color:var(--borda-viva);border-left-color:var(--vermelho);background:rgba(225,6,6,.06);transform:translateX(4px)}
.via__ico{width:40px;height:40px;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.05);color:var(--vermelho)}
.via__ico--zap{color:#25D366}
.via__ico svg{width:19px;height:19px}
.via b{display:block;font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.via span{font-size:13.5px;color:var(--tinta-fraca)}

.form{
  background:linear-gradient(165deg,var(--elevado),var(--superficie));
  border:1px solid var(--borda);border-top:3px solid var(--vermelho);
  padding:clamp(24px,3.6vw,40px);box-shadow:var(--sombra-alta);
}
.form__grade{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.campo{display:flex;flex-direction:column;gap:8px}
.campo--largo{grid-column:1/-1}
.campo label{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-fraca)}
.campo input,.campo select,.campo textarea{
  width:100%;padding:14px 15px;border-radius:4px;
  background:rgba(0,0,0,.45);border:1px solid var(--borda-viva);
  color:var(--tinta);font-size:15px;font-family:var(--corpo);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.campo textarea{resize:vertical;min-height:92px;line-height:1.55}
.campo input::placeholder,.campo textarea::placeholder{color:#5B5B5B}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--vermelho);box-shadow:0 0 0 3px rgba(225,6,6,.16)}
.campo select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E10606' stroke-width='2.6' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:42px;
}
.campo select option{background:var(--elevado);color:var(--tinta)}
.campo.erro input,.campo.erro select{border-color:#FF5A4A;box-shadow:0 0 0 3px rgba(255,90,74,.15)}
.campo__erro{font-size:12.5px;color:#FF8A7D;display:none}
.campo.erro .campo__erro{display:block}
.form .btn{width:100%;margin-top:24px;padding-block:19px}
.form__nota{margin-top:15px;font-size:12.8px;color:var(--tinta-fraca);text-align:center;line-height:1.5}

/* --------------------------------------------------- 12. Sobre ---------- */
.sobre__grade{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5.5vw,72px);align-items:center}
/* a seção inteira recebe a chapa perfurada e os feixes do manual */
#sobre{overflow:hidden;isolation:isolate;background:var(--preto)}
#sobre::before{ /* chapa perfurada + brilho vermelho atrás do logo */
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(ellipse 38% 55% at 27% 50%,rgba(225,6,6,.22),transparent 70%),
    radial-gradient(circle,rgba(255,255,255,.075) 1.2px,transparent 1.7px) 0 0/9px 9px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 45%,rgba(0,0,0,.35) 75%,rgba(0,0,0,.15) 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 45%,rgba(0,0,0,.35) 75%,rgba(0,0,0,.15) 100%);
}
.sobre__luz{position:absolute;inset:0;z-index:-1;pointer-events:none}
.sobre__luz::before,.sobre__luz::after{ /* feixes vermelhos na diagonal */
  content:"";position:absolute;left:-20%;width:140%;height:2px;
  background:linear-gradient(90deg,transparent 0%,var(--vermelho) 18%,#ff5a5a 30%,var(--vermelho) 40%,transparent 56%);
  box-shadow:0 0 18px 1px rgba(225,6,6,.6);transform:rotate(-24deg);
}
.sobre__luz::before{top:28%;animation:varre 7s var(--ease) infinite}
.sobre__luz::after{top:88%;opacity:.45;height:1px;animation:varre 7s var(--ease) 1.4s infinite}
/* moldura escura sob o texto, para os feixes não brigarem com a leitura */
.sobre__grade>div:last-child{position:relative}
.sobre__grade>div:last-child::before{
  content:"";position:absolute;inset:-40px -60px;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.85) 40%,transparent 75%);
}
.sobre__foto{position:relative;max-width:520px;width:100%;justify-self:center;padding-bottom:28px}
.sobre__foto img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 78%;
  clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,34px 100%,0 calc(100% - 34px));
  filter:contrast(1.04);
}
.sobre__foto::before{ /* filete vermelho deslocado atrás da foto */
  content:"";position:absolute;top:18px;left:-18px;right:18px;bottom:46px;z-index:-1;
  border:1px solid rgba(225,6,6,.55);
  clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,34px 100%,0 calc(100% - 34px));
}
.sobre__selo{
  position:absolute;right:-14px;bottom:0;z-index:2;display:flex;align-items:center;gap:12px;
  padding:14px 22px 14px 30px;background:var(--vermelho);
  clip-path:polygon(16px 0,100% 0,100% 100%,0 100%);
}
.sobre__selo b{font-family:var(--display);font-size:2.2rem;font-weight:900;font-style:italic;line-height:1;color:#fff}
.sobre__selo span{font-size:10.5px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:600}
.sobre__marcos{margin-top:30px}
.marco{display:flex;gap:20px;padding:17px 0;border-top:1px solid var(--borda)}
.marco:last-child{border-bottom:1px solid var(--borda)}
.marco b{font-family:var(--display);font-size:13px;font-weight:900;font-style:italic;letter-spacing:.1em;color:var(--vermelho-alto);flex:none;width:74px;padding-top:2px;text-transform:uppercase}
.marco p{font-size:15px;font-weight:300;color:var(--tinta-media)}

/* --------------------------------------------------- 13. FAQ ----------- */
.faq{max-width:880px;margin-inline:auto}
.pergunta{border-bottom:1px solid var(--borda)}
.pergunta:first-child{border-top:1px solid var(--borda)}
.pergunta__botao{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:24px 4px;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--display);font-size:clamp(1rem,2vw,1.12rem);font-weight:700;color:var(--tinta);
  transition:color .3s var(--ease);
}
.pergunta__botao:hover{color:var(--vermelho-alto)}
.pergunta__mais{
  width:34px;height:34px;flex:none;position:relative;background:rgba(255,255,255,.04);
  clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);
  transition:background .35s var(--ease);
}
.pergunta__mais::before,.pergunta__mais::after{
  content:"";position:absolute;top:50%;left:50%;width:12px;height:2px;
  background:var(--tinta-media);transform:translate(-50%,-50%);
  transition:transform .45s var(--ease),background .35s var(--ease);
}
.pergunta__mais::after{transform:translate(-50%,-50%) rotate(90deg)}
.pergunta[aberta] .pergunta__mais{background:var(--vermelho)}
.pergunta[aberta] .pergunta__mais::before,.pergunta[aberta] .pergunta__mais::after{background:#fff}
.pergunta[aberta] .pergunta__mais::after{transform:translate(-50%,-50%) rotate(0)}
.pergunta__corpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.pergunta[aberta] .pergunta__corpo{grid-template-rows:1fr}
.pergunta__corpo>div{overflow:hidden}
.pergunta__corpo p{padding:0 44px 26px 4px;color:var(--tinta-media);font-size:15.2px;font-weight:300}

/* ------------------------------------------- 13b. Visite a loja ------ */
.visite{border-top:1px solid var(--borda)}
.visite__grade{display:flex;justify-content:center}
.visite__info{max-width:780px;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center}
.nota-google{
  display:inline-flex;align-items:center;gap:16px;margin-top:28px;padding:16px 22px 16px 18px;
  background:linear-gradient(90deg,var(--elevado),var(--carvao));border:1px solid var(--borda);border-left:3px solid var(--vermelho);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.nota-google:hover{border-color:var(--borda-viva);border-left-color:var(--vermelho);transform:translateY(-2px)}
.nota-google__g{width:30px;height:30px}
.nota-google__num{font-family:var(--display);font-size:2.3rem;font-weight:900;font-style:italic;line-height:1;
  background:var(--grad-cromo-alto);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.nota-google__lado{display:flex;flex-direction:column;gap:4px}
.nota-google__estrelas{display:flex;gap:3px;color:#FBBC05}
.nota-google__estrelas svg{width:17px;height:17px}
.nota-google small{font-size:12.5px;color:var(--tinta-fraca);letter-spacing:.02em}
.visite__dados{margin-top:26px;display:flex;flex-direction:column;width:100%;max-width:620px}
.visite__dados li{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 0;border-top:1px solid var(--borda)}
.visite__dados li:last-child{border-bottom:1px solid var(--borda)}
.visite__dados svg{width:20px;height:20px;color:var(--vermelho)}
.visite__dados b{display:block;font-family:var(--display);font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta);margin-bottom:3px}
.visite__dados span{font-size:15px;font-weight:300;color:var(--tinta-media);line-height:1.6}
.visite__acoes{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}

/* --------------------------------------------- 14. Fechamento ---------- */
.fechamento{position:relative;overflow:hidden;isolation:isolate;text-align:center;padding-block:clamp(90px,12vw,150px)}
.fechamento__fundo{position:absolute;inset:0;z-index:-2}
.fechamento__fundo img{width:100%;height:100%;object-fit:cover;object-position:40% 55%}
.fechamento::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--preto) 0%,rgba(0,0,0,.72) 40%,rgba(0,0,0,.88) 100%);
}
.fechamento h2{font-size:clamp(2.1rem,6vw,4.3rem);font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.03em;line-height:.95}
.fechamento p{margin:24px auto 0;max-width:54ch;color:var(--tinta-media);font-weight:300;font-size:clamp(1rem,2vw,1.12rem)}
.fechamento__acoes{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:38px}

/* --------------------------------------------------- 15. Rodapé -------- */
.rodape{background:var(--carvao);border-top:1px solid var(--borda);padding-block:clamp(52px,7vw,76px) 0;position:relative}
.rodape::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:linear-gradient(90deg,transparent,var(--vermelho),transparent);
}
.rodape__grade{display:grid;grid-template-columns:1.3fr .8fr 1fr 1.4fr;gap:clamp(28px,4vw,48px)}
.rodape__marca img{height:40px;width:auto;margin-bottom:20px}
.rodape__marca p{color:var(--tinta-fraca);font-size:14.4px;font-weight:300;max-width:34ch}
.rodape h4{font-family:var(--display);font-size:11.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--tinta);margin-bottom:18px}
.rodape li{margin-bottom:11px}
.rodape li a,.rodape li span{color:var(--tinta-fraca);font-size:14.5px;transition:color .25s var(--ease)}
.rodape li a:hover{color:var(--vermelho-alto)}
.rodape__contato li{display:flex;gap:11px;align-items:flex-start;overflow-wrap:anywhere}
.rodape__contato svg{width:16px;height:16px;margin-top:4px;color:var(--vermelho)}
.rodape__social{display:flex;gap:9px;margin-top:20px}
.rodape__social a{
  width:44px;height:42px;display:grid;place-items:center;color:var(--tinta-media);
  background:rgba(255,255,255,.05);
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.rodape__social a:hover{background:var(--vermelho);color:#fff}
.rodape__social svg{width:18px;height:18px}
.rodape__base{
  margin-top:clamp(38px,5vw,58px);padding-block:24px;border-top:1px solid var(--borda);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  font-size:13.2px;color:var(--tinta-fraca);
}
.rodape__base a{color:var(--tinta-media)}
.rodape__base a:hover{color:var(--vermelho-alto)}

/* --------------------------------------- 16. WhatsApp flutuante -------- */
.zap{
  position:fixed;right:clamp(16px,3vw,26px);bottom:clamp(16px,3vw,26px);z-index:80;
  display:flex;align-items:center;gap:11px;padding:13px 20px 13px 15px;
  border-radius:999px;background:#1FAF54;color:#fff;
  font-family:var(--display);font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  box-shadow:0 14px 34px rgba(31,175,84,.36);
  transform:translateY(120px);opacity:0;
  transition:transform .55s var(--ease),opacity .45s var(--ease),box-shadow .3s var(--ease);
}
.zap.vis{transform:translateY(0);opacity:1}
.zap:hover{box-shadow:0 20px 44px rgba(31,175,84,.5)}
.zap svg{width:22px;height:22px}
.zap::before{
  content:"";position:absolute;inset:0;border-radius:999px;border:2px solid rgba(31,175,84,.55);
  animation:onda 2.6s var(--ease) infinite;
}
@keyframes onda{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.28);opacity:0}}

/* ----------------------------------------- 16b. Fotos ampliadas ------- */
.lightbox{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(0,0,0,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:clamp(16px,4vw,52px);
  opacity:0;animation:entra .3s var(--ease) forwards;
}
@keyframes entra{to{opacity:1}}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:min(1180px,94vw);text-align:center}
.lightbox img{max-height:80vh;width:auto;margin-inline:auto;box-shadow:0 40px 90px rgba(0,0,0,.8);border-bottom:3px solid var(--vermelho)}
.lightbox figcaption{
  margin-top:18px;font-family:var(--display);font-size:12px;font-weight:800;font-style:italic;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta);
}
.lightbox__contador{display:block;margin-top:7px;font-size:11px;letter-spacing:.16em;color:var(--tinta-fraca)}
.lb-btn{
  position:absolute;display:grid;place-items:center;cursor:pointer;
  width:56px;height:50px;border:0;
  background:rgba(255,255,255,.08);color:var(--tinta);
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.lb-btn:hover{background:var(--vermelho);transform:scale(1.05)}
.lb-btn svg{width:22px;height:22px}
.lb-fechar{top:clamp(16px,3vw,30px);right:clamp(16px,3vw,30px)}
.lb-ant{left:clamp(10px,2.5vw,32px)}
.lb-prox{right:clamp(10px,2.5vw,32px)}

/* ------------------------------------------- 17. Revelação scroll ------ */
.rev{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rev.vis{opacity:1;transform:none}
.rev-d1{transition-delay:.08s}
.rev-d2{transition-delay:.16s}
.rev-d3{transition-delay:.24s}
.servico.rev.vis:hover,.categoria.rev.vis:hover{transform:translateY(-5px)}
.tile.rev.vis:hover,.tile.rev.vis:focus-visible{transform:translateY(-3px)}

/* --------------------------------------------- 18. Responsivo ---------- */
@media (max-width:1080px){
  .servicos__grade{grid-template-columns:repeat(2,1fr)}
  .categorias{grid-template-columns:repeat(2,1fr)}
  .processo__grade{grid-template-columns:repeat(2,1fr);gap:40px 0}
  .processo__grade::before{display:none}
  .pilares__grade{grid-template-columns:repeat(2,1fr);gap:30px 0}
  .pilar:nth-child(3){border-left:0;padding-left:0}
  .rodape__grade{grid-template-columns:1fr 1fr}
  .rodape__marca{grid-column:1/-1}
  .mosaico{grid-auto-rows:170px}
}
@media (max-width:900px){
  .cotacao__grade,.sobre__grade{grid-template-columns:1fr}
  .destaque{grid-template-columns:1fr}
  .destaque::before{display:none}
  .destaque__marca{order:-1;padding:36px 30px 0}
  .destaque__marca img{width:min(60%,240px)}
  .sobre__foto{max-width:440px}
  .zerokm__grade{grid-template-columns:1fr}
  .zerokm__foto{max-width:420px}
}
@media (max-width:1480px){
  .cabecalho__linha{gap:14px}
  .menu a{padding-inline:7px;font-size:11.5px;letter-spacing:.05em}
  .menu a::after{left:7px;right:7px}
}
@media (max-width:1300px){
  .menu{
    position:fixed;inset:74px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--preto);border-bottom:2px solid var(--vermelho);padding:8px var(--gutter) 20px;
    box-shadow:0 26px 50px rgba(0,0,0,.7);
    transform:translateY(-120%);transition:transform .45s var(--ease);
    max-height:calc(100svh - 74px);overflow-y:auto;
  }
  .menu.aberto{transform:translateY(0)}
  .menu a{padding:16px 4px;font-size:13.5px;border-bottom:1px solid var(--borda)}
  .menu a::after{display:none}
  .menu a.ativo{color:var(--vermelho-alto)}
  .hamburguer{display:block}
  .cabecalho .btn{display:none}
}
@media (max-width:820px){
  .cabecalho{background:rgba(0,0,0,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .marca img{height:28px}

  /* hero em coluna: carro no topo */
  .hero{align-items:flex-end;min-height:auto}
  .hero__carro{width:100%;height:58vh;bottom:auto}
  .hero__carro img{
    object-position:30% 50%;
    -webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 45%,transparent 100%);
  }
  .hero__conteudo{padding-top:calc(58vh - 90px)}
  .hero__feixe::before{top:48%}
  .form__grade{grid-template-columns:1fr}
}
@media (max-width:620px){
  body{font-size:16px}
  .hero h1{font-size:clamp(2.1rem,10.5vw,2.9rem)}
  .titulo{font-size:clamp(1.75rem,8vw,2.4rem)}
  .fechamento h2{font-size:clamp(1.9rem,9vw,2.6rem)}
  .servicos__grade,.categorias{grid-template-columns:1fr}
  .categoria{min-height:0}
  .categoria b{margin-top:14px}
  .pilares__grade{grid-template-columns:1fr;gap:24px}
  .pilar{border-left:0;padding-left:0}
  .processo__grade{grid-template-columns:1fr}
  .hero__rodape{gap:20px}
  .hero__stat{padding-left:12px}
  .rodape__grade{grid-template-columns:1fr}
  .insta{padding:18px;gap:14px}
  .insta__seta{display:none}
  .zap span{display:none}
  .zap{padding:15px;border-radius:50%}
  .mosaico{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:8px}
  .tile{--corte:12px}
  .tile figcaption{left:14px;right:14px;bottom:12px;font-size:10px;opacity:1;transform:none}
  .tile .lupa{display:none}
  .lb-ant,.lb-prox{top:auto;bottom:18px}
  .lb-ant{left:calc(50% - 66px)}
  .lb-prox{right:calc(50% - 66px)}
  .lightbox img{max-height:72vh}
  .sobre__selo{right:0}
  .zerokm__foto figcaption{left:0;font-size:10.5px}
  .modelo{padding:14px 16px;gap:12px}
  .modelo>svg{display:none}
  .sobre__foto::before{left:-10px;right:10px}
}

/* -------------------------------------------- 19. Preferências --------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rev{opacity:1;transform:none}
}
@media print{
  .cabecalho,.zap,.faixa{display:none!important}
  body{background:#fff;color:#000}
}