/* =================================
   TEXTURAS REALISTAS DE LIENZO Y PAPEL
   ================================= */

/* OPCIÓN 1: Lienzo de pintura clásico */
.texture-canvas-painting {
    background-color: #fefefe;
    background-image: 
        /* Textura de lienzo horizontal */
        repeating-linear-gradient(0deg, 
            transparent, 
            transparent 2px, 
            rgba(0, 0, 0, 0.02) 2px, 
            rgba(0, 0, 0, 0.02) 3px
        ),
        /* Textura de lienzo vertical */
        repeating-linear-gradient(90deg, 
            transparent, 
            transparent 2px, 
            rgba(0, 0, 0, 0.015) 2px, 
            rgba(0, 0, 0, 0.015) 3px
        ),
        /* Variaciones sutiles */
        radial-gradient(circle at 25% 25%, rgba(0, 0, 0, 0.005) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(0, 0, 0, 0.008) 0%, transparent 50%);
    background-size: 3px 3px, 3px 3px, 200px 200px, 150px 150px;
}

/* OPCIÓN 2: Papel arrugado suave */
.texture-crumpled-paper {
    background-color: #ffffff;
    background-image: 
        /* Arrugas principales */
        radial-gradient(ellipse 100px 50px at 20% 30%, rgba(0, 0, 0, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse 80px 40px at 70% 20%, rgba(0, 0, 0, 0.025) 0%, transparent 60%),
        radial-gradient(ellipse 120px 60px at 30% 80%, rgba(0, 0, 0, 0.035) 0%, transparent 55%),
        radial-gradient(ellipse 90px 45px at 80% 70%, rgba(0, 0, 0, 0.02) 0%, transparent 65%),
        /* Arrugas menores */
        radial-gradient(ellipse 40px 20px at 50% 40%, rgba(0, 0, 0, 0.015) 0%, transparent 70%),
        radial-gradient(ellipse 35px 18px at 15% 60%, rgba(0, 0, 0, 0.018) 0%, transparent 75%),
        /* Textura base */
        repeating-linear-gradient(45deg, 
            transparent, 
            transparent 1px, 
            rgba(0, 0, 0, 0.005) 1px, 
            rgba(0, 0, 0, 0.005) 2px
        );
    background-size: 200px 150px, 180px 120px, 220px 160px, 190px 140px, 80px 60px, 70px 50px, 4px 4px;
    background-position: 0 0, 50px 50px, 100px 20px, 30px 100px, 120px 80px, 160px 40px, 0 0;
}

/* OPCIÓN 3: Textura de papel acuarela */
.texture-watercolor-paper {
    background-color: #fefefe;
    background-image: 
        /* Fibras del papel */
        radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.02) 1px, transparent 0),
        radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.015) 0.5px, transparent 0),
        /* Variaciones de textura */
        radial-gradient(ellipse 150px 100px at 25% 25%, rgba(0, 0, 0, 0.008) 0%, transparent 60%),
        radial-gradient(ellipse 120px 80px at 75% 75%, rgba(0, 0, 0, 0.012) 0%, transparent 55%),
        radial-gradient(ellipse 100px 70px at 25% 75%, rgba(0, 0, 0, 0.006) 0%, transparent 65%),
        radial-gradient(ellipse 180px 120px at 75% 25%, rgba(0, 0, 0, 0.01) 0%, transparent 50%);
    background-size: 15px 15px, 8px 8px, 200px 150px, 180px 120px, 160px 100px, 220px 140px;
    background-position: 0 0, 7px 7px, 0 0, 50px 50px, 100px 20px, 30px 80px;
}

/* OPCIÓN 4: Lino natural */
.texture-linen {
    background-color: #fdfdf9;
    background-image: 
        /* Trama horizontal */
        repeating-linear-gradient(0deg, 
            rgba(0, 0, 0, 0.02) 0px, 
            rgba(0, 0, 0, 0.02) 1px, 
            transparent 1px, 
            transparent 4px
        ),
        /* Trama vertical */
        repeating-linear-gradient(90deg, 
            rgba(0, 0, 0, 0.018) 0px, 
            rgba(0, 0, 0, 0.018) 1px, 
            transparent 1px, 
            transparent 4px
        ),
        /* Variaciones en la trama */
        repeating-linear-gradient(0deg, 
            transparent 0px, 
            transparent 12px, 
            rgba(0, 0, 0, 0.008) 12px, 
            rgba(0, 0, 0, 0.008) 13px
        ),
        repeating-linear-gradient(90deg, 
            transparent 0px, 
            transparent 12px, 
            rgba(0, 0, 0, 0.01) 12px, 
            rgba(0, 0, 0, 0.01) 13px
        );
    background-size: 4px 4px, 4px 4px, 13px 13px, 13px 13px;
}

/* OPCIÓN 5: Papel de algodón */
.texture-cotton-paper {
    background-color: #ffffff;
    background-image: 
        /* Fibras irregulares */
        radial-gradient(ellipse 3px 1px at 30% 20%, rgba(0, 0, 0, 0.015) 0%, transparent 100%),
        radial-gradient(ellipse 2px 1px at 70% 40%, rgba(0, 0, 0, 0.012) 0%, transparent 100%),
        radial-gradient(ellipse 4px 1px at 20% 60%, rgba(0, 0, 0, 0.018) 0%, transparent 100%),
        radial-gradient(ellipse 2.5px 1px at 80% 80%, rgba(0, 0, 0, 0.014) 0%, transparent 100%),
        radial-gradient(ellipse 3.5px 1px at 50% 30%, rgba(0, 0, 0, 0.016) 0%, transparent 100%),
        radial-gradient(ellipse 2px 1px at 40% 70%, rgba(0, 0, 0, 0.011) 0%, transparent 100%),
        /* Textura base sutil */
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.003) 0%, transparent 80%);
    background-size: 20px 20px, 25px 25px, 18px 18px, 22px 22px, 24px 24px, 19px 19px, 100px 100px;
    background-position: 0 0, 10px 5px, 5px 15px, 15px 10px, 8px 8px, 12px 18px, 0 0;
}

/* OPCIÓN 6: Lienzo rugoso */
.texture-rough-canvas {
    background-color: #fefffe;
    background-image: 
        /* Textura gruesa */
        repeating-linear-gradient(0deg, 
            transparent, 
            transparent 3px, 
            rgba(0, 0, 0, 0.025) 3px, 
            rgba(0, 0, 0, 0.025) 5px,
            transparent 5px,
            transparent 8px
        ),
        repeating-linear-gradient(90deg, 
            transparent, 
            transparent 3px, 
            rgba(0, 0, 0, 0.02) 3px, 
            rgba(0, 0, 0, 0.02) 5px,
            transparent 5px,
            transparent 8px
        ),
        /* Irregularidades */
        radial-gradient(circle at 25% 25%, rgba(0, 0, 0, 0.01) 0%, transparent 40%),
        radial-gradient(circle at 75% 75%, rgba(0, 0, 0, 0.015) 0%, transparent 35%),
        radial-gradient(circle at 25% 75%, rgba(0, 0, 0, 0.008) 0%, transparent 45%),
        radial-gradient(circle at 75% 25%, rgba(0, 0, 0, 0.012) 0%, transparent 38%);
    background-size: 8px 8px, 8px 8px, 120px 120px, 100px 100px, 140px 140px, 110px 110px;
    background-position: 0 0, 4px 4px, 0 0, 50px 50px, 25px 75px, 75px 25px;
}

/* OPCIÓN 7: Papel pergamino */
.texture-parchment {
    background-color: #fefcf7;
    background-image: 
        /* Manchas de edad sutiles */
        radial-gradient(ellipse 200px 150px at 15% 20%, rgba(139, 69, 19, 0.015) 0%, transparent 60%),
        radial-gradient(ellipse 150px 100px at 85% 30%, rgba(139, 69, 19, 0.012) 0%, transparent 65%),
        radial-gradient(ellipse 180px 120px at 30% 80%, rgba(139, 69, 19, 0.008) 0%, transparent 70%),
        radial-gradient(ellipse 120px 90px at 70% 70%, rgba(139, 69, 19, 0.01) 0%, transparent 75%),
        /* Textura de fibra */
        repeating-linear-gradient(45deg, 
            transparent, 
            transparent 2px, 
            rgba(139, 69, 19, 0.005) 2px, 
            rgba(139, 69, 19, 0.005) 3px
        ),
        repeating-linear-gradient(-45deg, 
            transparent, 
            transparent 2px, 
            rgba(139, 69, 19, 0.003) 2px, 
            rgba(139, 69, 19, 0.003) 3px
        );
    background-size: 300px 200px, 250px 150px, 280px 180px, 200px 130px, 6px 6px, 6px 6px;
    background-position: 0 0, 100px 50px, 50px 150px, 200px 100px, 0 0, 3px 3px;
}

/* OPCIÓN 8: Papel reciclado */
.texture-recycled-paper {
    background-color: #fefefe;
    background-image: 
        /* Pequeñas fibras */
        radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.02) 0.5px, transparent 0.5px),
        radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.015) 0.3px, transparent 0.3px),
        radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.025) 0.7px, transparent 0.7px),
        /* Manchas minúsculas */
        radial-gradient(circle at 20% 30%, rgba(0, 0, 0, 0.008) 0%, transparent 80%),
        radial-gradient(circle at 80% 20%, rgba(0, 0, 0, 0.006) 0%, transparent 85%),
        radial-gradient(circle at 40% 80%, rgba(0, 0, 0, 0.01) 0%, transparent 75%),
        radial-gradient(circle at 70% 60%, rgba(0, 0, 0, 0.007) 0%, transparent 90%);
    background-size: 12px 12px, 8px 8px, 16px 16px, 80px 80px, 100px 100px, 90px 90px, 70px 70px;
    background-position: 0 0, 6px 6px, 4px 4px, 0 0, 40px 40px, 20px 60px, 60px 20px;
}

/* OPCIÓN 9: Tela de saco */
.texture-burlap {
    background-color: #fefcf8;
    background-image: 
        /* Trama gruesa */
        repeating-linear-gradient(0deg, 
            rgba(139, 69, 19, 0.03) 0px, 
            rgba(139, 69, 19, 0.03) 2px, 
            transparent 2px, 
            transparent 6px
        ),
        repeating-linear-gradient(90deg, 
            rgba(139, 69, 19, 0.025) 0px, 
            rgba(139, 69, 19, 0.025) 2px, 
            transparent 2px, 
            transparent 6px
        ),
        /* Variaciones */
        repeating-linear-gradient(0deg, 
            transparent 0px, 
            transparent 18px, 
            rgba(139, 69, 19, 0.01) 18px, 
            rgba(139, 69, 19, 0.01) 20px
        ),
        repeating-linear-gradient(90deg, 
            transparent 0px, 
            transparent 18px, 
            rgba(139, 69, 19, 0.015) 18px, 
            rgba(139, 69, 19, 0.015) 20px
        );
    background-size: 6px 6px, 6px 6px, 20px 20px, 20px 20px;
}

/* OPCIÓN 10: Lienzo premium suave */
.texture-premium-canvas {
    background-color: #ffffff;
    background-image: 
        /* Textura muy fina */
        repeating-linear-gradient(0deg, 
            transparent, 
            transparent 1px, 
            rgba(0, 0, 0, 0.01) 1px, 
            rgba(0, 0, 0, 0.01) 2px
        ),
        repeating-linear-gradient(90deg, 
            transparent, 
            transparent 1px, 
            rgba(0, 0, 0, 0.008) 1px, 
            rgba(0, 0, 0, 0.008) 2px
        ),
        /* Variaciones sutiles */
        radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 0.003) 0%, transparent 70%),
        radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0.005) 0%, transparent 65%),
        radial-gradient(circle at 30% 70%, rgba(0, 0, 0, 0.002) 0%, transparent 75%),
        radial-gradient(circle at 70% 30%, rgba(0, 0, 0, 0.004) 0%, transparent 68%);
    background-size: 2px 2px, 2px 2px, 150px 150px, 120px 120px, 180px 180px, 140px 140px;
    background-position: 0 0, 1px 1px, 0 0, 50px 50px, 25px 75px, 75px 25px;
}

/* =================================
   ANIMACIONES SUTILES
   ================================= */

/* Movimiento muy sutil de textura */
@keyframes subtle-texture-shift {
    0%, 100% { 
        background-position: 0 0, 1px 1px, 0 0, 50px 50px, 25px 75px, 75px 25px; 
    }
    50% { 
        background-position: 1px 1px, 0 0, 2px 2px, 52px 52px, 27px 77px, 77px 27px; 
    }
}

.texture-animated-subtle {
    animation: subtle-texture-shift 20s ease-in-out infinite;
}

/* =================================
   RESPONSIVE
   ================================= */

@media (max-width: 768px) {
    .texture-canvas-painting,
    .texture-crumpled-paper,
    .texture-watercolor-paper,
    .texture-linen,
    .texture-cotton-paper,
    .texture-rough-canvas,
    .texture-parchment,
    .texture-recycled-paper,
    .texture-burlap,
    .texture-premium-canvas {
        background-size: 2px 2px, 2px 2px, 8px 8px, 80px 80px, 60px 60px, 100px 100px;
    }
    
    .texture-animated-subtle {
        animation: none; /* Sin animación en móviles para mejor rendimiento */
    }
}