/* General Styles for Header */
header .contenedor {
    position: relative;
    height: 162px;
}

/* Menu Styling */
header .menu {
    background-color: #6786B7;
    width: 100%;
    height: 8em;
    text-align: right;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

header .menu a {
    margin: -18px -30px;
}

/* Responsive Menu Heights */
@media (max-width: 479px) {
    header .menu {
        height: 8em;
        text-align: center;
        background-color: #5678A7;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    header .menu {
        height: 9em;
        background-color: #5A7AB2;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    header .menu {
        left: 8.2em;
        height: 6.5em;
        background-color: #6284B5;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    header .menu {
        left: 10.4em;
        height: 8em;
        background-color: #6786B7;
    }
}

@media (min-width: 1200px) and (max-width: 1599px) {
    header .menu {
        left: 8em;
        height: 8.5em;
        background-color: #6A88B9;
    }
}

@media (min-width: 1600px) and (max-width: 1999px) {
    header .menu {
        height: 9em;
        background-color: #6C8ABF;
    }
}

@media (min-width: 2000px) {
    header .menu {
        height: 10em;
        background-color: #6E8CC2;
    }
}

/* Dropdown Menu */
header .nav-menu {
    display: none;
    position: absolute;
    top: 6%;
    right: 0;
    background-color: rgba(0, 4, 255, 0.8);
    width: 100%;
    z-index: 1000;
}

header .nav-menu.active {
    display: block;
}

header .nav-menu a {
    color: #fff;
    font-size: 20px;
    font-weight: 300;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
}

header .nav-menu a:hover {
    text-decoration: underline;
    background-color: #444;
}

/* Button Toggle */
header .btn-toggle {
    background-color: #333;
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    position: fixed;
    top: 6px;
    left: 3px;
    z-index: 1001;
}

/* Text Styling */
header .textos {
    width: 100%;
    text-align: center;
    color: white;
    text-shadow: -6px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

header .textos .nombre {
    font-size: 50px;
    font-weight: 600;
    margin-top: 3em;
    text-decoration: none;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 59px;
    box-shadow: 0 0 10px rgb(255 255 255);
    transition: background-color 0.3s;
}

header .textos h3 {
    font-size: 30px;
    color: #FFC107;
    text-shadow: 1px 1px 2px #000, 0 0 25px #FFC107, 0 0 5px #FFD54F;
}

/* Hover Effects */


/* Responsive Text */
@media (max-width: 600px) {
    header .textos .nombre {
        left: -9px;
    }

    header .textos h3 {
        font-size: 20px;
    }
}

@media (min-width: 601px) and (max-width: 1023px) {
    header .textos .nombre {
        font-size: 1.5em;
    }

    header .textos h3 {
        font-size: 25px;
    }
}

@media (min-width: 1024px) {
    header .textos .nombre {
        font-size: 2em;
    }

    header .textos h3 {
        font-size: 30px;
    }
}

/* Specific Media Queries */
@media (min-width: 715px) and (max-width: 1300px) {
    .header .contene {
        margin-top: 44px;
        padding: 1px 3px;
        border-radius: 30px;
        font-size: 33px;
        text-align: left;
        margin-left: -153%;
    }
}

@media (min-width: 1301px) and (min-height: 661px) {
    .header .contene {
        margin-top: 44px;
        padding: 1px 3px;
        border-radius: 30px;
        font-size: 33px;
        text-align: left;
        margin-left: -153%;
    }
}

/* Styling for "JUMASCREEN" and "UNLOCK NOW NEW SELLERS" */
.derecha .textos .nombre {
    top: 27px;
    position: relative;
    right: -1em;
    font-family: 'Caveat', 'Comic Sans MS', cursive; /* Fuente de caricatura */
    font-size: 52px; /* Tamaño de fuente */
    font-weight: 700; /* Negrita para un estilo más llamativo */
    text-align: center; /* Centra el título */
    color: #2c3e50; /* Un color agradable, como un azul oscuro */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), -2px -2px 4px rgba(255, 255, 255, 0.5); /* Resplandor claro */
    background: linear-gradient(to right, #000000, #0009ff); /* Degradado de color */
    -webkit-background-clip: text; /* Hace que el texto use el degradado */
    -webkit-text-fill-color: transparent; /* Deja solo el color del degradado visible */
    margin: 20px auto; /* Espaciado arriba y abajo */
    display: inline-block; /* Para ajustar contenido */
    border-radius: 15px; /* Bordes redondeados si tiene fondo */
    padding: 10px 20px; /* Espaciado interno */
}

.derecha .textos .nombre a {
    text-decoration: none; /* Elimina el subrayado del enlace */
    color: inherit; /* Usa el color definido en el contenedor padre */
    transition: color 0.3s ease, transform 0.3s ease; /* Animaciones suaves */
}

.derecha .textos .nombre a:hover {
    color: #f39c12; /* Cambia a un tono cálido al pasar el mouse */
    transform: scale(1.1); /* Aumenta ligeramente el tamaño */
}

.derecha {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2em;
    text-align: center;
}

.derecha .nombre {
    font-size: 3em;
    font-weight: bold;
    font-family: 'Creepster', cursive;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 0 10px rgb(255 255 255 / 70%), 0 0 20px rgba(255, 255, 255, 0.5);
    margin: 0.5em 0;
    padding: 0.2em 0.5em;
    border-radius: 0.5em;
    background: linear-gradient(90deg, rgba(0, 0, 255, 0.2), rgba(255, 255, 255, 0.1));
    transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
}

.derecha .nombre:hover {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(0, 0, 255, 0.2));
    transform: scale(1.05);
}

.derecha h3 {
    font-size: 1.5em;
    font-style: italic;
    color: #FFC107;
    text-shadow: 1px 1px 2px #000, 0 0 25px #FFC107, 0 0 5px #FFD54F;
    margin-top: 0.5em;
    margin-bottom: 1em;
    padding: 0.2em 0.5em;
    border-radius: 0.5em;
    background: linear-gradient(90deg, rgba(255, 193, 7, 0.2), rgba(0, 0, 0, 0.1));
    transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.derecha h3:hover {
    background: linear-gradient(90deg, rgba(255, 193, 7, 0.5), rgba(0, 0, 0, 0.2));
    transform: translateY(-3px);
}

/* Logo Container */
.logo-container {
    margin-top: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-container .logo {
    max-width: 4em;
    height: auto;
    transition: transform 0.3s ease-in-out;
}

.logo-container .logo:hover {
    transform: rotate(15deg) scale(1.1);
}

/* Responsive Logo */
@media (max-width: 479px) {
    .logo-container .logo {
        left: 2px;
        max-width: 3em;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .logo-container .logo {
        left: 23px;
        max-width: 3.5em;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .logo-container .logo {
        left: 255px;
        max-width: 2.5em;
    }
}

@media (min-width: 1200px) {
    .logo-container .logo {
        left: 353px;
        max-width: 2.6em;
    }
}








/* Estilo para el menú desplegable */
/* Estilo para el botón de categorías */
/* Estilo base */
.dropdown-toggle {
    position: relative;
    cursor: pointer;
    padding: 10px 20px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(90deg, #6a11cb, #2575fc);
    border: none;
    border-radius: 25px;
    transition: all 0.3s ease-in-out;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Pantallas muy pequeñas (320px a 479px) */
@media (max-width: 479px) {
    .dropdown-toggle {
        padding: 8px 15px; /* Reduce el padding */
        font-size: 0.8rem; /* Reduce el tamaño de la fuente */
        border-radius: 20px; /* Ajusta el radio de borde */
    }
}

/* Pantallas pequeñas (480px a 767px) */
@media (min-width: 480px) and (max-width: 767px) {
    .dropdown-toggle {
        padding: 9px 18px; /* Ajusta el padding ligeramente */
        font-size: 0.9rem; /* Ajusta el tamaño de la fuente */
        border-radius: 22px; /* Ajusta el radio de borde */
    }
}

/* Pantallas medianas (768px a 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .dropdown-toggle {
        padding: 10px 20px; /* Mantén el padding original */
        font-size: 1rem; /* Mantén el tamaño de la fuente */
        border-radius: 25px; /* Mantén el radio de borde original */
    }
}

/* Pantallas grandes (1024px a 1199px) */
@media (min-width: 1024px) and (max-width: 1199px) {
    .dropdown-toggle {
        left: -2px;
        padding: 7px 1px; /* Aumenta ligeramente el padding */
        font-size: 1.1rem; /* Aumenta ligeramente el tamaño de la fuente */
        border-radius: 30px; /* Aumenta el radio de borde */
    }
}

/* Pantallas muy grandes (1200px a 1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
    .dropdown-toggle {
        padding: 14px 30px; /* Aumenta el padding */
        font-size: 1.2rem; /* Aumenta el tamaño de la fuente */
        border-radius: 35px; /* Aumenta el radio de borde */
    }
}

/* Pantallas extremadamente grandes (1600px y más) */
@media (min-width: 1600px) {
    .dropdown-toggle {
        left: 104px;
        padding: 16px 35px; /* Maximiza el padding */
        font-size: 1.3rem; /* Maximiza el tamaño de la fuente */
        border-radius: 40px; /* Maximiza el radio de borde */
    }
}


.dropdown-toggle:hover {
    background: linear-gradient(90deg, #2575fc, #6a11cb); /* Gradiente invertido */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Menú desplegable */
/* Estilo base */
.dropdown-menu {
    top: 128px;
    display: none;
    position: absolute;
    background-color: #fff;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 15px;
    min-width: 250px;
    z-index: 1000;
    transition: all 0.3s ease-in-out;
}

.dropdown-menu.open {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Pantallas muy pequeñas (320px a 479px) */
@media (max-width: 479px) {
    .dropdown-menu {
        top: 100px; /* Ajusta la posición superior */
        padding: 10px; /* Reduce el padding */
        min-width: 200px; /* Reduce el ancho mínimo */
        border-radius: 8px; /* Reduce el radio de borde */
    }
}

/* Pantallas pequeñas (480px a 767px) */
@media (min-width: 480px) and (max-width: 767px) {
    .dropdown-menu {
        top: 110px; /* Ajusta la posición superior */
        padding: 12px; /* Ajusta ligeramente el padding */
        min-width: 220px; /* Ajusta el ancho mínimo */
        border-radius: 9px; /* Ajusta el radio de borde */
    }
}

/* Pantallas medianas (768px a 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .dropdown-menu {
        max-width: 38em;
        left: 3.5em;
        top: 101px; /* Ajusta la posición superior */
        padding: 13px; /* Mantén el padding original */
        min-width: 95px; /* Mantén el ancho mínimo original */
        border-radius: 10px; /* Mantén el radio de borde original */
    }
}

/* Pantallas grandes (1024px a 1199px) */
@media (min-width: 1024px) and (max-width: 1199px) {
    .dropdown-menu {
        left: 16em;
        top: 130px; /* Ajusta la posición superior */
        padding: 18px; /* Aumenta ligeramente el padding */
        min-width: 280px; /* Aumenta el ancho mínimo */
        border-radius: 12px; /* Aumenta el radio de borde */
    }
}

/* Pantallas muy grandes (1200px a 1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
    .dropdown-menu {
        left: 39em;
        top: 112px; /* Ajusta la posición superior */
        padding: 20px; /* Aumenta el padding */
        min-width: 300px; /* Aumenta el ancho mínimo */
        border-radius: 15px; /* Aumenta el radio de borde */
    }
}

/* Pantallas extremadamente grandes (1600px y más) */
@media (min-width: 1600px) {
    .dropdown-menu {
        top: 150px; /* Maximiza la posición superior */
        padding: 25px; /* Maximiza el padding */
        min-width: 350px; /* Maximiza el ancho mínimo */
        border-radius: 20px; /* Maximiza el radio de borde */
    }
}


.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Campo de búsqueda dentro del menú */
.category-search {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
}

/* Lista de categorías */
.category-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.category-list li {
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.category-list li:hover {
    background-color: #f7f7f7;
}

.category-list a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
    display: block;
}

.category-list a:hover {
    color: #2575fc;
}

.no-results {
    color: #999;
    font-style: italic;
    text-align: center;
    padding: 10px;
    display: block;
}