/* Estilos base para el header con clases únicas */
.header-custom {
    display: flex; /* Utiliza Flexbox para distribuir los elementos dentro del header */
    justify-content: flex-start; /* Distribuye los elementos de manera que haya espacio entre ellos */
    align-items: center; /* Alinea los elementos verticalmente en el centro */
    padding: 17px; /* Añade un espaciado interno de 10px alrededor del header */
    background-color: #A7FFEB; /* Color de fondo azul pastel */
    /*color: #e78617; /* Color del texto en azul oscuro */
    position: relative; /* Establece la posición como relativa, lo que permite posicionar elementos hijos de manera absoluta */
/**/width: 100%; /* Ajusta el ancho del header al 98% del contenedor principal */
margin-right: 50px;
}

/* Estilos para el logo dentro del header */
.header-custom .logo-custom a {
    color: #141314; /* Color del texto (logo) en azul oscuro */
    font-size: 1.3rem; /* Tamaño de la fuente más grande (1.8 veces el tamaño normal) */
    font-weight: bold; /* Hace el texto negrita */
    text-decoration: none; /* Elimina el subrayado del enlace */
}

/* Estilos para el logo dentro del header */
.header-custom .logo-custom img {
    width: 150px; /* Ajusta el tamaño de la imagen del logo (puedes cambiar 150px a cualquier valor que te guste) */
    height: auto; /* Mantiene la proporción de la imagen (ajusta la altura proporcionalmente) */
}

/* Estilos para el contenedor del carrito fuera del menú hamburguesa */
.cart-container-custom {
    position: relative; /* Permite que los elementos dentro del contenedor sean posicionados relativamente */
    display: inline-flex; /* Utiliza Flexbox en línea para alinear los elementos dentro del contenedor */
    align-items: left; /* PONEMOS CENTER SI HAY PROBLEMAS ESTO Alinea los elementos verticalmente al centro */
/*cambio*/  margin-left: 40px; /* corremos el carrito hacia la derecha aumentando*/
}

/* Estilos para el icono del carrito */
.cart-icon-custom {
    width: 40px; /* Define un ancho de 30px para el icono del carrito */
    height: 40px; /* Define una altura de 30px para el icono del carrito */
/*cambio*/padding:18px; /*agrega espacio entre el menu hamburguesa y el carrito*/
}

/* Estilos para la cuenta del carrito (el número de artículos en el carrito) */
.cart-count-custom {
    position: absolute; /* Posiciona el número de artículos de manera absoluta dentro del contenedor */
    top: -6px; /* Mueve el número hacia arriba 5px respecto a su contenedor */
    right: -8px; /* Mueve el número hacia la derecha 5px respecto a su contenedor */
    background-color: red; /* Fondo rojo para resaltar el número */
    color: white; /* Color blanco para el texto */
    font-size: 2.0rem; /* Tamaño de la fuente más pequeño */
    border-radius: 50%; /* Hace que el número tenga bordes redondeados (forma circular) */
    padding: 5px; /* Espaciado interno de 5px alrededor del número */
    min-width: 20px; /* Establece un ancho mínimo de 20px */
    text-align: center; /* Centra el texto dentro del círculo */
}

/* Estilos para el menú hamburguesa */
.menu-toggle-custom {
    display: none; /* Oculta el menú hamburguesa por defecto */
    flex-direction: column; /* Organiza las barras del menú hamburguesa en una columna */
    gap: 5px; /* Espaciado entre las barras del menú hamburguesa */
    right: 80px; /*Esto despega el menu hamburguesa del borde derecho*/
    cursor: pointer; /* Cambia el cursor al pasar sobre el menú hamburguesa, indicando que es interactivo */
   /* position: relative;*/  /*Esto arregla los menus sobre el video por eso lo comente*/
    z-index: 10; /* Menú hamburguesa por encima de otros elementos */
}

/* Estilos para las barras del menú hamburguesa */
.menu-toggle-custom .bar {
    width: 25px; /* Establece el ancho de cada barra en 25px */
    height: 6px; /* Establece la altura de cada barra en 4px */
    background-color: #0408e7; /* Color de fondo de las barras en azul oscuro */
    border-radius: 5px; /* Hace que las barras tengan bordes redondeados */
/*cambio*/ margin-right: 50px; /*aleja el menu hamburguesa a la izquierda*/
}

/* Estilos para la barra de navegación (el menú principal) */
.navigation-custom {
    display: flex; /* Utiliza Flexbox para distribuir los elementos dentro del menú */
    z-index: 9999; /* Asegura que el menú de navegación esté por encima de todo */
}

/* Estilos para las listas dentro del menú de navegación */
.navigation-custom ul {
    list-style-type: none; /* Elimina los puntos de la lista */
    display: flex; /* Utiliza Flexbox para distribuir los elementos de la lista horizontalmente */
    gap: 15px; /* Añade un espacio de 20px entre los Textos menus */
    align-items: center; /* Alinea los elementos verticalmente en el centro */
    justify-content: end; /* cambiar a centerCentra los elementos en el contenedor */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan si el espacio es insuficiente */
    font-weight: bold; /* Hace que el texto sea en negrita */
    font-size: 1.2em;
    z-index: 9999;
}
/* Efecto hover para los enlaces del menú */
.navigation-custom a:hover {
    color: #eb280e; /* Cambia el color cuando el ratón pasa por encima (el mismo color de fondo del header, por ejemplo) */
}

/* Estilos para los enlaces dentro del menú de navegación */
.navigation-custom a {
    color: #161718; /* Color de texto para los enlaces en azul oscuro */
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    font-size: 1.2rem; /* Tamaño de la fuente del menu en el header */
    transition: color 0.3s; /* Añade una transición de 0.3 segundos para el cambio de color */
}

/* Estilos para el menú hamburguesa en pantallas pequeñas */
@media (max-width: 768px) {
    .navigation-custom {
        display: none; /* Oculta el menú de navegación por defecto en pantallas pequeñas */
        flex-direction: column; /* Organiza los elementos del menú de navegación en columna */
        gap: 15px; /* Añade un espacio de 5px entre los elementos */
        position: absolute; /* Posiciona el menú de forma absoluta respecto a su contenedor */
        top: 10px; /* Coloca el menú 70px hacia abajo desde el borde superior */
        right: 80px; /* Coloca el menú 50px hacia la derecha desde el borde */
        left: 80px;/*coloca el menu sin tapar el logo entre mas sea el valor mas lo corre ala derecha*/
        background-color: #06f1a3; /* Establece el fondo azul pastel del menú */
        padding: 20px; /* Añade un espaciado interno de 20px alrededor del menú */
        border-radius: 8px; /* Bordes redondeados con un radio de 8px */
        box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); /* Añade una sombra sutil para el menú */
        z-index: 9999; /* Menú de navegación sobre todos los demás elementos */
    }

    .menu-toggle-custom {
        display: flex; /* Muestra el menú hamburguesa en pantallas pequeñas */
     
        
    }


    .navigation-custom.active {
        display: flex; /* Muestra el menú de navegación cuando tiene la clase 'active' */
    }

    /* Estilos para la lista de navegación en pantallas pequeñas */
    .navigation-custom ul {
        display: flex; /* Utiliza Flexbox para organizar los elementos en columna */
        flex-direction: column; /* Organiza los elementos en una columna */
        gap: 20px; /* Añade un espacio de 20px entre los elementos */
        align-items: flex-start;  /* Alinea los elementos del menú a la izquierda */
    }

    /* Estilos para el carrito en pantallas pequeñas */
    .cart-container-custom {
 /**/ margin-left: 80px; /* Empuja el carrito hacia el lado derecho del contenedor */
    }
   
}
/* Estilos para el menú hamburguesa en pantallas pequeñas (máximo 468px) */
@media (max-width: 468px) {
    .navigation-custom {
        display: none; /* Oculta el menú de navegación por defecto en pantallas pequeñas */
        flex-direction: column; /* Organiza los elementos del menú de navegación en columna */
        gap: 15px; /* Añade un espacio de 15px entre los elementos */
        position: absolute; /* Posiciona el menú de forma absoluta respecto a su contenedor */
        top: 10px; /* Coloca el menú 10px hacia abajo desde el borde superior */
        right: 50px; /* Coloca el menú 50px hacia la derecha desde el borde */
        left: 80px; /* Ajusta la posición izquierda */
        background-color: #f9fd06; /* Establece el fondo del menú */
        padding: 20px; /* Añade un espaciado interno de 20px alrededor del menú */
        border-radius: 8px; /* Bordes redondeados con un radio de 8px */
        box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); /* Añade una sombra sutil para el menú */
        z-index: 9999; /* Menú de navegación sobre todos los demás elementos */
    }

    .menu-toggle-custom {
        display: flex; /* Muestra el menú hamburguesa en pantallas pequeñas */
       
    }

    .navigation-custom.active {
        display: flex; /* Muestra el menú de navegación cuando tiene la clase 'active' */
    }

    /* Estilos para la lista de navegación en pantallas pequeñas */
    .navigation-custom ul {
        display: flex; /* Utiliza Flexbox para organizar los elementos en columna */
        flex-direction: column; /* Organiza los elementos en una columna */
        gap: 5px; /* Añade un espacio de 20px entre los elementos */
        align-items: flex-start;  /* Alinea los elementos del menú a la izquierda */
    }

    /* Estilos para el carrito en pantallas pequeñas */
    .cart-container-custom {
        margin-left: 80px; /* Empuja el carrito hacia el lado derecho del contenedor */
    }
}