/* =======================================================
   CONFIGURACIÓN GENERAL Y FUENTES
   ======================================================= */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    color: #333;
    min-height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
                url('../img/mtb1.jpg') no-repeat center center fixed;
    background-size: cover;
    line-height: 1.6;
}

/* =======================================================
   CABECERA (ESPACIO REDUCIDO)
   ======================================================= */
.main-header {
    padding: 20px 20px 0px 20px; 
    text-align: center;
}

.logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
    margin-bottom: 10px; 
}

.logo-main { height: 140px; width: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); }
.logo-partner { height: 90px; width: auto; }

/* =======================================================
   CONTENEDOR Y TARJETAS
   ======================================================= */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px 20px 60px 20px; 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

.card {
    background: rgba(255, 255, 255, 0.95);
    width: 340px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Añadida transición suave */
}

.card:hover {
    transform: translateY(-5px); /* Pequeño efecto al pasar el mouse */
    box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}

/* --- AJUSTE: MÁS ESPACIO PARA EL AFICHE --- */
.card-image { 
    position: relative; 
    height: 300px; /* AUMENTADO de 240px a 300px */
}

.card-image img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; /* Asegura que la imagen no se deforme */
}

.badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.badge-past { background-color: #ffcc00; color: #000000; }

/* --- AJUSTE: MENOS ESPACIO PARA EL TEXTO --- */
.card-content { 
    padding: 15px 20px; /* REDUCIDO padding vertical de 25px a 15px */
}

.card-content h4 { 
    font-family: 'Montserrat', sans-serif; 
    font-size: 1.2rem; /* Ligeramente reducido para equilibrar */
    color: #1a1a1a; 
    margin: 0 0 5px 0; /* Margen inferior reducido */
    font-weight: 700;
}

.card-content p { 
    font-size: 0.9rem; /* Ligeramente reducido */
    color: #555; 
    margin-bottom: 10px; /* REDUCIDO margen inferior de 25px a 10px */
    line-height: 1.4;
}

/* =======================================================
   SISTEMA DE BOTONES
   ======================================================= */
.btn-secondary {
    background-color: #ffcc00; 
    color: #000000 !important; 
    padding: 10px 25px; /* Ligeramente más compacto */
    text-decoration: none;
    border-radius: 50px;
    font-weight: 800;
    display: inline-block;
    font-size: 0.8rem;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

.btn-secondary:hover {
    background-color: #e6b800;
}

/* =======================================================
   TÍTULOS DE SECCIÓN (ESPACIO SUPERIOR REDUCIDO)
   ======================================================= */
.separador-eventos {
    flex-basis: 100%;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #ffffff;
    text-align: left;
    text-transform: uppercase;
    border-left: 5px solid #ffcc00; 
    padding-left: 15px;
    margin: 15px 0 20px 0; 
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
}

/* =======================================================
   ADAPTACIÓN A MÓVILES
   ======================================================= */
@media (max-width: 768px) {
    .container { gap: 20px; padding-bottom: 30px; }
    .card { width: 100%; max-width: 360px; }
    .card-image { height: 250px; } /* Un poco más bajo en móvil para no ocupar toda la pantalla */
    .logo-main { height: 100px; }
    .logo-partner { height: 70px; }
    .separador-eventos { font-size: 1.3rem; margin-top: 10px; }
}