body {
	font-family: 'Open Sans', sans-serif;
	color: #333;
	padding-top: 56px; /* Espacio para el navbar fijo */

    /* Configurar el body como contenedor flex en columna */
    display: flex;
    flex-direction: column;
    /* Asegurar que el body ocupe TODA la altura de la ventana */
    min-height: 100vh;
}

/* Hacer que el contenedor principal (<main>) crezca y empuje el footer */
main {
    flex-grow: 1; /* Esto hace que <main> ocupe todo el espacio restante */
}

.fondo {
	background-color: #03DAEE
}

.btn-details:hover {
	background-color: #02bdcc;
}
                                    
.title {
	font-family: 'Source Code Pro', monospace;
	font-weight: 700;
	font-size: 2.5rem;
	margin-bottom: 1.5rem;
	color: var(--bs-primary); /* Usa el color primario de Bootstrap */
}

.quote {
	font-family: 'Open Sans', sans-serif;
	font-style: italic;
	font-size: 1.2rem;
	margin-bottom: 1.5rem;
	line-height: 1.6;
}

.content {
	text-align: justify;
	line-height: 1.6;
}

.image-container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.image-container img {
	max-width: 100%;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card {
	box-shadow: 5px 8px 15px #0000005e;
}

@media ( max-width : 768px) {
	.title {
		font-size: 2rem;
	}
	.image-container {
		margin-top: 2rem;
	}
}

/* Animación para la aparición de las cards */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* La animación para cada card */
.animated-card {
	animation-name: fadeInUp;
	animation-duration: 0.6s;
	animation-fill-mode: both;
	width: 100%;
}

/* 1. Altura Fija y Propiedades de Imagen para la Tarjeta */
.card-img-top {
    /* Forzar una altura uniforme para TODAS las imágenes de la tarjeta */
    height: 180px; /* Ajusta este valor al que mejor se adapte a tu diseño */
    object-fit: cover; /* Asegura que la imagen cubra el espacio sin distorsionarse */
}

.event-placeholder {
    background-color: #03DAEE;
    /* Usamos la misma altura para que coincida con .card-img-top */
    height: 180px; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    border-top-left-radius: var(--bs-card-border-radius);
    border-top-right-radius: var(--bs-card-border-radius);
}

.dark-mode {
    /* 🔑 Esto pone el fondo del body en oscuro (negro casi total) */
    background-color: #121212; 
    
    /* 🔑 Esto pone el color del texto general en claro (blanco/gris suave) */
    color: #e0e0e0; 
}