.verano-lechero-frame {
    position: relative;
    padding: 20px;
    background: #ffffff;
    text-align: center;
    font-family: 'Arial', sans-serif;
    font-size: 1.5rem;
    color: #4E2178;
    margin: 70px 15px 30px 15px;
    max-width: 1600px;
}

/* Estilo para los bordes dorados */
.frame-side {
    position: absolute;
    z-index: 11;
    background: repeating-linear-gradient(
        45deg,
        #4E2178,
        #4E2178 15px,
        #FFFFFF 15px,
        #FFFFFF 30px
    );
    box-shadow: 0 0 15px 5px rgba(255, 215, 0, 0.6); /* Efecto de brillo */
}

/* Bordes específicos */
.frame-top,
.frame-bottom {
    height: 20px; /* Grosor del borde */
    width: 100%;
    background: repeating-linear-gradient(
        45deg,
        #4E2178,
        #4E2178 15px,
        #FFFFFF 15px,
        #FFFFFF 30px
    );
    box-shadow: 0 0 15px 5px rgba(227, 187, 250, 0.6);
}

.frame-top {
    top: 0;
    left: 0;
}

.frame-bottom {
    bottom: 0;
    left: 0;
}

.frame-left,
.frame-right {
    width: 20px; /* Grosor del borde */
    height: 100%;
    background: repeating-linear-gradient(
        45deg,
        #4E2178,
        #4E2178 15px,
        #FFFFFF 15px,
        #FFFFFF 30px
    );
    box-shadow: 0 0 15px 5px rgba(255, 215, 0, 0.6);
}

.frame-left {
    top: 0;
    left: 0;
}

.frame-right {
    top: 0;
    right: 0;
}

/* Decoración de fuegos artificiales como stickers */
.frame-side::before {
    content: '';
    position: absolute;
    background-image: url(./../img/pages/verano-lechero/2.webp); /* Cambia el recurso a uno de Año Nuevo */
    background-size: auto 25px; /* Tamaño de los fuegos artificiales */
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
}

/* Posicionamiento de fuegos artificiales */
.frame-top::before {
    top: -5px; /* Ajuste para que aparezcan encima del borde */
    left: 20%;
}

.frame-top::after {
    content: '';
    position: absolute;
    background-image: url(./../img/pages/verano-lechero/4.webp);
    background-size: auto 25px;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    top: -5px;
    left: 75%;
}

.frame-bottom::before {
    content: '';
    position: absolute;
    background-image: url(./../img/pages/verano-lechero/2.webp);
    background-size: auto 25px; /* Tamaño de la cereza */
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    bottom: -5px; /* Ajuste para que aparezcan encima del borde */
    left: 20%;
}

.frame-bottom::after {
    content: '';
    position: absolute;
    background-image: url(./../img/pages/verano-lechero/4.webp);
    background-size: auto 25px; /* Tamaño de la cereza */
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    bottom: -5px;
    left: 70%;
}

.frame-left::before {
    content: '';
    position: absolute;
    background-image: url(./../img/pages/verano-lechero/4.webp);
    background-size: auto 25px; /* Tamaño de la cereza */
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    top: 20%;
    left: -5px; /* Ajuste para que aparezcan fuera del borde */
}

.frame-left::after {
    content: '';
    position: absolute;
    background-image: url(./../img/pages/verano-lechero/3.webp);
    background-size: auto 25px; /* Tamaño de la cereza */
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    top: 65%;
    left: -5px;
}

.frame-right::before {
    content: '';
    position: absolute;
    background-image: url(./../img/pages/verano-lechero/2.webp);
    background-size: auto 25px;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    top: 20%;
    right: -5px;
}

.frame-right::after {
    content: '';
    position: absolute;
    background-image: url(./../img/pages/verano-lechero/3.webp);
    background-size: auto 25px;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    top: 65%;
    right: -5px;
}
/* Contenido */
.frame-content {
    z-index: 10;
    position: relative;
    background-color: #ffffff;
    padding: 20px;
}

/* Efecto de brillo adicional */
@keyframes gold-shine {
    0%, 100% {
        box-shadow: 0 0 15px 5px rgba(204, 178, 238, 0.6);
    }
    50% {
        box-shadow: 0 0 25px 10px rgba(237, 226, 252, 0.6);
    }
}

.frame-side {
    animation: gold-shine 2s infinite;
}


/* Contenedor de la imagen */
.container-image {
    width: 120px;
    position: absolute;
    top: 0%;
    right: 50%;
    transform: translate(50%, -50%);
    z-index: 100;
}

.container-image img {
    width: 100%;
}

/* Contenedor temporal para otros elementos */
.container-tmp {
    width: 100%;
    height: 100%;
}
.card{
    border: 0px;
}
.card img{
    border-radius: 35px;
}

.container-button{
    margin: auto
}
.button-dibujo {
    background-color: #4e2178;
    color: #ffed00;
    font-size: 11px;
    font-weight: bold;
    padding: 10px;
    border: 3px solid #000;
    border-radius: 10px;
    text-align: center;
    box-shadow: -2px 2px 0px #000;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    max-width: 200px;
    margin: 0 auto;
    text-decoration: none;
}

.button-dibujo:hover {
    transform: translate(-2px, 2px);
    box-shadow: -4px 4px 0px #000;
}

.button-dibujo:active {
    transform: translate(0, 0);
    box-shadow: -1px 1px 0px #000;
}

.slick-slider {
    margin: 0px auto;
}
.slick-slider img {
    width: 90%;
    border-radius: 10px;
}


@media (min-width:768px) {
    
    .verano-lechero-frame {
        margin: 70px 30px 30px 30px;
    }
    .container-tmp {
        width: 90%;
        height: 90%;
        margin: 70px auto auto auto;
    }
    .container-image{
        width: 222px;
    }
    .margin-card{
        margin: 2% auto auto auto;
    }
    /* Imagen con efecto de foco */
    .flicker-effect {
        height: auto;
        filter: brightness(1); /* Brillo inicial */
        animation: flicker 2s infinite; /* Animación */
        border-radius: 25px;
    }

    /* Definición de la animación */
    @keyframes flicker {
        0%, 100% {
            filter: brightness(1); /* Brillo normal */
        }
        50% {
            filter: brightness(1.2); /* Incremento de brillo */
        }
        25%, 75% {
            filter: brightness(0.8); /* Reducción de brillo */
        }
    }

}
@media (min-width:992px) {
    .verano-lechero-frame {
        margin: 85px 30px 30px 30px;
    }
    .container-image{
        width: 230px;
    }
    .button-dibujo {
        font-size: 13px;
    }
    .container-tmp {
        width: 90%;
        height: 90%;
        margin: 70px auto auto auto;
    }
    .frame-top::before {
        top: -12px;
        left: 18%;
    }
    .frame-top::after {
        background-size: auto 40px;
        width: 40px;
        height: 40px;
        top: -12px;
    }
    .frame-side::before {
        background-size: auto 40px;
        width: 40px;
        height: 40px;
    }
    .frame-left::before {
        left: -10px;
    }
    .frame-left::after {
        background-size: auto 40px;
        width: 40px;
        height: 40px;
        left: -10px;
    }
    .frame-right::before {
        right: -10px;
    }
    .frame-right::after {
        background-size: auto 40px;
        width: 40px;
        height: 40px;
        right: -10px;
    }
    .frame-bottom::before {
        bottom: -12px;
    }
    .frame-bottom::after {
        background-size: auto 40px;
        width: 40px;
        height: 40px;
        bottom: -12px;
    }
    .flicker-effect {
        border-radius: 30px;
    }

}
@media (min-width:1200px) {
    .verano-lechero-frame {
        margin: 130px 30px 30px 30px;
    }
    .container-image{
        width: 345px;
    }
    .container-tmp {
        width: 90%;
        height: 90%;
        margin: 115px auto auto auto;
    }
    .button-dibujo {
        font-size: 20px;
    }
    .flicker-effect {
        border-radius: 45px;
    }
}

@media (min-width:1600px) {
    .verano-lechero-frame {
        margin: 130px auto;
    }
    .flicker-effect {
        border-radius: 60px;
    }
}