.svg-canvas {
	background-color: var(--color-gold-dark);
	background-size: cover !important;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    will-change: transform; 
    shape-rendering: optimizespeed;
    background-attachment: fixed;
}

.svg-canvas2 {
	background-color: transparent;
	padding: 0px 10px;
    /*box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);*/
    text-align: center;
    font-weight: 500;
    font-size: 40px;
    line-height: 45px;
    margin: 50px auto 10px;
    color: var(--color-gold-dark);
    will-change: transform; 
    shape-rendering: optimizespeed;
}

.svg-canvas3 {
	background-color: var(--color-gold);
	background-position: center center;
	background-size: cover !important;
    will-change: transform; 
    shape-rendering: optimizespeed;
}

.svg-canvas4 {
	background-color: #fff;
    padding: 10px !important;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    will-change: transform; 
    shape-rendering: optimizespeed;
    background-attachment: fixed;
}

.svg-canvas5 {
	background-color: #000000;
	background-size: cover;
    will-change: transform; 
    shape-rendering: optimizespeed;
    background-attachment: fixed;
}

.svg-canvas6 {
	background-color: transparent;
	background-size: cover;
	padding: 10px;
    font-weight: 500;
    font-size: 25px;
    line-height: 35px;
	margin-bottom:15px;
    color: #fff;
    will-change: transform; 
    shape-rendering: optimizespeed;
    background-attachment: fixed;
}

.svg-canvas6::before {
    filter: url(#distorsion);
    content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: #000 !important;
	background-position: center !important;
	background-size: cover !important;	
    will-change: transform; 
    shape-rendering: optimizespeed;
}

.svg-canvas-rosa {
    position:relative;
	isolation: isolate;
	background: transparent;
}

.svg-canvas-rosa::before {
	filter: url(#distorsion);
    content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--color-gold-dark) !important;
	background-position: center !important;
	background-size: cover !important;	
    will-change: transform; 
    shape-rendering: optimizespeed;
    
}


.encuadre-old {
	background: #eeeeee;
    padding: 15px;
    border: 1px solid #bbb;
    border-radius: 5px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, .25);
    margin-bottom: 20px;
    box-shadow: inset 0px 0px 25px rgba(0, 0, 0, .25);
	position: relative;
    isolation: isolate;
}

.encuadre {
	padding: 20px;
    position: relative;
    isolation: isolate;
    
}

.encuadre::before {
	filter: url(#torn-edge) saturate(0.55) drop-shadow(0px 2px 1px rgba(0, 0, 0, .5));
    content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Cdefs%3E%3CradialGradient id='v' cx='50%25' cy='50%25' r='75%25'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.1'/%3E%3Cstop offset='100%25' stop-color='%23804000' stop-opacity='0.3'/%3E%3C/radialGradient%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.15'/%3E%3Cstop offset='100%25' stop-color='%23d4a84b' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='%23f2d58a'/%3E%3Crect width='100%25' height='100%25' fill='url(%23g)'/%3E%3Cg stroke='%23a07020' stroke-width='0.5' opacity='0.15' fill='none'%3E%3Cpath d='M0 40h600M0 100h600M0 160h600M0 220h600M0 280h600M0 340h600'/%3E%3Cpath d='M60 0v400M180 0v400M320 0v400M460 0v400'/%3E%3C/g%3E%3Ccircle cx='80' cy='60' r='40' fill='%23fff' opacity='0.1'/%3E%3Ccircle cx='500' cy='320' r='60' fill='%23fff' opacity='0.08'/%3E%3Crect width='100%25' height='100%25' fill='url(%23v)'/%3E%3C/svg%3E");
	background-size: cover;
	background-position: center;
}

.encuadre::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;  /* encima del ::before pero debajo del contenido */
    background-image: url("/images/scratches.webp");
    background-size: cover;
    background-position: center;
    opacity:0.15;
	pointer-events: none; /* para que no bloquee clicks */
}

.encuadre2 {
	padding: 20px;
    position: relative;
    isolation: isolate;
    
}

.encuadre2::before {
	filter: url(#torn-edge) saturate(0) brightness(1.9) drop-shadow(0px 2px 1px rgba(0, 0, 0, .5));
    content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Cdefs%3E%3CradialGradient id='v' cx='50%25' cy='50%25' r='75%25'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.1'/%3E%3Cstop offset='100%25' stop-color='%23804000' stop-opacity='0.3'/%3E%3C/radialGradient%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.15'/%3E%3Cstop offset='100%25' stop-color='%23d4a84b' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='%23f2d58a'/%3E%3Crect width='100%25' height='100%25' fill='url(%23g)'/%3E%3Cg stroke='%23a07020' stroke-width='0.5' opacity='0.15' fill='none'%3E%3Cpath d='M0 40h600M0 100h600M0 160h600M0 220h600M0 280h600M0 340h600'/%3E%3Cpath d='M60 0v400M180 0v400M320 0v400M460 0v400'/%3E%3C/g%3E%3Ccircle cx='80' cy='60' r='40' fill='%23fff' opacity='0.1'/%3E%3Ccircle cx='500' cy='320' r='60' fill='%23fff' opacity='0.08'/%3E%3Crect width='100%25' height='100%25' fill='url(%23v)'/%3E%3C/svg%3E");
	background-size: cover;
	background-position: center;
}

.encuadre2::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;  /* encima del ::before pero debajo del contenido */
    background-image: url("/images/scratches.webp");
    background-size: cover;
    background-position: center;
    opacity:0.15;
	pointer-events: none; /* para que no bloquee clicks */
}