/* ========================================
   KUMARA - TARJETA DE PRODUCTO
   Plantilla Inteligente E-commerce
   Arquitectura Profesional
   ======================================== */

/* ============ VARIABLES CSS ============ */


/* =========================================
   CONTROL MAESTRO DE COLORES (FONDO Y TEXTO)
   ========================================= */

.km-tarjeta-producto {
    position: relative;
    width: var(--km-card-width, 280px);
    max-width: 100%;
    box-sizing: border-box;

    /* Variables personalizables */
    --km-card-padding: 15px;
    --km-card-radius: 8px;
    --km-card-aspect: 3/4;

    transition: all 0.3s ease;

    /* height: auto; */
    display: flex;
    flex-direction: column;
    overflow: hidden;

    background: var(--km-card-bg) !important;
    color: var(--km-text-color) !important;

    cursor: pointer;
}

.km-tarjeta-producto[data-background="transparent"] {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Forzar que todos los textos internos hereden el color elegido */

.km-tarjeta-producto .km-producto-titulo,
.km-tarjeta-producto .km-producto-precio,
.km-tarjeta-producto .km-producto-resenas-count {
    color: var(--km-text-color, #333333) !important;
}

/* El precio antiguo hereda el color pero con opacidad para verse secundario */
.km-tarjeta-producto .km-producto-precio-antiguo {
    color: var(--km-text-color, #333333) !important;
    opacity: 0.6;
}

/* ✅ OVERRIDE: Cuando está dentro del carrusel, forzar 100% del contenedor */
.km-card-slide .km-tarjeta-producto {
    width: 100% !important;
    max-width: none !important;
    /* ✅ Respeta Panel Global en lugar del carrusel */
    display: flex;
    flex-direction: column;
}

/* La imagen debe ajustarse al espacio disponible */
.km-card-slide .km-producto-imagen-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    /* ✅ Mantiene aspect-ratio del Panel Global */
    width: 100%;
}

.km-card-slide .km-producto-imagen {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    /* Mantiene proporción sin recortar */
}

/* El texto se ajusta automáticamente */
.km-card-slide .km-producto-info {
    flex: 0 0 auto;
    max-height: 35%;
    overflow-y: auto;
    overflow-x: hidden;
}


.km-card-slide {
    height: 100%;
    /* Toma toda la altura del contenedor */
    display: flex;
    flex-direction: column;
}


/* ============ LAYOUT: VERTICAL (CLÁSICA) ============ */
.km-tarjeta-producto[data-layout="vertical"] {
    display: flex;
    flex-direction: column;
    height: none;
}

.km-tarjeta-producto[data-layout="vertical"][data-background="solid"] {
    background: var(--km-card-bg, #ffffff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: var(--km-card-radius);
}

.km-tarjeta-producto[data-layout="vertical"] .km-producto-imagen-wrapper {
    width: 100%;
    /* aspect-ratio: var(--km-card-aspect); */
    overflow: hidden;
    border-radius: var(--km-card-radius) var(--km-card-radius) 0 0;
    height: 100%;
}

.km-tarjeta-producto[data-layout="vertical"] .km-producto-info {
    padding: var(--km-card-padding);
}

/* ============ LAYOUT: HORIZONTAL (LISTA) ============ */
.km-tarjeta-producto[data-layout="horizontal"] {
    display: grid !important;
    /* Usamos 1fr para que la derecha ocupe EXACTAMENTE lo que sobra sin recortarse */
    grid-template-columns: 40% 1fr;
    grid-template-rows: 100%;
    /* La fila siempre mide el 100% de la tarjeta */
    gap: 20px;
    /* Aumentamos el respiro con la foto */
    align-items: stretch;
    flex-direction: row;
    padding: var(--km-card-padding);
    overflow: hidden;
    /* La tarjeta en sí no scrollea, scrollea su contenido */
}

.km-tarjeta-producto[data-layout="horizontal"][data-background="solid"] {
    background: var(--km-bg-card, #ffffff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: var(--km-card-radius);
    padding: var(--km-card-padding);
}

.km-tarjeta-producto[data-layout="horizontal"] .km-producto-imagen-wrapper {
    height: 100% !important;
    width: 100%;
    position: relative;
    overflow: hidden;
    min-height: 0;
    /* Truco de Grid para permitir que el hijo se estire correctamente */
}

.km-tarjeta-producto[data-layout="horizontal"] .km-producto-imagen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Mantiene la proporción de la foto sin deformarla mientras crece */
}

/* 2. El Contenido: Debe ocupar el 100% del 60% asignado */
.km-tarjeta-producto[data-layout="horizontal"] .km-producto-info {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    /* Evita que el contenido rompa el Grid */

    /* El scroll ahora vive aquí: el título NO desaparecerá, 
       simplemente se moverá con el resto si no hay espacio */
    overflow-y: auto;
    overflow-x: hidden;

    /* Alineación interna */
    padding: 5px 0;

    max-height: none;
}

/* ============ LAYOUT: MINIMALISTA (SUPERPUESTA) ============ */
.km-tarjeta-producto[data-layout="minimalista"] {
    position: relative;
    aspect-ratio: var(--km-card-aspect);
    overflow: hidden;
    border-radius: var(--km-card-radius);
}

.km-tarjeta-producto[data-layout="minimalista"] .km-producto-imagen-wrapper {
    width: 100%;
    height: 100%;
}

.km-tarjeta-producto[data-layout="minimalista"] .km-producto-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--km-card-padding);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    color: white;
}
  

/* ============ ELEMENTOS: IMAGEN ============ */
.km-producto-imagen-wrapper {
    position: relative;
    background: #f5f5f5;

    flex-shrink: 1;
    /* Permite que se achique */
    min-height: 0;
    /* Importante: permite que flex reduzca el tamaño */
    pointer-events: none;
}

.km-producto-imagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.km-producto-imagen-secondary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* Efecto: Zoom en Imagen */
.km-tarjeta-producto[data-image-hover="zoom"]:hover .km-producto-imagen {
    transform: scale(1.1);
}

/* Efecto: Intercambio de Imagen */
.km-tarjeta-producto[data-image-hover="intercambio"]:hover .km-producto-imagen {
    opacity: 0;
}

.km-tarjeta-producto[data-image-hover="intercambio"]:hover .km-producto-imagen-secondary {
    opacity: 1;
}

/* ============ ELEMENTOS: BADGE (ETIQUETA) ============ */
/* 1. El "Jefe": Contenedor que agrupa las etiquetas */
.km-producto-etiquetas {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    /* Apila una debajo de otra */
    gap: 6px;
    /* Espacio entre ellas */
    align-items: flex-start;
    z-index: 10;
}

/* 2. Estilo base unificado (limpiamos el position: absolute de aquí) */
.km-producto-badge,
.km-producto-descuento {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.5px;
    text-align: center;
}

/* 3. Tus estilos específicos de Badge (OFERTA, NUEVO, AGOTADO) */
.km-producto-badge {
    background: var(--km-accent-danger, #dc3545);
    /* Usa variable global de acento */
    text-transform: uppercase;
}

.km-producto-badge[data-badge="nuevo"] {
    background: #198754;
}

.km-producto-badge[data-badge="agotado"] {
    background: #6c757d;
}

/* 4. Estilo de Descuento - Conectado a variable global */
.km-producto-descuento {
    background: var(--km-accent-danger, #dc3545);
}

/* 5. Tu animación de pulso (se mantiene intacta) */
.km-tarjeta-producto[data-product-id="preview"] .km-producto-badge,
.km-tarjeta-producto[data-product-id="preview"] .km-producto-descuento {
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* ============ ELEMENTOS: INFORMACIÓN ============ */
.km-producto-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Nuevas reglas de altura */
    height: auto;
    /* Permite que crezca según el contenido */

    flex-grow: 1;
    /* 🧱 Se estira para llenar cualquier espacio vacío dentro de la tarjeta */

    flex-shrink: 0;
    /* NO se achica */
    overflow-y: auto;
    /* Scroll vertical */
    overflow-x: hidden;
    /* Sin scroll horizontal */
    min-height: 0;
    /* Mínimo visible */
    max-height: var(--km-info-height, 40%);

}

/* ESTILO PARA SCROLL BAR */

.km-producto-info::-webkit-scrollbar {
    width: 4px;
}

.km-producto-info::-webkit-scrollbar-track {
    background: transparent;
}

.km-producto-info::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.km-producto-info::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
}

.km-producto-titulo {
    font-size: 16px;
    font-weight: 600;
    color: var(--km-text-primary, #333333);
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-shrink: 0;
}

.km-tarjeta-producto[data-layout="minimalista"] .km-producto-titulo {
    color: white;
}

/* ============ ELEMENTOS: ESTRELLAS (SISTEMA DINÁMICO) ============ */
.km-producto-estrellas {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.km-estrellas-wrapper {
    position: relative;
    display: inline-block;
    font-size: 16px;
    line-height: 1;
}

.km-estrellas-fondo {
    color: var(--km-stars-empty, #dddddd);
}

.km-estrellas-lleno {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--km-stars-filled, #ffc107);
    overflow: hidden;
    white-space: nowrap;
}

/* Clases alternativas para estrellas individuales (legacy) - Conectadas a variables globales */
.km-estrella,
.km-estrella-half {
    color: var(--km-stars-filled, #ffc107);
}

.km-estrella-empty {
    color: var(--km-stars-empty, #dddddd);
}

.km-producto-resenas-count {
    font-size: 12px;
    color: #666;
    margin-left: 4px;
}

.km-tarjeta-producto[data-layout="minimalista"] .km-producto-resenas-count {
    color: rgba(255, 255, 255, 0.8);
}

/* ============ ELEMENTOS: PRECIOS ============ */
.km-producto-precios {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

/* Control del orden mediante atributos inyectados por el Modal */
.km-tarjeta-producto[data-price-order="new-first"] .km-producto-precio {
    order: 1;
}

.km-tarjeta-producto[data-price-order="new-first"] .km-producto-precio-antiguo {
    order: 2;
}

.km-tarjeta-producto[data-price-order="old-first"] .km-producto-precio-antiguo {
    order: 1;
}

.km-tarjeta-producto[data-price-order="old-first"] .km-producto-precio {
    order: 2;
}

.km-producto-precio {
    font-size: 24px;
    font-weight: 700;
    color: var(--km-text-primary, #333333);
}

.km-tarjeta-producto[data-layout="minimalista"] .km-producto-precio {
    color: white;
}

.km-producto-precio-antiguo {
    font-size: 16px;
    color: #999;
    text-decoration: line-through;
}



/* ============ ELEMENTOS: VARIANTES ============ */
.km-producto-variantes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.km-producto-colores {
    display: flex;
    gap: 6px;
}

.km-color {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--km-color-dot-border, #dddddd);
    cursor: pointer;
    transition: all 0.2s;
}

.km-color:hover {
    border-color: var(--km-text-primary, #333333);
    transform: scale(1.1);
}

.km-producto-tallas {
    display: flex;
    gap: 6px;
}

.km-talla {
    padding: 4px 10px;
    border: 1px solid var(--km-talla-border, #dddddd);
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.km-talla:hover {
    border-color: var(--km-text-primary, #333333);
    background: var(--km-bg-hover, #f5f5f5);
}



/* ============ NUEVO: BOTONES FLOTANTES DE ACCIÓN ============ */
.km-producto-acciones {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;

    /* Efecto de entrada */
    opacity: 0;
    transform: scale(0.85);
    transform-origin: center right;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 10;
}

/* Mostrar acciones al pasar el ratón por la tarjeta entera */
.km-tarjeta-producto:hover .km-producto-acciones {
    opacity: 1;
    transform: translateX(0);
}

/* Posición 1: Arriba a la Derecha */
.km-producto-acciones[data-btn-position="top-right"] {
    top: 10px;
    right: 10px;
    flex-direction: column;
    transform: translateX(10px);
}

/* Posición 2: Abajo al Centro */
.km-producto-acciones[data-btn-position="bottom-center"] {
    bottom: 15px;
    left: 50%;
    transform: translate(-50%, 10px);
    flex-direction: row;
}

.km-action-btn {
    width: clamp(38px, calc(var(--km-card-width) * 0.18), 60px);
    aspect-ratio: 1/1;
    /* Mantiene la proporción cuadrada/circular */
    border-radius: var(--km-btn-radius, 50%);
    /* Controlado desde modal global */
    border: none;
    background-color: var(--km-card-bg, #ffffff);
    color: var(--km-text-color, #333333);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s ease;

    /* 🔥 LA MAGIA DEL CRISTAL 🔥 */
    background: rgba(255, 255, 255, 0.25) !important;
    /* Blanco semitransparente */
    backdrop-filter: blur(8px);
    /* El efecto de desenfoque del vidrio */
    -webkit-backdrop-filter: blur(8px);
    /* Para que funcione en iPhones/Safari */
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    /* Reflejo del borde del cristal */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15) !important;
    /* Sombra suave 3D */
}

.km-action-btn svg {
    pointer-events: none;
    /* Crucial para que GrapesJS no se confunda al hacer clic */
    width: 80% !important;
    height: 80% !important;
    stroke-width: 1.5;
    /* Grosor de las líneas del dibujo */
    flex-shrink: 0;
}

.km-action-btn:hover {
    background: rgba(255, 255, 255, 0.5) !important;
    /* Se vuelve un poco más opaco */
    border-color: rgba(255, 255, 255, 0.9) !important;
    /* El borde brilla más */
    color: var(--km-color-primario, #007bff);
    /* El ícono se pinta del color de tu marca */
    transform: translateY(-2px) scale(1.05);
    /* Pequeño salto y zoom */
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.2) !important;
}

/* --- FORMAS DINÁMICAS (Conectadas al Modal) --- */
/* Cuadrados Redondeados */
.km-tarjeta-producto[data-btn-shape="rounded"] .km-action-btn,
.km-producto-acciones[data-btn-shape="rounded"] .km-action-btn {
    border-radius: 8px !important;
}

/* Círculos */
.km-tarjeta-producto[data-btn-shape="circle"] .km-action-btn,
.km-producto-acciones[data-btn-shape="circle"] .km-action-btn {
    border-radius: 50% !important;
}

.km-producto-acciones, 
.km-producto-colores, 
.km-producto-tallas {
    pointer-events: auto;
}

/* --- POSICIONES DINÁMICAS (Arquitectura Limpia) --- */
/* Por defecto (Arriba Derecha) o si el padre dice top-right */
.km-tarjeta-producto[data-btn-position="top-right"] .km-producto-acciones,
.km-producto-acciones[data-btn-position="top-right"] {
    top: 2%;
    right: 8%;
    bottom: auto;
    left: auto;
    flex-direction: column;
    transform: scale(0.85);
    transform-origin: center right;
}

/* Abajo al Centro */
.km-tarjeta-producto[data-btn-position="bottom-center"] .km-producto-acciones,
.km-producto-acciones[data-btn-position="bottom-center"] {
    top: auto;
    bottom: 15px;
    left: 50%;
    right: auto;
    flex-direction: row;
    transform: translateX(-50%) scale(0.85);
    transform-origin: bottom center;
}

/* En móviles, siempre visibles */
@media (hover: none) and (pointer: coarse) {
    .km-producto-acciones {
        opacity: 1;
        transform: translate(0) !important;
    }
}


/* =========================================
   EXCEPCIÓN UI: MINIMALISTA + ABAJO AL CENTRO (GRADIENTE OSCURO)
   ========================================= */

/* 1. Sombra degradada SOLO si el diseño es minimalista Y los botones están abajo al centro */
.km-tarjeta-producto[data-layout="minimalista"][data-btn-position="bottom-center"]::after,
.km-tarjeta-producto[data-layout="minimalista"]:has(.km-producto-acciones[data-btn-position="bottom-center"])::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
    opacity: 0;
    z-index: 5;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.km-tarjeta-producto[data-layout="minimalista"][data-btn-position="bottom-center"]:hover::after,
.km-tarjeta-producto[data-layout="minimalista"]:has(.km-producto-acciones[data-btn-position="bottom-center"]):hover::after {
    opacity: 1;
}

/* 2. Botones escondidos en la parte inferior */
.km-tarjeta-producto[data-layout="minimalista"][data-btn-position="bottom-center"] .km-producto-acciones,
.km-tarjeta-producto[data-layout="minimalista"] .km-producto-acciones[data-btn-position="bottom-center"] {
    bottom: 20px;
    top: auto;
    opacity: 0;
    transform: translateX(-50%) translateY(15px) scale(0.85);
    z-index: 10;
}

/* 3. Botones emergen al hacer hover */
.km-tarjeta-producto[data-layout="minimalista"][data-btn-position="bottom-center"]:hover .km-producto-acciones,
.km-tarjeta-producto[data-layout="minimalista"]:hover .km-producto-acciones[data-btn-position="bottom-center"] {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* 4. Escondemos la información (precio/título) SOLO cuando pueden chocar con los botones centrales */
.km-tarjeta-producto[data-layout="minimalista"][data-btn-position="bottom-center"]:hover .km-producto-info,
.km-tarjeta-producto[data-layout="minimalista"]:has(.km-producto-acciones[data-btn-position="bottom-center"]):hover .km-producto-info {
    opacity: 0;
}

.km-tarjeta-producto[data-layout="minimalista"] .km-producto-info {
    transition: opacity 0.3s ease;
}


/* =========================================
   ESTILOS DE TALLAS (Glassmorphism & Pill Shape)
   ========================================= */
.km-producto-tallas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    z-index: 10;
    /* Para asegurar que estén por encima de la foto minimalista */
}

/* Diseño base (Píldora de Cristal) */
.km-talla,
.km-talla-extra {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 14px;
    /* Rectangular */
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px !important;
    /* Bordes de semicírculo perfecto */

    /* Efecto Liquid Glass claro */
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    color: #333 !important;

    transition: all 0.3s ease;
    cursor: default;
}

.km-talla:hover {
    background: rgba(255, 255, 255, 0.7) !important;
    transform: translateY(-2px);
}

/* Adaptación para Tarjeta Minimalista (Cristal Oscuro para mejor contraste sobre la foto) */
.km-tarjeta-producto[data-layout="minimalista"] .km-talla,
.km-tarjeta-producto[data-layout="minimalista"] .km-talla-extra {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

.km-tarjeta-producto[data-layout="minimalista"] .km-talla:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}


/* ============ EFECTOS HOVER DE TARJETA (REUTILIZA CARRUSEL) ============ */
/* Importamos la misma lógica del carrusel cambiando el selector */

/* LIFT (Elevación) */
.km-tarjeta-producto[data-card-hover="lift"] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.km-tarjeta-producto[data-card-hover="lift"]:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* ZOOM TOTAL */
.km-tarjeta-producto[data-card-hover="zoom"]:hover {
    transform: scale(1.05);
}

/* GLOW FOCUS */
.km-tarjeta-producto[data-card-hover="glow"] {
    filter: brightness(0.9);
}

.km-tarjeta-producto[data-card-hover="glow"]:hover {
    filter: brightness(1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

/* GRAYSCALE */
.km-tarjeta-producto[data-card-hover="grayscale"] .km-producto-imagen {
    filter: grayscale(100%);
}

.km-tarjeta-producto[data-card-hover="grayscale"]:hover .km-producto-imagen {
    filter: grayscale(0%);
}

/* FLIP 3D */
.km-tarjeta-producto[data-card-hover="flip"] {
    perspective: 1000px;
}

.km-tarjeta-producto[data-card-hover="flip"]:hover {
    transform: rotateY(10deg);
}

/* SCALE + BLUR OTHERS - Requiere contexto de contenedor */
.km-producto-grid:hover .km-tarjeta-producto[data-card-hover="scale-blur"]:not(:hover) {
    transform: scale(0.95);
    filter: brightness(0.5) blur(2px);
}

.km-tarjeta-producto[data-card-hover="scale-blur"]:hover {
    transform: scale(1.05);
    z-index: 10;
}

/* TILT 3D */
.km-tarjeta-producto[data-card-hover="tilt"] {
    perspective: 800px;
}

.km-tarjeta-producto[data-card-hover="tilt"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);
    filter: blur(2rem);
    opacity: 0;
    z-index: -1;
    border-radius: var(--km-card-radius);
    transition: opacity 0.3s;
}

.km-tarjeta-producto[data-card-hover="tilt"]:hover::before {
    opacity: 0.5;
}

.km-tarjeta-producto[data-card-hover="tilt"]:hover {
    transform: perspective(800px) rotateX(3deg) rotateY(3deg);
}

/* EXPAND */
.km-tarjeta-producto[data-card-hover="expand"]:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {

    /* 1. La tarjeta ahora ocupa el ancho total del móvil y su altura es libre */
    .km-tarjeta-producto {
        --km-card-width: 100%;
        /* height: auto !important; */
        display: flex;
        flex-direction: column;
    }

    /* 2. Reset del Grid: De 2 columnas a 1 sola fila automática */
    .km-tarjeta-producto[data-layout="horizontal"] {
        display: flex !important;
        flex-direction: column;
        grid-template-columns: 1fr;
        /* Por si acaso */
        gap: 0;
    }

    /* 3. La Imagen en móvil: Ya no puede ser absoluta porque taparía el texto */
    .km-tarjeta-producto[data-layout="horizontal"] .km-producto-imagen-wrapper {
        position: relative;
        width: 100%;
        /* height: auto !important; */
        /* Rompemos el 100% del desktop */
        aspect-ratio: 16 / 9;
        /* Proporción cinematográfica para móviles */
    }

    .km-tarjeta-producto[data-layout="horizontal"] .km-producto-imagen {
        position: relative;
        /* Ya no flota, ocupa su lugar */
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    /* 4. Ajuste de espaciado para que el texto no pegue a la imagen */
    .km-tarjeta-producto[data-layout="horizontal"] .km-producto-info {
        padding: 15px;
        width: 100%;
    }
}

/* ============ COMPATIBILIDAD GRAPESJS ============ */
.gjs-frame .km-tarjeta-producto {
    max-width: var(--km-card-width);
}

.gjs-selected .km-tarjeta-producto::after {
    content: 'Tarjeta de Producto - ' attr(data-layout);
    position: absolute;
    top: 5px;
    right: 5px;
    background: #0d6efd;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    z-index: 1000;
    pointer-events: none;
}

/* ============ DARK MODE ============ */
@media (prefers-color-scheme: dark) {
    .km-tarjeta-producto[data-background="solid"] {
        background: #1a1a1a;
    }

    .km-producto-titulo {
        color: #fff;
    }

    .km-producto-precio {
        color: #fff;
    }
}


/* ============ ACCESIBILIDAD ============ */
@media (prefers-reduced-motion: reduce) {

    .km-tarjeta-producto,
    .km-producto-imagen,
    .km-producto-btn {
        transition: none;
    }
}

/* =========================================
   DISEÑO PLANO PARA CÍRCULOS DE COLORES
   ========================================= */
.km-tarjeta-producto .km-color,
.km-tarjeta-producto .km-color-extra {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}