/* Base y Tipografía */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --- CAMBIOS EN CSS PARA EL FONDO DE MÚLTIPLES ICONOS DE TIENDA SUTILES --- */

body {
    font-family: 'Poppins', sans-serif;
    color: #333;
    line-height: 1.5;
    overflow-x: hidden;
    background-color: #f5f5f5; /* Color base muy claro */

    /* Fondo con patrón de múltiples iconos dispersos y sutiles (Versión 3.0) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3C!-- Nota: Aumentamos el viewBox a 250x250 para más dispersión y más iconos --%3E%3C!-- Color y opacidad base para todos los iconos --%3E%3Cdefs%3E%3Cstyle%3E.icon%7Bfill:%2367C2A9;fill-opacity:0.1;%7D%3C/style%3E%3C/defs%3E%3C!-- ICONOS DE COMPRAS BASE (EXISTENTES) --%3E%3C!-- Carrito --%3E%3Cpath class='icon' transform='translate(15,15) scale(0.6)' d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-1.78-3.5L14.7 14h-5.23L4.25 4H2v2h2l3.6 7h7.8L17 8H6V6h11.23l2.85 6.13c.27.57.17 1.25-.26 1.74l-3.52 4c-.26.29-.63.43-1.01.43H9.28l.72-2h3.52l2.36-2.5z'/%3E%3C!-- Precio --%3E%3Cpath class='icon' transform='translate(80,25) scale(0.6)' d='M19.49 10.45l-5.6-5.6C13.56 4.31 12.8 4 12 4c-.8 0-1.56.31-2.12.87L4.87 9.88c-.62.62-1.09 1.4-.41 2.08L12 20.13c.68.68 1.46.21 2.08-.41l4.99-4.99c.56-.56.87-1.32.87-2.12 0-.8-.31-1.56-.83-2.16zM13 15c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z'/%3E%3C!-- Corazón --%3E%3Cpath class='icon' transform='translate(50,55) scale(0.6)' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C!-- Teléfono --%3E%3Cpath class='icon' transform='translate(130,75) scale(0.6)' d='M17 1H7c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm-2 16H9v-2h6v2zm3-4H6V6h12v7z'/%3E%3C!-- Regalo --%3E%3Cpath class='icon' transform='translate(160,30) scale(0.6)' d='M20 12c0-1.1-.9-2-2-2h-3V6c0-1.1-.9-2-2-2H7c-1.1 0-2 .9-2 2v4H2c-1.1 0-2 .9-2 2v2c0 1.1.9 2 2 2h3v4c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2v-4h3c1.1 0 2-.9 2-2v-2zm-8-6h4v4h-4V6zM7 6h4v4H7V6zm0 14v-4h4v4H7zm7 0h4v-4h-4v4z'/%3E%3C!-- Diamante --%3E%3Cpath class='icon' transform='translate(35,140) scale(0.6)' d='M12 1L2 12l10 11 10-11L12 1zm0 17.5L5.4 12l6.6-7.5L18.6 12l-6.6 6.5z'/%3E%3C!-- Tarjeta --%3E%3Cpath class='icon' transform='translate(100,165) scale(0.6)' d='M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4V8h16v10zm-6-3h2v-2h-2v2zm-3 0h2v-2h-2v2z'/%3E%3C!-- T-Shirt --%3E%3Cpath class='icon' transform='translate(165,120) scale(0.6)' d='M12 3L7 5v5l-3 3v2h2v7h8v-7h2v-2l-3-3V5l-5-2zm0 2.25L14.4 7H9.6L12 5.25zM15 11v6H9v-6l-2 2v-1l3-3h4l3 3v1l-2-2z'/%3E%3C!-- Zapatos --%3E%3Cpath class='icon' transform='translate(110,180) scale(0.6)' d='M22 10h-6c-1.66 0-3 1.34-3 3v2h1v-2c0-.55.45-1 1-1h5.17l-.59 2.37c-.31 1.25-1.4 2.13-2.69 2.13H15c-1.66 0-3 1.34-3 3v2h2v-2c0-.55.45-1 1-1h4.17l-1.07 4.29c-.31 1.25.75 2.5 2 2.5h.38l1.41-5.63L22 18V10zm-6.84 5l.59-2.37c.31-1.25 1.4-2.13 2.69-2.13H21v2h-4.84z'/%3E%3C!-- Cesta --%3E%3Cpath class='icon' transform='translate(25,95) scale(0.6)' d='M17.2 4H6.8l-1.6 4h13.6l-1.6-4zM6 10v9c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2v-9H6zm11-6.7C17.7 2.5 17.5 2 17 2H7c-.5 0-.7.5-.2 1.3L5.4 7.5c-.4.5-.4 1.1 0 1.6l2 3.8c.4.5 1 .8 1.6.8h6c.6 0 1.2-.3 1.6-.8l2-3.8c.4-.5.4-1.1 0-1.6L17.5 3.3z'/%3E%3C!-- SALE --%3E%3Cpath class='icon' transform='translate(110,15) scale(0.6)' d='M18.99 11.5L22 15l-3.01 3.5L16 15l2.99-3.5zM9 11h2v2H9zM7 11h2v2H7zM5 11h2v2H5zM21 15c0-1.66-1.34-3-3-3h-4V8h7V6h-7V4h-2v2h-2v2h-2v2H3c-1.66 0-3 1.34-3 3s1.34 3 3 3h4v4h2v-4h2v4h2v-4h4c1.66 0 3-1.34 3-3z'/%3E%3C!-- ICONOS NUEVOS (Comida, Ropa, Electrodomésticos) --%3E%3C!-- CARNE (Cuchillo y Tenedor) --%3E%3Cpath class='icon' transform='translate(15,200) scale(0.6)' d='M18.5 7h-7c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5h7c.83 0 1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-5 4c0-.55.45-1 1-1h1c.55 0 1 .45 1 1v1c0 .55-.45 1-1 1h-1c-.55 0-1-.45-1-1v-1zm1 5h-1c-.55 0-1-.45-1-1v-1c0-.55.45-1 1-1h1c.55 0 1 .45 1 1v1c0 .55-.45 1-1 1z'/%3E%3C!-- LECHE (Cartón) --%3E%3Cpath class='icon' transform='translate(60,200) scale(0.6)' d='M16 2.01L5 2c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V4c0-1.1-.9-1.99-2-1.99zM16 20H5V4h11v16zm-5-10V7h2l-2-3-2 3h2v3H8v2h7v-2h-4z'/%3E%3C!-- PAN (Baguette) --%3E%3Cpath class='icon' transform='translate(190,195) scale(0.6)' d='M10 20c-3.31 0-6-2.69-6-6V6c0-3.31 2.69-6 6-6h4c3.31 0 6 2.69 6 6v8c0 3.31-2.69 6-6 6h-4zm0-2c2.21 0 4-1.79 4-4V6c0-2.21-1.79-4-4-4h-4c-2.21 0-4 1.79-4 4v8c0 2.21 1.79 4 4 4h4z'/%3E%3C!-- QUESO --%3E%3Cpath class='icon' transform='translate(200,60) scale(0.6)' d='M18 7c0-2.76-2.24-5-5-5s-5 2.24-5 5v12h10V7zM8 7c0-2.21 1.79-4 4-4s4 1.79 4 4v2H8V7zm10 10H8v-6h10v6z'/%3E%3C!-- Sayas/Vestidos (Dress) --%3E%3Cpath class='icon' transform='translate(210,140) scale(0.6)' d='M12 2c-2.76 0-5 2.24-5 5v1h2v-1c0-1.65 1.35-3 3-3s3 1.35 3 3v1h2v-1c0-2.76-2.24-5-5-5zm-5 6v12h10V8H7zM17 20H7v-2h10v2z'/%3E%3C!-- Pullover (Hoodie) --%3E%3Cpath class='icon' transform='translate(210,20) scale(0.6)' d='M16 5c-1.1 0-2 .9-2 2v1h2V7c0-.55.45-1 1-1h1v-1H16zM8 5h-1v1h1c.55 0 1 .45 1 1v1h2V7c0-1.1-.9-2-2-2zM12 18H8v-7h8v7h-4zM20 7v14H4V7h16zm-2 2H6v10h12V9z'/%3E%3C!-- Lencería (Underwear) --%3E%3Cpath class='icon' transform='translate(175,210) scale(0.6)' d='M12 21c-2.76 0-5-2.24-5-5 0-2.76 2.24-5 5-5s5 2.24 5 5c0 2.76-2.24 5-5 5zm-3-5c0-1.65 1.35-3 3-3s3 1.35 3 3-1.35 3-3 3-3-1.35-3-3zM7 6v2h10V6h-10zM12 0L8 4h8L12 0z'/%3E%3C!-- Pomo de Agua/Bebida (Bottle) --%3E%3Cpath class='icon' transform='translate(15,45) scale(0.6)' d='M16 4H8C5.79 4 4 5.79 4 8v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8c0-2.21-1.79-4-4-4zm-2 15h-4v-1h4v1zm2-3H8v-2h8v2zm0-4H8v-2h8v2zm0-4H8V7h8v2z'/%3E%3C!-- Electrodoméstico (Microondas/Horno) --%3E%3Cpath class='icon' transform='translate(210,90) scale(0.6)' d='M20 9H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V11c0-1.1-.9-2-2-2zM4 22V11h16l-.01 11H4zm5-7h6v2H9zM22 6H2V4h20v2z'/%3E%3C!-- Pollo (Muslo) --%3E%3Cpath class='icon' transform='translate(170,70) scale(0.6)' d='M14 20c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2v-4c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2v4zm7-9L16 6l-5 5h3c.55 0 1 .45 1 1s-.45 1-1 1h-2c-.55 0-1-.45-1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1v2c0 1.65 1.35 3 3 3h2c1.65 0 3-1.35 3-3v-2z'/%3E%3C/svg%3E");

    /* Repite el patrón completo en toda la superficie */
    background-repeat: repeat;

    /* Define el tamaño de cada "baldosa" del patrón.
       Aumentamos el tamaño para que los iconos se vean más dispersos. */
    background-size: 250px 250px; /* El mismo tamaño que el viewBox */

    /* Opcional: Hace que el fondo se vea bien al hacer scroll */
    background-attachment: fixed;
}
body.modal-open {
    overflow: hidden;
    padding-right: 15px; /* Para compensar la barra de scroll si existe y evitar el "jump" del layout */
}
.container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 15px;
}
/* --- MEDIA QUERY para móviles de menos de 768px (Marquesina y Sticky Cart) --- */
@media (max-width: 768px) {
    /* Marquesina arrastrable */
    .nav-tabs-marquee-container {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 5px;
        display: block;
        /* AÑADIDO: Propiedades de mejora para el arrastre y UX */
        -webkit-overflow-scrolling: touch; /* Suavidad en iOS */
        cursor: grab; /* Indica que es arrastrable */
        overscroll-behavior-x: contain; /* Evita que el arrastre afecte el scroll de la página */
    }

    .nav-tabs {
        animation: none; /* Desactiva animación */
        min-width: max-content;
    }
    .nav-tabs-duplicate {
        display: none; /* Eliminar duplicado cuando se usa arrastre */
    }
    .nav-item {
        scroll-snap-align: center; /* Detener en el centro para arrastre */
        flex-shrink: 0;
    }

    /* Sticky Cart más pequeño en móvil */
    .sticky-cart-container {
        bottom: 15px;
        right: 15px;
    }
    .cart-btn.sticky-btn {
        width: 50px;
        height: 50px;
        font-size: 1.3em;
    }
    .cart-btn:hover
    {
     transform: scale(1.1);
    }


    .cart-count-sticky {
        top: -2px;
        right: -2px;
        font-size: 0.7em;
        padding: 2px 5px;
        min-width: 18px;
    }

    /* Header en móvil */
    .header-content {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    .search-bar {
        order: 3;
        width: 100%;
        margin: 10px 0 0;
    }
    .header-icons {
        order: 2;
        width: 100%;
        justify-content: space-between;
    }
}
/* ... (Resto de estilos del modal y otros se mantienen) ... */
/* Colores Clave */
:root {
    --nina-green: #67C2A9; /* Verde Corporativo */
    --nina-dark: #2c3e50; /* Azul oscuro para texto principal */
    --price-color: #e74c3c; /* Rojo/Naranja de Énfasis (Descuentos) */
    --shadow-subtle: rgba(0,0,0,0.08); /* Sombra sutil */
    --primary-text: #444;
}

/* --- HEADER --- */
.main-header {
    background-color: #fff;
    padding: 15px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/*----Estilo del menu ---*/
.promo-banner{
        background: #111; /* ajusta el color del banner si quieres */
        padding: 14px 0;
        border-radius: 10px; /* opcional */
        margin-bottom:-10px;
    }

    .promo-menu{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px; /* espacio entre ítems */
        padding: 0 10px;
    }

    .promo-menu a{
        color: #ffffff;           /* letra blanca */
        font-size: 1.1rem;       /* más grande */
        font-weight: 700;        /* negrita fuerte */
        text-decoration: none;
        letter-spacing: .2px;
        padding: 10px 14px;      /* “botón” suave */
        border-radius: 8px;
        transition: all .2s ease;
    }

    .promo-menu a:hover{
        color: #ffffff;
        background: rgba(255,255,255,.12);
        transform: translateY(-1px);
    }

    .promo-menu .sep{
        color: rgba(255,255,255,.6);
        font-weight: 700;
        margin: 0 2px;
        user-select: none;
    }

    /*-------End Estilo del menu----*/

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

.logo {
    height: 300px;
    width: auto;
}

.search-bar {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 25px;
    overflow: hidden;
    flex-grow: 1;
    max-width: 500px;
    margin: 0 25px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.search-bar input {
    border: none;
    padding: 10px 18px;
    outline: none;
    width: 100%;
    font-size: 0.95em;
}

.search-bar button {
    background-color: var(--nina-green);
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    color: #fff;
    font-size: 1.1em;
    transition: background-color 0.2s;
}
.search-bar button:hover {
    background-color: #4a9e86;
}

/* Iconos y Selector de Moneda Global */
.header-icons {
    display: flex;
    gap: 20px;
    align-items: center;
    position: relative; /* Para el contador del carrito */
}

.currency-selector {
    display: flex;
    align-items: center;
    gap: 5px;
}
.currency-selector i {
    color: var(--nina-green);
    font-size: 1.1em;
}

.currency-selector select {
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 0.9em;
    background-color: #fff;
    cursor: pointer;
    font-weight: 500;
    color: var(--primary-text);
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px;
    padding-right: 25px; /* Espacio para la flecha custom */
}

.header-icons button {
    background: none;
    border: none;
    color: var(--nina-dark);
    cursor: pointer;
    padding: 5px;
    font-size: 1.4em;
    transition: color 0.2s;
}
.header-icons button:hover {
    color: var(--nina-green);
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -10px;
    background-color: var(--price-color);
    color: #fff;
    font-size: 0.75em;
    font-weight: 700;
    border-radius: 50%;
    padding: 2px 6px;
    min-width: 20px;
    text-align: center;
    line-height: 1.4;
    display: none; /* Oculto por defecto, se muestra con JS */
}

/* --- NAV Y MARQUESINA INFINITA --- */
.main-nav {
    background-color: #fff;
    padding: 0;
    /*margin-bottom: 40px;*/
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.promo-banner {
    /* Degradado de la imagen original */
    background: linear-gradient(to right, #e6b3b3, #b386c2, #7cc2b0);
    color: #fff;
    text-align: center;
    padding: 12px 0;
    border-radius: 0;
    font-size: 0.9em;
}
.promo-banner h1 {
    font-size: 1.4em;
    font-weight: 600;
    margin: 0;
}
.nav-tabs-marquee-container.active-drag {
    cursor: grabbing !important; /* Cursor de "agarrando" mientras se arrastra */
}
.nav-tabs-marquee-container {
    cursor: grab; /* Cursor de "agarre" cuando está disponible para arrastre */
}
/* Contenedor de la Marquesina */
.nav-tabs-marquee-container {
   overflow-x: scroll; /* Cambiado a scroll para permitir la barra (aunque se ocultará) */
    overflow-y: hidden;
    padding: 12px 0;
    width: 100%;
    position: relative;
    white-space: nowrap;
    display: flex;

    /* Añadidos para el efecto de arrastre más suave (Opcional, pero recomendado) */
    scroll-behavior: smooth;

    /* Ocultar la barra de scroll nativa (Chrome, Edge, Safari) */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.nav-tabs-marquee-container::-webkit-scrollbar {
    display: none;
}

.nav-tabs, .nav-tabs-duplicate {
 display: flex;
    /* QUITAMOS LA ANIMACIÓN EN EL ESCRITORIO */
    animation: none; /* Aseguramos que la animación esté desactivada */
    gap: 25px;
    padding: 0 15px;
    min-width: max-content; /* Asegura el ancho total para el scroll */
    justify-content: flex-start;
    flex-shrink: 0;
}



/* Pausar animación al hacer hover */
.nav-tabs-marquee-container:hover .nav-tabs,
.nav-tabs-marquee-container:hover .nav-tabs-duplicate {
    animation-play-state: paused;
}

.nav-item {
    text-decoration: none;
    color: var(--nina-dark);
    padding: 8px 18px;
    border-radius: 20px;
    transition: all 0.3s ease;
    font-size: 0.95em;
    font-weight: 500;
    flex-shrink: 0; /* Evita que los ítems se encojan */
}

.nav-item.active {
    background-color: var(--nina-green);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(103, 194, 169, 0.4);
}

.product-section
{
     padding: 36px 0;     /* separa entre bloques */
    margin: 0;
}



/*------codigo para ponderle el texto a la cxategoria que pasa como slider al principio de la pagina principal----*/

.product-image-wrapper{
    position: relative;
    overflow: hidden;
}

.product-image-wrapper img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-title{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    padding: 10px 14px;
    text-align: center;

    font-size: 18px;          /* título grande */
    font-weight: 700;
    color: #2c3e50;

    background:#67c2a9c7; /* mejora legibilidad */
}
/*---End ---*/



/* --- PRODUCTOS Y ESTILOS DE CARDS --- */
.section-title {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--nina-dark);
    margin-bottom: 30px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, fr));
    gap: 25px;
}

.product-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px var(--shadow-subtle);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.product-image-wrapper {
    width: 100%;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #fcfcfc;
}

.product-image-wrapper img {
    max-width: 100%;

    object-fit: contain;
    transition: transform 0.4s ease;
}

.card-details {
    padding: 15px 20px 20px;
    text-align: left;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-card .name {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--nina-dark);
    margin-bottom: 5px;
}

.discount-badge {
    background-color: var(--price-color);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7em;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 5px;
    align-self: flex-start;
}

.product-card .old-price {
    font-size: 0.9em;
    color: #999;
    text-decoration: line-through;
    margin-bottom: 2px;
    min-height: 1.4em; /* Asegura el espacio aunque no haya descuento */
}
.product-card .old-price.no-discount {
    visibility: hidden; /* Oculta si no hay descuento pero mantiene el espacio */
}


.product-card .price {
    font-size: 1.8em;
    font-weight: 800;
    color: var(--price-color);
    margin-bottom: 15px;
}

.product-card .price_discount {
    font-size: 1.8em;
    font-weight: 800;
    color: var(--price-color);
    margin-bottom: 15px;
}



.product-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    align-items: center;
}

.details-btn {
    /*flex-grow: 1;*/
    background-color: #55a88c;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}
.details-btn:hover {
    background-color: #0d5f49
}

.action-btn {
    background-color: #2c3e50;
    border: none;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
    font-size: 1.1em;
    transition: opacity 0.2s, background-color 0.2s;
}
.action-btn:hover {
    opacity: 0.9;
    background-color: #0e3458;
}

.product-actions .product-currency-selector {
    flex-grow: 1;
    max-width: 80px;
}
.product-actions .product-currency-selector select {
    padding: 8px 5px;
    font-size: 0.85em;
    text-align: center;
}

/* --- BANNER DE ACCIÓN (Degradado) --- */
.call-to-action-banner {
    /* Degradado de la imagen original */
    background: linear-gradient(to right, #e6b3b3, #b386c2, #7cc2b0);
    color: #fff;
    text-align: center;
    padding: 40px 0;
    margin-top: 50px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.call-to-action-banner h2 {
    font-size: 2.5em;
    margin: 0;
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* --- SECCIÓN FACILIDADES --- */
.features-section {
    margin-top: 50px;
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 10px var(--shadow-subtle);
}

.features-content {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.payment-options {
    flex: 2;
    min-width: 300px;
}

.icon-feature {
    color: var(--nina-green);
    font-size: 1.3em;
    margin-right: 12px;
}
.payment-options li {
    font-size: 1em;
    color: var(--nina-dark);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    font-weight: 500;
}

.compact-product-list {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
    border-left: 1px solid #eee;
    margin-top: -50px;
}
.side-products-title {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--nina-dark);
    margin-bottom: 10px;
    padding-left: 10px;
}

.product-card.compact {
    flex-direction: row;
    padding: 10px;
    text-align: left;
    gap: 15px;
    box-shadow: none;
    border: 1px solid #f0f0f0;
}
.product-card.compact:hover {
    transform: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.product-card.compact img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.compact-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.compact-info .name {
    font-size: 0.9em;
    margin-bottom: 0;
}

.compact-info .price {
    font-size: 1.3em;
    font-weight: 700;
    margin-bottom: 0;
}
.compact-info .price_discount {
    font-size: 1.3em;
    font-weight: 700;
    margin-bottom: 0;
}




.exchange-rate {
    text-align: right;
    margin-top: 15px;
    font-size: 0.9em;
    color: var(--nina-dark);
    font-weight: 600;
}


/* --- FOOTER (Estilo imagen) --- */
.main-footer {
    background-color: #67C2A9; /* Fondo verde sólido */
    color: #fff;
    padding: 30px 0; /* Padding ajustado */
    margin-top: 50px;
    text-align: center; /* Centrar contenido */
}

.footer-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Espacio entre elementos */
}
/* Grid principal: 3 columnas en desktop */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: start; /* evita que se "desalineen" por alturas distintas */
}
.footer-column {
  display: flex;
  flex-direction: column;
  gap: 12px;

  /* Asegura que el contenido no se “apacharre” en pantallas chicas */
  min-width: 0;
}
/* Títulos y textos dentro */
.footer-column h3 {
  margin: 0 0 8px;
  font-size: 16px;
  letter-spacing: 0.2px;
}

.footer-column a {
  color: inherit;
  text-decoration: none;
}

.footer-column a:hover {
  text-decoration: underline;
}
/* Bloques inferiores (copyright) */
.footer-bottom {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;

  font-size: 14px;
  color: rgba(229, 231, 235, 0.9);
}

/* Responsive: móvil = 1 columna */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
  }
}
.footer-links {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
/* Tablet: opcional, si quieres 2 columnas */
@media (min-width: 901px) and (max-width: 1100px) {
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.footer-logo {
    height: 50px; /* Ajuste para el logo blanco en el footer */
    width: auto;
    filter: brightness(1.5); /* Aumentar brillo si es necesario para destacarse */
    margin-bottom: 5px;
}

.footer-text {
    font-size: 1em;
    opacity: 0.9;
    max-width: 400px; /* Ancho máximo para el texto */
}

.footer-social-icons {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.footer-social-icons a {
    color: #fff;
    font-size: 1.5em;
    transition: transform 0.2s ease-in-out;
}
.footer-social-icons a:hover {
    transform: translateY(-3px) scale(1.1);
}


/* --- CARRITO MODAL --- */
.cart-modal {
    display: none; /* Controlado por JS */
    position: fixed;
    z-index: 1002; /* Mayor que el chatbot para que aparezca encima */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.cart-modal[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    display: flex; /* Asegura que flexbox se aplica cuando es visible */
}

.cart-modal.active {
    opacity: 1;
    visibility: visible;
}
.cart-modal-content {
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 450px; /* Un poco más ancho que el chatbot si lo deseas */
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    overflow: hidden;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.cart-modal[aria-hidden="false"] .cart-modal-content {
    transform: translateY(0);
    opacity: 1;
}



.cart-modal-content h3 {
    background-color: rgb(44, 62, 80);/* Usar el color de marca */
    color: #ffffff;
    padding: 15px 20px;
    margin: 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    font-size: 1.3rem;
    font-weight: 600;
    text-align: center;
}



.close-modal-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.5em;
    color: #888;
    cursor: pointer;
    transition: color 0.2s;
}
.close-modal-btn:hover {
    color: var(--price-color);
}
.cart-items-list {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
    background-color: #fcfcfc;
}

.cart-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}
.cart-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.cart-item img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 5px;
    border: 1px solid #eee;
}

.cart-item-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding-left:10px
}
.cart-item-details .name {
    font-weight: 600;
    color: var(--nina-dark);
}
.cart-item-details .price_discount {
    font-size: 1em;
    color: var(--price-color);
    font-weight: 700;
}

.cart-item-details .quantity-control {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
}
.quantity-control button {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.9em;
    color: #555;
    transition: background-color 0.2s;
}
.quantity-control button:hover {
    background-color: #e0e0e0;
}
.quantity-control span {
    font-weight: 500;
    min-width: 20px;
    text-align: center;
}

.remove-item-btn {
    background: none;
    border: none;
    color: #aaa;
    font-size: 1.1em;
    cursor: pointer;
    transition: color 0.2s;
}
.remove-item-btn:hover {
    color: var(--price-color);
}

.cart-summary {
    border-top: 1px solid #eee;
    padding-top: 20px;
    text-align: right;
}
.cart-summary p {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--nina-dark);
    margin-bottom: 15px;
   margin-right: 15px;
}
.cart-summary span {
    color: var(--price-color);
}

.checkout-btn {
    background-color: rgb(44, 62, 80);;
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    width: 100%;
}
.checkout-btn:hover {
    background-color: #4a9e86;
}

.empty-cart-message {
    text-align: center;
    color: #777;
    padding: 30px;
    font-style: italic;
}


/* --- MEDIA QUERIES (Responsiveness Detallada) --- */

/* Tablet y Pantallas Pequeñas */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .search-bar {
        order: 3;
        width: 100%;
        margin: 10px 0 0;
    }

    .header-icons {
        order: 2;
        width: 100%;
        justify-content: space-between;
    }

    .currency-global {
        flex-grow: 1;
        justify-content: flex-start;
    }



    .call-to-action-banner h2 {
        font-size: 1.8em;
        padding: 20px 0;
    }

    .features-content {
        flex-direction: column;
    }

    /* Ajuste para la marquesina en tablet, puede seguir funcionando o volverse scrollable */
    .nav-tabs-marquee-container {
        overflow-x: auto; /* Permite scroll manual */
        white-space: nowrap;
        display: block; /* Vuelve a ser un bloque normal */
    }
    .nav-tabs, .nav-tabs-duplicate {
        animation: none; /* Desactiva la animación de la marquesina */
        min-width: auto; /* Permite que el ancho se ajuste al contenido */
        padding: 0 10px;
    }
}

/* Móvil Pequeño */
@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: 1fr; /* Una columna para móviles */
    }

    .product-card {
        margin: 0 auto;
        max-width: 350px;
    }

    .header-icons {
        gap: 10px;
        padding-right: 0;
    }
    .header-icons button {
        font-size: 1.2em;
    }

    .details-btn {
        padding: 8px 10px;
        font-size: 0.9em;
    }

    .call-to-action-banner h2 {
        font-size: 1.5em;
        padding: 15px 10px;
    }

    .cart-modal-content {
        padding: 20px;
    }
    .cart-modal-content h3 {
        font-size: 1.5em;
    }
}

/* Base y Tipografía */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.5;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Colores Clave */
:root {
    --nina-green: #67C2A9;
    --nina-dark: #2c3e50;
    --price-color: #e74c3c;
    --shadow-subtle: rgba(0,0,0,0.08);
    --primary-text: #444;
}

/* --- HEADER --- (Se mantiene optimizado) */
.main-header {
    background-color: #fff;
    padding: 15px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo { height: 100px; width: auto; }
.search-bar { /* ... */ }
.header-icons { display: flex; gap: 20px; align-items: center; }
.currency-selector select { /* ... */ }


/* --- NAV Y MARQUESINA MEJORADA (Corrección de Superposición) --- */
.main-nav {
    background-color: #fff;
    padding: 0;
    margin-bottom: 30px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.promo-banner {
    background: linear-gradient(to right, #e6b3b3, #b386c2, #7cc2b0);
    color: #fff;
    text-align: center;
    padding: 12px 0;
    font-size: 0.9em;
    width:100%;
}

/* Contenedor de la Marquesina - Habilita arrastre en móviles */
.nav-tabs-marquee-container {
    overflow-x: hidden; /* Ocultamos el scrollbar por defecto */
    padding: 12px 0;
    width: 100%;
    position: relative;
    white-space: nowrap;
    display: flex;
}

.nav-tabs, .nav-tabs-duplicate {
    display: flex;
    animation: marquee-scroll 40s linear infinite;
    gap: 25px;
    padding: 0 15px;
    min-width: 100%;
    justify-content: flex-start;
    flex-shrink: 0;
}

.nav-item {
    flex-shrink: 0;
    text-decoration: none;
    color: var(--nina-dark);
    padding: 8px 18px;
    border-radius: 20px;
    transition: all 0.3s ease;
    font-size: 0.95em;
    font-weight: 500;
}
.nav-item.active {
    background-color: var(--nina-green);
    color: #fff;
    font-weight: 600;
}

/* KEYFRAMES CORREGIDOS: Asegura un movimiento limpio y sin saltos */
@keyframes marquee-scroll {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

/* Pausar animación al hacer hover */
.nav-tabs-marquee-container:hover .nav-tabs,
.nav-tabs-marquee-container:hover .nav-tabs-duplicate {
    animation-play-state: paused;
}


/* --- LÓGICA DE BOOTSTRAP GRID (Productos) --- */
.row {
    display: flex;
    flex-wrap: wrap;
    /* Corrección de padding/margin para alineación */
    margin-right: -10px;
    margin-left: -10px;
}

/* Columnas base */
.col-12, .col-sm-6, .col-lg-3 {
    padding-right: 10px;
    padding-left: 10px;
    margin-bottom: 20px; /* Separación vertical entre filas */
}

/* Default Móvil (1 producto por fila) */
.col-12 {
    width: 100%;
}

.product-grid {
    /* Aquí .product-grid solo actúa como un contenedor de .row */
    /* El flex-wrap se maneja en .row */
}

/* Small devices (tablet) */
@media (min-width: 576px) {
    .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Large devices (desktop) */
@media (min-width: 992px) {
    .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}


/* --- PRODUCT CARD (Ajustes para mobile) --- */
.product-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px var(--shadow-subtle);
    overflow: hidden;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%; /* Asegura que todas las tarjetas en una fila tengan la misma altura */
}

.product-image-wrapper {
    width: 100%;
    height: 250px; /* Aumento la altura para mejor visibilidad en móvil */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #fcfcfc;
}

/* --- CARRITO STICKY (Persistente) --- */
.sticky-cart-container {
    position: fixed;
    bottom: 160px;
    right: 20px;
    z-index: 900;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border-radius: 50%;


}

.cart-btn.sticky-btn {
    background-color: #2c3e50;
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 1.5em;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

.cart-count-sticky {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #e74c3c;
    color: #fff;
    font-size: 0.8em;
    font-weight: 700;
    border-radius: 50%;
    padding: 3px 7px;
    min-width: 22px;
    text-align: center;
    line-height: 1;
    display: none;
}
.divider{
    height: 1px;
    background: rgba(0,0,0,0.08); /* línea muy suave */
    margin: 28px 0;             /* espacio alrededor */
  }

/* --- FOOTER (Asegurando visibilidad) --- */
.main-footer {
    background-color: #1a926a;
    color: #fff;
    padding: 40px 0;
    margin-top: 50px;
}
.footer-logo {
    filter: brightness(0) invert(1);
    margin-bottom: 10px;
}
.footer-text {
    opacity: 0.9;
}
.footer-copyright {
    font-size: 1.2em;
    opacity: 0.8;
    margin-top: 15px;
}

/* ... Tus estilos existentes ... */

/* Ajustes para los íconos del encabezado */
.header-content .header-icons {
    display: flex; /* Para que los iconos se pongan en fila */
    align-items: center;
    gap: 15px; /* Espacio entre cada icono/selector */
}

.header-icons .currency-selector,
.header-icons button {
    background: none;
    border: none;
    color: #333;
    font-size: 1.25rem; /* Tamaño consistente para todos los iconos */
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 0; /* Eliminar padding extra si existe */
}
.header-icons button:hover {
    color: #67C2A9; /* Color de tu marca */
}

/* ... Tus estilos existentes ... */

/* Ajustes para los íconos del encabezado */
.header-content .header-icons {
    display: flex; /* Para que los iconos se pongan en fila */
    align-items: center;
    gap: 15px; /* Espacio entre cada icono/selector */
}

.header-icons .currency-selector,
.header-icons button {
    background: none;
    border: none;
    color: #333;
    font-size: 1.25rem; /* Tamaño consistente para todos los iconos */
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 0; /* Eliminar padding extra si existe */
}
.header-icons button:hover {
    color: #67C2A9; /* Color de tu marca */
}

/* --- ESTILOS PARA LOS BOTONES FLOTANTES (WHATSAPP, CHATBOT, CARRITO) --- */
.float-btn {
    position: fixed;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
    z-index: 1000; /* Asegura que estén por encima de otros elementos */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
    border: none;
    cursor: pointer;
}

.float-btn:hover {
    transform: scale(1.1);
}

/* Botón de WhatsApp */
.whatsapp-float {
   background-color: #25d366; /* Color de WhatsApp */
    color: #FFF;
    bottom: 20px; /* Distancia desde abajo */
    right: 20px; /* Distancia desde la derecha */
    outline: none; /* Esto quita la línea al hacer foco */
    border: none; /* Asegura que no haya un borde */
    /* Nuevas propiedades para centrar el icono y eliminar espacios */
    display: flex; /* Usar flexbox para centrar el contenido (el icono) */
    align-items: center; /* Centrar verticalmente */
    justify-content: center; /* Centrar horizontalmente */
    line-height: 1; /* Eliminar cualquier espacio extra de altura de línea */
    text-decoration: none; /* Asegurar que no haya subrayado de enlace */
}

.whatsapp-float:hover {
    background-color: #1DA851; /* Un verde un poco más oscuro al pasar el ratón */
}

/* Botón de Asistente Virtual */
.chatbot-float-btn {
    background-color: #55a88c; /* Color de tu marca */
    color: #FFF;
    bottom: 90px; /* 20px (WhatsApp) + 60px (altura botón) + 10px (espacio entre ellos) */
    right: 20px; /* Alineado con WhatsApp */
}

.chatbot-float-btn:hover {
    background-color: #29906eff; /* Un verde un poco más oscuro */
}

/* Botón de Carrito Flotante */
.cart-float-btn {
    background-color: #ec2a2a98; /* Un color distintivo para el carrito */
    color: #FFF;
    bottom: 160px; /* 90px (Chatbot) + 60px (altura botón) + 10px (espacio entre ellos) */
    right: 20px; /* Alineado con los demás */
    position: fixed; /* Asegurarse de que sea fijo */
}

.cart-float-btn:hover {
    background-color: #18334e; /* Un naranja más oscuro */
    transform: scale(1.1);
}

.cart-float-btn .cart-count-float {
    position: absolute;
    top: -5px;
    right: -8px;
    background-color: #9b1506ff; /* Color de alerta/cantidad */
    color: white;
    border-radius: 50%;
    padding: 2px 7px;
    font-size: 0.75rem;
    line-height: 1;
    min-width: 20px;
    text-align: center;
}



/* --- ESTILOS MEJORADOS PARA EL MODAL DEL ASISTENTE VIRTUAL (CHATBOT) --- */

/* Fondo oscurecido del modal */
.chatbot-modal {
    display: none; /* Se controla con JS */
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fondo más oscuro para mayor contraste */
    display: flex; /* Usamos flex para centrar el contenido */
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(3px); /* Efecto de desenfoque en el fondo para un toque moderno */
    opacity: 0; /* Inicialmente invisible para la animación */
    visibility: hidden; /* Oculto para la animación */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Estado visible del modal (activado por JS) */
.chatbot-modal[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

/* Contenido principal del chatbot */
.chatbot-modal-content {
    background-color: #ffffff; /* Fondo blanco puro */
    border-radius: 15px; /* Bordes más redondeados */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada pero suave */
    width: 90%;
    max-width: 380px; /* Un poco más compacto */
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: 85vh; /* Mayor altura disponible */
    overflow: hidden; /* Para contener bien el scroll del chat */
    transform: translateY(20px); /* Para la animación de entrada */
    opacity: 0; /* Inicialmente invisible para la animación */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Animación de entrada del contenido del modal */
.chatbot-modal[aria-hidden="false"] .chatbot-modal-content {
    transform: translateY(0);
    opacity: 1;
}

/* Título del chatbot MEJORADO */
.chatbot-modal-content h3 {
    background-color: #67C2A9; /* Color de marca para el encabezado */
    color: #ffffff;
    padding: 18px 20px; /* Un poco más de padding vertical */
    margin: 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    font-size: 1.4rem; /* Un poco más grande para el título */
    font-weight: 700; /* Más audaz */
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra más definida pero suave */
    display: flex; /* Usar flexbox para alinear el icono y el texto */
    align-items: center; /* Alinear verticalmente el icono y el texto */
    justify-content: center; /* Centrar todo el contenido (icono + texto) */
    gap: 10px; /* Espacio entre el icono y el texto */
}

/* Estilo para el icono dentro del h3 */
.chatbot-modal-content h3 i {
    font-size: 1.6rem; /* Hacer el icono un poco más grande que el texto */
    line-height: 1; /* Asegurar que el icono no añada espacio extra */
}

/* Botón de cerrar del chatbot */
.chatbot-modal-content .close-chatbot-btn {
    position: absolute;
    top: 15px; /* Ajustar posición */
    right: 20px; /* Ajustar posición */
    color: #e0e0e0; /* Color más suave */
    font-size: 1.5rem; /* Icono más grande */
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

.chatbot-modal-content .close-chatbot-btn:hover,
.chatbot-modal-content .close-chatbot-btn:focus {
    color: #ffffff; /* Blanco al pasar el ratón */
    transform: rotate(90deg); /* Animación al cerrar */
}

/* Área de mensajes del chat */
.chatbot-messages {
    flex-grow: 1;
    padding: 20px; /* Más padding */
    background-color: #f7f7f7; /* Fondo ligeramente gris para los mensajes */
    overflow-y: auto;
    height: 100%; /* Ocupa el espacio disponible */
    display: flex;
    flex-direction: column;
    gap: 12px; /* Más espacio entre mensajes */
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.03); /* Sombra interna sutil */
}

/* Mensajes individuales */
.message {
    padding: 12px 18px; /* Más padding para los mensajes */
    border-radius: 20px; /* Bordes más redondeados para las burbujas de chat */
    max-width: 85%; /* Ancho ligeramente ajustado */
    line-height: 1.5; /* Mejor legibilidad */
    font-size: 0.95rem; /* Tamaño de fuente ligeramente mayor */
    position: relative; /* Para posibles flechas de burbuja (si se quisieran añadir) */
}

/* Mensajes del bot */
.bot-message {
    background-color: #e0f2f1; /* Un tono pastel del color de tu marca */
    align-self: flex-start;
    color: #333;
    border-bottom-left-radius: 5px; /* Un lado menos redondeado */
}

/* Mensajes del usuario */
.user-message {
    background-color: #67C2A9; /* Color de marca fuerte */
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 5px; /* Un lado menos redondeado */
}

/* Área de entrada de texto del chatbot */
.chatbot-input {
    display: flex;
    padding: 15px 20px; /* Padding para el área de input */
    background-color: #ffffff;
    border-top: 1px solid #eee; /* Separador sutil */
    gap: 10px;
    align-items: center;
}

/* Campo de entrada de texto */
.chatbot-input input {
    flex-grow: 1;
    padding: 12px 15px; /* Más padding */
    border: 1px solid #dcdcdc; /* Borde más suave */
    border-radius: 25px; /* Bordes muy redondeados para un aspecto moderno */
    font-size: 1rem;
    outline: none; /* Quitar el outline al enfocar */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.chatbot-input input:focus {
    border-color: #67C2A9; /* Borde de color de marca al enfocar */
    box-shadow: 0 0 0 3px rgba(103, 194, 169, 0.2); /* Sombra sutil al enfocar */
}

/* Botón de envío */
.chatbot-input button {
    background-color: #67C2A9;
    color: white;
    border: none;
    border-radius: 50%; /* Botón circular */
    width: 45px; /* Tamaño fijo */
    height: 45px; /* Tamaño fijo */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.2rem; /* Icono más grande */
    transition: background-color 0.3s ease, transform 0.2s ease;
    flex-shrink: 0; /* Evita que el botón se encoja */
}

.chatbot-input button:hover {
    background-color: #55a88c;
    transform: scale(1.05); /* Pequeño efecto de zoom al pasar el ratón */
}

/* Media Query para responsividad del chatbot en pantallas pequeñas */
@media (max-width: 500px) {
    .chatbot-modal-content {
        width: 95%;
        max-height: 90vh; /* Ajuste para pantallas móviles */
        margin: 5vh auto; /* Centrar verticalmente mejor en móviles */
    }

    .chatbot-modal-content h3 {
        font-size: 1.2rem;
        padding: 12px 15px;
    }

    .chatbot-input input {
        padding: 10px 12px;
        font-size: 0.9rem;
    }

    .chatbot-input button {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
}