/* HERO BUTTON PREMIUM ANIMATION (Mobile & Desktop) */

/* 1. Define the Keyframes */

/* Shine Effect (Passar brilho metálico) */
@keyframes shimmer {
    0% {
        background-position: 200% center;
    }

    100% {
        background-position: -200% center;
    }
}

/* Pulsar Suave (Respiração menos agressiva) */
@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

/* 2. Apply to the Hero Button */
.hero-actions .btn-primary {
    position: relative;
    overflow: hidden;
    /* Gradiente Dourado Rico */
    background: linear-gradient(110deg, #F5A623 20%, #ffc86b 40%, #ffc86b 55%, #F5A623 80%);
    background-size: 200% auto;

    /* Animation: Shimmer as usual, but smoother heartbeat */
    animation:
        shimmer 4s linear infinite,
        heartbeat 3s ease-in-out infinite;

    color: #000 !important;
    font-weight: 800 !important;
    /* Um pouco menos bold que 900 para elegância */
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(245, 166, 35, 0.3);
    /* Sombra base discreta */
    transition: all 0.3s ease;
}

/* 3. Hover State - REFINED & CLEANER */
.hero-actions .btn-primary:hover {
    animation: none;
    transform: translateY(-2px) scale(1.02);

    /* Apenas clareia um pouco o dourado, sem virar branco gritante */
    background: linear-gradient(110deg, #ffb03a 20%, #ffe090 40%, #ffe090 55%, #ffb03a 80%);
    background-size: 200% auto;
    background-position: -100% center;
    /* Fixa o brilho numa posição estética */

    /* Sombra controlada e elegante, não um borrão gigante */
    box-shadow: 0 10px 25px rgba(245, 166, 35, 0.4);

    color: #000 !important;
    /* Mantém preto para contraste */
    border-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

/* MOBILE FIXES (Keep previous layout rules) */
@media (max-width: 768px) {
    /* ----------------------------------------------------------- */
    /* 4. SPACE REDUCTION (Targeting User Identified Green Areas) */
    /* ----------------------------------------------------------- */

    /* Reduz a variável global de espaçamento pela metade no mobile */
    :root {
        --spacing-section: 50px !important;
        /* De 100px para 50px */
    }

    /* Reduz padding das seções principais - EXCETO HERO (Ajuste de Header) */
    .plans-section,
    .delivery-section,
    .impact-section,
    .team-section,
    .faq-section,
    .cta-final-section {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    /* CORREÇÃO DO HEADER SOBREPONDO HERO */
    /* O padding-top do Hero precisa ser maior para compensar o header fixo flutuante */
    .hero-section {
        padding-top: 140px !important;
        /* Aumentado para o texto sair de baixo do header */
        padding-bottom: 40px !important;
        /* Bottom segue reduzido */
        min-height: auto !important;
    }

    /* Aproxima o título do conteúdo da seção */
    .section-header {
        margin-bottom: 30px !important;
        /* De ~60px para 30px */
    }

    /* BUTTON > FAQ Gap Fix & BUTTON > TEAM Gap Fix */
    /* Remove margens excessivas dos wrappers de botões */
    .center-btn-wrapper,
    .hero-actions {
        margin-top: 25px !important;
        margin-bottom: 0 !important;
    }

    /* FAQ Específico - Trazendo mais pra cima */
    .faq-section {
        padding-top: 30px !important;
    }

    /* ----------------------------------------------------------- */


    /* Redução de fontes (Títulos e Subtítulos) */
    h1 {
        font-size: 2.2rem !important;
    }

    h2 {
        font-size: 1.8rem !important;
    }

    .hero-subtitle,
    .section-header p {
        font-size: 1rem !important;
        line-height: 1.5;
    }

    /* Hero Específico */
    .hero-text h1 {
        font-size: 2.4rem !important;
        line-height: 1.1;
    }

    /* FIX: "Quadros do Header" (Hero Benefits) Descentralizados */
    .hero-benefits {
        grid-template-columns: 1fr !important;
        max-width: 320px;
        margin: 0 auto 30px auto !important;
    }

    .hero-benefits li {
        width: 100%;
        justify-content: flex-start;
        padding: 12px 20px !important;
        text-align: left;
    }

    /* Previne overflow horizontal */
    .hero-content {
        padding-left: 15px;
        padding-right: 15px;
        overflow-x: hidden;
    }

    /* Botões mantendo tamanho legível, mas full width */
    .hero-actions .btn {
        width: 100%;
        display: block;
        text-align: center;
        padding: 15px !important;
    }

    /* 3. CENTER ICONS AND TITLES ON MOBILE (DELIVERY SECTION) */
    .delivery-card {
        align-items: center !important;
        text-align: center !important;
    }

    .delivery-icon-wrapper {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}