@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); 

  

* { 

    margin: 0; 

    padding: 0; 

    box-sizing: border-box; 

    font-family: 'Poppins', sans-serif; 

} 

  

header {position: relative;width: 50%;padding: 1rem; /* Adecuado para todos los dispositivos /display: flex;justify-content: space-between;align-items: center;z-index: 10; / Z-index ajustado para prevenir sobrepuestas excesivas */z-index: 19;} 

  label {
      color:aliceblue;
  }

.logo { 

    font-size: 1.5rem; /* Tamaño de fuente ajustado */ 

    color: #ffffff; 

    border: 2px solid #00b4ffa6; 

    border-radius: 20px; /* Radio de borde reducido para una apariencia más limpia */ 

    padding: 0.5rem 1rem; /* Ajuste de padding para mantener la proporcionalidad */ 

    transition: all 0.3s ease; /* Transición simplificada para todos los cambios */ 

    text-shadow: 0 0 5px #00FFFF; 

} 

  

/* Estilos base para .menu */
/* Ajuste del menú dentro de la clase .border */
.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around; /* Distribuye los elementos uniformemente */
}

/* Dispositivos móviles grandes y tabletas en retrato (400px y más) */
@media only screen and (min-width: 400px) {
    .menu {
        /* Ajustes específicos para mejorar la visualización en dispositivos más grandes */
        top: 33.5em; /* Ajustar la posición superior */
        right: 1em; /* Ajustar la posición derecha */
        z-index: 19;
    }
}

/* Tabletas en paisaje (768px y más) */
@media only screen and (min-width: 768px) {
    .menu {
        top: 41em; /* Posiblemente ajustar nuevamente para tabletas en paisaje */
        right: 0em; /* Ajustar la posición derecha para un mejor ajuste */
        z-index: 19;
    }
}

/* Pequeños monitores (1024px y más) */
@media only screen and (min-width: 1024px) {
    .menu {
        top: 40em; /* Mantener la posición superior constante o ajustar según sea necesario */
        right: -12em; /* Ajustar la posición derecha para alinear mejor el menú */
    }
}

/* Monitores grandes (1280px y más) */
@media only screen and (min-width: 1280px) {
    .menu {
        top: 40em; /* Mantener o ajustar la posición superior */
        right: 1em; /* Reducir la posición derecha para centrar mejor el menú */
    }
}

/* Monitores muy grandes (1600px y más) */
@media only screen and (min-width: 1600px) {
    .menu {
        top: 40em; /* Ajustes para mantener la coherencia o mejorar la posición */
        right: 0em; /* Ajustar para alinear o centrar el menú según el diseño */
    }
}

.menu li {
    margin: 0;
}

  


.menu li a {
    color: #000;
    text-decoration: none;
    background: linear-gradient(135deg, #bebebe 0%, #2575fc08 100%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    padding: 5px 10px; /* Reduce el padding para acercar el contorno */
    border-radius: 15px; /* Mantén un radio de borde suave para el contorno ovalado */
    transition: background-color 0.3s, color 0.3s;
}

.menu li a:hover {
    background-color: #00BFFF;
    color: #000;
}


/* Media queries para el menú */
@media only screen and (max-width: 600px) {
    .menu {
        flex-direction: column;
        align-items: center;
    }

    .menu li a {
        padding: 8px 12px;
    }
}

@media only screen and (min-width: 601px) and (max-width: 1200px) {
    .menu {
        flex-direction: row;
        justify-content: space-between;
    }

    .menu li a {
        padding: 9px 15px;
    }
}

  





/* Asegúrate de agregar otros estilos necesarios */

  

/* Media Queries para ajustes responsivos de la imagen de parallax */ 


/* Ajustes para .section */ 

.section {padding: 5% 0;background-color: #000000ba;background-size: cover;background-repeat: no-repeat;background-position: center center;height: auto; /* Altura automática para mejor fluidez del contenido /margin: 1rem; / Margen para separar las secciones */} 

  

/* Media Queries para .section */ 


  

@media only screen and (min-width: 481px) and (max-width: 1024px) { 

    .section { 

        padding: 7% 5%; /* Padding ajustado para tabletas */ 

    } 

} 

  

/* Continuamos con más ajustes y refinamientos. */ 

/* Ajustes adicionales para elementos individuales y refinamientos de media query */ 

.titulo {
    font-size: clamp(1.5rem, 5vw, 4rem);
    position: relative;
    text-align: center;
    color: #fbffca;
    margin-top: 0rem;
    text-shadow: 2px 2px 10px #000000;
}

/* Pantallas muy pequeñas (300px hasta 500px) */
@media (min-width: 300px) and (max-width: 500px) {
    .titulo {
        font-size: 1.5rem;
        margin-top: 17.5rem;
        right: 0em; /* Asegura que esté centrado */
    }
}

/* Pantallas pequeñas (501px hasta 800px) */
@media (min-width: 501px) and (max-width: 800px) {
    .titulo {
        font-size: 2rem;
        margin-top: 6rem;
        right: 4em; /* Asegura que esté centrado */
    }
}

/* Pantallas medianas pequeñas (801px hasta 992px) */
@media (min-width: 801px) and (max-width: 992px) {
    .titulo {
        font-size: 2.5rem;
        margin-top: 10rem;
        right: 0em; /* Mantén centrado */
    }
}

/* Pantallas medianas grandes (993px hasta 1200px) */
@media (min-width: 993px) and (max-width: 1200px) {
    .titulo {
        font-size: 3rem;
        margin-top: 15rem;
        right: 0em; /* Mantén centrado */
    }
}

/* Pantallas grandes (1201px hasta 1500px) */
@media (min-width: 1201px) and (max-width: 1500px) {
    .titulo {
        font-size: 3.5rem;
        margin-top: 20rem;
        right: 0em; /* Mantén centrado */
    }
}

/* Pantallas muy grandes (1501px hasta 2000px) */
@media (min-width: 1501px) and (max-width: 2000px) {
    .titulo {
        font-size: 4rem;
        margin-top: 25rem;
        right: 0em; /* Mantén centrado */
    }
}

/* Pantallas extra grandes (2001px en adelante) */
@media (min-width: 2001px) {
    .titulo {
        font-size: 4.5rem;
        margin-top: 30rem;
        right: 0em; /* Mantén centrado */
    }
}


  

/* Consolidación de media queries para .category */ 

.category {position: relative;top: 0em;text-align: center;color: #E8E8E8;font-weight: bold;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);font-size: clamp(0.8rem, 2.5vw, 1.5rem); /* Tamaño de fuente adaptable */} 

  

/* Media Queries consolidadas y simplificadas para diferentes elementos */ 

@media only screen and (max-width: 480px) { 

    header, 

    .logo, 

    .menu li a {

font-size: 1rem; /* Tamaño de fuente ajustado para la cabecera */

top: 1em;

} 

  



  

    .parallax { 

        height: auto; /* Altura automática para ajustar al contenido */ 

    } 

  

    .section {margin-top: 19em; /* Eliminar margen superior en secciones para dispositivos  */} 

  

    .category { 

        margin-top: 1rem; /* Ajustar margen superior para categor */ 

    } 

} 

  

/* Ajustes para dispositivos medianos como tabletas */ 

@media only screen and (min-width: 481px) and (max-width: 768px) { 

    .logo, 

    .menu li a { 

        font-size: 1.2rem; /* Tamaño de fuente ligeramente mayor para tabletas */ 

    } 

  

    .section {

position: relative;

top: 12em;

padding: 5% 3%; /* Padding ajustado para tabletas */

} 

} 

  

/* Ajustes para dispositivos grandes */ 


/* Media Queries para dispositivos grandes y extra grandes */
@media only screen and (min-width: 769px) {
    .logo,
    .menu li a {
        /* Tamaño de fuente ajustado para visibilidad en pantallas grandes */
        position: relative;
        font-size: 1.4rem;
        right: 1em;
    }


    .section {
        /* Padding ajustado para dispositivos grandes */
        position: relative;
        padding: 5% 10%;
        top: 13em;
    }
}
  

/* Ajustes para dispositivos extra grandes */ 
@media only screen and (min-width: 1201px) {
    .logo,
    .menu li a {
        /* Aumenta aún más el tamaño de fuente para pantallas extra grandes */
        font-size: 1.75rem;
    }

    

    .section {
        /* Mayor padding para contenido expansivo en pantallas grandes */
        padding: 5% 15%;
    }
}