@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
    margin: 0;
    font-family: Poppins;
}

:root {
    /* Colores */
    --color-primary: #007bff;
    /* Azul para filtros y botones de meses */
    --color-primary-hover: #0056b3;
    --color-primary-active: #004085;

    --color-secondary: #ffd814;
    /* Amarillo principal (botones de búsqueda, añadir carrito) */
    --color-secondary-border: #e8bc0e;
    /* Borde amarillo (bubble cart, botones) */

    --color-accent: #ed1c7d;
    /* Rosa/Magenta para acentos (burbuja carrito, títulos precios) */

    --color-text-dark: #2f2f2f;
    /* Texto principal oscuro (links, botón detalle) */
    --color-text-darker: #000000;
    /* Negro puro (texto botones amarillos, bubble cart) */
    --color-text-light: #eee;
    /* Texto sobre fondos oscuros (cart tab) */
    --color-text-on-accent: #fff;
    /* Texto sobre color de acento (burbuja carrito) */
    --color-text-on-primary: #fff;
    /* Texto sobre color primario (botones filtro/meses) */
    --color-text-muted: #565959;
    /* Texto gris/apagado (diferido, descripción) */
    --color-input-text: #27292b;
    /* Color específico para texto de input e ícono */

    --color-bg-light: #fff;
    /* Fondo principal blanco (navbar, compatible img bg) */
    --color-bg-medium: #f7f7f7;
    /* Fondo gris claro (productos, searchbox, compatible bg) */
    --color-bg-medium-alt: #f0f0f0;
    /* Otro gris claro (bubble cart, scroll track) */
    --color-bg-dark: #353432;
    /* Fondo oscuro (cart tab) */
    --color-bg-overlay: #eee1;
    /* Fondo semi-transparente (cart total, item par) */
    --color-bg-detail-pseudo: #94817733;
    /* Color pseudo-elemento imagen detalle */
    --color-bg-results-hover: #f6f6f6;
    /* Hover en resultados de búsqueda */
    --color-bg-cart-close-btn: #eee;
    /* Botón cerrar carrito */
    --color-bg-quantity-span: #eee;
    /* Span cantidad +/- */

    --color-border-light: #aaaaaa;
    /* Borde separador precios detalle */
    --color-border-medium: var(--color-secondary-border);
    /* Borde amarillo (botones, bubble cart) */

    --color-shadow-light: rgba(0, 0, 0, 0.1);
    --color-shadow-medium: rgba(0, 0, 0, 0.2);

    /* Tipografía */
    --font-family-primary: 'Poppins', sans-serif;
    /* Fuente principal */
    --font-size-xxs: smaller;
    /* Texto diferido */
    --font-size-xs: .8rem;
    /* Título producto */
    --font-size-s: 1rem;
    /* Input, precio span */
    --font-size-sm: small;
    /* Nombre item carrito, descripción móvil */
    --font-size-m: medium;
    /* Botón carrito, título precio detalle, botón detalle móvil */
    --font-size-lg: large;
    /* Total carrito, botón detalle */
    --font-size-xl: x-large;
    /* Título componentes, nombre detalle móvil */
    --font-size-xxl: xx-large;
    /* Título principal, nombre detalle */
    --font-size-specific-14: 14px;
    /* Tamaño específico burbuja carrito */
    --font-size-icon-large: 35px;
    /* Icono .bx general */
    --font-size-icon-medium: 21px;
    /* Icono .bx en botones detalle */
    --font-size-price: 1.8rem;
    /* Precio producto */
    --font-size-price-detail: xx-large;
    /* Precio efectivo detalle */
    --font-size-price-card: larger;
    /* Precio tarjeta/meses detalle */


    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;

    /* Espaciado */
    --spacing-xs: 5px;
    --spacing-s: 8px;
    --spacing-m: 10px;
    --spacing-l: 15px;
    --spacing-xl: 20px;
    --spacing-gap-results: 0.25rem;
    --spacing-gap-cart-item: 5px;
    --spacing-gap-product-grid: 8px;
    --spacing-gap-detail-grid: 10px;
    --spacing-gap-buttons-months: 5px;
    --spacing-gap-filter-buttons: 5px;
    --spacing-gap-compatible-products: 8px;

    /* Tamaños */
    --container-width: 900px;
    --container-max-width: 95vw;
    --header-height: 68px;
    --cart-tab-width: 400px;
    --cart-icon-bubble-size: 25px;
    --bubble-cart-size: 45px;
    --button-height-standard: 33px;
    --button-height-large: 47px;
    --product-image-height: 144px;
    --detail-image-size: 320px;
    --compatible-image-width: 206px;
    --compatible-image-height: 144px;
    --cart-item-image-width: 70px;
    --cart-item-name-width: 150px;
    --cart-item-quantity-width: 75px;
    --cart-tab-header-height: 70px;
    --cart-tab-total-height: 30px;
    --cart-tab-footer-height: 70px;
    --scrollbar-height: 8px;
    --scrollbar-height-mobile: 3px;


    /* Bordes */
    --border-radius-small: 3px;
    --border-radius-medium: 10px;
    --border-radius-pill: 10rem;
    --border-radius-circle: 50%;
    --border-radius-results: 0.25rem;
    --border-standard: 1px solid var(--color-border-medium);
    /* Borde amarillo */

    /* Transiciones */
    --transition-speed-normal: 0.5s;
    --transition-speed-fast: 0.3s;
    --transition-timing: ease-in-out;

    /* Sombras */
    --shadow-light: 0 2px 4px var(--color-shadow-light);
    --shadow-medium: 0 4px 10px var(--color-shadow-medium);

    /* Z-Indexes */
    --z-sticky: 100;
    --z-overlay: 9999999;
}

/* Estilos Generales */
.bx {
    font-size: var(--font-size-icon-large);
}

a {
    text-decoration: none;
    color: var(--color-text-dark);
}

button {
    cursor: pointer;
}

/* Contenedor Principal */
.container {
    width: var(--container-width);
    max-width: var(--container-max-width);
    margin: auto;
    text-align: center;
    padding: var(--spacing-m) var(--spacing-m);
    transition: var(--transition-speed-normal);
}

/* Encabezado */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logoNa {
    height: 50px;
    /* Podría ser variable si se usa en otros lugares */
    transform: translateY(var(--spacing-xs));
}

.icon-cart {
    margin-right: 10px;
    position: relative;
}

.icon-cart span {
    background-color: var(--color-accent);
    position: absolute;
    top: 50%;
    right: -20%;
    width: var(--cart-icon-bubble-size);
    height: var(--cart-icon-bubble-size);
    color: var(--color-text-on-accent);
    border-radius: var(--border-radius-circle);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Burbuja Flotante Carrito */
.bubble-cart {
    position: fixed;
    bottom: var(--spacing-xl);
    /* 25px -> ~xl */
    right: var(--spacing-xl);
    /* 20px -> xl */
    width: var(--bubble-cart-size);
    height: var(--bubble-cart-size);
    background: var(--color-text-on-accent);
    color: var(--color-text-darker);
    border-radius: var(--border-radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-medium);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-speed-fast) var(--transition-timing),
        transform var(--transition-speed-fast) var(--transition-timing);
    z-index: var(--z-overlay);
    border: 1px solid var(--color-border-medium);
    /* Usando variable de borde */
}

.bubble-cart span {
    position: absolute;
    top: 50%;
    right: -20%;
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    font-size: var(--font-size-specific-14);
    width: var(--cart-icon-bubble-size);
    height: var(--cart-icon-bubble-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-circle);
    font-weight: var(--font-weight-normal);
    font-family: var(--font-family-primary);
    box-shadow: var(--shadow-medium);
}

.title {
    font-size: var(--font-size-xxl);
}

/* Barra de Navegación y Búsqueda */
.containerNavbar {
    height: var(--header-height);
    background-color: var(--color-bg-light);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.navbar {
    height: 100%;
    display: flex;
    align-items: center;
}

.navbar .searchBox {
    background: var(--color-bg-medium);
    border-radius: 8px 12px 12px 8px;
    /* Mantener si es único */
    height: fit-content;
    width: 100%;
    /* Modificado de 'auto' a '100%' */
    overflow: hidden;
    padding: 0 0 0 7px;
    /* Mantener padding izquierdo específico */
    box-shadow: var(--shadow-light);
}

.row {
    display: flex;
    align-items: center;
}

.row .bx {
    font-size: var( --font-size-icon-large);
    /* Mantener si es específico */
    /* 1.8rem */
    transform: translateY(2px);
    /* Mantener si es ajuste fino */
}

.navbar .searchBox button {
    height: 100%;
    background: var(--color-secondary);
    border: none;
    border-radius: var(--border-radius-medium);
    outline: 0;
    margin: 0;
    padding: var(--spacing-s);
}

input {
    padding: var(--spacing-l) 0;
    background: transparent;
    flex: 1;
    max-height: 2.5rem;
    /* Mantener si es específico */
    border: 0;
    outline: 0;
    font-size: var(--font-size-s);
    color: var(--color-input-text);
}

.searchBox i {
    stroke: var(--color-input-text);
    /* Asumiendo que 'i' es un SVG o similar */
}

/* Resultados de Búsqueda */
.results {
    max-height: 20rem;
    /* Mantener si es específico */
    overflow: auto;
}

.results ul {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    padding: 0;
    margin: 0;
    gap: var(--spacing-gap-results);
}

.results ul li {
    list-style: none;
    border-radius: var(--border-radius-results);
    padding: var(--font-size-s) 0.75rem;
    /* 1rem 0.75rem */
}

.results ul li:hover {
    background: var(--color-bg-results-hover);
    border-radius: var(--border-radius-results);
    /* Corregido 0.25 a variable */
}

/* Panel Lateral del Carrito (CartTab) */
.cartTab {
    background-color: var(--color-bg-dark);
    color: var(--color-text-light);
    width: var(--cart-tab-width);
    max-width: 100%;
    position: fixed;
    top: 0;
    right: calc(-1 * var(--cart-tab-width));
    /* Oculto por defecto */
    bottom: 0;
    display: grid;
    grid-template-rows: var(--cart-tab-header-height) var(--cart-tab-total-height) 1fr var(--cart-tab-footer-height);
    transition: var(--transition-speed-normal);
}

.cartTab h1 {
    padding: var(--spacing-xl);
    margin: 0;
    font-weight: var(--font-weight-light);
}

.cartTab .cartTotal {
    background-color: var(--color-bg-overlay);
    color: var(--color-text-light);
    text-align: center;
    font-size: var(--font-size-lg);
}

.cartTab .btn {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.cartTab .btn button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-border-medium);
    /* Usando borde como bg */
    border: none;
    font-size: var(--font-size-m);
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-medium);
}

.cartTab .btn button.close {
    background-color: var(--color-bg-cart-close-btn);
}

.cartTab .listCart {
    overflow: auto;
}

.cartTab .listCart::-webkit-scrollbar {
    width: 0;
}

body.activeTabCart .cartTab {
    right: 0;
}

body.activeTabCart .container {
    transform: translateX(-250px);
    /* Mantener si es específico */
}

/* Listado de Productos */
.listProduct {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-gap-product-grid);
}

.listProduct .item {
    display: flex;
    flex-direction: column;
    text-align: start;
}

.cartInfo {
    display: flex;
    flex-direction: column;
}

.containerImg {
    position: relative;
    width: 100%;
    background: var(--color-bg-medium);
    border-radius: var(--border-radius-small);
}

.listProduct .item img {
    width: 100%;
    height: var(--product-image-height);
    display: block;
    max-width: 100%;
    object-fit: contain;
}

.infoDetail {
    display: inline-block;
}

.infoDetail .searchDescription {
    display: none;
}

.listProduct .item h2 {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-xs);
    margin: 0;
    line-height: 1.3em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    text-overflow: ellipsis;
}

.listProduct .item .price {
    font-size: var(--font-size-price);
    line-height: 2.4rem;
    /* Mantener si es específico */
}

.listProduct .item .price span {
    position: relative;
    top: -.5em;
    /* Mantener si es ajuste fino */
    font-size: var(--font-size-s);
    line-height: 1.6rem;
    /* Mantener si es específico */
}

.diferido {
    font-size: var(--font-size-xxs);
    color: var(--color-text-muted);
}

.listProduct .item button {
    background-color: var(--color-secondary);
    color: var(--color-text-darker);
    padding: var(--spacing-xs) var(--spacing-m);
    border-radius: var(--border-radius-pill);
    margin-top: auto;
    border: var(--border-standard);
    cursor: pointer;
    position: relative;
    display: block;
    /* height: 100%; */
    /* Comentado, puede causar problemas con height fijo abajo */
    overflow: hidden;
    width: 100%;
    height: var(--button-height-standard);
}

/* Listado de Items en el Carrito */
.listCart .item img {
    width: 100%;
    margin-left: var(--spacing-xs);
}

.listCart .item {
    display: grid;
    grid-template-columns: var(--cart-item-image-width) var(--cart-item-name-width) var(--cart-item-quantity-width) 1fr;
    gap: var(--spacing-gap-cart-item);
    align-items: center;
    text-align: center;
}

.listCart .item .name {
    font-size: var(--font-size-sm);
}

.listCart .item .quantity {
    display: flex;
    justify-content: center;
    /* Añadido para centrar */
    align-items: center;
    /* Añadido para centrar */
}

.listCart .item .quantity span {
    width: var(--cart-icon-bubble-size);
    /* Reutilizando tamaño */
    height: var(--cart-icon-bubble-size);
    background-color: var(--color-bg-quantity-span);
    color: var(--color-text-darker);
    border-radius: var(--border-radius-circle);
    cursor: pointer;
    display: inline-flex;
    /* Asegura que funcione como flex item */
    justify-content: center;
    align-items: center;
}

.listCart .item .quantity span:nth-child(2) {
    background-color: transparent;
    color: var(--color-text-light);
    /* Texto del número */
    cursor: default;
    /* El número no es clickeable */
}

.listCart .item:nth-child(even) {
    background-color: var(--color-bg-overlay);
}
.imagenMedia {
    width: 100%;
    height: 125px;
}
.imagenMedia img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 20%;
}
/* Detalle del Producto */
.detail {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-gap-detail-grid);
    text-align: left;
}

.detail .image {
    position: relative;
    margin: auto;
    width: var(--detail-image-size);
    height: var(--detail-image-size);
    overflow: hidden;
}

.detail .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.detail .image::before {
    position: absolute;
    width: 300px;
    /* Mantener si es específico del diseño */
    height: 300px;
    content: '';
    background-color: var(--color-bg-detail-pseudo);
    z-index: -1;
    border-radius: 190px 100px 170px 180px;
    /* Mantener si es único */
    left: calc(50% - 150px);
}

.detail .name {
    font-size: var(--font-size-xxl);
    padding: var(--spacing-m) 0 0 0;
    margin: 0 0 var(--spacing-m) 0;
}

.detail .valor {
    display: flex;
    flex-direction: column;
}

.detail .valor .efectivo h3,
.detail .valor .tarjeta h3 {
    font-size: var(--font-size-m);
    margin: 0;
    color: var(--color-accent);
}

.detail .valor .tarjeta h3 {
    padding-top: var(--spacing-xs);
    border-style: solid;
    border-width: 1px 0 0;
    border-color: var(--color-border-light);
}

.contentPrice {
    display: flex;
}

.valorMeses .buttonsMeses {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-gap-buttons-months);
}

.valorMeses .buttonsMeses button {
    padding: var(--spacing-m) var(--spacing-xl);
    border: none;
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    border-radius: var(--border-radius-pill);
    cursor: pointer;
}

.buttonsMeses button:hover {
    background-color: var(--color-primary-hover);
}

.buttonsMeses button.active {
    background-color: var(--color-primary-active);
}

.detail .valor .dolar {
    position: relative;
    top: 6px;
    /* Mantener si es ajuste fino */
    font-size: var(--font-size-s);
    line-height: 1.6rem;
    /* Mantener si es específico */
    margin-right: var(--spacing-xs);
    /* Añadido espacio */
}

.detail .price {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-price-detail);
    letter-spacing: 2px;
}

.detail .priceTarjeta {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-price-card);
    letter-spacing: 2px;
}

.contentPrice .dolarT {
    color: var(--color-primary);
}

.detail .priceMeses {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-price-card);
    letter-spacing: 2px;
    color: var(--color-primary);
}

.tarjeta .textoMeses {
    color: var(--color-accent);
}

.detail .buttons {
    display: grid;
    align-content: center;
}

.detail .buttons button {
    background-color: var(--color-secondary);
    /* Cambiado a secondary */
    border: none;
    /* Asegurar que no haya borde por defecto */
    height: var(--button-height-large);
    padding: var(--spacing-m) 0;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
    border-radius: var(--border-radius-pill);
    color: var(--color-text-darker);
    /* Añadido color de texto */
}

.detail .bx {
    /* Estilo específico para icono en detalle */
    font-size: var(--font-size-icon-medium);
}

.detail .buttons button:nth-child(2) {
    background-color: var(--color-text-dark);
    /* Botón secundario oscuro */
    color: var(--color-text-on-accent);
    /* Texto blanco */
    margin-top: var(--spacing-m);
}

.detail .buttons .bx {
    /* Icono dentro de botones de detalle */
    transform: translateY(3px);
    /* Mantener si es ajuste fino */
    margin-left: var(--spacing-xs);
}

.detail .description {
    align-content: center;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    margin-top: var(--spacing-m);
}

/* Productos Compatibles */
.compatible {
    background-color: var(--color-bg-medium);
    padding: var(--spacing-m) 0;
    margin-bottom: var(--spacing-m);
}

.compatibleProducts {
    display: flex;
    gap: var(--spacing-gap-compatible-products);
    overflow-x: auto;
    max-width: var(--container-max-width);
    /* Usa variable global */
    padding-bottom: var(--spacing-m);
    /* Espacio para scrollbar */
}

.compatibleProducts .item {
    display: flex;
    flex-direction: column;
    text-align: start;
    flex-shrink: 0;
    /* Evita que los items se encojan */
}

.compatibleProducts .cartInfo {
    display: flex;
    flex-direction: column;
}

.compatibleProducts .containerImg {
    position: relative;
    width: var(--compatible-image-width);
    height: var(--compatible-image-height);
    background: var(--color-bg-light);
    /* Fondo blanco para imagen */
    border-radius: var(--border-radius-small);
}

.compatibleProducts .item img {
    width: 100%;
    height: 100%;
    display: block;
    max-width: 100%;
    object-fit: contain;
}

.compatibleProducts .infoDetail {
    display: inline-block;
    width: var(--compatible-image-width);
    /* Asegura que el texto no exceda el ancho */
}

.compatibleProducts .item h2 {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-xs);
    margin: var(--spacing-xs) 0 0 0;
    /* Añadido margen superior */
    line-height: 1.3em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    text-overflow: ellipsis;
}

.compatibleProducts .item .price {
    font-size: var(--font-size-price);
    line-height: 2.4rem;
}

.compatibleProducts .item .price span {
    position: relative;
    top: -.5em;
    font-size: var(--font-size-s);
    line-height: 1.6rem;
}

.compatibleProducts .diferido {
    font-size: var(--font-size-xxs);
    color: var(--color-text-muted);
}

.compatibleProducts .item button {
    background-color: var(--color-secondary);
    color: var(--color-text-darker);
    padding: var(--spacing-xs) var(--spacing-m);
    border-radius: var(--border-radius-pill);
    border: var(--border-standard);
    cursor: pointer;
    position: relative;
    display: block;
    /* height: 100%; */
    /* Comentado */
    overflow: hidden;
    width: 100%;
    height: var(--button-height-standard);
    margin-top: auto;
    /* Empuja el botón hacia abajo */
    margin-bottom: var(--spacing-m);
    /* Espacio inferior */
}

/* Estilos Scrollbar Productos Compatibles y Filtros */
.compatibleProducts::-webkit-scrollbar,
.filterNav::-webkit-scrollbar {
    height: var(--scrollbar-height);
}

.compatibleProducts::-webkit-scrollbar-thumb,
.filterNav::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: var(--border-radius-medium);
}

.compatibleProducts::-webkit-scrollbar-thumb:hover,
.filterNav::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-hover);
}

.compatibleProducts::-webkit-scrollbar-track,
.filterNav::-webkit-scrollbar-track {
    background: var(--color-bg-medium-alt);
}

/* Navegación de Filtros (Slider) */
.titleComponents {
    padding-top: var(--spacing-xs);
    font-size: var(--font-size-xl);
    text-align: left;
    /* Alineado a la izquierda */
    margin-left: var(--spacing-m);
    /* Margen para alinear con contenido */
}

.filterNav {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: var(--spacing-xs) 0;
    margin-bottom: var(--spacing-m);
    background-color: var(--color-bg-light);
    position: sticky;
    top: var(--header-height);
    /* Se pega debajo del header */
    z-index: var(--z-sticky);
    padding-right: var(--spacing-m);
    /* Espacio final */
    padding-bottom: var(--spacing-m);
    /* Espacio para scrollbar */

}

.filterNav button {
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-normal);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex: 0 0 auto;
    margin: 0 var(--spacing-gap-filter-buttons);
    padding: var(--spacing-xs) var(--spacing-l);
    border: none;
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    border-radius: var(--border-radius-pill);
    cursor: pointer;
    
}

.filterNav button:hover {
    background-color: var(--color-primary-hover);
}

.filterNav button.active {
    background-color: var(--color-primary-active);
}

/* Media Queries (Responsividad) */
@media screen and (max-width: 992px) {
    .listProduct {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .title {
        font-size: var(--font-size-xl);
        /* Ajustado a variable */
    }

    .listProduct {
        grid-template-columns: repeat(2, 1fr);
    }

    .detail {
        grid-template-columns: 1fr;
        margin-bottom: var(--spacing-xl);
        /* Usando variable */
    }

    .detail .image img {
        height: 35vh;
        /* Mantener vh si es intencional */
        object-fit: contain;
    }

    .detail .name {
        font-size: var(--font-size-xl);
        /* Ajustado a variable */
        margin: 0;
    }

    .detail .buttons button {
        font-size: var(--font-size-m);
        /* Ajustado a variable */
        font-weight: var(--font-weight-normal);
        /* Ajustado a variable */
    }

    .filterNav::-webkit-scrollbar,
    .compatibleProducts::-webkit-scrollbar {
        height: var(--scrollbar-height-mobile);
        /* Scrollbar más delgado */
    }

    /* .title .description no existe en el HTML/CSS original, se omite */

    .detail .description {
        font-weight: var(--font-weight-light);
        /* Ajustado a variable */
        font-size: var(--font-size-sm);
        /* Ajustado a variable */
        color: var(--color-text-muted);
        /* Ya usa variable */
        margin-top: var(--spacing-m);
        /* Ya usa variable */
    }
}

/* Slider de productos */
.slider-container {
    margin: 0;  
}

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

.slider-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-darker);
}

.ver-mas-btn {
    background-color: var(--color-secondary);
    color: var(--color-text-darker);
    padding: 0.5rem 1rem;
    border: none;
    border-radius: var(--border-radius-pill);
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.ver-mas-btn:hover {
    background-color: var(--color-accent);
    color: white;
}

.slider{
    width: 100%;
    height: 250px;
    overflow: hidden;
    --width: 181px;
    --height: 320px;
    --quantity: 9;
    border-style: solid;
    border-width: 0 0 1px 0 ;
    border-color: var(--color-border-light);
}
.slider .list{
    display: flex;
    width: 100%;
    min-width: calc(var(--width) * var(--quantity));
    position: relative;
}
.slider .list .item{
    width: var(--width);
    position: absolute;
    left: 100%;
    animation: autoRun 20s linear infinite;
    transition: filter 0.5s;
    animation-delay: calc( (20s / var(--quantity)) * (var(--position) - 1) - 20s)!important;
    background: white;
    padding: 0;
    filter: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    text-align: start;
}
.slider .list .item .cartInfo {
    display: flex;
    flex-direction: column;
}
.slider .list .item .containerImg {
    position: relative;
    width: 100%;
    background: var(--color-bg-medium);
    border-radius: var(--border-radius-small);
}
.slider .list .item .infoDetail {
    display: inline-block;
}
.slider .list .item .infoDetail h2 {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-xs);
    margin: 0;
    line-height: 1.3em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    text-overflow: ellipsis;
}
.slider .list .item .infoDetail .price {
    font-size: var(--font-size-price);
    line-height: 2.4rem;
}
.slider .list .item .infoDetail .price span {
    position: relative;
    top: -.5em;
    font-size: var(--font-size-s);
    line-height: 1.6rem;
}
.slider .list .item button{
    background-color: var(--color-secondary);
    color: var(--color-text-darker);
    padding: var(--spacing-xs) var(--spacing-m);
    border-radius: var(--border-radius-pill);
    margin-top: auto;
    border: var(--border-standard);
    cursor: pointer;
    position: relative;
    display: block;
    /* height: 100%; */
    overflow: hidden;
    width: 100%;
    height: var(--button-height-standard);
}
.slider .list .item .socio-img-3d {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.slider .list .item .socio-info {   
    flex: 0 0 auto;
}

.slider .list .item img{
    width: 100%;
    height: 150px;
    object-fit: contain;
    border-radius: 0.5em;
    margin-bottom: 0.5em;
}
.slider .list .item h3{
    margin: 0.5em 0 0.2em 0;
    font-size: 0.9em;
    color: #222;
    font-weight: normal;
    line-height: 1.3em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
}
.slider .list .item p{
    margin: 0;
    font-size: 1.2em;
    color: var(--color-accent);
    font-weight: 600;
}
@keyframes autoRun{
    from{
        left: 100%;
    }to{
        left: calc(var(--width) * -1);
    }
}
.slider:hover .item{
    animation-play-state: paused!important;
    filter: grayscale(1);
}
.slider .item:hover{
    filter: grayscale(0) brightness(1.1);
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    z-index: 2;
}
.slider[reverse="true"] .item{
    animation: reversePlay 10s linear infinite;
}
@keyframes reversePlay{
    from{
        left: calc(var(--width) * -1);
    }to{
        left: 100%;
    }
}