/* ======================================================================
   HOJA DE ESTILOS PERSONALIZADA - ADFACONSULTORES
   Archivo: css/estilos.css
   ====================================================================== */

/* 1. COMPORTAMIENTO GENERAL */
html {
    scroll-behavior: smooth;
    /* overflow-x en html, NO en body.
       En body rompe position:fixed en iOS Safari y algunos Android,
       haciendo desaparecer el menu movil y el boton de WhatsApp. */
    overflow-x: hidden;
}

/* ----------------------------------------------------------------------
   RESPONSIVE - CORRECCION DEL SCROLL HORIZONTAL EN MOVIL

   AOS anima con fade-left y fade-right desplazando los elementos 100px
   en horizontal. Ese desplazamiento ensancha el documento mas que la
   pantalla y provoca scroll lateral: el contenido se corre a un lado
   mientras el nav fijo se queda en su sitio.

   AOS ya se desactiva por JavaScript en moviles. Estas reglas son el
   respaldo por si el script no llega a cargar.
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {

    [data-aos] {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }

    /* Ningun elemento puede sobresalir del ancho de la pantalla */
    body {
        max-width: 100vw;
    }
}

/* 2. ANIMACIÓN DEL BOTÓN DE WHATSAPP */
@keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.animate-bounce-slow {
    animation: bounce-slow 3s infinite;
}

@media (prefers-reduced-motion: reduce) {
    .animate-bounce-slow { animation: none; }
}

/* 3. SECCIÓN DE INICIO: FONDO CON OVERLAY */
.fondo-con-imagen {
    background-image:
        linear-gradient(rgba(16, 32, 64, 0.85), rgba(16, 32, 64, 0.95)),
        url('../img/fondo-inicio.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Efecto parallax SOLO en escritorio, donde si funciona */
@media (min-width: 768px) {
    .fondo-con-imagen {
        background-attachment: fixed;
    }
}

/* 4. SECCIÓN NOSOTROS: FONDO CON IMAGEN */
.fondo-nosotros {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.95)),
        url('../img/fondo_nosotros.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}