/* Importación de fuentes locales */
@font-face {
  font-family: 'Montserrat Alt1';
  src: url('../assets/fonts/MontserratAlt1-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Myriad Pro';
  src: url('../assets/fonts/MyriadPro-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-primary: #030F26; /* Ajustado al diseño */
  --text-main: #FFFFFF;
  --accent-blue: #31CDEC;
  --bg-day-1: #002468ff; /* Fondo para el bloque de día 1 */
  --bg-day-2: #030F26; /* Fondo para el bloque de día 2 */
  
  --font-heading: 'Montserrat Alt1', 'Montserrat', sans-serif;
  --font-body: 'Myriad Pro', sans-serif;
}

/* Reset Básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Tipografía */
h1, h2, h3 {
    font-family: var(--font-heading);
    color: var(--text-main);
}

.day-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}

.day-subtitle {
    font-weight: bold;
    margin-bottom: 0.2rem; /* Reducido de 0.5rem a 0.2rem */
    font-size: 1.1rem;
}

.block-title {
    border-top: 1px solid rgba(48, 108, 176, 1);
    border-bottom: 1px solid rgba(48, 108, 176, 1);
    padding: 0.8rem 0;
    margin: 0.5rem 0 1.5rem 0; /* Margen superior reducido de 1rem a 0.5rem */
    font-family: 'Montserrat', sans-serif; /* Unificado con Montserrat */
    font-weight: 700;
    font-size: 1rem;
}

/* Layout Principal: CSS Grid */
.program-container {
    width: 100%;
}

.program__day {
    width: 100%;
    padding: 4rem 0;
}

.day-1 {
    background-color: var(--bg-day-1);
}

.day-2 {
    background-color: var(--bg-day-1);
}

.day-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.day-header {
    margin-bottom: 0; /* Reducido de 0.5rem a 0 */
}

.agenda-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center; /* Centrado vertical para alinear con la imagen */
    margin-bottom: 4rem;
}

.agenda-block:last-child {
    margin-bottom: 0;
}

/* Agenda / Lista de Horarios */
.agenda__list {
    list-style: none;
}

.agenda__item {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.4rem; /* Reducido de 1.2rem a 0.4rem para compactar los ítems */
    font-size: 0.95rem;
}

.agenda__item time {
    font-family: 'Montserrat', sans-serif; /* Unificado con Montserrat */
    font-weight: 700;
    flex: 0 0 170px; /* Ajustado ligeramente el ancho para dar espacio al texto alineado a la izquierda */
    text-align: left; /* Cambiado de right a left según referencia */
    white-space: nowrap; /* Evita saltos de línea en el horario */
}

.agenda__item span {
    flex: 1;
    font-family: 'Montserrat', sans-serif; /* Cambiado de Myriad Pro a Montserrat */
    font-weight: 300; /* Ahora debería aplicarse correctamente al ser una fuente variable */
}

/* Imágenes Circulares (Lado Derecho) */
.day-visuals {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0; 
}

.visual-circle {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: -15%; /* Superposición ligera entre las dos imagenes del día 1 */
}

.visual-circle img,
.visual-circle svg {
    max-width: 100%;
    width: 450px; /* Tamaño máximo para que no crezcan infinitamente */
    height: auto;
    object-fit: contain;
    border: none; /* Quitamos el borde que tenian antes porque el SVG ya lo tiene */
    border-radius: 0;
}

.first-stadium {
    margin-top: 0;
}

.first-stadium img,
.first-stadium svg {
    width: 100%;
    max-width: 500px;
}

.second-stadium {
    margin-top: 0;
}

.third-stadium {
    margin-top: 0;
}

.third-stadium img,
.third-stadium svg {
    width: 100%;
    max-width: 500px;
}

/* Footer y Header (Básicos) */
.main-footer {
    text-align: center;
    padding: 4rem 1rem;
    background-color: var(--bg-primary); /* Igual que el body */
}

.main-footer img {
    width: 120px;
}

.main-header {
    text-align: center;
    padding: 0 1rem; /* Eliminado el padding superior para móvil */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
}

.header__logos img {
    max-width: 100%;
    width: 100%;
    max-width: 850px;
    height: auto;
}

@media (min-width: 992px) {
    .agenda-block {
        grid-template-columns: 5.5fr 4.5fr;
        gap: 4rem;
    }

    .main-header {
        padding: 0;
        margin-bottom: -110px;
    }

    .first-stadium {
        margin-top: -100px;
    }

    .second-stadium {
        margin-top: -120px;
    }

    .third-stadium {
        margin-top: -120px;
    }
}