/*-------------------------BackGround Principal--------------------------------*/
.node__content {
    background-color: var(--color-crema);
}

/* ------------------- BLOQUE IMAGENTEXTO DOMINO RECTANGULO -------------------*/
/*Secciones docente impares ocultar foto izquierda y viceversa*/
.bloque-imagentexto-domino-rectangulo .field--name-field-personal .field__item:nth-child(odd) .layout__region--third,
.bloque-imagentexto-domino-rectangulo .field--name-field-personal .field__item:nth-child(even) .layout__region--first {
    display: none;
}

/*Distribuir 1 a 4 secciones foto y descripcion*/
.bloque-imagentexto-domino-rectangulo .field--name-field-personal .field__item:nth-child(odd) .layout--threecol-section {
    display: grid;
    grid-template-columns: 2fr 4fr;
    padding: 2rem 0;
    background-color: var(--color-crema);morad
}
.bloque-imagentexto-domino-rectangulo .field--name-field-personal .field__item:nth-child(even) .layout--threecol-section {
    display: grid;
    grid-template-columns: 4fr 2fr;
    padding: 2rem 0;
    background-color: var(--color-crema);
}

/*Alinear descripcion docente verticalmente*/
.bloque-imagentexto-domino-rectangulo .field--name-field-personal .field__item .layout--threecol-section {
    align-items: center;
}

/*Secciones segundas impares amarilla y pares moradas*/
.bloque-imagentexto-domino-rectangulo .field--name-field-personal .field__item:nth-child(odd) .layout__region--second{
    background-color: var(--color-amarillo);
    display: flex;
    min-height: 25rem;
    flex-direction: column;
    justify-content: center;
    padding-left: 2rem;
    color: var(--color-verde);
    align-items: flex-start;
    text-align: left;
}
.bloque-imagentexto-domino-rectangulo .field--name-field-personal .field__item:nth-child(even) .layout__region--second{
    background-color: var(--color-morado);
    display: flex;
    min-height: 25rem;
    flex-direction: column;
    justify-content: center;
    padding-right: 2rem;
    color: white;
    align-items: flex-end;
    text-align: right;
}

/*Textos secciones second*/
.field__item .layout__region--second .field--name-title {
    font-weight: bold;
    font-size: 1.5rem;
}
.field__item .layout__region--second .field--name-field-cargo {
    font-weight: bold;
    font-size: 1rem;
    text-transform: uppercase;
}
.field__item .layout__region--second .field--name-body {
    font-size: 1.125rem;
    padding-top: 2rem;
    max-width: 50vw;
}

/*Color background primer bloque*/
.bloque-imagentexto-domino-rectangulo .field--name-field-personal .field__item .layout__region--first{
    background: linear-gradient(to right,var(--color-crema) 75%, var(--color-amarillo) 25%);
    min-height: 25rem;
    display: flex;
    justify-content: end;
    align-items: center;
}

/*Color background tercer bloque*/
.bloque-imagentexto-domino-rectangulo .field--name-field-personal .field__item .layout__region--third{
    background: linear-gradient(to left,var(--color-crema) 75%, var(--color-morado) 25%);
    min-height: 25rem;
    display: flex;
    justify-content: start;
    align-items: center;

}

/*Fondo seccion docentes*/
.bloque-imagentexto-domino-rectangulo  {
    width: 100%;
    background-color: var(--color-crema);
    box-sizing: border-box;
}

/*Tamanno foto y ubicacion dentro de contenedor*/
.field--name-field-personal .field--name-field-imagen img {
     height: 100%;
     width: 100%;
     padding-top: .5rem;
     object-fit: contain;
}

/*Tamanno contenedor foto*/
.field--name-field-personal .field--name-field-imagen {
    max-width: 18.75rem;
    aspect-ratio: 1;
}

.field--name-field-personal .layout__region--first .field--name-field-imagen img {
    background-color: var(--color-morado);
}
.field--name-field-personal .layout__region--third .field--name-field-imagen img {
    background-color: var(--color-amarillo);
}


/* ------------------- BLOQUE IMAGENTEXTO --------------------------------------*/
/*Elemento principal contenedor de los 3 elementos*/
.bloque-imagentexto .layout__region--content {
    /*padding-top: 2rem;*/
    /*background-color: var(--color-crema);*/
    /*display: flex;*/
    /*flex-direction: column;*/
    /*align-items: center;*/
}

/*Elementop contenedor del parrafo amariillo*/
.bloque-imagentextoAmarillo{
    
}
/*Elementop contenedor del parrafo Verde*/
/*.bloque-imagentextoVerdeJade .block-layout-builder .field--name-body {*/
.bloque-imagentextoVerdeJade .block-field-blocknodetalleresbody .content{
    max-width:var(--container-text);
}
.bloque-imagentextoVerdeJade .block-field-blocknodetalleresbody{
    /*display: flex;*/
    /*justify-content: center;*/
    /*background-color: var(--color-verdeJade);*/
    /*color: var(--color-claro);*/
    /*padding-bottom: 4rem;*/
}

/*Elemento contenedor del parrafo Morado*/
.bloque-imagentextoMorado .block-layout-builder .field--name-body {
    display: flex;
    justify-content: center;
    /*background-color: var(--color-morado);*/
    color: var(--color-claro);
    padding-bottom: 4rem;
}

/*Titulo*/
.bloque-imagentextoVerdeJade .block-layout-builder .field.field--name-title,
.bloque-imagentextoMorado .block-layout-builder .field.field--name-title {
    color: var(--color-verde);
    font-weight: bold;
    font-size: 2rem;
}

/***************************************************************************
COLORES COMPONENTE: IMAGENTEXTO
***************************************************************************/
.bloque-imagentexto.fondo-morado{
    background: linear-gradient(to top, var(--color-morado) 80%, var(--color-crema) 20%);
}
.bloque-imagentexto.fondo-verde{
    background: linear-gradient(to top, var(--color-verde) 80%, var(--color-crema) 20%);
}
.bloque-imagentexto.fondo-naranja{
    background: linear-gradient(to top, var(--color-naranja) 80%, var(--color-crema) 20%);
}
.bloque-imagentexto.fondo-amarillo{
    background: linear-gradient(to top, var(--color-amarillo) 80%, var(--color-crema) 20%);
}
.bloque-imagentextoMorado .layout__region--content {
    background: linear-gradient(to top, var(--color-morado) 80%, var(--color-crema) 20%);
}
.bloque-imagentextoNaranja {
    background: linear-gradient(to top, var(--color-naranja) 80%, var(--color-crema) 20%);
}
.bloque-imagentextoMorado {
    background: linear-gradient(to top, var(--color-morado) 80%, var(--color-crema) 20%);
}
.bloque-imagentextoVerdeJade {
    background: linear-gradient(to top, var(--color-verdeJade) 80%, var(--color-crema) 20%);
}
.bloque-imagentextoVerde {
    background: linear-gradient(to top, var(--color-verde) 80%, var(--color-crema) 20%);
}
.bloque-imagentextoAmarillo {
    background: linear-gradient(to top, var(--color-amarillo) 80%, var(--color-crema) 20%);
}
.bloque-imagentexto .field--name-field-media-image {
    margin: 0;
}

/***************************************************************************
COLORES: TEXTOS DEL CONTENIDO
***************************************************************************/

/*[TODO:JSK]: Tenemos que eliminar esos prefijos de fondo-color y 
eliminar tambien bg-morado,etc. Deberia de preguntarnos quien controla
ese color.
*/
.bg-amarillo,
.bg-amarillo p,
.bg-amarillo a,
.bloque-imagentexto.fondo-amarillo .textoBajada p,
.bloque-imagentexto.fondo-amarillo .textoBajada a,
.bloque-imagentextoAmarillo .textoBajada p,
.bloque-imagentextoAmarillo .textoBajada a,
.bloque-imagentexto.fondo-amarillo .containerText,
.bloque-imagentexto.fondo-amarillo .containerText p,
.bloque-imagentexto.fondo-amarillo .containerText a{
  color: var(--color-para-amarillobg) !important;
}
.bg-morado,
.bg-morado p,
.bg-morado a,
.bloque-imagentexto.fondo-morado .textoBajada p,
.bloque-imagentexto.fondo-morado .textoBajada a,
.bloque-imagentextoMorado .textoBajada p,
.bloque-imagentextoMorado .textoBajada a,
.bloque-imagentexto.fondo-morado .containerText, 
.bloque-imagentexto.fondo-morado .containerText p,
.bloque-imagentexto.fondo-morado .containerText a{
  color: var(--color-para-moradobg) !important;
}
.bg-verdeJade,
.bg-verdeJade p,
.bg-verdeJade a,
.bloque-imagentexto.fondo-verdeJade .textoBajada p,
.bloque-imagentexto.fondo-verdeJade .textoBajada a,
.bloque-imagentextoVerdeJade .textoBajada p,
.bloque-imagentextoVerdeJade .textoBajada a,
.bloque-imagentexto.fondo-verdeJade .containerText,
.bloque-imagentexto.fondo-verdeJade .containerText p,
.bloque-imagentexto.fondo-verdeJade .containerText a{
  color: var(--color-para-verdeJadebg) !important;
}
.bg-naranja,
.bg-naranja p,
.bg-naranja a,
.bloque-imagentexto.fondo-naranja .textoBajada p,
.bloque-imagentexto.fondo-naranja .textoBajada a,
.bloque-imagentextoNaranja .textoBajada p,
.bloque-imagentextoNaranja .textoBajada a,
.bloque-imagentexto.fondo-naranja .containerText,
.bloque-imagentexto.fondo-naranja .containerText p,
.bloque-imagentexto.fondo-naranja .containerText a{
  color: var(--color-para-naranjabg) !important;
}

.bg-verde,
.bg-verde p,
.bg-verde a,
.bloque-imagentexto.fondo-verde .textoBajada p,
.bloque-imagentexto.fondo-verde .textoBajada a,
.bloque-imagentextoverde .textoBajada p,
.bloque-imagentextoverde .textoBajada a,
.bloque-imagentexto.fondo-verde .containerText,
.bloque-imagentexto.fondo-verde .containerText p,
.bloque-imagentexto.fondo-verde .containerText a{
  color: var(--color-para-verdebg) !important;
}

.btnNaranja,
.btnNaranja a {
  color: var(--color-para-naranjabg) !important;
}

.bloque-imagentexto.fondo-amarillo .textTitle,
.bloque-imagentexto.fondo-naranja .textTitle,
.bloque-imagentexto.fondo-verde .textTitle,
.bloque-imagentexto.fondo-verdeJade .textTitle,
.bloque-imagentexto.fondo-morado .textTitle{
    color:var(--color-verde) !important;
}




.bloque-imagentexto .wp-block-drupalmedia-drupal-media-entity {
    height: inherit;
    object-fit: cover;
    max-width: calc(var(--container-text) - 5rem);
    width: 100%;
    margin: 1rem auto;
}
.bloque-imagentexto .imagen-bajada {
    text-align:center;
    margin: 1rem 0 3rem;
}
    
.bloque-imagentexto .imagen-bajada img {
    /*padding: 2rem;*/
    width: 100%;
    height: inherit;
    object-fit: cover;
    max-width: calc(var(--container-text) - 5rem);
    width: 100%;
}

/*parrafo*/
/*.bloque-imagentexto .block-layout-builder p,*/
/*.bloque-imagentextoUsuarioFecha .block-layout-builder p*/
/*{*/
    /*max-width: 65%;*/
/*}*/

/*------------------- BLOQUE IMAGEN GRILLA --------------------------------------*/
/*Bloque contenedor de la grilla*/ 
.layout--onecol .bloque-imagen-grilla {
    background-color: var(--color-crema);
    padding: 4rem 2rem;
    display: flex;
    justify-content: center;
}

/*Bloque contenedor de la galeria*/
.bloque-imagen-grilla .field--name-field-galeria {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%,19rem),1fr));
    max-width: 1100px;
}

/*Imagen*/
.field--name-field-galeria .field__item img {
    margin: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1;
}

/*-------------------------BLOQUE IMAGEN TEXTO CON USUARIO--------------------------*/
/*.bloque-imagentextoUsuarioFecha .layout__region {*/
/*    display: grid;*/
/*    grid-template-areas:*/
/*        "unoImgPpal unoImgPpal unoImgPpal unoImgPpal unoImgPpal unoImgPpal unoImgPpal"*/
/*        ". dosImgUser tresUser . . . ."*/
/*        ". dosImgUser cuatroFecha . . . ."*/
/*        "cincoParrafo cincoParrafo cincoParrafo cincoParrafo cincoParrafo cincoParrafo cincoParrafo";*/
/*    background: linear-gradient(to top, var(--color-morado) 90%, var(--color-crema) 10%);*/
/*}*/

/*.bloque-imagentextoUsuarioFecha .imagen-bajada {*/
/*    grid-area: unoImgPpal;*/
/*    margin: auto;*/
/*}*/

/*.bloque-imagentextoUsuarioFecha div.block-field-blocknodenoticiasuid:nth-child(2){*/
/*    grid-area: dosImgUser !important;*/
/*}*/

/*.bloque-imagentextoUsuarioFecha div.block-field-blocknodenoticiasuid:nth-child(2) img {*/
/*    width: 80px;*/
/*    border: solid 2px var(--color-claro);*/
/*    border-radius: 40px;*/
/*    height: auto;*/
/*    object-fit: cover;*/
/*    aspect-ratio: 1;*/
/*}*/

/*.bloque-imagentextoUsuarioFecha .block-field-blocknodenoticiasuid {*/
/*    grid-area: tresUser;*/
/*    align-self: end;*/
/*    color:  var(--color-claro);*/
/*    font-weight: bold;*/
/*}*/

/*.bloque-imagentextoUsuarioFecha .block-field-blocknodenoticiascreated {*/
/*    grid-area: cuatroFecha;*/
/*    color:  var(--color-claro);*/
/*}*/

/*.bloque-imagentextoUsuarioFecha .block-field-blocknodenoticiasbody {*/
/*    grid-area: cincoParrafo;*/
/*}*/

/*.bloque-imagentextoUsuarioFecha .imagen-bajada img {*/
/*    margin: 0;*/
/*    padding: 2rem;*/
/*    width: 65vw;*/
/*    height: 36vw;*/
/*    object-fit: cover;*/
/*}*/

/*-------------------------BANNER FONDO--------------------------*/
.banner-fondo {
    height: 50vh;
    display: flex;
    align-items: center;
}

.HeroImage {
    margin: 0;
    height: inherit;
}

/*-------------------------BANNER IMAGENTEXTO--------------------------*/
.banner-imagen-texto .col2 {
    justify-content: center;
}

.banner-imagen-texto-grid .wp-block-image {
    margin: 0 0 0;    
    display: flex;
    justify-content: center;
}

/* ------------------- BLOQUE IMAGENTEXTO ISOMETRICO  ---------------------*/
/*.blockAdmision {*/
/*    grid-template-columns: 45% 55%;*/
/*}*/


/*.blockAdmisionImg img {*/
/*    height: calc(60vh);*/
/*}*/

/*.blockAdmisionText {*/
/*    padding: 4rem 10rem 5rem 5rem;*/
/*    position: relative;*/
/*}*/

/*#btnAd {*/
/*    padding: 0.75rem;*/
/*    position: absolute;*/
/*    left: 25%;*/
/*    bottom: -20px;*/
/*    width: 50%;*/
/*}*/

/*#btnAd::after {*/
/*    content: " →";*/
/*}*/

/* ------------------- BLOQUE TEXTO CENTRADO  ---------------------*/
.bloque-texto-centrado {

}

/*.bloque-texto-centrado .containerText {*/
/*    max-width: 100%*/
/*}*/

/* ------------------- BLOQUE TEXTO 2-COLUMNAS  ---------------------*/
/*.containerText {*/
/*    max-width: 1200px;*/
/*}*/

/* ------------------- BLOQUE GRILLA SEMIFONDO  ---------------------*/
.blockTalleres .view-content {
    align-items: center;
}