/* =========================================================
   Besouro Elétrico — folha de estilo
   Paleta tirada do próprio negócio: azul-petróleo do Fusca,
   laranja dos cabos de alta tensão e a luz âmbar da oficina.
   ========================================================= */

@font-face{font-family:"Fraunces";src:url("../fontes/fraunces-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fontes/fraunces-latin-wght-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@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}

:root{
  /* cores do negócio */
  --petroleo:#0B262E;
  --petroleo-2:#10333D;
  --azul:#1E5468;
  --cobre:#E0622B;
  --cobre-forte:#C24B18;
  --cobre-tinta:#9C3A0E;
  --ambar:#F0B04A;
  --papel:#EDEBE2;
  --papel-2:#E3E0D5;
  --claro:#F5F2EA;
  --claro-2:#A9BEC2;
  --tinta:#0A1D23;
  --tinta-2:#4A5D62;
  /* tipografia */
  --titulo:"Fraunces",Georgia,"Times New Roman",serif;
  --texto:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  /* medidas */
  --largura:min(1180px,92vw);
  --largura-estreita:min(820px,92vw);
  --topo-altura:72px;
  --raio:3px;
  --curva:cubic-bezier(.16,1,.3,1);
}

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

html{-webkit-text-size-adjust:100%}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

body{
  margin:0;
  background:var(--petroleo);
  color:var(--claro);
  font-family:var(--texto);
  font-size:clamp(1rem,.55vw + .88rem,1.08rem);
  font-weight:400;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

a{color:inherit}

h1,h2,h3{font-family:var(--titulo);font-weight:800;font-variation-settings:"wght" 800;line-height:1.06;letter-spacing:-.02em;margin:0}

section[id]{scroll-margin-top:calc(var(--topo-altura) + 12px)}

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

/* ---------- peças de uso geral ---------- */
.largura{width:var(--largura);margin-inline:auto}
.largura--estreita{width:var(--largura-estreita);margin-inline:auto}

.secao{padding-block:clamp(72px,9vw,132px)}
.secao--clara{background:var(--papel);color:var(--tinta)}
.secao--escura{background:var(--petroleo);color:var(--claro)}
.secao--clara + .secao--clara{border-top:1px solid rgba(10,29,35,.09)}

.titulo{font-size:clamp(2rem,1.1rem + 2.9vw,3.7rem);max-width:16ch}
.titulo--claro{color:var(--claro)}

.kicker{
  font-family:var(--titulo);font-style:italic;font-weight:500;
  font-size:clamp(1.05rem,.85rem + .5vw,1.4rem);
  color:var(--cobre);margin:0 0 .55rem;
}
.kicker--escuro{color:var(--cobre-tinta)}

.entrada{max-width:60ch;margin:clamp(14px,1.6vw,22px) 0 0;color:var(--tinta-2);font-size:1.08rem}
.entrada--clara{color:var(--claro-2)}

.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  background:var(--cobre);color:#08171B;
  font-family:var(--texto);font-weight:600;font-size:1rem;line-height:1;
  padding:1em 1.5em;border-radius:2px;text-decoration:none;border:1px solid transparent;
  transition:background .18s ease,transform .14s ease,color .18s ease;
  cursor:pointer;
}
.botao:hover{background:var(--cobre-forte);color:#FFF7EE}
.botao:active{transform:translateY(1px)}
.botao--grande{font-size:1.08rem;padding:1.1em 1.75em}
.botao--topo{padding:.72em 1.1em;font-size:.92rem}

.link-simples{
  font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor;
  padding-bottom:2px;align-self:center;
}
.link-simples--claro{color:var(--claro)}

.ex{
  display:inline-block;font-size:.66rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cobre-tinta);
  border:1px solid currentColor;border-radius:999px;padding:.15em .55em;
  vertical-align:middle;line-height:1.4;
}
.marca-ex{
  font-size:.78rem;color:var(--claro-2);margin:.5rem 0 0;
  font-style:italic;font-family:var(--titulo);
}

.pula{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--cobre);color:#08171B;padding:.8em 1.2em;text-decoration:none;font-weight:600;
}
.pula:focus{left:12px;top:12px}

/* ---------- topo fixo ---------- */
.topo{
  position:fixed;inset:0 0 auto 0;z-index:50;
  background:rgba(9,30,38,.82);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  border-bottom:1px solid rgba(245,242,234,.08);
}
.topo__interno{
  width:var(--largura);margin-inline:auto;
  min-height:var(--topo-altura);
  display:flex;align-items:center;gap:clamp(16px,3vw,44px);
}
.topo__marca{
  font-family:var(--titulo);font-weight:900;font-variation-settings:"wght" 900;
  text-transform:uppercase;letter-spacing:-.01em;font-size:1.12rem;
  text-decoration:none;white-space:nowrap;
}
.topo__menu{display:flex;gap:clamp(14px,2vw,28px);margin-left:auto}
.topo__menu a{
  text-decoration:none;font-size:.95rem;color:var(--claro-2);
  padding:.35em 0;border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease;
}
.topo__menu a:hover{color:var(--claro);border-color:var(--cobre)}

/* ---------- capa ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:flex-end;
}
.hero__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;z-index:-2}
.hero__veu{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(11,38,46,.72) 0%,rgba(11,38,46,.10) 26%,rgba(11,38,46,.55) 62%,rgba(7,22,28,.95) 100%),
    linear-gradient(90deg,rgba(7,22,28,.6) 0%,rgba(7,22,28,0) 55%);
}
.hero__conteudo{
  width:var(--largura);margin-inline:auto;
  padding-block:calc(var(--topo-altura) + 24px) clamp(30px,6vh,64px);
}
.hero__sobre{
  margin:0 0 clamp(10px,1.6vw,18px);
  font-size:clamp(.82rem,.72rem + .3vw,.96rem);font-weight:500;
  letter-spacing:.02em;color:var(--ambar);
}
.hero__marca{
  font-weight:900;font-variation-settings:"wght" 900;
  text-transform:uppercase;letter-spacing:-.025em;line-height:.88;
  font-size:clamp(3.3rem,13.5vw,11.5rem);
  margin:0;color:var(--claro);
}
.hero__marca .linha{display:block;overflow:hidden;padding-bottom:.03em}
.hero__marca .linha > span{display:block}
.hero__texto{
  max-width:46ch;margin:clamp(18px,2.4vw,28px) 0 0;
  font-size:clamp(1.02rem,.9rem + .45vw,1.28rem);color:#DCE6E6;
}
.hero__dica{
  font-family:var(--titulo);font-style:italic;font-size:1.02rem;
  color:var(--ambar);margin:clamp(14px,2vw,22px) 0 0;
}
.hero__acoes{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,26px);
  margin-top:clamp(20px,2.6vw,30px);
}
.hero__risco{font-size:.94rem;color:var(--claro-2)}

/* ---------- a conversão ---------- */
.conversao{background:var(--petroleo);color:var(--claro);padding-block:clamp(72px,9vw,132px)}
.conversao__cabeca{width:var(--largura);margin-inline:auto}
.conversao__cabeca .titulo{max-width:20ch}
.conversao__sub{max-width:52ch;margin:clamp(12px,1.6vw,20px) 0 0;color:var(--claro-2)}
.conversao__corpo{width:var(--largura);margin-inline:auto;margin-top:clamp(34px,5vw,60px)}
.trilha{display:none}
.palco{position:relative}
.quadro{margin:0 0 clamp(44px,7vw,80px)}
.quadro img{width:100%;height:auto;border-radius:var(--raio)}
.quadro__texto{padding-top:18px;max-width:56ch}
.quadro__num{
  display:block;font-family:var(--titulo);font-size:.9rem;font-weight:600;
  letter-spacing:.16em;color:var(--cobre);margin-bottom:.35rem;
}
.quadro h3{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.3rem);margin-bottom:.4rem}
.quadro p{margin:0;color:var(--claro-2)}

/* conversão presa na tela — só quando o JS liga o efeito (desktop) */
.conversao.js-pin{padding-block:0}
.conversao.js-pin .conversao__pin{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(14px,3vh,34px);
  padding-block:calc(var(--topo-altura) + 20px) clamp(22px,5vh,52px);
}
.conversao.js-pin .conversao__cabeca .titulo{font-size:clamp(1.9rem,1rem + 2.3vw,3.1rem)}
.conversao.js-pin .conversao__sub{font-size:.98rem}
.conversao.js-pin .conversao__corpo{
  margin-top:0;flex:1;min-height:0;
  display:grid;grid-template-columns:88px 1fr;
  gap:clamp(18px,2.6vw,44px);align-items:stretch;
}
.conversao.js-pin .trilha{
  display:flex;flex-direction:column;align-items:center;
  list-style:none;margin:0;padding:2px 0;
}
.trilha__rotulo{
  font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--claro-2);white-space:nowrap;
}
.trilha__rotulo--antes{color:var(--ambar)}
.trilha__rotulo--depois{color:var(--cobre)}
.trilha__barra{
  position:relative;flex:1;width:2px;margin:14px 0;border-radius:2px;
  background:rgba(245,242,234,.16);overflow:hidden;
}
.trilha__fill{
  position:absolute;inset:0;display:block;background:var(--cobre);
  transform:scaleY(0);transform-origin:top center;
}
.conversao.js-pin .palco{height:100%;min-height:0}
.conversao.js-pin .quadro{
  position:absolute;inset:0;margin:0;overflow:hidden;border-radius:var(--raio);
}
.conversao.js-pin .quadro img{width:100%;height:100%;object-fit:cover}
.conversao.js-pin .quadro__texto{
  position:absolute;left:0;right:0;bottom:0;max-width:none;
  padding:clamp(22px,3vw,42px);
  background:linear-gradient(180deg,rgba(5,18,23,0) 0%,rgba(5,18,23,.72) 46%,rgba(5,18,23,.92) 100%);
}
.conversao.js-pin .quadro__texto p{max-width:52ch}

/* ---------- fica / muda ---------- */
.fica__grade{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);
  margin-top:clamp(34px,4.5vw,60px);border-top:1px solid rgba(10,29,35,.16);
  padding-top:clamp(26px,3.4vw,44px);
}
.fica__coluna--muda{padding-left:clamp(0px,4vw,64px);border-left:1px solid rgba(10,29,35,.16)}
.fica__rotulo{
  font-family:var(--texto);font-weight:600;font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cobre-tinta);margin:0 0 1rem;
}
.fica__coluna--muda .fica__rotulo{color:var(--azul)}
.fica__lista{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.fica__lista li{
  font-family:var(--titulo);font-size:clamp(1.12rem,.95rem + .7vw,1.5rem);
  line-height:1.3;padding-left:1.5rem;position:relative;
}
.fica__lista li::before{
  content:"";position:absolute;left:0;top:.62em;width:.7rem;height:2px;background:var(--cobre);
}
.fica__coluna--muda .fica__lista li::before{background:var(--azul)}

/* ---------- serviços ---------- */
.cartoes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:clamp(14px,1.8vw,22px);margin-top:clamp(32px,4vw,54px);
}
.cartao{
  background:#F7F5EE;border:1px solid rgba(10,29,35,.12);border-radius:var(--raio);
  padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;
}
.cartao--destaque{background:var(--petroleo);color:var(--claro);border-color:var(--petroleo)}
.cartao h3{font-size:1.42rem;margin-bottom:.5rem}
.cartao p{margin:0;color:var(--tinta-2)}
.cartao--destaque p{color:var(--claro-2)}
.cartao__preco{
  margin-top:auto;padding-top:1.3rem;font-family:var(--titulo);font-weight:700;
  font-size:1.3rem;color:var(--tinta);
}
.cartao--destaque .cartao__preco{color:var(--claro)}
.cartao__preco .ex{margin-right:.5em}
.cartao--destaque .ex{color:#F0A46B}
.servicos__acao{margin-top:clamp(28px,3.4vw,46px)}

/* ---------- como funciona ---------- */
.passos{
  list-style:none;margin:clamp(34px,4.4vw,56px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(20px,2.6vw,36px);
}
.passos li{border-top:2px solid rgba(245,242,234,.16);padding-top:1.4rem}
.passo__num{
  display:block;font-family:var(--titulo);font-weight:700;font-size:1.1rem;
  color:var(--cobre);letter-spacing:.06em;margin-bottom:.7rem;
}
.passos h3{font-size:1.3rem;margin-bottom:.45rem}
.passos p{margin:0;color:var(--claro-2);font-size:.98rem}

/* ---------- oficina / galeria ---------- */
.galeria{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.4vw,20px);margin-top:clamp(32px,4vw,54px);
}
.galeria__item{grid-column:span 1;margin:0}
.galeria__item--grande{grid-column:span 3}
.galeria__item img{
  width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--raio);
}
.galeria__item--grande img{aspect-ratio:21/9}
.galeria__item figcaption{
  font-size:.85rem;color:var(--claro-2);margin-top:.6rem;
}

/* ---------- depoimentos ---------- */
.depoimentos__grade{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(16px,2vw,26px);margin-top:clamp(32px,4vw,54px);
}
.depoimento{
  margin:0;background:#F7F5EE;border:1px dashed rgba(10,29,35,.28);
  border-radius:var(--raio);padding:clamp(22px,2.4vw,30px);
}
.depoimento blockquote{
  margin:1rem 0 0;font-family:var(--titulo);font-style:italic;
  font-size:1.14rem;line-height:1.45;color:var(--tinta);
}
.depoimento figcaption{margin-top:1rem;font-size:.88rem;color:var(--tinta-2)}

/* ---------- dúvidas ---------- */
.acordeao{margin-top:clamp(26px,3.4vw,44px);border-top:1px solid rgba(10,29,35,.16)}
.acordeao details{border-bottom:1px solid rgba(10,29,35,.16)}
.acordeao summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  cursor:pointer;list-style:none;padding:1.15rem 0;
  font-family:var(--titulo);font-weight:700;font-size:clamp(1.06rem,.95rem + .5vw,1.32rem);
}
.acordeao summary::-webkit-details-marker{display:none}
.acordeao summary::after{
  content:"+";font-family:var(--texto);font-weight:400;font-size:1.6rem;
  color:var(--cobre);transition:transform .24s var(--curva);line-height:1;
}
.acordeao details[open] summary::after{transform:rotate(45deg)}
.acordeao p{margin:0 0 1.3rem;color:var(--tinta-2);max-width:66ch}

/* ---------- onde fica ---------- */
.onde__grade{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(20px,2.6vw,40px);margin-top:clamp(32px,4vw,54px);
}
.onde__bloco{border-top:2px solid rgba(245,242,234,.16);padding-top:1.4rem}
.onde__bloco h3{
  font-family:var(--texto);font-weight:600;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ambar);margin-bottom:.7rem;
}
.onde__bloco p{margin:0;font-family:var(--titulo);font-size:1.2rem;line-height:1.35}
.onde__bloco a{text-decoration:none;border-bottom:1.5px solid var(--cobre)}
.onde__acoes{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.4vw,32px);
  margin-top:clamp(30px,3.6vw,50px);
}

/* ---------- chamada final ---------- */
.final{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;
  min-height:72vh;min-height:72svh;
  padding-block:clamp(80px,10vw,140px);
}
.final__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;z-index:-2}
.final__veu{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,22,28,.82) 0%,rgba(7,22,28,.62) 45%,rgba(7,22,28,.9) 100%);
}
.final__conteudo{width:var(--largura);margin-inline:auto;max-width:min(680px,92vw)}
.final__conteudo h2{font-size:clamp(2rem,1.1rem + 3vw,3.8rem);color:var(--claro)}
.final__conteudo p{margin:clamp(14px,1.8vw,22px) 0 clamp(24px,3vw,34px);color:#DCE6E6;max-width:52ch;font-size:1.1rem}

/* ---------- rodapé ---------- */
.rodape{background:#081D24;border-top:1px solid rgba(245,242,234,.08);padding-block:clamp(40px,5vw,64px)}
.rodape__interno{
  display:grid;grid-template-columns:auto 1fr;align-items:center;
  gap:clamp(14px,2.4vw,34px);
}
.rodape__marca{
  margin:0;font-family:var(--titulo);font-weight:900;font-variation-settings:"wght" 900;
  text-transform:uppercase;letter-spacing:-.01em;font-size:1.1rem;
}
.rodape__menu{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,26px)}
.rodape__menu a{color:var(--claro-2);text-decoration:none;font-size:.92rem}
.rodape__menu a:hover{color:var(--claro)}
.rodape__nota{
  grid-column:1/-1;margin:0;color:var(--claro-2);font-size:.86rem;
  max-width:60ch;
}

/* ---------- botão fixo no celular ---------- */
.cta-fixo{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:55;
  display:none;align-items:center;justify-content:center;text-align:center;
  background:var(--cobre);color:#08171B;font-weight:600;text-decoration:none;
  min-height:50px;padding:.9em 1.2em;border-radius:3px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transform:translateY(140%);transition:transform .3s var(--curva),background .18s ease;
}
.cta-fixo.mostra{transform:translateY(0)}
.cta-fixo:active{background:var(--cobre-forte)}

/* ---------- telas menores ---------- */
@media (max-width:900px){
  .topo__menu{display:none}
  .topo__interno{justify-content:space-between}
  .topo .botao--topo{display:none}
  .cta-fixo{display:flex}
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}

  .hero__texto{max-width:38ch}
  .secao--clara + .secao--clara{border-top:0}

  .fica__grade{grid-template-columns:1fr;gap:clamp(26px,6vw,40px)}
  .fica__coluna--muda{padding-left:0;border-left:0;border-top:1px solid rgba(10,29,35,.16);padding-top:clamp(26px,6vw,40px)}

  .galeria{grid-template-columns:1fr}
  .galeria__item,.galeria__item--grande{grid-column:span 1}
  .galeria__item img,.galeria__item--grande img{aspect-ratio:4/3}

  .rodape__interno{grid-template-columns:1fr}
}

@media (max-width:520px){
  :root{--largura:92vw}
  .hero__marca{font-size:clamp(2.9rem,15.5vw,4.6rem)}
  .hero__acoes{flex-direction:column;align-items:flex-start;gap:14px}
  .hero__acoes .botao{width:100%}
  .quadro{margin-bottom:clamp(34px,10vw,54px)}
}

/* ---------- quem prefere menos movimento ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}