/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* Contenedor principal */
.contenedor-break {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    /* Evita que la pantalla completa haga scroll */
}

/* |||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* Break */
.b {
    /* Degradado en tonos púrpura (de vibrante a profundo/oscuro) */
    background: linear-gradient(135deg, #7c3aed, #5b21b6, #2e1065);
}

.b:hover {
    transform: translateY(-1px);
    box-shadow:
        0 5px 12px rgba(124, 58, 237, 0.28),
        /* Sombra neón púrpura */
        0 3px 6px rgba(0, 0, 0, 0.14);
    /* Sombra base oscura */
}

/* |||||||||||||||||||||||||||||||| */

/* |||||||||||||||||||||||||||||||| */

.bloqueContenido-Break {
    display: flex;
    align-items: stretch;
    /* Cambiado de 'center' a 'stretch' para que ambos lados midan lo mismo */
    justify-content: center;
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
}

.bloqueVideoBreak {
    flex: 1;
    /* Asegúrate de que el video o contenedor tenga una altura o contenido que empuje el diseño */
}

.bloqueTextoBreak {
    flex: 1;
    position: relative;
    box-sizing: border-box;
    margin: 10px 0;
    border-radius: 18px;
    /* Al usar 'stretch' en el padre, este elemento hereda la altura exacta del video */
}

/* Contenedor interno para el scroll */
.bloqueTextoBreak .informacion {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    overflow-y: auto;
    /* Se activa el scroll si el texto es muy largo */
    overflow-x: hidden;
    background-color: white;
    border-radius: clamp(8px, 2vw, 18px);
    padding: 20px;
    /* Opcional: espacio interno para que el texto no toque los bordes */
}

/* |||||||||||||||||||||||||||||||||||||||||||||||||||||| */



/*
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
  */
/* PARA LAPTOPS Y PANTALLAS GRANDES */
@media screen and (min-width: 1025px) {}

/*
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
  */
/* PARA TABLETAS Y DISPOSITIVOS DE TAMAÑO MEDIO */
@media (min-width: 768px) and (max-width: 1024px) {}

/*░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░*/

/* PARA DISPOSITIVOS MOVILES Y PANTALLAS PEQUEÑAS */


/* ////////////////////////////////////////////////////////////////////////////////// */
/* Contenedor principal en vertical */
/* PARA DISPOSITIVOS MOVILES Y PANTALLAS PEQUEÑAS */
@media (max-width: 767px) {

    /* Forzamos a que tanto el contenedor de tu clase como el que mencionaste antes vayan en vertical */
    .contenedor-break,
    .bloqueContenido-Break {
        display: flex !important;
        flex-direction: column !important;
        /* Fuerza el orden: arriba y abajo */
    }

    .bloqueVideoBreak {
        width: 100% !important;
        flex: none !important;
    }

    .bloqueTextoBreak {
        width: 100% !important;
        flex: none !important;
        position: relative !important;

        /* Controla la altura para que el texto no se desborde infinitamente */
        height: 40vh !important;
        margin: 0 0 25px 0 !important;
        /* Separación antes del final de la pantalla */
    }

    /* El contenedor interno con su scroll */
    .bloqueTextoBreak .informacion {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        overflow-y: auto !important;
        /* Activa la barra de desplazamiento vertical */
    }

}