/* RESET GENERAL */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: #333;
    line-height: 1.6;
    background-color: #fcfcfc;

    /* --- AQUÍ CAMBIAMOS EL PUNTERO --- */
    /* El valor 'auto' al final es obligatorio como respaldo si la imagen falla */
    /*cursor: url('cursor.png'), auto;*/  /*PENDIENTE HABILITARLE SI DESEAN*/
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    padding: 60px 0;
}

/* NAVBAR FIJO */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    
    /* Bajamos el blanco al 10% (0.1) para que casi no aporte color, solo reflejo */
    background-color: rgba(255, 255, 255, 0.1); 
    
    /* Mantenemos el desenfoque para que las letras sigan siendo legibles sobre el render */
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    
    border: none;
    box-shadow: none; 
    z-index: 1000;
    transition: all 0.3s ease;

    /* --- AJUSTE DE DIFUMINADO EXTREMO --- */
    /* Ahora empieza a desvanecerse desde la mitad (50%) hasta desaparecer por completo abajo */
    -webkit-mask-image: linear-gradient(to bottom, black 40%, rgba(0,0,0,0.5) 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 40%, rgba(0,0,0,0.5) 70%, transparent 100%);
}
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}

/* Controlar el contenedor del logo */
.logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* Controlar el tamaño de la imagen del logo */
.logo-img {
    height: 75px; /* Ajusta este número (por ejemplo, entre 40px y 55px) según el diseño de tu logo */
    width: auto;  /* Mantiene la proporción original para que no se deforme */
    display: block;
    transition: transform 0.3s ease;
}

/* Efecto opcional: una ligera reacción al pasar el cursor sobre el logo */
.logo-img:hover {
    transform: scale(1.02); 
}

.logo a span {
    color: #2f855a; /* Verde Sostenible */
}

.nav-menu a {
    color: #ffffff; /* Cambia a blanco para un contraste de alto nivel sobre imágenes oscuras */
    text-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Una pequeña sombra para que siempre sea legible */
    text-decoration: none;
    margin-left: 25px;
    font-weight: 600;
    font-size: 14px;
    transition: color 0.3s;
}

.nav-menu a:hover, .nav-menu a.active {
    color: #022692;
}

.nav-menu .btn-nav {
    background-color: #022692;
    color: #fff;
    padding: 10px 20px;
    border-radius: 25px;
}

.nav-menu .btn-nav:hover {
    background-color: #022692;
    color: #fff;
}
/* --- CONFIGURACIÓN INICIAL DE LOGOS --- */
.logo-light {
    display: block; /* Visible al inicio */
}

.logo-dark {
    display: none; /* Oculto al inicio */
}

/* --- COMPORTAMIENTO CUANDO SE HACE SCROLL --- */

/* 1. Cambios en la barra completa al bajar */
.navbar.scrolled {
    /* Aquí puedes elegir el color de fondo de la barra cuando bajas. 
       Al ponerlo un poco más blanco sólido o un gris muy limpio, proteges la lectura */
    background-color: rgba(255, 255, 255, 0.95); 
    
    /* Quitamos la máscara difuminada para que abajo actúe como una barra normal */
    -webkit-mask-image: none;
    mask-image: none;
    
    /* Añadimos una sutil sombra inferior cuando pasa por las secciones blancas */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); 
}

/* 2. Intercambio de logotipos al bajar */
.navbar.scrolled .logo-light {
    display: none; /* Oculta el logo blanco */
}

.navbar.scrolled .logo-dark {
    display: block; /* Muestra el logo oscuro */
}

/* 3. Cambiar el color de los enlaces del menú al bajar (Opcional)
   Si tus letras eran blancas al inicio, aquí las transformamos al azul marino oscuro de tu paleta */
.navbar.scrolled .nav-menu a:not(.btn-nav) {
    color: #1a365d; /* Tu azul marino corporativo */
    text-shadow: none; /* Quitamos la sombra de texto que usamos arriba */
}

.navbar.scrolled .nav-menu a:hover, 
.navbar.scrolled .nav-menu a.active:not(.btn-nav) {
    color: #220581; /* Tu verde al pasar el cursor */
}

/* MENÚ MÓVIL */
.menu-toggle {
    display: none;
    cursor: pointer;
}

.menu-toggle .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: #1a365d;
    transition: all 0.3s ease;
}

/* HERO SLIDER */
.hero-slider {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.slide.active {
    opacity: 1;
}

.hero-content {
    color: #fff;
    max-width: 800px;
    padding: 20px;
}

.hero-content h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 18px;
    margin-bottom: 30px;
}

.btn-primary {
    background-color: #022692;
    color: #fff;
    padding: 12px 30px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 30px;
    transition: background 0.3s;
}

.btn-primary:hover {
    background-color: #1a365d;
}

/* SOBRE NOSOTROS */
.about-section {
    text-align: center;
    padding-top: 120px; /* Ajustado para que el texto no quede oculto bajo el menú */
}

.about-section h2 {
    font-size: 32px;
    color: #1a365d;
    margin-bottom: 20px;
}

.about-section p {
    font-size: 16px;
    color: #4a5568;
    max-width: 900px;
    margin: 0 auto 40px auto;
}

.mision-vision {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-top: 40px;
}

.mision-vision .box {
    background-color: #edf2f7;
    padding: 30px;
    border-radius: 8px;
    flex: 1;
    text-align: left;
    border-left: 5px solid #022692;
}

.mision-vision .box h3 {
    color: #1a365d;
    margin-bottom: 10px;
}

/* INDUSTRIAS (GRID) */
.industries-section {
    background-color: #f7fafc;
}

.section-title {
    text-align: center;
    margin-bottom: 5px;
}

.section-title h2 {
    font-size: 32px;
    color: #1a365d;
}

.grid-industries {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.card {
    background: #fff;
    padding: 35px 25px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 20px rgba(0,0,0,0.1);
}

.card-icon {
    font-size: 40px;
    margin-bottom: 15px;
}

.card h3 {
    color: #1a365d;
    margin-bottom: 15px;
}

/* SECCIÓN CONTACTO */
/* SECCIÓN CONTACTO CON FONDO ESTÁTICO (PARALLAX) */
.contact-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    
    /* Configuración de la imagen de fondo y el degradado oscuro */
    background-image: linear-gradient(rgba(17, 36, 80, 0.6), rgba(17, 34, 74, 0.75)), url('imgbanners3.webp'); 
    background-size: cover;
    background-position: center;
    
    /* ESTA LÍNEA LOGRA EL EFECTO ESTÁTICO */
    background-attachment: fixed; 
}

/* Caja de cristal translúcida para asegurar una excelente legibilidad */
.contact-glass {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 50px 40px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.contact-container {
    display: flex;
    gap: 50px;
    align-items: center;
}

.contact-info, .contact-form {
    flex: 1;
    color: #ffffff;
}

.contact-info h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
}

.contact-info p {
    color: #e2e8f0;
    font-size: 16px;
    margin-bottom: 25px;
}

.contact-info ul {
    list-style: none;
}

.contact-info ul li {
    margin-bottom: 15px;
    font-size: 16px;
}

/* Estilos de los campos del formulario para que combinen con el fondo */
.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 14px;
    margin-bottom: 15px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.9); /* Blanco limpio para los inputs */
    border: 1px solid transparent;
    outline: none;
    font-size: 15px;
    color: #333;
    transition: all 0.3s ease;
}

.contact-form input:focus, .contact-form textarea:focus {
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(47, 133, 90, 0.3);
}

.btn-submit {
    background-color: #85402f; /* Tu verde corporativo original */
    color: white;
    border: none;
    padding: 14px 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    width: 100%; /* Botón completo */
    transition: background 0.3s, transform 0.2s;
}

.btn-submit:hover {
    background-color: #276749;
    transform: translateY(-2px);
}

/* Desactivar Parallax en celulares/tablets para evitar tirones y problemas de carga */
@media (max-width: 1024px) {
    .contact-section {
        background-attachment: scroll;
    }
    .contact-container {
        flex-direction: column;
        gap: 40px;
    }
    .contact-info h2 {
        font-size: 28px;
    }
}

/* FOOTER */
footer {
    background-color: #0f172a;
    color: #718096;
    text-align: center;
    padding: 20px 0;
    font-size: 14px;
}

/* RESPONSIVE DESIGN */
@media (max-width: 768px) {
    .nav-menu {
        position: absolute;
        top: 100%;
        left: -100%;
        width: 100%;
        background-color: #fff;
        flex-direction: column;
        display: flex;
        text-align: center;
        transition: 0.5s;
        box-shadow: 0 10px 10px rgba(0,0,0,0.1);
        padding: 20px 0;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-menu a {
        margin: 15px 0;
    }

    .menu-toggle {
        display: block;
    }

    .mision-vision, .contact-container {
        flex-direction: column;
    }
    
    .hero-content h1 {
        font-size: 32px;
    }
}

/* --- SECCIÓN GALERÍA INTERACTIVA --- */
.galeria-seccion {
    background-color: #ffffff;
    padding: 60px 0;
    width: 100%;
    user-select: none; /* Evita que se seleccione texto azul al arrastrar */
}

.galeria-titulo {
    text-align: center;
    margin-bottom: 40px;
}

.galeria-titulo h2 {
    font-size: 32px;
    color: #1a365d;
}

/* Ventana que oculta lo que se sale de la pantalla */
.carrusel-contenedor {
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
    cursor: grab; /* Cursor con forma de mano abierta (para agarrar) */
}

.carrusel-contenedor:active {
    cursor: grabbing; /* Cursor de mano cerrada al hacer clic */
}

/* Línea que contiene las imágenes */
.carrusel-track {
    display: flex;
    gap: 20px;
    width: max-content;
    padding-left: 50px; /* Margen inicial estético */
    will-change: transform;
    transition: transform 0.1s ease-out; /* Suaviza el movimiento al soltarlo */
}

.carrusel-track img {
    width: 320px;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.06);
    pointer-events: none; /* Asegura que el mouse interactúe con el contenedor, no con la foto */
    transition: transform 0.3s ease;
}

.carrusel-track img:hover {
    transform: scale(1.02);
}

/* --- BOTÓN FLOTANTE DE WHATSAPP --- */
.whatsapp-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 65px;
    height: 65px;
    background-color: #25d366; /* Verde oficial de WhatsApp */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Asegura que flote por encima de todo */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
    
    /* VINCULAMOS LA ANIMACIÓN DEL RESPLANDOR (Duración 2 segundos, infinita) */
    animation: resplandor-pulso 2s infinite;
}

/* El ícono SVG blanco de WhatsApp */
.icon-whatsapp {
    width: 35px;
    height: 35px;
    fill: #ffffff;
}

/* EFECTO DE AGRANDADO AL PASAR EL MOUSE */
.whatsapp-btn:hover {
    transform: scale(1.1);
}

/* --- GLOBO ROJO DE NOTIFICACIÓN --- */
.badge-notificacion {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: #ff1654; /* Rojo vibrante de tu imagen */
    color: white;
    font-size: 13px;
    font-weight: 700;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: 1.5px solid #ffffff; /* Borde blanco sutil para destacar */
}

/* --- ANIMACIÓN CSS DEL RESPLANDOR (Efecto Onda/Pulso) --- */
@keyframes resplandor-pulso {
    0% {
        /* Estado inicial con sombra pequeña y nítida */
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7), 
                    0 4px 10px rgba(0, 0, 0, 0.3);
    }
    70% {
        /* La sombra se expande y se difumina (efecto aura brillante) */
        box-shadow: 0 0 0 20px rgba(37, 211, 102, 0), 
                    0 4px 10px rgba(0, 0, 0, 0.3);
    }
    100% {
        /* Se desvanece por completo antes de reiniciar el ciclo */
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 
                    0 4px 10px rgba(0, 0, 0, 0.3);
    }
}



/* 1. La sección general (puedes darle un fondo si quieres) */
.seccion-imagen {
    width: 100%;
    background-color: #ffffff;
    padding: 60px 0; /* Espaciado arriba y abajo de la sección */
    display: flex;
    justify-content: center; /* Centra la caja horizontalmente */
}

/* 2. El contenedor que limita el tamaño máximo en pantalla */
.contenedor-img {
    width: 90%;          /* Ocupa el 90% de la pantalla en celulares */
    max-width: 800px;    /* En pantallas grandes, no medirá más de 800px (Ajusta este número a tu gusto) */
    margin: 0 auto;      /* Centrado de seguridad */
    border-radius: 15px; /* Bordes redondeados estéticos (opcional) */
    overflow: hidden;    /* Corta la imagen si intentara salirse de las esquinas redondeadas */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Una sombra suave para darle profundidad */
}

/* 3. La regla mágica para la imagen */
.imagen-adaptable {
    width: 100%;         /* Se estira o encoge hasta rellenar exactamente el ancho de su contenedor */
    height: auto;        /* Mantiene la proporción original para que no se vea aplastada o deformada */
    display: block;      /* Elimina un pequeño espacio en blanco que los navegadores dejan abajo por defecto */
    object-fit: cover;   /* Si le llegaras a poner una altura fija, esto asegura que la imagen cubra el área limpiamente */
}


/* 1. Contenedor principal de la imagen */
.contenedor-img {
    position: relative; /* CRUCIAL: permite que elementos internos floten encima sin salirse */
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.imagen-adaptable {
    width: 100%;
    height: auto;
    display: block;
}

/* 2. Capa transparente que se posiciona justo al centro sobre la imagen */
.logo-flotante-capa {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrado matemático perfecto */
    z-index: 10; /* Lo pone por encima de la foto de fondo */
    text-align: center;
    width: 100%;
    max-width: 550px; /* Limita el tamaño máximo del logo en pantalla */
    padding: 20px;
}

/* 3. El logo y su animación de movimiento */
.logo-animado {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.5)); /* Le da una sombra al logo para que resalte sobre el fondo */
    
    /* Vinculamos la animación: dura 4 segundos, es suave (ease-in-out) e infinita */
    animation: flotarSuave 4s ease-in-out infinite;
}

/* --- ANIMACIÓN DE MOVIMIENTO (Flotación sutil de arriba a abajo) --- */
@keyframes flotarSuave {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.06); /* Se agranda un 6% */
    }
    100% {
        transform: scale(1);
    }
}
/* --- CORRECCIÓN DE COLOR PARA LA SECCIÓN ACTIVA --- */

/* 1. Cuando la barra está arriba (transparente sobre el render) */
.nav-menu a.active {
    color: #1a365d !important; /* Cambiamos el blanco por tu azul marino oscuro */
    font-weight: 700;          /* Le da un toque más grueso para que se note dónde estás */
    border-bottom: 2px solid #0a196c; /* Opcional: una rayita verde abajo para resaltar */
    padding-bottom: 4px;
}

/* 2. Por si acaso, cuando la barra ya tiene el fondo blanco al hacer scroll (.scrolled) */
.navbar.scrolled .nav-menu a.active:not(.btn-nav) {
    color: #a17203 !important; /* En fondo blanco, podemos usar tu verde corporativo */
    border-bottom: 2px solid #1a365d; /* Intercambiamos la rayita al azul marino */
}





/* --- ESTILOS SECCIÓN ¿POR QUÉ ELEGIRNOS? --- */
.seccion-elegirnos {
    background-color: #ffffff;
    padding: 80px 0;
    width: 100%;
    font-family: 'Montserrat', sans-serif; /* O la tipografía de tu sitio */
}

.container-elegirnos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px; /* Separación entre la columna de la imagen y la de texto */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- COLUMNA IZQUIERDA (IMAGEN + FLOTANTE) --- */
.elegirnos-col-img {
    flex: 1;
    width: 100%;
}

.wrapper-imagen {
    position: relative; /* Para anclar la tarjeta blanca flotante */
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.img-principal {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
}
/* --- OPTIMIZACIÓN EN MÓVILES PARA LA IMAGEN Y LA TARJETA --- */
@media (max-width: 768px) {
    
    /* 1. Obligamos al contenedor a pasar de columnas a filas (una abajo de otra) */
    .container-elegirnos {
        flex-direction: column-reverse; /* Pone la imagen arriba y el texto abajo para que luzca mejor */
        gap: 30px; /* Reducimos la separación exagerada en móviles */
        padding: 0 20px;
    }

    /* 2. Aseguramos que la columna de la imagen use todo el espacio del celular */
    .elegirnos-col-img {
        width: 100%;
        flex: none; /* Rompe la rigidez del flex de computadora */
    }

    /* 3. Evitamos que la tarjeta empuje la imagen hacia la derecha */
    .wrapper-imagen {
        max-width: 90%; /* Le damos un margen sutil a los lados del celular */
        margin: 0 auto 60px auto; /* Añadimos espacio suficiente abajo para la tarjeta flotante */
    }

    .img-principal {
        width: 100%;
        height: auto;
    }

    /* 4. Aseguramos que la tarjeta flotante '21+' se centre perfectamente */
    .tarjeta-experiencia {
        bottom: -35px;
        left: 50% !important; /* El !important asegura que rompa el left negativo anterior */
        transform: translateX(-50%);
        width: 160px;
        padding: 20px;
    }
}
/* Tarjeta blanca de experiencia "21+" */



/* --- COLUMNA DERECHA (TEXTOS) --- */
.elegirnos-col-texto {
    flex: 1;
    width: 100%;
}

.subtitulo-seccion {
    font-size: 14px;
    font-weight: 600;
    color: #718096;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 15px;
}

.titulo-seccion {
    font-size: 36px;
    color: #1a202c;
    font-weight: 400; /* Estilo tipográfico limpio y moderno */
    line-height: 1.25;
    margin-bottom: 20px;
}

.descripcion-seccion {
    font-size: 15px;
    color: #718096;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* --- BLOQUES DE CARACTERÍSTICAS --- */
.lista-caracteristicas {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.item-caracteristica {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

/* Caja del fondo del icono */
.icono-box {
    background-color: #f7fafc; /* Gris sumamente claro de fondo */
    width: 55px;
    height: 55px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* Evita que el contenedor del icono se achique */
}

.icono-box img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

.info-box h3 {
    font-size: 18px;
    color: #2d3748;
    margin-bottom: 6px;
    font-weight: 500;
}

.info-box p {
    font-size: 14px;
    color: #718096;
    line-height: 1.5;
}

/* --- ADAPTACIÓN RESPONSIVA (MÓVILES) --- */
@media (max-width: 992px) {
    .container-container-elegirnos {
        flex-direction: column; /* Pone la imagen arriba y las letras abajo */
        gap: 50px;
    }
    
    .titulo-seccion {
        font-size: 28px;
    }
    
    .tarjeta-experiencia {
        bottom: -15px;
        left: 15px; /* Evita que se salga de la pantalla en móviles */
        padding: 20px;
        width: 150px;
    }
    
    .numero-exp {
        font-size: 32px;
    }
}

/* --- ESTILOS SECCIÓN PUNTOS DE INTERÉS --- */
.seccion-interes {
    background-color: #c9bfb5; /* Fondo color arena de tu imagen */
    padding: 80px 0;
    width: 100%;
    font-family: 'Montserrat', sans-serif; /* Tipografía limpia */
    text-align: center;
}

.container-interes {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Título estilizado en mayúsculas */
.interes-titulo h2 {
    color: #ffffff;
    font-size: 48px;
    font-weight: 300;
    letter-spacing: 3px;
    line-height: 1.1;
    margin-bottom: 60px;
}

.interes-titulo h2 span {
    margin-left: 80px; /* Desfase elegante como el de la referencia */
}

/* Cuadrícula Grid: 4 columnas perfectas en escritorio */
.grid-interes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 20px; /* Separación vertical y horizontal */
    justify-items: center;
}

.item-interes {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* El círculo oscuro perfecto */
.circulo-contador {
    background-color: #2b231f; /* Color oscuro de tu imagen */
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    margin-bottom: 15px;
}

.numero-contador {
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
}

.unidad {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1px;
    margin-top: 4px;
}

/* Textos de abajo de los círculos */
.etiqueta-interes {
    color: #2b231f;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.4;
    max-width: 160px; /* Mantiene el texto compacto abajo */
    text-transform: uppercase;
}

/* --- ADAPTACIÓN RESPONSIVA (MÓVILES) --- */
@media (max-width: 992px) {
    .grid-interes {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablets */
    }
    .interes-titulo h2 {
        font-size: 32px;
    }
    .interes-titulo h2 span {
        margin-left: 0;
        display: block;
    }
}

@media (max-width: 480px) {
    .grid-interes {
        grid-template-columns: 1fr; /* 1 columna en celulares pequeños */
        gap: 30px;
    }
    .circulo-contador {
        width: 130px;
        height: 130px;
    }
}

/* --- MODAL FLOTANTE DE ÉXITO --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Fondo oscuro atenuado */
    backdrop-filter: blur(4px); /* Difumina el fondo de la web (Efecto premium) */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Por encima de absolutamente todo */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Clase que se añade con JS para mostrar el modal */
.modal-overlay.mostrar-modal {
    opacity: 1;
    pointer-events: auto;
}

/* Caja de contenido del modal */
.modal-content {
    background-color: #ffffff;
    padding: 40px 30px;
    border-radius: 16px;
    width: 90%;
    max-width: 420px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.modal-overlay.mostrar-modal .modal-content {
    transform: scale(1); /* Efecto de agrandado suave al abrir */
}

/* Contenedor del icono */
.modal-icon-box {
    width: 70px;
    height: 70px;
    background-color: #e6f9ed; /* Fondo verde sumamente claro */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px auto;
}

.icon-check {
    width: 40px;
    height: 40px;
    fill: #25d366; /* Verde vibrante para el check de éxito */
}

.modal-content h2 {
    font-size: 24px;
    color: #1a202c;
    font-weight: 600;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
}

.modal-content p {
    font-size: 15px;
    color: #718096;
    line-height: 1.5;
    margin-bottom: 25px;
}

/* Botón de aceptar personalizado */
.btn-modal-aceptar {
    background-color: #1a202c; /* Color oscuro premium (puedes usar tu azul/gris) */
    color: #ffffff;
    border: none;
    padding: 12px 35px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-modal-aceptar:hover {
    background-color: #2d3748;
}

.btn-modal-aceptar:active {
    transform: scale(0.98);
}