/*
      Nuevos Colores
      Nuevo Azul: #002147
      Nuevo Blanco: #eceded

      Viejos Colores
      Azul: #395886
      Blanco: #F3F4E5
*/
body{
    background-color: #292627;
    font-size: 22px;
    font-family:'Times New Roman', Times, serif;
    color: white;
    margin: 0;
    padding-top: 100px;
 }
 *{
    scroll-behavior: smooth;
 }
 main {
   position: relative;
   padding-bottom: 200px;
   padding-left: 80px;
   padding-top: 30px;
   padding-right: 80px;
}
@media screen and (max-width: 768px) {
   header, footer {
       position: relative;
   }
}

 header{
    /*background-color: #395886;
    color: #F3F4E5;
    width:device-width;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 150%;
    font-family: 'Bebas Neue', sans-serif;
    position:relative;*/
    background-color: #395886;
    color: #F3F4E5;
    width: 100%; /* Asegura que ocupe todo el ancho */
    padding: 15px 0; /* Espaciado arriba y abajo */
    font-size: 150%;
    font-family: 'Bebas Neue', sans-serif;
    position: fixed; /* Fija el header en la parte superior */
    top: 0; /* Lo posiciona en la parte superior */
    z-index: 1000; /* Asegura que esté encima del contenido */
    text-align: center; /* Centra el contenido del header */
 }
 p{
   font-size: 90%;
   padding: 10px;
   background-color: #F3F4E5;
   color:#395886;
   border: solid 3px #395886;
   border-radius: 5px;
 }


 #team-logo {
    width: 70px;
    height: 70px;
    vertical-align:top;
    border-radius:5px;
    float:right;
    padding-right: 10px;
    padding: 5px;
    padding-top: 0;
  }
 #team-logo2{
    width: 70px;
    height: 70px;
    vertical-align: top;
    padding-left: 10px;
    border-radius:5px;
    float:left;
    padding: 5px;
    padding-top: 0;
  }
  #logo {
   width: 100%;
   max-width: 500px;
   height: auto; /* Evita distorsión */
   aspect-ratio: 1/1; /* Mantiene la imagen cuadrada */
   border-radius: 50%;
   padding: 5px;
   border: solid 5px #395886;
   display: block;
   margin: 30px auto 0 auto;
}


  #miramun {
    align-items: center;
    text-align: center;
  }
 .container {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #F3F4E5;
    height: 50px;
 }
 
 #slider-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
 }
 
 
 .slider {
    display: flex;
    width: max-content;
    animation: moveFlags 8.3s linear infinite;
 }
 
 .flag {
    height: 50px;
    width: 90px;
    margin: 0 5px;
 }
 
 
 /* Animación para mover las banderas */
 @keyframes moveFlags {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-45%);
    }
 }
 
 
 /* Duplicar banderas para un scroll continuo */
 .slider::after {
    content: "";
    display: flex;
    
 }
#bienvenida{
    padding: 10px;
    text-align:center;
    border-radius: 20px 0 20px 0;
    width: 100%;
    align-items: center;
 }
 h1{
    font-size: 130%;
    font-weight: bold;
    padding: 10px;
    border-radius: 45px 0 45px 0;
    color: #F3F4E5;
    background-color: #395886;
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
 }
 footer{
    background-color: #395886;
    font-size: 80%;
    font-style: italic;
    position:fixed;
    bottom: 0;
    width: 100%;
    color:#F3F4E5;
    text-align: center;
    padding: 10px 0;
    margin-top: 25px;
  }
  #menu-dropdown {
    display: none;
    position: absolute;
    top: 40px; /* Ajusta según necesites */
    left: 20px; /* Ajusta según necesites */
    width: 200px;
    height: 150px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}
/* Estilos para los elementos del menú */
.menu-item {
    padding: 10px;
    text-decoration: none;
    display: block;
    color:#F3F4E5;
    background-color: #638ECB;
    width: 250px;
    font-size: 20px;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: bold;
}

.menu-item:hover {
    background-color:#395886;
}
/* Estilos para el overlay */
#overlay {
    display: none;
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
  }
/* Preloader */
#preloader {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #3b5998; /* Color de fondo */
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1000;
}

/* Imagen del logo en el preloader */
#preloader-logo {
   width: 150px;
   height: auto;
   animation: fadeInOut 2s ease-in-out;
}

/* Ocultar el contenido principal al inicio */
#main-content {
   display: none;
}

/* Animación de entrada/salida del logo */
@keyframes fadeInOut {
   0%, 100% { opacity: 0; }
   50% { opacity: 1; }
}

/* Sección de "topicos", ahora responsive */
.topicos {
   width: 100%;
   display: flex;
   justify-content: center;
   gap: 50px; /* Reduce el espacio entre elementos en pantallas pequeñas */
   margin-top: 80px;
   margin-bottom: 40px; 
   flex-wrap: wrap;
}

/* Texto dentro de los tópicos */
.topicos h1 {
   padding: 10px;
   border-radius: 20px 20px 0 0;
   margin: 0;
   font-size: 130%;
}

.topicos p {
   margin: 0;
   border-radius: 0 0 20px 20px;
   font-size: 110%;
   text-align: center;
}

/* Ajustes para los elementos de la sección "topicos" */
#top1, #top2 {
   width: 90%; /* Ahora se ajusta dinámicamente en móviles */
   max-width: 500px; /* Mantiene el ancho máximo en pantallas grandes */
   margin: 0 auto; /* Centra el elemento */
   display: flex;
   flex-direction: column;
   border-radius: 20px;
   overflow: hidden;
   background-color: #292627;
}

/* Ajuste de texto para móviles */
@media screen and (max-width: 768px) {
   .topicos h1, .info h1, .info h2 {
      font-size: 110%;
   }

   .info p, .topicos p, .info ul {
      font-size: 95%;
      text-align: left;
   }

   .info ul li::before {
      width: 10px;
      height: 10px;
   }
}
img {
   max-width: 100%;
   height: auto;
}
@media (max-width: 768px) {
   .topicos {
       flex-direction: column; /* Cambia los elementos a disposición vertical */
   }
}
.comite {
   width: 270px;
   height: 270px;
   aspect-ratio: 1/1; /* Mantiene proporciones cuadradas */
   background-color: #F3F4E5;
   border: solid 2px #395886;
   border-radius: 50%;
   display: block;
   margin: 0 auto;
   overflow: hidden; /* Evita deformaciones */
}


.info h1 {
   padding: 10px;
   border-radius: 20px 20px 0 0;
   margin: 0;
   font-size: 120%; /* Reduce un poco el tamaño en general */
   font-weight: bold;
   text-align: center;
   color: #F3F4E5;
}

.info p {
   border-radius: 0 0 20px 20px;
   font-size: 100%; /* Ajuste para mejor legibilidad */
   margin: 0;
   text-align: left; /* Mejor en móviles */
   line-height: 1.6;
   color: #395886;
}

.info h2 {
   border-radius: 20px 20px 0 0;
   padding: 10px;
   font-size: 110%;
   font-weight: bold;
   text-align: center;
   color: #F3F4E5;
   background-color: #395886;
   margin: 0;
   border: solid 3px #395886;
}

.info ul {
   border-radius: 0 0 20px 20px;
   padding: 15px;
   font-size: 100%;
   text-align: left; /* Justificar en móviles puede verse raro */
   line-height: 1.5;
   list-style: none;
   background-color: #F3F4E5;
   border: solid 3px #395886;
   margin: 0;
}

.info ul li {
   margin-bottom: 10px;
   padding-left: 25px; /* Ajuste para mejor alineación */
   position: relative;
   color: #395886;
}

.info ul li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0.3em;
   width: 12px; /* Ajustado para móviles */
   height: 12px;
   background-image: url("Miramun25.3.1.png");
   background-size: contain;
   background-repeat: no-repeat;
}

/* 📱 Ajustes para móviles */
@media screen and (max-width: 768px) {
   .info h1 {
      font-size: 110%;
   }

   .info p {
      font-size: 95%;
      text-align: left;
   }

   .info h2 {
      font-size: 105%;
   }

   .info ul {
      padding: 10px;
      font-size: 95%;
   }

   .info ul li {
      padding-left: 20px;
   }

   .info ul li::before {
      width: 10px;
      height: 10px;
   }
}

.sponsors {
   height: 450px;
   width: 100%;
   padding: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   padding-top: 120px;
}

/* Ajuste en imágenes de sponsors */
.sponsors img {
   border: solid 10px #395886;
   height: 200px;
   width: 200px;
   border-radius: 50%;
   background-color: #292627;
   object-fit: cover; /* Mejor ajuste */
   padding: 5px;
}
img {
   max-width: 100%;
   height: auto;
   display: block;
}
@media screen and (max-width: 768px) {
   .comite, #logo {
      width: 80%;
      max-width: 250px;
      height: auto;
      aspect-ratio: 1/1; /* Mantiene forma cuadrada */
   }
}