/* ============================================================
   Eletric Renacar — estética automotiva
   Mesma linguagem visual das outras Eletric: preto, branco e o
   dourado da marca, Montserrat nos títulos e Open Sans no texto.
   ============================================================ */

:root{
  --dourado:#FFD700;
  --dourado-escuro:#F9A825;
  --preto:#000000;
  --grafite:#111214;
  --texto:#333333;
  --texto-fraco:#666666;
  --linha:#e6e6e6;
  --claro:#f4f4f4;
  --branco:#ffffff;
  --verde-zap:#25D366;

  --fonte-titulo:'Montserrat',system-ui,sans-serif;
  --fonte-texto:'Open Sans',system-ui,sans-serif;

  --sombra:0 5px 20px rgba(0,0,0,.1);
  --sombra-forte:0 18px 44px -12px rgba(0,0,0,.35);
  --raio:14px;
  --largura:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--fonte-texto);
  background:var(--branco);
  color:var(--texto);
  line-height:1.65;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--fonte-titulo);line-height:1.18;text-wrap:balance}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.wrap{max-width:var(--largura);margin:0 auto;padding:0 20px}
.secao{padding:76px 0}
.secao.clara{background:var(--claro)}
.secao.escura{background:var(--grafite);color:#e9e9ea}
.secao.escura .secao-topo h2{color:var(--branco)}
.secao.escura p{color:#b9b9bd}

/* ---------- topo de seção ---------- */
.secao-topo{text-align:center;max-width:760px;margin:0 auto 46px}
.secao-topo .sobre-titulo{
  display:inline-block;font-family:var(--fonte-titulo);font-weight:700;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dourado-escuro);margin-bottom:12px;
}
.secao-topo h2{
  font-size:clamp(1.7rem,4.2vw,2.5rem);font-weight:800;
  letter-spacing:-.02em;color:var(--preto);margin-bottom:14px;
}
.secao-topo p{font-size:1.03rem;color:var(--texto-fraco)}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--fonte-titulo);font-weight:700;font-size:.95rem;
  letter-spacing:.02em;text-transform:uppercase;
  padding:16px 30px;border-radius:6px;border:2px solid transparent;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn svg{width:19px;height:19px;fill:currentColor;flex:0 0 19px}
.btn-ouro{background:var(--dourado);color:var(--preto)}
.btn-ouro:hover{background:var(--dourado-escuro);transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(249,168,37,.6)}
.btn-linha{border-color:var(--preto);color:var(--preto)}
.btn-linha:hover{background:var(--preto);color:var(--branco)}
.btn-linha-claro{border-color:rgba(255,255,255,.5);color:var(--branco)}
.btn-linha-claro:hover{background:var(--branco);color:var(--preto)}
.btn-bloco{width:100%}

/* ---------- barra de informações ---------- */
.topbar{background:var(--claro);font-size:.86rem;border-bottom:1px solid var(--linha)}
.topbar .wrap{display:flex;align-items:center;justify-content:center;gap:26px;
  flex-wrap:wrap;padding-top:9px;padding-bottom:9px;text-align:center}
.topbar span{display:inline-flex;align-items:center;gap:7px;color:var(--texto)}
.topbar svg{width:15px;height:15px;fill:var(--texto-fraco);flex:0 0 15px}
.topbar .selo{
  background:var(--dourado);color:var(--preto);font-weight:800;
  font-family:var(--fonte-titulo);font-size:.78rem;letter-spacing:.04em;
  padding:4px 11px;border-radius:4px;
}

/* ---------- cabeçalho ---------- */
.cabecalho{background:var(--preto);position:sticky;top:0;z-index:60}
.cabecalho .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:14px;padding-bottom:14px}
.marca{display:flex;align-items:baseline;gap:9px;font-family:var(--fonte-titulo);
  font-weight:800;font-size:1.35rem;letter-spacing:-.02em;color:var(--branco)}
.marca b{color:var(--dourado)}
.marca span{font-size:.72rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:#9a9a9e}
.menu{display:flex;align-items:center;gap:28px}
.menu a{font-family:var(--fonte-titulo);font-weight:600;font-size:.9rem;
  color:#e4e4e6;transition:color .18s ease}
.menu a:hover,.menu a.atual{color:var(--dourado)}
.cabecalho .btn{padding:12px 20px;font-size:.82rem}
.abre-menu{display:none;background:none;border:0;cursor:pointer;padding:6px}
.abre-menu svg{width:26px;height:26px;fill:var(--branco)}

/* ---------- topo da página ---------- */
.hero{position:relative;background:var(--preto);color:var(--branco);overflow:hidden;
  display:flex;align-items:flex-end;min-height:82vh}
.hero-fundo{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.62;filter:grayscale(.1)}
.hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.82) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:40px;padding-bottom:64px;text-align:center}
.selo-google{
  display:inline-flex;align-items:center;gap:10px;background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:8px 18px;
  font-size:.88rem;font-weight:600;margin-bottom:26px;backdrop-filter:blur(8px);
}
.selo-google .estrelas{color:var(--dourado);letter-spacing:.08em}
.selo-google .nota{font-family:var(--fonte-titulo);font-weight:800}
.selo-google small{color:#b9b9bd;font-weight:400}
.hero h1{font-size:clamp(2rem,6vw,3.5rem);font-weight:800;letter-spacing:-.03em;
  text-transform:uppercase;margin-bottom:16px}
.hero h1 .ouro{color:var(--dourado);display:block}
.hero .linha-apoio{font-family:var(--fonte-titulo);font-weight:700;
  font-size:clamp(.86rem,2.2vw,1.05rem);letter-spacing:.12em;text-transform:uppercase;
  color:#d6d6da;margin-bottom:20px}
.hero p{max-width:640px;margin:0 auto 32px;font-size:1.06rem;color:#cfcfd4}
.hero-botoes{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- faixa de números ---------- */
.numeros{background:var(--preto);border-top:1px solid rgba(255,255,255,.09);
  position:relative;z-index:2}
.numeros .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  padding-top:30px;padding-bottom:30px}
.numeros div{text-align:center}
.numeros b{display:block;font-family:var(--fonte-titulo);font-weight:800;
  font-size:1.7rem;color:var(--dourado);letter-spacing:-.02em}
.numeros span{font-size:.8rem;color:#a5a5aa;letter-spacing:.03em}

/* ---------- cartões de serviço ---------- */
.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grade-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.cartao{
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);
  padding:30px 26px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  display:flex;flex-direction:column;overflow:hidden;
}
.cartao-foto{
  width:calc(100% + 52px);height:200px;object-fit:cover;object-position:center;
  margin:-30px -26px 22px;display:block;
}
.cartao:hover{transform:translateY(-5px);box-shadow:var(--sombra);border-color:var(--dourado)}
.cartao .icone{
  width:56px;height:56px;border-radius:12px;background:#fff8dd;
  display:grid;place-items:center;margin-bottom:18px;
}
.cartao .icone svg{width:27px;height:27px;fill:var(--dourado-escuro)}
.cartao h3{font-size:1.16rem;font-weight:700;color:var(--preto);margin-bottom:9px}
.cartao p{color:var(--texto-fraco);font-size:.95rem;flex:1}
.cartao .saiba{
  margin-top:18px;font-family:var(--fonte-titulo);font-weight:700;font-size:.85rem;
  color:var(--dourado-escuro);display:inline-flex;align-items:center;gap:6px;
}
.cartao .saiba svg{width:15px;height:15px;fill:currentColor;transition:transform .18s ease}
.cartao:hover .saiba svg{transform:translateX(4px)}
.etiqueta{
  align-self:flex-start;background:var(--preto);color:var(--dourado);
  font-family:var(--fonte-titulo);font-size:.66rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 10px;border-radius:4px;margin-bottom:14px;
}

/* ---------- passos ---------- */
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:p}
.passo{position:relative;padding-top:22px}
.passo::before{
  counter-increment:p;content:counter(p,decimal-leading-zero);
  font-family:var(--fonte-titulo);font-weight:800;font-size:2.4rem;
  color:var(--dourado);opacity:.5;line-height:1;display:block;margin-bottom:10px;
}
.passo h3{font-size:1.04rem;font-weight:700;color:var(--preto);margin-bottom:7px}
.passo p{font-size:.93rem;color:var(--texto-fraco)}

/* ---------- lista de checagem ---------- */
.checks{display:grid;gap:14px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:1rem}
.checks svg{width:21px;height:21px;fill:var(--dourado-escuro);flex:0 0 21px;margin-top:3px}
.checks b{color:var(--preto)}
.secao.escura .checks b{color:var(--branco)}

/* ---------- duas colunas ---------- */
.duas{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.duas h2{font-size:clamp(1.6rem,3.6vw,2.2rem);font-weight:800;color:var(--preto);
  letter-spacing:-.02em;margin-bottom:16px}
.secao.escura .duas h2{color:var(--branco)}
.duas p{margin-bottom:16px}
.moldura{
  border:2px dashed var(--linha);border-radius:var(--raio);min-height:320px;
  display:grid;place-items:center;text-align:center;padding:28px;color:var(--texto-fraco);
  background:var(--claro);
}
.moldura svg{width:42px;height:42px;fill:#c9c9cc;margin-bottom:12px}
.moldura b{display:block;font-family:var(--fonte-titulo);color:var(--texto);margin-bottom:4px}
.moldura small{font-size:.84rem}

/* ---------- depoimentos ---------- */
.depo{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:26px}
.depo .estrelas{color:var(--dourado);font-size:1.02rem;letter-spacing:.1em;margin-bottom:12px}
.depo p{font-size:.97rem;color:var(--texto);font-style:italic;margin-bottom:18px}
.depo .quem{display:flex;align-items:center;gap:12px}
.depo .ini{width:42px;height:42px;border-radius:50%;background:var(--preto);color:var(--dourado);
  display:grid;place-items:center;font-family:var(--fonte-titulo);font-weight:800}
.depo .quem b{display:block;color:var(--preto);font-size:.95rem}
.depo .quem small{color:var(--texto-fraco);font-size:.83rem}

/* ---------- perguntas ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--linha);padding:18px 0}
.faq summary{
  font-family:var(--fonte-titulo);font-weight:700;font-size:1.02rem;color:var(--preto);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--dourado-escuro);font-size:1.5rem;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:'–'}
.faq p{margin-top:12px;color:var(--texto-fraco);font-size:.97rem}

/* ---------- chamada final ---------- */
.chamada{background:var(--preto);color:var(--branco);text-align:center}
.chamada .wrap{padding-top:70px;padding-bottom:70px}
.chamada h2{font-size:clamp(1.7rem,4.4vw,2.6rem);font-weight:800;letter-spacing:-.025em;
  text-transform:uppercase;margin-bottom:14px;color:var(--branco)}
.chamada h2 .ouro{color:var(--dourado)}
.chamada p{max-width:620px;margin:0 auto 30px;color:#c3c3c8;font-size:1.05rem}

/* ---------- contato ---------- */
.contato-grade{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.contato-item{display:flex;gap:14px;margin-bottom:24px}
.contato-item svg{width:22px;height:22px;fill:var(--dourado-escuro);flex:0 0 22px;margin-top:4px}
.contato-item b{display:block;font-family:var(--fonte-titulo);font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--texto-fraco);margin-bottom:4px}
.mapa{border:0;width:100%;height:340px;border-radius:var(--raio);filter:grayscale(.3)}

/* ---------- rodapé ---------- */
.rodape{background:var(--preto);color:#a8a8ad;padding:56px 0 26px;font-size:.92rem}
.rodape-grade{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:36px}
.rodape h4{font-family:var(--fonte-titulo);font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--branco);margin-bottom:16px}
.rodape a:hover{color:var(--dourado)}
.rodape li{margin-bottom:9px}
.rodape .fim{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem}

/* ---------- WhatsApp flutuante ---------- */
.zap-flutua{
  position:fixed;right:20px;bottom:20px;z-index:80;
  width:58px;height:58px;border-radius:50%;background:var(--verde-zap);
  display:grid;place-items:center;box-shadow:0 10px 26px -6px rgba(37,211,102,.65);
  transition:transform .18s ease;
}
.zap-flutua:hover{transform:scale(1.07)}
.zap-flutua svg{width:31px;height:31px;fill:#fff}

/* ---------- migalhas ---------- */
.migalhas{background:var(--claro);font-size:.85rem;color:var(--texto-fraco);
  border-bottom:1px solid var(--linha)}
.migalhas .wrap{padding-top:12px;padding-bottom:12px}
.migalhas a:hover{color:var(--dourado-escuro)}

/* ============================================================
   TELAS MENORES
   ============================================================ */
@media (max-width:960px){
  .grade,.passos{grid-template-columns:repeat(2,1fr)}
  .duas,.contato-grade,.rodape-grade{grid-template-columns:1fr;gap:34px}
  .numeros .wrap{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media (max-width:760px){
  .secao{padding:56px 0}
  .menu{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--preto);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px;
    border-top:1px solid rgba(255,255,255,.1);
  }
  .menu.aberto{display:flex}
  .menu a{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .cabecalho .btn{display:none}
  .abre-menu{display:block}
  .cabecalho{position:relative}
  .topbar{display:none}
  .grade,.grade-2,.passos{grid-template-columns:1fr}
  .hero{min-height:76vh}
  .hero .wrap{padding-top:36px;padding-bottom:48px}
  .hero-botoes .btn{width:100%}
  .zap-flutua{width:54px;height:54px;right:16px;bottom:16px}
  .zap-flutua svg{width:28px;height:28px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* ============================================================
   FOTOS REAIS
   Substituem os espacos reservados. Proporcao fixa para o texto
   ao lado nao dancar enquanto a imagem carrega.
   ============================================================ */
.foto-bloco{margin:0;border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra-forte)}
.foto-bloco img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/11;display:block}
@supports not (aspect-ratio:1){ .foto-bloco img{height:340px} }

/* o logo entra no lugar do texto da marca */
.marca img{height:44px;width:auto;display:block}
.rodape .marca img{height:38px;margin-bottom:14px}
@media (max-width:760px){ .marca img{height:36px} }


/* ============================================================
   CAMINHO ATE O WHATSAPP
   As paginas tinham ate 15 telas de rolagem sem nenhuma chamada.
   A barra fixa resolve no celular (onde vem a maior parte do
   trafego) e as faixas cobrem o meio do conteudo.
   ============================================================ */

/* ---- barra fixa (so no celular) ---- */
.barra-zap{display:none}

@media (max-width:860px){
  .barra-zap{
    display:flex;align-items:center;gap:12px;
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:rgba(10,10,12,.96);backdrop-filter:blur(12px);
    border-top:1px solid rgba(255,255,255,.12);
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  }
  .barra-tx{flex:1;min-width:0;line-height:1.25}
  .barra-tx b{display:block;color:#fff;font-family:var(--fonte-titulo);
    font-size:.86rem;font-weight:700}
  .barra-tx span{display:block;color:#a9a9ae;font-size:.75rem}
  .barra-btn{
    display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
    background:var(--verde-zap);color:#04240f;
    font-family:var(--fonte-titulo);font-weight:800;font-size:.84rem;
    padding:12px 16px;border-radius:8px;white-space:nowrap;
  }
  .barra-btn svg{width:17px;height:17px;fill:currentColor;flex:0 0 17px}
  .barra-btn:active{transform:scale(.97)}

  /* a bolha sairia por cima da barra: no celular a barra basta */
  .zap-flutua{display:none}
  /* espaco para a barra nao cobrir o fim do conteudo */
  .rodape{padding-bottom:96px}
}

/* ---- faixa de chamada no meio do conteudo ---- */
.faixa-cta{
  background:linear-gradient(120deg,#151517 0%,#0d0d0f 100%);
  border-top:1px solid rgba(255,215,0,.22);
  border-bottom:1px solid rgba(255,215,0,.22);
}
.faixa-cta .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding-top:34px;padding-bottom:34px;
}
.faixa-tx{flex:1;min-width:0}
.faixa-cta h3{
  font-family:var(--fonte-titulo);font-size:clamp(1.15rem,2.6vw,1.5rem);
  font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:6px;
}
.faixa-cta p{color:#b6b6bb;font-size:.97rem;max-width:560px}
.faixa-cta .btn{flex:0 0 auto}

@media (max-width:760px){
  .faixa-cta .wrap{flex-direction:column;align-items:stretch;text-align:center;gap:18px}
  .faixa-cta p{max-width:none}
  .faixa-cta .btn{width:100%}
}