/*================================================================
------------------------Menu de Navegacion ---------------------
================================================================-*/

/*-----------------Pantallas extra grandes-----------------------*/
@media (min-width: 1200px) {
    header {
        padding-left: 80px;
    }
    nav ul {
        gap: 60px; /* Espacio elegante para PC grande */
    }
}
/*-----------------------Tamaño Tablet--------------------------*/
@media (min-width: 768px) and (max-width: 1199px) {
    header {
       
        padding: 0 3% !important;
    }

    .img-logo {
        max-width: 160px;   /* Logo ligeramente más pequeño */
        margin-right: 40px; /* Menos espacio entre logo y links */
    }

    nav ul {
        gap: 25px;          /* REDUCCIÓN CLAVE: Espacio mucho más corto entre links */
    }

    nav ul li a {
        font-size: 0.85rem; /* Letra un poco más compacta */
    }
}

/*----------------------------TAMAÑO MOBILE---------------------*/

/* --- MENU DE NAVEGACION RESPONSIVO PARA TABLETS Y MÓVILES (Panel Lateral) --- */
@media (max-width: 575.98px) {
   body {
        /* Bajamos el padding a 76px exactos */
        padding-top: 76px !important; 
    }

    header {
        padding: 0 5% !important; 
        height: 70px; /* Alto del encabezado blanco */
        background-color: white;
        
        /* ELIMINAMOS EL BORDER-IMAGE que causa el hueco */
        border-bottom: none !important; 
        
        /* CREAMOS EL DEGRADADO como un pseudo-elemento para que sea perfecto */
        position: fixed;
        width: 100%;
    }

    /* Aseguramos que el banner verde no tenga margen propio arriba */
    .banner-principal, #inicio {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    header::after {
        content: "";
        position: absolute;
        bottom: -6px; /* Se pega justo debajo de los 70px del header */
        left: 0;
        width: 100%;
        height: 6px;
        background: linear-gradient(to right, #007bbd, #44a64b, #e9c400, #70298d);
    }

    /* Aseguramos que el banner verde suba hasta tocar la barrita */
    .banner-principal, #inicio {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .ocultar-movil {
        display: none !important;
    }
    
    /* 1. Botón Hamburguesa */
    .menu-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        margin-left: auto !important; 
        margin-right: 0 !important; 
        padding: 0 !important;
        z-index: 5000 !important;
    }
    .img-logo {
        margin-right: 0 !important;
        max-width: 150px; /* Un poco más pequeño para móvil */
    }
    .menu-toggle .bar {
        width: 25px;
        height: 3px;
        background-color: #70298d;
        border-radius: 5px;
    }

    /* 2. Panel del Menú Lateral - Ajustado a la derecha */
    #nav-menu {
        display: flex;
        position: fixed;
        top: 0; 
        right: -100%; 
        width: 50%; /* Ancho reducido para mayor elegancia */
        max-width: 280px; 
        max-height: 100vh;
        background-color: #ffffff !important;
        z-index: 9999; 
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: scroll; 
        flex-direction: column;
        padding-top: 60px; /* Menos espacio arriba para compactar */
        box-shadow: -2px 0 10px rgba(255, 255, 255, 0.05); /* Sombra mucho más sutil */
        -webkit-overflow-scrolling: touch; /* Suavidad táctil en iPhone/iPad */
    }

    #nav-menu.active {
        right: 0;
    }

    /* Ajuste de las opciones del menú */
   #nav-menu ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Alinea todo al principio */
    height: auto; /* IMPORTANTE: Que no intente llenar toda la pantalla */
    margin: 0;
    padding: 0;
}

  #nav-menu ul li {
    width: 100%;
    height: auto; /* Evita que tengan un alto fijo */
    border-bottom: 1px solid #f2f2f2;
}

   /* 3. Ajustamos el espacio real donde haces clic */
#nav-menu ul li a {
    display: block; 
    /* Reducimos el padding vertical a 15px (puedes bajarlo a 10px si quieres más pegado) */
    padding: 15px 20px !important; 
    line-height: 1.2; /* Reduce el espacio entre líneas de texto */
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}

    /* EFECTO DE ILUMINACIÓN AL PASAR EL MOUSE (HOVER) */
    #nav-menu ul li a:hover {
        background-color: #f7f0ff !important; /* Iluminación de fondo sutil */
        color: #70298d !important; /* Texto cambia a morado */
        padding-right: 40px; /* Efecto de movimiento desde la derecha */
    }

#nav-menu ul li a.btn-factura {
        background-color: #44a64b !important;
        color: #ffffff !important;
        margin: 15px 10%;                /* Margen lateral en el panel */
        padding: 12px !important;
        border-radius: 8px;
        text-align: center;
        border-bottom: none !important;  /* Quita la raya gris del menú móvil */
    }
    
    /* Asegura que no salga el subrayado en móvil */
    #nav-menu ul li a.btn-factura:hover {
        padding-right: 12px !important;  /* Evita el desplazamiento lateral del menú móvil */
    }
    /* 3. El Overlay de Fondo - Menos sombreado */
    .menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.2); /* Fondo mucho más claro */
        z-index: 3000; 
        transition: opacity 0.4s ease;
        opacity: 0;
    }

    .menu-overlay.active {
        display: block;
        opacity: 1;
    }
}




/* ============================================================
   1. MOBILE (Hasta 575.98px)     (Secciones 3 a 5  Banner Pricnipal a botones)  
   ============================================================ */
@media (max-width: 575.98px) {
    .banner-principal {
        height: 500px; /* Reducimos altura para que el chavo se vea bien */
        padding-left: 5%;
        padding-right: 5%;
        background-position: center 0%; /* Subimos más la imagen */
        justify-content: center;
        text-align: center;
    }

    .contenido-banner {
        margin-top: 20px; /* Bajamos el texto para que no choque con el ticker */
    }

    .linea-amarilla {
        margin: 0 auto 15px auto; /* Centramos la línea */
    }

    .subtitulo {
        font-size: 2.2rem; /* Tamaño manejable para celulares */
        letter-spacing: -1px;
    }

    .titulo {
        font-size: 1rem;
        margin-bottom: 25px;
    }

    .contenedor-acciones {
        flex-direction: column;
        gap: 15px;
    }

    .boton-contratar {
       width: auto;               /* Deja de ocupar todo el ancho */
        display: inline-block;     /* Permite que el ancho sea según el texto */
        min-width: 200px;          /* Le da un tamaño mínimo para que no sea muy chiquito */
        max-width: 280px;          /* Evita que se alargue demasiado */
        padding: 12px 25px;        /* Un poco más estilizado */
        font-size: 1rem;         /* Ajustamos un pelín el texto */
        margin: 0 auto;            /* Lo mantiene centrado si el padre es flex */
    
    }
}

/* ============================================================
   2. TABLET (768px a 991.98px)
   ============================================================ */
@media (min-width: 820px) and (max-width: 1180px) {
    .banner-principal {
        height: 600px;
        padding-left: 8%;
    }

    .subtitulo {
        font-size: 3rem; /* Tamaño intermedio */
    }

    .titulo {
        font-size: 1.2rem;
    }
}

/* ============================================================
   3. DESKTOP (992px a 1199.98px)
   ============================================================ */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .banner-principal {
        height: 650px;
    }

    .subtitulo {
        font-size: 3.2rem;
    }
}

/* ============================================================
   4. EXTRA LARGE DEVICES (Desde 1200px)
   ============================================================ */
@media (min-width: 1200px) {
    /* Aquí el diseño luce en todo su esplendor como lo tenías */
    .banner-principal {
        height: 700px;
    }

    .subtitulo {
        font-size: 3.5rem;
    }

    .contenido-banner {
        max-width: 1000px;
    }
}

/*================================================================
------------------------BENEFICIOS 3 COLUMNAS ---------------------
================================================================-*/
/* --- AJUSTE RESPONSIVO (MÓVIL) --- */
@media (max-width: 768px) {
    .seccion-beneficios {
        margin-top: 20px;     /* Quitamos la superposición en móviles para evitar problemas */
        display:none;
    }
    
    .contenedor-beneficios {
        flex-direction: column; /* Colocamos los elementos uno bajo otro */
        gap: 40px;
        padding: 30px 15px;
    }
    
    .beneficio-item {
        padding: 0;
    }
    
    .beneficio-item.divider {
        border-left: none;    /* Quitamos el divisor vertical */
        border-top: 1px solid rgba(255, 255, 255, 0.3); /* Añadimos uno horizontal */
        padding-top: 30px;
    }
}

/*================================================================
------------------------NOSOTROS----------------------------------
================================================================-*/
/* --- OCULTAR TODO EL BLOQUE DE NOSOTROS EN MÓVILES --- */
@media (max-width: 768px) {
    .seccion-nosotros, 
    .encabezado-central, 
    .titulo-nosotros, 
    .linea-verde-central {
        display: none !important;
        visibility: hidden;
        height: 0;
        margin: 0;
        padding: 0;
    }
}
/*================================================================
------------------------PLANES DE INTERNET----------------------------------
================================================================-*/

/* --- AJUSTE PARA MÓVIL: DESLIZAMIENTO HORIZONTAL (2 TARJETAS) --- */
@media (max-width: 600px) {
    
    /* 1. Ajustamos el título y la línea para que no rompan el diseño */
    .titulo-planes {
        font-size: 1.8rem;
    }
    .linea-decorativa {
        width: 80%; /* Línea más corta en móvil */
    }

    /* 2. Configuramos el contenedor para permitir el scroll horizontal */
    .container-cards {
        display: flex;
        flex-wrap: nowrap;       /* Evita que las tarjetas se vayan para abajo */
        overflow-x: auto;        /* Habilita el deslizamiento horizontal */
        scroll-snap-type: x mandatory; /* Hace que las tarjetas "encajen" al deslizar */
        -webkit-overflow-scrolling: touch; /* Suavidad en iOS */
        gap: 15px;               /* Espacio entre tarjetas */
        padding: 40px 20px 60px; /* Padding extra abajo para el botón que sobresale */
        justify-content: flex-start;
        width: 100vw;            /* Ocupa el ancho de la pantalla */
    }

    /* 3. Ajustamos el tamaño de cada tarjeta para que quepan exactamente 2 */
    .card {
        /* Calculamos el ancho: (100% / 2) menos el espacio del gap */
        flex: 0 0 75%; 
        min-width: 75%;
        scroll-snap-align: center; /* La tarjeta se centra al soltar el dedo */
        padding: 30px 15px;      /* Reducimos padding interno para que quepa el texto */
    }

    /* 4. Ajustes de texto para que no se desborde en tarjetas pequeñas */
    .card h2 {
        font-size: 1.5rem;
    }
    .card .price {
        font-size: 1.8rem;
    }
    .card .features {
        font-size: 0.85rem;
    }

    /* 5. Ocultar la barra de scroll (opcional, para que se vea más limpio) */
    .container-cards::-webkit-scrollbar {
        display: none;
    }
}
/*FLECHAS*/
/* Solo mostrar en móviles */
@media (max-width: 600px) {
    .seccion-planes-completa {
        position: relative; /* Necesario para posicionar las flechas */
    }

    .flechas-carrusel {
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 60%;
        transform: translateY(-50%);
        width: 100%;
        left: 0;
        z-index: 10;
        pointer-events: none; /* Las flechas en sí no bloquean el clic de fondo */
    }

    .flecha {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.1); /* Fondo blanco traslúcido */
        color: #333; /* Color oscuro para el símbolo */
        border: none;
        border-radius: 50%;
        width: 50px; /* Área de clic grande */
        height: 50px;
        font-size: 1.8rem;
        cursor: pointer;
        pointer-events: auto; /* Permite clics solo en el botón */
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        transition: all 0.3s ease;
    }

    .flecha:hover {
        background-color: rgba(255, 255, 255, 0.27);
        transform: scale(1.1);
    }

    .flecha-izq {
        margin-left: 10px;
    }

    .flecha-der {
        margin-right: 10px;
    }
}
/* ================================================================
   2. TABLET (min-width: 768px y max-width: 991.98px)
   ================================================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
    .seccion-planes-completa {
        position: relative;
        padding: 60px 20px; /* Un poco más de aire a los lados */
    }

    .flechas-carrusel {
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 50%; /* Centrado vertical más exacto */
        transform: translateY(-50%);
        width: 100%;
        left: 0;
        z-index: 10;
        pointer-events: none;
    }

    .flecha {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.15); /* Ligeramente más visible */
        color: #333;
        border: none;
        border-radius: 50%;
        width: 60px; /* Botón un poco más grande para tablets */
        height: 60px;
        font-size: 2rem;
        cursor: pointer;
        pointer-events: auto;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        transition: all 0.3s ease;
    }

    .flecha:hover {
        background-color: rgba(255, 255, 255, 0.4);
        transform: scale(1.1);
        color: #008744; /* Color institucional al pasar el mouse */
    }

    .flecha-izq {
        margin-left: 20px; /* Más separado del borde que en móvil */
    }

    .flecha-der {
        margin-right: 20px;
    }
}
/*================================================================
------------------------OFICINAS----------------------------------
================================================================-*/
/* --- RESPONSIVO --- */
@media (max-width: 600px) {
    .contenido-oficinas {
        flex-direction: column;
        text-align: center;
        gap: 50px;
    }
    .columna-info {
        align-items: center;
    }
}
/*================================================================
------------------------FORMAS DE PAGO-----------------------------------
================================================================*/
/* --- AJUSTE ESPECÍFICO PARA TELÉFONOS --- */
@media (max-width: 600px) {
    
    /* 1. Reducimos el espacio exagerado del encabezado */
    .encabezado-centrado {
        margin-top: 50px; 
        margin-bottom: 30px;
    }

    .encabezado-centrado h2 {
        font-size: 1.5rem; /* Título un poco más pequeño para que no rompa */
        padding: 0 15px;
    }

    /* 2. Ajustamos la línea verde para que no se salga de la pantalla */
    .linea-verde-centrada {
        width: 70%;
    }

    /* 3. OCULTAMOS LAS IMÁGENES POR COMPLETO */
    .columna-ilustracion {
        display: none !important;
    }

    /* 4. Centramos los bloques de texto y eliminamos márgenes laterales */
    .contenedor-dinamico-pagos {
        flex-direction: column;
        padding: 0 20px; /* Un poco de aire a los lados */
    }

    .columna-datos-especifica {
        gap: 40px; /* Espacio entre Transferencias y Depósitos */
    }

    .bloque-derecha, .bloque-izquierda {
        margin-right: 0 !important;
        margin-left: 0 !important;
        text-align: center !important;
        align-self: center !important;
        width: 100%;
    }

    /* 5. Ajuste de los datos de cuenta para que sean fáciles de leer */
    .datos-cuenta {
        font-size: 0.95rem;
        line-height: 1.4;
    }
}
/* ================================================================
      ------------------- ZONA DE COBERTURA-----------------------

   1. EXTRA LARGE DEVICES (min-width: 1200px)
   ================================================================ */
@media (min-width: 1200px) {
    .seccion-cobertura {
        padding: 100px 0;
    }

    .contenedor-mapa-proporcional {
        max-width: 1200px; /* Un poco más ancho en pantallas pro */
    }

    .marco-mapa {
        height: 550px; /* Altura imponente para escritorio */
        border-radius: 8px; /* MANTENEMOS TU CURVATURA ORIGINAL */
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    }
}

/* ================================================================
   2. TABLET (min-width: 768px y max-width: 991.98px)
   ================================================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
    .seccion-cobertura {
        padding: 70px 5%;
    }

    .marco-mapa {
        height: 450px;
        border-radius: 8px; /* MANTENEMOS TU CURVATURA ORIGINAL */
    }
}

/* ================================================================
   3. MOBILE (max-width: 575.98px)
   ================================================================ */
@media (max-width: 575.98px) {
    .seccion-cobertura {
        padding: 40px 5%;
    }

    .contenedor-mapa-proporcional {
        padding: 0;
        margin-top: 15px;
    }

    .marco-mapa {
        height: 320px; /* Altura cómoda para celular */
        border-radius: 8px; /* MANTENEMOS TU CURVATURA ORIGINAL */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    }
}


/* ================================================================
      ------------------- 4 APARTADOS VERDES----------------------*/
/* ================================================================
   1. EXTRA LARGE DEVICES (min-width: 1200px)
   ================================================================ */
@media (min-width: 1200px) {
    .seccion-beneficios-gancho {
        padding: 40px 5%; 
    }

    .contenedor-iconos-beneficios {
        max-width: 1400px;
        gap: 60px; /* Mayor separación en pantallas grandes */
    }

    .info-texto p {
        font-size: 1.1rem; /* Texto más imponente */
        max-width: 220px;
    }

    .circulo-verde-icono {
        width: 60px; /* Un poco más grandes para que luzcan */
        height: 60px;
    }
}

/* ================================================================
   2. TABLET (min-width: 768px y max-width: 991.98px)
   ================================================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
    .contenedor-iconos-beneficios {
        flex-wrap: wrap; /* Permite acomodarse en 2 filas */
        justify-content: space-around;
        gap: 40px;
    }

    .beneficio-card {
        flex: 0 1 40%; /* Salen de dos en dos */
        min-width: 220px;
    }
    
    .info-texto p {
        max-width: 200px;
    }
}

/* ================================================================
   3. MOBILE (max-width: 575.98px)
   ================================================================ */
@media (max-width: 575.98px) {
    .seccion-beneficios-gancho {
        padding: 20px 5%; 
    }

    .contenedor-iconos-beneficios {
        flex-direction: column; /* Lista vertical */
        gap: 20px;
        margin-top: 10px;
    }

    .beneficio-card {
        min-width: 100%;
        padding-left: 5%; /* Un poco de aire lateral */
        gap: 15px;
    }

    .circulo-verde-icono {
        width: 55px; /* Compactos para no generar scroll innecesario */
        height: 55px;
        border-radius: 50px !important; /* Mantenemos el estilo cuadrado */
    }

    .circulo-verde-icono i {
        font-size: 24px;
    }

    .info-texto p {
        font-size: 0.9rem;
        max-width: 100%; /* El texto usa todo el ancho disponible */
    }
}






/* ================================================================
      ------------------- AVISOS IMPORTANTES-----------------------
/* ============================================================
   1. EXTRA LARGE DEVICES (min-width: 1200px)
   ================================================================ */
@media (min-width: 1200px) {
    .seccion-avisos {
        padding: 100px 0; /* Más espacio para que luzca en pantallas pro */
    }

    .contenedor-avisos {
        max-width: 1300px;
        gap: 40px; /* Mayor separación entre avisos */
    }

    .tarjeta-aviso {
        border-radius: 0x; /* Bordes un poco más curvos en pantallas grandes */
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    }
}

/* ================================================================
   2. TABLET (min-width: 768px y max-width: 991.98px)
   ================================================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
    .contenedor-avisos {
        gap: 20px;
        padding: 0 20px;
    }

    .tarjeta-aviso {
        aspect-ratio: 4 / 5; /* Las hacemos un poco más altas para tablet */
    }
}

/* ================================================================
   3. MOBILE (max-width: 575.98px)
   ================================================================ */
@media (max-width: 575.98px) {
    .seccion-avisos {
        padding: 50px 5%;
    }

    .contenedor-avisos {
        flex-direction: column; /* Un aviso debajo de otro */
        gap: 30px;
        margin-top: 20px;
    }

    .tarjeta-aviso {
        width: 100%;
        aspect-ratio: 16 / 9; /* Formato panorámico para que no ocupen toda la pantalla */
        border-radius: 0px;
    }

    /* En móvil el hover no existe, así que opcionalmente puedes 
       dejar la imagen de color fija o quitar la transición */
    .img-hover {
        opacity: 0; /* Se mantiene oculto hasta que se toque */
    }
}
/* ================================================================
      ------------------- FORMULARIO DE CONTACTO-----------------------
/* ============================================================
   --- AJUSTE PARA EXTRA LARGE (PANTALLAS > 1200px) ---
   ============================================================ */
@media (min-width: 1200px) {
    .seccion-contacto-final {
        min-height: 800px; /* Más presencia visual */
        padding: 120px 0;
    }

    .marco-decorativo-blanco {
        max-width: 1200px; /* Aprovechamos el ancho extra */
        padding: 60px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        background: rgba(255, 255, 255, 0.1); /* Efecto vidrio más nítido */
    }

    .titulo-blanco {
        font-size: 3rem; /* Título más imponente */
    }

    .titulo-blanco::after {
        width: 550px; /* Línea de Figma expandida */
    }

    .contenido-flex-contacto {
        gap: 60px; /* Más aire entre el mapa y los inputs */
    }

    .input-glass {
        font-size: 1.2rem;
        padding: 18px 25px;
    }

    .boton-enviar {
        font-size: 1.6rem;
        padding: 20px;
        letter-spacing: 2px;
    }
}
/* ================================================================
   1. TABLET (768px - 991.98px)
   ================================================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
    .marco-decorativo-blanco {
        padding: 30px;
        max-width: 90%;
    }

    .titulo-blanco {
        font-size: 2rem;
    }

    .titulo-blanco::after {
        width: 80%; /* Línea más corta en tablet */
    }

    .contenido-flex-contacto {
        gap: 20px;
    }
}

/* ================================================================
   2. MOBILE (MÁXIMO 575.98px)
   ================================================================ */
@media (max-width: 575.98px) {
    .seccion-contacto-final {
        padding: 50px 20px;
        min-height: auto;
    }

    .marco-decorativo-blanco {
        padding: 25px 15px;
        border: none; /* Quitamos borde para ganar espacio */
        background: rgba(102, 176, 80, 0.3); /* Tinte verde más visible */
        backdrop-filter: blur(10px);
    }

    .titulo-blanco {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }

    .titulo-blanco::after {
        width: 150px; /* Línea pequeña en móvil */
    }

    .contenido-flex-contacto {
        flex-direction: column; /* Mapa arriba, Formulario abajo */
        gap: 30px;
    }

    .mapa-contacto {
        height: 250px; /* Limitamos altura del mapa en cel */
        order: 1;
    }

    .formulario-glass {
        order: 2;
        padding: 0;
        gap: 15px;
    }

    .input-glass {
        font-size: 1rem;
        padding: 12px 15px;
    }

    .boton-enviar {
        font-size: 1.2rem;
        padding: 12px;
    }
}

/* ================================================================
      ------------------- ICONO WHASTAPP-----------------------

/* ================================================================
   TABLET (768px - 991.98px)
   ================================================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
    .whatsapp-float {
        padding: 8px 15px;
        bottom: 20px;
        right: 20px;
    }
    .texto-ws-ventas {
        font-size: 13px;
    }
}

/* ================================================================
   MOBILE (MÁXIMO 575.98px) - SE VUELVE CÍRCULO
   ================================================================ */
@media (max-width: 575.98px) {
    .texto-ws-ventas {
        display: none; /* Escondemos el texto en celular */
    }
    
    .whatsapp-float {
        padding: 12px; 
        border-radius: 50%; /* Círculo perfecto */
        bottom: 15px;
        right: 15px;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.4);
    }

    .whatsapp-float img {
        width: 30px;
        height: 30px;
        margin: 0; /* Centramos la imagen */
    }
}




/* ================================================================
      ------------------- FOOTER-----------------------

.   1. TABLET (768px - 991px)
   ================================================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
    .contenedor-footer {
        gap: 50px; /* Reduce espacio para tablets */
    }
    .enlaces-footer {
        gap: 40px;
    }
}

/* ================================================================
   2. MOBILE (MÁXIMO 575px) - AQUÍ SE QUITÓ EL SCROLL
   ================================================================ */
@media (max-width: 575.98px) {
    .contenedor-footer {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        text-align: center;
    }

    .logo-footer {
        margin-top: 20px !important;
    }

    .logo-footer img {
        max-width: 200px; /* Logo más chico para ahorrar espacio */
    }

    .logo-subtexto {
        font-size: 0.85rem;
        margin-top: -5px !important;
    }

    /* PONE LAS 3 COLUMNAS EN UNA SOLA FILA */
    .enlaces-footer {
        display: grid;
        grid-template-columns: repeat(3, 1fr); 
        gap: 5px;
        width: 100%;
        align-items: flex-start;
    }

    .columna-footer h3 {
        font-size: 0.7rem; /* Texto pequeño para que quepa */
        margin-bottom: 10px;
    }

    .columna-footer ul li a, 
    .contacto-footer ul li {
        font-size: 0.6rem; /* Letra compacta para móvil */
    }

    .contacto-footer ul li {
        flex-direction: column; /* Icono arriba del texto */
        gap: 4px;
    }

    .footer-inferior {
        margin-top: 30px;
    }
}