/* ===========================================================================
 * TEMA: EVOIL — Kit de limpeza de relação (Desengraxante + Chain Lube)
 * Paleta e fonte extraídas do site oficial evoilbrasil.com.br
 * Visual dark premium (latas pretas + verde neon).
 * =========================================================================== */
:root {
  --c-bg: #0a0a0a;          /* preto de fundo */
  --c-fg: #f5f7fa;          /* texto claro */
  --c-muted: #a9b0ba;       /* texto secundário */
  --c-primary: #4eff00;     /* verde neon EVOIL (Chain Lub) */
  --c-primary-dark: #3acc00;
  --c-accent: #ffff01;      /* amarelo EVOIL (Desengraxante) */
  --c-soft: #141414;        /* cartões/blocos escuros */
  --c-border: #262626;
  --c-danger: #fe0000;
  --radius: 14px;
  --shadow: 0 10px 34px rgba(0,0,0,.55);
  --maxw: 760px;
}

/* fonte da marca */
body { font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }

/* CTA verde neon com texto preto (alto contraste, cara de "ligado") */
.btn { color: #06210a; text-shadow: none; }
.btn:hover { filter: brightness(1.08); }

/* ajustes do tema dark sobre o base.css */
.section--soft { background: var(--c-soft); }
.card { background: var(--c-soft); border-color: var(--c-border); }
.hero .media { background: #000; }
.eyebrow { color: var(--c-primary); }
.price { color: var(--c-primary); }
.offer { background: #0f0f0f; border-color: var(--c-primary); }
.badge { background: var(--c-accent); color: #1a1a00; }
.testimonial { border-left-color: var(--c-primary); }
.guarantee .seal { background: #0f0f0f; color: var(--c-primary); border: 2px solid var(--c-primary); }
.field input, .field textarea { background: #0f0f0f; color: var(--c-fg); border-color: var(--c-border); }
.sticky-cta { background: #0f0f0f; border-top-color: var(--c-border); }
.faq details { border-bottom-color: var(--c-border); }

/* faixa preta do topo p/ o logo (o logo tem contorno branco, fica ótimo no preto) */
.topbar { background:#000; text-align:center; padding:18px 10px; border-bottom:1px solid var(--c-border); }
.topbar img { height:64px; width:auto; display:inline-block; }
@media (min-width:640px) { .topbar img { height:80px; } }

/* player com fachada (poster + play) p/ Reels/TikTok, carregado só ao clicar */
.hero-video { position: relative; cursor: pointer; }
.hero-video__poster { width: 100%; display: block; border-radius: var(--radius); }
.hero-video__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 50%; border: 0;
  background: var(--c-primary); color: #06210a; font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); cursor: pointer;
}
.hero-video__play::after { content: ""; }
.hero-video--playing .hero-video__poster,
.hero-video--playing .hero-video__play { display: none; }
.hero-video--playing { background: #000; min-height: 300px; display: flex; align-items: center; justify-content: center; }