/* ============================================
   ESTILOS GLOBALES – PEC Morelia
   ============================================ */

/* Fuentes y base */
body {
  font-family: 'Lato', sans-serif;
}
h1, h2, h3, h4, h5 {
  font-family: 'Montserrat', sans-serif;
}
html {
  scroll-behavior: smooth;
}

/* Ocultar scrollbar pero permitir scroll (para secciones con scroll horizontal) */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ============================================
   ESTILOS DEL NAVBAR (comportamiento con scroll)
   ============================================ */
#navbar {
  transition: all 0.5s;
}
#navbar.bg-white #nav-links a {
  color: #2A6BBA;
}
#navbar.bg-white #nav-links a:hover {
  color: #34C79A;
}
#main-logo img {
  transition: all 0.5s;
}

/* ============================================
   ESTILOS PARA TARJETAS Y MODALES (equipo.html)
   ============================================ */
/* Fondo de modales */
.modal-bg {
  background-color: rgba(0,0,0,0.5);
  transition: opacity 0.3s ease;
}
.modal-content {
  transition: transform 0.3s ease;
  transform: scale(0.95);
}
.modal-content.active {
  transform: scale(1);
}

/* Efecto hover en tarjetas de equipo */
.equipo-card {
  transition: all 0.3s ease;
}
.equipo-card:hover {
  transform: translateY(-1rem);
  box-shadow: 0 20px 30px -10px rgba(0,0,0,0.15);
}

/* Contenido expandible (Lucy) */
.expandible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}
.expandible-content.open {
  max-height: 400px;
}

/* ============================================
   ESTILOS PARA NOTIFICACIONES FLOTANTES
   ============================================ */
#notifications-stack {
  pointer-events: none;
}
#notifications-stack > div {
  pointer-events: auto;
  transition: all 0.5s ease;
}

/* ============================================
   ESTILOS PARA EL FOOTER
   ============================================ */
footer a {
  transition: color 0.2s ease;
}
footer a:hover {
  color: #34C79A;
}