/**
 * ════════════════════════════════════════════════════════════════════════════
 * CONTROL DE LOGO DEL FOOTER - gepLogoBlanco.png
 * ════════════════════════════════════════════════════════════════════════════
 * 
 * PROPÓSITO:
 * Controla el tamaño, posición X/Y del logo blanco monocromo en el footer
 * que aparece sobre la frase "Aliados estratégicos en operación, mantenimiento
 * y optimización de procesos."
 * 
 * UBICACIÓN EN HTML (línea ~3482):
 * <img class="mb-3 footer-logo-gep" src="images/GEP/favicon/gepLogoBlanco.png">
 * 
 * CLASE NECESARIA: footer-logo-gep
 * 
 * BREAKPOINTS: 19 (igual que el sistema de navbar y carruseles)
 * 
 * DISPOSITIVO DEL USUARIO: 468x858 → Breakpoint 451-480px (marcado con ★)
 * 
 * ════════════════════════════════════════════════════════════════════════════
 */


/* ════════════════════════════════════════════════════════════════════════════
   CONFIGURACIÓN BASE DEL LOGO FOOTER
   ════════════════════════════════════════════════════════════════════════════ */

.footer-logo-gep {
    position: relative !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    object-fit: contain !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   📱 BREAKPOINTS RESPONSIVOS - CONTROL GRANULAR
   ════════════════════════════════════════════════════════════════════════════ */

/* Breakpoint 1: ≤320px (Dispositivos muy pequeños) */
@media (max-width: 320px) {
    .footer-logo-gep {
        width: 80px !important;           /* TAMAÑO: Ancho del logo */
        max-width: 80px !important;
        height: auto !important;
        left: 0px !important;             /* EJE X: Desplazamiento horizontal */
        top: 0px !important;              /* EJE Y: Desplazamiento vertical */
    }
}

/* Breakpoint 2: 321px - 340px */
@media (min-width: 321px) and (max-width: 340px) {
    .footer-logo-gep {
        width: 85px !important;
        max-width: 85px !important;
        height: auto !important;
        left: 0px !important;
        top: 0px !important;
    }
}

/* Breakpoint 3: 341px - 360px */
@media (min-width: 341px) and (max-width: 360px) {
    .footer-logo-gep {
        width: 90px !important;
        max-width: 90px !important;
        height: auto !important;
        left: 0px !important;
        top: 0px !important;
    }
}

/* Breakpoint 4: 361px - 390px */
@media (min-width: 361px) and (max-width: 390px) {
    .footer-logo-gep {
        width: 95px !important;
        max-width: 95px !important;
        height: auto !important;
        left: 0px !important;
        top: 0px !important;
    }
}

/* Breakpoint 5: 391px - 420px */
@media (min-width: 391px) and (max-width: 420px) {
    .footer-logo-gep {
        width: 100px !important;
        max-width: 100px !important;
        height: auto !important;
        left: 0px !important;
        top: 0px !important;
    }
}

/* Breakpoint 6: 421px - 450px */
@media (min-width: 421px) and (max-width: 450px) {
    .footer-logo-gep {
        width: 105px !important;
        max-width: 105px !important;
        height: auto !important;
        left: 0px !important;
        top: 0px !important;
    }
}

/* ★ Breakpoint 7: 451px - 480px → TU DISPOSITIVO (468x858) ★ */
@media (min-width: 451px) and (max-width: 480px) {
    .footer-logo-gep {
        width: 110px !important;          /* ← AJUSTA TAMAÑO AQUÍ */
        max-width: 110px !important;
        height: auto !important;
        left: 0px !important;             /* ← AJUSTA EJE X AQUÍ (horizontal) */
        top: 0px !important;              /* ← AJUSTA EJE Y AQUÍ (vertical) */
    }
}

/* Breakpoint 8: 481px - 520px */
@media (min-width: 481px) and (max-width: 520px) {
    .footer-logo-gep {
        width: 115px !important;
        max-width: 115px !important;
        height: auto !important;
        left: 0px !important;
        top: 0px !important;
    }
}

/* Breakpoint 9: 521px - 550px */
@media (min-width: 521px) and (max-width: 550px) {
    .footer-logo-gep {
        width: 120px !important;
        max-width: 120px !important;
        height: auto !important;
        left: 0px !important;
        top: 0px !important;
    }
}

/* Breakpoint 10: 551px - 600px */
@media (min-width: 551px) and (max-width: 600px) {
    .footer-logo-gep {
        width: 120px !important;
        max-width: 120px !important;
        height: auto !important;
        left: 0px !important;
        top: 0px !important;
    }
}

/* Breakpoint 11: 601px - 650px */
@media (min-width: 601px) and (max-width: 650px) {
    .footer-logo-gep {
        width: 125px !important;
        max-width: 125px !important;
        height: auto !important;
        left: 0px !important;
        top: 0px !important;
    }
}

/* Breakpoint 12: 651px - 700px */
@media (min-width: 651px) and (max-width: 700px) {
    .footer-logo-gep {
        width: 125px !important;
        max-width: 125px !important;
        height: auto !important;
        left: 0px !important;
        top: 0px !important;
    }
}

/* Breakpoint 13: 701px - 800px */
@media (min-width: 701px) and (max-width: 800px) {
    .footer-logo-gep {
        width: 130px !important;
        max-width: 130px !important;
        height: auto !important;
        left: 0px !important;
        top: 0px !important;
    }
}

/* Breakpoint 14: 801px - 900px */
@media (min-width: 801px) and (max-width: 900px) {
    .footer-logo-gep {
        width: 130px !important;
        max-width: 130px !important;
        height: auto !important;
        left: 0px !important;
        top: 0px !important;
    }
}

/* Breakpoint 15: 901px - 992px */
@media (min-width: 901px) and (max-width: 992px) {
    .footer-logo-gep {
        width: 135px !important;
        max-width: 135px !important;
        height: auto !important;
        left: 0px !important;
        top: 0px !important;
    }
}

/* Breakpoint 16: 993px - 1100px */
@media (min-width: 993px) and (max-width: 1100px) {
    .footer-logo-gep {
        width: 140px !important;
        max-width: 140px !important;
        height: auto !important;
        left: 0px !important;
        top: 0px !important;
    }
}

/* Breakpoint 17: 1101px - 1200px */
@media (min-width: 1101px) and (max-width: 1200px) {
    .footer-logo-gep {
        width: 145px !important;
        max-width: 145px !important;
        height: auto !important;
        left: 0px !important;
        top: 0px !important;
    }
}

/* Breakpoint 18: 1201px - 1400px */
@media (min-width: 1201px) and (max-width: 1400px) {
    .footer-logo-gep {
        width: 150px !important;
        max-width: 150px !important;
        height: auto !important;
        left: 0px !important;
        top: 0px !important;
    }
}

/* Breakpoint 19: >1400px (Pantallas grandes) */
@media (min-width: 1401px) {
    .footer-logo-gep {
        width: 155px !important;
        max-width: 155px !important;
        height: auto !important;
        left: -90px !important;
        top: 0px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   📝 GUÍA DE USO
   ════════════════════════════════════════════════════════════════════════════
   
   CÓMO AJUSTAR EL TAMAÑO:
   -----------------------
   En tu breakpoint (451-480px), cambia el valor de width:
   
   width: 110px !important;  →  width: 150px !important;  (más grande)
   width: 110px !important;  →  width: 80px !important;   (más pequeño)
   
   
   CÓMO MOVER HORIZONTALMENTE (EJE X):
   ------------------------------------
   left: 0px !important;   →  left: 20px !important;   (mueve a la derecha)
   left: 0px !important;   →  left: -20px !important;  (mueve a la izquierda)
   
   
   CÓMO MOVER VERTICALMENTE (EJE Y):
   ----------------------------------
   top: 0px !important;    →  top: 10px !important;    (mueve hacia abajo)
   top: 0px !important;    →  top: -10px !important;   (mueve hacia arriba)
   
   
   EJEMPLO - Logo más grande y 10px hacia abajo:
   ----------------------------------------------
   @media (min-width: 451px) and (max-width: 480px) {
       .footer-logo-gep {
           width: 140px !important;  ← Más grande
           top: 10px !important;     ← 10px abajo
       }
   }
   
   ════════════════════════════════════════════════════════════════════════════ */