@media (max-width: 991px) {
    .desktop {
        display: none !important;
    }

    .mobile {
        display: block;
    }

    /* barra de navegacion y menu */
    /* menu toogle  */
   button.navbar-toggler {
        position: absolute;
        right: 8px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        padding: 1px 0;
        border: none;
   }

    button.navbar-toggler span.navbar-toggler-icon {
        font-size: 25px;
    }

    .navbar-toggler .navbar-toggler-icon {
        background: none;
    }

    .navbar-toggler.collapsed .navbar-toggler-icon {
        background-image: none;
        background-color: #fff;
        mask-image: var(--bs-navbar-toggler-icon-bg);
        -webkit-mask-image: var(--bs-navbar-toggler-icon-bg);
    }

    .navbar-toggler.collapsed:after,
    .navbar-toggler.collapsed:before {
        width: 0px;
    }

    .navbar-toggler:before,
    .navbar-toggler:after {
        width: 2px;
        height: 30px;
        content: " ";
        background: #ffffff;
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        margin: 0 auto;
        -webkit-transform: translateY(-50%) rotate(45deg);
        -ms-transform: translateY(-50%) rotate(45deg);
        transform: translateY(-50%) rotate(45deg);
    }

    .navbar-toggler:after {
        -webkit-transform: translateY(-50%) rotate(313deg);
        -ms-transform: translateY(-50%) rotate(313deg);
        transform: translateY(-50%) rotate(313deg);
    }

    .navbar .navbar-toggler:focus {
        outline: none;
        box-shadow: none;
    }

    #navbarSupportedContent {
        position: absolute;
        width: 100%;
        top: 70px;
        z-index: 2;
        background-color: var(--principal);
        -webkit-box-shadow: 0 0 0 100vmax var(--principal);
        box-shadow: 0 0 0 100vmax var(--principal);
        -webkit-clip-path: inset(0 -100vmax);
        clip-path: inset(0 -100vmax);
        border: none;
        padding-bottom: 5px;
        max-height: calc(100vh - 135px);
        overflow-y: auto;
    }

    li.nav-item {
        border-top: 1px solid #eaeaea;
    }

    ul.dropdown-menu.nav-level-1.show {
        margin: 0;
        padding: 0;
    }

    a.nav-item.nav-link {
        padding: 5px 0px 5px 15px;
        width: 100%;
        text-align: left;
        margin: 8px 0;
    }

    /* Contenedores */
    .gridwrapped > div .bodygrid {
        padding-top: 10px;
        row-gap: 15px;
    }

    /* REGIONES */
    .dialog-off-canvas-main-canvas {
        margin-top: 70px;
    }

    /* anuncio */
    .gridanuncio .cont-image {
        flex: 0.6;
    }
    
    .gridanuncio .cont-body h2 {
        font-size: 4.8vw;
    }
    
    #congresos img {
        margin-bottom: 25px;
    }

}

/* 2. Hasta Tabletas Verticales (sm-max) */
@media (max-width: 767.98px) {

    /* footer */
    .region.region-footer {
        row-gap: 25px;
        flex-direction: column;
        align-items: center;
    }

    .footer-contacto {
        gap: 25px;
    }

    .footer-contacto p {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    #block-iotheme-footerlogo {
        order: 0;
    }

    #block-iotheme-redes {
        align-self: center;
    }

    /* tablas */
    body table {
        min-width: 50px !important;
        padding: 0;
    }

    .table-wrapped table td {
        width: auto;
    }

    /* Envuelve la tabla en un contenedor virtual para el scroll */
    table:not(.table-wrapped table) {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        /* Evita que el contenido de las celdas se rompa en varias líneas */
    }

    /* Aplica estilos a las celdas para que no se rompan */
    table:not(.table-wrapped table) td,
    table:not(.table-wrapped table) th {
        white-space: normal;
        /* Vuelve a permitir que el contenido se rompa dentro de las celdas */
    }

    /* bloque basico Caledario de actividades el grid tiene clase dentro io-iframe*/
    .io-iframe {
        padding: 0;
    }

    /* bloques, contenedores Accesos valores */
    .estilo1 {
        min-height: auto;
        }

    /* anuncio */
   
    .gridanuncio .cont-body p {
        font-size: 2.7vw;
    }

    /* novedad */
    .novedadwrapped .col1 {
        order: 1;
    }

    .novedadwrapped .col2 {
        order: 0;
    }

   /* concursos */

    .concursos .views-field-field-archivos a,
    .concursos td.views-field-field-descripcion * {
        width: 90vw;
        max-width: 66vw;
    } 

    /********************************tamaños contenedores**********************/
    .g2 .bodygrid > .field__item,
    .g2 > .view-content .views-row,
    .g2 > div .view-content .views-row,
    .g3 .bodygrid > .field__item,
    .g3 > .view-content .views-row,
    .g3 > div .view-content .views-row,
    .g4 .bodygrid > .field__item,
    .g4 > .view-content .views-row,
    .g4 > div .view-content .views-row {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        width: 100%;
    }

    /* vista Formato: tipo jQuery UI accordion */
    body .ui-accordion .ui-accordion-content {
        padding: 0.5rem;
    }

    /* contacto */    
    .iocontacto iframe {
        max-height: 300px;
    }

    /********************** BLOQUE WHATSAPP ************************************/
    #block-iotheme-whatsapp {
        bottom: 10px;
        right: 5px;
        width: 75px;
        opacity: 85%;
    }
}

@media (max-width: 575.98px) {

/* Tipo contenido Beneficio node nodo */
    .beneficiowrapped .compartir {
        justify-content: center;
        border: none;
        position: absolute;
        left: 0;
        bottom: 10px;
    }
    
    .beneficiowrapped .field--name-node-title h1 {
        padding-bottom: 0;
        margin-bottom: 0;
    }

    
/* anuncio */
    #block-iotheme-anunciosfront {
        min-height: 440px;
    }

    .gridanuncio {
        flex-direction: column-reverse;
    }

    .gridanuncio .cont-body h2 {
        font-size: 40px;
        margin: 15px 0;
    }

    .gridanuncio img {
        margin-top: 10px;
    }

    .gridanuncio .cont-body p {
        font-size: 20px;
        margin-bottom: 5px;
    }

    .gridanuncio .cont-body .field--name-body {
        min-height: 185px;
    }

    /* flechas Splide */
    .splide__arrows.splide__arrows--ltr {
        display: flex;
        gap: 15px;
        width: fit-content;
        position: absolute;
        bottom: 15px;
        right: 0;
        border-radius: 11px;
        background: #f1f1f1;
        z-index: 10;
    }

    .dialog-off-canvas-main-canvas {
        padding: 0 5px;
    }

    .navbar > .container-fluid > div:nth-child(1) {
        padding: 0;
    }

    /* menu toogle  */
    button.navbar-toggler {
        right: 5px;
    }

    /* Contenedores */
    .gridwrapped > div .view-content .views-row {
        /*border-bottom: 1px solid var(--lineas);*/
        padding-bottom: 10px;
    }

    .region.region-footer img {
        max-width: 45px;
        height: auto;
    }

    a.social-sharing-buttons-button.share-facebook {
        margin-left: 0;
    }

}

@media (min-width: 576px) {
    
}

@media (min-width: 768px) {

    /* nodo novedad Display mode node--view-mode-full */
    .novedadwrapped {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 25px;
        gap: 25px;
    }

    .novedadwrapped .col1 {
        max-width: 35%;
        flex-basis: 35%;
    }

    .novedadwrapped .col2 {
        flex: 1;
        padding: 0 15px;
        display: flex;
        gap: 50px;
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
        align-items: flex-start;
    }

    .novedadwrapped .field--name-field-etiqueta {
        text-align: right;
    }

    .novedadwrapped .field--name-field-cuerpo {
        padding-top: 20px;
    }

    /* nodo Curso Display mode node--view-mode-full */
    .cursowrapped {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 25px;
        gap: 25px;
    }

    .cursowrapped .col1 {
        max-width: 35%;
        flex-basis: 35%;
    }

    .cursowrapped .col2 {
        flex: 1;
        padding: 0 15px;
        display: flex;
        gap: 50px;
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
        align-items: flex-start;
    }

    .cursowrapped .field--name-field-tipo {
        text-align: right;
    }

    .cursowrapped .field--name-field-cuerpo-curso {
        padding-top: 20px;
    }

    /* nodo beneficio Display mode node--view-mode-full */
    .beneficiowrapped {
        width: 100%;
        display: inline-block;
    }

    .beneficiowrapped .col1 {
        max-width: 35%;
        width: 35%;
        margin-right: 25px;
        float: left;
    }

    .beneficiowrapped .field--name-field-cuerpo-beneficio,
    .beneficiowrapped .col2 {
        width: 60%;
        margin: 0;
        margin-left: auto;
    }

    .beneficiowrapped .field--name-field-tipo-beneficio {
        text-align: right;
    }

    .beneficiowrapped .field--name-field-cuerpo-beneficio {
        padding-top: 20px;
    }

    .beneficiowrapped .compartir {
        border: none;
        position: absolute;
        bottom: 10px;
        right: 40px;
    }
}


/* Brakpoints Para acomodar estilo en las ventanas gráficas de tabletas y detalles de estilo */
@media (max-height: 500px) {}

@media (min-width: 576px) and (max-width: 991px) {}

@media only screen and ((min-width: 801px) and (max-width: 1150px)) {}

@media (min-width: 992px){


}