/* ============================================== */
/* MEDIA QUERIES PARA ADAPTACIÓN A PANTALLAS PEQUEÑAS */
/* ============================================== */

@media (max-width: 768px) { /* Puedes ajustar este breakpoint (768px) */
    .container-v {
        flex-direction: column; /* Apila los paneles verticalmente */
        width: 98%; /* Ajusta el ancho para pantallas pequeñas */
    }

    .container-fo {
        flex-direction: column; /* Apila los paneles verticalmente */
        width: 98%; /* Ajusta el ancho para pantallas pequeñas */
        padding: 2px;
    }

    .left-panel {
        display: none; /* Oculta completamente el panel izquierdo (imágenes) */
    }

    .izq-panel {
        display: none; /* Oculta completamente el panel izquierdo (imágenes) */
    }

    .separator {
        display: none; /* Oculta el separador */
    }

    .right-panel {
        width: 100%; /* El panel derecho ocupa todo el ancho disponible */
        padding: 15px; /* Ajusta el padding para un mejor espaciado en móviles */
        margin-top: 5px; /* Ajusta el margen superior si es necesario */
        margin-bottom: 5px; /* Ajusta el margen inferior si es necesario */
    }

    .der-panel {
        width: 100%; /* El panel derecho ocupa todo el ancho disponible */
        margin: 0 auto;
        #padding: 15px;
    }

    .inter-layer {
        background-color: #ffffff; /* capa blanca */
        width: 100%;
        margin-top: 5px;
        margin-bottom: 10px;
        border-radius: 24px;
        padding-left: 3px;
        padding-right: 3px;
    }

    /* Ajustes para el texto dentro del right-panel en pantallas pequeñas si es necesario */
    .titulo {
        font-size: 1.1em; /* Un poco más pequeño para móviles */
        text-align: center; /* Centrar el título */
        width: 100%; /* El título ocupa todo el ancho para centrarlo mejor */
    }

    .titulo::after {
        margin-left: auto;
        margin-right: auto; /* Para centrar la línea debajo del título en móviles */
    }

    .descripcion, .hanging {
        text-indent: 0; /* Quitar la sangría especial para una mejor legibilidad en móviles */
        padding-left: 0; /* Quitar el padding extra */
        text-align: left; /* Volver a alinear a la izquierda para el texto principal */
    }

    .info-list li {
        margin-bottom: 15px; /* Más espacio entre elementos de lista en móviles */
    }
}