/* ============================================================
   interactions.css
   Feedback de interacción compartido para todos los botones del
   sitio: estado de "presionado" (funciona igual con mouse y con
   el dedo en mobile), foco visible para navegación por teclado,
   y tiempos de transición consistentes en un solo lugar.

   Se carga en las 6 páginas, DESPUÉS del CSS propio de cada una,
   así gana en los casos donde coincide con una regla existente.
   No toca colores ni tamaños, solo el "cómo se siente" al tocar.
   ============================================================ */

:root {
    --transition-fast: 120ms ease;
    --transition-base: 180ms ease;
    --focus-ring-color: #1a73e8;
}

button,
.btn-filled,
.action-link,
.menu-icon,
.cart-icon {
    cursor: pointer;
    transition:
        transform var(--transition-fast),
        background-color var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base),
        box-shadow var(--transition-base),
        opacity var(--transition-base);
}

/* Estado de "presionado": se achica un poco al tocar/clickear */
button:not(:disabled):active,
.btn-filled:active,
.action-link:active,
.menu-icon:active,
.cart-icon:active {
    transform: scale(0.96);
}

/* Los botones del slider ya usan translateY(-50%) para quedar centrados
   verticalmente; si se pisa ese transform con el scale de arriba, el botón
   "salta" hacia abajo al hacer click. Se combinan ambos transforms. */
.slider-button:not(:disabled):active {
    transform: translateY(-50%) scale(0.96);
}

/* Foco visible solo al navegar con teclado (Tab), no al hacer click con mouse/touch */
button:focus-visible,
.btn-filled:focus-visible,
.action-link:focus-visible,
.menu-icon:focus-visible,
.cart-icon:focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
}

/* Botones deshabilitados: se ven y se sienten inactivos */
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* ---- Contador del carrito: "rebote" al agregar un producto ---- */
@keyframes cart-count-bump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.4); }
    65%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}

#cart-count.cart-count-bump {
    animation: cart-count-bump 420ms ease;
}

/* ---- Crossfade de imágenes de producto (hover en la grilla) ---- */
.image-container .product-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 350ms ease;
}

.image-container .product-img.visible {
    opacity: 1;
}

/* ---- Borde arcoíris animado en las tarjetas de producto (hover) ---- */
.product-item,
.similar-product {
    box-sizing: border-box;
    border: 3px solid transparent;
    background-image:
        linear-gradient(#fff, #fff),
        linear-gradient(#fff, #fff);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 100% 100%, 300% 100%;
    background-position: 0 0, 0% 0;
}

.product-item:hover,
.similar-product:hover {
    background-image:
        linear-gradient(#fff, #fff),
        linear-gradient(90deg, #ff0000, #ff9a00, #d0de21, #4fdc4a, #3fdad8, #2fc9e2, #1c7fee, #7a1cee, #d61cee, #ff0000);
    animation: rainbow-border-move 3s linear infinite;
}

@keyframes rainbow-border-move {
    0%   { background-position: 0 0, 0% 0; }
    100% { background-position: 0 0, -300% 0; }
}

/* ---- Borde arcoíris animado en los pasos del tutorial (mismo efecto que en Productos Destacados) ---- */
.tutorial-col {
    box-sizing: border-box;
    border: 3px solid transparent;
    background-image:
        linear-gradient(#fff3f3, #fff3f3),
        linear-gradient(90deg, #ff0000, #ff9a00, #d0de21, #4fdc4a, #3fdad8, #2fc9e2, #1c7fee, #7a1cee, #d61cee, #ff0000);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 100% 100%, 300% 100%;
    background-position: 0 0, 0% 0;
    animation: rainbow-border-move 3s linear infinite;
}

/* ---- Borde arcoíris animado en las cajas de Preguntas Frecuentes (mismo efecto que en el tutorial) ---- */
.faq-box {
    box-sizing: border-box;
    border: 3px solid transparent;
    background-image:
        linear-gradient(#e6e6fa, #e6e6fa),
        linear-gradient(90deg, #ff0000, #ff9a00, #d0de21, #4fdc4a, #3fdad8, #2fc9e2, #1c7fee, #7a1cee, #d61cee, #ff0000);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 100% 100%, 300% 100%;
    background-position: 0 0, 0% 0;
    animation: rainbow-border-move 3s linear infinite;
}

/* ---- Respetar la preferencia de reducir animaciones del usuario ---- */
@media (prefers-reduced-motion: reduce) {
    button,
    .btn-filled,
    .action-link,
    .menu-icon,
    .cart-icon,
    #cart-count.cart-count-bump,
    .product-item,
    .tutorial-col,
    .faq-box,
    .similar-product,
    .nosotros-img,
    .product-img,
    #product-quantity {
        transition: none !important;
        animation: none !important;
    }
}