.cronicas {
	background-color: transparent;
	background-size: cover;
	padding: 10px;
    font-weight: 500;
    font-size: 25px;
    line-height: 35px;
	margin-bottom:15px;
    color: #fff;
}

.svg-canvas-boton {
    position:relative;
	isolation: isolate;
	background: transparent;
    color: var(--fore-color);
    /* La opción moderna y preferida */
    will-change: transform, opacity;
    /* El truco clásico para forzar la GPU */
    transform: translateZ(0);
    backface-visibility: hidden;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.15);
}

.svg-recortado {
    width:fit-content;
    margin:0 auto;
}

.svg-canvas-boton::before {
	/*filter: var(--sin-efecto, url(#distorsion) brightness(2.5) contrast(1.1) drop-shadow(2px 4px 5px rgba(0,0,0,0.4)) saturate(0.66) hue-rotate(15deg));*/
    filter: var(--sin-efecto, url(#distorsion) saturate(1.5) drop-shadow(1px 4px 3px rgba(0,0,0,0.25)));
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--mi-color) !important;
    background-position: center !important;
    background-size: var(--mi-contain, cover) !important;
    border: var(--mi-borde, none);
    box-shadow: var(--mi-sombra, transparent);
    background-image: url(/images/manchas.webp);
    background-blend-mode: multiply;
    
}

.encuadre {
	padding: 20px;
    position: relative;
    isolation: isolate;
    /* La opción moderna y preferida */
    will-change: transform, opacity;

    /* El truco clásico para forzar la GPU */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.encuadre::before {
    transition: 0.3s;
    border: 3px solid transparent;
    filter: var(--sin-efecto, url(#distorsion) saturate(0.4) drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.45)));
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    /* background-color: var(--mi-color) !important; */
    background-position: center !important;
    background-size: contain !important;
    border: var(--mi-borde, none);
    box-shadow: var(--mi-sombra, transparent);
    background-image: url(/images/manchas.webp);
    background-blend-mode: overlay;
    background-color: #fa4;
}

body::before {
	opacity: 0.2;
    content: '';
    inset: 0;
    z-index: -1;
    background-image: url(/images/manchas.webp);
    background-repeat: repeat;
    position: fixed;
    background-size: contain;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* filter: brightness(1.2) sepia(0.2); */
    background-color: #fff;
    background-blend-mode: multiply;
}

.encuadre:not(.no-hover):hover::before {
    /*border: 3px solid var(--color-gold-dark);
    /* Opcional: para que el borde no mueva el contenido */
    /*box-sizing: border-box;*/
}

.svg-canvas-boton::after {

}