/* ============================================
   HERO ACF - ESTILOS ADICIONALES
   ============================================ */

/* Estos estilos complementan los existentes en landing-styles.css 
   y aseguran que el hero ACF funcione correctamente */

.hero-acf {
    /* Asegurar que el hero ACF tenga el espaciado correcto */
    margin-top: 0;
}

/* Si no hay imagen de fondo en ACF, usar la imagen por defecto */
.hero-acf {
    background-image: url('https://ext.same-assets.com/1124030780/1533687289.jpeg');
}

/* Permitir override de la imagen de fondo si se añade después en ACF */
.hero-acf.has-custom-bg {
    background-image: var(--hero-bg-image);
}

/* Asegurar que el contenido del hero sea visible */
.hero-acf .hero-content {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
}

/* Mejoras responsive adicionales */
@media (max-width: 767px) {
    .hero-acf {
        min-height: auto;
        padding-bottom: 3rem;
    }
    
    .hero-acf .hero-content {
        min-height: auto;
        padding-top: 2rem;
    }
    
    .hero-acf .hero-title {
        font-size: 2rem;
    }
    
    .hero-acf .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .hero-acf .btn-primary-lg,
    .hero-acf .btn-secondary-lg {
        width: 100%;
        justify-content: center;
    }
}

/* Animación de entrada suave */
.hero-acf .hero-text {
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Asegurar que no haya conflictos con otros elementos del tema Astra */
body.home .hero-acf {
    margin-top: 0 !important;
}

/* Si Astra añade padding al contenido, eliminarlo para el hero */
.ast-separate-container.ast-right-sidebar #primary,
.ast-separate-container.ast-left-sidebar #primary,
.ast-separate-container #primary {
    margin-top: 0;
    padding-top: 0;
}

body.home.ast-separate-container .site-content > .ast-container {
    padding-top: 0;
}