/* HERO SECTION */
.hero {
    position: relative;
    overflow: hidden;
    /* Padrão: foto estática (usado em /produtos, sem vídeo). */
    background: url('../img/banner.jpg') no-repeat center center/cover;
    /* Páginas internas: banner mais baixo. Só a Home, que tem o vídeo,
       ocupa a tela inteira (ver .hero-com-video abaixo). Numa página de
       catálogo, 100vh só empurra o produto para fora da primeira dobra. */
    /* max() garante um piso absoluto: só 58vh deixava o banner curto
       demais em tela baixa (ex.: 620px de altura), e aí o conteúdo
       encostava no menu mesmo com padding. */
    min-height: max(58vh, 440px);
    /* O header é fixo e transparente sobre o hero, então não ocupa espaço
       no fluxo. Sem esse padding, o justify-content:center centraliza o
       conteúdo na altura TOTAL do hero e o título nasce atrás do menu.
       83px do header + 32px de respiro. */
    padding-top: 115px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column!important;
    justify-content: center; /* Centraliza o conteúdo verticalmente */
    align-items: center; /* padrão (produtos): conteúdo centralizado, como sempre foi */
    color: var(--text-light);
}

/* Só a Home usa vídeo (classe extra no <header class="hero">) — o
   fallback/poster antes do vídeo carregar é o frame extraído dele, não a
   foto estática (que é o padrão de .hero acima, usado em /produtos). */
.hero.hero-com-video {
    background-image: url('../img/hero-poster.jpg');
    /* A Home é a única que ocupa a tela inteira — o vídeo é o argumento
       da primeira dobra ali. */
    min-height: 100vh;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* Respeita prefers-reduced-motion: some o vídeo, fica só o poster estático
   (definido como background do .hero acima). */
@media (prefers-reduced-motion: reduce) {
    .hero-video {
        display: none;
    }
}

/* A cena é um lobby real, bem iluminado (gente passando pela catraca/
   facial) — overlay pesado escondia o próprio produto em ação. Mais leve
   e direcional: só o suficiente pra manter o texto legível à esquerda,
   deixando a cena aparecer nos dois terços da direita; um véu inferior
   sutil ancora os bullets/CTA sem escurecer a cena toda. */
.hero .overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background:
        linear-gradient(90deg, rgba(13, 13, 13, 0.70) 0%, rgba(13, 13, 13, 0.40) 45%, rgba(13, 13, 13, 0.16) 75%),
        linear-gradient(to top, rgba(13, 13, 13, 0.52) 0%, rgba(13, 13, 13, 0) 38%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

/* Só a Home (hero-com-video): texto alinhado à esquerda, no mesmo
   container do header/logo, em vez de centralizado. Produtos mantém o
   centralizado de sempre. */
.hero.hero-com-video {
    align-items: stretch;
}

.hero-com-video .hero-content {
    width: 100%;
    max-width: 1140px; /* mesmo container-header (.container-header) do menu */
    margin: 0 auto;
    padding: 0 15px; /* mesmo padding do .container-header — texto cai bem embaixo da logo */
}

.hero-com-video .hero-content h1,
.hero-com-video .hero-content p,
.hero-com-video .hero-bullets,
.hero-com-video .hero-content .cta-button {
    max-width: 700px; /* não deixa a linha do texto esticar até a borda */
}

.logo {
    max-width: 200px;
    margin-bottom: 20px;
}

.badge {
    display: inline-block;
    background-color: var(--primary-color);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    color: #e0e0e0;
}

.hero-bullets {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
}

.hero-bullets span {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-bullets i {
    color: var(--whatsapp-green);
}

/* ANIMAÇÃO PULSAR */
.pulse {
    animation: pulse 2s infinite;
}