/* ============================================
   BANNER 100% - CON ESCUDO Y NOMBRE SUPERPUESTOS
   ============================================ */

/* Eliminar todos los márgenes y paddings */
#bannerstop {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
    position: relative !important;
    background: #2c3e50; /* Color de fondo por si la imagen no carga */
}

#bannerstop .row {
    margin: 0 !important;
    padding: 0 !important;
}

#bannerstop [class*="col-"] {
    padding: 0 !important;
    margin: 0 !important;
}

/* El banner ocupa el 100% */
#bannerstop #imgcentral {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: none !important;
}

/* La imagen ocupa el 100% */
#bannerstop img,
#bannerstop video {
    width: 100% !important;
    height: 130px !important;
    object-fit: cover !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Si el banner es más pequeño, se estira */
#bannerstop img {
    width: 100% !important;
    height: 130px !important;
    object-fit: cover !important;
}

/* ============================================
   ESTILOS PARA EL ESCUDO Y NOMBRE SUPERPUESTO
   ============================================ */

/* Contenedor del escudo y nombre */
#bannerstop > div:last-child {
    position: absolute !important;
    top: 50% !important;
    left: 20px !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    text-align: center !important;
}

/* Escudo más grande */
#bannerstop .escudo-superpuesto {
    width: 100px !important;
    height: 100px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 10px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    display: block !important;
    margin: 0 auto !important;
    border: 3px solid rgba(255, 255, 255, 0.8) !important;
    transition: all 0.3s ease !important;
}

/* Efecto hover en el escudo */
#bannerstop .escudo-superpuesto:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4) !important;
}

/* Nombre de la institución debajo del escudo */
#bannerstop .nombre-institucion {
    margin: 8px 0 0 0 !important;
    padding: 5px 15px !important;
    color: white !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: 4px !important;
    display: inline-block !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* ============================================
   RESPONSIVE - AJUSTES PARA MÓVILES
   ============================================ */

@media (max-width: 768px) {
    /* Banner más pequeño en móviles */
    #bannerstop img,
    #bannerstop video {
        height: 80px !important;
    }
    
    /* Escudo más pequeño en móviles */
    #bannerstop .escudo-superpuesto {
        width: 70px !important;
        height: 70px !important;
        padding: 5px !important;
    }
    
    /* Nombre más pequeño en móviles */
    #bannerstop .nombre-institucion {
        font-size: 11px !important;
        padding: 3px 10px !important;
        margin: 4px 0 0 0 !important;
    }
    
    /* Ajustar posición en móviles */
    #bannerstop > div:last-child {
        left: 10px !important;
    }
}

@media (max-width: 480px) {
    /* Móviles muy pequeños */
    #bannerstop .escudo-superpuesto {
        width: 55px !important;
        height: 55px !important;
        padding: 4px !important;
    }
    
    #bannerstop .nombre-institucion {
        font-size: 10px !important;
        padding: 2px 8px !important;
    }
    
    #bannerstop > div:last-child {
        left: 8px !important;
    }
}