:root {
    /* Paleta de colores minimalista */
    --primary: #ffca28; /* Amarillo vibrante */
    --secondary: #757575; /* Gris medio */
    --accent: #e63946; /* Rojo coral */
    --white: #ffffff;
    /* Escala de grises */
    --gray-dark: #212121;
    --gray-medium: #757575;
    --gray-light: #e0e0e0;
    --gray-extra-light: #f5f5f5;
    /* Tipograf�a */
    --font-main: 'Poppins', sans-serif;
    --font-size-base: 1rem;
    --line-height-base: 1.6;
    /* Espaciado */
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    /* Bordes */
    --border-radius: 8px;
    --border-radius-lg: 12px;
    /* Sombras */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    /* Transiciones */
    --transition-base: all 0.25s ease;
}

/* Reset y estilos base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--gray-dark);
    background-color: var(--white);
    padding-top: 80px; /* Para el header fijo */
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--space-md);
    color: var(--gray-dark);
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition-base);
}

    a:hover {
        color: var(--accent);
    }

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Layout */
.container {
    width: 100%;
    padding-right: var(--space-md);
    padding-left: var(--space-md);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/* Header */
.header {
    background-color: var(--white);
    box-shadow: var(--shadow-sm);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: var(--space-sm) 0;
}

.navbar-brand img {
    height: 50px;
    transition: var(--transition-base);
}

.nav-link {
    font-weight: 500;
    color: var(--gray-dark);
    padding: var(--space-xs) var(--space-sm);
    position: relative;
}

    .nav-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        background: var(--primary);
        bottom: 0;
        left: var(--space-sm);
        transition: var(--transition-base);
    }

    .nav-link:hover::after,
    .nav-link.active::after {
        width: calc(100% - 2 * var(--space-sm));
    }

/* Hero Section */
.hero-section {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../img/hero-bg.jpg') center/cover no-repeat;
    color: var(--white);
    min-height: 70vh;
    display: flex;
    align-items: center;
    margin-top: -80px;
    padding-top: 80px;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-section h1 {
    font-size: 2.8rem;
    color: var(--white);
    margin-bottom: var(--space-md);
}

.hero-section .lead {
    font-size: 1.25rem;
    margin-bottom: var(--space-lg);
    opacity: 0.9;
}

/* Secciones */
.section {
    padding: var(--space-xl) 0;
}

.section-title {
    font-size: 2rem;
    position: relative;
    margin-bottom: var(--space-lg);
}

    .section-title::after {
        content: '';
        position: absolute;
        width: 60px;
        height: 3px;
        background: var(--primary);
        bottom: -10px;
        left: 0;
    }

.text-center .section-title::after {
    left: 50%;
    transform: translateX(-50%);
}

/* Componentes */
.card {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    overflow: hidden;
    height: 100%;
}

    .card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-lg);
    }

.card-body {
    padding: var(--space-md);
}

.btn {
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--border-radius);
    font-weight: 500;
    text-align: center;
    transition: var(--transition-base);
    border: none;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--gray-dark);
}

    .btn-primary:hover {
        background-color: #ffb300;
        transform: translateY(-2px);
    }

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--white);
    color: var(--white);
}

    .btn-outline:hover {
        background-color: var(--white);
        color: var(--gray-dark);
    }

/* Footer */
.footer {
    background-color: var(--gray-dark);
    color: var(--white);
    padding: var(--space-xl) 0;
}

.footer-links a {
    color: var(--white);
}

    .footer-links a:hover {
        color: var(--primary);
    }

/* Responsive */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2.2rem;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .navbar-collapse {
        padding-top: var(--space-md);
    }

    .nav-link {
        padding: var(--space-xs) 0;
    }

        .nav-link::after {
            display: none;
        }
}

@media (max-width: 576px) {
    .hero-section h1 {
        font-size: 2rem;
    }

    .section {
        padding: var(--space-lg) 0;
    }
}
/* ========== ESTILOS A�ADIDOS ========== */

/* Ajustes para el header fixed */
body {
    padding-top: 80px; /* Altura del header - ya existente */
}

.header {
    z-index: 1030; /* Asegura que el header est� por encima del contenido */
}

/* Ajustes para la secci�n hero PPFF */
.ppff-hero {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: var(--white);
    margin-top: 20px; /* Compensa el espacio del header fixed */
    padding-top: 120px; /* Espacio adicional para que no quede tapado */
    padding-bottom: var(--space-xl);
}

/* Estilos para las tarjetas de eventos */
.event-card {
    display: flex;
    flex-direction: column; /* Apilar los elementos dentro de la tarjeta */
    transition: var(--transition-base);
    border-radius: var(--border-radius);
    overflow: hidden; /* Para evitar que el contenido sobresalga */
    height: 100%; /* Asegura que todas las tarjetas tengan la misma altura */
    min-height: 350px; /* Establece una altura m�nima para las tarjetas */
    background-color: var(--white);
    box-shadow: var(--shadow-md); /* Sombra para dar un toque elegante */
    margin-bottom: var(--space-md); /* Espacio entre tarjetas */
    display: flex;
    justify-content: space-between;
}

    /* Efecto hover en las tarjetas */
    .event-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-lg); /* Sombra m�s grande al hacer hover */
    }

/* Estilos para el fondo rojo de las tarjetas */
.event-date {
    width: 100%; /* Asegura que ocupe todo el ancho del contenedor */
    padding: 1rem; /* Espacio interno para que no quede pegado al borde */
    background-color: var(--accent) !important; /* Fondo rojo */
    color: var(--white); /* Texto blanco */
    display: flex;
    align-items: center;
    justify-content: center; /* Centra el contenido dentro del fondo rojo */
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    font-size: 1.2rem;
    font-weight: bold;
}

/* Contenedor de contenido dentro de la tarjeta */
.event-content {
    padding: 1rem; /* Espacio interno */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el contenido dentro del fondo rojo */
    flex-grow: 1; /* Permite que el contenido crezca para llenar el espacio */
    text-align: justify; /* Justifica el texto dentro del contenedor */
}

/* Estilos espec�ficos para botones en PPFF */
.ppff-hero .btn-primary {
    background-color: var(--white);
    color: var(--gray-dark);
    border: none;
}

.ppff-hero .btn-outline-light {
    border: 2px solid var(--white);
    color: var(--white);
}

    .ppff-hero .btn-outline-light:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

/* Responsive para PPFF */
@media (max-width: 767.98px) {
    .ppff-hero {
        padding-top: 140px;
        text-align: center;
    }

    .event-card {
        margin-bottom: var(--space-md);
    }

    .ppff-hero .btn {
        width: 100%;
        margin-bottom: var(--space-sm);
    }

    /* Ajuste para la secci�n de evento en dispositivos peque�os */
    .event-date {
        padding: 0.5rem; /* Menos padding en m�viles si es necesario */
    }

    .event-card {
        margin-bottom: var(--space-sm); /* Espacio entre tarjetas m�s peque�o en m�vil */
    }
}

/* ========== FIN DE ESTILOS A�ADIDOS ========== */

/* Estilo para igualar la altura de la franja roja */
.event-date-box {
    background-color: #e63946;
    color: white;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  /* Estilo para igualar la altura del contenido */
  .event-card .card-body {
    height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }