/* layout.css - Media queries para responsividad */

/* Mejora para móviles con CSS Scroll Snap */
@media (max-width: 767px) {
    /* La animación del menú ahora se gestiona en sections.css para mayor claridad */
    .nav-link {
        animation: fadeInLink 0.6s ease forwards; /* Nueva animación escalonada para enlaces */
        opacity: 0;
    }

    .nav-link:nth-child(1) { animation-delay: 0.1s; }
    .nav-link:nth-child(2) { animation-delay: 0.2s; }
    .nav-link:nth-child(3) { animation-delay: 0.3s; }
    /* Agrega más si hay más enlaces */

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

    .nav-toggle i {
        transition: transform 0.6s ease; /* Animación para icono */
    }

    .nav-toggle.active i {
        transform: rotate(180deg); /* Rotación para efecto "X" fluido */
    }

    .beneficios-slider-wrapper {
        padding: 0; /* Sin padding lateral en móvil */
        overflow: hidden; /* Evita que el slider con márgenes negativos cause un desbordamiento horizontal */
    }

    .beneficios-slider {
        /* El overflow ahora es siempre hidden, controlado por JS */
        overflow: hidden;
    }

    .beneficio-slide {
        flex-basis: 80%; /* Cada slide ocupa el 80% del viewport */
        /* Ya no se necesita scroll-snap-align */
        /* El margen se hereda ahora de la regla base en sections.css (margin: 0 15px) */
        max-width: 80%;
        /* La transición en móvil debe ser rápida para no interferir con el scroll-snap */
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    /* Ocultamos los puntos en móvil, ya que la interacción principal es el swipe */
    .slider-dots {
        display: none;
    }
}

/* Ajustes para Tablet y Escritorio */
@media (min-width: 768px) {
    .nav-contenedor {
        height: 75px;
    }

    .nav-toggle {
        display: none;
    }

    .nav-menu {
        display: flex;
        position: static;
        flex-direction: row;
        height: auto;
        width: auto;
        background: transparent;
        gap: 2rem;
        opacity: 1;
        transform: none;
        /* Reseteamos los efectos del menú móvil para que no tenga fondo ni sombra en desktop */
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .nav-menu .nav-link { /* Aumentamos especificidad para asegurar la sobreescritura */
        font-size: 1rem;
        color: var(--color-primario);
        font-weight: 600;
        /* Preparamos el botón para la animación de hover */
        padding: 10px 20px;
        border-radius: 50px;
        border: none;
        background: transparent;
        animation: none;
        transition: all var(--transicion); /* Aseguramos la transición suave */
    }

    .nav-menu .nav-link::before {
        display: block; /* Reactivamos el pseudo-elemento para la animación */
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(151, 184, 52, 0.1); /* Color de fondo del hover */
        border-radius: 50px; /* Coincide con el radio del enlace */
        transform: translateX(-101%); /* Inicia fuera, a la izquierda */
        transition: transform var(--transicion);
        z-index: -1; /* Se posiciona detrás del texto del enlace */
    }

    .nav-menu .nav-link:hover {
        color: var(--color-secundario);
        transform: translateY(-2px); /* Efecto de elevación */
        box-shadow: 0 4px 15px rgba(0, 61, 98, 0.1); /* Sombra sutil */
    }

    .nav-menu .nav-link:hover::before {
        transform: translateX(0); /* Desliza el fondo a su posición */
    }

    .hero-text-carousel {
        min-height: 80px;
    }

    .beneficio-slide {
        flex-basis: 45%;
        max-width: 45%;
    }

    /* El padding de la sección de oferta se controla ahora directamente en sections.css */

    /* Ajustamos el tamaño y estilo del texto descriptivo de la sección para consistencia */
    #oferta-comercial .seccion-descripcion {
        color: #000000 !important;
        text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        font-size: clamp(1rem, 3vw, 1.2rem); /* Mismo tamaño que el texto del carrusel hero */
    }

    .slider-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: linear-gradient(135deg, var(--color-primario) 0%, #004a7a 100%);
        color: var(--color-blanco);
        border: none;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
        cursor: pointer;
        transition: all var(--transicion);
        box-shadow: var(--sombra);
        z-index: 10;
    }

    .slider-nav:hover {
        background: linear-gradient(135deg, var(--color-secundario) 0%, #a8c93a 100%);
        transform: translateY(-50%) scale(1.1);
    }

    .slider-nav.left {
        left: 10px;
    }

    .slider-nav.right {
        right: 10px;
    }

    .beneficios-slider-wrapper {
        padding: 0 60px;
    }

    .contacto-contenedor {
        flex-direction: row;
        gap: 50px;
        align-items: flex-start;
    }

    .formulario-contacto,
    .info-contacto {
        flex: 1;
    }

    .footer-contenido {
        grid-template-columns: repeat(3, 1fr);
        text-align: left;
    }

    .footer-logo {
        margin: 0 0 1.5rem;
    }

    .footer-redes {
        justify-content: flex-start;
    }
}

@media (min-width: 1024px) {
    .news-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .beneficio-slide {
        flex-basis: 30%;
        max-width: 30%;
    }

    .beneficios-slider-wrapper {
        padding: 0 80px;
    }
    
    body {
        position: relative; /* Necesario para el z-index del pseudo-elemento */
        background-color: transparent; /* Permite que se vea el fondo del ::before */
    }
    
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        background-image: url('../img/Fondo.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed; /* Mantiene la imagen fija a lo largo de toda la página */
        opacity: 0.15; /* Se ajusta la opacidad para mejor legibilidad */
        z-index: -1; /* Detrás de todo el contenido */
        pointer-events: none;
    }
}