/* ==========================================================================
   LANDING PAGE — EL KIT | Disjuntor On Board — EletroLucas
   Folha de estilos única do site.

   ÍNDICE:
   1.  Tokens de cor e fonte (variáveis CSS)
   2.  Reset e base
   3.  Tipografia
   4.  Botões
   5.  Header (cabeçalho fixo)
   6.  Hero (seção principal)
   7.  Seções (base)
   8.  Cards de configuração (EL KIT 1/2/3)
   9.  Características técnicas (tabela)
   10. Carrossel de fotos
   11. Fluxo de fornecimento (linha do tempo)
   12. Diferenciais + selo Schneider
   13. Chamadas por perfil
   14. Banner final (proposta técnica)
   15. Footer (rodapé)
   16. Botão flutuante de WhatsApp
   17. Botão de fotos dos cards
   18. Lightbox (galeria de fotos dos cards)
   19. Animações (fade-in) e acessibilidade de movimento

   Breakpoints: 768px (tablet) e 1024px (desktop). Abordagem mobile-first.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS — paleta oficial EletroLucas (Pantone 186C, Black 6C, 425C,
      Cool Gray 1C) + tokens derivados para estados e superfícies
   ========================================================================== */
:root{
  --el-red:#e4002b;        /* CTAs, acentos, ícones */
  --el-red-hover:#c40025;  /* hover dos botões primários */
  --el-black:#1b1b1b;      /* títulos, texto, blocos escuros */
  --el-gray:#6e6e6e;       /* texto secundário */
  --el-gray-light:#dfe0e2; /* bordas e divisores */
  --el-white:#ffffff;
  --el-surface:#f6f7f8;    /* fundo de seções alternadas */
  --el-border:#dfe0e2;
  --font:'Poppins','Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
}

/* ==========================================================================
   2. RESET E BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--el-black);
  background:var(--el-white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
ul{list-style:none}
:focus-visible{outline:2px solid var(--el-red);outline-offset:2px} /* foco visível (WCAG) */

.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* ==========================================================================
   3. TIPOGRAFIA — escala mobile primeiro; desktop no media query
   ========================================================================== */
h1{font-size:36px;font-weight:700;line-height:1.1;color:var(--el-white)}
h2{font-size:28px;font-weight:700;line-height:1.2;color:var(--el-black)}
h3{font-size:20px;font-weight:600;line-height:1.3;color:var(--el-black)}
.eyebrow{
  display:block;
  font-size:12px;font-weight:600;line-height:1.2;
  text-transform:uppercase;letter-spacing:0.08em;
  color:var(--el-red);
  margin-bottom:12px;
}
.sub{font-size:14px;line-height:1.5;color:var(--el-gray)}
p{max-width:680px} /* largura confortável de leitura */

@media(min-width:768px){
  h1{font-size:56px}
  h2{font-size:36px}
  h3{font-size:22px}
  .eyebrow{font-size:13px}
  .sub{font-size:15px}
  .container{padding:0 40px}
}

/* ==========================================================================
   4. BOTÕES — altura mínima 48px (área de toque mobile)
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font);font-size:16px;font-weight:600;line-height:1;
  padding:14px 28px;min-height:48px;
  border-radius:6px;border:none;cursor:pointer;
  text-decoration:none;text-align:center;
  transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease;
}
.btn-primary{background:var(--el-red);color:var(--el-white)}
.btn-primary:hover{background:var(--el-red-hover)}
.btn-primary .arrow{transition:transform 150ms ease}
.btn-primary:hover .arrow{transform:translateX(3px)}
.btn-outline-dark{background:transparent;color:var(--el-black);border:1.5px solid var(--el-black)}
.btn-outline-dark:hover{background:var(--el-black);color:var(--el-white)}

/* ==========================================================================
   5. HEADER — fixo (sticky), ganha sombra ao rolar (classe .scrolled via JS)
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--el-white);
  transition:box-shadow 150ms ease;
}
.site-header.scrolled{box-shadow:0 1px 6px rgba(27,27,27,0.12)}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:64px;padding-top:8px;padding-bottom:8px;
}
.logo{display:flex;align-items:center;min-height:44px}
.logo img{height:32px;width:auto}
.header-phone{
  display:none; /* telefone só aparece a partir de 768px */
  font-size:15px;font-weight:600;color:var(--el-black);
  text-decoration:none;align-items:center;gap:8px;min-height:44px;
}
.header-phone:hover{color:var(--el-red)}
.header-cta{padding:12px 20px;font-size:15px}
@media(min-width:768px){
  .logo img{height:44px}
  .header-phone{display:inline-flex}
}

/* ==========================================================================
   6. HERO — fundo escuro com textura em gradientes (sem imagem de fundo);
      texto à esquerda, foto do produto (PNG sem fundo) à direita
   ========================================================================== */
.hero{
  position:relative;
  background:
    radial-gradient(ellipse 900px 620px at 82% 12%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(ellipse 720px 520px at 8% 95%, rgba(228,0,43,0.07), transparent 65%),
    linear-gradient(135deg,#141414 0%,#1e1e21 55%,#26262a 100%);
  color:var(--el-white);
  overflow:hidden;
}
.hero::after{ /* faixa de brilho diagonal sutil */
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 44%,rgba(255,255,255,0.03) 44%,rgba(255,255,255,0.03) 58%,transparent 58%);
  pointer-events:none;
}
/* Grafismo da marca (duas metades de raio) — usado apenas no banner final */
.hero-bolt{
  position:absolute;right:-90px;top:50%;transform:translateY(-50%);
  width:460px;height:auto;opacity:0.16;pointer-events:none;
}
.hero-inner{
  position:relative;z-index:1;
  display:grid;gap:40px;
  padding:56px 0;
}
.hero-text .sub-hero{
  font-size:18px;font-weight:400;line-height:1.4;
  color:rgba(255,255,255,0.9);
  margin-top:16px;max-width:640px;
}
.hero-desc{margin-top:24px;display:grid;gap:14px}
.hero-desc p{color:rgba(255,255,255,0.9);font-size:16px;max-width:640px}
.hero-cta{margin-top:32px}
.hero-media{
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;
}
.hero-media img{
  width:auto;max-width:100%;height:490px;object-fit:contain;
  filter:drop-shadow(0 28px 44px rgba(0,0,0,0.55)); /* sombra do produto */
}
@media(min-width:1024px){
  .hero-inner{
    grid-template-columns:1.05fr 0.95fr;
    align-items:center;
    gap:64px;
    padding:88px 0;
  }
  .hero-media img{height:660px}
  .hero-bolt{width:560px;right:-60px}
}

/* ==========================================================================
   7. SEÇÕES — espaçamento vertical 56px mobile / 80px desktop
   ========================================================================== */
.section{padding:56px 0;position:relative;overflow:hidden}
.section-surface{background:var(--el-surface)}
.section-head{margin-bottom:32px}
.section-head .sub-title{margin-top:12px;color:var(--el-gray);font-size:16px;max-width:680px}
@media(min-width:768px){
  .section{padding:80px 0}
  .section-head{margin-bottom:48px}
}
/* Grafismo vermelho sutil no fundo da seção de configurações */
.section-bolt{
  position:absolute;right:-40px;bottom:-30px;
  width:260px;height:auto;opacity:0.06;pointer-events:none;
}

/* ==========================================================================
   8. CARDS DE CONFIGURAÇÃO — 3 colunas no desktop, empilhados no mobile;
      o card "On board completo" leva a barra vermelha no topo (.featured)
   ========================================================================== */
.config-grid{display:grid;gap:24px;position:relative;z-index:1}
@media(min-width:1024px){.config-grid{grid-template-columns:repeat(3,1fr)}}
.config-card{
  background:var(--el-white);
  border:1px solid var(--el-border);
  border-radius:8px;
  box-shadow:0 1px 3px rgba(27,27,27,0.08);
  padding:32px 28px;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  transition:box-shadow 150ms ease;
}
.config-card:hover{box-shadow:0 4px 12px rgba(27,27,27,0.12)}
.config-card.featured::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--el-red);
}
.config-card .kit-label{ /* rótulo "EL KIT 1/2/3" */
  display:block;
  font-size:13px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--el-red);margin-bottom:8px;
}
.config-card .card-tag{ /* subtítulo da variante */
  display:block;
  font-size:13px;font-weight:600;
  color:var(--el-gray);margin:8px 0 16px;
}
.config-card p{font-size:15px;color:var(--el-black)}
.card-list-title{font-size:14px;font-weight:600;color:var(--el-black);margin:20px 0 10px}
.check-list li{
  position:relative;padding-left:26px;margin-bottom:8px;
  font-size:15px;line-height:1.5;
}
.check-list li svg{
  position:absolute;left:0;top:3px;width:16px;height:16px;
  stroke:var(--el-red);
}
.config-cta{
  margin-top:48px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:20px;
  position:relative;z-index:1;
}
.config-cta p{font-size:16px;color:var(--el-black)}

/* ==========================================================================
   9. CARACTERÍSTICAS TÉCNICAS — tabela zebrada à esquerda, carrossel à direita;
      no mobile a tabela vira lista de pares (display:block)
   ========================================================================== */
.tech-layout{display:grid;gap:32px;align-items:stretch}
@media(min-width:1024px){.tech-layout{grid-template-columns:1.05fr 0.95fr}}
.tech-table-card{
  background:var(--el-white);
  border:1px solid var(--el-border);
  border-radius:8px;overflow:hidden;
  align-self:start;
}
table{width:100%;border-collapse:collapse;font-size:14px}
caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* só para leitores de tela */
th,td{text-align:left;padding:14px 20px;vertical-align:top}
th{font-weight:600;width:46%}
tbody tr:nth-child(even){background:var(--el-surface)}
@media(min-width:768px){table{font-size:15px}}
@media(max-width:767px){
  /* tabela empilhada no mobile — sem scroll horizontal */
  table,tbody,tr,th,td{display:block;width:100%}
  th{padding:12px 20px 0}
  td{padding:2px 20px 12px}
  tbody tr:nth-child(even){background:var(--el-surface)}
}

/* ==========================================================================
   10. CARROSSEL — card branco com setas, bolinhas e legenda; sem autoplay.
       As fotos e a ordem são definidas no js/script.js (array PHOTOS)
   ========================================================================== */
.carousel{
  background:var(--el-white);
  border:1px solid var(--el-border);
  border-radius:8px;
  padding:24px;
  display:flex;flex-direction:column;
}
.carousel-stage{
  position:relative;
  flex:1;display:flex;align-items:center;justify-content:center;
  min-height:360px;
  touch-action:pan-y; /* permite swipe horizontal sem travar o scroll da página */
}
.carousel-stage img{
  max-width:100%;height:420px;object-fit:contain;
  transition:opacity 150ms ease;
}
@media(min-width:1024px){.carousel-stage img{height:500px}}
.carousel-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  background:var(--el-white);
  border:1px solid var(--el-border);
  color:var(--el-black);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:border-color 150ms ease,color 150ms ease;
}
.carousel-nav:hover{border-color:var(--el-red);color:var(--el-red)}
.carousel-nav svg{width:20px;height:20px;stroke:currentColor}
.carousel-prev{left:0}
.carousel-next{right:0}
.carousel-footer{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding-top:16px;
}
.carousel-caption{font-size:14px;color:var(--el-gray);text-align:center}
.carousel-dots{display:flex;flex-wrap:wrap;justify-content:center}
.carousel-dot{
  width:32px;height:32px; /* área de toque maior que a bolinha visível */
  background:none;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:0;
}
.carousel-dot::before{
  content:"";width:9px;height:9px;border-radius:50%;
  background:var(--el-gray-light);
  transition:background-color 150ms ease,transform 150ms ease;
}
.carousel-dot:hover::before{background:var(--el-gray)}
.carousel-dot[aria-current="true"]::before{background:var(--el-red);transform:scale(1.25)}

/* ==========================================================================
   11. FLUXO DE FORNECIMENTO — 9 etapas numeradas; horizontal no desktop,
       vertical no mobile. Numeração gerada por CSS counter
   ========================================================================== */
.flow-list{
  display:grid;gap:0;
  counter-reset:step;
}
.flow-item{
  position:relative;
  display:flex;align-items:flex-start;gap:16px;
  padding-bottom:24px;
}
.flow-item:last-child{padding-bottom:0}
.flow-item::before{ /* círculo numerado */
  counter-increment:step;
  content:counter(step);
  flex:none;
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  border:2px solid var(--el-red);
  font-size:14px;font-weight:600;color:var(--el-black);
  background:var(--el-white);
  z-index:1;
}
.flow-item::after{ /* linha conectora */
  content:"";position:absolute;left:15px;top:32px;bottom:0;width:1px;
  background:var(--el-gray-light);
}
.flow-item:last-child::after{display:none}
.flow-item span{font-size:15px;padding-top:5px}
@media(min-width:1024px){
  .flow-list{grid-template-columns:repeat(9,1fr);gap:0}
  .flow-item{flex-direction:column;align-items:center;text-align:center;padding:0 8px}
  .flow-item::after{left:calc(50% + 16px);right:calc(-50% + 16px);top:15px;bottom:auto;width:auto;height:1px}
  .flow-item span{font-size:13px;padding-top:12px;line-height:1.4}
}
.flow-deadline{ /* destaque do prazo estimado */
  margin-top:40px;
  display:flex;align-items:center;gap:14px;
  background:var(--el-surface);
  border-left:3px solid var(--el-red);
  border-radius:0 8px 8px 0;
  padding:18px 22px;
  max-width:680px;
}
.flow-deadline svg{flex:none;width:28px;height:28px;stroke:var(--el-red)}
.flow-deadline p{font-size:15px;font-weight:600;color:var(--el-black)}
.flow-deadline p small{display:block;font-weight:400;color:var(--el-gray);font-size:14px}

/* ==========================================================================
   12. DIFERENCIAIS — grid 3x2 no desktop; ícones de linha em vermelho.
       Selo Schneider em card branco ao final (não recolorir o selo!)
   ========================================================================== */
.diff-grid{display:grid;gap:32px}
@media(min-width:768px){.diff-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.diff-grid{grid-template-columns:repeat(3,1fr);gap:48px 40px}}
.diff-item svg{width:32px;height:32px;stroke:var(--el-red);margin-bottom:16px}
.diff-item h3{margin-bottom:10px}
.diff-item p{font-size:15px}
.cert-card{
  margin-top:56px;
  background:var(--el-white);
  border:1px solid var(--el-border);
  border-radius:8px;
  padding:32px 28px;
  display:flex;flex-direction:column;align-items:center;gap:20px;
  text-align:center;
}
.cert-card img{width:150px;height:auto}
.cert-card p{font-size:15px;color:var(--el-black);max-width:520px}
@media(min-width:768px){
  .cert-card{flex-direction:row;text-align:left;justify-content:center}
}

/* ==========================================================================
   13. CHAMADAS POR PERFIL — projetistas / compradores / retrofit
   ========================================================================== */
.audience-grid{display:grid;gap:24px}
@media(min-width:1024px){.audience-grid{grid-template-columns:repeat(3,1fr)}}
.audience-card{
  background:var(--el-white);
  border:1px solid var(--el-border);
  border-radius:8px;padding:32px 28px;
  display:flex;flex-direction:column;gap:16px;
}
.audience-card h3{font-size:18px}
.audience-card p{font-size:15px;flex:1}
.audience-card .btn{align-self:flex-start}

/* ==========================================================================
   14. BANNER FINAL — bloco escuro com CTA para o WhatsApp
   ========================================================================== */
.final-band{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#1b1b1b 0%,#2a2a2c 100%);
  color:var(--el-white);
  padding:56px 0;
}
.final-band .eyebrow{color:var(--el-red)}
.final-band h2{color:var(--el-white)}
.final-band .intro{margin-top:16px;display:grid;gap:12px}
.final-band .intro p{color:rgba(255,255,255,0.9);font-size:16px}
.final-band .btn{margin-top:32px}
@media(min-width:768px){.final-band{padding:88px 0}}

/* ==========================================================================
   15. FOOTER — fundo escuro, logo branca, 3 colunas (marca/contato/selo)
   ========================================================================== */
.site-footer{background:var(--el-black);color:var(--el-white);padding:56px 0 32px}
.footer-grid{
  display:grid;gap:40px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,0.15);
}
@media(min-width:768px){
  .footer-grid{grid-template-columns:1.2fr 1fr 1fr;gap:48px;align-items:start}
}
.footer-brand{margin-bottom:20px}
.footer-brand img{height:52px;width:auto}
.footer-col h4{
  font-size:13px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  color:rgba(255,255,255,0.55);
  margin-bottom:16px;
}
.site-footer p{font-size:14px;color:rgba(255,255,255,0.8)}
.footer-contact{display:grid;gap:4px}
.footer-contact a{
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;
  font-size:15px;color:rgba(255,255,255,0.85);text-decoration:none;
}
.footer-contact a:hover{color:var(--el-white);text-decoration:underline}
.footer-contact svg{flex:none;width:18px;height:18px;stroke:var(--el-red)}
.footer-cert-card{ /* selo Schneider precisa de fundo claro — card branco */
  background:var(--el-white);
  border-radius:8px;
  padding:20px;
  display:flex;align-items:center;gap:16px;
}
.footer-cert-card img{width:120px;height:auto;flex:none}
.footer-cert-card p{font-size:13px;line-height:1.5;color:var(--el-black)}
.footer-legal{
  padding-top:24px;
  font-size:13px;color:rgba(255,255,255,0.6);
  max-width:none;
}

/* ==========================================================================
   16. BOTÃO FLUTUANTE DE WHATSAPP — 56px, canto inferior direito
   ========================================================================== */
.whatsapp-fab{
  position:fixed;right:20px;bottom:20px;z-index:200;
  width:56px;height:56px;border-radius:50%;
  background:#25d366; /* verde padrão do WhatsApp */
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(27,27,27,0.3);
  transition:transform 150ms ease;
}
.whatsapp-fab:hover{transform:scale(1.06)}
.whatsapp-fab svg{width:30px;height:30px;fill:var(--el-white)}

/* ==========================================================================
   17. BOTÃO "VER FOTOS" DOS CARDS — alinhado ao rodapé do card
   ========================================================================== */
.card-photos{margin-top:auto;padding-top:24px}
.card-photos .btn{width:100%;padding:12px 20px;font-size:15px}
.card-photos .btn svg{width:18px;height:18px;stroke:currentColor;flex:none}

/* ==========================================================================
   18. LIGHTBOX — galeria modal aberta pelos botões "Ver fotos".
       Fecha com Esc, clique fora ou botão X; navega com as setas do teclado
   ========================================================================== */
.lightbox{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  padding:16px;
}
.lightbox[hidden]{display:none}
.lightbox-backdrop{
  position:absolute;inset:0;
  background:rgba(27,27,27,0.85);
  border:none;cursor:default;
}
.lightbox-panel{
  position:relative;z-index:1;
  background:var(--el-white);
  border-radius:8px;
  padding:24px;
  width:min(720px,100%);
  max-height:calc(100vh - 32px);
  display:flex;flex-direction:column;
  box-shadow:0 16px 48px rgba(0,0,0,0.4);
}
.lightbox-stage{
  position:relative;
  flex:1;display:flex;align-items:center;justify-content:center;
  min-height:0;
  touch-action:pan-y;
}
.lightbox-stage img{
  max-width:100%;height:min(64vh,560px);object-fit:contain;
}
.lightbox-close{
  position:absolute;top:12px;right:12px;z-index:2;
  width:44px;height:44px;border-radius:50%;
  background:var(--el-white);
  border:1px solid var(--el-border);
  color:var(--el-black);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:border-color 150ms ease,color 150ms ease;
}
.lightbox-close:hover{border-color:var(--el-red);color:var(--el-red)}
.lightbox-close svg{width:20px;height:20px;stroke:currentColor}
.lightbox-footer{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding-top:12px;
}
.lightbox-count{font-size:14px;font-weight:600;color:var(--el-black);min-width:48px;text-align:center}
.lightbox-caption{font-size:14px;color:var(--el-gray);text-align:center;padding-top:4px}

/* ==========================================================================
   19. ANIMAÇÕES — fade-in dos cards ao entrar na tela (uma vez, 400ms).
       O estado oculto só se aplica quando o JS está ativo (classe .js no
       <html>): sem JavaScript a página fica 100% visível.
       prefers-reduced-motion desativa todas as animações e o scroll suave.
   ========================================================================== */
.js .fade-in{opacity:0;transform:translateY(12px);transition:opacity 400ms ease,transform 400ms ease}
.js .fade-in.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .fade-in{opacity:1;transform:none}
}