/* =========================================
   CAROUSEL Y logo
   ========================================= */
/**
 * Diseña la pista desplazable (track) ocultando la barra de navegación nativa. 
 * Los logotipos de las marcas mantienen una escala de grises inactiva y, al 
 * pasar el cursor, recuperan su opacidad y color original en una transición suave.
 */
:root {
    --naranja: #e17203;
    --purpura-oscuro: #52073a;
    --naranja-hover: #c56502;
    --gris-oscuro: #333333;
    --gris-medio: #666666;
    --gris-claro: #f4f4f4;
    --blanco: #ffffff;
    --borde: #dddddd;
    --sombra-suave: 0 10px 30px rgba(0, 0, 0, 0.08);
}
body {
    background-color: var(--blanco);
    color: var(--gris-oscuro);
    font-family: 'Lato', sans-serif;
    line-height: 1.6;
    margin: 0;
}


.carousel {
    overflow: hidden;
    margin-bottom:40px;
}

.carousel-track {
    display: flex;
    gap: 20px;
    width: max-content;
    scroll-behavior: auto;
}

.logos {
    flex: 0 0 auto;
    width: 150px;
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

.logos {
    width: 100px;
    height: 80px;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: 0.3s ease;
}

.logos:hover {
    transform: scale(1.05);
    border-color: var(--naranja);
    box-shadow: 0 5px 15px rgba(225, 114, 3, 0.1);
}

.logos img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    filter: grayscale(100%);
    transition: 0.3s;
    opacity: 0.7;
}

.logos:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* =========================================
   6. BOTONES DE NAVEGACIÓN DEL CARRUSEL
   ========================================= */

.btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--negro);
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;

}

.prev { left: -25px; }
.next { right: -25px; }

.btn:hover {
    background: var(--naranja);
    transform: translateY(-50%) scale(1.1);
}

.bloque-logos .titulo-bloque {
    text-align: center;
}

.bloque-logos .titulo-bloque::after {
    left: 50%;
    transform: translateX(-50%);
}
.contenedor-convenios {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    animation: fadeIn 0.8s ease-in-out;
}