/* ============================================= */
/* CONFIGURACIÓN GENERAL Y VARIABLES      */
/* ============================================= */
:root {
    --color-primario: #9b59b6;      /* Violeta principal para acentos */
    --color-secundario: #ecf0f1;    /* Texto principal (ahora es claro) */
    --color-fondo: #1c1c1e;         /* Fondo principal (negro sutil) */
    --color-superficie: #2c2c2e;    /* Color para tarjetas y header (gris oscuro) */
    --color-acento: #8e44ad;        /* Violeta más oscuro para hover de botones */
    --color-blanco: #ffffff;
    --fuente-principal: 'Poppins', sans-serif;
}

/* ============================================= */
/* PALETA DE COLORES PARA MODO CLARO             */
/* ============================================= */
body.light-mode {
    --color-primario: #8e44ad;      /* Violeta un poco más oscuro para mejor contraste */
    --color-secundario: #2c3e50;    /* Texto principal (ahora es oscuro) */
    --color-fondo: #ecf0f1;         /* Fondo principal (gris claro) */
    --color-superficie: #ffffff;    /* Color para tarjetas y header (blanco) */
    --color-acento: #9b59b6;        /* Violeta más claro para hover */
    --color-blanco: #ffffff;
}

/* Reseteo básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--fuente-principal);
    background-color: var(--color-fondo); /* Fondo negro sutil */
    color: var(--color-secundario);       /* Texto principal claro */
    line-height: 1.6;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================= */
/* ENCABEZADO Y NAVEGACIÓN              */
/* ============================================= */
.main-header {
    background-color: var(--color-superficie); /* Antes era --color-blanco */
    padding: 1rem 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    position: sticky;
    top: 0;
    z-index: 1000;
}

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

/* Estilo para el contenedor del logo (el enlace <a>) */
.logo {
    /* ... tus estilos actuales ... */
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

/* ============================================= */
/* ESTILO PARA EL TÍTULO PRINCIPAL (LOGO)      */
/* ============================================= */
.logo span {
    font-family: 'Concert One', sans-serif;
    font-size: 1.9rem;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1;

    /* --- EFECTO DE GRADIENTE ANIMADO --- */
    background-image: linear-gradient(
        -45deg,
        #9b59b6, /* Tu violeta primario */
        #ecf0f1, /* Tu color claro */
        #8e44ad, /* Tu violeta de acento */
        #ecf0f1  /* Tu color claro de nuevo */
    );
    background-size: 300% 300%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent; /* El texto se hace transparente para mostrar el fondo */
    animation: moveGradient 8s ease-in-out infinite;

    /* --- BORDE NEGRO CON TEXT-STROKE --- */
    /* Esta propiedad es la forma moderna de crear bordes de texto */
    -webkit-text-stroke: 1.5px black;

}

/* Animación para mover el fondo del gradiente */
@keyframes moveGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


/* Estilo específico para la imagen del logo */
.logo img {
    height: 70px; /* Define la altura de tu logo. ¡Ajusta este valor a tu gusto! */
    border: 2px solid #8e44ad; /* Borde violeta con tu color específico */
    border-radius: 50%; /* Asegura que el borde sea circular */
    padding: 2px; /* Pequeño espacio entre la imagen y el borde */
    box-shadow: 0 0 0 3px rgba(142, 68, 173, 0.4); /* Sombra exterior sutil */
    transition: all 0.3s ease; /* Transición suave para hover */
}

/* Opcional: un efecto sutil al pasar el mouse */
.logo img:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0 5px rgba(142, 68, 173, 0.6);
}

/* ============================================= */
/* ESTILO PARA EL BOTÓN DE DESCARGA PDF          */
/* ============================================= */
.btn-download {
    padding: 8px 16px;
    border: 2px solid var(--color-primario);
    color: var(--color-primario);
    background-color: transparent;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.btn-download:hover {
    background-color: var(--color-primario);
    color: var(--color-blanco);
    transform: scale(1.05);
}

/* ============================================= */
/* ESTILOS COMPLETOS DE NAVEGACIÓN         */
/* ============================================= */

/* Contenedor derecho del header */
.header-right-side {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* --- Menú Principal --- */
.main-nav, .main-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* UL del menú principal (Nivel 0) */
.main-nav > ul {
    display: flex; /* Horizontal */
}

/* Enlaces del menú principal */
.main-nav > ul > li > a {
    padding: 10px 15px;
    display: block;
    color: var(--color-secundario);
    text-decoration: none;
    font-weight: 600;
    position: relative;
}

/* Estilo para el nuevo botón de cerrar (X) */
.close-nav-btn {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    color: var(--color-secundario);
    font-size: 2.5rem;
    cursor: pointer;
}

/* Mostramos el botón de cerrar solo cuando el panel está activo */
.header-right-side.nav-active .close-nav-btn {
    display: block;
}

/* --- Menú Desplegable (Nivel 1) --- */
.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none; /* Oculto por defecto */
    position: absolute;
    left: 0;
    top: 100%;
    background-color: var(--color-superficie);
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    padding: 10px 0;
    margin-top: 5px; /* Pequeña separación del botón */
    min-width: 220px;
    z-index: 1001;
    border-radius: 8px;
    border: 1px solid rgba(128, 128, 128, 0.1);
}

/* Mostrar el Nivel 1 al hacer hover */
.dropdown:hover > .dropdown-menu {
    display: block;
}

/* --- Sub-Menú Desplegable (Nivel 2) --- */
.dropdown-submenu {
    position: relative;
}

.dropdown-menu-level2 {
    display: none; /* Oculto por defecto */
    position: absolute;
    left: 100%; /* A la derecha */
    top: -10px; /* Alineado con su padre */
    background-color: var(--color-superficie);
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    padding: 10px 0;
    min-width: 220px;
    z-index: 1002;
    border-radius: 8px;
    border: 1px solid rgba(128, 128, 128, 0.1);
}

/* Mostrar el Nivel 2 al hacer hover */
.dropdown-submenu:hover > .dropdown-menu-level2 {
    display: block;
}

/* --- Estilos para los items DENTRO de los desplegables --- */

/* LI dentro de CUALQUIER desplegable */
.dropdown-menu li {
    display: block; /* FUERZA a que sean verticales */
    width: 100%;
}

/* Enlaces dentro de CUALQUIER desplegable */
.dropdown-menu a {
    padding: 10px 20px;
    display: block;
    color: var(--color-secundario);
    text-decoration: none;
    transition: background-color 0.2s ease, padding-left 0.2s ease;
    white-space: nowrap;
}

.dropdown-menu a:hover {
    background-color: var(--color-primario);
    color: var(--color-blanco) !important; /* Forzamos color blanco en hover */
}

/* Divisor */
.dropdown-menu .divider {
    height: 1px;
    margin: 8px 10px;
    padding: 0;
    background-color: rgba(128, 128, 128, 0.2);
}

/* ============================================= */
/* SECCIÓN HERO CON FONDO DINÁMICO - MEJORADA   */
/* ============================================= */
.hero-section {
    position: relative; /* Contenedor principal para posicionar los hijos */
    color: var(--color-blanco);
    text-align: center;
    padding: 100px 0;
    overflow: hidden; /* Oculta cualquier desborde */
}

/* ============================================= */
/* ESTILOS PARA CARRUSEL DE SCROLL CONTINUO     */
/* ============================================= */

/* Definimos la animación de scroll */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Se mueve la mitad de su ancho total */
}

/* Contenedor principal que oculta el desborde */
.hero-background-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* ¡Muy importante! Oculta las imágenes que están fuera de la pantalla */
    z-index: 1;
}

/* La "cinta" que contiene todas las imágenes y que se anima */
.slider-track {
    display: flex;
    /* Ancho total: 100% de una imagen * 8 imágenes = 800% */
    width: 800%;
    height: 100%;

    /* ¡LA ANIMACIÓN! */
    /* 40s = duración (más lento = número más grande) */
    animation: scroll 80s linear infinite;
}

/* Cada imagen individual en la cinta */
.hero-background-slider .slide {
    /* Cada una ocupa 1/8 del ancho total de la cinta */
    width: 4.5%;
    height: 100%;
    background-size: cover;
    background-position: center top;
}

/* El overlay oscuro para la legibilidad */
.hero-overlay {
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2; /* El overlay va encima de las imágenes */
}

/* El contenido (texto y botón) va por encima de todo */
.hero-content {
    position: relative;
    z-index: 3;
}

.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

.hero-content p {
    font-size: 1.3rem;
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

/* Botón de Llamado a la Acción (CTA) */
.cta-button {
    background-color: var(--color-primario); /* Violeta */
    color: var(--color-blanco);
    padding: 15px 35px;
    text-decoration: none;
    border-radius: 50px; /* Bordes redondeados */
    font-weight: 700;
    font-size: 1.1rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
    border: 2px solid var(--color-primario);
}

.cta-button:hover {
    background-color: var(--color-acento); /* Violeta más oscuro */
    transform: scale(1.05);
}

/* ============================================= */
/* GALERÍA DE PRODUCTOS                 */
/* ============================================= */
.product-section {
    padding: 60px 0;
    text-align: center;
}

.product-section h2 {
    font-size: 2.5rem;
    margin-bottom: 40px;
}

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

.product-card, .category-card { /* Aplicamos el estilo a ambas */
    background-color: var(--color-superficie); /* Fondo gris oscuro */
    color: var(--color-secundario); /* Texto claro dentro de la tarjeta */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
}

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

.product-card h3 {
    font-size: 1.3rem;
    margin: 15px 0 10px;
}

.price {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-primario);
    margin-bottom: 15px;
}

.add-to-cart-button {
    background-color: var(--color-primario); /* Botón violeta */
    color: var(--color-blanco);
    border: none;
    padding: 12px 20px;
    width: 90%;
    margin-bottom: 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    font-family: var(--fuente-principal);
    transition: background-color 0.3s ease;
}

.add-to-cart-button:hover {
    background-color: var(--color-acento); /* Se oscurece al pasar el mouse */
}

/* ============================================= */
/* PIE DE PÁGINA (FOOTER) - DISEÑO PROFESIONAL   */
/* ============================================= */
.main-footer {
    background-color: var(--color-superficie);
    color: var(--color-secundario);
    padding: 50px 0 0; /* Más espacio arriba, sin espacio abajo */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-grid {
    display: flex;
    flex-wrap: wrap; /* Para que se apilen en pantallas pequeñas */
    gap: 40px; /* Espacio entre columnas */
    justify-content: space-between;
    margin-bottom: 40px;
}

.footer-column {
    flex: 1; /* Permite que las columnas crezcan */
    min-width: 220px; /* Ancho mínimo antes de que se apilen */
}

.footer-column h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primario);
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.footer-column h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--color-primario);
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 12px;
}

.footer-column ul a {
    color: var(--color-secundario);
    text-decoration: none;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.footer-column ul a:hover {
    color: var(--color-primario);
    opacity: 1;
    padding-left: 5px;
}

/* Estilos para la lista de contacto con íconos */
.contact-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0.9;
}

.contact-list svg {
    flex-shrink: 0; /* Evita que el ícono se encoja */
    color: var(--color-primario);
}

/* Estilos para la lista de redes sociales */
.footer-social-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    font-weight: 600;
}

.footer-social-list svg {
    width: 25px;
    height: 25px;
}

/* Barra inferior de copyright */
.footer-bottom {
    display: flex; /* <-- CLAVE 1: Activa Flexbox */
    justify-content: space-between; /* <-- CLAVE 2: Empuja los elementos a los extremos */
    align-items: center; /* Los alinea verticalmente */
    flex-wrap: wrap; /* Permite que se apilen en pantallas muy pequeñas */
    gap: 15px; /* Espacio por si se apilan */
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--color-fondo);
    font-size: 0.9rem;
    opacity: 0.7;
}

.footer-bottom p {
    margin: 0; /* Quitamos el margen por defecto de los párrafos */
}

/* ============================================= */
/* ESTILO PARA EL ENLACE DEL CRÉDITO (DEVELOPER) */
/* ============================================= */
.footer-bottom a {
    color: inherit; /* Hereda el color del texto que lo rodea (blanco/gris sutil) */
    text-decoration: none; /* ¡Quita el subrayado! */
    font-weight: 600; /* Le da un poco más de énfasis a tu nombre */
    transition: color 0.3s ease;
}

.footer-bottom a:hover {
    color: var(--color-primario); /* Se vuelve violeta solo al pasar el mouse */
}
/* ============================================= */
/* ENLACES A REDES SOCIALES (FOOTER) - CON ICONOS */
/* ============================================= */
.social-links {
    margin-top: 15px;
    display: flex; /* Usamos flexbox para centrarlos */
    justify-content: center; /* Centra los iconos horizontalmente */
    gap: 25px; /* Espacio entre los iconos */
}

.social-links a {
    color: var(--color-secundario); /* Color de ícono (texto claro) */
    transition: all 0.3s ease; /* Transición suave para color y tamaño */
}

.social-links a:hover {
    color: var(--color-primario); /* Cambia a violeta al pasar el mouse */
    transform: scale(1.2); /* Aumenta ligeramente el tamaño */
}

/* Estilo para los SVG (íconos) dentro de los enlaces */
.social-links svg {
    width: 28px;  /* Volvemos a un tamaño más sutil */
    height: 28px; /* Volvemos a un tamaño más sutil */
}

/* ============================================= */
/* ESTILOS PARA LA SECCIÓN DE MEDIOS DE PAGO     */
/* ============================================= */
.footer-payments {
    text-align: center;
    padding: 30px 0;
    border-top: 1px solid rgba(128, 128, 128, 0.1);
    margin-top: 30px;
}

.footer-payments h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-secundario);
    opacity: 0.9;
    margin-bottom: 20px;
}

.payment-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap; /* Para que se adapte en pantallas chicas */
}

.payment-icons img {
    height: 45px; /* <-- AUMENTA ESTE NÚMERO AL TAMAÑO QUE PREFIERAS */
    max-width: 100px; /* Aumentamos un poco el ancho máximo también */
    transition: transform 0.3s ease;
    /* (Si estás usando el truco de CSS, mantén la línea mix-blend-mode aquí) */
}
.payment-icons img:hover {
    transform: scale(1.1); /* Mantenemos solo el efecto de zoom al pasar el mouse */
}
.payment-details {
    margin-top: 20px;
    font-size: 0.85rem;
    opacity: 0.7;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* ============================================= */
/* ESTILOS PARA CARRUSEL DE OFERTAS (SWIPER)   */
/* ============================================= */
.offer-carousel-section {
    padding: 40px 0 60px 0;
    background-color: var(--color-fondo);
}
.offer-carousel-section h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 40px;
    color: var(--color-primario);
}
.offer-swiper {
    width: 100%;
    height: auto;
    padding-bottom: 40px; /* Espacio para la paginación (si la añades) */
}
.offer-swiper .swiper-slide {
    width: 300px; /* Ancho de cada tarjeta */
}
.offer-swiper .product-card {
    height: 100%; /* Asegura que todas las tarjetas tengan la misma altura */
}

/* Estilos para las flechas de navegación (se ocultan en móvil) */
.offer-swiper .swiper-button-next,
.offer-swiper .swiper-button-prev {
    color: var(--color-primario);
    transition: all 0.3s ease;
}
.offer-swiper .swiper-button-next:hover,
.offer-swiper .swiper-button-prev:hover {
    transform: scale(1.2);
}

/* ============================================= */
/* ESTILOS PARA LA PÁGINA DE DETALLE DE PRODUCTO */
/* ============================================= */

.page-container {
    padding: 60px 0;
}

#product-detail-content {
    max-width: 1100px;
    margin: 0 auto;
}

.product-detail-layout {
    display: flex;
    gap: 40px; /* Espacio entre las dos columnas principales */
    width: 100%;
    flex-wrap: wrap; /* Permite que las columnas se apilen en móvil */
    background-color: var(--color-superficie);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* --- Columna Izquierda: Galería de Imágenes --- */
.product-detail-gallery-wrapper {
    flex: 1 1 55%; /* La galería ocupa más espacio */
    display: flex;
    gap: 15px; /* Espacio entre miniaturas y imagen principal */
    max-width: 55%; /* Para controlar el ancho en desktop */
}

.product-thumbnails-vertical {
    flex: 0 0 90px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    overflow-x: hidden; /* <-- AÑADE ESTA LÍNEA */
    max-height: 550px;
    border-right: 1px solid rgba(128, 128, 128, 0.1);
    padding-right: 15px;
}

.product-thumbnail-vertical {
    width: 90px;
    height: 90px;
    object-fit: cover;
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: 8px;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.product-thumbnail-vertical:hover {
    opacity: 1;
}

.product-thumbnail-vertical.active {
    opacity: 1;
    border-color: var(--color-primario);
    box-shadow: 0 0 8px rgba(155, 89, 182, 0.5);
}

/* Contenedor de imagen principal (AHORA ES UN SWIPER) */
.product-main-image-container {
    position: relative;
    flex: 1;
    background-color: var(--color-fondo);
    border-radius: 10px;
    overflow: hidden;
    height: 550px; /* Mantenemos la altura fija */
}


.main-image-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px; /* Añadimos el padding que quitamos del contenedor */
}
.main-image-swiper .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}
/* Ocultamos las flechas por defecto (en escritorio) */
.main-image-swiper .swiper-button-next,
.main-image-swiper .swiper-button-prev {
    display: none;
}



#productMainDetailImage {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Asegura que la imagen se vea completa */
    border-radius: 8px;
}

/* --- Columna Derecha: Detalles del Producto --- */
.product-detail-info-column {
    flex: 1 1 40%; /* Los detalles ocupan el 40% */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Alinea los elementos arriba */
    padding-left: 20px; /* Pequeño espacio a la izquierda */
}

.product-detail-info-column h1 {
    font-size: 2.5rem;
    color: var(--color-primario);
    margin-bottom: 20px;
    line-height: 1.2;
}

.product-detail-info-column .description {
    font-size: 1.05rem;
    color: var(--color-secundario);
    opacity: 0.9;
    line-height: 1.7;
    margin-bottom: 30px;
    flex-grow: 1; /* Permite que la descripción empuje el botón hacia abajo si es larga */
    overflow-y: auto; /* Para descripciones muy largas */
    padding-right: 10px; /* Espacio para el scroll si aparece */
}

.product-detail-info-column .description ul {
    list-style-type: disc;
    margin-left: 25px;
    margin-top: 15px;
}

.product-detail-info-column .description li {
    margin-bottom: 8px;
}

.product-detail-info-column .price {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-primario);
    margin-bottom: 30px;
}

.product-detail-info-column .cta-button {
    width: 100%;
    padding: 18px 25px;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 50px;
    text-transform: uppercase;
}

/* --- AJUSTES RESPONSIVOS para detalle-producto.html --- */
@media (max-width: 992px) {
    #product-detail-content {
        padding: 15px;
    }
    .product-detail-layout {
        flex-direction: column; /* Apila las columnas verticalmente */
        gap: 30px;
    }
    .product-detail-gallery-wrapper {
        flex-direction: column-reverse; /* Miniaturas abajo, imagen principal arriba */
        max-width: 100%; /* Ocupa todo el ancho */
    }
    .product-thumbnails-vertical {
        flex-direction: row; /* Miniaturas en fila en móvil */
        overflow-x: auto; /* Scroll horizontal para miniaturas */
        max-height: 100px; /* Altura más pequeña para la fila de miniaturas */
        border-right: none;
        border-top: 1px solid rgba(128, 128, 128, 0.1);
        padding-right: 0;
        padding-top: 15px;
        justify-content: center; /* Centra las miniaturas si no llenan el ancho */
    }
    .product-thumbnail-vertical {
        width: 70px;
        height: 70px;
        border-radius: 5px;
    }
   

    /* Dentro de @media (max-width: 992px) { ... } */

    .product-main-image-container {
        height: 40vh; /* Altura móvil */
        padding: 0; /* Reseteamos padding */
    }

    .main-image-swiper .swiper-slide {
        padding: 5px; /* Padding más chico en móvil */
    }

    /* ¡CLAVE! MOSTRAMOS las flechas de Swiper SOLO en móvil */
    .main-image-swiper .swiper-button-next,
    .main-image-swiper .swiper-button-prev {
        display: flex;
        color: var(--color-primario);
        background-color: rgba(0,0,0,0.3);
        padding: 10px;
        height: 40px;
        width: 40px;
        border-radius: 50%;
        --swiper-navigation-size: 20px; /* Tamaño de la flecha interna */
    }
    .main-image-swiper .swiper-button-next { right: 10px; }
    .main-image-swiper .swiper-button-prev { left: 10px; }
            .product-detail-info-column h1 {
                font-size: 2rem;
                margin-bottom: 15px;
            }
            .product-detail-info-column .description {
                font-size: 1rem;
                margin-bottom: 20px;
                padding-right: 0;
                text-align: left; /* Descripción puede ser izquierda en móvil */
            }
            .product-detail-info-column .price {
                font-size: 1.8rem;
                margin-bottom: 20px;
            }
            .product-detail-info-column .cta-button {
                padding: 15px 20px;
                font-size: 1.1rem;
            }
        }


/* ============================================= */
/* RESPONSIVE DESIGN             */
/* ============================================= */
@media (max-width: 768px) {
    .main-header .container {
        flex-direction: column;
    }

    .main-nav ul {
        margin-top: 1rem;
    }

    .hero-section h1 {
        font-size: 2.5rem;
    }

}



/* ============================================= */
/* CALESITA / CAROUSEL                  */
/* ============================================= */
.carousel-section {
    width: 100%;
    padding: 20px 0; /* Espacio arriba y abajo */
}

.carousel {
    position: relative;
    max-width: 1400px;
    margin: auto;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    max-height: 350px;
}

.carousel-slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    min-width: 100%;
    box-sizing: border-box;
}

.carousel-slide img {
    width: 100%;
    height: 300px;
    display: block;
    object-fit: cover;
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px 15px;
    font-size: 24px;
    z-index: 100;
    border-radius: 5px;
}

.carousel-button.prev {
    left: 10px;
}

.carousel-button.next {
    right: 10px;
}

/* ============================================= */
/* TARJETAS DE CATEGORÍA (VERSIÓN MEJORADA)      */
/* ============================================= */
.category-section {
    padding: 60px 0;
    text-align: center;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

/* --- ESTILO BASE PARA LA TARJETA DE CATEGORÍA --- */
.category-card {
    border-radius: 12px; /* Bordes un poco más redondeados */
    overflow: hidden;
    text-decoration: none;
    display: block;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);

    /* --- NUEVO BORDE VIOLETA --- */
    /* Creamos un borde inicial semitransparente usando tu paleta de colores */
    border: 3px solid rgba(155, 89, 182, 0.5);

    /* Preparamos la tarjeta para una transición suave en todos sus efectos */
    transition: all 0.3s ease-in-out;
}

/* --- EFECTO AL PASAR EL MOUSE (HOVER) --- */
.category-card:hover {
    /* Mantenemos el efecto de "levantar" la tarjeta */
    transform: translateY(-10px);

    /* --- BORDE Y RESPLANDOR MEJORADOS --- */
    /* Hacemos el borde 100% sólido con el color primario del tema */
    border-color: var(--color-primario);

    /* Combinamos la sombra de profundidad con un nuevo resplandor violeta */
    box-shadow: 0 8px 25px rgba(0,0,0,0.4), /* Sombra negra más grande */
                0 0 20px rgba(155, 89, 182, 0.7); /* Resplandor violeta */
}

/* Imagen dentro de la tarjeta */
.category-card img {
    width: 100%;
    height: 350px; /* Altura fija para todas las tarjetas */
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.category-card:hover img {
    transform: scale(1.1); /* Sutil efecto de zoom en la imagen */
}

/* ============================================= */
/* ESTILOS MEJORADOS PARA TARJETAS DE CATEGORÍA  */
/* ============================================= */

/* El nuevo contenedor para el título y el botón */
.category-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; /* Alinea el contenido en la parte inferior */
    text-align: center;
    transition: all 0.3s ease;
}

/* Estilo del título DENTRO del nuevo contenedor */
.category-card h3 {
    font-size: 1.8rem;
    color: var(--color-primario); /* Mantenemos el violeta */
    margin: 0 0 10px 0;
    padding: 0;
    position: static;
    background: none;

    /* === BORDE BLANCO + SOMBRA OSCURA === */
    text-shadow:
        /* Borde blanco sutil (1px) */
        -1px -1px 0 #fff,
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff,

        /* Sombra oscura de profundidad (la que ya tenías) */
        1px 1px 3px rgba(0, 0, 0, 0.7);
}

/* ¡El nuevo botón "Ver ahora"! */
.category-button {
    display: inline-block;
    padding: 8px 20px;
    background-color: var(--color-primario);
    color: var(--color-blanco);
    border-radius: 50px; /* Bordes redondeados */
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid var(--color-primario);
    transition: all 0.3s ease;
}

/* Efecto hover sutil para el botón */
.category-card:hover .category-button {
    background-color: var(--color-acento);
    border-color: var(--color-acento);
}




/* ============================================= */
/* TOQUES FINALES Y PULIDO                      */
/* ============================================= */

/* Efecto en los enlaces de navegación */
.main-nav a {
    position: relative;
    padding-bottom: 5px;
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primario);
    transition: width 0.3s ease;
}

.main-nav a:hover::after {
    width: 100%;
}

/* ============================================= */
/* ESTILO MEJORADO PARA TÍTULO DE SECCIÓN        */
/* ============================================= */

.category-section h2 {
    font-size: 2.8rem; /* Mantenemos un buen tamaño */
    font-weight: 700; /* Letra más "gorda" y moderna */
    color: var(--color-secundario); /* Color de texto principal */
    text-align: center;
    text-transform: uppercase; /* Opcional: Pone el texto en mayúsculas */
    letter-spacing: 2px; /* Opcional: Separa las letras */
    margin-bottom: 50px;
    position: relative;
    display: inline-block; /* Permite que el borde inferior se ajuste al texto */
    padding-bottom: 15px;
}

.category-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px; /* Hacemos la línea más ancha */
    height: 4px;  /* Y un poco más gruesa */
    background-color: var(--color-primario); /* Tu color violeta */
    border-radius: 2px; /* Bordes redondeados para la línea */
}

/* ============================================= */
/* PÁGINA DE CONTACTO                   */
/* ============================================= */
.contact-page {
    padding: 60px 0;
}

.contact-header {
    text-align: center;
    margin-bottom: 50px;
}

.contact-header h2 {
    font-size: 2.8rem;
    margin-bottom: 10px;
}

.contact-header p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
    color: var(--color-secundario); /* <-- SOLUCIÓN */
    opacity: 0.9; /* Un toque sutil */
}

.contact-wrapper {
    display: flex;
    flex-wrap: wrap; /* Para que se apile en pantallas pequeñas */
    gap: 50px;
    background-color: var(--color-superficie);
    padding: 40px;
    border-radius: 10px;
}

.contact-info, .contact-form {
    flex: 1; /* Hace que ambas columnas compartan el espacio */
    min-width: 300px; /* Ancho mínimo antes de que se apilen */
}

.contact-info h3, .contact-form h3 {
    font-size: 1.8rem;
    color: var(--color-primario);
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-superficie);
    border-image: linear-gradient(to right, var(--color-primario), transparent) 1;
}

.contact-info ul {
    list-style: none;
    padding: 0;
}

.contact-info li {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.contact-info li svg {
    width: 28px;
    height: 28px;
    color: var(--color-primario);
    margin-right: 15px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-secundario); /* <-- SOLUCIÓN */
}

.form-group input, .form-group textarea {
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #444;
    background-color: var(--color-fondo);
    color: var(--color-secundario);
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(155, 89, 182, 0.3);
}

.form-group textarea {
    resize: vertical; /* Permite al usuario ajustar la altura */
}



/* ============================================= */
/* PÁGINA DE OFERTAS                    */
/* ============================================= */
.offers-page {
    padding: 60px 0;
}

.offers-header {
    text-align: center;
    margin-bottom: 50px;
}

.offers-header h2 {
    font-size: 2.8rem;
    color: var(--color-primario);
    margin-bottom: 10px;
}

.offers-header p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
    color: var(--color-secundario); /* <-- SOLUCIÓN */
    opacity: 0.9; /* Un toque sutil */
}

.offer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.offer-card {
    background-color: var(--color-superficie);
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--color-primario); /* Borde violeta para destacar */
    transition: transform 0.3s ease;
}

.offer-card:hover {
    transform: scale(1.03); /* Efecto de crecimiento sutil */
}

.offer-image-container {
    position: relative; /* Necesario para la etiqueta de oferta */
}

.offer-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

.sale-badge {
    position: absolute;
    top: 15px;
    left: -1px; /* Para que quede pegado al borde */
    background-color: var(--color-primario);
    color: var(--color-blanco);
    padding: 8px 15px;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 0 5px 5px 0;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
}

.offer-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Permite que el contenido ocupe el espacio restante */
    text-align: center;
}

.offer-content h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    flex-grow: 1; /* Empuja el precio y el botón hacia abajo */
}

.offer-price {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.old-price {
    font-size: 1.2rem;
    color: #888;
    text-decoration: line-through; /* ¡El precio tachado! */
}

.new-price {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primario); /* Precio nuevo en violeta */
}

.offer-content .cta-button {
    width: 100%; /* El botón ocupa todo el ancho */
}

/* ============================================= */
/* ESTILOS PARA EL BOTÓN DE CAMBIO DE TEMA       */
/* ============================================= */
#theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-secundario); /* Hereda el color del texto */
    padding: 5px;
    border-radius: 50%;
    transition: color 0.3s ease, background-color 0.3s ease;
    margin-left: 20px; /* Espacio para separarlo de la navegación */
}

#theme-toggle:hover {
    color: var(--color-primario);
}

#theme-toggle svg {
    width: 22px;
    height: 22px;
}

/* Por defecto (tema oscuro), mostramos la luna y ocultamos el sol */
#theme-toggle .sun {
    display: none;
}
#theme-toggle .moon {
    display: block;
}

/* En modo claro, hacemos lo contrario */
body.light-mode #theme-toggle .sun {
    display: block;
}
body.light-mode #theme-toggle .moon {
    display: none;
}


/* ============================================= */
/* UNIFORMIDAD PARA TARJETAS DE PRODUCTO         */
/* ============================================= */

/* Estructura principal de la tarjeta */
.product-card {
    background-color: var(--color-superficie);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex; /* <-- CLAVE 1: Activa Flexbox */
    flex-direction: column; /* Organiza el contenido en columna (imagen, texto, botón) */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* El arreglo para la imagen */
.product-card img {
    width: 100%;
    height: 300px;  /* <-- CLAVE 2: ALTURA FIJA PARA TODAS LAS IMÁGENES */
    object-fit: cover; /* <-- CLAVE 3: LA MAGIA PARA QUE NO SE DEFORMEN */
    display: block;
}

/* Contenedor del texto y botón para mejor control */
.product-card .product-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Hace que este contenedor ocupe todo el espacio sobrante */
}

.product-content .price {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-blanco) !important; /* ¡CLAVE! Forzamos el color blanco */
    background-color: var(--color-primario); 
    padding: 5px 10px; 
    border-radius: 50px; 
    display: inline-block; 
    margin: 10px auto 15px auto; 
}
/* Busca esta regla (o la que corresponda a tus títulos de producto) */
.product-content h3, .offer-content h3 {
    font-size: 1.3rem; 
    margin-bottom: 10px;
    text-align: center;
    word-wrap: break-word; /* <-- AÑADE ESTA LÍNEA */
    overflow-wrap: break-word; /* <-- AÑADE ESTA TAMBIÉN por si acaso */
}

.product-card h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    text-align: center;
}

.product-card .price {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-primario);
    margin-bottom: 15px;
    text-align: center;
}

.product-card .add-to-cart-button {
    margin-top: auto; /* <-- CLAVE 4: EMPUJA EL BOTÓN AL FONDO DE LA TARJETA */
    width: 100%;
    text-decoration: none;
}



/* ============================================= */
/* ESTILOS UNIFICADOS PARA BOTONES FLOTANTES     */
/* ============================================= */

/* Estilo base común para AMBOS botones */
.whatsapp-float, #scrollTopBtn {
    position: fixed;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
    z-index: 99;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

/* --- Posición y color específico para WhatsApp --- */
.whatsapp-float {
    background-color: #25d366;
    color: #FFF;
    bottom: 90px;
    right: 32px;
}
.whatsapp-float:hover {
    transform: scale(1.1);
}

/* --- Posición y color específico para "Volver Arriba" --- */
#scrollTopBtn {
    background-color: var(--color-primario);
    color: var(--color-blanco);
    bottom: 90px;
    left: 20px;
    /* Lógica para ocultar/mostrar */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

#scrollTopBtn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#scrollTopBtn:hover {
    background-color: var(--color-acento);
}

/* ============================================= */
/* REGLA FINAL Y FORZADA PARA OCULTAR MENÚS      */
/* ============================================= */

/* Por defecto, OCULTA AMBOS NIVELES de menú desplegable. */
.dropdown-menu, .dropdown-menu-level2 {
    display: none !important;
}

/* MUESTRA el primer nivel SOLO al pasar el mouse por "Categorías". */
.dropdown:hover > .dropdown-menu {
    display: block !important;
}

/* MUESTRA el segundo nivel SOLO al pasar el mouse por su categoría padre. */
.dropdown-submenu:hover > .dropdown-menu-level2 {
    display: block !important;
}

/* Estilos para la lista de puntos de entrega */
.locations-list {
    list-style: none; /* Quita los puntitos de la lista */
    padding-left: 0;  /* Quita el espaciado izquierdo */
    margin-top: 5px;  /* Pequeño espacio debajo de "Puntos de entrega:" */
}

/* Estilo para el subtítulo de zona en el footer */
.zone-subtitle {
    margin-top: 15px; /* Espacio después del título "Puntos de Entrega" */
    margin-bottom: 10px; /* Espacio antes de la lista de partidos */
    color: var(--color-secundario);
    opacity: 0.9;
    font-size: 0.95rem;
}

.zone-subtitle strong {
    font-weight: 700;
    color: var(--color-primario); /* El texto "Zona Oeste:" en violeta */
}


/* ============================================= */
/* ESTILOS DEFINITIVOS PARA RESPONSIVIDAD (MÓVIL)*/
/* ============================================= */

/* Por defecto (escritorio), la hamburguesa está OCULTA */
.hamburger {
    display: none;
    background: none;
    border: none;
    color: var(--color-secundario);
    font-size: 2rem;
    cursor: pointer;
    z-index: 1001;
}

/* ============================================= */
/* BREADCRUMBS (MIGAS DE PAN)                  */
/* ============================================= */
.breadcrumbs {
    padding: 15px 0;
    margin-bottom: 25px;
    font-size: 0.9rem;
    opacity: 0.8;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}
.breadcrumbs ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap; /* Para que se ajuste en móvil */
    gap: 8px;
    padding: 0;
    margin: 0;
}
.breadcrumbs li {
    color: var(--color-secundario);
}
.breadcrumbs a {
    color: var(--color-secundario);
    text-decoration: none;
    font-weight: 600;
}
.breadcrumbs a:hover {
    color: var(--color-primario);
}

/* ============================================= */
/* HEADER DE PÁGINA/CATEGORÍA CON BANNER       */
/* ============================================= */
.page-header {
    position: relative;
    padding: 60px 0;
    text-align: center;
    background-size: cover;
    background-position: center;
    color: var(--color-blanco);
}
.page-header .hero-overlay { /* Re-usamos el overlay del hero */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
}
.page-header-content {
    position: relative;
    z-index: 2; /* Por encima del overlay */
}
.page-header h2 {
    font-size: 3rem;
    margin-bottom: 10px;
    color: var(--color-blanco);
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.page-header p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.9;
}

/* ================================================= */
/* ESTILO HORIZONTAL PARA EL MENÚ PRINCIPAL (ESCRITORIO) */
/* ================================================= */
.main-nav > ul {
    display: flex; /* Esto pone los elementos del menú en fila */
    align-items: center; /* Esto los centra verticalmente */
}

/* ============================================= */
/* ANIMACIÓN PARA EL FADE-IN DEL PANEL MÓVIL     */
/* ============================================= */
@keyframes fadeInPanel {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* ============================================= */
/* ESTILOS PARA PÁGINA DE DETALLE DE PRODUCTO    */
/* ============================================= */

.product-detail-layout {
    display: flex;
    gap: 40px;
    width: 100%;
    background-color: var(--color-superficie);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* --- Columna Izquierda: Galería de Imágenes --- */
.product-detail-gallery-wrapper {
    flex: 1 1 60%;
    display: flex;
    gap: 15px;
}

.product-thumbnails-vertical {
    flex: 0 0 90px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    overflow-x: hidden; /* Evita scroll horizontal */
    max-height: 550px;
    border-right: 1px solid rgba(128, 128, 128, 0.1);
    padding-right: 15px;
}

.product-thumbnail-vertical {
    width: 90px;
    height: 90px;
    object-fit: cover;
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: 8px;
    opacity: 0.7;
    transition: all 0.3s ease;
}
.product-thumbnail-vertical:hover { opacity: 1; }
.product-thumbnail-vertical.active { opacity: 1; border-color: var(--color-primario); }

/* --- Contenedor de la Imagen Principal (Swiper) --- */
.product-main-image-container {
    position: relative;
    flex: 1;
    background-color: var(--color-fondo);
    border-radius: 10px;
    overflow: hidden;
    height: 550px; /* Altura fija para Escritorio */
}

.main-image-swiper {
    width: 100%;
    height: 100%;
}
.main-image-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.main-image-swiper .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* ¡CLAVE! Muestra la imagen completa sin zoom */
    border-radius: 8px;
}
.main-image-swiper .swiper-button-next,
.main-image-swiper .swiper-button-prev {
    display: none; /* Ocultas en escritorio */
}

/* --- Columna Derecha: Detalles del Producto --- */
.product-detail-info-column {
    flex: 1 1 40%;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinea a la izquierda */
    padding-left: 20px;
}
.product-detail-info-column h1 {
    font-size: 2.5rem;
    color: var(--color-primario);
    margin-bottom: 20px;
    line-height: 1.2;
}
.product-detail-info-column .description {
    font-size: 1rem;
    color: var(--color-secundario);
    opacity: 0.9;
    line-height: 1.7;
    margin-bottom: 30px;
    overflow-y: auto;
}
.product-detail-info-column .description ul { list-style-position: inside; padding-left: 10px; }
.product-detail-info-column .description p { margin-bottom: 10px; }
.product-detail-info-column .price {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-primario);
    margin-bottom: 30px;
    /* Estilos del recuadro (opcional) */
    background-color: rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 10px 20px;
    border: 1px solid var(--color-primario);
    text-align: center;
    display: block;
    width: 100%;
}
body.light-mode .product-detail-info-column .price { background-color: rgba(0,0,0,0.05); }
.product-detail-info-column .cta-button {
    width: 100%;
    padding: 18px 25px;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 50px;
    text-transform: uppercase;
    margin-top: auto; /* Empuja el botón al fondo */
}


/* AHORA, definimos todo lo que cambia en pantallas chicas */
@media (max-width: 992px) {

    .page-header h2 {
        font-size: 1.8rem !important; /* Reducimos el tamaño y forzamos la regla */
        line-height: 1.3 !important;  /* Mejoramos el espaciado entre líneas */
    }
    /* --- Títulos --- */
    .hero-content h1 {
        font-size: 2.5rem;
    }
    .category-section h2, .offers-header h2, .contact-header h2 {
        font-size: 1.6rem; /* Reducimos el tamaño (igual que el de "Pedido Enviado") */
        line-height: 1.3;  /* Añadimos esto por si el título es muy largo */
    }

    /* --- Lógica del Menú Hamburguesa --- */

    /* 1. MOSTRAMOS el botón de hamburguesa */
    .hamburger {
        display: block;
    }

    /* 2. OCULTAMOS el menú de escritorio y el botón de descarga */
    .main-nav, .btn-download {
        display: none;
    }

    .main-nav > ul > li:nth-child(2) { /* Apunta SÓLO al <li> de "Ofertas" */
        border-top: 1px solid var(--color-primario);
        padding-top: 10px;
        margin-top: 10px;
    }

    /* --- Nuevo grupo para alinear los íconos --- */
    .mobile-icon-group {
        display: flex; /* Los pone en fila */
        justify-content: space-evenly; /* Les da espacio equitativo */
        align-items: center;
        width: 100%; /* Ocupa todo el ancho del panel */
        padding: 15px 0;
        margin-top: auto; /* ¡TRUCO! Empuja el grupo de íconos al fondo del panel */
        border-top: 1px solid rgba(128, 128, 128, 0.2); /* Línea divisoria sutil */
    }
    /* Ajuste para alinear perfectamente los íconos del menú móvil */
    .mobile-icon-group > button,
    .mobile-icon-group > a {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Ocultamos los botones de abrir/cerrar menú DENTRO del panel activo */
    .header-right-side.nav-active .hamburger,
    .header-right-side.nav-active .close-nav-btn {
        display: none;
    }

    /* --- Estilo para el botón de cerrar (X) --- */
    .close-nav-btn {
        display: none; /* Oculto por defecto */
        position: absolute;
        top: 15px;
        right: 20px;
        background: none;
        border: none;
        color: var(--color-secundario);
        font-size: 2.5rem;
        cursor: pointer;
        z-index: 2002;
    }

    /* Mostramos el botón de cerrar solo cuando el panel está activo */
    .header-right-side.nav-active .close-nav-btn {
        display: block;
    }

    /* Estilos del panel de menú cuando está ACTIVO (Línea 1445) */
   .header-right-side.nav-active {
    position: fixed;
    top: 0;
    right: 0;
    /*width: 280px;\* /* <-- CLAVE: Ancho fijo para la barra lateral */
    height: 100%;
    background-color: var(--color-superficie);
    box-shadow: -5px 0 15px rgba(0,0,0,0.2);
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start; /* <-- Alineamos los items a la izquierda */
    
    padding: 60px 20px 20px 20px; /* Espacio interno (más arriba para el botón de cerrar) */
    gap: 25px;
    
    transform: translateX(0%);
    transition: transform 0.3s ease-in-out;
    z-index: 2000; /* Aseguramos que esté por encima de todo */
}

    /* PEGA ESTE CÓDIGO NUEVO EN SU LUGAR */

    /* Desactivamos el hover de escritorio en móvil */
    .dropdown:hover .dropdown-menu,
    .dropdown-submenu:hover .dropdown-menu-level2 {
        display: none;
    }

    /* --- INICIO DE LA CORRECCIÓN DE ALINEACIÓN --- */

    /* Nivel 2 (Ej: "Indumentaria", "Bebés"): Indentado a la izquierda */
    .dropdown-menu {
        position: static;
        display: none; 
        box-shadow: none;
        background: none;
        min-width: unset;
        border: none;
        width: 100%;
        padding-left: 20px;
        text-align: left; /* <-- Clave: Añade indentación para la jerarquía */
    }

    /* Nivel 3 (Ej: "Remeras", "Pantalones"): Indentado a la derecha */
    .dropdown-menu-level2 {
        position: static;
        display: none; 
        box-shadow: none;
        background: none;
        min-width: unset;
        border: none;
        width: 100%;
        padding-left: 0;
        padding-right: 20px; /* <-- Indentamos desde la derecha */
        text-align: left;  /* <-- Alineamos el texto a la derecha */
    }

    /* --- FIN DE LA CORRECCIÓN DE ALINEACIÓN --- */

    /* Nueva regla para mostrar los sub-menús activos con JS */
    .dropdown-menu.submenu-active, .dropdown-menu-level2.submenu-active {
        display: block;
    }


    /* 3. Posicionamos el contenedor del menú para que aparezca desde un costado */
    .header-right-side.nav-active .main-nav,
    .header-right-side.nav-active .btn-download {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .main-nav > ul {
        flex-direction: column; /* Apilamos los links del menú */
        width: 100%;
        text-align: center;
    }

    .dropdown-menu {
        position: static; /* Hacemos que el submenú se muestre abajo */
        display: block;
        box-shadow: none;
        background: none;
        min-width: unset;
    }


    /* ============================================= */
    /* OVERLAY PARA CERRAR MENÚ MÓVIL (AÑADIR)       */
    /* ============================================= */

    /* Estado base del overlay (oculto) */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semitransparente */

        /* Z-index debe ser MENOR que el panel (que tiene z-index: 2000)
          pero MAYOR que el header (que tiene z-index: 1000)
        */
        z-index: 999;

        /* Oculto por defecto */
        opacity: 0;
        visibility: hidden;

        /* Transición suave para el fade-in */
        transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
    }

    /* Estado visible del overlay */
    .mobile-menu-overlay.is-visible {
        opacity: 1;
        visibility: visible;
    }
    /* --- AJUSTES RESPONSIVOS PARA detalle-producto.html --- */
    .product-detail-layout {
        flex-direction: column; /* Apila las columnas */
        gap: 30px;
        padding: 15px;
    }
    .product-detail-gallery-wrapper {
        flex-direction: column-reverse; /* Miniaturas abajo */
        max-width: 100%;
    }
    .product-thumbnails-vertical {
        flex-direction: row; /* Miniaturas en fila */
        overflow-x: auto;
        max-height: 100px;
        border-right: none;
        border-top: 1px solid rgba(128, 128, 128, 0.1);
        padding-right: 0;
        padding-top: 15px;
        justify-content: flex-start;
    }
    .product-thumbnail-vertical { width: 70px; height: 70px; }
    .product-main-image-container {
        height: 40vh; /* Altura móvil para la imagen */
    }

    /* Achicamos el texto del título del producto */
    .offer-card h3,
    .product-card h3 { 
        font-size: 0.95rem; /* Reducimos un poco más el tamaño */
        margin-bottom: 8px;
        
        /* ¡LA MAGIA! Permite que el texto se ajuste si es muy largo */
        word-break: break-word;
        -webkit-hyphens: auto; /* Intenta cortar la palabra con guion */
        -ms-hyphens: auto;
        hyphens: auto;
    }
    
    /* Aseguramos que el contenido esté bien alineado */
    .product-content, .offer-content {
        padding: 15px; /* Un padding consistente */
        text-align: center; /* Centramos todo el texto */
    }

    /* MOSTRAMOS flechas en móvil */
    .main-image-swiper .swiper-button-next,
    .main-image-swiper .swiper-button-prev {
        display: flex;
        color: var(--color-primario);
        background-color: rgba(0,0,0,0.3);
        height: 40px; width: 40px;
        border-radius: 50%;
        --swiper-navigation-size: 20px;
    }
    .main-image-swiper .swiper-button-next { right: 10px; }
    .main-image-swiper .swiper-button-prev { left: 10px; }
    
    .product-detail-info-column {
        flex: 1 1 100%;
        padding-left: 0;
        text-align: center;
    }
    .product-detail-info-column h1 { font-size: 2rem; }
    .product-detail-info-column .description { text-align: left; }
    .product-detail-info-column .price { font-size: 1.8rem; }
    .product-detail-info-column .cta-button { padding: 15px 20px; font-size: 1.1rem; }
}

/* ============================================= */
/* ESTILOS PARA LA GALERÍA DE IMÁGENES (MODAL)   */
/* ============================================= */

/* Da a las imágenes de producto un cursor que invita a hacer clic */
.product-image-zoomable {
    cursor: zoom-in;
}





/* --- AJUSTES PARA MÓVIL --- */
@media (max-width: 768px) {
    



}

/* ============================================= */
/* ESTILOS DEFINITIVOS PARA CARRITO DE COMPRAS     */
/* ============================================= */

/* --- Icono del Carrito en el Header --- */
.cart-icon {
    position: relative;
    background: none;
    border: none;
    color: var(--color-secundario);
    cursor: pointer;
    padding: 5px; /* Pequeño espacio para click */
    text-decoration: none; /* Asegura que no tenga subrayado */
}

.cart-counter {
    position: absolute;
    top: -5px;
    right: -8px;
    background-color: var(--color-primario);
    color: white;
    font-size: 12px;
    font-weight: bold;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- Botón "Añadir al Carrito" en las tarjetas --- */
.add-to-cart-btn {
    background-color: var(--color-primario);
    color: var(--color-blanco);
    border: none;
    padding: 12px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    font-family: var(--fuente-principal);
    transition: background-color 0.3s ease;
    width: 100%;
    margin-top: auto;
    font-size: 1rem;
}

.add-to-cart-btn:hover {
    background-color: var(--color-acento);
}


/* ============================================= */
/* ESTILOS PARA LA PÁGINA DEL CARRITO (/carrito.html) */
/* ============================================= */
@media (max-width: 768px) {

    /* ================================================= */
    /* AJUSTES RESPONSIVE PARA LA TABLA DEL CARRITO (v2) */
    /* ================================================= */

    .page-header h2 {
        font-size: 1.8rem;
    }

    .cart-table thead {
        display: none;
    }

    .cart-item-row {
        position: relative; /* Clave para posicionar el botón de eliminar */
        display: block;
        margin-bottom: 25px;
        padding: 15px;
        border-radius: 12px;
        background-color: var(--color-superficie);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        border: none;
    }

    .cart-item-row td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100% !important;
        padding: 12px 5px;
        text-align: right;
        border-bottom: 1px solid rgba(128, 128, 128, 0.1);
    }

    .cart-item-row td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        color: var(--color-secundario);
        opacity: 0.8;
    }

    .cart-table td:nth-child(1) {
        order: -1;
        justify-content: flex-start;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(128, 128, 128, 0.2);
    }
    .cart-table td:nth-child(1)::before {
        display: none;
    }

    /* --- CORRECCIÓN CLAVE --- */
    /* A la última celda le quitamos el borde y el padding para que no ocupe espacio, PERO NO la ocultamos */
    .cart-item-row td:last-child {
        padding: 0;
        border-bottom: none;
    }
    .cart-item-row td:last-child::before {
        display: none;
    }

    /* El botón de eliminar se posiciona de forma absoluta en la esquina */
    .remove-item-btn {
        position: absolute;
        top: 8px;
        right: 8px;
        font-size: 2rem;
        padding: 5px;
        z-index: 5; /* Le damos elevación para que esté por encima de todo */
    }

    /* Estilos para los botones de resumen (se mantienen igual) */
    .cart-summary-actions {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .cart-total-container {
        text-align: center;
        margin-bottom: 0;
        order: -1;
    }
    .cart-actions-buttons {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        max-width: 400px;
    }
    .cart-actions-buttons .cta-button {
        width: 100%;
        text-align: center;
        margin: 0;
    }
}
/* --- Estilos de la Tabla del Carrito (Fila Individual) --- */

.cart-item-row td {
    /* Aumentamos el padding superior e inferior para dar más espacio vertical */
    padding: 35px 10px;

    vertical-align: middle;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}


.page-container {
    padding: 60px 0;
}

.page-header {
    text-align: center;
    margin-bottom: 40px;
}


/* --- Estilos de la Tabla del Carrito --- */
.cart-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    color: var(--color-secundario);
}

.cart-table thead th {
    text-align: left;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--color-primario);
    font-size: 1.1rem;
}



.cart-product-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cart-product-info img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
}

.cart-product-info h4 {
    margin: 0;
    font-size: 1.1rem;
}
.cart-product-info p {
    margin: 5px 0 0;
    opacity: 0.8;
}

.cart-item-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.quantity-btn {
    width: 30px;
    height: 30px;
    cursor: pointer;
    border: 1px solid var(--color-secundario);
    background: none;
    color: var(--color-secundario);
    border-radius: 50%;
}



.remove-item-btn {
    background: none;
    border: none;
    color: #c0392b; /* Rojo para eliminar */
    cursor: pointer;
    font-size: 1.8rem;
    padding: 5px;
}
.remove-item-btn:hover {
    color: #e74c3c;
}

/* --- Resumen y Acciones del Carrito --- */

.clear-cart-btn {
    background-color: transparent;
    border: 2px solid #888;
    color: #888;
}

.clear-cart-btn:hover {
    background-color: #888;
    color: var(--color-blanco);
}

.empty-cart-message {
    text-align: center;
    padding: 50px 0;
}
.empty-cart-message h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
}


/* ================================================= */
/* AJUSTE PARA FOOTER MÓVIL (COMPACTO Y ESTÁTICO)   */
/* ================================================= */
@media (max-width: 768px) {
    .footer-grid {
        display: flex;
        flex-wrap: nowrap; /* Mantiene todo en una línea */
        justify-content: center;
        gap: 15px; /* Reducimos el espacio entre columnas */
        text-align: center;
    }

    .footer-column {
        flex: 1; /* Permite que las columnas compartan el espacio */
        min-width: unset; /* Quitamos el ancho mínimo */
    }

    /* --- Reducción drástica de fuentes e íconos --- */

    .footer-column h4 {
        font-size: 0.8rem; /* Títulos más pequeños */
        margin-bottom: 10px;
    }
    .footer-column h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-column ul li,
    .footer-column ul a,
    .zone-subtitle {
        font-size: 0.7rem; /* Texto de listas muy pequeño */
        margin-bottom: 8px;
    }

    .footer-social-list a {
        font-size: 0.7rem;
        gap: 5px; /* Menos espacio entre ícono y texto */
    }

    .footer-social-list svg,
    .contact-list svg {
        width: 16px; /* Íconos mucho más pequeños */
        height: 16px;
    }

    .footer-social-list {
        /* Esto hace que el bloque de la lista se ajuste a su contenido */
        display: inline-block;

        /* Y esto asegura que el texto DENTRO de la lista siga alineado a la izquierda */
        text-align: left;
    }

    .footer-bottom {
        flex-direction: column; /* Apilamos el copyright en móvil */
    }

    .footer-bottom p,
    .footer-bottom a {
        font-size: 0.7rem;
    }
}

/* ============================================= */
/* AJUSTE PARA TARJETAS DE CATEGORÍA EN MÓVIL    */
/* ============================================= */
@media (max-width: 768px) {
    .category-grid {
        /* Forzamos una grilla de 2 columnas en pantallas chicas */
        grid-template-columns: repeat(2, 1fr);
        /* Reducimos el espacio entre ellas para que quepan mejor */
        gap: 15px;
    }

    .category-card img {
        /* Achicamos la altura de la imagen para que la tarjeta no sea tan alta */
        height: 200px;
    }

    .category-card h3 {
        /* Achicamos el tamaño del título para que se ajuste al nuevo tamaño */
        font-size: 1.2rem;
        padding: 15px;
    }
    /* --- Ajuste para achicar el botón de las tarjetas de categoría en móvil --- */
    .category-button {
        padding: 6px 15px; /* Reducimos el relleno para hacerlo más pequeño */
        font-size: 0.8rem; /* Achicamos el tamaño de la letra */
        border-width: 1px; /* Hacemos el borde un poco más fino */
    }
}

/* ============================================= */
/* AJUSTE PARA GRIDA DE PRODUCTOS EN MÓVIL (EJ. OFERTAS) */
/* ============================================= */
@media (max-width: 768px) {
    /* Seleccionamos la grilla general de productos, si tuvieras más de una */
    .offer-grid,
    .product-grid { /* Añade .product-grid si tus páginas de productos usan esta clase */
        grid-template-columns: repeat(2, 1fr); /* Forzamos 2 columnas en móvil */
        gap: 15px; /* Reducimos el espacio entre las tarjetas */
    }

    /* Ajustamos el tamaño de cada tarjeta de producto */
    .offer-card,
    .product-card { /* Añade .product-card si tus páginas de productos usan esta clase */
        padding: 10px; /* Reducimos el padding interno */
    }

    /* Ajustamos las imágenes de los productos dentro de las tarjetas */
    .offer-image-container img,
    .product-image-container img { /* Ajusta según tus clases */
        height: 150px; /* Hacemos las imágenes más pequeñas */
        object-fit: cover;
    }

    /* Achicamos el texto del título del producto */
    .offer-card h3,
    .product-card h3 { 
        font-size: 0.95rem; /* Reducimos un poco más el tamaño */
        margin-bottom: 8px;
        
        /* ¡LA MAGIA! Permite que el texto se ajuste si es muy largo */
        word-break: break-word;
        -webkit-hyphens: auto; /* Intenta cortar la palabra con guion */
        -ms-hyphens: auto;
        hyphens: auto;
    }
    
    /* Aseguramos que el contenido esté bien alineado */
    .product-content, .offer-content {
        padding: 15px; /* Un padding consistente */
        text-align: center; /* Centramos todo el texto */
    }

    /* Achicamos los precios */
    .offer-price .old-price,
    .product-price .old-price { /* Ajusta según tus clases */
        font-size: 0.8rem;
    }
    .offer-price .new-price,
    .product-price .new-price { /* Ajusta según tus clases */
        font-size: 0.95rem;
    }

    /* Achicamos el botón de "Añadir al Carrito" */
    .add-to-cart-btn {
        font-size: 0.8rem;
        padding: 8px 10px;
    }

    /* Si tienes insignias de oferta o nuevos, también las achicamos */
    .sale-badge {
        font-size: 0.7rem;
        padding: 3px 6px;
        top: 8px;
        left: 8px;
    }
}

/* Estilos para el resumen de pedido en /whatsapp.html */
.order-summary {
    background-color: var(--color-superficie);
    padding: 20px;
    border-radius: 8px;
    max-width: 700px;
    margin: 20px auto;
    border-left: 5px solid var(--color-primario);
}
.order-summary h3 {
    margin-bottom: 15px;
}
.order-summary ul {
    list-style: none;
    padding: 0;
}
.order-summary li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}
.order-summary li:last-child {
    border-bottom: none;
}
.order-summary p {
    text-align: right;
    font-size: 1.2rem;
    margin-top: 15px;
}

/* ============================================= */
/* SECCIÓN INTERMEDIA DEL FOOTER (ATENCIÓN Y PAGOS) */
/* ============================================= */

/* 1. Contenedor principal que alinea todo */
.footer-middle-section {
    display: flex;
    align-items: center;
    padding: 30px 0;
    margin-top: 30px;
    border-top: 1px solid rgba(128, 128, 128, 0.1); /* Usamos el mismo estilo de borde que ya tenías */
}

/* 2. Estilos para la nueva columna de "Atención!" */
.footer-atencion {
    flex: 1; /* Ocupa la mitad del espacio */
    text-align: center;
    padding-right: 20px; /* Espacio para que no se pegue al divisor */
}

.footer-atencion h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primario);
    margin-bottom: 15px;
}

.footer-atencion p {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* 3. Modificaciones a tu clase existente .footer-payments */
.footer-payments {
    flex: 1; /* Ocupa la otra mitad del espacio */
    /* Anulamos los estilos que ahora controla el contenedor padre */
    margin-top: 0;
    padding-top: 0;
    border-top: none;

    /* === ¡LA MAGIA! El divisor vertical sutil === */
    border-left: 1px solid rgba(128, 128, 128, 0.1);
    padding-left: 20px; /* Espacio para que el contenido no se pegue al divisor */
}


/* 4. Ajuste para que se vea bien en MÓVILES */
@media (max-width: 768px) {
    .footer-middle-section {
        flex-direction: column; /* Apilamos las columnas una sobre otra */
        gap: 30px; /* Espacio entre la sección de Atención y Pagos */
    }

    .footer-atencion {
        padding-right: 0; /* Quitamos el padding lateral */
    }

    .footer-payments {
        border-left: none; /* Quitamos el divisor vertical */
        border-top: 1px solid rgba(128, 128, 128, 0.1); /* Lo reemplazamos por uno horizontal */
        padding-left: 0;
        padding-top: 30px;
        width: 100%; /* Nos aseguramos que ocupe todo el ancho */
    }
}

/* ============================================= */
/* SECCIÓN DE PREGUNTAS FRECUENTES (FAQ)       */
/* ============================================= */
.faq-section {
    padding: 60px 0;
    text-align: center;
}

.faq-container {
    max-width: 800px; /* Ancho máximo para buena legibilidad */
    margin: 0 auto;
    text-align: left;
}

.faq-item {
    background-color: var(--color-superficie);
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    overflow: hidden; /* Importante para la animación */
}

.faq-question {
    /* Reseteamos el estilo de botón */
    background: none;
    border: none;
    width: 100%;
    padding: 20px;

    /* Alineación del texto y el ícono */
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* Estilo del texto */
    font-family: var(--fuente-principal);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-secundario);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background-color: rgba(155, 89, 182, 0.1); /* Tono violeta muy sutil */
}

.faq-icon {
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--color-primario);
    transition: transform 0.3s ease-in-out;
}

.faq-answer {
    /* Ocultamos la respuesta por defecto con una animación suave */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding 0.3s ease;
}

.faq-answer p {
    padding: 0 20px 20px 20px;
    margin: 0;
    opacity: 0.9;
    line-height: 1.7;
}

/* --- ESTILOS PARA CUANDO LA PREGUNTA ESTÁ ACTIVA (ABIERTA) --- */

.faq-item.active .faq-answer {
    max-height: 1000px; /* Altura máxima que puede alcanzar la respuesta */
}

.faq-item.active .faq-icon {
    transform: rotate(45deg); /* Gira el "+" para convertirlo en una "x" */
}

/* ======================================================= */
/* EFECTO FADE-IN PARA EL FONDO DE LA SECCIÓN FAQ         */
/* ======================================================= */

/* 1. Preparamos la sección para la animación */
.faq-section {
    /* El fondo inicial es transparente (tomará el color del fondo principal) */
    background-color: transparent;

    /* ¡LA CLAVE! Animamos el cambio de color para que dure 1 segundo */
    transition: background-color 1s ease-in-out;

    /* Eliminamos los bordes que ya no queremos */
    border-top: none;
    border-bottom: none;

    /* Mantenemos el padding y la alineación */
    padding: 60px 0;
    text-align: center;
}

/* 2. Definimos el estado final cuando la sección sea visible */
/* JavaScript agregará la clase '.is-visible' cuando hagas scroll */
.faq-section.is-visible {
    background-color: rgba(155, 89, 182, 0.1); /* El tinte violeta que te gustó */
}

/* Es importante mantener esta regla para que las tarjetas de preguntas contrasten */
.faq-item {
    background-color: var(--color-superficie);
}


/* ============================================= */
/* NOTIFICACIÓN "PRODUCTO AGREGADO" (TOAST)      */
/* ============================================= */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    background-color: var(--color-superficie);
    color: var(--color-secundario);
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    border-left: 5px solid var(--color-primario);
    animation: toast-in 0.5s ease;
    font-weight: 600;
}

.toast.fade-out {
    animation: toast-out 0.5s ease forwards;
}

@keyframes toast-in {
    from {
        transform: translateX(110%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toast-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(110%);
        opacity: 0;
    }
}

/* ============================================= */
/* PANEL LATERAL DE RESUMEN DEL CARRITO (COMPACTO) */
/* ============================================= */
#cart-summary-panel {
    position: fixed;
    top: 95px;
    right: 20px;

    width: 280px;   /* Reducimos el ancho */
    max-width: calc(100% - 40px);
    height: auto;

    background-color: var(--color-superficie);
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    border-radius: 12px;

    z-index: 2001;
    padding: 15px; /* Reducimos el espacio interno */

    transform: translateX(120%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

#cart-summary-panel.is-visible {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

/* Estilos internos del panel (ajustados) */
.summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(128,128,128,0.2);
    padding-bottom: 10px; /* Menos espacio */
    margin-bottom: 15px;  /* Menos espacio */
}
.summary-header h3 {
    font-size: 1.3rem; /* Título un poco más chico */
    color: var(--color-primario);
    margin: 0;
}
.summary-close-btn {
    background: none;
    border: none;
    color: var(--color-secundario);
    font-size: 2.2rem; /* Botón de cierre un poco más chico */
    cursor: pointer;
}
.summary-totals p {
    display: flex;
    justify-content: space-between;
    font-size: 1rem; /* Texto de totales más chico */
    margin: 8px 0;
}
.summary-totals .grand-total {
    font-size: 1.2rem; /* Total un poco más chico */
    font-weight: 700;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(128,128,128,0.2);
}
.summary-actions {
    margin-top: 20px; /* Menos espacio */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Menos espacio entre botones */
}
.summary-actions .cta-button {
    width: 100%;
    text-align: center;
    padding: 10px; /* Botones un poco más chicos */
    font-size: 1rem;
}

/* ======================================================== */
/* CORRECCIÓN (V2) PÁGINA WHATSAPP (MODO CLARO) */
/* ======================================================== */

body.light-mode {

    /* 1. Arregla el título "Casi Listo..." y el subtítulo */
    /* Estos están en un .page-header, no en el form */
    .page-header h2,
    .page-header p {
        color: var(--color-secundario) !important; /* Texto oscuro */
        text-shadow: none !important; /* Quita la sombra de texto (hecha para fondo oscuro) */
    }

    /* 2. Arregla el texto DENTRO del resumen del pedido */
    .order-summary {
        color: var(--color-secundario); /* Color de texto general */
        border: 1px solid #e0e0e0; /* Borde sutil */
    }
    /* Hacemos MÁS específicos los selectores */
    .order-summary ul li,
    .order-summary p {
        color: var(--color-secundario) !important; /* Texto oscuro */
    }

    /* 3. Arregla el formulario "Tus Datos" (que ya funcionaba) */
    #whatsapp-form h3,
    #whatsapp-form label {
        color: var(--color-secundario); 
    }

    /* 4. Arregla los campos de texto (inputs) */
    #whatsapp-form input[type="text"],
    #whatsapp-form input[type="tel"],
    #whatsapp-form input[type="email"] {
        color: var(--color-secundario);      
        background-color: #ffffff;           
        border: 1px solid #cccccc;           
    }

    #whatsapp-form input::placeholder {
        color: #888;
    }





}


  /* ============================================= */
/* BUSCADOR DE PRODUCTOS (MEJORADO)              */
/* ============================================= */
.product-search-container {
    position: relative; /* Necesario para posicionar el icono */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px auto; /* Un poco más de margen superior */
    width: 100%;
    /* Ensanchamos el contenedor */
    max-width: 750px; 
}

.product-search-input {
    flex: 1;
    /* Aumentamos padding para hacerlo más alto y dejamos espacio para el icono */
    padding: 15px 50px 15px 25px; 
    border: 2px solid var(--color-primario);
    border-radius: 30px;
    font-size: 1.1rem; /* Fuente un poco más grande */
    color: var(--color-secundario);
    background-color: var(--color-superficie);
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box; /* Importante para que el padding no desborde */

    /* --- Añadimos el icono de lupa como fondo --- */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%239b59b6' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center; /* Posiciona la lupa a la derecha */
    background-size: 20px 20px; /* Tamaño del icono */
}
/* Cambiamos el color del icono en modo claro si es necesario */
body.light-mode .product-search-input {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%238e44ad' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
}


.product-search-input:focus {
    border-color: var(--color-acento);
    box-shadow: 0 0 8px #9b59b666; /* Sombra violeta al enfocar */
}

/* --- ELIMINAMOS EL BOTÓN DE BÚSQUEDA --- */
/* Ya no es necesario, el icono está dentro del input */
.product-search-btn {
    display: none; 
}

/* --- ESTILOS PARA LOS RESULTADOS (SE MANTIENEN IGUAL PERO AJUSTADOS) --- */
.search-results {
    position: absolute;
    top: calc(100% + 5px); /* Un poco separado del input */
    left: 0;
    width: 100%; 
    max-height: 300px;
    overflow-y: auto;
    background-color: var(--color-superficie); 
    border: 1px solid var(--color-primario);
    /* Bordes redondeados más suaves */
    border-radius: 15px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 1000;
    display: none; 
}

.search-results.active {
    display: block;
}

.search-item {
    display: flex;
    align-items: center;
    padding: 10px 15px; /* Más padding */
    gap: 15px; /* Más espacio */
    cursor: pointer;
    /* Borde más sutil entre items */
    border-bottom: 1px solid rgba(128, 128, 128, 0.2); 
    color: var(--color-secundario);
    background-color: var(--color-superficie);
    transition: background-color 0.2s ease, color 0.2s ease;
}
/* Quitamos borde del último item */
.search-item:last-child {
    border-bottom: none;
}


.search-item:hover {
    background-color: var(--color-primario);
    color: var(--color-blanco);
}

.search-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .product-search-container {
        /* Mantenemos flex-direction: column y gap: 15px */
        flex-direction: column;
        gap: 15px;
        max-width: 90%;
    }
    
    .product-search-input {
        width: 100%; /* El input ocupa todo el ancho */
        padding: 12px 45px 12px 20px; /* Ajustamos padding para móvil */
        font-size: 1rem;
        background-position: right 15px center; /* Ajustamos icono */
    }

    /* El botón ya está oculto, no hace falta regla .product-search-btn */
    
    .search-results {
        /* Podríamos ajustar el max-height si es necesario en móvil */
        max-height: 250px; 
    }

    .contenedor-banner-ofertas {
  /* Le damos espacio para que no se pegue al título */
  margin-bottom: 30px; 
  
  /* (Opcional) Si lo ves muy pegado arriba, descomentá la línea de abajo */
  /* margin-top: 30px; */
}

.contenedor-banner-ofertas img {
  width: 100%;  /* Ocupa el 100% de la "caja" (que ahora sí tiene el ancho correcto) */
  height: auto; /* Mantiene la proporción */
  display: block; /* Evita espacios blancos extraños */
  border-radius: 12px; /* Los bordes redondeados */
}

}




/* ============================================= */
/* ESTILOS PARA ZOOM DE PRODUCTO (MODAL)         */
/* ============================================= */

/* Contenedor para la imagen principal y el icono */
/* El .product-main-image-container ya existe en tu CSS,
   así que solo le añadimos la posición relativa */
.product-main-image-container {
    position: relative;
}

/* El .product-card img ya existe, pero asegurémonos */
.product-card img {
    width: 100%;
    display: block;
}

.zoom-icon {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2em; /* Tamaño del icono */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    z-index: 10;
}

.zoom-icon:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

/* Estilos para el Modal (fondo oscuro) */
/* Tu HTML usa id="zoomModal" y class="modal" */
#zoomModal.modal {
    display: none; 
    position: fixed; 
    z-index: 1001; /* Más alto que el header */
    padding-top: 60px; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: hidden; /* Evita scroll de la página */
    background-color: rgba(0, 0, 0, 0.9); 
}

/* Contenido del Modal (imagen) */
#zoomModal .modal-content {
    margin: auto;
    display: block;
    width: auto;
    height: 85vh; /* 85% de la altura de la ventana */
    max-width: 90vw; /* 90% del ancho de la ventana */
    object-fit: contain; 
    cursor: zoom-in;
    transition: transform 0.3s ease, left 0.3s ease, top 0.3s ease;
    position: relative; /* Necesario para el paneo */
    left: 0;
    top: 0;
}

/* Botón de cerrar */
#zoomModal .close-button {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 1002;
}

#zoomModal .close-button:hover,
#zoomModal .close-button:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Caption (opcional) */
#zoomModal #caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Clase que se aplica con JS para hacer zoom */
#zoomModal .modal-content.zoomed {
    transform: scale(2); /* Zoom al doble */
    cursor: grab; 
    object-fit: none; 
}

#zoomModal .modal-content.zoomed:active {
    cursor: grabbing;
}