/* Estilos específicos para el landing de agencia-ia */

/* Hero fondo animado */
.hero-fondo-animado {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(19, 109, 236, 0.05) 0%, rgba(19, 109, 236, 0.1) 50%, rgba(19, 109, 236, 0.05) 100%);
    opacity: 0.5;
    z-index: 0;
}

/* Hero visual container */
.hero-visual {
    position: relative;
}

/* Botón scroll to top */
.boton-scroll-top {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.boton-scroll-top.visible {
    opacity: 1;
    pointer-events: auto;
}

.boton-scroll-top:hover {
    transform: translateY(-4px);
}

/* Smooth transitions */
a, button {
    transition: all 0.3s ease;
}

/* Animaciones suaves para elementos */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* Video container para mantener aspecto de móvil */
.video-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-container video {
    max-width: 300px;
    width: 100%;
    border-radius: 24px;
    border: 8px solid #1c1c1c;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    background: #000;
    display: block;
}

/* Responsive adjustments para videos */
@media (max-width: 1024px) {
    .video-container video {
        max-width: 250px;
    }
}

@media (max-width: 768px) {
    .video-container video {
        max-width: 200px;
    }
}