/* ============================================================
   Garagem 41 — estética automotiva de bairro, Curitiba
   Paleta tirada das fotos: oficina escura, réguas de LED âmbar,
   piso molhado refletindo a luz.
   ============================================================ */

@font-face{
  font-family:"Bricolage Grotesque";
  src:url("fontes/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Work Sans";
  src:url("fontes/work-sans-latin-wght-normal.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --noite:#0F1114;
  --painel:#161A20;
  --concreto:#262B33;
  --lampada:#F2A63B;
  --lampada-clara:#FFD9A0;
  --poeira:#EDEAE4;
  --fumaca:#9AA1AA;
  --claro:#E9E6E0;
  --claro-tinta:#15181C;
  --claro-suave:#5C6169;
  --largura:1160px;
  --raio:16px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--noite);
  color:var(--poeira);
  font-family:"Work Sans",system-ui,-apple-system,sans-serif;
  font-weight:380;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit}

h1,h2,h3{
  font-family:"Bricolage Grotesque","Work Sans",sans-serif;
  font-weight:750;
  letter-spacing:-0.022em;
  line-height:1.02;
  margin:0;
  text-wrap:balance;
}

p{margin:0}
ul,ol,figure{margin:0;padding:0;list-style:none}

.faixa{
  width:100%;
  max-width:var(--largura);
  margin:0 auto;
  padding:0 28px;
}

:focus-visible{
  outline:2px solid var(--lampada);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- botões ---------- */

.botao{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-family:"Work Sans",sans-serif;
  font-weight:600;
  font-size:.95rem;
  letter-spacing:-0.005em;
  text-decoration:none;
  padding:.72em 1.25em;
  border-radius:999px;
  border:1px solid transparent;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  white-space:nowrap;
}

.botao-zap{
  background:var(--lampada);
  color:#1A1206;
  box-shadow:0 10px 26px -14px rgba(242,166,59,.9);
}
.botao-zap:hover{background:var(--lampada-clara);transform:translateY(-2px)}

.botao-vazio{
  color:var(--poeira);
  border-color:rgba(237,234,228,.32);
  background:rgba(15,17,20,.28);
  backdrop-filter:blur(6px);
}
.botao-vazio:hover{border-color:var(--poeira);transform:translateY(-2px)}

.botao-grande{font-size:1rem;padding:.9em 1.5em}

/* ---------- topo ---------- */

.topo{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  background:rgba(12,14,17,.72);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(242,166,59,.18);
}

.topo-grade{
  display:flex;
  align-items:center;
  gap:1.5rem;
  min-height:68px;
}

.marca{
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:800;
  font-size:1.22rem;
  letter-spacing:-0.04em;
  text-decoration:none;
  line-height:1;
}
.marca span{color:var(--lampada);margin-left:.28em}

.menu{
  display:flex;
  gap:1.6rem;
  margin-left:auto;
  font-size:.92rem;
}
.menu a{
  text-decoration:none;
  color:var(--fumaca);
  transition:color .16s ease;
}
.menu a:hover{color:var(--poeira)}

.topo .botao{margin-left:.4rem;font-size:.88rem}

/* ---------- capa ---------- */

.capa{
  position:relative;
  min-height:min(100svh,880px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:120px 0 0;
  isolation:isolate;
}

.capa-foto{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:58% 62%;
  z-index:-2;
}

.capa-veu{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(102deg, rgba(11,13,16,.95) 0%, rgba(11,13,16,.72) 40%, rgba(11,13,16,.12) 72%, rgba(11,13,16,.42) 100%),
    linear-gradient(to top, rgba(15,17,20,1) 2%, rgba(15,17,20,.62) 26%, rgba(15,17,20,0) 58%),
    linear-gradient(to bottom, rgba(11,13,16,.72) 0%, rgba(11,13,16,0) 34%);
}

.capa-conteudo{
  padding-bottom:clamp(2.5rem,7vw,5rem);
  max-width:var(--largura);
}

.local{
  font-size:.85rem;
  letter-spacing:.04em;
  color:var(--lampada-clara);
  margin-bottom:1.1rem;
}

.capa h1{
  font-size:clamp(3rem,9.2vw,6.6rem);
  font-weight:780;
  letter-spacing:-0.045em;
  line-height:.93;
  margin-bottom:1.4rem;
  text-shadow:0 2px 40px rgba(0,0,0,.45);
}

.chamada{
  max-width:34rem;
  font-size:clamp(1rem,1.5vw,1.16rem);
  color:#D6D3CD;
  margin-bottom:2rem;
}

.acoes{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
}

.capa-rodape{
  border-top:1px solid rgba(242,166,59,.22);
  background:linear-gradient(to bottom, rgba(242,166,59,.08), rgba(15,17,20,0) 90%);
}

.capa-rodape-grade{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.5rem 1.5rem;
  padding-top:1rem;
  padding-bottom:1rem;
  font-size:.88rem;
  color:var(--fumaca);
}

/* ---------- serviços ---------- */

.servicos{
  padding:clamp(4.5rem,9vw,7.5rem) 0;
  background:
    radial-gradient(80% 60% at 12% 0%, rgba(242,166,59,.07), rgba(15,17,20,0) 62%),
    var(--noite);
}

.servicos-grade{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(2rem,6vw,5rem);
  align-items:start;
}

.servicos-cabeca{position:sticky;top:110px}

.servicos h2{
  font-size:clamp(2.1rem,4.4vw,3.1rem);
  letter-spacing:-0.035em;
  margin-bottom:1rem;
}

.olho{
  color:var(--fumaca);
  max-width:26rem;
  font-size:1rem;
}

.lista-servicos{border-top:1px solid var(--concreto)}

.item-servico{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:1.5rem 2.5rem;
  align-items:start;
  padding:1.9rem 0;
  border-bottom:1px solid var(--concreto);
}

.item-servico h3{
  font-size:clamp(1.4rem,2.6vw,1.85rem);
  letter-spacing:-0.03em;
  margin-bottom:.5rem;
}

.item-texto p{
  color:var(--fumaca);
  font-size:.97rem;
  max-width:34rem;
}

.item-preco{
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:.1rem;
  white-space:nowrap;
}

.item-preco span{
  font-size:.8rem;
  color:var(--fumaca);
}

.item-preco strong{
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:750;
  font-size:clamp(1.6rem,3.2vw,2.15rem);
  letter-spacing:-0.035em;
  line-height:1;
  color:var(--lampada);
}

/* ---------- capricho ---------- */

.capricho{
  padding:0 0 clamp(4.5rem,9vw,7.5rem);
}

.capricho-topo{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
  margin-bottom:clamp(2rem,4vw,3rem);
}

.capricho-foto-grande img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--raio);
  box-shadow:0 40px 80px -50px rgba(0,0,0,.95);
}

.capricho-texto h2{
  font-size:clamp(2rem,4.2vw,3rem);
  letter-spacing:-0.035em;
  margin-bottom:1.1rem;
}

.capricho-texto p{
  color:#CFCCC6;
  font-size:1.02rem;
  margin-bottom:1rem;
}
.capricho-texto p:last-child{margin-bottom:0}

.capricho-par{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2.5vw,2rem);
}

.capricho-par img{
  width:100%;
  aspect-ratio:16/11;
  object-fit:cover;
  border-radius:var(--raio);
}

.capricho-par figcaption{
  margin-top:.85rem;
  font-size:.9rem;
  color:var(--fumaca);
  padding-left:.9rem;
  border-left:2px solid var(--lampada);
}

/* ---------- agendar (respiro de luz) ---------- */

.agendar{
  background:var(--claro);
  color:var(--claro-tinta);
  padding:clamp(4.5rem,9vw,7rem) 0;
}

.agendar-grade{
  display:grid;
  grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(2rem,6vw,5rem);
  align-items:center;
}

.agendar h2{
  font-size:clamp(2.1rem,4.4vw,3.1rem);
  letter-spacing:-0.035em;
  margin-bottom:1.8rem;
}

.passos{
  counter-reset:passo;
  margin-bottom:2.2rem;
  border-top:1px solid rgba(21,24,28,.16);
}

.passos li{
  position:relative;
  counter-increment:passo;
  padding:1.4rem 0 1.4rem 3.4rem;
  border-bottom:1px solid rgba(21,24,28,.16);
}

.passos li::before{
  content:counter(passo);
  position:absolute;
  left:0;
  top:1.35rem;
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:750;
  font-size:1.15rem;
  color:#0F1114;
  background:var(--lampada);
  width:2.1rem;
  height:2.1rem;
  border-radius:50%;
  display:grid;
  place-items:center;
  line-height:1;
}

.passos h3{
  font-size:1.22rem;
  letter-spacing:-0.025em;
  margin-bottom:.35rem;
}

.passos p{color:var(--claro-suave);font-size:.97rem;max-width:30rem}

.agendar-foto img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:var(--raio);
  box-shadow:0 30px 60px -45px rgba(0,0,0,.8);
}

/* ---------- onde ---------- */

.onde{
  padding:clamp(4.5rem,9vw,7.5rem) 0;
}

.onde-grade{
  display:grid;
  grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}

.onde-foto img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--raio);
}

.onde h2{
  font-size:clamp(2rem,4.2vw,2.9rem);
  letter-spacing:-0.035em;
  margin-bottom:1.6rem;
}

.onde-blocos{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.5rem 2rem;
  margin-bottom:1.8rem;
}

.onde-blocos h3{
  font-size:.92rem;
  font-weight:600;
  font-family:"Work Sans",sans-serif;
  letter-spacing:.02em;
  color:var(--lampada);
  margin-bottom:.7rem;
}

.horas{font-size:.97rem}
.horas li{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.42rem 0;
  border-bottom:1px solid var(--concreto);
}
.horas li span:last-child{color:var(--fumaca)}

.endereco{font-size:.97rem;line-height:1.7;margin-bottom:.9rem}

.ligacao{
  font-size:.95rem;
  color:var(--lampada);
  text-decoration:none;
  border-bottom:1px solid rgba(242,166,59,.45);
  padding-bottom:2px;
}
.ligacao:hover{border-bottom-color:var(--lampada)}

.aviso-exemplo{
  font-size:.85rem;
  color:var(--fumaca);
  border-left:2px solid rgba(242,166,59,.5);
  padding-left:.9rem;
  max-width:28rem;
}

/* ---------- rodapé ---------- */

.pe{
  border-top:1px solid var(--concreto);
  padding:2.6rem 0 3.2rem;
  background:linear-gradient(to bottom, rgba(242,166,59,.05), rgba(15,17,20,0) 60%);
}

.pe-grade{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.6rem 2rem;
}

.pe-marca{
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:800;
  font-size:1.15rem;
  letter-spacing:-0.04em;
}
.pe-marca span{color:var(--lampada);margin-left:.26em}

.pe-frase{
  flex:1 1 22rem;
  color:var(--fumaca);
  font-size:.9rem;
  max-width:38rem;
}

.pe-zap{font-size:.9rem;color:var(--fumaca)}
.pe-zap a{color:var(--poeira);text-decoration:none;border-bottom:1px solid var(--concreto)}
.nota{display:block;font-size:.78rem;color:#8D939B}

/* ---------- telas menores ---------- */

@media (max-width:1000px){
  .menu{display:none}
  .topo .botao{margin-left:auto}
  .servicos-grade{grid-template-columns:1fr;gap:2.5rem}
  .servicos-cabeca{position:static}
  .capricho-topo{grid-template-columns:1fr;gap:2rem}
  .agendar-grade,
  .onde-grade{grid-template-columns:1fr;gap:2.5rem}
  .agendar-foto img{aspect-ratio:4/3}
}

@media (max-width:620px){
  body{font-size:16px}
  .faixa{padding:0 20px}
  .capa{min-height:92svh;padding-top:96px}
  .capa-rodape-grade{font-size:.82rem}
  .acoes .botao{width:100%}
  .item-servico{grid-template-columns:1fr;gap:.8rem;padding:1.6rem 0}
  .item-preco{text-align:left;flex-direction:row;align-items:baseline;gap:.5rem}
  .capricho-par{grid-template-columns:1fr}
  .onde-blocos{grid-template-columns:1fr;gap:1.8rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.001ms !important;animation-duration:.001ms !important}
}