/* -------------------------------
   Fuentes locales (opcional)
   ------------------------------- */
@font-face {
  font-family: 'Kusanagi';
  src: url('fonts/Kusanagi.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/MontserratAlternates-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* -------------------------------
   Tipografía de la navbar
   ------------------------------- */
.navbar-brand,
.navbar-nav .nav-link {
  font-family: var(--bs-heading-font-family);
  font-size: 11pt;
}

/* -------------------------------
   Fondo y colores base
   ------------------------------- */
.navbar {
  background-color: #5a96ff !important;
  transition: background-color .25s ease;
}

/* Anula cualquier fondo del tema en todos los estados */
.navbar .nav-link,
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link:active,
.navbar .nav-link.show,
.navbar .nav-link.active,
.navbar .nav-item:hover > .nav-link {
  background-color: transparent !important;
}

/* Color base del texto */
.navbar .navbar-nav .nav-link {
  color: #fff !important;
  transition: color .25s ease;
}

/* -------------------------------
   Contenedor del efecto
   ------------------------------- */
.navbar .navbar-nav .nav-link {
  position: relative;
  display: inline-block;
  padding: .5rem 1rem;
  overflow: hidden;
  border-radius: 999px;
  z-index: 0;
}

/* Asegura que el texto quede encima de la pill */
.navbar .navbar-nav .nav-link .menu-text {
  position: relative;
  z-index: 1;
  transition: color .25s ease;
}

/* -------------------------------
   La "pill" animada (detrás del texto)
   ------------------------------- */
.navbar .navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  inset: .15rem .35rem;
  background-color: var(--pill-color, #e9a201);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
  z-index: -1;
}

/* Colores individuales por item */
.navbar .navbar-nav:nth-of-type(1) .nav-item:nth-child(1) { --pill-color: #E5243B; }
.navbar .navbar-nav:nth-of-type(1) .nav-item:nth-child(2) { --pill-color: #DDA63A; }
.navbar .navbar-nav:nth-of-type(1) .nav-item:nth-child(3) { --pill-color: #4C9F38; }
.navbar .navbar-nav:nth-of-type(1) .nav-item:nth-child(4) { --pill-color: #C5192D; }
.navbar .navbar-nav:nth-of-type(1) .nav-item:nth-child(5) { --pill-color: #FF3A21; }
.navbar .navbar-nav:nth-of-type(1) .nav-item:nth-child(6) { --pill-color: #26BDE2; }
.navbar .navbar-nav:nth-of-type(1) .nav-item:nth-child(7) { --pill-color: #FCC30B; }
.navbar .navbar-nav:nth-of-type(1) .nav-item:nth-child(8) { --pill-color: #A21942; }
.navbar .navbar-nav:nth-of-type(1) .nav-item:nth-child(9) { --pill-color: #FD6925; }
.navbar .navbar-nav:nth-of-type(2) .nav-item:nth-child(1) { --pill-color: #DD1367; }

/* Hover/Focus */
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus { color: #fff !important; }
.navbar .navbar-nav .nav-link:hover .menu-text,
.navbar .navbar-nav .nav-link:focus .menu-text { color: #fff !important; }
.navbar .navbar-nav .nav-link:hover::after,
.navbar .navbar-nav .nav-link:focus::after { transform: scaleX(1); }

/* Activo con pill permanente */
.navbar .navbar-nav .nav-link.active { color: #fff !important; }
.navbar .navbar-nav .nav-link.active::after { transform: scaleX(1); }

.navbar-logo {
  max-height: 55px;
  width: auto;
  padding-right: 4px;
}

.container {
  max-width: 1320px;
  padding-inline: var(--bs-gutter-x, .75rem);
  margin-inline: auto;
  margin: auto;
}

.principal {
  margin: 0 auto;
  max-width: 70rem;
  padding-inline: clamp(1rem, 5vw, 6rem);
}

@media (min-width: 900px) {
  body .page-columns {
    display: grid;
    gap: 0;
    grid-template-columns: none;
  }
}

h2{ color:#5a96ff; }
h3, h4 { font-family: Montserrat; }
p, li{ color: #666666; }

.frases{ font-weight: bold; color: #89d342; }
.frases2{ font-weight: bold; padding-bottom: 20px; }

/* -------------------------------
   Carrusel de organizadores
   ------------------------------- */
.imagecarousel {
  position: relative;
  margin: 0 auto 48px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  align-items: stretch;
  justify-items: center;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  width: min(1200px, 100%);
  padding: clamp(1.25rem, 4vw, 3rem);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
}

.imagecarousel::before,
.imagecarousel::after {
  content: "";
  position: sticky;
  top: 0;
  width: clamp(1.5rem, 5vw, 3rem);
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.imagecarousel::before {
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.imagecarousel::after {
  right: 0;
  background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.imagecarousel::-webkit-scrollbar { display: none; }

/* -------------------------------
   Tarjetas de organizadores
   ------------------------------- */
.organizer-card {
  width: min(100%, 280px);
  background: rgba(255, 255, 255, 0.94);
  border-radius: 22px;
  box-shadow: 0 16px 36px rgba(36, 40, 50, 0.16);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  scroll-snap-align: center;

  /* Habilita container queries para autoajustar tipografía interna */
  container-type: inline-size;
}

.organizer-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.organizer-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.25rem 1.5rem;
  width: 100%;
  max-width: 24rem; /* ancho estable para wrapping */
}

.organizer-name {
  font-weight: 700;
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  color: #242832;
}

.organizer-role {
  font-size: 0.95rem;
  color: #5a96ff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.organizer-institution {
  font-size: 0.9rem;
  color: #666666;
}

/* 👉 Ajuste automático de tamaño (sin cortar):
   - wrap permisivo (anywhere)
   - tamaño fluido con cqw (container query width units)
   - límites con clamp para legibilidad
*/
.organizer-email {
  display: block;
  line-height: 1.18;
  font-weight: 600;
  color: #1b64d1;
  text-decoration: none;

  overflow-wrap: anywhere;  /* permite quiebre en cualquier punto */
  word-break: break-word;   /* fallback */

  /* Tamaño que se adapta al ancho de la tarjeta:
     - mínimo legible: .76rem
     - fluido en función del ancho del contenedor: 3.2cqw
     - tope superior habitual: .95rem
  */
  font-size: clamp(.76rem, 3.2cqw, .95rem);
  max-width: 100%;
}

.organizer-email:hover,
.organizer-email:focus { text-decoration: underline; }

#hackods{ margin-bottom: 120px; }
#convocatoria{ margin-bottom: 100px; margin-top: 100px; }
#cronograma{ margin-bottom: 100px; }
#criterios{ margin-bottom: 120px; }
#premios{ margin-bottom: 100px; }
#jurado{ margin-bottom: 120px; }
#descalificacion{ margin-bottom: 100px; }
#entrega{ margin-bottom: 100px; }
#contacto{ margin-bottom: 10px; }
#cta{ margin-bottom: 100px; }
#Organizadores{ margin-bottom: 100px; }

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0 clamp(2rem, 6vw, 4rem);
  margin-bottom: clamp(2rem, 8vw, 5rem);
}

.hero-image {
  width: min(100%, 90rem);
  max-height: 85vh;
  object-fit: contain;
  aspect-ratio: 2190 / 1369;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
}

main { margin-top: 0; padding-top: 0; }



.parallax {
  /* Imagen de fondo */
  background-image: url("imagenes/fondo.png");

  /* Altura de la sección */
  min-height: 500px;

  /* Efecto parallax */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
.principal section[id],
.principal [id].level1,
[id].level1 { scroll-margin-top: 80px; }

@media (max-width: 992px) {
  .principal { padding-inline: clamp(1rem, 6vw, 3rem); }

  .imagecarousel {
    grid-auto-columns: minmax(70%, 320px);
    gap: 1.5rem;
    padding: 1.5rem 1.5rem 2rem;
  }

  .organizer-card { width: min(100%, 320px); }

  .hero { padding: clamp(1rem, 6vw, 3rem) 0 clamp(1.5rem, 7vw, 3rem); }
}

@media (min-width: 1200px) {
  .imagecarousel {
    overflow: visible;
    padding-inline: 0;
    grid-auto-columns: minmax(260px, 1fr);
  }

  .imagecarousel::before,
  .imagecarousel::after { display: none; }
}

.nav-footer {
  min-height: 3.5em;
  background-color: #242832;
  color: #fff !important;
}