/* ───────────────────────────────
   Reset + variables
   ─────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  --primary-color: #206ee8;
  --secondary-color: #1a1a1a;
  --text-color: #333;
  --text-light: #666;
  --bg-light: #f8f9fa;
  --white: #ffffff;
  --shadow: 0 2px 12px rgba(0,0,0,.1);
  --shadow-hover: 0 4px 20px rgba(0,0,0,.15);

  /* layout */
  --navbar-h: 64px;   /* ajusta si cambias el tamaño de la barra */
  --footer-h: 72px;   /* alto mínimo del footer */
  --body-gutter: clamp(14px, 4vw, 56px);
  --body-max: 1200px; /* ancho de lectura opcional en desktop */
}

html, body { width: 100%; height: 100%; overflow-x: hidden; }
html{
  font-size: 13px; /* Base font size reducido para mejor legibilidad */
}
body{
  min-height: 100vh;
  display: flex; flex-direction: column;
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: 0.8125rem; /* 13px base - más pequeño y responsivo */
  color: var(--text-color); line-height: 1.6; background: var(--white);
}

/* Reducir tamaño de texto solo para la página index */
body.index-page-body {
  font-size: 0.75rem !important; /* 12px - más pequeño que el resto */
}

/* ───────────────────────────────
   Tipografía
   ─────────────────────────────── */
h1, h2, h3, h4, h5, h6{
  font-family: inherit; font-weight: 600; line-height: 1.2; color: var(--secondary-color);
}

/* ───────────────────────────────
   Quarto: limpiar/ajustar layout
   ─────────────────────────────── */
/* Ocultar bloque de título de Quarto */
.quarto-title-block, header.quarto-title-block, #title-block-header { display: none !important; }

/* Quitar gap vertical del grid y padding inferior del contenido (evita franja blanca) */
.page-columns { row-gap: 0 !important; }
#quarto-content, main.content { padding-bottom: 0 !important; margin-bottom: 0 !important; }

/* En móviles, agregar padding-bottom al contenido del index para que el footer no tape el contenido */
@media (max-width: 991.98px) {
  /* Cambiar el layout del body en móviles para que el footer baje con el contenido */
  body.index-page-body {
    display: block !important; /* Cambiar de flex a block para que el footer baje con el contenido */
    min-height: 100vh !important;
    overflow-y: auto !important;
  }
  
  /* Agregar padding-bottom al contenido principal del index */
  body.index-page-body #quarto-content,
  body.index-page-body main.content,
  body.index-page-body .quarto-container,
  body.index-page-body .index-page {
    padding-bottom: calc(var(--footer-h) / 2 + 1rem) !important; /* Reducido a la mitad: espacio para el footer + margen */
    margin-bottom: 0 !important;
  }
  
  /* Permitir que el hero-section se expanda más allá del min-height si el contenido lo requiere */
  body.index-page-body .hero-section,
  body.index-page-body #hero {
    min-height: auto !important;
    height: auto !important;
    padding-bottom: 2rem !important; /* Padding adicional en la parte inferior */
  }
  
  /* Asegurar que el footer esté posicionado correctamente y baje con el contenido */
  body.index-page-body .nav-footer,
  body.index-page-body .page-footer {
    position: relative !important;
    margin-top: 0 !important; /* Quitar margin-top: auto para que no se quede fijo */
    z-index: 10 !important;
  }
}

/* Permitir que el sidebar funcione en programa-main sobrescribiendo page-layout: full */
body.programa-main .page-columns,
body.programa-main .quarto-layout-panel{
  display: grid !important;
  grid-template-columns: minmax(250px, auto) 1fr !important;
  gap: 2rem !important;
}

/* Gutter de lectura para el contenido (no afecta .full-bleed ni .hero-section) */
#quarto-document-content, main.content{
  padding-left: var(--body-gutter) !important;
  padding-right: var(--body-gutter) !important;
}

/* El hero-section no debe heredar el padding del body-gutter */
.hero-section,
#hero{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Asegurar que el contenido dentro del hero tenga padding lateral pero se mantenga centrado */
#hero .hero-content,
.hero-section .hero-content{
  padding-left: var(--body-gutter) !important;
  padding-right: var(--body-gutter) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (min-width: 992px){
  #quarto-document-content > *:not(.full-bleed),
  main.content > *:not(.full-bleed){
    max-width: var(--body-max);
    margin-left: auto; margin-right: auto;
  }
}

/* Utilidad para secciones realmente de borde a borde */
.full-bleed{
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ───────────────────────────────
   Navbar
   ─────────────────────────────── */
.navbar{
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,0.98) !important; /* claro por defecto */
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
  padding: 1rem 0 !important;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: var(--navbar-h);
}
.navbar > .container-fluid{ 
  width: 100% !important; 
  max-width: 100% !important; 
  padding-left: var(--body-gutter) !important;
  padding-right: var(--body-gutter) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Ocultar navbar-brand si existe */
.navbar-brand{
  display: none !important;
}

/* Asegurar que no haya márgenes en los elementos del navbar */
.navbar-nav:first-child{
  margin-left: 0 !important;
}

/* Links e iconos siempre blancos sobre el hero */
.navbar-nav{ margin-left: auto !important; display: flex !important; align-items: center !important; }
.navbar-nav .nav-link{
  color: rgba(0,0,0,0.88) !important; /* oscuro por defecto para visibilidad en páginas internas */
  font-weight: 400 !important; /* quitar negrita */
  margin: 0 .6rem;
  padding: .5rem .75rem !important;
  transition: color .15s ease, transform .15s ease;
  font-size: 1.05rem; /* ligeramente más grande */
}
/* Hover y activo en páginas internas: mantener oscuro/primario */
.navbar-nav .nav-link:hover{ color: rgba(0,0,0,0.98) !important; }
.navbar-nav .nav-link.active{ color: var(--primary-color) !important; }
.navbar .bi, .navbar .fa, .navbar i, .navbar svg{
  color: rgba(0,0,0,0.9) !important; /* iconos oscuros por defecto */
  fill: currentColor !important;
  font-size: 1.15rem; /* iconos un poco más grandes */
  line-height: 1;
}

/* Menú hamburguesa (navbar-toggler) - oscuro en páginas no-index, blanco en index */
/* Bootstrap usa span.navbar-toggler-icon con background-image para las líneas */
body:not(.index-page-body) .navbar-toggler{
  border-color: rgba(0,0,0,0.3) !important;
}

body:not(.index-page-body) .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* En index, mantener el menú hamburguesa blanco */
.index-page-body .navbar-toggler{
  border-color: rgba(255,255,255,0.3) !important;
}

.index-page-body .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ───────────────────────────────
   Vanta Background - Cubre toda la página
   ─────────────────────────────── */
.vanta-background{
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0 !important; /* Detrás del contenido pero visible */
  pointer-events: none; /* No intercepta clics */
  margin: 0 !important;
  padding: 0 !important;
}

#vanta-background canvas{
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0 !important; /* Detrás del contenido */
  pointer-events: none;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Forzar alta resolución del canvas */
#vanta-background{
  transform: translateZ(0); /* Activar aceleración de hardware */
  -webkit-transform: translateZ(0);
  will-change: transform;
}

/* ───────────────────────────────
   Hero (portada sin scroll)
   ─────────────────────────────── */
.hero-section{
  /* ocupa 100vh menos navbar y footer: portada visible sin scroll */
  min-height: calc(100vh - var(--navbar-h) - var(--footer-h));
  width: 100vw; max-width: 100vw; 
  overflow: visible !important; /* Permitir que el contenido sea visible */
  display: flex !important; 
  align-items: center !important; 
  justify-content: center !important;
  background: transparent; /* Transparente para que se vea Vanta detrás */
  position: relative;
  margin-left: calc(50% - 50vw); 
  margin-right: calc(50% - 50vw);
  padding: 2rem 0 !important; /* Padding vertical para evitar que se corte */
  z-index: 2; /* Por encima del fondo Vanta */
}

.hero-content{
  position: relative; z-index: 3; 
  text-align: center !important; 
  color: #fff;
  padding: 2rem var(--body-gutter); 
  max-width: 900px; 
  font-size: 1.5rem;
  margin: 0 auto !important; /* Centrar horizontalmente */
  width: 100%;
  max-width: 900px !important;
  box-sizing: border-box;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* Centrar todos los elementos hijos */
}
.hero-content h1{
  color: #fff !important; font-weight: 800 !important;
  font-size: clamp(4rem, 7vw, 5.5rem) !important; 
  line-height: 1.1; 
  margin: 0 auto 2rem auto !important; /* Centrar con margen automático */
  text-align: center !important;
  width: 100%;
  max-width: 100%;
}
.hero-content p,
.hero-content strong{
  text-align: center !important;
  width: 100%;
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}
.hero-description{
  font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.8; color: rgba(255,255,255,.9);
  max-width: 700px; margin: 0 auto 2.5rem auto;
  text-align: center !important; /* Asegurar centrado */
  width: 100%;
}
.hero-info{ 
  display: flex !important; 
  justify-content: center !important; 
  align-items: center !important;
  gap: 2rem; 
  flex-wrap: wrap; 
  margin: 2rem auto 0 auto !important; /* Centrar con margen automático */
  width: 100%;
  max-width: 100%;
}
.info-item{ 
  display: flex !important; 
  align-items: center !important; 
  justify-content: center !important;
  gap: .75rem; 
  color: rgba(255,255,255,.9); 
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  margin: 0 auto !important;
}
.info-item i{ color: var(--primary-color); font-size: clamp(1.3rem, 2.5vw, 1.7rem) !important; }
.info-item span{ text-align: center !important; }

/* CTA hero */
.hero-cta{
  margin: 1.25rem auto 0 auto !important; /* Centrar con margen automático */
  font-size: clamp(1.1rem, 2.6vw, 1.7rem);
  font-weight: 800; 
  color: #fff; 
  text-align: center !important; 
  text-wrap: balance;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
  width: 100%;
  max-width: 100%;
}
.hero-cta a{ color: #fff; font-weight: 800; text-decoration: underline; }
.hero-cta a:hover{ text-decoration: none; filter: brightness(1.1); }

/* ───────────────────────────────
   Secciones internas
   ─────────────────────────────── */
.content-section{ padding: 4rem 0; }
.page-header.full-bleed{
  background: linear-gradient(135deg, var(--primary-color) 0%, #1a4fa0 100%);
  padding: 4rem 0; text-align: center;
}
.page-header h2, .page-header h2.title, .page-header p{ color: #fff !important; }
.page-title{ font-size: 3rem; margin-bottom: 1rem; color: #fff !important; }
.page-subtitle{ font-size: 1.2rem; color: rgba(255,255,255,.9) !important; font-weight: 700; }

/* Grillas de equipo e invitados */
/* Base team-grid - solo aplica si no es team-page */
.team-grid:not(.team-page .team-grid){ 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 3rem; 
  margin: 2rem 0 !important; 
}
.team-row-2{ grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; justify-items: center; max-width: 800px; margin: 2rem auto 0; }
.speaker-card{ text-align: center; }
.speaker-photo{ 
  width: 250px; 
  height: 250px; 
  max-width: 100%; /* Responsive */
  margin: 0 auto 1.5rem; 
  border-radius: 50%; 
  overflow: hidden; 
  border: 4px solid var(--primary-color); 
  box-shadow: var(--shadow); 
  transition: transform .3s ease; 
  background: var(--bg-light);
  box-sizing: border-box !important; /* Incluir border en el tamaño */
}

/* Responsive para imágenes del equipo - similar a instituciones */
@media (max-width: 1200px) {
  .speaker-photo{ 
    width: 220px !important; 
    height: 220px !important; 
  }
}

@media (max-width: 992px) {
  .speaker-photo{ 
    width: 200px !important; 
    height: 200px !important; 
  }
}

@media (max-width: 768px) {
  .speaker-photo{ 
    width: 180px !important; 
    height: 180px !important; 
  }
}

@media (max-width: 576px) {
  .speaker-photo{ 
    width: 160px !important; 
    height: 160px !important; 
  }
}
.speaker-card:hover .speaker-photo{ transform: scale(1.05); }
.speaker-photo img{ width: 100%; height: 100%; object-fit: cover; }
.speaker-info{ max-width: 400px; margin: 0 auto; }

/* Efecto hover para imágenes en invitados (igual que en colaboradores) */
.invitados-page .speaker-card-horizontal:hover .speaker-photo,
.invitados-page .speaker-card:hover .speaker-photo,
body.invitados-page .speaker-card-horizontal:hover .speaker-photo,
body.invitados-page .speaker-card:hover .speaker-photo{
  transform: scale(1.05) !important;
  transition: transform 0.3s ease !important;
}

.invitados-page .speaker-photo,
body.invitados-page .speaker-photo{
  transition: transform 0.3s ease !important;
}

/* Estilos para los tabs del panel-tabset: más grandes y en negrita */
.panel-tabset .nav-tabs .nav-link{
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  padding: 0.75rem 1.25rem !important;
}

.panel-tabset .nav-tabs{
  border-bottom: 2px solid #dee2e6 !important;
  margin-bottom: 2rem !important;
}

.panel-tabset .nav-tabs .nav-link.active{
  font-weight: 700 !important;
  border-bottom: 3px solid var(--primary-color) !important;
}

/* Tarjetas horizontales para invitados: foto a la izquierda, info a la derecha */
.speaker-card-horizontal{
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 2rem !important;
  margin: 2rem 0 !important;
  padding: 1.5rem !important;
  background: var(--bg-light) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow) !important;
  width: 100% !important;
  max-width: 100% !important;
}

.speaker-card-horizontal .speaker-photo{
  flex-shrink: 0 !important;
  margin: 0 !important;
  width: 250px !important;
  height: 250px !important;
}

/* Aumentar el tamaño de los íconos de contacto solo en la página de invitados (1.5x del original) */
body.invitados-page .speaker-card-horizontal .team-link,
.invitados-page .speaker-card-horizontal .team-link{
  width: 60px !important;
  height: 60px !important;
  font-size: 1.8rem !important;
}

body.invitados-page .speaker-card-horizontal .team-link i,
.invitados-page .speaker-card-horizontal .team-link i{
  font-size: 1.8rem !important;
  line-height: 60px !important;
}

.speaker-info-horizontal{
  flex: 1 !important;
  text-align: left !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.speaker-info-horizontal .speaker-name{
  text-align: left !important;
  margin-bottom: 0.5rem !important;
  margin-top: 0 !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
}

.speaker-info-horizontal .speaker-role{
  text-align: left !important;
  margin-bottom: 1rem !important;
  color: var(--primary-color) !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
}

.speaker-info-horizontal .speaker-bio{
  text-align: left !important;
  margin-bottom: 1rem !important;
  line-height: 1.6 !important;
}

/* Justificar texto solo para invitados - debe estar después de la regla anterior */
/* Máxima especificidad para asegurar que sobrescriba todas las reglas anteriores */
body.invitados-page .speaker-info-horizontal .speaker-bio,
body.invitados-page.team-page .speaker-info-horizontal .speaker-bio,
.invitados-page .speaker-info-horizontal .speaker-bio,
body.invitados-page .speaker-card-horizontal .speaker-info-horizontal .speaker-bio,
.invitados-page .speaker-card-horizontal .speaker-info-horizontal .speaker-bio,
html body.invitados-page .speaker-info-horizontal .speaker-bio,
html body.invitados-page .speaker-card-horizontal .speaker-info-horizontal .speaker-bio,
html body.invitados-page.team-page .speaker-info-horizontal .speaker-bio {
  text-align: justify !important;
}

.speaker-info-horizontal .team-links{
  justify-content: flex-start !important;
  margin-top: 1rem !important;
}

/* Responsive para tarjetas horizontales */
@media (max-width: 768px) {
  .speaker-card-horizontal{
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  
  .speaker-card-horizontal .speaker-photo{
    margin: 0 auto 1rem !important;
  }
  
  .speaker-info-horizontal,
  .speaker-info-horizontal .speaker-name,
  .speaker-info-horizontal .speaker-role{
    text-align: center !important;
  }
  
  /* Mantener justificación en mobile solo para invitados */
  body.invitados-page .speaker-info-horizontal .speaker-bio,
  .invitados-page .speaker-info-horizontal .speaker-bio {
    text-align: justify !important;
  }
  
  /* Para otras páginas, centrar en mobile */
  body:not(.invitados-page) .speaker-info-horizontal .speaker-bio {
    text-align: center !important;
  }
  
  .speaker-info-horizontal .team-links{
    justify-content: center !important;
  }
}

/* Tarjetas horizontales para invitados: foto a la izquierda, info a la derecha */
.speaker-card-horizontal{
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 2rem !important;
  margin: 2rem 0 !important;
  padding: 1.5rem !important;
  background: var(--bg-light) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow) !important;
}

.speaker-card-horizontal .speaker-photo{
  flex-shrink: 0 !important;
  margin: 0 !important;
  width: 250px !important;
  height: 250px !important;
}

.speaker-info-horizontal{
  flex: 1 !important;
  text-align: left !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.speaker-info-horizontal .speaker-name{
  text-align: left !important;
  margin-bottom: 0.5rem !important;
  margin-top: 0 !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
}

.speaker-info-horizontal .speaker-role{
  text-align: left !important;
  margin-bottom: 1rem !important;
  color: var(--primary-color) !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
}

.speaker-info-horizontal .speaker-bio{
  text-align: left !important;
  margin-bottom: 1rem !important;
  line-height: 1.6 !important;
}

/* Justificar texto solo para invitados - debe estar después de la regla anterior */
/* Máxima especificidad para asegurar que sobrescriba todas las reglas anteriores */
body.invitados-page .speaker-info-horizontal .speaker-bio,
body.invitados-page.team-page .speaker-info-horizontal .speaker-bio,
.invitados-page .speaker-info-horizontal .speaker-bio,
body.invitados-page .speaker-card-horizontal .speaker-info-horizontal .speaker-bio,
.invitados-page .speaker-card-horizontal .speaker-info-horizontal .speaker-bio,
html body.invitados-page .speaker-info-horizontal .speaker-bio,
html body.invitados-page .speaker-card-horizontal .speaker-info-horizontal .speaker-bio,
html body.invitados-page.team-page .speaker-info-horizontal .speaker-bio {
  text-align: justify !important;
}

.speaker-info-horizontal .team-links{
  justify-content: flex-start !important;
  margin-top: 1rem !important;
}

/* Responsive para tarjetas horizontales */
@media (max-width: 768px) {
  .speaker-card-horizontal{
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  
  .speaker-card-horizontal .speaker-photo{
    margin: 0 auto 1rem !important;
  }
  
  .speaker-info-horizontal,
  .speaker-info-horizontal .speaker-name,
  .speaker-info-horizontal .speaker-role{
    text-align: center !important;
  }
  
  /* Mantener justificación en mobile solo para invitados */
  body.invitados-page .speaker-info-horizontal .speaker-bio,
  .invitados-page .speaker-info-horizontal .speaker-bio {
    text-align: justify !important;
  }
  
  /* Para otras páginas, centrar en mobile */
  body:not(.invitados-page) .speaker-info-horizontal .speaker-bio {
    text-align: center !important;
  }
  
  .speaker-info-horizontal .team-links{
    justify-content: center !important;
  }
}

/* Grid para instituciones: todas en una fila con mayor separación */
/* Aplicar a ambas secciones: Instituciones Colaboradoras y Financiamiento */
.institutions-grid,
.institutions-grid-3,
.content-section .institutions-grid,
.content-section .institutions-grid-3,
.container .institutions-grid,
.container .institutions-grid-3{
  display: grid !important; /* Cambiar a grid para mejor control de alineación */
  grid-template-columns: repeat(3, 1fr) !important; /* 3 columnas iguales */
  gap: 2rem !important;
  align-items: start !important; /* Alinear desde arriba */
  justify-items: center !important; /* Centrar horizontalmente cada item */
  margin: 2rem 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Responsive para instituciones */
@media (max-width: 1200px) {
  .institutions-grid,
  .institutions-grid-3,
  .content-section .institutions-grid,
  .content-section .institutions-grid-3,
  .container .institutions-grid,
  .container .institutions-grid-3{
    grid-template-columns: repeat(2, 1fr) !important; /* 2 columnas en pantallas medianas */
  }
}

@media (max-width: 768px) {
  .institutions-grid,
  .institutions-grid-3,
  .content-section .institutions-grid,
  .content-section .institutions-grid-3,
  .container .institutions-grid,
  .container .institutions-grid-3{
    grid-template-columns: 1fr !important; /* 1 columna en móviles */
    gap: 1.5rem !important;
  }
  
  .institution-photo,
  .content-section .institution-photo,
  .container .institution-photo,
  .institution-card .institution-photo{
    width: 250px !important; /* Aumentado de 200px a 250px en móviles */
    height: 250px !important;
  }
}

/* Tarjetas de instituciones - aplicar a ambas secciones */
.institution-card,
.content-section .institution-card,
.container .institution-card{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Asegurar que el texto esté alineado y tenga el mismo margen en todas las tarjetas */
.institution-card .speaker-info,
.content-section .institution-card .speaker-info,
.container .institution-card .speaker-info{
  margin-top: 0 !important; /* Sin margen superior - el margen está en la imagen */
  margin-bottom: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  text-align: center !important;
}

.institution-card .speaker-name,
.content-section .institution-card .speaker-name,
.container .institution-card .speaker-name{
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

/* Imágenes institucionales: tamaño fijo uniforme para todas las imágenes - aplicar a ambas secciones */
.institution-photo,
.content-section .institution-photo,
.container .institution-photo,
.institution-card .institution-photo{
  width: 300px !important; /* Aumentado de 240px a 300px */
  height: 300px !important; /* Aumentado de 240px a 300px */
  margin: 0 auto !important; /* Centrar horizontalmente */
  margin-bottom: 0.5rem !important; /* Mismo margen inferior para todas */
  padding: 0 !important;
  border-radius: 8px;
  overflow: hidden; 
  border: none; 
  box-shadow: none !important; 
  transition: transform .3s ease; 
  background: transparent; 
  display: block !important;
  flex-shrink: 0 !important;
}

/* Agrandar proporcionalmente solo las imágenes de Instituciones Colaboradoras */
/* Usar selector basado en el ID del título */
section#instituciones-colaboradoras .institution-photo,
section#instituciones-colaboradoras .institution-card .institution-photo,
section#instituciones-colaboradoras ~ * .institution-photo:not(section#financiamiento .institution-photo),
/* Selector alternativo: primera sección level2 (Instituciones Colaboradoras) */
body.team-page section.level2:first-of-type .institution-photo,
body.team-page section.level2:first-of-type .institution-card .institution-photo,
.team-page section.level2:first-of-type .institution-photo,
.team-page section.level2:first-of-type .institution-card .institution-photo,
body.program-page section.level2:first-of-type .institution-photo,
body.program-page section.level2:first-of-type .institution-card .institution-photo,
.program-page section.level2:first-of-type .institution-photo,
.program-page section.level2:first-of-type .institution-card .institution-photo{
  width: 360px !important; /* Agrandado proporcionalmente desde 300px (20% más) */
  height: 360px !important;
  margin-bottom: 0.5rem !important;
}

section#instituciones-colaboradoras .institution-photo-small,
section#instituciones-colaboradoras .institution-card .institution-photo-small,
body.team-page section.level2:first-of-type .institution-photo-small,
body.team-page section.level2:first-of-type .institution-card .institution-photo-small,
.team-page section.level2:first-of-type .institution-photo-small,
.team-page section.level2:first-of-type .institution-card .institution-photo-small,
body.program-page section.level2:first-of-type .institution-photo-small,
body.program-page section.level2:first-of-type .institution-card .institution-photo-small,
.program-page section.level2:first-of-type .institution-photo-small,
.program-page section.level2:first-of-type .institution-card .institution-photo-small{
  width: 288px !important; /* Agrandado proporcionalmente desde 240px (20% más) */
  height: 288px !important;
  margin-bottom: 0.5rem !important;
}

/* Imagen más pequeña para College (solo en Financiamiento mantiene 240px) */
.institution-photo-small,
.content-section .institution-photo-small,
.container .institution-photo-small,
.institution-card .institution-photo-small{
  width: 240px !important; /* Más pequeña que el estándar */
  height: 240px !important;
  margin-bottom: 0.5rem !important; /* Mismo margen inferior que las demás */
}

/* Imágenes más grandes para CEGA y UC Berkeley */
.institution-photo-large,
.content-section .institution-photo-large,
.container .institution-photo-large,
.institution-card .institution-photo-large{
  width: 350px !important; /* Más grande que el estándar */
  height: 350px !important;
  margin-bottom: 0.5rem !important; /* Mismo margen inferior que las demás */
}

/* Reducir tamaño de imágenes solo en la sección de Financiamiento */
section#financiamiento .institution-photo,
section#financiamiento .institution-card .institution-photo,
body.team-page section.level2:last-of-type .institution-photo,
body.team-page section.level2:last-of-type .institution-card .institution-photo,
.team-page section.level2:last-of-type .institution-photo,
.team-page section.level2:last-of-type .institution-card .institution-photo,
body.program-page section.level2:last-of-type .institution-photo,
body.program-page section.level2:last-of-type .institution-card .institution-photo,
.program-page section.level2:last-of-type .institution-photo,
.program-page section.level2:last-of-type .institution-card .institution-photo{
  width: 260px !important; /* Reducido desde 300px */
  height: 260px !important;
  margin-bottom: 0.5rem !important;
}

section#financiamiento .institution-photo-large,
section#financiamiento .institution-card .institution-photo-large,
body.team-page section.level2:last-of-type .institution-photo-large,
body.team-page section.level2:last-of-type .institution-card .institution-photo-large,
.team-page section.level2:last-of-type .institution-photo-large,
.team-page section.level2:last-of-type .institution-card .institution-photo-large,
body.program-page section.level2:last-of-type .institution-photo-large,
body.program-page section.level2:last-of-type .institution-card .institution-photo-large,
.program-page section.level2:last-of-type .institution-photo-large,
.program-page section.level2:last-of-type .institution-card .institution-photo-large{
  width: 300px !important; /* Reducido desde 350px */
  height: 300px !important;
  margin-bottom: 0.5rem !important;
}
/* Eliminar márgenes del párrafo dentro de institution-photo */
.institution-photo p,
.content-section .institution-photo p,
.container .institution-photo p,
.institution-card .institution-photo p{
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
.institution-link{ 
  text-decoration: none; 
  display: block;
  color: inherit;
  width: 100%;
  height: 100%;
}
.institution-card:hover .institution-photo{ 
  transform: scale(1.05); 
  box-shadow: none !important;
}
.institution-photo img,
.institution-photo .img-fluid{ 
  width: 100% !important; 
  height: 100% !important; 
  object-fit: contain !important; 
  padding: 0.75rem; 
  background: #fff; 
  display: block !important;
  margin: 0 !important;
}

/* Responsive para instituciones - ya está en el bloque anterior */
.speaker-name, .team-name{ font-size: 1.5rem; margin-bottom: .5rem; color: var(--secondary-color); }
.speaker-affiliation, .team-role{ color: var(--primary-color); font-weight: 500; margin-bottom: 1rem; font-size: .95rem; }
.speaker-bio, .team-description{ color: var(--text-light); line-height: 1.6; font-size: .95rem; margin-bottom: 1rem; }

/* Justificar texto de descripciones solo en la página de invitados */
/* Aumentar especificidad para sobrescribir reglas anteriores */
body.invitados-page .speaker-bio,
.invitados-page .speaker-bio,
body.invitados-page .speaker-info-horizontal .speaker-bio,
.invitados-page .speaker-info-horizontal .speaker-bio,
body.invitados-page .speaker-card-horizontal .speaker-info-horizontal .speaker-bio,
.invitados-page .speaker-card-horizontal .speaker-info-horizontal .speaker-bio,
html body.invitados-page .speaker-info-horizontal .speaker-bio,
html body.invitados-page .speaker-card-horizontal .speaker-info-horizontal .speaker-bio {
  text-align: justify !important;
}

/* Links del team */
.team-links{ display: flex !important; gap: 1rem; justify-content: center; margin-top: 1rem; align-items: center; }
.team-link{
  width: 40px; height: 40px; display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--bg-light); color: var(--text-color) !important;
  font-size: 1.2rem; transition: all .3s ease; flex-shrink: 0; text-decoration: none;
}
.team-link:hover{ background: var(--primary-color); color: #fff; transform: scale(1.15); box-shadow: var(--shadow-hover); }
.team-link i{ color: inherit !important; }

/* Invitados */
.speakers-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin: 2rem 0 !important; }

/* Programa */
.program-container{ margin: 0 !important; padding: 0 !important; }
.program-note{ margin-top: 1.5rem; padding: 1rem; background: var(--bg-light); border-radius: 8px; color: var(--text-light); text-align: center; }
.program-note i{ color: var(--primary-color); margin-right: .5rem; }
.program-note a{ color: var(--primary-color); text-decoration: none; font-weight: 500; }
.program-note a:hover{ text-decoration: underline; }

/* Mapa */
.map-container{ margin: 3rem 0 0 0 !important; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); }
.map-container iframe{ width: 100%; height: 600px; border: 0; display: block; }

/* Imágenes de ubicaciones en la página de map */
/* Imágenes de ubicación en map.qmd - mismo tamaño y esquinas redondeadas */
body.team-page .location-image,
.team-page .location-image,
body.team-page img.location-image,
.team-page img.location-image,
body.team-page figure img.location-image,
.team-page figure img.location-image,
body.team-page figure img[class*="location-image"],
.team-page figure img[class*="location-image"],
body.programa-page .location-image,
.programa-page .location-image,
body.programa-page img.location-image,
.programa-page img.location-image,
body.programa-page figure img.location-image,
.programa-page figure img.location-image,
body.programa-page figure img[class*="location-image"],
.programa-page figure img[class*="location-image"]{
  display: block !important;
  margin: 0 auto 1.5rem !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 350px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
}

body.programa-page section.level3,
.programa-page section.level3{
  text-align: center !important;
  margin: 2rem 0 !important;
}

body.programa-page section.level3 p,
.programa-page section.level3 p{
  text-align: center !important;
  margin-top: 0.5rem !important;
}

/* Responsive para imágenes de ubicaciones */
@media (max-width: 768px) {
  body.team-page .location-image,
  .team-page .location-image,
  body.team-page img.location-image,
  .team-page img.location-image,
  body.programa-page .location-image,
  .programa-page .location-image,
  body.programa-page img.location-image,
  .programa-page img.location-image{
    width: 100% !important;
    max-width: 100% !important;
    height: 350px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }
}

/* Estilos para links de materiales en páginas de programa */
.material-link{
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.5rem 1rem !important;
  margin: 0.5rem 0.5rem 0.5rem 0 !important;
  background: var(--bg-light) !important;
  color: var(--text-color) !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
  font-size: 0.95rem !important;
}

.material-link:hover{
  background: var(--primary-color) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow) !important;
}

.material-link i{
  font-size: 1.1rem !important;
}

/* Mantener el contenido ocupando el espacio, sin empujar el footer */
#quarto-content, main, .quarto-container{ flex: 1; }

/* Para páginas que no son index, permitir que el footer sea dinámico */
body:not(.index-page-body) #quarto-content,
body:not(.index-page-body) main,
body:not(.index-page-body) .quarto-container{
  flex: unset !important;
  min-height: auto !important;
}

/* Asegurar que el footer esté fijo en la parte inferior para la página de invitados */
body.invitados-page,
.invitados-page{
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

body.invitados-page #quarto-content,
body.invitados-page main,
body.invitados-page .quarto-container,
.invitados-page #quarto-content,
.invitados-page main,
.invitados-page .quarto-container{
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

body.invitados-page .content-section,
.invitados-page .content-section{
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

body.invitados-page .container,
.invitados-page .container{
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

body.invitados-page .panel-tabset,
.invitados-page .panel-tabset{
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

body.invitados-page .tab-content,
.invitados-page .tab-content{
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

body.invitados-page .tab-pane,
.invitados-page .tab-pane{
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

body.invitados-page .nav-footer,
body.invitados-page .page-footer,
.invitados-page .nav-footer,
.invitados-page .page-footer{
  position: relative !important;
  margin-top: auto !important;
  flex-shrink: 0 !important;
}

/* ───────────────────────────────
   Footer nativo (Quarto)
   ─────────────────────────────── */
.nav-footer, .page-footer{
  background: #0e0e0e !important; color: #fff !important; border-top: none !important;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding: 16px 0; margin-top: 0 !important; min-height: var(--footer-h);
  position: relative;
  z-index: 10 !important; /* Por encima de todo, incluyendo Vanta */
  display: table !important; /* Usar table para alineación perfecta */
  table-layout: fixed !important;
  width: 100% !important;
}
.nav-footer a, .page-footer a{ color: #fff !important; text-decoration: none; font-weight: 600; }
.nav-footer a:hover, .page-footer a:hover{ text-decoration: underline; }
.nav-footer .nav-footer-left,
.nav-footer .nav-footer-center,
.nav-footer .nav-footer-right{ 
  padding: 0 var(--body-gutter);
  display: table-cell !important; /* Usar table-cell para alineación vertical perfecta */
  width: 33.333% !important;
  vertical-align: top !important; /* Alinear desde arriba */
  margin: 0 !important;
  padding-top: 0 !important;
}
.nav-footer .nav-footer-left{
  text-align: left !important;
}
.nav-footer .nav-footer-center{
  text-align: center !important;
}
.nav-footer .nav-footer-right{
  text-align: right !important;
}
/* Asegurar que los párrafos dentro del footer no tengan márgenes que causen desalineación */
.nav-footer p,
.page-footer p,
.nav-footer .nav-footer-left p,
.nav-footer .nav-footer-center p,
.nav-footer .nav-footer-right p,
.page-footer p{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
}

/* Aumentar moderadamente el tamaño de fuente del texto del footer */
.nav-footer,
.page-footer {
  font-size: 0.875rem !important; /* Aumentado moderadamente de ~0.81rem a 0.875rem (14px) */
}

/* Los enlaces y texto específico del footer */
.nav-footer a,
.page-footer a,
.nav-footer p,
.page-footer p,
.nav-footer span,
.page-footer span,
.nav-footer div,
.page-footer div {
  font-size: inherit !important; /* Heredar del footer */
}

/* Aumentar tamaño de íconos en footer sin afectar otras áreas */
.nav-footer .bi, .nav-footer .fa, .nav-footer i, .nav-footer svg,
.page-footer .bi, .page-footer .fa, .page-footer i, .page-footer svg{
  font-size: 1.35rem !important; /* un poco más grandes */
  line-height: 1 !important;
  vertical-align: middle;
}

/* Si el footer tiene enlaces con iconos dentro de botones, aplicar escala suave */
.nav-footer a > .bi, .nav-footer a > i, .page-footer a > .bi, .page-footer a > i{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}

/* ───────────────────────────────
   Responsive
   ─────────────────────────────── */
@media (max-width: 992px){
  .team-grid{ grid-template-columns: repeat(5, 1fr); }
  .team-row-2{ grid-column: span 5; grid-template-columns: 1fr; }
  .speakers-grid{ grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 768px){
  .navbar-nav{ flex-wrap: wrap; justify-content: center; }
  .navbar-nav .nav-link{ margin: .25rem; font-size: .9rem; }
  .hero-content h1{ font-size: clamp(2.5rem, 5vw, 3.5rem) !important; }
  .hero-description{ font-size: clamp(1.05rem, 1.8vw, 1.3rem); }
  .hero-info{ flex-direction: column; gap: 1rem; }
  .info-item{ font-size: clamp(.95rem, 1.6vw, 1.2rem); }
  .info-item i{ font-size: clamp(1.2rem, 2.2vw, 1.6rem) !important; }
  .content-section{ padding: 2rem 0; }
  .page-header.full-bleed{ padding: 2rem 0; }
  /* No aplicar a team-page, que tiene sus propias reglas responsive */
  .team-grid:not(.team-page .team-grid), 
  .speakers-grid:not(.team-page .speakers-grid){ 
    grid-template-columns: 1fr !important; 
    gap: 2rem; 
  }
  .team-row-2{ grid-column: span 1; }
  .speaker-photo{ width: 200px; height: 200px; }
}
@media (max-width: 480px){
  .hero-content h1{ font-size: clamp(2rem, 4.5vw, 3rem) !important; }
  .hero-description{ font-size: clamp(1rem, 1.6vw, 1.25rem); }
  .info-item{ font-size: clamp(.9rem, 1.4vw, 1.15rem); }
  .info-item i{ font-size: clamp(1.1rem, 1.8vw, 1.5rem) !important; }
  .content-section{ padding: 1.5rem 0; }
  .page-header.full-bleed{ padding: 2rem 0; }
}

/* --- Hero full-bleed y Vanta detrás del contenido --- */

/* El hero no debe heredar max-width/gutter del body */
#quarto-document-content > .full-bleed,
main.content > .full-bleed{
  margin-left: calc(10% - 50vw) !important;
  margin-right: calc(10% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ===== Centro de textos solo para la página index ===== */
/* Aplica centrado y centra elementos de grid sin afectar otras páginas */
.index-page,
.index-page .hero-content,
.index-page .page-header,
.index-page .content-section,
.index-page .hero-description,
.index-page .page-title,
.index-page .page-subtitle,
.index-page .speaker-card,
.index-page .team-links,
.index-page .speaker-info {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Centrar items dentro de grillas */
.index-page .team-grid,
.index-page .speakers-grid {
  justify-items: center;
  align-items: start;
}

/* Asegurar que filas internas queden centradas */
.index-page .team-row-2 {
  justify-items: center;
}

/* Ajustes para fotos/tarjetas en móvil */
@media (max-width: 768px){
  .index-page .speaker-photo { margin: 0 auto 1.5rem; }
}

/* ===== Ajustes adicionales: navbar, iconos y botón de inscripción ===== */
/* Index-only: navbar white styling for hero (only when body has index-page-body) */
body.index-page-body .navbar-nav .nav-link{
  color: rgba(255,255,255,.6) !important; /* por defecto gris sobre el hero */
  font-size: 1.15rem !important; /* un poco más grande */
  font-weight: 400 !important; /* quitar negrita */
  transition: color .12s ease, transform .12s ease;
}
body.index-page-body .navbar-nav .nav-link:hover{
  color: rgba(255,255,255,.95) !important;
  transform: translateY(-1px);
}
body.index-page-body .navbar-nav .nav-link.active{
  color: #ffffff !important; /* blanco brillante para la página activa */
}
body.index-page-body .navbar .bi, body.index-page-body .navbar .fa, body.index-page-body .navbar i, body.index-page-body .navbar svg{
  color: rgba(255,255,255,.85) !important;
  font-size: 1.6rem !important; /* iconos más grandes */
  line-height: 1 !important;
  vertical-align: middle;
}

/* Info items (fecha y lugar): asegurar icono visible y tamaño cómodo */
.index-page .hero-info .info-item i{
  display: inline-block; vertical-align: middle;
  font-size: clamp(1.35rem, 2.2vw, 1.6rem) !important;
  margin-right: .6rem; color: #fff !important; /* iconos blancos para mejor contraste */
}

/* CTA de inscripción: mayúscula y efecto neon */
.index-page .cta-inscripcion{
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  font-weight: 900 !important;
  color: #e8fbff !important; /* color base claro */
  text-shadow:
    0 0 8px rgba(32,110,232,0.95),
    0 0 16px rgba(32,110,232,0.65),
    0 0 28px rgba(32,110,232,0.35);
  -webkit-text-stroke: 0.3px rgba(0,0,0,0.12);
  transition: filter .12s ease, transform .12s ease;
  font-size: clamp(1.1rem, 2.6vw, 1.7rem) !important; /* igual que .hero-cta */
  display: inline-block !important;
  padding: .15rem .25rem !important;
}
.index-page .cta-inscripcion:hover{
  filter: brightness(1.05) saturate(1.1);
  transform: translateY(-1px);
}

@media (max-width: 768px){
  .navbar .bi, .navbar .fa, .navbar i, .navbar svg{ font-size: 1.35rem !important; }
  .navbar-nav .nav-link{ font-size: 1rem !important; }
  .index-page .cta-inscripcion{ font-size: .95rem !important; }
}

/* Neon effect for main title while keeping original sizing */
.index-page .hero-content h1{
  text-shadow:
    0 0 8px rgba(32,110,232,0.95),
    0 0 16px rgba(32,110,232,0.7),
    0 0 36px rgba(32,110,232,0.4);
}

/* Force hero icons to be visible (white) and properly spaced. If icons still
   don't appear, ensure the icon font (Font Awesome) is loaded in the site. */
.index-page .hero-content i,
.index-page .hero-info .info-item i{
  color: #fff !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Cuando estamos en la página index (hero), el script añadirá la clase
   `index-page-body` al <body> — esto permite mantener el navbar transparente
   en index y claro en el resto de las páginas. */
.index-page-body .navbar{
  background: transparent !important;
  box-shadow: none !important;
}
.index-page-body .navbar-nav .nav-link{
  color: rgba(255,255,255,.9) !important;
}
.index-page-body .navbar .bi, .index-page-body .navbar .fa, .index-page-body .navbar i, .index-page-body .navbar svg{
  color: rgba(255,255,255,.95) !important;
}

/* En pantallas pequeñas (cuando se muestra el menú hamburguesa), 
   hacer el navbar sólido para mejor legibilidad */
@media (max-width: 991.98px) {
  /* Navbar sólido en todas las páginas en mobile */
  .navbar {
    background: var(--white) !important; /* Fondo sólido blanco */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; /* Sombra para separación */
    backdrop-filter: none !important; /* Eliminar cualquier filtro de transparencia */
  }
  
  /* Asegurar que los textos sean oscuros en pantallas pequeñas */
  .navbar-nav .nav-link {
    color: rgba(0,0,0,0.88) !important;
  }
  
  .navbar .bi, .navbar .fa, .navbar i, .navbar svg {
    color: rgba(0,0,0,0.9) !important;
  }
  
  /* Incluso en index-page-body, hacer sólido en mobile con letras negras */
  /* Aumentar especificidad para sobrescribir todos los estilos de index */
  body.index-page-body .navbar,
  html body.index-page-body .navbar,
  .index-page-body .navbar {
    background: var(--white) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    backdrop-filter: none !important;
  }
  
  /* Letras negras en mobile para index */
  body.index-page-body .navbar-nav .nav-link,
  html body.index-page-body .navbar-nav .nav-link,
  body.index-page-body nav.navbar .navbar-nav .nav-link,
  html body.index-page-body nav.navbar .navbar-nav .nav-link,
  .index-page-body .navbar-nav .nav-link {
    color: rgba(0,0,0,0.88) !important;
  }
  
  /* Hover y active también negros en mobile para index */
  body.index-page-body .navbar-nav .nav-link:hover,
  html body.index-page-body .navbar-nav .nav-link:hover,
  body.index-page-body nav.navbar .navbar-nav .nav-link:hover,
  html body.index-page-body nav.navbar .navbar-nav .nav-link:hover,
  body.index-page-body .navbar-nav .nav-link.active,
  html body.index-page-body .navbar-nav .nav-link.active,
  body.index-page-body nav.navbar .navbar-nav .nav-link.active,
  html body.index-page-body nav.navbar .navbar-nav .nav-link.active {
    color: rgba(0,0,0,0.95) !important;
  }
  
  /* Iconos negros en mobile para index */
  body.index-page-body .navbar .bi, 
  body.index-page-body .navbar .fa, 
  body.index-page-body .navbar i, 
  body.index-page-body .navbar svg,
  html body.index-page-body .navbar .bi,
  html body.index-page-body .navbar .fa,
  html body.index-page-body .navbar i,
  html body.index-page-body .navbar svg,
  body.index-page-body nav.navbar .bi,
  body.index-page-body nav.navbar .fa,
  body.index-page-body nav.navbar i,
  body.index-page-body nav.navbar svg,
  html body.index-page-body nav.navbar .bi,
  html body.index-page-body nav.navbar .fa,
  html body.index-page-body nav.navbar i,
  html body.index-page-body nav.navbar svg,
  .index-page-body .navbar .bi, 
  .index-page-body .navbar .fa, 
  .index-page-body .navbar i, 
  .index-page-body .navbar svg {
    color: rgba(0,0,0,0.9) !important;
  }
  
  /* Menú hamburguesa blanco en index mobile (fondo blanco, ícono blanco) */
  body.index-page-body .navbar-toggler,
  html body.index-page-body .navbar-toggler {
    border-color: rgba(255,255,255,0.5) !important;
  }
  
  body.index-page-body .navbar-toggler-icon,
  html body.index-page-body .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  }
  
  /* Ícono de búsqueda blanco en index mobile */
  body.index-page-body #quarto-search,
  html body.index-page-body #quarto-search,
  body.index-page-body .navbar #quarto-search,
  html body.index-page-body .navbar #quarto-search,
  body.index-page-body .navbar .quarto-search-btn,
  html body.index-page-body .navbar .quarto-search-btn,
  body.index-page-body .navbar button[aria-label*="Search"],
  html body.index-page-body .navbar button[aria-label*="Search"],
  body.index-page-body .navbar a[aria-label*="Search"],
  html body.index-page-body .navbar a[aria-label*="Search"],
  body.index-page-body .navbar .bi-search,
  html body.index-page-body .navbar .bi-search,
  body.index-page-body .navbar .fa-search,
  html body.index-page-body .navbar .fa-search {
    color: rgba(255,255,255,0.95) !important;
    fill: rgba(255,255,255,0.95) !important;
  }
  
  /* SVG de búsqueda blanco */
  body.index-page-body #quarto-search svg,
  html body.index-page-body #quarto-search svg,
  body.index-page-body .navbar #quarto-search svg,
  html body.index-page-body .navbar #quarto-search svg,
  body.index-page-body .navbar .quarto-search-btn svg,
  html body.index-page-body .navbar .quarto-search-btn svg,
  body.index-page-body .navbar button[aria-label*="Search"] svg,
  html body.index-page-body .navbar button[aria-label*="Search"] svg,
  body.index-page-body .navbar a[aria-label*="Search"] svg,
  html body.index-page-body .navbar a[aria-label*="Search"] svg,
  body.index-page-body #quarto-search .bi,
  html body.index-page-body #quarto-search .bi,
  body.index-page-body #quarto-search .fa,
  html body.index-page-body #quarto-search .fa,
  body.index-page-body #quarto-search i,
  html body.index-page-body #quarto-search i {
    color: rgba(255,255,255,0.95) !important;
    fill: rgba(255,255,255,0.95) !important;
  }
  
  /* Menú hamburguesa oscuro en mobile */
  .navbar-toggler {
    border-color: rgba(0,0,0,0.3) !important;
  }
  
  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  }
  
  /* Asegurar que el menú colapsado también tenga fondo sólido */
  .navbar-collapse {
    background: var(--white) !important;
    margin-top: 0.5rem;
    padding: 1rem;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
}

/* Forzar textos oscuros en navbar cuando estamos fuera del index */
.navbar .nav-link{ color: rgba(0,0,0,0.88) !important; }
.navbar .bi, .navbar .fa, .navbar i, .navbar svg{ color: rgba(0,0,0,0.9) !important; }


/* ===== Estilos específicos para la página de Equipo (.team-page) y Programa (.program-page) ===== */
/* Hacer visible el navbar en páginas con fondo claro */
.team-page .navbar,
.program-page .navbar{
  background: rgba(255,255,255,0.98) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
}
.team-page .navbar .nav-link,
.program-page .navbar .nav-link{
  color: rgba(0,0,0,0.92) !important;
}
.team-page .navbar-nav .nav-link,
.program-page .navbar-nav .nav-link{
  color: rgba(0,0,0,0.92) !important;
}
.team-page .navbar .bi, .team-page .navbar .fa, .team-page .navbar i, .team-page .navbar svg,
.program-page .navbar .bi, .program-page .navbar .fa, .program-page .navbar i, .program-page .navbar svg{
  color: rgba(0,0,0,0.92) !important;
}
.team-page .navbar .nav-link:hover{
  color: rgba(0,0,0,0.98) !important;
}
.team-page .navbar .nav-link.active{
  color: var(--primary-color) !important;
}

/* Partners / instituciones: grid simple */
.partners-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; align-items: center; justify-items: center; margin-top: 1.5rem; }
.partner{text-align:center;}
.partner img, .partner img[width]{ max-width: 220px; height: auto; display:block; margin: 0 auto 0.75rem; }
.partner strong{ display:block; margin-top:.5rem; }

@media (max-width: 992px){ .partners-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px){ .partners-grid{ grid-template-columns: 1fr; } .partner img{ max-width: 180px; } }

/* Asegurar contraste en secciones internas y reducir padding superior para acercar título al grid */
.team-page .content-section,
.program-page .content-section{ 
  background: transparent; 
  color: var(--secondary-color);
  padding-top: 1rem !important;
  padding-bottom: 2rem !important;
}

/* Para colaboradores e invitados: ocultar sidebar y margin, ensanchar body */
/* NO ocultar sidebar para páginas de programa que tienen sidebar configurado */
body.team-page:not(.program-page) .column-sidebar,
body.team-page:not(.program-page) .quarto-layout-panel .column-sidebar,
.team-page:not(.program-page) .column-sidebar,
body.invitados-page .column-sidebar,
body.invitados-page .quarto-layout-panel .column-sidebar,
.invitados-page .column-sidebar{
  display: none !important;
  width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Asegurar que el sidebar sea visible en program-page (páginas de programa) */
/* Las subpáginas heredan el sidebar automáticamente cuando están listadas en contents */
body.program-page .column-sidebar,
body.program-page .quarto-layout-panel .column-sidebar,
.program-page .column-sidebar,
body.program-page .sidebar,
.program-page .sidebar,
body.program-page #quarto-sidebar,
.program-page #quarto-sidebar,
body.program-page nav[aria-label="Page navigation"],
.program-page nav[aria-label="Page navigation"],
body.program-page .quarto-sidebar,
.program-page .quarto-sidebar,
body.program-page aside.sidebar,
.program-page aside.sidebar,
body.program-page nav#quarto-sidebar,
.program-page nav#quarto-sidebar{
  display: block !important;
  visibility: visible !important;
  width: auto !important;
  min-width: 250px !important;
  max-width: 300px !important;
  flex-shrink: 0 !important;
}

/* Asegurar que el layout permita el sidebar en todas las páginas de programa */
body.program-page .page-columns,
body.program-page .quarto-layout-panel,
body.program-page .quarto-layout-row,
.program-page .page-columns,
.program-page .quarto-layout-panel,
.program-page .quarto-layout-row{
  display: grid !important;
  grid-template-columns: minmax(250px, 300px) 1fr !important;
  gap: 2rem !important;
  max-width: 100% !important;
}

/* Asegurar que el sidebar esté en la primera columna */
body.program-page .column-sidebar,
body.program-page .quarto-layout-panel .column-sidebar,
body.program-page .quarto-layout-row .column-sidebar,
.program-page .column-sidebar,
.program-page .quarto-layout-panel .column-sidebar,
.program-page .quarto-layout-row .column-sidebar{
  grid-column: 1 !important;
  display: block !important;
  visibility: visible !important;
}

/* Asegurar que el contenido esté en la segunda columna */
body.program-page .column-body,
body.program-page .quarto-layout-panel .column-body,
body.program-page .quarto-layout-row .column-body,
.program-page .column-body,
.program-page .quarto-layout-panel .column-body,
.program-page .quarto-layout-row .column-body{
  grid-column: 2 !important;
}

/* Asegurar que el contenido principal tenga el mismo ancho efectivo que map.qmd */
/* map.qmd: .container tiene width: 100% con padding var(--body-gutter) a cada lado */
/* El ancho efectivo del contenido es: 100% - 2*var(--body-gutter) */
/* programa.qmd: .column-body está en grid, pero el contenido interno debe tener el mismo ancho */
body.program-page .column-body,
body.program-page .quarto-layout-panel .column-body,
.program-page .column-body{
  min-width: 0 !important;
  flex: 1 1 auto !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* El contenido interno de program-page debe tener el mismo ancho máximo que map.qmd .container */
/* Esto asegura que el iframe y otros elementos tengan el mismo ancho */
body.program-page .column-body > *:not(.full-bleed),
.program-page .column-body > *:not(.full-bleed){
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Asegurar que el contenedor principal de program-page tenga el mismo ancho que map.qmd */
/* map.qmd: .container tiene width: 100% con padding var(--body-gutter) */
/* programa.qmd: .quarto-container debe tener el mismo ancho máximo */
/* Aplicar max-width para limitar el ancho del contenido, igual que en map.qmd */
body.program-page .quarto-container,
.program-page .quarto-container{
  max-width: var(--body-max) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: var(--body-gutter) !important;
  padding-right: var(--body-gutter) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* Forzar que el sidebar se renderice incluso con page-layout: full */
body.program-page .quarto-layout-panel,
.program-page .quarto-layout-panel,
body.program-page .quarto-layout-row,
.program-page .quarto-layout-row{
  display: grid !important;
  grid-template-columns: minmax(250px, 300px) 1fr !important;
  gap: 2rem !important;
}

/* Asegurar que el sidebar tenga un ancho mínimo visible */
body.program-page .column-sidebar,
body.program-page .quarto-layout-panel .column-sidebar,
body.program-page .quarto-layout-row .column-sidebar,
.program-page .column-sidebar,
.program-page .quarto-layout-panel .column-sidebar,
.program-page .quarto-layout-row .column-sidebar{
  min-width: 250px !important;
  width: 250px !important;
  max-width: 300px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Asegurar que el sidebar tenga contenido visible */
body.program-page #quarto-sidebar ul,
.program-page #quarto-sidebar ul,
body.program-page nav#quarto-sidebar ul,
.program-page nav#quarto-sidebar ul{
  display: block !important;
  visibility: visible !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.program-page #quarto-sidebar li,
.program-page #quarto-sidebar li,
body.program-page nav#quarto-sidebar li,
.program-page nav#quarto-sidebar li{
  display: block !important;
  visibility: visible !important;
  margin: 0.5rem 0 !important;
}

body.program-page #quarto-sidebar a,
.program-page #quarto-sidebar a,
body.program-page nav#quarto-sidebar a,
.program-page nav#quarto-sidebar a{
  display: block !important;
  visibility: visible !important;
  color: inherit !important;
  text-decoration: none !important;
  padding: 0.5rem 0 !important;
}

/* Asegurar que el sidebar de navegación (no TOC) sea visible */
body.program-page .quarto-sidebar,
.program-page .quarto-sidebar,
body.program-page nav[aria-label="Page navigation"],
.program-page nav[aria-label="Page navigation"]{
  display: block !important;
  visibility: visible !important;
}

/* Asegurar que el sidebar tenga contenido y sea visible */
body.program-page #quarto-sidebar,
.program-page #quarto-sidebar,
body.program-page nav#quarto-sidebar,
.program-page nav#quarto-sidebar{
  background-color: transparent !important;
  border-right: 1px solid rgba(0,0,0,0.1) !important;
  padding-right: 1.5rem !important;
  margin-right: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 250px !important;
  width: 250px !important;
  max-width: 300px !important;
}

/* Asegurar que los elementos del sidebar sean visibles */
body.program-page #quarto-sidebar > *,
.program-page #quarto-sidebar > *,
body.program-page nav#quarto-sidebar > *,
.program-page nav#quarto-sidebar > *{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ocultar TOC en páginas de programa */
body.program-page nav.toc-active,
.program-page nav.toc-active,
body.program-page nav[role="doc-toc"],
.program-page nav[role="doc-toc"],
body.program-page #TOC,
.program-page #TOC{
  display: none !important;
}

/* Asegurar que el sidebar de navegación esté a la izquierda */
body.program-page .quarto-sidebar,
.program-page .quarto-sidebar,
body.program-page #quarto-sidebar,
.program-page #quarto-sidebar,
body.program-page nav#quarto-sidebar,
.program-page nav#quarto-sidebar{
  order: -1 !important;
  position: sticky !important;
  top: var(--navbar-h) !important;
  align-self: start !important;
  max-height: calc(100vh - var(--navbar-h)) !important;
  overflow-y: auto !important;
  display: block !important;
  visibility: visible !important;
}

/* Asegurar que el sidebar sea visible SOLO en la página principal de programa (programa.qmd) */
/* Usar alta especificidad para sobrescribir cualquier otra regla */
html body.programa-main .column-sidebar,
html body.programa-main .quarto-layout-panel .column-sidebar,
html body.programa-main .page-columns .column-sidebar,
html .programa-main .column-sidebar,
html body.programa-main .sidebar,
html .programa-main .sidebar,
html body.programa-main #quarto-sidebar,
html .programa-main #quarto-sidebar,
html body.programa-main .quarto-sidebar,
html .programa-main .quarto-sidebar,
html body.programa-main aside.sidebar,
html .programa-main aside.sidebar,
html body.programa-main nav[aria-label="Page navigation"],
html .programa-main nav[aria-label="Page navigation"],
html body.programa-main #TOC,
html .programa-main #TOC,
body.programa-main .column-sidebar,
body.programa-main .quarto-layout-panel .column-sidebar,
.programa-main .column-sidebar,
body.programa-main .sidebar,
.programa-main .sidebar,
body.programa-main #quarto-sidebar,
.programa-main #quarto-sidebar,
body.programa-main .quarto-sidebar,
.programa-main .quarto-sidebar,
body.programa-main aside.sidebar,
.programa-main aside.sidebar,
body.programa-main nav[aria-label="Page navigation"],
.programa-main nav[aria-label="Page navigation"],
body.programa-main #TOC,
.programa-main #TOC{
  display: block !important;
  width: auto !important;
  max-width: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Asegurar que el layout de página permita el sidebar en programa-main */
body.programa-main .page-columns,
body.programa-main .quarto-layout-panel{
  display: grid !important;
  grid-template-columns: minmax(250px, auto) 1fr !important;
  gap: 2rem !important;
}

/* Asegurar que el sidebar tenga un ancho adecuado y sea visible */
body.programa-main .column-sidebar{
  min-width: 250px !important;
  max-width: 300px !important;
  display: block !important;
  visibility: visible !important;
}

/* Asegurar que el contenido principal no ocupe toda la página cuando hay sidebar */
body.programa-main .column-body{
  max-width: none !important;
  width: auto !important;
  flex: 1 !important;
}

/* Sobrescribir main-container: full-width solo para programa-main */
body.programa-main #quarto-content,
body.programa-main main,
body.programa-main .quarto-container{
  max-width: 100% !important;
  width: 100% !important;
}

/* REGLAS FINALES CON MÁXIMA ESPECIFICIDAD - Deben ir al final del archivo */
/* Forzar visibilidad del sidebar en programa-main con máxima prioridad */
html body.programa-main .quarto-layout-panel .column-sidebar,
html body.programa-main .page-columns .column-sidebar,
html body.programa-main .column-sidebar,
html body.programa-main nav.sidebar,
html body.programa-main aside.sidebar,
html body.programa-main #quarto-sidebar,
html body.programa-main nav[aria-label="Page navigation"]{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  min-width: 250px !important;
  max-width: 300px !important;
  position: relative !important;
  z-index: 1 !important;
}

body.team-page:not(.programa-page) .column-margin,
body.team-page:not(.programa-page) .quarto-layout-panel .column-margin,
.team-page:not(.programa-page) .column-margin,
body.invitados-page .column-margin,
body.invitados-page .quarto-layout-panel .column-margin,
.invitados-page .column-margin{
  display: none !important;
  width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.team-page:not(.programa-page) .column-body,
body.team-page:not(.programa-page) .quarto-layout-panel .column-body,
.team-page:not(.programa-page) .column-body,
body.invitados-page .column-body,
body.invitados-page .quarto-layout-panel .column-body,
.invitados-page .column-body{
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.team-page:not(.programa-page) .quarto-layout-panel,
body.team-page:not(.programa-page) .page-columns,
.team-page:not(.programa-page) .quarto-layout-panel,
.team-page:not(.programa-page) .page-columns,
body.invitados-page .quarto-layout-panel,
body.invitados-page .page-columns,
.invitados-page .quarto-layout-panel,
.invitados-page .page-columns{
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Título "Equipo Organizador" debe estar debajo del navbar */
/* Título "Equipo Organizador" debe estar debajo del navbar */
body.team-page section.level2,
body.team-page section#equipo-organizador,
.team-page section.level2,
.team-page section#equipo-organizador,
body.program-page section.level2,
body.program-page section#equipo-organizador,
.program-page section.level2,
.program-page section#equipo-organizador{
  padding-top: calc(var(--navbar-h) + 1.5rem) !important;
  margin-top: 0 !important;
  margin-bottom: 2rem !important; /* Reducir espacio entre secciones */
}
body.team-page section.level2 h2.anchored,
body.team-page section#equipo-organizador h2.anchored,
.team-page section.level2 h2.anchored,
.team-page section#equipo-organizador h2.anchored,
body.program-page section.level2 h2.anchored,
body.program-page section#equipo-organizador h2.anchored,
.program-page section.level2 h2.anchored,
.program-page section#equipo-organizador h2.anchored{
  margin-bottom: 1.5rem !important;
  margin-top: 0 !important;
}
/* Reducir espacio entre secciones - aplicar a todas las secciones level2 excepto la primera */
body.team-page section.level2:not(:first-of-type),
.team-page section.level2:not(:first-of-type),
body.program-page section.level2:not(:first-of-type),
.program-page section.level2:not(:first-of-type){
  margin-top: 1rem !important; /* Reducido aún más el espacio entre secciones */
  padding-top: 0 !important; /* Sin padding superior adicional */
}

/* Reducir específicamente el espacio antes de Financiamiento */
section#financiamiento,
body.team-page section#financiamiento,
.team-page section#financiamiento,
body.program-page section#financiamiento,
.program-page section#financiamiento{
  margin-top: 1rem !important; /* Espacio mínimo antes de Financiamiento */
  padding-top: 0 !important;
}

/* Reducir el margen inferior de Instituciones Colaboradoras */
section#instituciones-colaboradoras,
body.team-page section#instituciones-colaboradoras,
.team-page section#instituciones-colaboradoras,
body.program-page section#instituciones-colaboradoras,
.program-page section#instituciones-colaboradoras{
  margin-bottom: 1rem !important; /* Reducir espacio después de Instituciones Colaboradoras */
}
/* Reducir margen inferior del título h2 en team-page y program-page */
.team-page h2.anchored,
.team-page section h2,
.team-page .content-section h2,
.program-page h2.anchored,
.program-page section h2,
.program-page .content-section h2{
  margin-bottom: 1.5rem !important;
  margin-top: 0 !important;
}

/* Centrar todos los títulos h2 en team-page y program-page */
body.team-page h2,
.team-page h2,
body.team-page h2.anchored,
.team-page h2.anchored,
body.team-page section h2,
.team-page section h2,
body.program-page h2,
.program-page h2,
body.program-page h2.anchored,
.program-page h2.anchored,
body.program-page section h2,
.program-page section h2{
  text-align: center !important;
}

/* Mostrar el grid de organizadores en 3 columnas usando CSS Grid (3 en primera fila, 2 en segunda) */
.team-page .team-grid{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2.25rem !important;
  align-items: start !important;
  justify-items: center !important;
  overflow-x: visible !important;
  padding-bottom: 0.5rem;
}
.team-page .speaker-card{ 
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.team-page .team-row-2{ 
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  justify-items: center;
}
.team-page .team-row-2 .speaker-card{ 
  width: 100%;
  max-width: 100%;
}

/* Ocultar scrollbar visual en sistemas donde no es necesario */
.team-page .team-grid::-webkit-scrollbar{ height: 8px; }
.team-page .team-grid::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.08); border-radius: 6px; }

/* Evitar que el título 'Equipo Organizador' haga wrap en pantallas anchas */
.team-page h1{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================
   High-specificity fixes for active nav link on internal pages
   Ensure active nav items are visible (primary color) when NOT on index
   This block uses very specific selectors and is placed at the end so it
   overrides theme/bootstrap selectors that may otherwise force white.
   ========================== */
body:not(.index-page-body) nav.navbar .navbar-nav > .nav-item > a.nav-link.active,
body:not(.index-page-body) nav.navbar .navbar-nav > .nav-item > a.nav-link.show,
body:not(.index-page-body) .navbar-nav .nav-item.active > a.nav-link,
body:not(.index-page-body) .navbar-nav .nav-link.active{
  color: var(--primary-color) !important;
  background: transparent !important;
  text-shadow: none !important;
}

/* Extra reinforced selector in case the theme uses additional classes */
body:not(.index-page-body) .navbar.navbar-default .navbar-nav .nav-link.active,
body:not(.index-page-body) header .navbar .navbar-nav .nav-link.active{
  color: var(--primary-color) !important;
}

/* Ensure icons in the active link also match the color */
body:not(.index-page-body) .navbar .nav-link.active .bi,
body:not(.index-page-body) .navbar .nav-link.active .fa,
body:not(.index-page-body) .navbar .nav-link.active i,
body:not(.index-page-body) .navbar .nav-link.active svg{
  color: var(--primary-color) !important;
  fill: currentColor !important;
}

/* Force navbar links to normal weight globally (avoid multiple bold rules from theme) */
nav.navbar .navbar-nav .nav-link{
  font-weight: 400 !important;
}

/* Speaker card typography tweaks: smaller name, clear role and bio under image
  Scoped to .team-page so footer/other pages are not affected */
.team-page .speaker-name{ font-size: 1.05rem; font-weight: 700; margin-bottom: 0.25rem; color: var(--secondary-color); }
.team-page .speaker-role{ font-size: 0.95rem; font-weight: 600; color: var(--secondary-color); margin-bottom: 0.5rem; }
.team-page .speaker-bio{ font-size: 0.95rem; color: var(--text-light); line-height: 1.45; margin-bottom: 0.75rem; }

/* ============================================================
   OPCIÓN 1: Usar clases personalizadas .row-team-1 y .col-team-3
   ============================================================ */
body.team-page .row-team-1,
.team-page .row-team-1,
section.level2 .row-team-1,
section#equipo-organizador .row-team-1{
  display: flex !important;
  gap: 2.25rem !important;
  align-items: start !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin: 2rem 0 !important;
  width: 100% !important;
}

body.team-page .row-team-1 .col-team-3,
.team-page .row-team-1 .col-team-3,
section.level2 .row-team-1 .col-team-3,
section#equipo-organizador .row-team-1 .col-team-3{
  flex: 0 0 calc(33.333% - 1.5rem) !important;
  max-width: calc(33.333% - 1.5rem) !important;
  min-width: 0 !important;
}

body.team-page .row-team-2,
.team-page .row-team-2,
section.level2 .row-team-2,
section#equipo-organizador .row-team-2{
  display: flex !important;
  gap: 2.25rem !important;
  align-items: start !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin: 2rem 0 !important;
  width: 100% !important;
}

body.team-page .row-team-2 .col-team-2,
.team-page .row-team-2 .col-team-2,
section.level2 .row-team-2 .col-team-2,
section#equipo-organizador .row-team-2 .col-team-2{
  flex: 0 0 calc(50% - 1.125rem) !important;
  max-width: calc(50% - 1.125rem) !important;
  min-width: 0 !important;
}

/* ============================================================
   OPCIÓN 2: Usar .team-row-3 y .team-row-2 (para paneles)
   ============================================================ */
body.team-page .team-row-3,
.team-page .team-row-3,
section.level2 .team-row-3,
section#equipo-organizador .team-row-3{
  display: flex !important;
  gap: 2.25rem !important;
  align-items: start !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin: 2rem 0 !important;
  width: 100% !important;
}

body.team-page .team-row-3 .speaker-card,
.team-page .team-row-3 .speaker-card,
section.level2 .team-row-3 .speaker-card,
section#equipo-organizador .team-row-3 .speaker-card{
  flex: 0 0 calc(33.333% - 1.5rem) !important;
  max-width: calc(33.333% - 1.5rem) !important;
  min-width: 0 !important;
}

body.team-page .team-row-2,
.team-page .team-row-2,
section.level2 .team-row-2,
section#equipo-organizador .team-row-2{
  display: flex !important;
  gap: 2.25rem !important;
  align-items: start !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin: 2rem 0 !important;
  width: 100% !important;
}

body.team-page .team-row-2 .speaker-card,
.team-page .team-row-2 .speaker-card,
section.level2 .team-row-2 .speaker-card,
section#equipo-organizador .team-row-2 .speaker-card{
  flex: 0 0 calc(50% - 1.125rem) !important;
  max-width: calc(50% - 1.125rem) !important;
  min-width: 0 !important;
}

/* ============================================================
   Mantener compatibilidad con columnas de Quarto (fallback)
   ============================================================ */
body.team-page .columns,
.team-page .columns,
section.level2 .columns,
section#equipo-organizador .columns{
  display: flex !important;
  gap: 2.25rem !important;
  align-items: start !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin: 2rem 0 !important;
  width: 100% !important;
}

body.team-page .columns:first-of-type .column,
.team-page .columns:first-of-type .column,
section.level2 .columns:first-of-type .column,
section#equipo-organizador .columns:first-of-type .column{
  flex: 0 0 calc(33.333% - 1.5rem) !important;
  max-width: calc(33.333% - 1.5rem) !important;
  min-width: 0 !important;
}

body.team-page .columns:last-of-type .column,
.team-page .columns:last-of-type .column,
section.level2 .columns:last-of-type .column,
section#equipo-organizador .columns:last-of-type .column{
  flex: 0 0 calc(50% - 1.125rem) !important;
  max-width: calc(50% - 1.125rem) !important;
  min-width: 0 !important;
}

/* Responsive: en pantallas medianas, 2 columnas */
@media (max-width: 1200px) {
  body.team-page .row-team-1 .col-team-3,
  .team-page .row-team-1 .col-team-3,
  body.team-page .team-row-3 .speaker-card,
  .team-page .team-row-3 .speaker-card,
  body.team-page .columns:first-of-type .column,
  .team-page .columns:first-of-type .column{
    flex: 0 0 calc(50% - 1.125rem) !important;
    max-width: calc(50% - 1.125rem) !important;
  }
}

/* Responsive: en pantallas pequeñas, 1 columna */
@media (max-width: 768px) {
  body.team-page .row-team-1 .col-team-3,
  .team-page .row-team-1 .col-team-3,
  body.team-page .row-team-2 .col-team-2,
  .team-page .row-team-2 .col-team-2,
  body.team-page .team-row-3 .speaker-card,
  .team-page .team-row-3 .speaker-card,
  body.team-page .team-row-2 .speaker-card,
  .team-page .team-row-2 .speaker-card,
  body.team-page .columns .column,
  .team-page .columns .column{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   OPCIÓN 3: Usar .team-grid-3 y .team-grid-2 (más simple)
   Misma estructura que instituciones: grid responsive
   ============================================================ */
body.team-page .team-grid-3,
.team-page .team-grid-3,
section.level2 .team-grid-3,
section#equipo-organizador .team-grid-3{
  display: grid !important; /* Cambiar a grid como instituciones */
  grid-template-columns: repeat(3, 1fr) !important; /* 3 columnas iguales */
  gap: 2rem !important;
  align-items: start !important;
  justify-items: center !important;
  margin: 2rem auto !important; /* Centrar el grid completo */
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

body.team-page .team-grid-3 .speaker-card,
.team-page .team-grid-3 .speaker-card,
section.level2 .team-grid-3 .speaker-card,
section#equipo-organizador .team-grid-3 .speaker-card{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 auto !important; /* Centrar cada tarjeta */
  justify-self: center !important; /* Centrar en el grid */
  overflow: visible !important; /* Permitir que el contenido sea visible */
}

body.team-page .team-grid-2,
.team-page .team-grid-2,
section.level2 .team-grid-2,
section#equipo-organizador .team-grid-2{
  display: grid !important; /* Cambiar a grid como instituciones */
  grid-template-columns: repeat(2, 1fr) !important; /* 2 columnas */
  gap: 2rem !important;
  align-items: start !important;
  justify-items: center !important;
  margin: 2rem auto !important; /* Centrar el grid completo */
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

body.team-page .team-grid-2 .speaker-card,
.team-page .team-grid-2 .speaker-card,
section.level2 .team-grid-2 .speaker-card,
section#equipo-organizador .team-grid-2 .speaker-card{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 auto !important; /* Centrar cada tarjeta */
  justify-self: center !important; /* Centrar en el grid */
  overflow: visible !important; /* Permitir que el contenido sea visible */
}

/* Responsive para equipo - misma lógica que instituciones */
@media (max-width: 1200px) {
  body.team-page .team-grid-3,
  .team-page .team-grid-3,
  section.level2 .team-grid-3,
  section#equipo-organizador .team-grid-3{
    grid-template-columns: repeat(2, 1fr) !important; /* 2 columnas en pantallas medianas */
    justify-items: center !important; /* Centrar elementos */
  }
}

@media (max-width: 768px) {
  body.team-page .team-grid-3,
  .team-page .team-grid-3,
  body.team-page .team-grid-2,
  .team-page .team-grid-2,
  section.level2 .team-grid-3,
  section.level2 .team-grid-2,
  section#equipo-organizador .team-grid-3,
  section#equipo-organizador .team-grid-2{
    grid-template-columns: 1fr !important; /* 1 columna en móviles */
    gap: 1.5rem !important;
    justify-items: center !important; /* Centrar elementos */
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Responsive para opción 3 */
@media (max-width: 1200px) {
  body.team-page .team-grid-3 .speaker-card,
  .team-page .team-grid-3 .speaker-card{
    flex: 0 0 calc(50% - 1.125rem) !important;
    max-width: calc(50% - 1.125rem) !important;
  }
}

@media (max-width: 768px) {
  body.team-page .team-grid-3 .speaker-card,
  .team-page .team-grid-3 .speaker-card,
  body.team-page .team-grid-2 .speaker-card,
  .team-page .team-grid-2 .speaker-card{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Asegurar que speaker-card se vea bien */
body.team-page .speaker-card,
.team-page .speaker-card{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 1200px){
  .team-page .team-grid,
  body.team-page .team-grid,
  .team-page .container .team-grid,
  body.team-page .container .team-grid,
  .team-page .content-section .team-grid,
  body.team-page .content-section .team-grid,
  .team-page .content-section .container .team-grid,
  body.team-page .content-section .container .team-grid,
  section.team-page .team-grid,
  section.team-page .container .team-grid{ 
    grid-template-columns: repeat(3, 1fr) !important; 
  }
}
@media (max-width: 900px){
  .team-page .team-grid,
  body.team-page .team-grid,
  .team-page .container .team-grid,
  body.team-page .container .team-grid,
  .team-page .content-section .team-grid,
  body.team-page .content-section .team-grid,
  .team-page .content-section .container .team-grid,
  body.team-page .content-section .container .team-grid,
  section.team-page .team-grid,
  section.team-page .container .team-grid{ 
    grid-template-columns: repeat(2, 1fr) !important; 
  }
}
@media (max-width: 576px){
  .team-page .team-grid,
  body.team-page .team-grid,
  .team-page .container .team-grid,
  body.team-page .container .team-grid,
  .team-page .content-section .team-grid,
  body.team-page .content-section .team-grid,
  .team-page .content-section .container .team-grid,
  body.team-page .content-section .container .team-grid,
  section.team-page .team-grid,
  section.team-page .container .team-grid{ 
    grid-template-columns: 1fr !important; 
  }
}

/* Navbar hover overrides: keep hover color natural on internal pages and
   slightly enlarge the link; keep white hover only for the index (hero). */
body.index-page-body nav.navbar .navbar-nav .nav-link:hover{
  color: rgba(255,255,255,.95) !important;
  transform: translateY(-1px) scale(1.02) !important;
}

/* For non-index pages: enlarge on hover but keep dark color (do not force white) */
body:not(.index-page-body) nav.navbar .navbar-nav .nav-link:hover{
  color: rgba(0,0,0,0.98) !important;
  transform: translateY(-1px) scale(1.02) !important;
}

/* Ensure team links/icons styling remains scoped to .team-page (no footer impact) */
.team-page .team-links{ display: flex !important; gap: 1rem; justify-content: center; margin-top: 1rem; align-items: center; }
.team-page .team-link{ width: 40px; height: 40px; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-light); color: var(--text-color) !important; font-size: 1.2rem; transition: all .3s ease; flex-shrink: 0; text-decoration: none; }
.team-page .team-link:hover{ background: var(--primary-color); color: #fff; transform: scale(1.15); box-shadow: var(--shadow-hover); }

/* Ensure container doesn't constrain the horizontal flow of the team row */
/* Aplicar max-width para limitar el ancho del contenido, igual que en program-page */
.team-page .container,
body.team-page .container,
.team-page .content-section .container,
body.team-page .content-section .container,
section.team-page .container,
section.team-page .content-section .container{ 
  max-width: var(--body-max) !important; 
  width: 100% !important; 
  padding-left: var(--body-gutter) !important; 
  padding-right: var(--body-gutter) !important; 
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important; /* Incluir padding en el ancho */
  overflow-x: hidden !important; /* Evitar scroll horizontal */
}

/* Override Bootstrap container max-width at all breakpoints for team-page */
@media (min-width: 576px) {
  .team-page .container,
  body.team-page .container,
  .team-page .content-section .container,
  body.team-page .content-section .container,
  section.team-page .container,
  section.team-page .content-section .container{ 
    max-width: 100% !important; 
  }
}
@media (min-width: 768px) {
  .team-page .container,
  body.team-page .container,
  .team-page .content-section .container,
  body.team-page .content-section .container,
  section.team-page .container,
  section.team-page .content-section .container{ 
    max-width: 100% !important; 
  }
}
@media (min-width: 992px) {
  .team-page .container,
  body.team-page .container,
  .team-page .content-section .container,
  body.team-page .content-section .container,
  section.team-page .container,
  section.team-page .content-section .container{ 
    max-width: 100% !important; 
  }
}
@media (min-width: 1200px) {
  .team-page .container,
  body.team-page .container,
  .team-page .content-section .container,
  body.team-page .content-section .container,
  section.team-page .container,
  section.team-page .content-section .container{ 
    max-width: 100% !important; 
  }
}
@media (min-width: 1400px) {
  .team-page .container,
  body.team-page .container,
  .team-page .content-section .container,
  body.team-page .content-section .container,
  section.team-page .container,
  section.team-page .content-section .container{ 
    max-width: 100% !important; 
  }
}

/* Make footer flow naturally (not fixed or overlay) so it moves down with content */
/* Aplicar a TODAS las páginas: equipo, invitados, programa */
.nav-footer, .page-footer{ 
  position: relative !important; 
  margin-top: auto !important;
}

/* For team-page, invitados, and programa: avoid forcing main/content to stretch to viewport height
  so footer sits after content instead of overlapping */
body.team-page #quarto-content,
body.team-page main,
body.team-page .quarto-container,
body .team-page #quarto-content,
body .team-page main,
body .team-page .quarto-container,
/* Aplicar también a invitados y programa */
body:not(.index-page-body) #quarto-content,
body:not(.index-page-body) main,
body:not(.index-page-body) .quarto-container{ 
  flex: unset !important; 
  min-height: auto !important;
}

/* Asegurar que el footer se mueva con el contenido en todas las páginas internas */
body.team-page .nav-footer,
body.team-page .page-footer,
body .team-page .nav-footer,
body .team-page .page-footer,
/* Aplicar también a invitados y programa */
body:not(.index-page-body) .nav-footer,
body:not(.index-page-body) .page-footer{
  position: relative !important;
  margin-top: auto !important;
  display: table !important; /* Mantener table layout para alineación correcta */
  table-layout: fixed !important;
  visibility: visible !important;
}

/* -----------------------------
   Restore navbar default behavior
   - Non-index pages: dark text/icons, visible light background
   - Index pages (body.index-page-body): transparent navbar with white text/icons
   These selectors are very specific and placed at the end to override theme rules.
   ----------------------------- */
body:not(.index-page-body) nav.navbar,
body:not(.index-page-body) header nav.navbar{
  background: rgba(255,255,255,0.98) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

body:not(.index-page-body) nav.navbar .navbar-nav .nav-link,
body:not(.index-page-body) .navbar .nav-link{
  color: rgba(0,0,0,0.88) !important;
  font-weight: 400 !important;
}

body:not(.index-page-body) nav.navbar .navbar-nav .nav-link:hover{
  color: rgba(0,0,0,0.98) !important;
}

body:not(.index-page-body) nav.navbar .navbar-nav .nav-link.active{
  color: var(--primary-color) !important;
}

body:not(.index-page-body) nav.navbar .bi,
body:not(.index-page-body) nav.navbar .fa,
body:not(.index-page-body) nav.navbar i,
body:not(.index-page-body) nav.navbar svg{
  color: rgba(0,0,0,0.9) !important;
}

/* Index (hero) keeps transparent navbar with white text/icons */
body.index-page-body nav.navbar{
  background: transparent !important;
  box-shadow: none !important;
}
body.index-page-body nav.navbar .navbar-nav .nav-link,
body.index-page-body .navbar .nav-link{
  color: rgba(255,255,255,0.95) !important;
}
body.index-page-body nav.navbar .bi,
body.index-page-body nav.navbar .fa,
body.index-page-body nav.navbar i,
body.index-page-body nav.navbar svg{
  color: rgba(255,255,255,0.95) !important;
}

/* Restore footer positioning/visibility specifically for the index page
   In some setups making the footer static removes its stacking context and
   can cause it to be rendered behind fixed backgrounds (Vanta). Ensure the
   footer remains visible on the index by restoring relative positioning
   and a higher z-index when on the index (body.index-page-body). */
body.index-page-body .nav-footer,
body.index-page-body .page-footer{
  position: relative !important;
  z-index: 12 !important;
}

/* Extra, ultra-specific overrides to counter any theme rules that still win
   Ensure active nav links on non-index pages are visible (primary color)
   and hover enlarges while keeping dark color. Also handle aria-current used by Quarto. */
html body:not(.index-page-body) header.navbar .navbar-nav > .nav-item > a.nav-link.active,
html body:not(.index-page-body) header.navbar .navbar-nav a.nav-link.active,
html body:not(.index-page-body) nav.navbar.navbar-default .navbar-nav .nav-link.active,
html body:not(.index-page-body) a[aria-current="page"].nav-link,
html body:not(.index-page-body) a[aria-current="page"].nav-link > span{
  color: var(--primary-color) !important;
  background: transparent !important;
  text-shadow: none !important;
}

/* Hover effect on non-index: slightly enlarge and keep dark color */
html body:not(.index-page-body) nav.navbar .navbar-nav .nav-link:hover,
html body:not(.index-page-body) header.navbar .navbar-nav .nav-link:hover,
html body:not(.index-page-body) .quarto-nav .nav-link:hover{
  color: rgba(0,0,0,0.98) !important;
  transform: translateY(-1px) scale(1.04) !important;
}

/* Ensure icons inside links also enlarge and keep color */
html body:not(.index-page-body) nav.navbar .navbar-nav .nav-link:hover i,
html body:not(.index-page-body) nav.navbar .navbar-nav .nav-link:hover .fa,
html body:not(.index-page-body) nav.navbar .navbar-nav .nav-link:hover .bi,
html body:not(.index-page-body) .quarto-nav .nav-link:hover i{
  color: inherit !important;
  transform: scale(1.08) !important;
}

/* Defensive: if theme applies color via stronger property (color on .nav-link > span), override that too */
html body:not(.index-page-body) nav.navbar .navbar-nav .nav-link > span,
html body:not(.index-page-body) header.navbar .navbar-nav .nav-link > span{
  color: rgba(0,0,0,0.88) !important;
}

/* Strong enforcement: Force the organizers to display in a single horizontal row
   on wide viewports. Use high-specificity selectors so Quarto/theme rules don't
   override. The layout will wrap responsively on small screens. */
/* Use CSS Grid to lay out exactly 5 columns on wide viewports while keeping
   each card centered and preserving internal structure (image, name, role,
   description). This adjusts only the container; card markup remains intact. */
html body .team-page .team-grid{
  display: grid !important;
  grid-template-columns: repeat(5, minmax(220px, 1fr)) !important; /* 5 columns on wide screens */
  gap: 2.25rem !important;
  align-items: start !important;
  justify-content: center !important;
  justify-items: center !important; /* center contents of each column */
  overflow-x: visible !important; /* allow wrapping instead of forcing horizontal scroll */
  padding-bottom: 0.5rem !important;
}

/* Responsive breakpoints: reduce columns on narrower viewports to avoid tiny cards
   Prefer wrapping into multiple rows rather than horizontal scrolling */
@media (max-width: 1400px){
  html body .team-page .team-grid{ grid-template-columns: repeat(4, minmax(220px, 1fr)) !important; }
}
@media (max-width: 1200px){
  html body .team-page .team-grid{ grid-template-columns: repeat(3, minmax(220px, 1fr)) !important; }
}
@media (max-width: 900px){
  html body .team-page .team-grid{ grid-template-columns: repeat(2, minmax(180px, 1fr)) !important; }
}
@media (max-width: 576px){
  html body .team-page .team-grid{ grid-template-columns: 1fr !important; }
}

/* Ensure each direct child (card) fills its grid cell and keeps its internal layout */
html body .team-page .team-grid > *,
body.team-page .team-grid > *,
.team-page .team-grid > *{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Estas reglas ya están cubiertas por las reglas responsive de grid más arriba */

/* ------------------------------------------------------------------
   Reinforced: force grid layout with 5 columns for organizers
   This block ensures the team grid uses CSS Grid with 5 columns
   on wide screens, wrapping responsively on smaller screens.
   ------------------------------------------------------------------ */
/* Force grid layout (not flex) for team grid */
/* Esta regla está duplicada - se mantiene la más específica al final del archivo */

/* Each card should fill its grid cell */
html body .team-page .team-grid > *,
body.team-page .team-grid > *,
.team-page .team-grid > * {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Responsive breakpoints - solo para team-page */
@media (max-width: 1400px){
  html body .team-page .team-grid,
  body.team-page .team-grid,
  .team-page .team-grid{ 
    grid-template-columns: repeat(4, 1fr) !important; 
  }
}
@media (max-width: 1200px){
  html body .team-page .team-grid,
  body.team-page .team-grid,
  .team-page .team-grid{ 
    grid-template-columns: repeat(3, 1fr) !important; 
  }
}
@media (max-width: 900px){
  html body .team-page .team-grid,
  body.team-page .team-grid,
  .team-page .team-grid{ 
    grid-template-columns: repeat(2, 1fr) !important; 
  }
}
@media (max-width: 576px){
  html body .team-page .team-grid,
  body.team-page .team-grid,
  .team-page .team-grid{ 
    grid-template-columns: 1fr !important; 
  }
}

/* -----------------------------------------------------------------
   Critical: Prevent active nav links on NON-INDEX pages from turning
   white. This block uses ultra-specific selectors and targets the
   <a> element, any inner <span.menu-text>, and icon nodes. Placed at
   the end to maximize override power.
   ----------------------------------------------------------------- */
html body:not(.index-page-body) header#quarto-header nav.navbar[data-bs-theme] .navbar-nav > .nav-item > a.nav-link.active,
html body:not(.index-page-body) header#quarto-header nav.navbar .navbar-nav > .nav-item > a.nav-link[aria-current="page"],
html body:not(.index-page-body) nav.navbar .navbar-nav > .nav-item > a.nav-link.active,
html body:not(.index-page-body) nav.navbar .navbar-nav > .nav-item > a.nav-link[aria-current="page"]{
  color: rgba(0,0,0,0.92) !important;
  background: transparent !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Ensure the span.menu-text inside the link also inherits the dark color */
html body:not(.index-page-body) nav.navbar .navbar-nav > .nav-item > a.nav-link.active .menu-text,
html body:not(.index-page-body) nav.navbar .navbar-nav > .nav-item > a.nav-link[aria-current="page"] .menu-text,
html body:not(.index-page-body) nav.navbar .navbar-nav > .nav-item > a.nav-link.active span,
html body:not(.index-page-body) nav.navbar .navbar-nav > .nav-item > a.nav-link[aria-current="page"] span{
  color: rgba(0,0,0,0.92) !important;
}

/* Make sure any icon inside the active link is dark too */
html body:not(.index-page-body) nav.navbar .navbar-nav > .nav-item > a.nav-link.active i,
html body:not(.index-page-body) nav.navbar .navbar-nav > .nav-item > a.nav-link[aria-current="page"] i,
html body:not(.index-page-body) nav.navbar .navbar-nav > .nav-item > a.nav-link.active .bi,
html body:not(.index-page-body) nav.navbar .navbar-nav > .nav-item > a.nav-link[aria-current="page"] .bi,
html body:not(.index-page-body) nav.navbar .navbar-nav > .nav-item > a.nav-link.active svg,
html body:not(.index-page-body) nav.navbar .navbar-nav > .nav-item > a.nav-link[aria-current="page"] svg{
  color: rgba(0,0,0,0.9) !important;
  fill: currentColor !important;
}

/* Defensive: if theme sets color on nested elements, override all children */
html body:not(.index-page-body) nav.navbar .navbar-nav > .nav-item > a.nav-link.active *{
  color: rgba(0,0,0,0.92) !important;
}

/* -----------------------------------------------------------------
   Hover / focus enlargement for navbar links on NON-INDEX pages
   Applies to all navbar links when body does NOT have .index-page-body
   Ensures color stays dark and provides keyboard focus accessibility.
   ----------------------------------------------------------------- */
html body:not(.index-page-body) nav.navbar .navbar-nav .nav-link{
  transition: transform .18s cubic-bezier(.2,.8,.2,1), color .12s ease !important;
  will-change: transform;
}
html body:not(.index-page-body) nav.navbar .navbar-nav .nav-link:hover,
html body:not(.index-page-body) nav.navbar .navbar-nav .nav-link:focus-visible{
  transform: translateY(-1px) scale(1.08) !important;
  color: rgba(0,0,0,0.98) !important;
}

/* Make sure inner span/menu-text and icons also reflect the color on hover/focus */
html body:not(.index-page-body) nav.navbar .navbar-nav .nav-link:hover .menu-text,
html body:not(.index-page-body) nav.navbar .navbar-nav .nav-link:focus-visible .menu-text,
html body:not(.index-page-body) nav.navbar .navbar-nav .nav-link:hover i,
html body:not(.index-page-body) nav.navbar .navbar-nav .nav-link:focus-visible i{
  color: rgba(0,0,0,0.98) !important;
  fill: currentColor !important;
}

/* Make navbar icons on non-index pages as large as on index (and enlarge on hover) */
html body:not(.index-page-body) nav.navbar .bi,
html body:not(.index-page-body) nav.navbar .fa,
html body:not(.index-page-body) nav.navbar i,
html body:not(.index-page-body) nav.navbar svg{
  font-size: 1.6rem !important; /* match index sizing */
  line-height: 1 !important;
  vertical-align: middle !important;
}

html body:not(.index-page-body) nav.navbar .navbar-nav .nav-link:hover i,
html body:not(.index-page-body) nav.navbar .navbar-nav .nav-link:focus-visible i,
html body:not(.index-page-body) nav.navbar .navbar-nav .nav-link:hover .fa,
html body:not(.index-page-body) nav.navbar .navbar-nav .nav-link:focus-visible .fa,
html body:not(.index-page-body) nav.navbar .navbar-nav .nav-link:hover .bi,
html body:not(.index-page-body) nav.navbar .navbar-nav .nav-link:focus-visible .bi{
  transform: scale(1.12) !important;
  transition: transform .14s ease !important;
}



/* ===== Navbar hover: slight enlargement for specific tabs (non-index pages) ===== */
/* Apply only when NOT on the index page */
html body:not(.index-page-body) nav.navbar .navbar-nav .nav-link[href*="equipo"],
html body:not(.index-page-body) nav.navbar .navbar-nav .nav-link[href*="invitados"],
html body:not(.index-page-body) nav.navbar .navbar-nav .nav-link[href*="programa"]{
  transition: transform .18s ease, color .12s ease !important;
  will-change: transform;
}
html body:not(.index-page-body) nav.navbar .navbar-nav .nav-link[href*="equipo"]:hover,
html body:not(.index-page-body) nav.navbar .navbar-nav .nav-link[href*="invitados"]:hover,
html body:not(.index-page-body) nav.navbar .navbar-nav .nav-link[href*="programa"]:hover{
  transform: translateY(-1px) scale(1.08) !important;
}

/* ===================================================================
   REGLA ABSOLUTAMENTE FINAL: Forzar grid de 3 columnas - máxima especificidad
   Esta regla debe estar al final absoluto del archivo para sobrescribir TODO
   =================================================================== */
body.team-page .content-section .container .team-grid,
body.team-page .container .team-grid,
body.team-page .team-grid,
body.team-page section.level2 .team-grid,
body.team-page section#equipo-organizador .team-grid,
.team-page .content-section .container .team-grid,
.team-page .container .team-grid,
.team-page .team-grid,
section.team-page .container .team-grid,
section.team-page .team-grid,
section.level2 .team-grid,
section#equipo-organizador .team-grid,
html body.team-page .content-section .container .team-grid,
html body.team-page .container .team-grid,
html body.team-page .team-grid,
html body.team-page section.level2 .team-grid,
html body.team-page section#equipo-organizador .team-grid{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2.25rem !important;
  align-items: start !important;
  justify-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 2rem 0 !important;
  padding: 0 !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
  flex: unset !important;
  grid-auto-flow: row !important;
}

/* Responsive para la regla final */
@media (max-width: 1200px){
  body.team-page .content-section .container .team-grid,
  body.team-page .container .team-grid,
  body.team-page .team-grid,
  .team-page .content-section .container .team-grid,
  .team-page .container .team-grid,
  .team-page .team-grid,
  section.team-page .container .team-grid,
  section.team-page .team-grid,
  html body.team-page .content-section .container .team-grid,
  html body.team-page .container .team-grid,
  html body.team-page .team-grid{ 
    grid-template-columns: repeat(3, 1fr) !important; 
  }
}
@media (max-width: 1200px){
  body.team-page .content-section .container .team-grid,
  body.team-page .container .team-grid,
  body.team-page .team-grid,
  .team-page .content-section .container .team-grid,
  .team-page .container .team-grid,
  .team-page .team-grid,
  section.team-page .container .team-grid,
  section.team-page .team-grid,
  html body.team-page .content-section .container .team-grid,
  html body.team-page .container .team-grid,
  html body.team-page .team-grid{ 
    grid-template-columns: repeat(3, 1fr) !important; 
  }
}
@media (max-width: 900px){
  body.team-page .content-section .container .team-grid,
  body.team-page .container .team-grid,
  body.team-page .team-grid,
  .team-page .content-section .container .team-grid,
  .team-page .container .team-grid,
  .team-page .team-grid,
  section.team-page .container .team-grid,
  section.team-page .team-grid,
  html body.team-page .content-section .container .team-grid,
  html body.team-page .container .team-grid,
  html body.team-page .team-grid{ 
    grid-template-columns: repeat(2, 1fr) !important; 
  }
}
@media (max-width: 576px){
  body.team-page .content-section .container .team-grid,
  body.team-page .container .team-grid,
  body.team-page .team-grid,
  .team-page .content-section .container .team-grid,
  .team-page .container .team-grid,
  .team-page .team-grid,
  section.team-page .container .team-grid,
  section.team-page .team-grid,
  html body.team-page .content-section .container .team-grid,
  html body.team-page .container .team-grid,
  html body.team-page .team-grid{ 
    grid-template-columns: 1fr !important; 
  }
}

/* ===================================================================
   REGLA FINAL Y MÁS ESPECÍFICA: Forzar grid de 5 columnas en team-page
   Esta regla debe estar al final para sobrescribir todas las demás
   Usa selectores ultra-específicos para asegurar que se aplique
   =================================================================== */
html body.team-page .content-section .container .team-grid,
html body.team-page .content-section .team-grid,
html body.team-page .container .team-grid,
html body.team-page .team-grid,
html body .team-page .content-section .container .team-grid,
html body .team-page .content-section .team-grid,
html body .team-page .container .team-grid,
html body .team-page .team-grid,
body.team-page .content-section .container .team-grid,
body.team-page .content-section .team-grid,
body.team-page .container .team-grid,
body.team-page .team-grid,
.team-page .content-section .container .team-grid,
.team-page .content-section .team-grid,
.team-page .container .team-grid,
.team-page .team-grid{
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 2.25rem !important;
  align-items: start !important;
  justify-items: center !important;
  overflow-x: visible !important;
  width: 100% !important;
  margin: 2rem 0 !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
  flex: unset !important;
}

/* Responsive para team-page - usando los mismos selectores ultra-específicos */
@media (max-width: 1400px){
  html body.team-page .content-section .container .team-grid,
  html body.team-page .content-section .team-grid,
  html body.team-page .container .team-grid,
  html body.team-page .team-grid,
  html body .team-page .content-section .container .team-grid,
  html body .team-page .content-section .team-grid,
  html body .team-page .container .team-grid,
  html body .team-page .team-grid,
  body.team-page .content-section .container .team-grid,
  body.team-page .content-section .team-grid,
  body.team-page .container .team-grid,
  body.team-page .team-grid,
  .team-page .content-section .container .team-grid,
  .team-page .content-section .team-grid,
  .team-page .container .team-grid,
  .team-page .team-grid{ 
    grid-template-columns: repeat(4, 1fr) !important; 
  }
}
@media (max-width: 1200px){
  html body.team-page .content-section .container .team-grid,
  html body.team-page .content-section .team-grid,
  html body.team-page .container .team-grid,
  html body.team-page .team-grid,
  html body .team-page .content-section .container .team-grid,
  html body .team-page .content-section .team-grid,
  html body .team-page .container .team-grid,
  html body .team-page .team-grid,
  body.team-page .content-section .container .team-grid,
  body.team-page .content-section .team-grid,
  body.team-page .container .team-grid,
  body.team-page .team-grid,
  .team-page .content-section .container .team-grid,
  .team-page .content-section .team-grid,
  .team-page .container .team-grid,
  .team-page .team-grid{ 
    grid-template-columns: repeat(3, 1fr) !important; 
  }
}
@media (max-width: 900px){
  html body.team-page .content-section .container .team-grid,
  html body.team-page .content-section .team-grid,
  html body.team-page .container .team-grid,
  html body.team-page .team-grid,
  html body .team-page .content-section .container .team-grid,
  html body .team-page .content-section .team-grid,
  html body .team-page .container .team-grid,
  html body .team-page .team-grid,
  body.team-page .content-section .container .team-grid,
  body.team-page .content-section .team-grid,
  body.team-page .container .team-grid,
  body.team-page .team-grid,
  .team-page .content-section .container .team-grid,
  .team-page .content-section .team-grid,
  .team-page .container .team-grid,
  .team-page .team-grid{ 
    grid-template-columns: repeat(2, 1fr) !important; 
  }
}
@media (max-width: 576px){
  html body.team-page .content-section .container .team-grid,
  html body.team-page .content-section .team-grid,
  html body.team-page .container .team-grid,
  html body.team-page .team-grid,
  html body .team-page .content-section .container .team-grid,
  html body .team-page .content-section .team-grid,
  html body .team-page .container .team-grid,
  html body .team-page .team-grid,
  body.team-page .content-section .container .team-grid,
  body.team-page .content-section .team-grid,
  body.team-page .container .team-grid,
  body.team-page .team-grid,
  .team-page .content-section .container .team-grid,
  .team-page .content-section .team-grid,
  .team-page .container .team-grid,
  .team-page .team-grid{ 
    grid-template-columns: 1fr !important; 
  }
}

/* ============================================
   REGLAS FINALES PARA SIDEBAR EN PROGRAMA
   Máxima especificidad - deben ir al final
   ============================================ */

/* Forzar visibilidad del sidebar en programa-main con máxima prioridad */
html body.programa-main .quarto-layout-panel .column-sidebar,
html body.programa-main .page-columns .column-sidebar,
html body.programa-main .column-sidebar,
html body.programa-main nav.sidebar,
html body.programa-main aside.sidebar,
html body.programa-main #quarto-sidebar,
html body.programa-main nav[aria-label="Page navigation"],
html body.programa-main .quarto-sidebar{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  min-width: 250px !important;
  max-width: 300px !important;
  position: relative !important;
  z-index: 1 !important;
  height: auto !important;
  overflow: visible !important;
}

/* Asegurar que el layout use grid para sidebar + contenido */
html body.programa-main .page-columns,
html body.programa-main .quarto-layout-panel{
  display: grid !important;
  grid-template-columns: minmax(250px, auto) 1fr !important;
  gap: 2rem !important;
}





/* ===== REGLAS FINALES PARA SIDEBAR EN PROGRAM-PAGE ===== */
/* Forzar que el sidebar aparezca en todas las páginas de programa */
/* Quarto renderiza el sidebar cuando está definido en la página principal */
body.program-page aside.sidebar,
.program-page aside.sidebar,
body.program-page .sidebar,
.program-page .sidebar,
body.program-page nav.sidebar,
.program-page nav.sidebar,
body.program-page .quarto-sidebar-container,
.program-page .quarto-sidebar-container,
body.program-page nav#quarto-sidebar,
.program-page nav#quarto-sidebar,
body.program-page .quarto-sidebar,
.program-page .quarto-sidebar{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 250px !important;
  min-width: 250px !important;
  max-width: 300px !important;
}

/* Asegurar que el contenedor del sidebar esté presente y visible */
body.program-page .quarto-layout-panel .column-sidebar,
.program-page .quarto-layout-panel .column-sidebar,
body.program-page .quarto-layout-row .column-sidebar,
.program-page .quarto-layout-row .column-sidebar,
body.program-page .page-columns .column-sidebar,
.program-page .page-columns .column-sidebar{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 250px !important;
  width: 250px !important;
  max-width: 300px !important;
}

/* Forzar que el sidebar tenga altura mínima y sea scrollable */
body.program-page #quarto-sidebar,
.program-page #quarto-sidebar,
body.program-page nav#quarto-sidebar,
.program-page nav#quarto-sidebar{
  min-height: 200px !important;
  height: auto !important;
  max-height: calc(100vh - var(--navbar-h)) !important;
  overflow-y: auto !important;
  position: sticky !important;
  top: var(--navbar-h) !important;
  align-self: start !important;
}

/* ===== REGLA FINAL PARA JUSTIFICAR TEXTO EN INVITADOS ===== */
/* Máxima especificidad al final del archivo para asegurar que se aplique */
body.invitados-page .speaker-info-horizontal .speaker-bio,
body.invitados-page.team-page .speaker-info-horizontal .speaker-bio,
body.team-page.invitados-page .speaker-info-horizontal .speaker-bio,
body.invitados-page .speaker-card-horizontal .speaker-info-horizontal .speaker-bio,
body.invitados-page.team-page .speaker-card-horizontal .speaker-info-horizontal .speaker-bio,
html body.invitados-page .speaker-info-horizontal .speaker-bio,
html body.invitados-page.team-page .speaker-info-horizontal .speaker-bio,
html body.team-page.invitados-page .speaker-info-horizontal .speaker-bio {
  text-align: justify !important;
}