/*
    SECCIÓN: Variables CSS (Root)
    DESCRIPCIÓN: Define un conjunto de variables de color que se utilizan en todo el CSS. Esto facilita la gestión y el cambio de la paleta de colores de la página.
*/
:root {
    --color-fondo-principal: #F9ECF3; /* Rosa muy claro, casi blanco. Usado como color de fondo general del body. */
    --color-fondo-secundario: #FFFFFF; /* Blanco puro. Usado para fondos de elementos como el header, cards de productos, y el modal. */
    --color-texto-principal: #4A4A4A; /* Gris oscuro suave. Color principal para textos y títulos. */
    --color-texto-secundario: #8C8C8C;/* Gris medio. Usado para textos secundarios, descripciones o elementos menos prominentes. */
    --color-acento-primario: #eeb192; /* Rosa pastel medio. Color de acento para botones, enlaces en hover, etc. */
    --color-acento-hover: #ffcbb0; /* Rosa pastel más oscuro para hover. Variante del color de acento para efectos al pasar el ratón. */
    --color-borde-sutil: #ECCFE0; /* Rosa claro para bordes. Usado para líneas divisorias y bordes suaves. */
    --color-id-discreto: #BCA2B3; /* Rosa-grisáceo discreto. Usado para tags de ID de producto. */
    --color-azul-pastel: #A8D5E2; /* Azul pastel para los botones del carrusel. */
    --color-azul-pastel-hover: #8BC4D4; /* Azul pastel más oscuro para hover. */

    /* Otros colores conservados o ajustados */
    --color-disponible: #62BF8C; /* Verde ajustado para armonizar. Para indicar disponibilidad de stock. */
    --color-agotado: #E57373; /* Rojo ajustado para armonizar. Para indicar productos agotados o el botón flotante. */
    --color-sombra-suave: rgba(0,0,0,0.06); /* Sombra más suave. Para efectos de elevación sutiles. */
    --color-sombra-media: rgba(0,0,0,0.12); /* Sombra media más suave. Para sombras más pronunciadas al hacer hover o en modales. */
    --color-fondo-modal: rgba(0,0,0,0.4);  /* Fondo oscuro semitransparente. Para el overlay del modal. */
    --color-fondo-deshabilitado: #f0f0f0;  /* Gris muy claro. Para fondos de botones deshabilitados. */
    --color-texto-deshabilitado: #BCA2B3;  /* Rosa-grisáceo para texto deshabilitado. Para texto en botones deshabilitados. */
}

/*
    CÓMO MODIFICAR:
    - Para cambiar la paleta de colores de toda la web: Modifica los códigos hexadecimales o RGBA de estas variables.
    - Puedes añadir nuevas variables para otros elementos que quieras personalizar globalmente.
*/


/*
    SECCIÓN: Estilos generales y mobile-first
    DESCRIPCIÓN: Define estilos básicos para el cuerpo de la página, como la fuente, márgenes, y el modelo de caja. Estos estilos se aplican primero y luego son sobrescritos por media queries para pantallas más grandes.
*/
body {
    font-family: 'Montserrat', sans-serif; /* Establece la fuente principal de la página. */
    margin: 0; /* Elimina el margen predeterminado del body. */
    padding: 0; /* Elimina el padding predeterminado del body. */
    box-sizing: border-box; /* Asegura que el padding y el border se incluyan en el ancho y alto total de los elementos. */
    color: var(--color-texto-principal); /* Establece el color de texto principal usando una variable. */
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* Elimina el resaltado azul que aparece al tocar elementos en móviles. */
}

/*
    CÓMO MODIFICAR:
    - Para cambiar la fuente global: Modifica el valor de `font-family`. Asegúrate de haberla importado en el HTML.
    - Para cambiar el color de texto base: Modifica `var(--color-texto-principal)`.
*/



/*
    SECCIÓN: Encabezado (Header) - REDISEÑADO
    DESCRIPCIÓN: Header moderno con gradiente elegante, mejor tipografía y efectos visuales mejorados
*/
header {
    background: linear-gradient(135deg, #f1bea5 0%, #f1bea5 50%, #f1bea5 100%);
    color: var(--color-texto-principal);
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 0 !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.header-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    position: relative;
}

.brand-info {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.company-logo {
    height: 60px !important;
    width: 60px !important;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

header h1 {
    font-size: 1.2em;
    margin: 0;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.3px;
    font-family: 'Montserrat', sans-serif;
}

/*
    CÓMO MODIFICAR:
    - Para cambiar el gradiente del header: Modifica los valores en `background: linear-gradient()`.
    - Para ajustar el padding: Cambia los valores de `padding`.
    - Para el logo: Modifica `height`, `width`, `border-radius` y `border`.
    - Para el título `<h1>`: Cambia `font-size`, `font-weight`, `color` o `text-shadow`.
*/



/*
    SECCIÓN: Navegación móvil - REDISEÑADO
    DESCRIPCIÓN: Menú de navegación modernizado con efectos visuales mejorados y mejor integración con el header
*/
.menu-toggle {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 1.8em;
    cursor: pointer;
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    z-index: 999;
    border-radius: 0 0 15px 15px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-top: none;
}

.nav-menu.active {
    display: flex;
}

.nav-menu li {
    text-align: center;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.nav-menu li:last-child {
    border-bottom: none;
    border-radius: 0 0 15px 15px;
}

.nav-menu li a {
    color: #4A4A4A;
    text-decoration: none;
    font-weight: 500;
    padding: 16px 20px;
    display: block;
    font-size: 1em;
}

/* Estilo para el ícono del carrito en el header (si está activo) */
#cart-icon {
    font-size: 1.3em;
    padding: 0;
    color: rgb(255, 170, 170);
    background: rgba(255, 255, 255, 0.9);
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 170, 170, 0.2);
}

/*
    CÓMO MODIFICAR:
    - Para cambiar el ícono del menú: Modifica el contenido del botón `☰`.
    - Para ajustar los colores del menú: Modifica `background`, `color` en `nav-menu` y `nav-menu li a`.
    - Para cambiar el comportamiento de despliegue: El `display: none` y `display: flex` se maneja con JavaScript.
*/



/*
    SECCIÓN: Estilos de Carrusel base (aplicados a ambos)
    DESCRIPCIÓN: Define los estilos generales para los contenedores de carrusel y sus elementos internos (slides y botones de navegación).
*/
.carousel-container,
.carousel-desktop,
.carousel-mobile {
    position: relative; /* Necesario para posicionar los botones de navegación. */
    max-width: 100%; /* Ocupa el ancho máximo disponible. */
    margin: 0 auto; /* Margen superior/inferior y centrado horizontal. */
    overflow: hidden; /* Oculta el contenido que se desborda del contenedor. */
    border-radius: 10px; /* Bordes redondeados. */
    background-color: var(--color-fondo-secundario); /* Fondo blanco. */
    margin-top: 0 !important;
}

.carousel-slide {
    display: none; /* Oculta todas las diapositivas por defecto (JS mostrará una). */
    width: 100%; /* Cada diapositiva ocupa el 100% del ancho del contenedor. */
    height: 100%; /* Ajuste importante para que la imagen ocupe todo el slide. */
}

.carousel-slide img {
    width: 100%; /* La imagen ocupa el 100% del ancho de la diapositiva. */
    height: 100%; /* La imagen ocupa el 100% del alto de la diapositiva. */
    object-fit: cover; /* Asegura que la imagen cubra el contenedor sin distorsión, recortando si es necesario. */
}

.prev, .next {
    cursor: pointer; /* Cambia el cursor a una mano. */
    position: absolute; /* Posiciona los botones de forma absoluta dentro del carrusel. */
    top: 50%; /* Los centra verticalmente. */
    width: 32px; /* Ancho más discreto. */
    height: 32px; /* Alto más discreto. */
    padding: 0; /* Sin relleno interno. */
    margin-top: -16px; /* Ajuste para centrado vertical perfecto. */
    color: var(--color-texto-secundario);
    font-weight: normal; /* Texto normal para ser más discreto. */
    font-size: 1.4em; /* Tamaño de la flecha más discreto. */
    border-radius: 50%; /* Bordes completamente redondeados. */
    user-select: none; /* Evita que el texto de la flecha sea seleccionable. */
    background-color: rgb(255, 255, 255);
    border: none; /* Sin borde. */
    box-shadow: 0 1px 4px rgba(168, 213, 226, 0.15); /* Sombra sutil con color azul pastel. */
    display: flex; /* Usa flexbox para centrar el contenido. */
    align-items: center; /* Centra verticalmente. */
    justify-content: center; /* Centra horizontalmente. */
}

.prev {
    left: 8px; /* Posiciona el botón 'prev' a 8px del borde izquierdo. */
}

.next {
    right: 8px; /* Posiciona el botón 'next' a 8px del borde derecho. */
}



/*
    CÓMO MODIFICAR:
    - Para cambiar la altura de los carruseles: Modifica `height` en las media queries (`.carousel-mobile` y `.carousel-desktop`).
    - Para cambiar los colores de los botones de navegación: Modifica `background-color` y `color` de `.prev, .next`.
    - Para ajustar el tamaño de las flechas: Modifica `font-size` de `.prev, .next`.
*/



/*
    SECCIÓN: Iconos de Categorías
    DESCRIPCIÓN: Estilos para el contenedor y los elementos individuales de los iconos de categoría. Permite el scroll horizontal en móviles.
*/
.category-icons-container {
    display: flex; /* Usa Flexbox para alinear los iconos horizontalmente. */
    overflow-x: auto; /* Permite el scroll horizontal si hay muchos iconos. */
    -webkit-overflow-scrolling: touch; /* Mejora el rendimiento del scroll en iOS. */
    padding: 15px 10px; /* Relleno interno. */
    gap: 15px; /* Espacio entre los iconos. */
    background-color: var(--color-fondo-secundario); /* Fondo blanco. */
    box-shadow: 0 2px 4px var(--color-sombra-suave); /* Sombra suave. */
    margin: 0 0px 20px 0px; /* Márgenes. */
    border-bottom: 1px solid var(--color-borde-sutil); /* Borde inferior. */
    justify-content: flex-start; /* Alinea los iconos al inicio (izquierda). */
    white-space: nowrap; /* Evita que los iconos se envuelvan a la siguiente línea. */
    border: none !important;
    box-shadow: none !important;
    border-top: none !important;
}

.category-icon {
    display: inline-flex; /* Permite que el ícono y el texto estén en línea y usar flexbox. */
    flex-direction: column; /* Apila el ícono y el texto verticalmente. */
    align-items: center; /* Centra horizontalmente el ícono y el texto. */
    text-decoration: none; /* Elimina el subrayado del enlace. */
    color: var(--color-texto-secundario); /* Color del texto de la categoría. */
    font-size: 0.85em; /* Tamaño de la fuente del texto. */
    font-weight: 500; /* Grosor de la fuente. */
    text-align: center; /* Centra el texto. */
    min-width: 70px; /* Ancho mínimo del icono de categoría. */
    max-width: 90px; /* Ancho máximo. */
    transition: transform 0.2s ease, color 0.2s ease; /* Transición suave al pasar el ratón. */
    flex-shrink: 0; /* Evita que los elementos se encojan en pantallas pequeñas. */
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

.category-icon:hover {
    transform: translateY(-3px); /* Pequeño desplazamiento hacia arriba al pasar el ratón. */
    color: var(--color-acento-primario); /* Cambia el color del texto al pasar el ratón. */
}

.category-icon img {
    width: 60px; /* Ancho de la imagen del icono. */
    height: 60px; /* Alto de la imagen del icono. */
    border-radius: 50%; /* Hace la imagen circular. */
    object-fit: cover; /* Asegura que la imagen cubra el contenedor sin distorsión. */
    border: none; /* Sin borde. */
    box-shadow: 0 0px 0px rgba(0,0,0,0.0); /* Sombra inicial transparente. */
    transition: box-shadow 0.2s ease; /* Transición suave para la sombra. */
}

.category-icon:hover img {
    box-shadow: 0 2px 6px var(--color-sombra-suave); /* Sombra al pasar el ratón. */
}

.category-icon span {
    margin-top: 8px; /* Margen superior para separar el texto de la imagen. */
    white-space: normal; /* Permite que el texto de la categoría se envuelva si es muy largo. */
}

/*
    CÓMO MODIFICAR:
    - Para cambiar el tamaño de los íconos de categoría: Modifica `width` y `height` de `.category-icon img`.
    - Para ajustar el espacio entre ellos: Modifica `gap` en `.category-icons-container`.
    - Para personalizar el efecto hover: Modifica `transform` y `color` en `.category-icon:hover`.
*/



/*
    SECCIÓN: Botones flotantes (subir y WhatsApp)
    DESCRIPCIÓN: Estilos para los botones de "subir" (comentado en HTML) y WhatsApp que permanecen fijos en la pantalla.
*/
.subir{
    width: 50px; /* Ancho del botón "subir". */
    position: fixed; /* Posición fija en la pantalla. */
    bottom: 70px; /* 70px desde la parte inferior. */
    right: 80px; /* 80px desde la derecha. */
}

.whasap{
    width: 50px; /* Ancho del botón de WhatsApp. */
    position: fixed; /* Posición fija en la pantalla. */
    bottom: 20px; /* 20px desde la parte inferior. */
    right: 85px; /* 85px desde la derecha. */
}

/*
    CÓMO MODIFICAR:
    - Para cambiar el tamaño: Modifica `width`.
    - Para cambiar la posición: Ajusta `bottom` y `right`.
    - Si descomentas el botón "subir", puedes aplicar estilos similares para él.
*/



/*
    SECCIÓN: Botón de Carrito Flotante
    DESCRIPCIÓN: Estilos específicos para el botón del carrito de compras que flota en la esquina inferior derecha.
*/
.floating-btn {
    position: fixed; /* Hace que el botón se quede en un lugar fijo en la pantalla. */
    bottom: 20px;    /* 20px desde la parte inferior de la pantalla. */
    right: 20px;     /* 20px desde el lado derecho de la pantalla. */
    background-color:var(--color-agotado); /* Color rojo, usando la variable de agotado. */
    color: white;    /* Texto e icono blancos. */
    border: none;
    border-radius: 50%; /* Hace que el botón sea circular. */
    width: 60px;     /* Ancho del botón. */
    height: 60px;    /* Alto del botón (igual al ancho para que sea un círculo). */
    display: flex;   /* Usa flexbox para centrar el contenido (icono y contador). */
    justify-content: center; /* Centra horizontalmente. */
    align-items: center;     /* Centra verticalmente. */
    font-size: 24px; /* Tamaño del icono. */
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para darle un efecto 3D. */
    z-index: 1000;   /* Asegura que el botón esté por encima de otros elementos. */
    transition: transform 0.3s ease; /* Transición suave al pasar el ratón. */
}

.floating-btn:hover {
    transform: scale(1.1); /* Agranda el botón ligeramente al pasar el ratón. */
}

/* Estilos para el contador de elementos en el botón flotante */
.floating-btn .cart-count {
    position: absolute; /* Posiciona el contador de forma absoluta dentro del botón. */
    top: -5px;           /* Un poco más arriba del botón. */
    right: -5px;         /* Un poco más a la derecha del botón. */
    background-color: var(--color-acento-primario); /* Color de acento para el contador. */
    color: white; /* Texto blanco. */
    font-size: 14px; /* Tamaño de la fuente. */
    font-weight: bold; /* Negrita. */
    border-radius: 50%; /* Hace que el contador sea circular. */
    padding: 4px 8px;    /* Relleno para que el número se vea bien. */
    min-width: 25px;     /* Ancho mínimo para números de un dígito. */
    text-align: center; /* Centra el texto. */
    display: none;       /* Oculto por defecto, JavaScript lo mostrará si hay ítems. */
    line-height: 1;      /* Ajusta la altura de línea para centrar el texto. */
}

/*
    CÓMO MODIFICAR:
    - Para cambiar el tamaño, color o posición del botón: Modifica `width`, `height`, `background-color`, `bottom`, `right`.
    - Para el contador: Modifica `background-color`, `color`, `font-size`, `padding`. El `display: none` y su activación se manejan con JavaScript.
*/



/*
    SECCIÓN: Filtros y Buscador
    DESCRIPCIÓN: Estilos para el contenedor del campo de búsqueda y el campo de entrada.
*/
.filters-container {
    padding: 15px; /* Relleno interno. */
    text-align: center; /* Centra el contenido (en móvil). */
    margin: 0 15px 25px; /* Márgenes. */
    border-radius: 10px; /* Bordes redondeados. */
    display: flex; /* Usa Flexbox. */
    flex-direction: column; /* Apila el icono y el input verticalmente (móvil). */
    gap: 15px; /* Espacio entre el icono y el input. */
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

.search-input-wrapper {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

#search-input {
    padding: 12px 16px !important; /* Sin padding extra a la izquierda */
    border-radius: 18px !important;
    border: 1.5px solid var(--color-borde-sutil);
    background-color: var(--color-fondo-secundario);
    font-size: 1em;
    color: var(--color-texto-principal);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 6px rgba(238, 177, 146, 0.07);
}

#search-input:focus {
    outline: none;
    border-color: var(--color-acento-primario);
    box-shadow: 0 2px 12px rgba(238, 177, 146, 0.13);
}

#search-input::placeholder {
    color: var(--color-texto-secundario); /* Color del texto del placeholder. */
    opacity: 0.8; /* Opacidad. */
}

/*
    CÓMO MODIFICAR:
    - Para ajustar el aspecto del campo de búsqueda: Modifica `padding`, `border`, `border-radius`, `font-size`, `color`.
    - Para el texto del placeholder: Modifica `color` y `opacity` en `::placeholder`.
*/



/*
    SECCIÓN: Productos Destacados
    DESCRIPCIÓN: Estilos para la sección de productos destacados que se muestra entre el buscador y la cuadrícula de productos.
*/
.featured-products-section {
    margin: 24px 12px; /* 20% menos que 30px 15px */
    padding: 20px 0; /* 20% menos que 25px */
    font-family: 'Montserrat', sans-serif; /* Consistencia con el resto de la página */
    margin-top: 2px !important;
}

.featured-header {
    text-align: center;
    margin-bottom: 20px; /* 20% menos que 25px */
    font-family: 'Montserrat', sans-serif;
}

.featured-title {
    font-size: 1.44em; /* 20% menos que 1.8em */
    font-weight: 700; /* Bold para el título */
    color: var(--color-texto-principal);
    margin: 0 0 6px 0; /* 20% menos que 8px */
    background: linear-gradient(135deg, var(--color-acento-primario), #ff9a9e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.9; /* Más discreto */
}

.featured-subtitle {
    font-size: 0.76em; /* 20% menos que 0.95em */
    color: var(--color-texto-secundario);
    margin: 0;
    font-weight: 400; /* Regular */
    line-height: 1.4;
    opacity: 0.8; /* Más discreto */
}

.featured-products-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px; /* 20% menos que 20px */
    max-width: 960px; /* 20% menos que 1200px */
    margin: 0 auto;
}

.featured-product-card {
    background: var(--color-fondo-secundario);
    border-radius: 12px; /* 20% menos que 15px */
    padding: 16px; /* 20% menos que 20px */
    box-shadow: 0 2px 8px var(--color-sombra-suave); /* Sombra más sutil */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-borde-sutil); /* Borde más sutil */
    font-family: 'Montserrat', sans-serif; /* Consistencia tipográfica */
}

.featured-product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px; /* 20% menos que 3px */
    background: linear-gradient(90deg, var(--color-acento-primario), #ff9a9e, var(--color-acento-primario));
    background-size: 200% 100%;
    animation: shimmer 3s infinite; /* Más lento para ser más discreto */
    opacity: 0.7; /* Más discreto */
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.featured-product-card:hover {
    transform: translateY(-3px); /* 20% menos que -5px */
    box-shadow: 0 4px 15px var(--color-sombra-media); /* Sombra más sutil */
    border-color: var(--color-acento-primario);
}

.featured-product-image {
    width: 100%;
    height: 160px; /* 20% menos que 200px */
    object-fit: cover;
    border-radius: 8px; /* 20% menos que 10px */
    margin-bottom: 12px; /* 20% menos que 15px */
    transition: transform 0.3s ease;
}

.featured-product-card:hover .featured-product-image {
    transform: scale(1.03); /* 20% menos que 1.05 */
}

.featured-product-info {
    text-align: center;
    font-family: 'Montserrat', sans-serif; /* Consistencia tipográfica */
}

.featured-product-name {
    font-size: 0.88em; /* 20% menos que 1.1em */
    font-weight: 400; /* Regular */
    font-family: 'Montserrat', sans-serif; /* Consistencia tipográfica */
    color: var(--color-texto-principal);
    margin: 0 0 4px 0; /* 20% menos que 5px */
    line-height: 1.3;
}

.featured-product-marca {
    font-size: 0.72em; /* 20% menos que 0.9em */
    font-family: 'Montserrat', sans-serif; /* Consistencia tipográfica */
    color: var(--color-acento-primario);
    font-weight: 400; /* Regular */
    margin: 0 0 6px 0; /* 20% menos que 8px */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9; /* Más discreto */
}

.featured-product-price {
    font-size: 1.04em; /* 20% menos que 1.3em */
    font-weight: 400; /* Regular */
    font-family: 'Montserrat', sans-serif; /* Consistencia tipográfica */
    color: var(--color-texto-principal);
    margin: 0 0 12px 0; /* 20% menos que 15px */
}

.featured-product-price::before {
    content: '$';
    font-size: 0.8em;
    margin-right: 2px;
}

.featured-add-button {
    background-color: var(--color-acento-primario); /* Mismo color que los botones normales */
    color: var(--color-fondo-secundario); /* Mismo color de texto */
    border: none;
    padding: 8px 18px; /* Mismo padding que los botones normales */
    border-radius: 6px; /* Mismo border-radius que los botones normales */
    font-weight: 500; /* Mismo font-weight que los botones normales */
    font-size: 0.85em; /* Mismo font-size que los botones normales */
    font-family: 'Montserrat', sans-serif; /* Consistencia tipográfica */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Misma transición */
    width: calc(100% - 24px); /* Mismo ancho ajustado */
    max-width: 200px; /* Mismo ancho máximo */
    text-transform: none; /* Sin mayúsculas, solo primera letra de cada palabra */
    letter-spacing: normal; /* Espaciado normal */
    opacity: 1; /* Opacidad normal */
}

.featured-add-button:hover {
    background-color: var(--color-acento-hover); /* Mismo hover que los botones normales */
    transform: none; /* Sin transformación */
    box-shadow: none; /* Sin sombra */
}

.featured-add-button:disabled {
    background-color: var(--color-fondo-deshabilitado); /* Mismo color que los botones normales */
    color: var(--color-texto-deshabilitado); /* Mismo color de texto */
    cursor: not-allowed; /* Mismo cursor */
    opacity: 0.8; /* Misma opacidad que los botones normales */
    transform: none;
    box-shadow: none;
}

/* Botón Ver producto en productos destacados */
.featured-view-button {
    background-color: #ebebeb;
    color: rgb(155, 155, 155);
    border: none;
    padding: 8px 18px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.85em;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: calc(100% - 24px);
    max-width: 200px;
    text-transform: none;
    letter-spacing: normal;
    opacity: 1;
    margin-top: 8px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.featured-view-button:hover {
    background-color: #c2c2c2;
    color: white;
}

.featured-view-button i {
    font-size: 0.9em;
}

.featured-badge {
    position: absolute;
    top: 12px; /* 20% menos que 15px */
    right: 12px; /* 20% menos que 15px */
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    color: white;
    padding: 4px 10px; /* 20% menos que 5px 12px */
    border-radius: 12px; /* 20% menos que 15px */
    font-size: 0.6em; /* 20% menos que 0.75em */
    font-weight: 400; /* Regular */
    font-family: 'Montserrat', sans-serif; /* Consistencia tipográfica */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 4px rgba(255, 107, 107, 0.2); /* Sombra más sutil */
    opacity: 0.9; /* Más discreto */
    z-index: 10; /* Asegura que esté por encima de otros elementos */
}

/*
    CÓMO MODIFICAR:
    - Para cambiar el diseño de las tarjetas destacadas: Modifica `border-radius`, `padding`, `box-shadow` en `.featured-product-card`.
    - Para el efecto shimmer: Ajusta `animation` y `background` en `::before`.
    - Para las imágenes: Modifica `height` y `object-fit` en `.featured-product-image`.
    - Para los botones: Cambia `background`, `padding`, `border-radius` en `.featured-add-button`.
*/



/*
    SECCIÓN: Sección de Productos
    DESCRIPCIÓN: Estilos para la cuadrícula donde se muestran los productos y las tarjetas individuales de cada producto.
*/
.product-grid {
    display: grid; /* Usa CSS Grid para la disposición de los productos. */
    grid-template-columns: repeat(2, 1fr); /* En móvil: 2 columnas de igual ancho. */
    gap: 15px; /* Espacio entre las tarjetas de productos. */
    padding: 20px 10px; /* Relleno alrededor de la cuadrícula. */
    max-width: 1200px; /* Ancho máximo de la cuadrícula. */
    margin: 0 auto; /* Centra la cuadrícula horizontalmente. */
    margin-top: 2px !important;
}

.product-card {
    background-color: var(--color-fondo-secundario); /* Fondo blanco. */
    border-radius: 10px; /* Bordes redondeados. */
    box-shadow: 0 2px 6px var(--color-sombra-suave); /* Sombra suave. */
    overflow: hidden; /* Oculta cualquier contenido que se desborde. */
    text-align: center; /* Centra el texto dentro de la tarjeta. */
    padding-bottom: 15px; /* Relleno en la parte inferior. */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave para efectos al pasar el ratón. */
    position: relative; /* Necesario para posicionar los tags internos. */
    border: 1px solid var(--color-borde-sutil); /* Borde sutil. */
}

.product-card:hover {
    transform: translateY(-5px); /* Movimiento sutil hacia arriba al pasar el ratón. */
    box-shadow: 0 6px 12px var(--color-sombra-media); /* Sombra más pronunciada al pasar el ratón. */
}

/* Estilo para el ID del producto (discreto) */
.product-id-tag {
    position: absolute; /* Posiciona el tag de forma absoluta dentro de la tarjeta. */
    top: 8px; /* 8px desde la parte superior. */
    left: 8px; /* 8px desde la izquierda. */
    background-color: rgba(255, 255, 255, 0.7); /* Fondo blanco semitransparente. */
    color: var(--color-id-discreto); /* Color del texto. */
    font-size: 0.6em; /* Tamaño de fuente pequeño. */
    padding: 4px 7px; /* Relleno. */
    border-radius: 5px; /* Bordes redondeados. */
    font-weight: normal; /* Fuente normal. */
    opacity: 0.9; /* Opacidad. */
    z-index: 10; /* Asegura que esté por encima de la imagen. */
}

.product-marca-tag {
    position: absolute; /* Posiciona el tag de forma absoluta dentro de la tarjeta. */
    top: 8px; /* 8px desde la parte superior. */
    right: 8px; /* 8px desde la derecha. */
    background-color: rgba(199, 98, 98, 0.7); /* Fondo rojo semitransparente. */
    color: white; /* Texto blanco. */
    font-size: 0.6em; /* Tamaño de fuente pequeño. */
    padding: 4px 7px; /* Relleno. */
    border-radius: 5px; /* Bordes redondeados. */
    font-weight: normal; /* Fuente normal. */
    opacity: 0.9; /* Opacidad. */
    z-index: 10; /* Asegura que esté por encima de la imagen. */
}

.product-card:hover .product-id-tag {
    opacity: 1; /* Aumenta la opacidad del tag al pasar el ratón por la tarjeta. */
}

.product-card img {
    width: 100%; /* La imagen ocupa el 100% del ancho de la tarjeta. */
    max-width: 800px; /* Ancho máximo de la imagen. */
    height: auto; /* Altura automática para mantener la proporción. */
    min-height: 150px; /* Altura mínima para móviles. */
    max-height: 200px; /* Altura máxima para un tamaño compacto. */
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsión. */
    border-bottom: 1px solid var(--color-borde-sutil); /* Borde inferior. */
    margin-bottom: 8px; /* Margen inferior. */
}

.product-card h3 {
    font-size: 0.9em; /* Tamaño de fuente del título del producto. */
    color: var(--color-texto-principal); /* Color del texto. */
    margin: 6px 0; /* Margen superior/inferior. */
    line-height: 1.2em; /* Altura de línea. */
    max-height: 2.4em; /* Mantiene el título en 2 líneas. */
    overflow: hidden; /* Oculta el texto que se desborda. */
    text-overflow: ellipsis; /* Añade puntos suspensivos si el texto se corta. */
    -webkit-box-orient: vertical; /* Orientación vertical para el truncado. */
    padding: 0 8px; /* Padding horizontal. */
    font-weight: normal; /* Sin negrita. */
}

.product-card .product-description {
    /* Ocultar la descripción por completo */
    display: none; /* La descripción del producto está oculta en la tarjeta. */
}

.product-card .product-category {
    font-size: 0.75em; /* Tamaño de fuente de la categoría. */
    color: var(--color-acento-primario); /* Color de acento. */
    margin-top: 5px; /* Margen superior. */
    text-transform: uppercase; /* Convierte el texto a mayúsculas. */
    font-weight: normal; /* Sin negrita. */
}

.product-card .availability {
    font-weight: normal; /* Sin negrita. */
    margin: 5px 0; /* Margen superior/inferior. */
    font-size: 0.8em; /* Tamaño de fuente. */
}

.product-card .availability.available {
    color: var(--color-disponible); /* Color verde para "Disponible". */
}

.product-card .availability.agotado {
    color: var(--color-agotado); /* Color rojo para "Agotado". */
}

.product-card .price {
    font-size: 1.2em; /* Tamaño de fuente del precio. */
    color: var(--color-texto-principal); /* Color del texto. */
    font-weight: normal; /* Sin negrita. */
    margin: 8px 0 12px; /* Márgenes ajustados. */
}

.product-card button {
    background-color: var(--color-acento-primario); /* Color de fondo del botón. */
    color: var(--color-fondo-secundario); /* Color del texto del botón. */
    border: none; /* Sin borde. */
    padding: 8px 18px; /* Relleno. */
    border-radius: 6px; /* Bordes redondeados. */
    cursor: pointer; /* Cambia el cursor a una mano. */
    font-size: 0.85em; /* Tamaño de fuente del botón. */
    transition: background-color 0.3s ease; /* Transición suave para el color de fondo. */
    width: calc(100% - 24px); /* Ancho ajustado para compensar el padding. */
    max-width: 200px; /* Ancho máximo del botón. */
    font-weight: 500; /* Grosor de la fuente. */
}

.product-card button:hover {
    background-color: var(--color-acento-hover); /* Cambia el color de fondo al pasar el ratón. */
}

.product-card button:disabled {
    background-color: var(--color-fondo-deshabilitado); /* Color de fondo cuando el botón está deshabilitado. */
    color: var(--color-texto-deshabilitado); /* Color de texto cuando el botón está deshabilitado. */
    cursor: not-allowed; /* Muestra el cursor de "no permitido". */
    opacity: 0.8; /* Opacidad reducida. */
}

/* Botón Ver producto - Estilos específicos */
.product-card .view-product-btn {
    background-color: #ebebeb;
    color: rgb(155, 155, 155);
    border: none;
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85em;
    transition: background-color 0.3s ease;
    width: calc(100% - 24px);
    max-width: 200px;
    font-weight: 500;
    margin-top: 8px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.product-card .view-product-btn:hover {
    background-color: #c2c2c2;
    color: white;
}

.view-product-btn i {
    font-size: 0.9em; /* Tamaño del ícono */
}

/*
    CÓMO MODIFICAR:
    - Para el diseño de la cuadrícula: Modifica `grid-template-columns` y `gap` en `.product-grid`.
    - Para el estilo de las tarjetas de producto: Modifica `background-color`, `border-radius`, `box-shadow`, `padding-bottom`, `margin` de `.product-card`.
    - Para las imágenes de producto: Modifica `min-height`, `max-height`, `object-fit`.
    - Para los títulos, categorías, disponibilidad y precios: Ajusta `font-size`, `color`, `margin`, `font-weight`.
    - Para los botones "Añadir al Carrito": Modifica `background-color`, `color`, `padding`, `border-radius`, `font-size`, `width`.
    - Para los tags de ID/Marca: Modifica `top`, `left`/`right`, `background-color`, `color`, `font-size`.
*/



/*
    SECCIÓN: Modal del Carrito
    DESCRIPCIÓN: Estilos para la ventana emergente que muestra los productos en el carrito y la información de pago.
*/
.modal {
    display: none; /* Oculto por defecto, JavaScript lo mostrará. */
    position: fixed; /* Fijo en la pantalla. */
    z-index: 1001; /* Alto z-index para que esté por encima de todo. */
    left: 0; /* Ocupa todo el ancho. */
    top: 0; /* Ocupa todo el alto. */
    width: 100%;
    height: 100%;
    overflow: auto; /* Permite scroll si el contenido es muy largo. */
    background-color: var(--color-fondo-modal); /* Fondo semitransparente oscuro. */
    justify-content: center; /* Centra el contenido del modal horizontalmente. */
    align-items: center; /* Centra el contenido del modal verticalmente. */
}

.modal-content {
    background-color: var(--color-fondo-secundario); /* Fondo blanco. */
    margin: auto; /* Centrado automático. */
    padding: 30px; /* Relleno interno. */
    border: 1px solid var(--color-borde-sutil); /* Borde sutil. */
    width: 90%; /* Ocupa el 90% del ancho del padre. */
    max-width: 550px; /* Ancho máximo. */
    border-radius: 12px; /* Bordes redondeados. */
    position: relative; /* Necesario para posicionar el botón de cerrar. */
    box-shadow: 0 6px 18px var(--color-sombra-media); /* Sombra. */
    text-align: center; /* Centra el texto general dentro del modal. */
}

.modal-title {
    color: var(--color-texto-principal); /* Color del título. */
    margin-top: 0; /* Sin margen superior. */
    font-size: 1.8em; /* Tamaño de fuente. */
}

.modal-instruction {
    color: var(--color-texto-secundario); /* Color del texto de instrucciones. */
    font-size: 0.9em; /* Tamaño de fuente. */
    margin-bottom: 20px; /* Margen inferior. */
}

.close-button {
    color: var(--color-texto-secundario); /* Color de la X. */
    font-size: 32px; /* Tamaño de la X. */
    font-weight: normal; /* Grosor de la fuente. */
    position: absolute; /* Posiciona la X absolutamente. */
    top: 15px; /* 15px desde la parte superior. */
    right: 25px; /* 25px desde la derecha. */
    cursor: pointer; /* Cambia el cursor a una mano. */
}

.close-button:hover, .close-button:focus {
    color: var(--color-texto-principal); /* Cambia el color al pasar el ratón. */
    opacity: 0.8; /* Opacidad reducida. */
}

#cart-items {
    margin-top: 20px; /* Margen superior. */
    margin-bottom: 20px; /* Margen inferior. */
    border-top: 1px solid var(--color-borde-sutil); /* Borde superior. */
    padding-top: 15px; /* Relleno superior. */
}

.cart-item {
    display: flex; /* Usa Flexbox. */
    justify-content: space-between; /* Distribuye el espacio. */
    align-items: center; /* Centra verticalmente. */
    padding: 10px 0; /* Relleno superior/inferior. */
    border-bottom: 1px dashed var(--color-borde-sutil); /* Borde inferior punteado. */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas. */
    text-align: left; /* Alinea el texto a la izquierda. */
}

.cart-item-info {
    flex-grow: 1; /* Permite que la información del ítem ocupe el espacio restante. */
    margin-bottom: 8px; /* Margen inferior. */
}

.cart-item-info h4 {
    margin: 0; /* Sin margen. */
    color: var(--color-texto-principal); /* Color del nombre del producto. */
    font-size: 1.2em; /* Tamaño de fuente. */
}

.cart-item-info p {
    margin: 5px 0 0; /* Margen superior. */
    font-size: 0.9em; /* Tamaño de fuente de la cantidad/precio. */
    color: var(--color-texto-secundario); /* Color de texto secundario. */
}

.cart-item-actions {
    display: flex; /* Usa Flexbox para los botones de cantidad y eliminar. */
    align-items: center; /* Centra verticalmente. */
    width: 100%; /* Ocupa todo el ancho en móvil. */
    justify-content: flex-end; /* Alinea los botones a la derecha en móvil. */
}

.cart-item-actions button {
    background-color: var(--color-acento-primario); /* Color de fondo. */
    color: var(--color-fondo-secundario); /* Color de texto. */
    border: none; /* Sin borde. */
    padding: 6px 10px; /* Relleno. */
    border-radius: 5px; /* Bordes redondeados. */
    cursor: pointer; /* Cursor de mano. */
    font-size: 0.85em; /* Tamaño de fuente. */
    margin: 0 5px; /* Margen entre botones. */
    transition: background-color 0.3s ease; /* Transición. */
}

.cart-item-actions button:hover {
    background-color: var(--color-acento-hover); /* Color de fondo al pasar el ratón. */
}

.cart-total-display {
    font-size: 1.5em; /* Tamaño de fuente del total. */
    font-weight: bold; /* Negrita. */
    color: var(--color-texto-principal); /* Color del texto. */
    display: block; /* Ocupa su propia línea. */
    text-align: right; /* Alinea a la derecha. */
    margin-top: 20px; /* Margen superior. */
}

/* Contenedor del QR */
.qr-code-container {
    margin: 30px auto 20px; /* Márgenes y centrado. */
    text-align: center; /* Centra el contenido. */
}

#qr-code-image {
    max-width: 100%; /* Ancho máximo. */
    height: auto; /* Altura automática. */
    display: block; /* Ocupa su propia línea. */
    margin: 0 auto; /* Centra la imagen. */
    border: 1px solid var(--color-borde-sutil); /* Borde sutil. */
    border-radius: 8px; /* Bordes redondeados. */
    box-shadow: 0 2px 5px var(--color-sombra-suave); /* Sombra. */
    max-height: 300px; /* Altura máxima. */
    width: 300px; /* Ancho fijo para el QR. */
}

.qr-message {
    font-size: 0.85em; /* Tamaño de fuente. */
    color: var(--color-texto-secundario); /* Color del texto. */
    margin-top: 10px; /* Margen superior. */
}

/* Botón de WhatsApp (dentro del modal) */
#checkout-button {
    background-color: var(--color-acento-primario); /* Color de fondo. */
    color: var(--color-fondo-secundario); /* Color de texto. */
    border: none; /* Sin borde. */
    padding: 15px 30px; /* Relleno. */
    border-radius: 8px; /* Bordes redondeados. */
    cursor: pointer; /* Cursor de mano. */
    font-size: 1.2em; /* Tamaño de fuente. */
    width: 100%; /* Ocupa todo el ancho disponible. */
    margin-top: 20px; /* Margen superior. */
    transition: background-color 0.3s ease; /* Transición. */
    font-weight: bold; /* Negrita. */
    display: flex; /* Usa Flexbox para centrar el icono y texto. */
    justify-content: center; /* Centra horizontalmente. */
    align-items: center; /* Centra verticalmente. */
    gap: 8px; /* Espacio entre el icono y el texto. */
}

#checkout-button:hover {
    background-color: var(--color-acento-hover); /* Color de fondo al pasar el ratón. */
}

/*
    CÓMO MODIFICAR:
    - Para la apariencia general del modal: Modifica `background-color`, `padding`, `border`, `max-width`, `border-radius`, `box-shadow` de `.modal-content`.
    - Para los textos del modal: Ajusta `font-size`, `color`, `margin` de `.modal-title` y `.modal-instruction`.
    - Para la imagen del QR: Cambia `max-height`, `width` y `border-radius`.
    - Para el botón de WhatsApp: Modifica `background-color`, `color`, `padding`, `font-size`.
    - La lógica de mostrar/ocultar el modal y la manipulación de los ítems del carrito se maneja con JavaScript.
*/



/*
    SECCIÓN: Pie de página (Footer)
    DESCRIPCIÓN: Estilos para la sección inferior de la página, incluyendo derechos de autor y enlaces a redes sociales.
*/
footer {
    background-color: var(--color-fondo-secundario); /* Fondo blanco. */
    color: var(--color-texto-principal); /* Color del texto. */
    text-align: center; /* Centra el texto. */
    padding: 20px; /* Relleno interno. */
    margin-top: 40px; /* Margen superior. */
    font-size: 0.9em; /* Tamaño de fuente. */
    box-shadow: 0 -2px 4px var(--color-sombra-suave); /* Sombra superior. */
    border-top: 1px solid var(--color-borde-sutil); /* Borde superior sutil. */
}

.footer-content {
    max-width: 1200px; /* Ancho máximo. */
    margin: 0 auto; /* Centra el contenido. */
    display: flex; /* Usa Flexbox. */
    flex-direction: column; /* Apila los elementos verticalmente (móvil). */
    align-items: center; /* Centra horizontalmente. */
    gap: 15px; /* Espacio entre los elementos del footer. */
}

.social-links {
    display: flex; /* Usa Flexbox para los íconos de redes sociales. */
    gap: 20px; /* Espacio entre los íconos. */
    margin-top: 10px; /* Margen superior. */
}

.social-icon {
    width: 30px; /* Ancho del ícono. */
    height: 30px; /* Alto del ícono. */
    object-fit: contain; /* Ajusta la imagen dentro de su contenedor. */
    transition: transform 0.2s ease, opacity 0.2s ease; /* Transición suave para efectos al pasar el ratón. */
}

.social-links a:hover .social-icon {
    transform: translateY(-3px); /* Pequeño desplazamiento hacia arriba al pasar el ratón. */
    opacity: 0.8; /* Reduce la opacidad al pasar el ratón. */
}

/*
    CÓMO MODIFICAR:
    - Para el fondo del footer: Modifica `background-color`.
    - Para el texto de derechos de autor: Ajusta `color` y `font-size`.
    - Para los íconos de redes sociales: Modifica `width`, `height`, `gap` en `.social-links`, y los efectos de `transform` y `opacity` en el `:hover`.
*/



/*
    SECCIÓN: Media Queries para Responsividad
    DESCRIPCIÓN: Estas reglas CSS ajustan el diseño de la página según el tamaño de la pantalla. Se utilizan para mostrar/ocultar elementos y cambiar la disposición para una mejor experiencia de usuario en diferentes dispositivos.
*/

/* Ocultar carruseles por defecto */
.carousel-mobile {
    display: none; /* Oculta el carrusel móvil por defecto. */
}

.carousel-desktop {
    display: none; /* Oculta el carrusel de escritorio por defecto. */
}

/* Mostrar carrusel móvil por defecto en pantallas pequeñas */
@media (max-width: 767px) {
    .carousel-mobile {
        display: block; /* Muestra el carrusel móvil en pantallas de hasta 767px de ancho. */
        height: 220px; /* Altura específica para el carrusel móvil. */
    }
    .carousel-desktop {
        display: none; /* Asegura que el carrusel desktop esté oculto en móviles. */
    }
}

/* Estilos para pantallas medianas y grandes (a partir de 768px de ancho) */
@media (min-width: 768px) {
    /* Encabezado - REDISEÑADO */
    header {
        padding: 20px 60px; /* Mayor padding en desktop. */
        flex-direction: row; /* Elementos del header en fila (horizontal). */
        background: linear-gradient(135deg, #f1bea5 0%, #f1bea5 50%, #f1bea5 100%);
    }

    .header-content {
        margin-bottom: 0; /* Elimina el margen inferior. */
        justify-content: space-between;
        align-items: center;
    }

    .brand-info {
        padding: 8px 12px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 20px;
    }

    header h1 {
        font-size: 1.6em; /* Título más grande en desktop. */
        font-weight: 700;
    }

    .company-logo {
        height: 75px !important;
        width: 75px !important;
    }

    .menu-toggle {
        display: none; /* Oculta el botón de hamburguesa en desktop. */
    }

    .nav-menu {
        display: flex; /* Muestra el menú de navegación en desktop. */
        flex-direction: row; /* Elementos del menú en fila. */
        position: static; /* Restablece la posición a estática. */
        background: transparent; /* Fondo transparente. */
        box-shadow: none; /* Sin sombra. */
        width: auto; /* Ancho automático. */
        border-radius: 0;
        border: none;
        backdrop-filter: none;
    }

    .nav-menu li {
        margin-left: 35px; /* Margen a la izquierda entre elementos del menú. */
        border-bottom: none; /* Elimina el borde inferior. */
        text-align: center;
    }

    .nav-menu li a {
        padding: 10px 16px; /* Padding para los enlaces en desktop. */
        color: #ffffff;
        font-weight: 500;
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.15);
    }

    /* Carruseles */
    .carousel-mobile {
        display: none; /* Oculta el carrusel móvil en desktop. */
    }
    .carousel-desktop {
        display: block; /* Muestra el carrusel desktop. */
        height: 380px; /* Altura para tablets y escritorios. */
        margin: 30px auto; /* Márgenes y centrado. */
    }

    .prev, .next {
        width: 38px; /* Ancho más discreto para pantallas más grandes. */
        height: 38px; /* Alto más discreto para pantallas más grandes. */
        font-size: 1.6em; /* Tamaño de fuente más discreto para las flechas. */
        margin-top: -19px; /* Ajuste para centrado vertical perfecto. */
    }
    
    .prev {
        left: 8px; /* Mantiene 8px del borde izquierdo en pantallas grandes. */
    }
    
    .next {
        right: 8px; /* Mantiene 8px del borde derecho en pantallas grandes. */
    }

    /* Ajustes para los iconos de categoría en escritorio */
    .category-icons-container {
        justify-content: center; /* Centra los iconos. */
        padding: 25px 20px; /* Mayor padding. */
        gap: 25px; /* Mayor espacio entre iconos. */
        overflow-x: hidden; /* Oculta el scroll horizontal (no necesario en desktop). */
    }

    .category-icon img {
        width: 70px; /* Iconos más grandes. */
        height: 70px;
    }
    .category-icon {
        min-width: 90px; /* Ancho mínimo ajustado. */
        font-size: 0.9em; /* Tamaño de fuente ajustado. */
    }

    /* Filtros y Buscador */
    .filters-container {
        padding: 25px; /* Mayor padding. */
        margin: 30px auto; /* Márgenes y centrado. */
        max-width: 700px; /* Ancho máximo. */
        flex-direction: row; /* Elementos del filtro en fila. */
        justify-content: center; /* Centra los elementos. */
        align-items: center; /* Centra verticalmente. */
    }

    #search-input {
        width: 400px; /* Ancho fijo para el campo de búsqueda. */
        margin-right: 0; /* Sin margen a la derecha. */
        padding: 7px;
        border-radius: 3px;
    }

    /* Productos Destacados */
    .featured-products-section {
        margin: 32px auto; /* 20% menos que 40px */
        padding: 24px 0; /* 20% menos que 30px */
        max-width: 960px; /* 20% menos que 1200px */
    }

    .featured-title {
        font-size: 1.76em; /* 20% menos que 2.2em */
    }

    .featured-subtitle {
        font-size: 0.84em; /* 20% menos que 1.05em */
    }

    .featured-products-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px; /* 20% menos que 25px */
    }

    .featured-product-card {
        padding: 20px; /* 20% menos que 25px */
    }

    .featured-product-image {
        height: 176px; /* 20% menos que 220px */
    }

    .featured-product-name {
        font-size: 0.96em; /* 20% menos que 1.2em */
    }

    .featured-product-price {
        font-size: 1.12em; /* 20% menos que 1.4em */
    }

    /* Cuadrícula de Productos */
    .product-grid {
        grid-template-columns: repeat(4, 1fr); /* En desktop: 4 columnas de igual ancho. */
        gap: 20px; /* Espacio entre productos ajustado. */
        padding: 40px 20px; /* Relleno ajustado. */
    }

    .product-card {
        padding-bottom: 20px; /* Padding inferior ajustado. */
    }

    .product-card img {
        min-height: 180px; /* Altura mínima ajustada para escritorio. */
        max-height: 250px; /* Altura máxima ajustada. */
    }

    .product-card h3 {
        font-size: 1em; /* Tamaño de fuente del título ajustado para escritorio. */
        line-height: 1.3em;
        max-height: 2.6em;
    }

    .product-card .price {
        font-size: 1.3em; /* Tamaño de fuente del precio ajustado. */
    }

    .product-card button {
        padding: 10px 20px; /* Botón de añadir al carrito más pequeño para desktop. */
        font-size: 0.9em; /* Letra del botón más pequeña para desktop. */
    }

    .product-card .view-product-btn {
        padding: 10px 20px;
        font-size: 0.9em;
    }

    /* Modal del Carrito */
    .modal-content {
        padding: 40px; /* Mayor padding. */
        max-width: 650px; /* Mayor ancho. */
    }

    #qr-code-image {
        max-width: 400px; /* Mayor ancho del QR. */
        max-height: 400px; /* Mayor altura del QR. */
        width: 400px; /* Ancho fijo. */
    }

    .cart-item-actions {
        width: auto; /* Ancho automático para los botones de acción del carrito. */
        justify-content: flex-start; /* Alinea los botones a la izquierda. */
    }

    #checkout-button {
        padding: 18px 35px; /* Mayor padding. */
        font-size: 1.3em; /* Mayor tamaño de fuente. */
    }

    /* Footer para escritorio */
    footer .footer-content {
        flex-direction: row; /* Elementos del footer en fila. */
        justify-content: space-between; /* Distribuye el espacio. */
        padding: 0 50px; /* Padding horizontal. */
    }
}

/* Estilos para pantallas muy grandes (a partir de 1024px de ancho) */
@media (min-width: 1024px) {
    .carousel-desktop {
        height: 500px; /* Mayor altura para el carrusel en pantallas muy grandes. */
    }
    
    .featured-products-container {
        gap: 24px; /* 20% menos que 30px */
    }
    
    .featured-product-image {
        height: 192px; /* 20% menos que 240px */
    }
    
    .product-grid {
        grid-template-columns: repeat(4, 1fr); /* Mantiene 4 columnas. */
        gap: 25px; /* Mayor espacio. */
    }

    .product-card img {
        min-height: 190px; /* Altura mínima ajustada. */
    }
}

/* Estilos para pantallas de 1200px o más */
@media (min-width: 1200px) {
    .product-grid {
        grid-template-columns: repeat(4, 1fr); /* Mantiene 4 columnas fijas (se podría cambiar a 5 si se desea). */
        gap: 25px;
    }
    .product-card img {
        min-height: 190px;
    }
}




/* Botón Ver más */
.ver-mas-btn {
    display: block;
    margin: 32px auto 24px auto; /* Centrado horizontal y separación arriba/abajo */
    padding: 12px 36px;
    background-color: var(--color-acento-primario);
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px var(--color-sombra-suave);
    transition: background 0.2s, box-shadow 0.2s;
    letter-spacing: 0.5px;
}
.ver-mas-btn:hover {
    background-color: var(--color-acento-hover);
    box-shadow: 0 4px 16px var(--color-sombra-media);
}

/* Animación para productos nuevos al hacer clic en 'Ver más' */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.product-card-animada {
  animation: fadeInUp 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.cintillo-marquee {
    width: 100%;
    background: linear-gradient(90deg, #ffe6f0 0%, #fff 100%);
    color: #d16b8a;
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 8px 0;
    overflow: hidden;
    position: relative;
    z-index: 900;
    box-shadow: 0 2px 8px 0 rgba(238,177,146,0.10);
}
.cintillo-marquee .marquee-inner {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: cintillo-marquee-move 18s linear infinite;
}
@keyframes cintillo-marquee-move {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.cart-bubble {
    display: none;
    position: fixed;
    bottom: 40px;
    right: 30px;
    min-width: 240px;
    max-width: 90vw;
    background: #fff;
    color: #eeb192;
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    font-size: 1.08rem;
    font-weight: 600;
    padding: 14px 18px 14px 16px;
    border-radius: 24px;
    border: 2.5px solid #eeb192;
    box-shadow: 0 4px 24px 0 rgba(238,177,146,0.18);
    z-index: 3000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s, transform 0.4s;
    transform: translateY(40px) scale(0.98);
    display: flex;
    align-items: center;
    gap: 12px;
}
.cart-bubble.show {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    animation: bubble-slide-in 0.5s cubic-bezier(.23,1.01,.32,1);
}
.cart-bubble-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffe6f0;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    box-shadow: 0 2px 8px 0 rgba(238,177,146,0.10);
}
.cart-bubble-text {
    flex: 1;
    color: #eeb192;
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.cart-bubble-close {
    color: #eeb192;
    font-size: 1.3rem;
    font-weight: bold;
    margin-left: 8px;
    cursor: pointer;
    transition: color 0.2s;
    user-select: none;
}
.cart-bubble-close:hover {
    color: #d16b8a;
}
@keyframes bubble-slide-in {
    0% { opacity: 0; transform: translateY(60px) scale(0.9); }
    80% { opacity: 1; transform: translateY(-6px) scale(1.04); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.featured-star {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    animation: star-blink 1.2s infinite alternate;
}

.featured-star svg {
    width: 100%;
    height: 100%;
    display: block;
}

.featured-star polygon {
    fill: #FFD600;
    stroke: #FFD600;
    stroke-width: 1.5;
    filter: drop-shadow(0 0 4px #FFD60088);
    transition: fill 0.3s;
    /* El color cambiará con la animación */
}

@keyframes star-blink {
    0% {
        filter: drop-shadow(0 0 6px #FFD60088);
    }
    40% {
        filter: drop-shadow(0 0 10px #FFD600cc);
    }
    50% {
        /* Rosa fuerte */
        /* Cambia el color del polígono usando CSS variable */
    }
    60% {
        filter: drop-shadow(0 0 10px #FF69B4cc);
    }
    100% {
        filter: drop-shadow(0 0 6px #FF69B4);
    }
}

/* Cambia el color de la estrella en la mitad de la animación */
.featured-star svg polygon {
    animation: star-color 1.2s infinite alternate;
}

@keyframes star-color {
    0%,40% {
        fill: #FFD600;
        stroke: #FFD600;
    }
    50%,100% {
        fill: #FF69B4;
        stroke: #FF69B4;
    }
}

/* Carrusel móvil de destacados */
.featured-carousel-mobile {
    display: none;
}

@media (max-width: 767px) {
    .featured-carousel-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        width: 100%;
        margin: 0 auto 8px auto;
        position: relative;
    }
    .featured-carousel-slide-wrapper {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        justify-content: center;
    }
    #featured-carousel-slide.featured-product-card {
        min-width: 0;
        width: 95vw;
        max-width: 340px;
        margin: 0 4px;
    }
    .featured-carousel-prev,
    .featured-carousel-next {
        background: var(--color-fondo-secundario);
        border: none;
        color: var(--color-acento-primario);
        font-size: 2.2em;
        padding: 0 10px;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(238, 177, 146, 0.10);
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
        z-index: 2;
        height: 44px;
        width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .featured-carousel-prev:hover,
    .featured-carousel-next:hover {
        background: var(--color-acento-hover);
        color: #fff;
    }
    .featured-products-container {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .featured-carousel-mobile {
        display: none !important;
    }
    .featured-products-container {
        display: grid;
    }
}

@media (max-width: 767px) {
    .category-icons-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }
    .category-icons-container::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
}

/* Formulario de WhatsApp */
.contact-whatsapp-section {
    background: var(--color-fondo-secundario);
    border-radius: 18px;
    box-shadow: 0 2px 8px var(--color-sombra-suave);
    padding: 32px 18px 24px 18px;
    max-width: 420px;
    margin: 40px auto 18px auto;
    font-family: 'Montserrat', sans-serif;
}
.contact-whatsapp-section .section-title {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--color-acento-primario);
    margin-bottom: 18px;
    text-align: center;
}
.whatsapp-form .form-group {
    margin-bottom: 16px;
}
.whatsapp-form label {
    display: block;
    font-size: 0.98em;
    color: var(--color-texto-principal);
    margin-bottom: 6px;
    font-weight: 500;
}
.whatsapp-form input,
.whatsapp-form textarea {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--color-borde-sutil);
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-texto-principal);
    background: var(--color-fondo-principal);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    resize: none;
}
.whatsapp-form input:focus,
.whatsapp-form textarea:focus {
    outline: none;
    border-color: var(--color-acento-primario);
    box-shadow: 0 2px 12px rgba(238, 177, 146, 0.13);
}
.wa-send-btn {
    background: linear-gradient(135deg, var(--color-acento-primario), #ff9a9e);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 0;
    width: 100%;
    font-size: 1.08em;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px var(--color-sombra-suave);
}
.wa-send-btn:hover {
    background: linear-gradient(135deg, var(--color-acento-hover), #ffb3b8);
    box-shadow: 0 4px 16px var(--color-sombra-media);
}

/* Sección de ubicación física */
.ubicacion-tienda-section {
    background: var(--color-fondo-secundario);
    border-radius: 18px;
    box-shadow: 0 2px 8px var(--color-sombra-suave);
    padding: 32px 18px 24px 18px;
    max-width: 520px;
    margin: 40px auto 32px auto;
    font-family: 'Montserrat', sans-serif;
}
.ubicacion-tienda-section .section-title {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--color-acento-primario);
    margin-bottom: 18px;
    text-align: center;
}
.ubicacion-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 1.08em;
    color: var(--color-texto-principal);
    justify-content: center;
}
.ubicacion-icon {
    color: var(--color-acento-primario);
    font-size: 1.5em;
    display: flex;
    align-items: center;
}
.ubicacion-direccion a {
    color: var(--color-texto-principal);
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.2s;
}
.ubicacion-direccion a:hover {
    color: var(--color-acento-primario);
}
.ubicacion-mapa {
    margin-top: 10px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px var(--color-sombra-suave);
}
@media (max-width: 600px) {
    .contact-whatsapp-section, .ubicacion-tienda-section {
        padding: 18px 6px 16px 6px;
        max-width: 98vw;
    }
    .ubicacion-mapa iframe {
        height: 180px;
    }
}

/* Layout flexible para las tarjetas de contacto y ubicación */
.info-flex-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 56px;
    justify-content: center;
    align-items: flex-start;
    margin: 60px auto 56px auto;
    max-width: 1200px;
}

/*
    SECCIÓN: Página de Detalles del Producto
    DESCRIPCIÓN: Estilos para la página verproductos.html que muestra información detallada del producto.
*/

/* Contenedor principal de la página de detalles */
.product-detail-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 15px;
    font-family: 'Montserrat', sans-serif;
}

/* Botón de regreso */
.back-button-container {
    margin-bottom: 20px;
    text-align: center;
}

.back-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background-color: var(--color-acento-primario);
    color: var(--color-fondo-secundario);
    text-decoration: none;
    border-radius: 6px;
    border: none;
    font-size: 0.85em;
    font-weight: 500;
    transition: background-color 0.3s ease;
    width: calc(100% - 24px);
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.back-button:hover {
    background-color: var(--color-acento-hover);
}

/* Contenido principal del producto */
.product-detail-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    background-color: var(--color-fondo-secundario);
    border-radius: 12px;
    padding: 25px;
    border: 1px solid var(--color-borde-sutil);
}

/* Galería de imágenes */
.product-gallery {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.main-image-container {
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--color-fondo-principal);
    border: 1px solid var(--color-borde-sutil);
}

.main-product-image {
    width: 100%;
    height: 350px;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.main-product-image:hover {
    transform: scale(1.01);
}

/* Galería de miniaturas */
.thumbnail-gallery {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.thumbnail-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--color-borde-sutil);
    transition: all 0.2s ease;
    opacity: 0.8;
}

.thumbnail-image:hover,
.thumbnail-image.active {
    border-color: var(--color-acento-primario);
    opacity: 1;
    transform: scale(1.02);
}

/* Información del producto */
.product-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Header del producto */
.product-header {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.product-id-badge {
    background-color: var(--color-fondo-principal);
    color: var(--color-texto-secundario);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 400;
    border: 1px solid var(--color-borde-sutil);
}

.product-marca-badge {
    background-color: var(--color-acento-primario);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 400;
}

/* Título del producto */
.product-title {
    font-size: 1.6em;
    font-weight: 500;
    color: var(--color-texto-principal);
    margin: 0;
    line-height: 1.3;
}

/* Categoría */
.product-category {
    margin-bottom: 12px;
    text-align: center;
}

.product-category span {
    background-color: transparent;
    color: var(--color-acento-primario);
    padding: 0;
    border-radius: 0;
    font-size: 0.75em;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0;
    border: none;
}

/* Sección de precio */
.product-price-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.price-label {
    font-size: 0.9em;
    color: var(--color-texto-secundario);
    font-weight: 400;
}

.product-price {
    font-size: 1.8em;
    font-weight: 600;
    color: var(--color-texto-principal);
}

.product-price::before {
    content: '$';
    font-size: 0.8em;
    margin-right: 2px;
}

/* Disponibilidad */
.product-availability {
    margin-bottom: 16px;
    text-align: center;
}

.availability-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.availability-badge.available {
    border-radius: 4px;
    background-color: var(--color-disponible);
    color: white;
}

.availability-badge.agotado {
    border-radius: 4px;
    background-color: var(--color-agotado);
    color: white;
}

/* Selector de cantidad */
.quantity-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.quantity-selector label {
    font-size: 0.9em;
    color: var(--color-texto-principal);
    font-weight: 400;
    text-align: center;
}

.quantity-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 160px;
}

.quantity-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-borde-sutil);
    background-color: var(--color-fondo-secundario);
    color: var(--color-texto-principal);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    transition: all 0.2s ease;
}

.quantity-btn:hover {
    background-color: var(--color-acento-primario);
    color: white;
    border-color: var(--color-acento-primario);
}

.quantity-input {
    width: 60px;
    height: 32px;
    text-align: center;
    border: 1px solid var(--color-borde-sutil);
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 400;
    color: var(--color-texto-principal);
    background-color: var(--color-fondo-secundario);
}

.quantity-input:focus {
    outline: none;
    border-color: var(--color-acento-primario);
    box-shadow: 0 0 0 1px rgba(238, 177, 146, 0.2);
}

/* Botones de acción */
.product-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

    .add-to-cart-btn-detail {
        background-color: var(--color-acento-primario);
        color: var(--color-fondo-secundario);
        border: none;
        padding: 8px 18px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.85em;
        transition: background-color 0.3s ease;
        width: calc(100% - 24px);
        max-width: 200px;
        font-weight: 500;
        margin-left: auto;
        margin-right: auto;
    }

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

    .add-to-cart-btn-detail:disabled {
        background-color: var(--color-fondo-deshabilitado);
        color: var(--color-texto-deshabilitado);
        cursor: not-allowed;
        opacity: 0.8;
    }

/* Sección de descripción */
.product-description-section {
    border-top: 1px solid var(--color-borde-sutil);
    padding-top: 20px;
}

.product-description-section h3 {
    font-size: 1.1em;
    font-weight: 500;
    color: var(--color-texto-principal);
    margin-bottom: 12px;
}

.product-description-text {
    font-size: 0.9em;
    line-height: 1.5;
    color: var(--color-texto-secundario);
    text-align: left;
}

/* Características del producto */
.product-features {
    border-top: 1px solid var(--color-borde-sutil);
    padding-top: 20px;
}

.product-features h3 {
    font-size: 1.1em;
    font-weight: 500;
    color: var(--color-texto-principal);
    margin-bottom: 12px;
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.features-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--color-fondo-principal);
    border-radius: 6px;
    border-left: 3px solid var(--color-acento-primario);
    font-size: 0.85em;
    color: var(--color-texto-principal);
}

.features-list li::before {
    content: '✓';
    color: var(--color-acento-primario);
    font-weight: bold;
    font-size: 1em;
}

/* Información adicional */
.product-additional-info {
    border-top: 1px solid var(--color-borde-sutil);
    padding-top: 20px;
}

.product-additional-info h3 {
    font-size: 1.1em;
    font-weight: 500;
    color: var(--color-texto-principal);
    margin-bottom: 12px;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background-color: var(--color-fondo-principal);
    border-radius: 6px;
    border: 1px solid var(--color-borde-sutil);
}

.info-item i {
    color: var(--color-acento-primario);
    font-size: 1em;
    width: 16px;
    text-align: center;
}

.info-item span {
    font-size: 0.85em;
    color: var(--color-texto-principal);
    font-weight: 400;
}

/* Botón flotante de WhatsApp */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    transition: transform 0.3s ease;
}

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

.whatsapp-icon {
    width: 50px;
    height: 50px;
}

/* Responsive para la página de detalles */
@media (min-width: 768px) {
    .product-detail-content {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        padding: 30px;
    }

    .main-product-image {
        height: 400px;
    }

    .thumbnail-image {
        width: 80px;
        height: 80px;
    }

    .product-title {
        font-size: 1.8em;
    }

    .product-price {
        font-size: 2em;
    }

    .product-actions {
        flex-direction: row;
        gap: 16px;
    }

    .add-to-cart-btn-detail {
        padding: 10px 20px;
        font-size: 0.9em;
    }

    .info-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .product-detail-container {
        padding: 30px;
    }

    .product-detail-content {
        gap: 50px;
        padding: 35px;
    }

    .main-product-image {
        height: 450px;
    }
}

.creative-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: none;
    border: 1px solid #f0e6e0;
    padding: 48px 32px 32px 32px;
    min-width: 320px;
    max-width: 440px;
    flex: 1 1 340px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    position: relative;
    animation: fadeInUp 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
@media (max-width: 900px) {
    .info-flex-wrapper {
        flex-direction: column;
        gap: 32px;
        max-width: 99vw;
    }
    .creative-card {
        max-width: 99vw;
        min-width: 0;
        padding: 32px 20px 20px 20px;
    }
}

.creative-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    justify-content: center;
}



.creative-icon {
    font-size: 2.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #eeb192;
    width: 48px;
    height: 48px;
    box-shadow: none;
    border: 1px solid #f0e6e0;
    animation: none;
}
.creative-icon.whatsapp {
    background: #fff;
    color: #eeb192;
    box-shadow: none;
    border: 1px solid #f0e6e0;
}
.creative-icon.location {
    background: #fff;
    color: #eeb192;
    box-shadow: none;
    border: 1px solid #f0e6e0;
}

.section-title {
    font-size: 1.18em;
    font-weight: 600;
    color: #bfa48a;
    margin: 0;
    text-align: center;
    letter-spacing: 0.2px;
}

/* Inputs y botón minimalistas */
.whatsapp-form .form-group {
    margin-bottom: 22px;
}
.whatsapp-form label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1em;
    color: #bfa48a;
    margin-bottom: 6px;
    font-weight: 400;
}
.whatsapp-form input,
.whatsapp-form textarea {
    width: 100%;
    padding: 14px 14px;
    border-radius: 10px;
    border: 1px solid #e5ded7;
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
    color: #bfa48a;
    background: #fff;
    transition: border-color 0.2s;
    box-sizing: border-box;
    resize: none;
    margin-bottom: 2px;
    box-shadow: none;
}
.whatsapp-form input:focus,
.whatsapp-form textarea:focus {
    outline: none;
    border-color: #eeb192;
    box-shadow: none;
}
.creative-btn {
    background: #fff;
    color: #bfa48a;
    border: 1.5px solid #eeb192;
    border-radius: 10px;
    padding: 14px 0;
    width: 100%;
    font-size: 1em;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    box-shadow: none;
    letter-spacing: 0.2px;
}
.creative-btn:hover {
    background: #f9f6f3;
    color: #eeb192;
    border-color: #bfa48a;
}

/* Sección de ubicación minimalista */
.ubicacion-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 1em;
    color: #bfa48a;
    justify-content: center;
    background: #fff;
    border-radius: 10px;
    padding: 10px 16px;
    box-shadow: none;
    border: 1px solid #f0e6e0;
}
.ubicacion-direccion a {
    color: #bfa48a;
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.2s;
    font-size: 1em;
}
.ubicacion-direccion a:hover {
    color: #eeb192;
}
.creative-mapa-borde {
    margin-top: 10px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: none;
    border: 1px solid #f0e6e0;
    background: #fff;
    animation: fadeInUp 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
@media (max-width: 600px) {
    .creative-card {
        padding: 24px 16px 16px 16px;
        max-width: 99vw;
    }
    .ubicacion-mapa iframe {
        height: 120px;
    }
    .info-flex-wrapper {
        gap: 14px;
        margin-bottom: 14px;
    }
}
@media (max-width: 400px) {
    .creative-card {
        min-width: 0;
        padding: 20px 12px 12px 12px;
    }
}