/* ============ */
/* STYLE GLOBAL */
/* ============ */

body {
  font-family: "Rokkit", sans-serif;
  background-color: #F2F2F2;
  margin: 0;
  padding: 0;
}

footer a:hover {
  color: #ffc107 !important;
}

/* =======*/
/* NAVBAR */
/* =======*/
.navbar {
  background: transparent !important;
  padding: 20px 60px;
  transition: all 0.4s ease;
  position: fixed;
  width: 100%;
  z-index: 999;
}

/* LOGO NAVBAR */
.navbar-brand img {
  height: 75px;
  width: auto;
  transition: all 0.3s ease;
}

/* Cuando hace scroll (navbar más compacto) */
.navbar.scrolled .navbar-brand img {
  height: 48px;
}


/* Links */
.navbar .nav-link {
  color: #010101 !important;
  font-weight: 600;
  transition: 0.3s;
  position: relative;
  padding-bottom: 6px;
}

/* Hover color */
.navbar .nav-link:hover {
  color: #3E0A75 !important;
}

/* Underline animado */
.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background: #3E0A75;
  transition: width 0.4s ease;
}

.navbar .nav-link:hover::after {
  width: 100%;
}

/* Navbar blanca al scroll */
.navbar.scrolled {
  background: #fff !important;
  padding: 12px 60px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999 !important;
  opacity: 1 !important;
  transform: none !important;
  transition: all 0.4s ease;
}


/* ================*/
/* GRADIENTE HOVER */
/* ================*/
.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0) 25%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 75%,
    rgba(255, 255, 255, 0.35) 100%
  );

  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 0;
}

.navbar:hover::before {
  opacity: 1;
}

/* Mantiene el texto encima */
.navbar .navbar-brand,
.navbar .nav-link {
  position: relative;
  z-index: 2;
}

/* ===== HERO ===== */
.hero-elegante {
  min-height: 95vh;
  position: relative;
  background:
    linear-gradient(rgba(238, 240, 241, 0.75), rgba(10, 20, 30, 0.75)),
    url("assets/img/congreso-bg.jpg") center/cover no-repeat;
  color: white;
  padding: 40px 20px;
}


/* Contenido */
.hero-content {
  position: relative;
  z-index: 3;
}

/* ==========  */
/* HERO CLARO  */
/* ==========  */
.hero-claro,
.hero-elegante {
  min-height: 95vh;
  position: relative;
  overflow: hidden;
  padding: 40px 20px;
}

/* Contenedor de slides */
.hero-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Cada imagen */
.hero-slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.2s ease, transform 6s ease;
}

/* Imagen visible */
.hero-slide.active {
  opacity: 1;
  transform: scale(1);
}

/* Overlay elegante  */
.hero-claro::before,
.hero-elegante::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(255,255,255,0.55),
    rgba(255,255,255,0.72)
  );
  z-index: 1;
}

/* modo oscuro */
.hero-elegante::before {
  background: linear-gradient(
    rgba(10,20,30,0.45),
    rgba(10,20,30,0.72)
  );
}

/* Contenido */
.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
}

/* Luz del cursor */
.hero-claro::after,
.hero-elegante::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    rgba(95, 33, 209, 0.1),
    transparent 40%
  );
  pointer-events: none;
  z-index: 2;
}

/* ============================= */
/* HERO LAYOUT */
/* ============================= */
.hero-split {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.5rem;
  min-height: 80vh;
}

.hero-side-logo {
  flex: 0 0 380px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 2.5rem;
  border-right: 1px solid rgba(255,255,255,0.38);
  position: relative;
}

.hero-side-logo::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 18%;
  height: 64%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,0.55),
    rgba(255,255,255,0)
  );
}

.hero-side-logo img {
  max-width: 300
  px;
  width: 100%;
  height: auto;
  object-fit: contain;
  
  filter: drop-shadow(0 12px 26px rgba(0,0,0,0.14));
  transition: transform 0.35s ease;
}

.hero-side-logo img:hover {
  transform: scale(1.02);
}

.hero-copy {
  flex: 1;
  max-width: 760px;
  text-align: left;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

/* ============================= */
/* TEXTOS */
/* ============================= */
.hero-title,
.hero-title-claro {
  font-size: clamp(3.4rem, 5vw, 4.7rem);
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.08;
  margin-bottom: 0.9rem;
}


.hero-title-claro {
  color: #000000;
}

.hero-subtitle,
.hero-subtitle-claro {
  max-width: 750px;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  line-height: 1.6;
}

.hero-subtitle {
  margin: 0;
}

.hero-subtitle-claro {
  color: #000000;
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  margin-bottom: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

/* Línea animada */
.hero-line {
  width: 120px;
  height: 3px;
  margin: 20px 0;
  background: linear-gradient(90deg, #3E0A75, #641cad, #F2F2F2);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: glowLine 5s linear infinite;
}

@keyframes glowLine {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .hero-split {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 2rem;
    min-height: 85vh;
  }

  .hero-side-logo {
    padding-right: 0;
    border-right: none;
  }

  .hero-side-logo img {
    max-width: 180px;
  }

  .hero-copy {
    max-width: 100%;
    text-align: center;
  }

  .hero-line {
    margin: 20px auto;
  }

  .hero-actions {
    justify-content: center;
  }
}

/* ========= */
/* Footer */
/* ========= */
.cta-section {
  background: linear-gradient(90deg, #4f4e50, #555457);
}

.site-footer {
  background: #444;
}

.site-footer .footer-info p,
.site-footer .footer-links li {
  font-size: 0.98rem;
  line-height: 1.5;
}

.site-footer .footer-links li {
  margin-bottom: 0.35rem;
}

.site-footer .footer-links a {
  transition: opacity 0.3s ease;
}

.site-footer .footer-links a:hover {
  opacity: 0.75;
}

.site-footer .bi {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.site-footer .bi:hover {
  transform: translateY(-2px);
  opacity: 0.8;
}

/* ================= */
/* RESPONSIVE NAVBAR */
/* ================= */
@media (max-width: 992px) {

  /* Solo logo */
  .navbar-brand {
    font-size: 0;
  }

 .navbar-brand img {
  height: 45px;
  width: auto;
}

  /* Menú desplegable */
  .navbar-collapse {
    background: white;
    padding: 15px;
    border-radius: 15px;
    margin-top: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  }

  .navbar .nav-link {
    font-size: 1.1rem;
    padding: 10px;
  }

  .navbar-toggler {
    border: none;
  }

  .navbar-toggler-icon {
    filter: invert(1);
  }
}


/* ========= BOTON INSCRIPCION ========= */
.btn-pulse {
  position: relative;
  animation: pulseSoft 2.5s infinite;
}

@keyframes pulseSoft {
  0% {
    box-shadow: 0 0 0 0 #3E0A75;
  }
  70% {
    box-shadow: 0 0 0 15px rgba(71, 201, 101, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(71, 201, 101, 0);
  }
}

.btn-success {
  background-color: #5B0FA6 !important;
  border-color: #5B0FA6 !important;
}

.btn-success:hover {
  background-color: #3E0A75!important;
  border-color: #3E0A75!important;
}


/* ================== */
/* CSS - INSCRIPCION  */
/* ================== */

/* ============================= */
/* BANNER GENÉRICO CONGRESO      */
/* (cronograma, galería,         */
/*  inscripción)                 */
/* ============================= */

.banner-congreso {
  width: 100%;
  border-radius: 0 0 40px 40px;
  overflow: hidden;
  background: linear-gradient(135deg, #3a4080 0%, #545B9C 45%, #6b74b8 100%);
  padding: 70px 40px 60px;
  position: relative;
  box-sizing: border-box;
  margin-top: 80px;
}

/* Variante morada para inscripción */
.banner-congreso--inscripcion {
  background: linear-gradient(135deg, #3b1270 0%, #5A2D91 45%, #7b4db8 100%);
}

/* Decoración de fondo */
.banner-congreso__decoracion {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.banner-congreso__circulo {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}

.banner-congreso__circulo--top {
  width: 280px;
  height: 280px;
  top: -60px;
  right: -60px;
}

.banner-congreso__circulo--bottom {
  width: 220px;
  height: 220px;
  bottom: -80px;
  left: -40px;
  background: rgba(255, 255, 255, 0.04);
}

.banner-congreso__linea {
  position: absolute;
  top: 30px;
  left: 50%;
  width: 1px;
  height: calc(100% - 60px);
  background: rgba(255, 255, 255, 0.08);
}

/* Contenido central */
.banner-congreso__contenido {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

/* Badge superior */
.banner-congreso__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 20px;
}

.banner-congreso__badge span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Título */
.banner-congreso__titulo {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 20px;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

/* Subtítulo (usado en cronograma y galería) */
.banner-congreso__subtitulo {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: rgba(255, 255, 255, 0.8);
  margin: 0 auto;
  max-width: 520px;
  line-height: 1.6;
}

/* Costos (usado en inscripción) */
.banner-congreso__costos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.banner-congreso__costo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.banner-congreso__costo-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.banner-congreso__costo-precio {
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
}

.banner-congreso__separador {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
}

/* Línea inferior decorativa */
.banner-congreso__linea-inferior {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #E8E8E8, rgba(232, 232, 232, 0.3), #E8E8E8);
}

/* ============================= */
/* RESPONSIVE BANNER             */
/* ============================= */

@media (max-width: 768px) {
  .banner-congreso {
    padding: 60px 20px 50px;
    border-radius: 0 0 28px 28px;
    margin-top: 70px;
  }

  .banner-congreso__costos {
    gap: 14px;
  }

  .banner-congreso__separador {
    display: none;
  }

  .banner-congreso__costo-precio {
    font-size: 1.1rem;
  }
}

/* ============================= */
/* AJUSTE SECCIONES CON BANNER   */
/* ============================= */

.cronograma-section {
  padding-top: 40px;
}

.galeria-section {
  padding-top: 40px;
}

.form-section {
  padding-top: 40px;
}

@media (max-width: 768px) {
  .cronograma-section,
  .galeria-section,
  .form-section {
    padding-top: 20px;
  }
}


/* Sección formulario */
.form-section {
  padding: 60px 20px;
  background: #f8f9fa;
}

/* Card elegante */
.form-card {
  max-width: 750px;
  margin-top: -50px;
  border-radius: 22px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08)
}

/* Animación elegante */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 1s ease forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Checknox */
.form-check-input {
  transform: scale(1.2);
  margin-right: 10px;
  cursor: pointer;
}

.form-check-label {
  cursor: pointer;
  font-size: 1.05rem;
}

/* ==================== */
/* RESPONSIVE - MOBILES */
/* ==================== */
@media (max-width: 768px) {

  .page-banner {
    padding: 50px 15px;
    border-radius: 0 0 30px 30px;
    text-align: center;
  }

  .page-banner h1 {
    font-size: 1.8rem;
  }

  .page-banner p {
    font-size: 1rem;
  }

  .form-card {
    padding: 25px !important;
    margin-top: -30px;
  }

  .input-group-text {
    font-size: 1rem;
  }

  button.btn-lg {
    font-size: 1.05rem;
    padding: 14px;
  }
}



/* ============================= */
/* FACULTADES - SLIDER DE LOGOS */
/* ============================= */

.facultades-section {
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  overflow: hidden;
}

.facultades-badge {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: rgba(25, 135, 84, 0.08);
  color: #198754;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.facultades-title {
  font-weight: 800;
  color: #1f2937;
}

.facultades-text {
  max-width: 760px;
  margin: 0 auto;
  color: #6b7280;
  font-size: 1.02rem;
}

.facultades-slider {
  position: relative;
  margin-top: 2.2rem;
  overflow: hidden;
  width: 100%;
}

.facultades-track {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: max-content;
  animation: scrollFacultades 28s linear infinite;
}

.facultades-slider:hover .facultades-track {
  animation-play-state: paused;
}

.facultad-item {
  min-width: 180px;
  height: 110px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.facultad-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.10);
}

.facultad-item img {
  max-height: 62px;
  max-width: 100%;
  object-fit: contain;
  opacity: 1;
  transition: transform 0.3s ease;
}

.facultad-item:hover img {
  transform: scale(1.05);
}

@keyframes scrollFacultades {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .facultad-item {
    min-width: 145px;
    height: 95px;
    padding: 0.85rem;
  }

  .facultad-item img {
    max-height: 48px;
  }

  .facultades-track {
    gap: 1rem;
    animation-duration: 22s;
  }
}


/* ============================= */
/* fechas importantes  */
/* ============================= */

.fechas-section {
  background: #f8f9fa;
}

.fechas-section .card {
  border-radius: 15px;
  transition: all 0.3s ease;
}

.fechas-section .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.fechas-section {
  background: #f8f9fa;
}

.fecha-card {
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
}

.fecha-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.1);
}

/* Línea decorativa arriba */
.fecha-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, #545B9C, #545B9C);
}

/* Ícono */
.fecha-icon {
  font-size: 2.2rem;
  color: #545B9C;
}

/* Animación tipo reveal */
.fecha-card {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.8s ease forwards;
}

.fecha-card:nth-child(2) {
  animation-delay: 0.2s;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================= */
/* FORMULARIO INSCRIPCION / PAGO  */
/* ============================= */ 

/* CONTENEDOR */
.inscripcion-layout {
  max-width: 900px;
  margin: 0 auto;
  transition: all 0.3s ease;
}

.inscripcion-layout.split-mode {
  max-width: 1150px;
}

/* FILA */
#layoutRow {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: stretch;
}

/* FORMULARIO */
.col-formulario {
  flex: 1;
  max-width: 760px;
}

/* PANEL DE PAGO */
.col-pago {
  display: none;
  max-width: 420px;
  width: 100%;
}

/* CUANDO SE ACTIVA ACH */
.inscripcion-layout.split-mode .col-pago {
  display: block;
}

/* TARJETAS */
.form-card,
.payment-card {
  border-radius: 20px;
  transition: all 0.3s ease;
}

.form-card {
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
}

.payment-card {
  background: #f8f9fa;
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
}

/* BOTÓN */
.form-action {
  display: flex;
  justify-content: center;
  margin-top: 1.2rem;
}

#btnEnviar {
  min-width: 260px;
  max-width: 360px;
  padding: 0.85rem 2rem;
  border-radius: 12px;
  font-size: 1.05rem;
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
  transition: all 0.25s ease;
}

#btnEnviar:hover {
  transform: translateY(-2px);
}

/* INPUT FILE */
.custom-file-upload {
  width: 100%;
}

.file-upload-box {
  width: 100%;
  border: 2px dashed #cfd4da;
  border-radius: 16px;
  background: #fff;
  padding: 1.1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.file-upload-box:hover {
  border-color: #198754;
  background: #f8fff9;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  #layoutRow {
    flex-direction: column;
  }

  .col-pago {
    display: block;
  }

  .inscripcion-layout {
    max-width: 100%;
  }

  #btnEnviar {
    width: 100%;
    max-width: 100%;
  }
}

/* ============================= */
/* PATROCINADORES */
/* ============================= */

.patrocinadores-section {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
}

.patrocinadores-badge {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: rgba(111, 22, 190, 0.08);
  color: #6f16be;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.patrocinadores-title {
  font-weight: 800;
  color: #1f2937;
}

.patrocinadores-text {
  max-width: 760px;
  margin: 0 auto;
  color: #6b7280;
  font-size: 1.02rem;
}

.patrocinador-card {
  height: 150px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.patrocinador-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.10);
}

.patrocinador-card img {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.patrocinador-card:hover img {
  transform: scale(1.04);
}

@media (max-width: 768px) {
  .patrocinador-card {
    height: 130px;
    padding: 1rem;
  }

  .patrocinador-card img {
    max-height: 65px;
  }
}

.patrocinadores-section {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
}

.patrocinadores-badge {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: rgba(111, 22, 190, 0.08);
  color: #6f16be;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.patrocinadores-title {
  font-weight: 800;
  color: #1f2937;
}

.patrocinadores-text {
  max-width: 760px;
  margin: 0 auto;
  color: #6b7280;
  font-size: 1.02rem;
  line-height: 1.7;
}

.patrocinadores-grid {
  max-width: 1100px;
  margin: 0 auto;
}

.patrocinador-card {
  height: 155px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.patrocinador-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.10);
}

.patrocinador-card img {
  max-width: 100%;
  max-height: 82px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.patrocinador-card:hover img {
  transform: scale(1.04);
}

@media (max-width: 768px) {
  .patrocinador-card {
    height: 130px;
    padding: 1rem;
  }
}

  .patrocinador-card img {
    max-height: 65px;
  }

  

  
/* ============================= */
/* GALERÍA */
/* ============================= */

.galeria-section {
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  padding: 140px; 
}

.galeria-badge {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: rgba(91, 15, 166, 0.08);
  color: #5B0FA6;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.galeria-title {
  font-weight: 800;
  color: #1f2937;
}

.galeria-text {
  max-width: 760px;
  margin: 0 auto;
  color: #6b7280;
  font-size: 1.02rem;
  line-height: 1.7;
}

.galeria-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

.galeria-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.10);
}

.galeria-placeholder {
  height: 240px;
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7c3aed;
  font-size: 3rem;
}

.galeria-overlay {
  padding: 1.25rem;
}

.galeria-overlay h5 {
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: #1f2937;
}

.galeria-overlay p {
  margin-bottom: 0;
  color: #6b7280;
  font-size: 0.95rem;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .galeria-placeholder {
    height: 210px;
    font-size: 2.5rem;
  }
}


/* ============================= */
/* CRONOGRAMA */
/* ============================= */

.cronograma-section {
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  padding: 140px;
}

.cronograma-badge {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: rgba(91, 15, 166, 0.08);
  color: #5B0FA6;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cronograma-title {
  font-weight: 800;
  color: #1f2937;
}

.cronograma-text {
  max-width: 760px;
  margin: 0 auto;
  color: #6b7280;
  font-size: 1.02rem;
  line-height: 1.7;
}

.cronograma-wrapper {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  overflow: hidden;
  padding: 1rem;
}

.cronograma-table {
  margin-bottom: 0;
  min-width: 1200px;
}

.cronograma-table thead th {
  background: #f3f4f6;
  color: #1f2937;
  font-weight: 800;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  white-space: nowrap;
}

.cronograma-table td {
  border: 1px solid #e5e7eb;
  padding: 0.75rem;
  vertical-align: middle;
  background: #fff;
}

.hora-cell {
  background: #faf5ff !important;
  color: #3E0A75;
  font-size: 0.95rem;
  min-width: 120px;
}

.hora-cell span {
  color: #6b7280;
  font-size: 0.88rem;
}

.cronograma-card {
  min-height: 120px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(91, 15, 166, 0.10);
  box-shadow: 0 8px 20px rgba(0,0,0,0.04);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.65rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cronograma-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

.cronograma-card.vacio {
  color: #9ca3af;
  font-weight: 600;
}

.cronograma-link,
.cronograma-speaker {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.cronograma-link {
  color: #1f2937;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.4;
}

.cronograma-link:hover {
  color: #5B0FA6;
}

.cronograma-speaker {
  color: #6b7280;
  font-size: 0.95rem;
  font-weight: 600;
}

.cronograma-speaker:hover {
  color: #3E0A75;
}

.sticky-col {
  position: sticky;
  left: 0;
  z-index: 2;
}

.cronograma-table thead .sticky-col {
  z-index: 3;
}

.facultad-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.facultad-header img {
  height: 42px;
  width: auto;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.facultad-header span {
  font-size: 0.75rem;
  font-weight: 700;
  color: #374151;
}

/* efecto pro */
.facultad-header:hover img {
  transform: scale(1.08);
}

/* ============================= */
/* MOBILE CRONOGRAMA */
/* ============================= */

@media (max-width: 768px) {

  .cronograma-wrapper {
    display: none;
  }

  .cronograma-mobile {
    display: block;
    padding: 0 10px;
  }

  .cronograma-dia-title {
    font-weight: 800;
    margin-bottom: 1rem;
    color: #3E0A75;
  }

  .cronograma-item {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  }

  .cronograma-item .hora {
    font-weight: 800;
    color: #5B0FA6;
    min-width: 70px;
  }

  .cronograma-item .contenido h6 {
    font-weight: 700;
    margin-bottom: 5px;
    cursor: pointer;
  }

  .cronograma-item .contenido span {
    font-size: 0.9rem;
    color: #6b7280;
    cursor: pointer;
  }

  .facultad-tag {
    margin-top: 6px;
    display: inline-block;
    background: #ede9fe;
    color: #5B0FA6;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
  }
}

/* ============================= */
/* ANIMACIONES SUAVES */
/* ============================= */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.cronograma-link,
.cronograma-speaker {
  transition: all 0.25s ease;
}

.cronograma-link:hover {
  color: #5B0FA6;
  transform: translateX(3px);
}

.cronograma-speaker:hover {
  color: #3E0A75;
}

.cronograma-item {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.6s ease forwards;
}

.cronograma-item:nth-child(1) { animation-delay: 0.1s; }
.cronograma-item:nth-child(2) { animation-delay: 0.2s; }
.cronograma-item:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.facultad-header img {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.facultad-header:hover img {
  transform: scale(1.1);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.15));
}


/* ============================= */
/* BANNER CRONOGRAMA             */
/* ============================= */

/* Elimina el padding superior de la sección
   ya que el banner maneja su propio espaciado */
.cronograma-section {
  padding-top: 40px;
}

/* Responsive: reduce padding del banner en móvil */
@media (max-width: 768px) {
  .cronograma-section {
    padding-top: 20px;
  }
}

/* ============================= */
/* BANNER GALERÍA                */
/* ============================= */

/* Reduce el padding superior de la sección
   ya que el banner maneja su propio espaciado */
.galeria-section {
  padding-top: 40px;
}

/* Responsive: reduce padding en móvil */
@media (max-width: 768px) {
  .galeria-section {
    padding-top: 20px;
  }
}