/**
 * ═══════════════════════════════════════════════════════════════════════════
 * 🔧 FIX: Área clickeable de enlaces del footer
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * PROBLEMA:
 * Los enlaces del footer (Sainet GEP SAS, GEP ACADEMY, Nube Gep) tienen
 * un área clickeable muy pequeña. Solo funcionan al hacer clic en ciertas
 * letras específicas del texto.
 *
 * CAUSA:
 * Los elementos <p> que contienen los enlaces están bloqueando el área
 * clickeable, y los enlaces no están expandidos al 100% del espacio disponible.
 *
 * SOLUCIÓN:
 * 1. Hacer que los <p> sean "transparentes" a los clicks (pointer-events: none)
 * 2. Restaurar los clicks en los <a> dentro de los <p> (pointer-events: auto)
 * 3. Hacer que los enlaces ocupen todo el ancho disponible (display: block)
 * 4. Agregar padding para aumentar el área clickeable
 *
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════════════════════════════
   🎯 FIX PRINCIPAL: Enlaces del footer
   ══════════════════════════════════════════════════════════════════════════ */

/* Los <p> del footer deben ser "transparentes" a los clicks */
footer p.mb-2 {
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Los <a> dentro de los <p> deben capturar todos los clicks */
footer p.mb-2 a {
    pointer-events: auto !important;
    display: block !important;
    width: 100% !important;
    padding: 8px 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* Efecto hover para indicar que es clickeable */
footer p.mb-2 a:hover {
    opacity: 0.8 !important;
    transform: translateX(3px) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   🔧 FIX ADICIONAL: Todos los enlaces del footer
   ══════════════════════════════════════════════════════════════════════════ */

/* Asegurar que TODOS los enlaces del footer funcionen correctamente */
footer a {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Los párrafos del footer no deben interferir con los enlaces */
footer p {
    pointer-events: none !important;
}

/* Pero los elementos dentro de los párrafos (como <a> e <i>) sí deben ser clickeables */
footer p a,
footer p i {
    pointer-events: auto !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   📱 MEJORAR EXPERIENCIA EN MÓVIL
   ══════════════════════════════════════════════════════════════════════════ */

/* En dispositivos táctiles, aumentar el área clickeable */
@media (max-width: 768px) {
    footer p.mb-2 a {
        padding: 12px 0 !important;
        font-size: 1rem !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   ✅ DEBUG: Descomentar para visualizar el área clickeable
   ══════════════════════════════════════════════════════════════════════════ */

/*
footer p.mb-2 a {
    background-color: rgba(255, 0, 0, 0.1) !important;
    border: 1px dashed red !important;
}
*/