/* ====================================
   WATERMARK SYSTEM
   ==================================== */

/* 
   Applies transparent logo watermark to all product images
   across the site using CSS pseudo-elements.
   
   Targets:
   - Product cards on index.html (carousel)
   - Product cards on tienda.html (grid)
   - Product detail images on producto.html (main + related)
   - Collection cards on index.html
*/

/* Product Images - Primary watermark target */
.product-image::after,
.main-image::after {
    content: '';
    position: absolute;
    top: 70%;
    left: 60%;
    transform: translate(-50%, -50%);
    width: 30%;
    height: 30%;
    background-image: url('/assets/logo/logo_transparente.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.55;
    pointer-events: none;
    z-index: 2;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

/* Watermark zoom effect on hover to match image zoom */
.main-image:hover::after {
    transform: translate(-50%, -50%) scale(1.08);
}

/* Collection Cards - watermark removed */
.equipo-card {
    position: relative;
}


/* Lightbox images (producto.html) */
#lightbox-wrapper::after {
    content: '';
    position: absolute;
    top: 65.8%;
    left: 53.9%;
    transform: translate(-50%, -50%);
    width: 25%;
    height: 25%;
    background-image: url('/assets/logo/logo_transparente.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.55;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.3s ease;
}

/* Hover state - slightly more visible on interaction */
.product-card:hover .product-image::after {
    opacity: 0.55;
}

/* Mobile responsiveness - smaller watermark */
@media (max-width: 768px) {

    .product-image::after,
    .main-image::after {
        width: 25%;
        height: 25%;
    }

    .equipo-card::after {
        width: 30%;
        height: 30%;
    }

    #lightbox-wrapper::after {
        top: 60%;
        left: 60%;
        width: 20%;
        height: 20%;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {

    .product-image::after,
    .main-image::after {
        width: 28%;
        height: 28%;
    }
}

/* Prevent watermark on placeholder/loading images */
.product-image.loading::after,
.lazy-image:not(.loaded)+.product-image::after {
    display: none;
}