/* Fondo general rosa con lunares */
body {
    background-color: #fce4ec;
    background-image: radial-gradient(#f48fb1 20%, transparent 20%);
    background-size: 20px 20px;
    margin: 0;
    padding: 15px;
    display: flex;
    justify-content: center;
}

/* Envoltura de la página */
.interfaz-retro {
    width: 100%;
    max-width: 450px; 
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Cajas encerradas con bordes como tu imagen */
.ventana-borde {
    background-color: #ffffff;
    border: 4px double #4e342e; 
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.15);
}

/* Distribución del Bloque 1 */
.bloque-superior {
    display: flex;
    align-items: center;
    gap: 15px;
}

.caja-anime {
    width: 55%;
    line-height: 0;
}

.caja-anime img {
    width: 100%;
    height: auto;
    display: block;
}

.caja-textos {
    width: 40%;
}

/* ESTILO DE LAS LETRAS ROSAS CON SU BORDE NEGRO EXACTO */
.caja-textos p {
    margin: 8px 0;
    font-size: 22px; 
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif; 
    text-align: left;
    color: #ebd3e8; 
    -webkit-text-stroke: 1.2px #000000; 
}

/* Bloque 2: Banner de en medio */
.banner-medio {
    width: 100%;
    line-height: 0;
}

.banner-medio img {
    width: 100%;
    height: auto;
    display: block;
}

/* BLOQUE 3: Caja con scroll vertical */
.contenedor-scroll {
    width: 70%; 
    height: 220px; 
    overflow-y: scroll; 
    background-color: #ffffff;
}

.contenido-interno {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.img-scroll {
    width: 100%;
    height: auto;
    display: block;
    border: 2px dashed #f48fb1; 
    border-radius: 6px;
}

/* Estilo retro de la barra de desplazamiento */
.contenedor-scroll::-webkit-scrollbar {
    width: 12px; 
}

.contenedor-scroll::-webkit-scrollbar-track {
    background: #fff9c4; 
    border-left: 2px solid #4e342e;
}

.contenedor-scroll::-webkit-scrollbar-thumb {
    background: #f48fb1; 
    border: 2px solid #4e342e;
    border-radius: 4px;
}
