@font-face {
    font-family: 'TuFuente';
    src: url('../../fonts/Quicksand/Quicksand-Regular.ttf') format('woff2'),
         url('../../fonts/Quicksand/Quicksand-Bold.ttf') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Opcional: mejora la renderización durante la carga */
}
/* Aplicar la fuente a todo el documento */
body {
    font-family: 'TuFuente', sans-serif;
    /* Asegura que los elementos hereden la fuente */
}

/* Opcional: forzar la herencia para todos los elementos */
* {
    font-family: inherit;
}
/* 1. Hacer que el botón de colapso siempre esté visible */


.navbar-toggler {
    display: block !important;
    /* Fuerza la visibilidad del botón */
}

/* 2. Ocultar el menú colapsable por defecto */
.navbar-collapse {
    display: none !important;
    /* Oculta el menú por defecto */
}

/* 3. Mostrar el menú solo cuando tiene la clase "show" (agregada por Bootstrap) */
.navbar-collapse.collapse.show {
    display: block !important;
}

/* 4. Deshabilitar la expansión automática en pantallas grandes */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        display: none !important;
        /* Asegura que el menú esté oculto en pantallas grandes */
    }

    .navbar-expand-lg .navbar-collapse.collapse.show {
        display: block !important;
        /* Muestra el menú solo cuando tiene la clase "show" */
    }

    /* 5. Hacer que el menú colapsable se comporte como un menú desplegable */
    .navbar-collapse.collapse.show {
        position: absolute;
        /* Posiciona el menú de manera absoluta */
        top: 100%;
        /* Lo coloca justo debajo del navbar */
        left: 0;
        width: 100%;
        /* Ocupa el ancho completo */
        background-color: rgb(255, 255, 255);
        /* Fondo negro */
        z-index: 1000;
        /* Asegura que esté por encima de otros elementos */
        padding: 10px;
        /* Espaciado interno */
        box-shadow: 0 4px 6px rgba(194, 192, 192, 0.1);
        /* Sombra para resaltar */
    }

    /* Estilos para el contenedor del carrusel */
    .carousel-inner {
        position: relative;
        /* Necesario para posicionar los captions */
        height: 100%;
        /* Asegurar que ocupe toda la altura del carrusel */
    }


    .carousel-caption h5 {
       
        font-size: 24px;
        /* Tamaño del título */
        font-weight: bold;
        /* Texto en negrita */
        color: rgb(0, 0, 0);
        /* Color del texto */
    }

    .carousel-caption p {
        font-size: 16px;
        /* Tamaño de la descripción */
        color: rgb(0, 0, 0);
        /* Color del texto */
    }

    /* Asegurar que las imágenes no cubran los captions */
    .carousel-item img {
        z-index: 1;
        /* Las imágenes están detrás de los captions */
    }
}

#menu {
    display: block;
}

/* 6. Estilos adicionales para el menú desplegable */
.dropdown-menu {
    background-color: rgb(255, 255, 255) !important;
    border: 1px solid rgb(0, 0, 0);
}

.dropdown-item:hover {
    background-color: #919191 !important;
    /* Cambiar el color de fondo al pasar el mouse */
}

a:hover{
    background-color: #7c7d80;
    color: rgb(255, 255, 255);
    text-decoration-line: none;
}
/* 7. Asegurar que el texto sea blanco en todos los elementos */
.navbar-nav .nav-link,
.navbar-brand,
.dropdown-item {
    color: rgb(0, 0, 0) !important;
}

/* Contenedor flexible para el carrito */
.cart-container {
    display: flex;
    justify-content: flex-end;
    /* Alinea el carrito a la derecha */
    padding: 10px;
    background-color: rgb(255, 255, 255);
    /* Fondo negro */
}

/* Estilos para el ícono del carrito */
.cart-icon {
    position: relative;
    cursor: pointer;
}

/* Estilos para el número de productos */
.cart-count {
    position: absolute;
    top: -10px;
    /* Posición arriba del ícono */
    right: -10px;
    /* Posición a la derecha del ícono */
    background-color: red;
    /* Color de fondo del número */
    color: white;
    /* Color del texto */
    border-radius: 50%;
    /* Forma circular */
    padding: 5px 10px;
    /* Espaciado interno */
    font-size: 12px;
    /* Tamaño del texto */
    font-weight: bold;
    /* Texto en negrita */
}

/* Cambiar el color del ícono del carrito */
.cart-icon i {
    margin-right: 17px;
    font-size: 24px;
    width: 24px;
    height: 24px;
}



/* Efecto hover para las opciones del menú */
.navbar-nav .nav-link:hover {
    background-color: #333;
    /* Fondo gris oscuro al pasar el mouse */
    color: rgb(200, 200, 200) !important;
    /* Texto blanco */
    transition: background-color 0.3s ease;
    /* Transición suave */
}

/* Efecto hover para los elementos del menú desplegable */
.dropdown-item:hover {
    background-color: #333 !important;
    /* Fondo gris oscuro al pasar el mouse */
    color: rgb(200, 200, 200) !important;
    /* Texto blanco */
    transition: background-color 0.3s ease;
    /* Transición suave */
}

/* Estilos adicionales para el menú desplegable */
.dropdown-menu {
    background-color: rgb(255, 255, 255) !important;
    border: 1px solid rgb(0, 0, 0);
}

/* Asegurar que el texto sea blanco en todos los elementos */
.navbar-nav .nav-link,
.navbar-brand,
.dropdown-item {
    color: rgb(0, 0, 0) !important;
}


/* Asegurar que el carrusel ocupe el 80% del ancho y tenga una altura fija */
#carouselExampleCaptions {
    width: 80%;
    height: 400px;
    /* Altura fija */
    margin: 0 auto;
    /* Centrar el carrusel */
    color: rgb(255, 255, 255);
}

/* Ajustar las imágenes para que cubran el 100% del contenedor sin distorsionarse */
.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Cubrir el contenedor sin perder la proporción */
}

.cou
/* Opcional: Ajustar el contenedor interno del carrusel */
.carousel-inner {
    height: 100%;
    /* Asegurar que el contenedor interno ocupe toda la altura */
}


/* Estilos para el contenedor del carrusel */
.carousel-inner {
    position: relative;
    /* Necesario para posicionar los captions */
    height: 100%;
    /* Asegurar que ocupe toda la altura del carrusel */
}

/* Estilos para los captions del carrusel */
.carousel-caption {
    position: absolute;
    bottom: 20px;
    /* Fijar en la parte inferior del contenedor */
    left: 50%;
    /* Centrar horizontalmente */
    transform: translateX(-50%);
    /* Ajustar el centrado */
    text-align: center;
    background-color: rgba(255, 255, 255, 0.5);
    /* Fondo semi-transparente */
    padding: 10px 20px;
    /* Espaciado interno */
    border-radius: 5px;
    /* Bordes redondeados */
    z-index: 10;
    /* Asegurar que esté por encima de las imágenes */
    width: 100%;
    /* Ocupar todo el ancho del contenedor */
    max-width: 80%;
    /* Limitar el ancho máximo */
}

.carousel-caption h5 {
    font-size: 24px;
    /* Tamaño del título */
    font-weight: bold;
    /* Texto en negrita */
    color: rgb(0, 0, 0);
    /* Color del texto */
}

.carousel-caption p {
    font-size: 16px;
    /* Tamaño de la descripción */
    color: rgb(0, 0, 0);
    /* Color del texto */
}

/* Asegurar que las imágenes no cubran los captions */
.carousel-item img {
    z-index: 1;
    /* Las imágenes están detrás de los captions */
}

.product-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    max-width: 300px;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.product-image-container {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    position: relative;
    background: #f8f9fa;
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card:hover .product-image {
    transform: scale(1.05);
}

.product-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}

.product-title {
    font-size: 1.2em;
    font-weight: 600;
    color: #2d3748;
    margin: 0;
}

.product-description {
    font-size: 0.9em;
    color: #718096;
    line-height: 1.4;
    flex-grow: 1;
}

.product-price {
    font-size: 1.4em;
    font-weight: 700;
    color: #48bb78;
    text-align: right;
    margin-top: auto;
}

/* Efecto hover general de la card */
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1);
}