/* Site institucional do Eletronicos GV.
   CSS proprio, sem relacao com o design/base.css do sistema: aquele e
   vocabulario de tela de trabalho, e aqui e pagina de vitrine.

   A regra da marca e a mesma do sistema: amarelo #F3E600 SO como preenchimento
   ou sobre preto. Sobre branco ele da 1,1 de contraste e some. */

:root{
  --preto:#0D0D0D;
  --marca:#F3E600;
  --texto:#17171a;
  --texto-2:#54545c;
  --fundo:#ffffff;
  --fundo-2:#f5f5f2;
  --linha:rgba(16,16,20,.12);
  --larg:1080px;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;color:var(--texto);background:var(--fundo);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}

/* A logo e o arquivo vetorial de verdade. Ela ja tem o fundo preto embutido, e
   como a barra tambem e preta ela encaixa sem recorte nem emenda visivel.
   width/height ficam no HTML para o navegador reservar o espaco antes de
   carregar — sem isso o cabecalho "pula" quando a logo aparece. */
.marca-img{display:block;height:54px;width:auto}
footer .marca-img{height:40px}

.topo{background:var(--preto);color:#fff}
.faixa{max-width:var(--larg);margin:0 auto;padding:18px 24px;display:flex;align-items:center;
  justify-content:space-between;gap:20px;flex-wrap:wrap}
.marca{text-decoration:none}
.topo nav{display:flex;gap:6px;flex-wrap:wrap}
.topo nav a{color:rgba(255,255,255,.72);text-decoration:none;font-size:14.5px;font-weight:500;
  padding:9px 13px;border-radius:8px}
.topo nav a:hover{color:var(--preto);background:var(--marca)}

.hero{max-width:var(--larg);margin:0 auto;padding:44px 24px 78px}
.hero h1{font-size:clamp(30px,5.2vw,52px);line-height:1.12;font-weight:800;letter-spacing:-1px}
.hero h1 em{font-style:normal;color:var(--marca)}
.hero p{margin-top:18px;max-width:52ch;color:rgba(255,255,255,.78);font-size:17px}
/* Amarelo preenchido com preto por cima: 14,6 de contraste. */
.cta{display:inline-block;margin-top:26px;background:var(--marca);color:var(--preto);
  text-decoration:none;font-weight:600;font-size:15.5px;padding:14px 26px;border-radius:10px}
.cta:hover{background:#fff}

.secao{max-width:var(--larg);margin:0 auto;padding:64px 24px}
.secao h2,.escura h2{font-size:clamp(23px,3vw,32px);font-weight:600;letter-spacing:-.5px;margin-bottom:28px}
/* Fio amarelo sob o titulo: o amarelo aqui e bloco, nao texto. */
.secao h2::after,.escura h2::after{content:'';display:block;width:52px;height:5px;background:var(--marca);
  border-radius:3px;margin-top:12px}

.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.grade-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grade-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grade article{background:var(--fundo-2);border:1px solid var(--linha);border-radius:14px;padding:22px}
.grade h3{font-size:17px;font-weight:600;margin-bottom:7px}
.grade p{color:var(--texto-2);font-size:15px}

/* Faixa escura. O conteudo vai num .dentro proprio em vez de `.escura > *`:
   com o seletor de filho, a chamada (que tem max-width menor) era centralizada
   pelo margin auto e desalinhava do titulo.

   E as regras vem DEPOIS de .grade de proposito. `.escura article` e
   `.grade article` tem a mesma especificidade, entao quem decide e a ordem —
   escritas antes, perdiam, e os cards ficavam com texto branco sobre fundo
   claro, ilegiveis. */
.escura{background:var(--preto);color:#fff}
.escura .dentro{max-width:var(--larg);margin:0 auto;padding:64px 24px}
.escura .chamada{font-size:18px;color:rgba(255,255,255,.82);max-width:60ch;margin-bottom:28px}
.escura .grade article{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.escura .grade h3{color:#fff}
.escura .grade p{color:rgba(255,255,255,.74)}
.escura .obs{margin-top:24px;font-size:14px;color:rgba(255,255,255,.6)}

.chamada-clara{color:var(--texto-2);font-size:17px;margin:-14px 0 26px}
.loja dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin-top:14px;font-size:15px}
.loja dt{color:var(--texto-2);font-weight:500}
.loja dd{line-height:1.5}
.loja .unidade{color:var(--texto-2);font-weight:400}
.loja dd a{color:var(--texto);font-weight:600}
.acoes{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
/* Preto preenchido com branco por cima: o amarelo aqui seria texto sobre card
   claro, e sumiria. */
.mapa,.zap{display:inline-block;text-decoration:none;font-weight:600;font-size:14px;
  padding:11px 18px;border-radius:9px;min-height:44px;line-height:22px}
.zap{background:var(--preto);color:#fff}
.zap:hover{background:#000}
.mapa{background:transparent;color:var(--texto);border:1px solid var(--linha)}
.mapa:hover{border-color:var(--texto-2)}
/* Loja sem WhatsApp confirmado nao tem botao de conversa: o "Ver no mapa" vira
   a acao principal para ela. */
.loja .acoes .mapa:only-child{background:var(--preto);color:#fff;border-color:var(--preto)}
/* Marcado de proposito, para ninguem publicar achando que ja esta pronto. */
.preencher{color:#9a2f2f;background:rgba(154,47,47,.09);border-radius:5px;padding:1px 8px;font-size:13.5px}

footer{background:var(--preto);color:rgba(255,255,255,.6);margin-top:20px}
footer .faixa{padding:26px 24px}
.rodape-txt{font-size:14px}

/* Atalho fixo do celular. Escondido no desktop, onde a pagina inteira cabe na
   rolagem e o CTA do topo ja resolve. */
.flutuante{display:none}

@media (max-width:640px){
  .flutuante{display:block;position:fixed;left:16px;right:16px;bottom:16px;z-index:30;
    background:var(--marca);color:var(--preto);text-align:center;text-decoration:none;
    font-weight:600;font-size:15px;padding:15px;border-radius:11px;
    box-shadow:0 6px 22px rgba(0,0,0,.28)}
  /* Espaco para o botao nao tapar o fim do rodape. */
  footer .faixa{padding-bottom:84px}
  .faixa{padding:14px 16px}
  .marca-img{height:42px}
  footer .marca-img{height:34px}
  .hero{padding:32px 16px 56px}
  .secao{padding:46px 16px}
  .escura .dentro{padding:46px 16px}
  .topo nav{width:100%;margin-left:-13px}
}