/* assets/css/style.css */

/* Using Bootstrap's Reboot defaults, we only need minimal overrides. */
/* The black and white theme is primarily handled by Bootstrap's utility classes (e.g., .bg-dark, .text-white, .btn-dark) */

body {
    /* You can set a default font here if you want to override Bootstrap's default */
    /* For example: font-family: 'Montserrat', sans-serif; */
}

/* Card styles for a consistent height and clean look */
.card {
    border: 1px solid #dee2e6; /* A light border for the cards */
}

.card-title {
    font-weight: bold;
}

/* Ensure the footer stays at the bottom if content is short */
/* This requires changes in the body structure if needed, but for now, it's standard. */

/* You can add more custom black and white theme styles here if needed. */
/* For example, custom link styles or hover effects. */

.nav-link {
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #f8f9fa; /* A lighter shade for hover on nav links */
}

.btn-outline-dark:hover {
    color: #fff;
}

.logos-slider {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 5px 0;
    /* Efecto de desvanecimiento lateral */
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

.logos-track {
    display: inline-block;
    animation: scroll-marquee 20s linear infinite;
}

.sponsor-logo {
    height: 25px; /* Tamaño pequeño solicitado */
    width: auto;
    margin: 0 30px; /* Espacio equilibrado */
    filter: grayscale(100%);
    opacity: 0.5;
    transition: all 0.3s ease;
    vertical-align: middle;
}

.sponsor-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

@keyframes scroll-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Pausa al pasar el mouse */
.logos-slider:hover .logos-track {
    animation-play-state: paused;
}