/* Altura fija y scroll interno */
/*#scrollContainer {
    max-height: 600px;*/ /* Ajusta a la altura que prefieras */
    /*overflow-y: auto;
    overflow-x: hidden;
    padding-right: 15px;*/ /* Espacio para que no tape el contenido la barra */
/*}*/

    /* Opcional: Que la barra de scroll se vea roja como tu diseño */
    /*#scrollContainer::-webkit-scrollbar {
        width: 6px;
    }

    #scrollContainer::-webkit-scrollbar-thumb {
        background: #db1215;
        border-radius: 10px;
    }*/
.iphone-mockup-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    /* VALOR PARA COMPUTADORA (Escritorio) */
    max-width: 170px;
}

/* MEDIA QUERY PARA MÓVILES */
/* Se activa cuando la pantalla es menor a 768px (estándar de tablets/celulares) */
@media (max-width: 767px) {
    .iphone-mockup-container {
        max-width: 100px; /* VALOR PARA MÓVIL */
    }

        .iphone-mockup-container .img-product,
        .iphone-mockup-container .img-hover {
            /* Reducimos un poco el redondeado en móvil para que luzca proporcional */
            border-radius: 15px;
        }
}

.iphone-frame {
    position: relative;
    z-index: 2;
    width: 100%;
    display: block;
    pointer-events: none;
}

.iphone-mockup-container .img-product,
.iphone-mockup-container .img-hover {
    position: absolute;
    top: 2%;
    left: 5%;
    width: 90%;
    height: 96%;
    object-fit: cover;
    z-index: 1;
    border-radius: 30px; /* Este se aplica en computadora */
}