/**
 * Fix Responsive v2 - Solución con aspect-ratio
 * Este enfoque cambia realmente el espacio ocupado en el DOM
 */

/* Reset básico */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Contenedor del iframe con aspect ratio fijo */
.responsive-iframe-container,
.opus-iframe-wrapper,
p:has(> iframe[src*="contenido-lecciones"]),
div:has(> iframe[src*="contenido-lecciones"]):not(.learndash-wrapper) {
    position: relative !important;
    width: 100% !important;
    max-width: 1050px !important;
    aspect-ratio: 1050 / 450 !important; /* Mantener proporción 1050:450 */
    overflow: hidden !important;
    margin: 0 auto 30px auto !important;
    display: block !important;
}

/* El iframe ocupa todo el contenedor */
iframe[src*="contenido-lecciones"],
iframe[src*=".htm"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

/* Para el contenido DENTRO del iframe, aplicar transform */
@media screen and (max-width: 1049px) {
    /* Esto no afectará directamente, pero el CSS dentro del iframe sí */
    .responsive-iframe-container {
        /* El aspect-ratio ya maneja el responsive */
    }
}

/* Asegurar que LearnDash no se superponga */
.learndash-wrapper,
.ld-lesson-topic-list,
.ld-content-actions {
    position: relative !important;
    clear: both !important;
    margin-top: 0 !important;
}

/* Para contenedores padre */
.learndash-wrapper,
.ld-content-container,
.entry-content {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Fallback para navegadores sin soporte de aspect-ratio */
@supports not (aspect-ratio: 1050 / 450) {
    .responsive-iframe-container,
    .opus-iframe-wrapper,
    p:has(> iframe[src*="contenido-lecciones"]),
    div:has(> iframe[src*="contenido-lecciones"]):not(.learndash-wrapper) {
        padding-bottom: 42.857% !important; /* 450/1050 = 0.42857 */
        height: 0 !important;
    }
}