/* ==========================================================================
   1. VARIABLES GLOBALES (IDENTIDAD UNIVERSIDAD DISTRITAL)
   ========================================================================= */
:root {
  --ud-blue: #002855;             
  --ud-gold: #ffb703;             
  --neon-orange: #ff5400;         
  --bg-page: #f8f9fa;             
  --text-dark: #212529;
  --transition-fast: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. ESTRUCTURA DE PANTALLA COMPLETA
   ========================================================================= */
html, body {
  height: 100%;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  color: var(--text-dark);
  background-color: var(--bg-page);
}

#pagina {
  display: flex;
  flex-direction: column;
  min-height: 100vh; 
}

.main-page {
  flex: 1 0 auto; 
  padding-top: 40px;
 /* padding-bottom: 50px;*/
}

/* ==========================================================================
   3. HEADER / LOGO Y TEXTO ALINEADOS EN FILA HACIENDA LA IZQUIERDA/CENTRO
   ========================================================================= */
header#header {
  background-color: var(--ud-blue); 
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  padding: 15px 0;
  border-bottom: 5px solid var(--ud-gold); 
}

header#header .header-container {
  display: flex;
  flex-direction: row;       /* Coloca el logo al lado del texto */
  align-items: center;       /* Centra verticalmente ambos elementos */
  justify-content: center;   /* Centra todo el conjunto en la pantalla */
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
  gap: 20px;                 /* Separación perfecta entre el logo y el texto */
}

header#header .header-logo {
  max-height: 55px;          /* Altura controlada del logo */
  width: auto;
  object-fit: contain;
  background-color: rgba(255, 255, 255, 0.95); /* Fondo blanco sutil para destacar el logo */
  padding: 6px 14px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

header#header h1.header-title {
  margin: 0;
  font-family: 'Raleway', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: #ffffff; 
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   4. ESTRUCTURA GRID: 5 COLUMNAS COMPACTAS
   ========================================================================= */
.grid-modulos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); 
  gap: 20px; 
  width: 100%;
  margin-bottom: 30px;
}

/* ==========================================================================
   5. COMPONENTE: TARJETAS CON DEGRADADO TRASLÚCIDO
   ========================================================================= */
.speaker {
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  position: relative; 
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  transition: var(--transition-fast); 
  /*aspect-ratio: 4 / 5; */
}

.speaker:hover {
  transform: translateY(-5px);
  border-color: var(--neon-orange);
  box-shadow: 0 0 25px rgba(255, 84, 0, 0.6), 0 10px 20px rgba(0, 0, 0, 0.15);
}

.speaker .image-wrapper {
  width: 100%;
  height: 100%;
}

.speaker img {
  width: 100%;
  /*height: 100%;
  display: block;
  object-fit: cover; */
}

.speaker .details {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 40px 15px 5px 15px; 
  text-align: center;
  z-index: 2;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
  transition: var(--transition-fast);
}

.speaker:hover .details {
  /*background: linear-gradient(to top, rgba(255, 84, 0, 1) 50%, rgba(255, 84, 0, 0.85) 80%, transparent 100%);*/
  /*background: linear-gradient(to top, rgb(0 0 0) 30%, #FF5722 60%, transparent 100%);*//
}

.speaker .details h3 {
  margin: 0;
  font-size: 0.9rem; 
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.3;
}

.speaker .details h3 a {
  color: #ffffff; 
  text-decoration: none;
  display: block;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); 
}

/* ==========================================================================
   6. FOOTER / COMPLETAMENTE CENTRADO EN LA MITAD DE LA PÁGINA
   ========================================================================= */
footer#footer {
    flex-shrink: 0;
    background-color: #000000;
    color: #838383;
    padding: 20px 0;
    font-size: 13.5px;
    border-top: 4px solid var(--ud-gold);
    width: 100%;
}

footer#footer .footer-flex {
  display: flex;
  flex-direction: column;    /* Apila el copyright y los créditos al centro */
  justify-content: center;
  align-items: center;       /* Centrado horizontal estricto */
  text-align: center;        /* Centra las líneas de texto internas */
  gap: 8px;                  /* Espacio sutil entre líneas */
}

footer#footer .copyright {
  color: #7f7f7f;
  line-height: 1.4;
}

footer#footer .copyright strong {
  color: #ffffff;
}

footer#footer .credits {
  font-weight: 500;
}

footer#footer .credits a {
  color: var(--ud-gold); 
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dashed var(--ud-gold);
  transition: var(--transition-fast);
}

footer#footer .credits a:hover {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

/* ==========================================================================
   7. RESPONSIVE DESIGN (ADAPTACIÓN AUTOMÁTICA MÓVIL)
   ========================================================================= */
@media (max-width: 1400px) {
  .grid-modulos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .grid-modulos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  header#header .header-container {
    flex-direction: column;  /* En celulares se apila logo arriba y título abajo */
    gap: 10px;
  }
  header#header h1.header-title {
    font-size: 1.6rem;
  }
  .grid-modulos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
  }
}

@media (max-width: 480px) {
  header#header h1.header-title {
    font-size: 1.3rem;
  }
  .grid-modulos {
    grid-template-columns: 1fr;
  }
}