/* Reglamento */

.reglamento {
    margin-top: 250px; /* Aumentamos este valor para separarlo del nuevo header */
    padding: 0 80px; 
    max-width: 1600px; 
    margin-left: auto;
    margin-right: auto;
}

.reg_titulo {
  font-family: 'Sheepman-Slanted-Regular';
  font-size: 75px; /* Reducido de 100px para mayor minimalismo */
  text-align: center;
  text-transform: uppercase;
  position: relative; 
  margin: 0 auto 50px auto;
}

.reg_titulo::after {
  content: "";
  position: absolute;
  bottom: -5px; 
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 400px; /* Ajustada la línea al nuevo tamaño */
  height: 5px;
  background-image: url('../img/institucion/objetivos_after.png');
  background-size: cover;
  background-repeat: no-repeat;
}

/* Contenedor general que alinea la gran foto y las listas */
.img_categorias {
    margin: 40px 0;
    display: flex;
    gap: 60px; /* Espacio elegante entre imagen y contenidos */
    align-items: flex-start;
}

/* La imagen lateral izquierda */
.img_categorias .left_img {
    flex: 0.8; /* Ancho proporcional equilibrado */
    width: 100%;
    height: 65vh; /* Altura controlada */
    object-fit: cover;
    border-radius: 15px !important; /* Esquinas redondeadas pulidas en vez de solo derechas */
    display: block;
}

/* Contenedor que agrupa todas las filas de categorías (BMX, RUTA, MTB...) */
.categorias_wrapper {
    flex: 1.2; /* Toma un poco más de espacio de forma limpia */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Filas de categorías individuales */
.categoria_doc {
  display: flex;       
  flex-direction: row; /* Fuerza la fila horizontal siempre */
  align-items: center; /* Alinea los títulos con el centro de las cajas */
  gap: 30px;          
  padding: 20px 0;    /* Limpiamos paddings excesivos */
}

/* Forzamos a comisiones a comportarse igual */
.categoria_doc.comisiones {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
}

/* Contenedor fijo del título */
.titu {
    width: 180px;
    flex-shrink: 0;
}

.category,
.categoria_doc.comisiones .titu h2 {
    font-family: 'Sheepman-Slanted-Regular';
    font-size: 40px; /* Reducido de 60px para que sea más minimalista */
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    background-color: transparent;
    text-align: right;
}

/* Normalizamos el de comisiones para que calce idéntico */
.categoria_doc.comisiones .titu h2 {
    font-size: 40px !important;
    text-align: right;
}

.category.amarillo { color: #FFD901; }
.category.rojo { color: #CA141F; }
.category.azul { color: #223B7F; }
.category.negro { color: #25282A; }

/* El bloque de documentos a la derecha */
.docs {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.docs ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Modificamos los recuadros de los documentos para que sean limpios */
.docs li {
  width: 100%; /* Toma el ancho dinámico, elimina los 400px rígidos */
  max-width: 550px; /* Evita que crezca infinitamente */
  border-left: 1px solid rgba(0, 0, 0, 0.15); /* Línea divisoria vertical más sutil */
  border-top: none; /* Quitamos las molestas líneas superiores */
  padding: 15px 30px; /* Espaciado interno elegante y balanceado */
  margin-left: 0; /* Eliminado el margen que desalineaba las cajas */
}

.docs a {
  display: inline-flex;      
  align-items: center;       
  gap: 12px;
  text-decoration: none;
  color: #25282A;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.docs a:hover {
    text-decoration: none;
    color: #223B7F; /* Color institucional al hacer hover */
}

.docs img {
    width: 22px;
    height: auto;
    margin-right: 0; /* Controlado desde el gap */
}

/* Reglamento UCI */

.reglamento_uci{
    padding: 100px 0;
    margin-bottom: 100px;
}

.UCI_titulo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 100px 0;
}

.UCI_titulo h2{
    font-family: 'Sheepman-Slanted-Regular';
    font-size: 60px;
    text-align: center;
    margin: 0;
    text-transform: uppercase   ;
}

.UCI_titulo img{
    width: 200px;
    height: auto;
    margin: 20px 0;
    transition: transform 0.3s ease;
}

.UCI_titulo img:hover{
    transform: scale(1.1);
}

.reg_lista{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.reg_lista ul{
    display: flex;
    list-style: none;
    gap: 40px;
}


.reg_lista ul li {
  padding: 0;                /* Quitamos el padding del <li> */
  width: 470px;
  list-style: none;
  transition: transform 0.3s ease;
  margin: 20px 0;
}

.reg_lista ul li:hover {
  transform: translateY(-5px);
}

.reg_lista ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 30px 20px;
  background-color: white;
  box-shadow: 10px 10px 24px rgba(0, 0, 0, 0.2);
  color: #000;
  text-decoration: none;
  width: 80%;
  height: 50%;
  border-radius: 12px;
}

.reg_lista ul li a:hover {
  /* Opcional: animación al pasar el mouse */
  text-decoration: none;
}


.reg_lista ul li a img {
  width: 20px;
  height: auto;
  flex-shrink: 0;
  margin-right: 20px;
}

/* --- ANIMACIÓN ESTILO PREMIUM --- */
/* Estado inicial de todos los elementos que vamos a animar */
.fade-in-up {
    opacity: 0 !important;
    transform: translateY(60px) scale(0.95) !important;
    transition: all 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.animar-inicial {
    opacity: 0 !important;
    transform: translateY(60px) scale(0.95) !important;
    transition: all 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
/* Cuando se activan */
.animar-ahora {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

/* Zoom elegante para la imagen */
.left_img {
    transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.animar-ahora .left_img {
    transform: scale(1.05);
}

/* Efecto Cascada para categorías */
.categoria_doc:nth-child(1) { transition-delay: 0.1s !important; }
.categoria_doc:nth-child(2) { transition-delay: 0.2s !important; }
.categoria_doc:nth-child(3) { transition-delay: 0.3s !important; }
.categoria_doc:nth-child(4) { transition-delay: 0.4s !important; }


/* Animación para las columnas de la lista UCI */
.reg_lista {
    transition: all 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Efecto de "levitación" al pasar el cursor sobre los links UCI */
.reg_lista li a {
    transition: transform 0.3s ease, color 0.3s ease !important;
    display: block;
}

.reg_lista li a:hover {
    transform: translateX(10px);
    color: #1c3180 !important; /* El color institucional que prefieras */
}

/* Cascada: que la segunda columna aparezca un poco después de la primera */
.reg_lista:nth-child(2) {
    transition-delay: 0.3s !important;
}



@media (max-width: 768px) {
  .redes {
    display: none !important;
  }
  
  body, html { 
    overflow-x: hidden; 
    width: 100%; 
  }

  /* 1. Contenedor principal en celular */
  .reglamento {
    margin-top: 40px !important;
    padding: 0 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Título principal de la página */
  .reg_titulo {
    font-size: 2.5rem !important;
    text-align: center !important;
    margin-bottom: 25px !important;
  }

  .reg_titulo::after {
    max-width: 180px !important;
    bottom: -5px !important;
  }

  /* 2. El contenedor de la gran foto y las listas */
  .img_categorias {
    display: flex !important;
    flex-direction: column !important; /* Foto arriba, contenido abajo */
    gap: 25px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 20px 0 !important;
  }

  /* La imagen del ciclista */
  .img_categorias .left_img {
    width: 100% !important;
    max-width: 100% !important;
    height: 35vh !important;
    border-radius: 12px !important;
    margin: 0 auto !important;
  }

  /* ¡ESTA ES LA CLAVE! Forzamos al contenedor intermedio a ser vertical y ocupar todo el ancho */
  .categorias_wrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 30px !important;
  }

  /* 3. Cada fila pasa a ser un bloque vertical completo */
  .categoria_doc,
  .categoria_doc.comisiones {
    display: flex !important;
    flex-direction: column !important; /* Título arriba, documentos abajo */
    align-items: flex-start !important; /* Todo pegado a la izquierda */
    gap: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Caja del título ("BMX", "RUTA") */
  .titu {
    width: 100% !important;
    text-align: left !important;
  }

  /* Forzamos que los títulos se alineen a la izquierda sin márgenes raros */
  .category,
  .categoria_doc.comisiones .titu h2 {
    font-size: 28px !important;
    text-align: left !important; /* Eliminado el text-align: right de escritorio */
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  /* 4. Bloque de documentos ocupa el 100% debajo del título */
  .docs {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .docs ul {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Las cajas de los links */
  .docs li {
    width: 100% !important;
    max-width: 100% !important;
    border-left: 3px solid rgba(34, 59, 127, 0.2) !important; /* Línea guía sutil con color de la FEC */
    border-top: none !important;
    padding: 12px 0 12px 15px !important; /* Espaciado compacto e interno */
    margin: 0 0 12px 0 !important; /* Eliminado el margin-left que causaba el hueco blanco */
    box-sizing: border-box !important;
  }

  /* Enlaces de descarga */
  .docs li a {
    font-size: 14px !important;
    line-height: 1.4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
  }

  .docs img {
    width: 18px !important;
    margin-right: 10px !important;
  }
}


@media (max-width: 768px) {
  /* 1. Forzamos la columna única en el contenedor padre */
  .reg {
    display: flex !important;
    flex-direction: column !important;
    width: 92% !important;
    margin: 0 auto !important;
    gap: 15px !important;
  }

  /* 2. Forzamos a cada lista a ocupar el 100% de la pantalla */
  .reg_lista {
    width: 100% !important;
  }

  /* 3. Forzamos a que cada ítem (li) sea una fila completa */
  .reg_lista ul {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .reg_lista li {
    width: 100% !important; /* IMPORTANTE: Ocupa todo el ancho */
    flex: 0 0 100% !important; /* Obliga a no compartir espacio */
    margin-bottom: 10px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.08) !important;
    border: 1px solid #eee !important;
    display: flex !important;
    align-items: center !important;
  }

  /* 4. Aseguramos que el enlace ocupe todo el espacio del "cuadro" */
  .reg_lista li a {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding: 15px !important;
    text-decoration: none !important;
    color: #333 !important;
    font-size: 0.9rem !important;
    box-sizing: border-box !important;
  }
  @media (max-width: 768px) {
  .footer-container, 
  .footer-left, 
  .footer-right, 
  .footer-col, 
  .contact-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    justify-content: flex-start !important;
  }

  .footer-container {
    padding-left: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .footer-left {
    flex-direction: row !important; /* Mantenemos los logos en horizontal si quieres */
    align-items: center !important;
  }

  .footer-col ul {
    list-style: none !important;
    padding: 0 !important;
  }
  }
}