@font-face {
    font-family: 'Raleway-Medium';
    src: url('/public/font-raleway/Raleway-Medium.tff');
}

@font-face {
    font-family: 'Gobold';
    src: url('/font-gobold/Gobold Regular.otf') format('opentype');
}

.header-restaurant, .fixed-header2 {
    background-color: var(--header-background-color);
}

.topbar-restaurant{
    background-color: var(--header-background-color);
}

.logo img{
    max-height: 35px;
}

.logo2 img{
    max-height: 50px;
}

.logo-mobile img{
    max-height: 50px;
}

/* Estilos para el botón deshabilitado */
button[disabled] {
    opacity: 0.6; /* Reduce la opacidad del botón */
    cursor: not-allowed; /* Cambia el cursor del mouse */
    /* Agrega otros estilos de diseño según tus preferencias */
}

.main_menu>li>a{
    color: black;
}


.footer-restaurant{
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  line-height: 1.72;
  color: #737475;
  -webkit-font-kerning: auto;
  -webkit-font-smoothing: antialiased;
  -webkit-backface-visibility: visible !important;
  position: relative;
  overflow-x: hidden;

}

.brand-white{
    font-family: 'Montserrat-Regular';
    font-size: 8px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 3px; /* Adjust as necessary */
}

.eatsy-button{
    background-color: var(--boton-background-color);
    border-radius: 4px;
}

.eatsy-button:hover{
    background-color: var(--botonSecundario-background-color);
}

.main-logo {
    max-width: 100%; /* Ensure the logo image scales correctly */
}

.brand-white img {
    margin-left: 5px; /* Adjust spacing between text and image */
}


.dis-none {
    display: none;
}

.description-text.collapsed {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Número de líneas que deseas mostrar */
    -webkit-box-orient: vertical;
}

.description-text {
    font-size: 13px;
    font-family: 'system-ui';
    color: grey;
}

.leermas{
    font-size: 13px;
    text-decoration: underline;
    font-family: 'system-ui';
}

.block2-details {
    width: 100%; /* Define el ancho deseado para el contenido */
}

.bggrey {
    background-color: #EBEBEB;
    position: relative; /* Asegura que los pseudo-elementos funcionen */
}

.ilustraciones::before{
    content: '';
    position: absolute; /* Fija el fondo para que siempre se vea */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-image:
        url('/eccomerce/assets/icons/ilustracion1.svg'),
        url('/eccomerce/assets/icons/ilustracion2.svg'),
        url('/eccomerce/assets/icons/ilustracion3.svg'),
        url('/eccomerce/assets/icons/ilustracion4.svg'),
        url('/eccomerce/assets/icons/ilustracion5.svg'),
        url('/eccomerce/assets/icons/ilustracion6.svg'),
        url('/eccomerce/assets/icons/ilustracion7.svg'),
        url('/eccomerce/assets/icons/ilustracion8.svg'),
        url('/eccomerce/assets/icons/ilustracion9.svg'),
        url('/eccomerce/assets/icons/ilustracion10.svg'),
        url('/eccomerce/assets/icons/ilustracion11.svg'),
        url('/eccomerce/assets/icons/ilustracion12.svg'),
        url('/eccomerce/assets/icons/ilustracion13.svg'),
        url('/eccomerce/assets/icons/ilustracion14.svg'),
        url('/eccomerce/assets/icons/ilustracion15.svg'),
        url('/eccomerce/assets/icons/ilustracion16.svg'),
        url('/eccomerce/assets/icons/ilustracion17.svg'),
        url('/eccomerce/assets/icons/ilustracion18.svg'),
        url('/eccomerce/assets/icons/ilustracion19.svg'),
        url('/eccomerce/assets/icons/ilustracion20.svg'),
        url('/eccomerce/assets/icons/ilustracion21.svg'),
        url('/eccomerce/assets/icons/ilustracion22.svg');
    
    background-position: 
        5% 0%, 25% 5%, 55% 10%, 80% 15%,
        10% 12%, 35% 18%, 65% 22%, 90% 28%,
        15% 7%, 42% 3%, 70% 11%, 3% 19%,
        38% 6%, 60% 14%, 85% 17%, 23% 24%,
        48% 29%, 75% 33%, 12% 39%, 58% 9%,
        87% 2%, 30% 15%;
    
    background-repeat: no-repeat;
    background-size: 5rem, 5rem, 5rem, 5rem,
                     5rem, 5rem, 5rem, 5rem,
                     5rem, 5rem, 5rem, 5rem,
                     5rem, 5rem, 5rem, 5rem,
                     5rem, 5rem, 5rem, 5rem,
                     5rem, 5rem;
    
    opacity: 0.04; /* Mantiene la opacidad */
    z-index: 0; /* Asegura que quede detrás del contenido */

    filter: invert(1);
    pointer-events: none; 
}

.negrita{
    font-family: 'system-ui';
    font-weight: bold;
}

.nombre{
    font-family: 'system-ui';
    color: #222222;
    line-height: 1.5;
    font-weight: 500;
    font-size: 16px;
}

.precio-fixedproduct{
    font-size: 15px;
}

.descripcion {
    max-width: 300px; /* Ajusta el valor de acuerdo a tus necesidades */
    overflow: hidden;
    text-overflow: ellipsis; /* Esto añadirá puntos suspensivos (...) si el texto es demasiado largo para caber */
}

@media only screen and (max-width: 768px) {
    .solo-desktop {
        display: none !important;
    }
}

@media only screen and (min-width: 768px) {
    .solo-mobile {
        display: none !important;
    }
}

.tiempoRestante{
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 150;
}

.producto-imagen {
    max-width: 150px; /* ajusta este valor según tus necesidades */
    max-height: 150px; /* ajusta este valor según tus necesidades */
    border-radius: 4px; /* para agregar esquinas redondeadas si lo deseas */
}

.producto-card {
    display: grid;
    grid-template-columns: 50px 1fr auto; /* Columnas: imagen, información, precio */
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}


.producto-imagen {
    margin-right: 10px; /* Ajusta el margen a tu preferencia */
}

.producto-info {
    margin-left: 10px; /* Ajusta el margen a tu preferencia */
}


.producto-imagen img {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    margin-right: 20px;
    object-fit: cover;
}


.producto-imagen-carrito {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    margin-right: 20px;
    object-fit: cover;
}

.columna {
    padding: 0 10px;
}

.columna-imagen {
    flex: 0 0 30px; /* Tamaño fijo de 30px */
    height: 30px; /* Tamaño fijo de 30px */
    display: flex;
    align-items: center; /* Alinea verticalmente al centro */
}

.columna-detalles {
    flex: 1; /* Toma el espacio restante */
}

.columna-precio {
    flex: 0 0 auto; /* No crece ni se encoge */
    display: flex;
    justify-content: flex-end; /* Alinea el contenido al final */
    align-items: center; /* Alinea verticalmente al centro */
}

.producto-detalles {
    flex: 1;
}

.producto-nombre {
    color: black;
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.producto-cantidad {
    color: #888;
}

.eliminar-btn {
    color: #01000C;
    text-decoration: underline;
    font-size: 11px;
}

.agregarProducto {
    display: flex;
    justify-content: space-between;
    align-items: baseline; /* Alinea el precio y el nombre a la misma línea de base */
}

.product-name-text, .product-price-text {
    font-size: 14px;
}

.product-price-text {
    text-align: right; /* Alinea el precio a la derecha */
}

.resume-price-text{
    font-size: 20px;
}


.product-price {
    font-size: 15px;
    color: #333;
}

.precio-total {
    font-weight: bold;
    font-size: 18px;
}

.no-productos-msg {
    font-size: 16px;
    text-align: center;
    margin-top: 20px;
    color: #888;
}

/* Agregar una animación de desplazamiento a los elementos de la sección de productos */
.items-gal {
    animation: fadeInUp 0.5s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilo para los títulos */
h2, h3 {
    font-family: 'Roboto', sans-serif;
    color: #333;
}

/* Estilo para el texto regular */
p, span {
    font-family: 'Open Sans', sans-serif;
}

/* Añadir sombra y bordes a los elementos de la tarjeta */
.block2 {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #eee;
    border-radius: 5px;
}

.related-product .product-image img {
    max-width: 100%; /* Ajusta el ancho máximo de la imagen al contenedor */
    height: auto; /* Permite que la altura se ajuste automáticamente según el ancho */
}

.related-products .card {
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    vertical-align: top;
    width: 110px;
    height: 110px;
    margin-left: 10px;
}

.related-products .card:first-child {
    margin-left: 0;
}

.related-products .card-img-container {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* This creates the aspect ratio */
    overflow: hidden;
}

.related-products .card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-products .card-body {
    padding: 10px;
}

.propina .card {
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    vertical-align: top;
    width: 65px;
    margin-left: 10px;
}

.propina .card.selected .card-tamano,
.propina .card.selected .precio {
    color: #fff;
}

.precio {
    color: black;
}

.card.selected, .payment-method.selected {
    background-color: #e6f9e6;
    border: 2px solid #28a745;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.card-text{
    color: black;
}

.payment-methods-container {
    padding: 20px;
}

.payment-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
}

.payment-method {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: white;
}

.btn-sinregistrarme {
    background: none; /* Quita el fondo de botón */
    border: none; /* Quita el borde */
    color: #666666; /* Color del enlace */
    text-decoration: underline; /* Subraya el texto como un enlace */
    padding: 0; /* Elimina el padding para que sea como un link */
    font-size: 12px; /* Tamaño de fuente más pequeño */
    cursor: pointer; /* Cambia el cursor a pointer */
}

.btn-sinregistrarme:hover {
    color: #0056b3; /* Cambia el color al hacer hover, como un enlace */
    text-decoration: underline; /* Mantiene el subrayado en hover */
}

.method-icon {
    width: 50px;
    margin-right: 15px;
}

.method-info {
    display: flex;
    flex-direction: column;
}

.method-title {
    color: black;
    font-size: 16px;
    font-weight: bold;
}

.method-subtitle {
    font-size: 14px;
    color: #666;
}

.coupon-code {
    text-align: center;
    margin: 20px 0;
}

.coupon-code a {
    color: #007bff;
    text-decoration: none;
    font-size: 14px;
}

.total-amount {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 0;
    border-top: 1px solid #ccc;
}

.amount {
    color: #333;
}

.agregar-productoCategoria {
    width: 25px; /* Ancho del botón */
    height: 25px; /* Altura del botón */
    border: 1px solid #ccc; /* Borde gris */
    background-color: white; /* Fondo transparente */
    color: #333; /* Color del texto */
    font-size: 16px; /* Tamaño de la fuente */
    font-weight: bold; /* Negrita */
    cursor: pointer; /* Cursor al pasar */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s; /* Transición suave */

    /* Posicionamiento */
    position: absolute; /* Posicionamiento absoluto */
    bottom: 5px; /* Ajusta la posición desde la parte superior */
    right: 5px; /* Ajusta la posición desde el lado derecho */
    z-index: 1; /* Z-index para asegurar que esté encima de otros elementos */
    border-radius: 4px;
    line-height: 1;
}

.agregar-productoCategoria:hover {
    background-color: #f0f0f0; /* Color de fondo al pasar */
}

.btn-back-to-previous {
    position: absolute;
    top: 110px;
    left: 20px;
    z-index: 1000;
}

.back-arrow {
    display: inline-block;
    color: #333; /* Color del icono */
    font-size: 20px; /* Tamaño del icono */
    text-decoration: none; /* Quita la decoración de texto */
    transition: color 0.3s ease; /* Transición suave del color */
}

.back-arrow:hover {
    color: #666; /* Color del icono al pasar el cursor sobre él */
}

.symbol-btn-back-to-previous {
    background-color: #fff;
    color: #333;
    border: 1px solid #333;
    padding: 10px 10px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    display: inline-block;
}

.symbol-btn-back-to-previous:hover {
    background-color: #333;
    color: #fff;
}


#menuLateral.show-menu .btn-show-menu-mobile {
    display: none !important;
}


.categories-slider {
    background: white;
    overflow-x: auto; /* Habilita el desplazamiento horizontal si hay muchas categorías */
    overflow-y: hidden; /* Evita el desplazamiento vertical */
    white-space: nowrap; /* Evita que las categorías se rompan en varias líneas */
}

.container {
    margin: 0 auto;
}

/* Contenedor blanco para cada categoría */
.category-card {
    background-color: white;
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Título de la categoría */
.category-title {
    margin-bottom: 10px;
}

/* Contenedor de productos */
.products-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.category-items {
    display: flex;
    overflow-x: auto; /* Habilita el desplazamiento horizontal */
    overflow-y: hidden; /* Evita el desplazamiento vertical */
    scroll-behavior: smooth;
    padding-top: 15px;
    padding-bottom: 15px;
    scrollbar-width: none;
}

/* Estilos para cada elemento de categoría */
.category-item {
    margin-right: 10px;
    flex: 0 0 auto;
    display: inline-block; /* Para que los elementos estén en línea */
}

.category-item a {
    text-decoration: none;
    color: black;
    font-family: 'system-ui';
    line-height: inherit;
    font-size: 14px;
    letter-spacing: 0;
    padding: 5px 16px; /* Ajuste de padding para parecerse a los botones de la imagen */
    transition: all 0.3s ease;
    border-radius: 20px; /* Bordes redondeados para dar un aspecto de botón */
    border: 1px solid #272727;
    background-color: transparent; /* Fondo claro similar a los botones de la imagen */
    text-align: center; /* Centrar el texto dentro del botón */
    white-space: nowrap; /* Evitar que el texto se divida en varias líneas */
}

.category-item a.selected {
    align-items: center;
    gap: 6px; /* Espacio entre icono y texto */
    padding: 6px 12px;
    border: 1px solid #2F80ED; /* Color azul del borde */
    background-color: #EAF1FF; /* Azul muy claro de fondo */
    color: #2F80ED; /* Mismo azul para ícono y texto */
    border-radius: 20px; /* Bordes redondeados */
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.category-item a.selected i {
    margin-right: 8px; /* Espacio entre el icono y el texto */
    font-size: 18px; /* Tamaño del icono */
}


.fixed-categories {
    position: fixed;
    top: -100px; /* Cambia esta posición inicial para que aparezca desde fuera de la vista */
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
    transition: top 0.3s ease, box-shadow 0.3s ease; /* Transición suave para el movimiento y la sombra */
    padding-top: 15px;
}

.fixed-categories.show {
    top: 0; /* Cuando se despliega, vuelve a la posición top 0 */
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
}



.invisible{
    display: none;
}

.fixed-product {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.1); /* Ajusta los valores según sea necesario */
    padding: 10px 0;
}

.fixed-upselling {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.1); /* Ajusta los valores según sea necesario */
    padding: 5px 0;
    display: none;
}

.fixed-upselling.show-overlay {
    display: block; /* Muestra la capa de fondo cuando la sección está visible */
}

.fixed-upselling-overlay {
    background-color: rgba(0, 0, 0, 0.8); /* Fondo negro con opacidad */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999; /* Asegúrate de que el modal esté en la parte superior */
}

.fixed-upselling-background {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999; /* Asegúrate de que el modal esté en la parte superior */
}

/* Contenedor de confirmación */
.confirmation-box {
    display: flex;
    align-items: center;
}

/* Imagen redonda */
.confirmation-image .image-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
}

.confirmation-image img.img-rounded {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid;
    border-color:#28a745 ;
}

/* Ícono de tilde verde */
.confirmation-image .check-icon {
    position: absolute;
    bottom: -3px;
    right: -3px;
    font-size: 18px;
    color: #28a745;
}

/* Texto de confirmación */
.confirmation-text {
    font-size: 14px;
    color: #333;
}

.confirmation-text h5 {
    font-weight: bold;
    margin-bottom: 5px;
}

.confirmation-text p {
    margin: 0;
    font-size: 12px;
    color: #666;
}

@media (min-width: 768px){
.product-list {
    padding: 50px;
}
}

@media (max-width: 768px){
.product-list {
    padding: 15px;
}
}

.product-item {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.product-item-recommended{
    width: 110px;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
}

.product-details {
    flex: 1;
}

.product-name {
    margin: 0;
    font-size: 18px; /* Ajusta el tamaño de la fuente según tus preferencias */
    /*font-weight: bold;*/
}

.product-description {
    margin: 0;
    font-size: 14px; /* Ajusta el tamaño de la fuente según tus preferencias */
    color: #555;
}

.pendiente-entrega{
    align-items: center;
    justify-content: center;
    padding: 15px 0;
}

/*.search-and-cart-container {
display: flex;
align-items: center;
}

.search-form {
margin-right: 10px;
}

.search-input {
padding: 10px 40px 10px 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
}

.search-button {
position: relative;
background: none;
border: none;
cursor: pointer;
}

.search-button i {
color: #888;
font-size: 18px;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
}

.header-wrapicon2 img {
margin-right: 5px;
}*/

.header-container {
    display: flex;
    align-items: center;
    width: 100%; /* Asegura que ocupe todo el ancho disponible */
}

.search-form {
    flex-grow: 1; /* Permite que el formulario de búsqueda crezca para ocupar el espacio restante */
}

.search-container {
    position: relative;
    width: 100%; /* Asegura que el contenedor del campo de búsqueda ocupe todo el ancho disponible */
}

.search-input {
    padding: 5px 40px 5px 10px;
    border: 1px solid #ccc !important;
    border-radius: 20px;
    width: 100%; /* Haz que el campo de búsqueda ocupe todo el ancho disponible dentro de su contenedor */
    box-sizing: border-box;
    font-size: 14px;
}

.search-button {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
}

.search-button i {
    color: #ccc;
    font-size: 18px;
}

.header-wrapicon2 img {
    margin-right: 5px;
}

.wrap_header_mobile {
    align-items: center;
    justify-content: space-between;
    padding: 5px 20px; /* Ajusta el padding según tus necesidades */
    background-color: var(--header-background-color); /* Cambia el color de fondo según tu diseño */
    min-height: 0px;
}

.logo-mobile {
    margin: 0 auto; /* Centra el logo horizontalmente */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.textarea-container {
    margin-bottom: 20px;
}

.custom-textarea {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: vertical; /* Permite redimensionar verticalmente */
    outline: none; /* Elimina el contorno al hacer clic */
}

.custom-textarea::placeholder {
    color: #999; /* Color del texto de placeholder */
    font-style: italic; /* Estilo de fuente del placeholder */
}

.custom-textarea:focus {
    border-color: #66afe9; /* Cambia el color del borde al enfocar */
}

/* Estilos CSS */
.metodos-pago {
    margin-top: 20px;
}

.custom-radio {
    margin-bottom: 10px;
}

.custom-radio input[type="radio"] {
    display: none;
}

.custom-radio label {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    font-size: 16px;
    color: #333;
}

.custom-radio label:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #333;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 1px;
}

.custom-radio input[type="radio"]:checked + label:before {
    background-color: #333;
}

.custom-radio label:after {
    content: "";
    display: none;
    position: absolute;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    top: 4px;
    left: 5px;
}

.custom-radio input[type="radio"]:checked + label:after {
    display: block;
}

.form-control{
    border: 1px solid rgba(0,0,0,.15) !important;
}

.star {
    font-size: 24px;
    color: #ccc;
    cursor: pointer;
}

.star:hover,
.star.active {
    color: #fdd835; /* Amarillo */
}

.precio-ficha{
    font-size: 16px;
    color: black;
}

.precio-anterior{
    font-size: 13px;
    color: rgba(0, 0, 0, .55);
}

.relations {
    display: flex;
    justify-content: space-between;
}

.columna-1 {
    flex: 1;
}

.columna-2 {
    flex: 0 0 auto; /* Esto hace que la columna no crezca, manteniendo el checkbox a la derecha */
    text-align: right;
    margin-left: 10px; /* Ajusta el espacio entre el texto y el checkbox según sea necesario */
}

.checkbox-container {
    position: relative;
    width: 25px; /* Ancho del contenedor del checkbox */
    height: 25px; /* Altura del contenedor del checkbox */
    border: 1px solid #ccc; /* Borde gris */
    background-color: white; /* Fondo transparente */
    border-radius: 4px; /* Bordes redondeados */
}

.checkbox-container input[type="checkbox"] {
    position: absolute; /* Posición absoluta para ocultar el checkbox original */
    opacity: 0; /* Hacer el checkbox original transparente */
    cursor: pointer; /* Cursor al pasar sobre el contenedor */
}

.checkbox-container input[type="checkbox"]:checked + .checkmark {
    background-color: #28a745; /* Cambiar el fondo cuando el checkbox está marcado */
    border-radius: 4px; /* Bordes redondeados */
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white; /* Color del checkmark */
}

.title{
    font-family: 'system-ui';
    font-size: 18px;
    color: rgba(0,0,0,.9);
    line-height: 1.5;
    font-weight: 600;
}

.col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.agregar-producto{
    border-radius: 4px;
}

.swal-button {
    background-color: var(--boton-background-color);
    border-radius: 4px;
    font-family: Montserrat-Regular;
    font-size: 15px;
    color: white;
    text-transform: unset;
}

.product-carousel .slick-slide {
    border-bottom: none;
}

.no-productos-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 80vh; /* Ajusta esto según sea necesario */
}

.no-productos-svg {
    width: 100px; /* Ajusta el tamaño del SVG según sea necesario */
    height: auto; /* Ajusta el tamaño del SVG según sea necesario */
}

.no-productos-msg {
    margin-top: 20px; /* Ajusta el margen superior según sea necesario */
    text-align: center;
    font-size: 18px; /* Ajusta el tamaño de fuente según sea necesario */
}

.elegir-productos-btn {
    margin-top: 20px; /* Ajusta el margen superior del botón según sea necesario */
    padding: 10px 20px; /* Ajusta el relleno del botón según sea necesario */
    font-size: 16px; /* Ajusta el tamaño de fuente del botón según sea necesario */
    color: black;
    text-decoration: underline;
}

.product-carousel{
    display: -webkit-box;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 1200px;
}

@media (min-width: 576px) {
    .product-carousel {
        max-width:540px
    }
}

@media (min-width: 768px) {
    .product-carousel {
        max-width:720px
    }
}

@media (min-width: 992px) {
    .product-carousel {
        margin: 0 auto;
        margin-right: auto;
        margin-left: auto;
        width: 100%;
        max-width: 1200px;
    }
}

@media (min-width: 1200px) {
    .product-carousel {
        max-width: 1200px;
    }
}

.cartButtonModal{
    background-color: transparent;
    text-decoration: underline;
    color: black;
}

.modal-backdrop {
    background-color: #000;
    opacity: 0.9; /* Fondo más oscuro */
}

.progress-text{
    font-family: Montserrat-Regular;
    font-size: 11px;
}

.size-btnCant{
    width: 18px;
    height: 18px;
}

.size-inputCant{
    width: 20px;
}

.card-body {
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


.producto-card {
    position: relative;
    overflow: hidden;
}

.producto-card .delete-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100px;
    background-color: #FF4040;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    padding-right: 0 !important;
}

.swipeable.swiped .delete-overlay {
    transform: translateX(0);
}

.swipeable .producto-imagen,
.swipeable .producto-info,
.swipeable .producto-precio {
    transition: transform 0.3s ease;
}

.swipeable.swiped .producto-imagen,
.swipeable.swiped .producto-info,
.swipeable.swiped .producto-precio {
    transform: translateX(-100px);
}

.no-padding-right {
    padding-right: 0 !important;
}

/* Paginación Swiper */
.swiper-pagination {
    margin-bottom: 0px !important;
    margin-top: 10px;
}

/* Banner General */
.modern-banner, .swiper-container, .swiper-container-pedidos {
    position: relative;
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    border-radius: 7px;
}

@media (max-width: 768px){
    .modern-banner, .swiper-container, .swiper-container-pedidos {
        overflow: hidden;
    }
}

.modern-banner {
    border-radius: 7px;
}

/* Media query para pantallas más grandes (desktop) */
@media (max-width: 767px) {
    .modern-banner, .swiper-container, .swiper-container-pedidos {
        height: 180px;
    }

    .swiper-container, .swiper-container-pedidos {
        border-radius: 0px;
    }

    .swiper-slide {
        margin-right: 10px;
    }

    /* Estilo para el slider swiper */
    .swiper-slide {
        border-radius: 7px;
    }
}

@media (min-width: 1024px) {
.banner-desktop {
    height: 500px; /* Altura fija para escritorio */
    background-size: cover; /* La imagen cubre el área manteniendo su proporción */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita repeticiones */
    width: 100%; /* Asegura que ocupe todo el ancho del contenedor */
    overflow: hidden; /* Oculta cualquier desbordamiento */
}
}

@media (min-width: 768px) {
    .swiper-container{
        overflow: hidden;
    }
}

/* Gradiente en el fondo del banner */
.modern-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.card-swiper {
    width: 100%;
    max-width: 300px; /* Ajusta según el tamaño deseado */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

/* Contenido del banner */
.banner-content {
    z-index: 2;
    text-align: center;
    width: 100%;
    padding: 20px;
    color: white;
}

/* Título centrado del banner */
.banner-title {
    font-size: 3em; /* Título grande */
    font-weight: bold;
    margin: 0;
    line-height: 1.2;
    color: #ffffff; /* Color blanco puro */
    position: absolute;
    top: 50%; /* Centrado verticalmente */
    left: 50%; /* Centrado horizontalmente */
    transform: translate(-50%, -50%); /* Asegura que esté centrado en ambos ejes */
    z-index: 1000;
}

@media (max-width: 767px) {
    .banner-title {
        font-size: 1.8em; /* Ajuste del tamaño del título para mobile */
    }

    .banner-description {
        font-size: 1em; /* Ajuste del tamaño del título para mobile */
    }
}

/* Descripción del banner en la parte inferior */
.banner-description {
    font-size: 1.2rem; /* Tamaño mediano para la descripción */
    line-height: 1.5;
    color: #f1f1f1;
    position: absolute;
    bottom: 10px; /* Fija la descripción en la parte inferior */
    left: 50%;
    max-width: 90%;
    text-align: center;
    transform: translate(-50%, -50%);
    z-index: 1000;
}

/* Efecto de transición en el texto */
.banner-content .text-content {
    opacity: 1;
    transition: all 0.5s ease;
}

.topbar-restaurant {
    display: flex;
    justify-content: space-between; /* Logo a la izquierda, ícono a la derecha */
    align-items: center; /* Alinea verticalmente al centro */
}

.mi-cuenta-header {
    color: black;
}

.iti{
    display: block !important;
}

.alert-register {
    background-color: #fff3cd; /* Amarillo suave */
    color: #856404; /* Texto de color oscuro */
    border: 1px solid #ffeeba; /* Borde ligeramente más oscuro */
    padding: 15px;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.payment-reminder {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
}

.status-indicator-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.status-indicator-line {
    width: 100px;
    height: 6px;
    background-color: #f1f1f1;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

.status-indicator-line.completed {
    background-color: #28a745; /* Color verde para estados completados */
}

.status-indicator-line.current::before {
    content: '';
    position: absolute;
    left: -100px;
    width: 100px;
    height: 100%;
    background-color: #007bff;
    animation: move 1.5s linear infinite;
}

@keyframes move {
    0% {
        left: -100px;
    }
    100% {
        left: 100%;
    }
}

.status-text {
    margin-top: 10px;
    font-size: 12px;
    font-weight: bold;
    color: #333;
    text-align: center;
}

@media (min-width: 768px) {
    .form-cupon {
        display: flex;
        flex-direction: row;
    }
}

@media (max-width: 767px) {
    .form-cupon {
        display: flex;
        flex-direction: column;
    }
}

.empty-state {
    text-align: center;
    padding: 40px;
    margin-top: 50px;
    border-radius: 8px;
}
.empty-state__icon img {
    max-width: 150px;
    margin-bottom: 20px;
}
.empty-state__title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}
.empty-state__message {
    font-size: 16px;
    color: #777;
    margin-bottom: 20px;
}

.resumen-pedido {
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.resumen-titulo {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: left;
}

.resumen-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 16px;
}

.resumen-item:not(:last-child) {
    border-bottom: 1px solid #e0e0e0;
}

.ver-pedido{
    height: 45px;
}

/* Cada columna dentro del botón */
.button-column {
    flex: 1;
    text-align: center;
}

.cart-container {
    position: relative;
    display: inline-block;
}

.cart-icon {
    width: 24px; /* Tamaño del ícono del carrito */
    height: 24px;
    vertical-align: middle;
}

.cart-count {
    position: absolute;
    top: 0px;
    left: 27px;
    font-size: 12px; /* Tamaño del número */
    color: white;
    font-weight: bold;
    background: none; /* Sin fondo */
}

@media only screen and (max-width: 768px) {
    .cart-count {
       background-color: red;
       border-radius: 50%; /* Hace el badge circular */
       width: 20px; /* Ancho del badge */
       height: 20px; /* Alto del badge */
       display: flex; /* Usa flexbox para centrar el contenido */
       justify-content: center; /* Centra el número horizontalmente */
       align-items: center; /* Centra el número verticalmente */
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra opcional */
       z-index: 10; /* Asegura que el badge esté encima de otros elementos */
       left: 20px;
       top: -5px;
   }

}

.border-bottom {
    border-bottom: 1px solid #ddd;
}

@keyframes fall {
  0% {
    transform: translateY(0);
    opacity: 1;
}
100% {
    transform: translateY(100vh);
    opacity: 0;
}
}

#emoji-container div {
  animation: fall ease-in-out 3s;
}

/* Contenedor del banner */
.coffee-banner {
  display: flex !important;
  align-items: center; /* Asegura que ambos lados ocupen todo el alto */
  background: linear-gradient(90deg, #ffedd5, #ffc8a3);
  border-radius: 12px; /* Bordes redondeados generales */
  overflow: hidden;
  margin: auto;
  text-align: left;

}

/* Imagen a la izquierda */
.coffee-banner-image {
  flex: 0 0 35%; /* Ocupa el 35% del ancho */
  height: 100%; /* Ocupa todo el alto */
  clip-path: ellipse(100% 100% at 100% 50%); /* Efecto curvado en el lado derecho */
  overflow: hidden;
}

.coffee-banner-image img {
  height: 100%;
  width: 100%;
  object-fit: cover; /* Ajusta la imagen al contenedor */
}

.llevas-ahorrado {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px; /* Opcional: agrega bordes redondeados */
    clip-path: ellipse(100% 100% at 100% 50%);
    overflow: hidden;
    height: 100%;
    width: 100px;
}

.llevas-ahorrado img {
    max-width: 100%; /* Asegura que la imagen se ajuste al contenedor */
    max-height: 100%;
    object-fit: cover; /* Mantiene las proporciones de la imagen */
    padding-right: 10px;
}

/* Contenido a la derecha */
.coffee-banner-content {
  flex: 1; /* Ocupa el resto del espacio */
  padding: 15px 10px;
}

.coffee-title {
  color: #6b4226;
  margin: 0;
}

@media (max-width: 768px) { /* Ajusta el valor del ancho si es necesario */
  .coffee-title {
    font-size: 18px;
}
}

.coffee-subtitle {
  font-size: 16px;
  color: #3e3e3e;
  padding: 10px 0;
}

.coffee-subtitle strong {
  color: var(--boton-background-color);
}

/* Barra de progreso */
.coffee-progress {
  margin: 10px 0;
}

.progress-bar {
  background: #f0f0f0;
  border-radius: 20px;
  height: 12px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.progress-fill {
    background: var(--boton-background-color);
    height: 100%;
    border-radius: 20px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: width 0.3s ease-in-out;
}

.progress-point {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  background: white;
  border: 2px solid var(--botonSecundario-background-color);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.progress-text {
  font-size: 12px;
  color: #6b4226;
  margin-top: 5px;
}

/* Botón de acción */
.coffee-button {
  display: inline-block;
  background: #ff7043;
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  transition: background 0.3s ease;
}

.coffee-button:hover {
  background: #e64a19;
}

/* Aplica el efecto de brillo reducido a los slides previos y siguientes */
.swiper-slide-prev, .swiper-slide-next {
    transition: filter 0.8s ease-in-out; /* Transición suave al cambiar de slide */
}

/* Opcional: Efecto hover para dar un brillo adicional */
.swiper-slide-prev:hover, .swiper-slide-next:hover {
    filter: brightness(1); /* Vuelve al brillo normal al pasar el mouse */
}

.outlined {
    -webkit-text-stroke: 1px #000; /* Color del contorno */
    color: transparent;           /* Relleno transparente */
}

.wrap-pic-w {
    position: relative;
    flex-shrink: 0;
}

/* Botón del corazón */
.btn-favorite {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: white; /* Fondo blanco */
    color: #888; /* Color inicial del corazón */
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra */
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-favorite i {
    font-size: 18px; /* Tamaño del corazón */
}

/* Cambia el color cuando se selecciona */
.btn-favorite.active, .btn-favorite.active i {
    -webkit-text-stroke: transparent;
    color: #e74c3c; /* Rojo */
    background-color: #fff5f5; /* Fondo ligeramente rosado */
}

.btn-favorite:hover {
    color: #e74c3c;
    transform: scale(1.1); /* Efecto de agrandamiento */
}

/* Botón del corazón */
.btn-share {
    position: absolute;
    top: 180px;
    right: 10px;
    background-color: white; /* Fondo blanco */
    color: #888; /* Color inicial del corazón */
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra */
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-share i {
    font-size: 18px; /* Tamaño del corazón */
}

.btn-share:hover {
    transform: scale(1.1); /* Efecto de agrandamiento */
}

alclub {
    font-family: 'Gobold', sans-serif;
    font-weight: normal;
    font-size: 24px; /* Ajusta el tamaño según necesites */
    display: block; /* Asegura que se comporte como un bloque */
    text-align: center; /* Opcional: centra el texto */
}

.whatsapp-icon {
  position: fixed;
  bottom: 72px;
  right: 20px;
  z-index: 999;
}

.whatsapp-icon img {
  width: 50px;
  height: 50px;
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.4));
  transition: transform 0.2s ease;
}

.whatsapp-icon:hover img {
  transform: scale(1.1);
}

.fade-out {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

/* Enhanced Experience Section */
.experience-container {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 15px; /* Ensure equal margin on both sides for mobile */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    box-sizing: border-box; /* Ensure padding and border are included in the element's width */
    max-width: calc(100% - 30px); /* Prevent the container from exceeding the screen width */
    overflow: hidden; /* Prevent content from overflowing */
}

@media (min-width: 768px) {
    .experience-container {
        padding: 20px 30px; /* Match padding with "Pedidos pendientes de entrega" */
        margin: 20px auto; /* Center the container on desktop */
        max-width: 720px; /* Limit the width for better alignment */
    }
}

.experience-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.experience-balance {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.balance-label {
    font-size: 14px;
    color: #555;
}

.balance-amount {
    display: flex;
    align-items: center;
    font-size: 28px;
    font-weight: bold;
    color: #333;
}

.monto-btn:hover {
    background-color: #f5f5f5;
    border-color: #aaa;
}

.currency-symbol {
    margin-right: 5px;
    font-size: 20px;
}

.movements-link {
    font-size: 14px;
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.movements-link:hover {
    color: #0056b3;
    text-decoration: underline;
}

.experience-actions {
    display: flex;
    justify-content: center;
}

.action-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    transition: transform 0.3s ease;
}

.action-button:hover {
    transform: scale(1.05);
}

.action-icon {
    width: 60px;
    height: 60px;
    background-color: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.action-icon img {
    width: 30px;
    height: 30px;
}

.action-label {
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    color: #555;
}

/* Cards de acceso rápido sobre el banner */
@media (min-width: 768px) {
    .feature-card {
        transition: box-shadow 0.2s;
    }
    .feature-card:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.13);
        transform: translateY(-2px) scale(1.03);
    }
}

/* Flechas Swiper personalizadas */
.swiper-button-prev, .swiper-button-next {
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-radius: 50%;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    top: 50% !important;
    transform: translateY(-50%);
    z-index: 10;
    opacity: 1 !important;
}
.swiper-button-prev {
    left: -24px !important;
}
.swiper-button-next {
    right: -24px !important;
}
.swiper-button-prev:after,
.swiper-button-next:after {
    display: none !important;
}

/* Banner desktop ocupa todo el ancho y cards superpuestas */
@media (min-width: 768px) {
    .banner-desktop-wrapper {
        width: 100vw;
        min-height: 420px;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        overflow: visible;
        background: transparent;
        z-index: 1;
    }
    .banner-desktop-swiper {
        width: 100vw !important;
        min-height: 420px;
        height: 420px;
        max-height: 480px;
        border-radius: 0;
        margin-bottom: 0;
    }
    .banner-desktop-swiper .modern-banner,
    .banner-desktop-swiper .swiper-slide {
        min-height: 420px;
        height: 420px;
        border-radius: 0;
    }
    .banner-feature-cards-wrapper {
        position: absolute;
        left: 0;
        right: 0;
        top: 60%;
        width: 100vw;
        display: flex;
        justify-content: center;
        z-index: 10;
        pointer-events: none;
    }
    .banner-feature-cards-wrapper > .container {
        pointer-events: all;
        margin: 0 auto;
        max-width: 1100px;
        background: rgba(255,255,255,0.98);
        border-radius: 16px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.10);
        padding: 24px 16px 16px 16px;
    }
    .banner-feature-cards {
        gap: 32px !important;
        pointer-events: all;
    }
    .feature-card {
        min-width: 200px;
        max-width: 240px;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.10);
        padding: 28px 18px 20px 18px;
        margin: 0 8px;
        position: relative;
        z-index: 11;
        transition: box-shadow 0.2s, transform 0.2s;
    }
    .feature-card:hover {
        box-shadow: 0 8px 24px rgba(0,0,0,0.16);
        transform: translateY(-4px) scale(1.04);
    }
    /* Elimina margen superior del carrusel tradicional en desktop */
    .container.shadow-sm.border-0 {
        margin-top: 0 !important;
    }
}

/* Gradiente de fondo mejorado para desktop */
@media (min-width: 768px) {
    body {
        /* Puedes ajustar los colores para que coincidan con tu referencia */
        background-repeat: no-repeat;
        min-height: 100vh;
    }
}

/* Banner desktop con gradiente propio */
@media (min-width: 768px) {
    .banner-desktop-swiper,
    .banner-desktop-swiper .modern-banner,
    .banner-desktop-swiper .swiper-slide {
        border-radius: 0;
        min-height: 420px;
        height: 420px;
        max-height: 480px;
    }
}

@media (min-width: 768px) {
    .banner-feature-cards-wrapper {
        position: absolute;
        left: 0;
        right: 0;
        top: 60%;
        width: 100vw;
        display: flex;
        justify-content: center;
        z-index: 10;
        pointer-events: none;
    }
    .banner-inspirado-transparente {
        pointer-events: all;
        margin: 0 auto;
        max-width: 1100px;
        border-radius: 16px;
        /* Sin fondo ni sombra */
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 0 0 0;
    }
    .banner-inspirado-transparente .title {
        color: #222;
        font-weight: bold;
        background: transparent;
    }
    .banner-inspirado-transparente .product-carousel {
        background: transparent;
    }
    /* Opcional: las cards pueden tener un leve fondo blanco translúcido si quieres contraste */
    .banner-inspirado-transparente .card {
        background: rgba(255,255,255,0.85);
        /* O usa background: transparent; para que sean 100% transparentes */
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }
    /* Elimina margen superior del carrusel tradicional en desktop */
    .container.shadow-sm.border-0 {
        margin-top: 0 !important;
    }
}

    .banner-desktop-swiper,
    .banner-desktop-swiper .modern-banner,
    .banner-desktop-swiper .swiper-slide {
        min-height: 540px;
        height: 540px;
        max-height: 600px;
        /* Fondo base: gradiente horizontal */
        border-radius: 0;
        position: relative;
        /* Elimina cualquier overflow oculto */
        overflow: visible;
    }

    /* Gradiente inferior para el banner */
    .banner-gradient-overlay::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 180px;
        pointer-events: none;
        z-index: 2;
        /* Ajusta el color final para que combine con el fondo general */
    }
    .banner-gradient-overlay > * {
        position: relative;
        z-index: 3;
    }

@media (min-width: 768px) {
    .banner-desktop-swiper,
    .banner-desktop-swiper .modern-banner,
    .banner-desktop-swiper .swiper-slide {
        min-height: 540px;
        height: 540px;
        max-height: 600px;
        /* ...existing code... */
    }
    .banner-feature-cards-wrapper {
        /* ...existing code... */
        top: 68%; /* antes 60%, ahora más abajo para evitar que se pise */
    }
    .banner-inspirado-transparente {
        /* ...existing code... */
        margin-bottom: 24px; /* agrega margen inferior para separar del contenido de abajo */
    }
}

@media (min-width: 768px) {
    .ilustraciones.bggrey.margin-top-inspirado {
        margin-top: 180px !important;
    }
}

/* Overlay gradiente inferior para el banner, sin tapar la imagen */
.banner-gradient-overlay {
    position: relative;
}
.banner-gradient-overlay::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px; /* Menor altura para mobile, puedes ajustar */
    pointer-events: none;
    z-index: 2;
}
.banner-gradient-overlay > * {
    position: relative;
    z-index: 3;
}

/* Banner desktop: NO background ni background-color, solo la imagen de fondo desde el HTML */
@media (min-width: 768px) {
    /* ...existing code... */
    .banner-gradient-overlay::after {
        height: 180px; /* Mayor altura para desktop */
    }
    /* ...existing code... */
}

@media (min-width: 768px) {
    .swiper-container,
    .banner-desktop-swiper {
        overflow: hidden !important;
    }
    .swiper-wrapper {
        display: flex !important;
        width: 100% !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .swiper-slide {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 768px) {
    .desktop-header-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 0;
    }
    .logo2 {
        min-width: 140px;
        max-width: 180px;
        display: flex;
        align-items: center;
        margin-left: 20px;
    }
    .desktop-categories-nav {
        flex: 1 1 auto;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        scrollbar-width: none;
        scrollbar-color: #e0e0e0 #fff;
        padding: 0 10px;
        margin: 0 10px;
    }
    .desktop-categories-list {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem;
        margin: 0;
        padding: 0;
        list-style: none;
        min-width: max-content;
    }
 
    .desktop-categories-list > li > ul.sub_menu > li > a:hover {
        background: #f7f7f7;
        color: var(--boton-background-color);
    }
    .desktop-profile {
        min-width: 120px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-right: 20px;
    }
}

.total-card-custom {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    border: none;
  }
  
  .total-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    margin-right: 10px;
  }

/* Quitar bordes y sombra al banner */
.modern-banner, .swiper-container, .swiper-container-pedidos {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

@media (min-width: 1024px) {
.banner-desktop {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
}
}

.quick-action-btn {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1.5px solid #e0e0e0;
    border-radius: 16px;
    padding: 1px 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    font-family: 'system-ui', sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #222;
    text-decoration: none;
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
    min-width: 160px;
    justify-content: center;
    gap: 10px;
}
.quick-action-btn:hover {
    background: #f7f7f7;
    border-color: #bdbdbd;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
.quick-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 10px;
}
.quick-action-icon img {
    width: 20px;
    height: 20px;
}
.quick-action-label {
    font-size: 15px;
    color: #222;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
}