/* Importação de fontes */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* Variáveis de cores */
:root {
    --primary-color: #b2f955; /* Verde de destaque */
    --secondary-color: #92e043; /* Hover */
    --text-color-light: #f4f4f4;
    --text-color-dark: #1a1a1a;
    --background-dark: #0e1f2b; /* Azul predominante */
    --card-background: #fff;
    --shadow-color: rgba(0, 0, 0, 0.2);

    /* Altura útil do header (não muda visualmente a barra) */
    --header-height: 64px;
}

/* Reset básico e tipografia */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--text-color-dark);
    background-color: var(--card-background);
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

h1, h2, h3 { font-weight: 600; margin-bottom: 20px; color: var(--background-dark); }

a { text-decoration: none; color: var(--primary-color); }

.btn {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--background-dark);
    font-weight: bold;
    padding: 12px 24px;
    border-radius: 50px;
    transition: background-color 0.3s;
    text-align: center;
}
.btn:hover { background-color: var(--secondary-color); }

/* ===== Header (transparente sobre o herói) ===== */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    /* fundo levemente translúcido para legibilidade sobre a imagem */
    background: rgba(14, 31, 43, 0.75);
    backdrop-filter: saturate(140%) blur(6px);
    box-shadow: 0 2px 5px var(--shadow-color);
}
.header .container {
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo maior sem aumentar a altura do header */
.logo img {
    height: calc(var(--header-height) - 8px); /* ocupa quase toda a barra */
    max-height: 100%;
    width: auto;               /* cresce para os lados */
    max-width: 280px;          /* ajuste fino: pode subir se quiser */
    object-fit: contain;
}

/* Links/botões do header maiores (sem crescer a barra) */
.nav a {
    margin-left: 30px;
    font-weight: 700;
    font-size: 1.08rem;      /* maior que o padrão */
    padding: 0 12px;         /* mais área clicável na horizontal */
    height: var(--header-height);
    display: inline-flex;
    align-items: center;     /* centraliza verticalmente */
    color: var(--text-color-light);
    transition: color 0.3s, transform 0.2s;
}
.nav a:hover { color: var(--primary-color); transform: translateY(-1px); }

/* ===== HERO com a sua imagem de fundo ===== */
.hero {
    /* trocado para a sua imagem */
    background:
      linear-gradient(rgba(14, 31, 43, 0.78), rgba(14, 31, 43, 0.78)),
      url('./src/eletroposto-viasolar.webp') no-repeat center center / cover;
    color: var(--text-color-light);
    text-align: center;

    /* vira um herói alto como no recar.com */
    min-height: 72vh;
    display: grid;
    place-items: center;
    padding: 100px 20px;
}
.hero h1 { font-size: clamp(2.2rem, 4vw, 3.5rem); color: var(--text-color-light); }
.hero p { font-size: 1.2rem; max-width: 700px; margin: 20px auto 40px; }

/* Seções Gerais */
section { padding: 80px 0; text-align: center; }
section h2 { font-size: 2.5rem; margin-bottom: 50px; }

/* Soluções */
.solucoes { background-color: var(--card-background); }
.solucoes-grid {
    display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;
}
.solucoes-grid .card {
    background-color: var(--card-background);
    padding: 30px; border-radius: 10px;
    box-shadow: 0 4px 10px var(--shadow-color);
    width: 300px; text-align: left; transition: transform 0.3s;
}
.solucoes-grid .card:hover { transform: translateY(-10px); }
.solucoes-grid .card ul { list-style-type: none; padding-left: 0; }
.solucoes-grid .card li { margin-bottom: 10px; position: relative; padding-left: 25px; }
.solucoes-grid .card li::before { content: '✅'; position: absolute; left: 0; }

/* Carregadores */
.carregadores { background-color: var(--background-dark); color: var(--text-color-light); }
.carregadores h2, .carregadores h3 { color: var(--text-color-light); }
.carregadores-grid { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; }
.carregador-info { max-width: 450px; }
.carregador-info-alto img {
    max-width: 100%; height: auto; margin-top: 20px;
    border-radius: 10px; box-shadow: 0 4px 10px var(--shadow-color); object-fit: cover;
}
.carregador-info img {
    max-width: 100%; height: auto; margin-top: 20px;
    border-radius: 10px; box-shadow: 0 4px 10px var(--shadow-color);
}

.carregador-imagem {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

/* Benefícios */
.beneficios { background:#fff; padding:80px 0; }
.beneficios-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.b-card {
  background:#fff; border:1px solid #e9eef3; border-radius:14px;
  padding:24px; text-align:center; box-shadow:0 8px 18px rgba(0,0,0,.06);
}
.b-ico {
  font-size:1.8rem; margin-bottom:8px;
  background:#e9fce1; width:60px; height:60px;
  display:grid; place-items:center; border-radius:12px;
}
.b-card h3 { margin:8px 0 6px; }
.b-card p { font-size:.95rem; opacity:.85; }

/* ==== Fix do rodapé quebrado ==== */

/* Garante que o footer não “herde” nada e ocupe toda a largura */
footer.footer {
  background: var(--background-dark) !important;
  color: var(--text-color-light) !important;
  width: 100%;
  clear: both;
  position: relative;
  isolation: isolate;          /* isola blending/overlays do hero */
  padding: 40px 0;
  z-index: 1;                  /* fica acima de imagens/curvas do herói */
}

/* Layout interno preservado */
footer.footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* Tipografia consistente no rodapé */
footer.footer p, 
footer.footer a {
  color: var(--text-color-light);
}

/* Se algum elemento anterior estava flutuando, não deixe invadir o footer */
footer.footer::before {
  content: "";
  display: block;
  clear: both;
}

/* Opcional: bordo superior para separar do conteúdo anterior */
footer.footer {
  border-top: 1px solid rgba(255,255,255,.08);
}

/* ==== Ícones sociais no footer ==== */
.social-media {
  display: flex;
  gap: 12px;          /* espaço entre os ícones */
  align-items: center;
  justify-content: center;
}

.social-media a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;        /* área clicável quadrada */
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08); /* fundo sutil */
  transition: background 0.3s;
}

.social-media a:hover {
  background: var(--primary-color);
}

.social-media img {
  width: 18px;        /* reduz tamanho do ícone */
  height: 18px;
  object-fit: contain;
}


/* Responsivo geral */
@media (max-width: 768px) {
  .hero h1 { font-size: clamp(1.8rem, 7vw, 2.5rem); }
  .hero p { font-size: 1rem; }

  section { padding: 60px 0; }
  section h2 { font-size: 2rem; margin-bottom: 30px; }

  .solucoes-grid .card {
    width: 100%;
    max-width: 450px; /* Evita que o card se estique demais em tablets */
    margin: 0 auto;
  }

  .carregador-info-alto img {
    height: auto;
  }

  .beneficios-grid {
    grid-template-columns: 1fr;
  }

  .app-content {
    text-align: center;
  }

  footer.footer .container {
    flex-direction: column;
    gap: 20px;
  }
}

@media(max-width:960px){ .beneficios-grid{ grid-template-columns:1fr } }

/* Como funciona */
.como-funciona { background:#f7fafc; padding:80px 0; }
.cf-grid {
  display:grid; grid-template-columns:1fr minmax(240px,340px) 1fr;
  gap:24px; align-items:center;
}
.cf-list { list-style:none; padding:0; counter-reset:step; }
.cf-list li {
  background:#fff; border:1px solid #e8edf2; border-radius:12px;
  padding:16px; margin:10px 0; box-shadow:0 6px 14px rgba(0,0,0,.06);
}
.cf-list span { display:inline-block; font-weight:700; color:#4bb543; margin-right:6px; }
.cf-phone { display:grid; place-items:center; }
.cf-phone img { max-width:280px; border-radius:20px; box-shadow:0 14px 30px rgba(0,0,0,.15); }
@media(max-width:960px){ .cf-grid{ grid-template-columns:1fr } .cf-phone{ order:-1; margin-bottom:16px } }

/* App Info */
.app-info { background-color: var(--card-background); text-align: left; }
.app-content { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
.app-content .text { flex: 1; min-width: 300px; }
.app-content .image { flex: 1; text-align: center; }
.app-content .image img { max-width: 100%; height: auto; }

/* === Responsive Nav === */
.nav-toggle {
    display: none; /* Oculto por padrão */
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 10px;
    z-index: 1100; /* Garante que fique sobre outros elementos */
}
.hamburger {
    display: block;
    position: relative;
    width: 25px;
    height: 3px;
    background: var(--text-color-light);
    transition: background 0.2s ease-in-out;
}
.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background: var(--text-color-light);
    transition: transform 0.2s ease-in-out;
}
.hamburger::before { transform: translateY(-8px); }
.hamburger::after { transform: translateY(8px); }

@media (max-width: 768px) {
    .nav {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        width: 80%;
        height: 100vh;
        background: var(--background-dark);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: -5px 0 15px rgba(0,0,0,0.2);
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
    }
    .nav.active {
        display: flex;
        transform: translateX(0);
    }
    .nav a {
        font-size: 1.2rem;
        margin: 20px 0;
        height: auto;
    }
    .nav-toggle {
        display: block; /* Mostra o botão no mobile */
    }
    .nav-toggle.active .hamburger {
        background: transparent; /* Linha do meio some */
    }
    .nav-toggle.active .hamburger::before {
        transform: translateY(0) rotate(45deg);
    }
    .nav-toggle.active .hamburger::after {
        transform: translateY(0) rotate(-45deg);
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .hero {
        padding: 80px 15px;
    }

    .app-content .image {
        display: none; /* Esconde a imagem em telas muito pequenas */
    }

    .contact-form {
        padding: 0 10px;
    }
}

/* Formulário de Contato */
.contato { background-color: var(--primary-color); color: var(--background-dark); }
.contato h2 { color: var(--background-dark); }
.contact-form { max-width: 600px; margin: 0 auto; text-align: left; }
.contact-form
    input, .contact-form textarea {
        width: 100%; padding: 12px; margin-bottom: 20px;
        border: none; border-radius: 5px; font-size: 1rem;
    }