/* PHONE FRAME
   Marco de telefono dibujado con CSS para el slider de cabecera.
   Las capturas son 1170x2532 (9:19.5), el marco respeta esa proporcion
   para que no se recorte ninguna pantalla. */

.swiper-container .phone-frame {
    display: block;
    position: relative;
    width: 265px;
    height: 560px;
    margin: 8px auto 0;
    padding: 6px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background: #111114;
    border-radius: 40px;
    /* aro rosa palo exterior + sombra suave (el .swiper-container
       recorta con overflow:hidden, no subir el blur ni el offset) */
    box-shadow: 0 0 0 2px #f3c4d1,
                0 4px 10px rgba(0,0,0,0.18);
}

.swiper-container .phone-frame img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 34px;
    object-fit: cover;
    object-position: top center;
    background: #fff;
}

@media (max-width: 991px) {

    .swiper-slide { height: 430px; }

    .swiper-container .phone-frame {
        width: 200px;
        height: 420px;
        margin: 6px auto 0;
        padding: 5px;
        border-radius: 30px;
        box-shadow: 0 0 0 2px #f3c4d1,
                    0 3px 8px rgba(0,0,0,0.18);
    }

    .swiper-container .phone-frame img { border-radius: 25px; }

}