@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

:root {
    --font-heading:"Barlow Semi Condensed", sans-serif;
    --font-body: "Nunito", sans-serif;
    --color-primary: #BD1963;
    --color-primary-dark: #FAFAFA;
    --color-primary-darker: #4B0A27;
    --color-secondary-lightest: #F1EBF4;
    --color-secondary-dark: #603278;
    --color-neutral-lightest: #f2f2f2;
    --color-neutral: #6C6C6C;
    --color-neutral-dark: #222222;
    --color-neutral-darker: #211A1E;
    --color-white: #FFFFFF;
    --color-legal:#0A43B5;
    --color-gris:#222222;

}

body {
    font-family:var(--font-body);
    background-color: white;
}
 
.font-heading {
    font-family: var(--font-heading)
}

.font-body {
    font-family: var(font-body);
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
    font-family: var(--font-heading);
   
}

h1, .h1 {
    text-transform: uppercase;
    font-size: 3.75rem;
    line-height: 1.1;
    font-weight: 600;
}

h2, .h2 {
    font-size: 2.8rem;
    line-height: 120%;
    font-weight: 600;
}

h3, .h3 {
    font-size: 2.5rem;
    line-height: 1.3;
    font-weight: 600;
}

h4, .h4 {
    font-size: 2rem;
    line-height: 130%;
}

h5, .h5 {
    font-size: 1.625rem;
    line-height: 140%;
}

.bg-legal {
    background-color: var(--color-legal)
}

.white {
    color: var(--color-white) !important
}

.primary {
    color: var(--color-primary);
}

.bg-color-primary {
    background-color: var(--color-primary);
}
.bg-secondary-dark {
    background-color: var(--color-secondary-dark);
}

.bg-secondary-lightest {
    background-color: var(--color-secondary-lightest)
}
.bg-neutral-dark {
    background-color: var(--color-neutral-dark);
}

.neutral-dark {
    color: var(--color-neutral-dark);
}
.neutral{
    color: var(--color-neutral)
}

.max-756, .max-960, .max-1140, .max-1260 {
       margin-left: auto;
    margin-right: auto;
}

.max-756 {
    max-width: 756px;
}

.max-960 {
    max-width: 960px;
}

.max-1140 {
    max-width: 1140px;
}

.max-1260 {
    max-width: 1260px;
}

.img-100 img {
    width: 100%;
    height: auto;
}

.border1 {
border: 1px solid var(--color-secondary-lightest);
}

.b-radius1 {
    border-radius: 10px 10px 0 0  ;
}

.b-radius2 {
    border-radius: 0 0 10px 10px  ;
}

.b-radius3 {
    border-radius:10px;
}
.b-radius4 {
    border-radius:20px;
    overflow: hidden;
}


.scale1 .grupo-ciudad {
    transition: .5s ease;
}

.scale1:hover .grupo-ciudad {
    background-size: 110% 110%;
    
}

.scale2 img {
    transition: .5s ease;
}



/****************** BARRA HEADER PRINCIPAL ********************/

.region-header {
    background-color: var(--color-white);
}


/*************************** MIGA DE PAN ****************************/

.breadcrumb {
    padding:1rem 0
}

.breadcrumb li:nth-child(1) a {
    color:var(--color-primary)
   
}
.breadcrumb li a {
     color: var(--color-neutral-dark)
}

.breadcrumb li:nth-child(1) a:before {
content:"\F423";
margin-right: 5px;
}



/****************** BARRA DE MENU SUPERIOR ********************/

.region-nav-main {
    width: 100%;
}

.navbar {
    background-color: var(--color-primary-dark);
    padding: 0;
}

.navbar-nav {
    justify-content: space-between !important;
}

.menu01 .nav-link {
    text-transform: uppercase;
    color: var(--color-gris);
    font-family: var(--font-heading);
    font-weight: 100;
    font-size: 20px;
    padding: 20px 0;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.navbar-nav .nav-link.active{
    color: var(--color-white);
    background-color: var(--color-primary-darker);
}

/****************** BLOQUE HOME DESTACADO ********************/

.bl01-home {
    background-image: url("/sites/default/files/2025-07/bn01.jpg");
    background-size:100% auto;
    background-attachment: fixed;
   
}

.bl01-home h1 {
    text-wrap:balance;
}


/****************** BLOQUE VISTA CIUDADES HOME ********************/

.box-bl02 p {
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 0;
}

.view-cities .view-content {
    display: flex;
    flex-wrap: wrap;
    --bs-gutter-x: 2.5rem

}
.views-field-nid .field-content:after {
    content:" proyectos"
}

.aspect1-4 {
    aspect-ratio: 1.4 / 1;
}

.item-city ul {
    list-style: none;
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column;
    row-gap: 1.4rem;
    background-color: var(--color-primary-dark);
        aspect-ratio: 5 / 3;
    overflow: auto;
}

.city-group {
    overflow: hidden;
}

.bp-title a,
.ent-title {
   color: var(--color-neutral);
    font-size: 1.3rem;
    text-decoration: none;
    font-weight: 600;
    line-height: 1.1;
    font-family: var(--font-heading);
}

.item-bp:hover .bp-title a,
.new-box:hover .bp-title a{
    color: var(--color-neutral-dark)
}

.bp-title, .ent-title{
    margin-bottom: 0rem;
}

.counter {
    line-height: 1;
    display: inline-block;
    background-color: var(--color-primary-dark);
    padding: .2rem .6rem;
    text-transform: uppercase;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: .9rem;
}

.country {
        font-family: var(--font-heading);
   
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--color-primary-dark);
    background-color: var(--color-neutral-dark);
    display: inline;
    padding: 0rem .3rem;
}



.group-head-city {
    position: relative;
    z-index: 3;
}

.group-head-city h3 {
        background-color: var(--color-neutral-dark);
    color: var(--color-primary-dark);
    display: inline;
    padding: 0rem .3rem;
}

.year-bp {
    font-size: 14px;
        color: var(--color-neutral);
}

.grupo-ciudad {
 padding: .5rem .5rem;
  background-size: 100% 100%;
    background-position: center;
}

.Valencia {
    background-image: url("/sites/default/files/images/valencia.jpg");
}

.Aires {
    background-image: url("/sites/default/files/images/buenos-aires.jpg");
}

.México {
    background-image: url("/sites/default/files/images/ciudad-de-mexico.jpg");
}

.Bogotá {
  background-image: url("/sites/default/files/images/bogota.jpg");  
}

.Barcelona {
  background-image: url("/sites/default/files/images/barcelona.jpg");    
}

.Montevideo {
  background-image: url("/sites/default/files/images/montevideo.jpg");    
}

.Madrid {
  background-image: url("/sites/default/files/images/madrid.jpg");    
}


.sub-ub {
    display:flex;
    flex-direction:column;
}


/********************************************* Acordeon home *****************************/
.acc-home .ckeditor-accordion-container > dl dt.active > a,
.acc-home .ckeditor-accordion-container > dl dt.active > a,
.acc-home .ckeditor-accordion-container > dl dt > a, .ckeditor-accordion-container > dl dt > a:not(.button),
.acc-home .ckeditor-accordion-container > dl dt > a:hover, 
.acc-home .ckeditor-accordion-container > dl dt > a:not(.button):hover {
     background: none;
    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 200;
    text-decoration: none;
}

.acc-home dd.active {
    border-bottom: 1px solid white;
    padding-bottom: 1.5rem;
    padding-top: .5rem;
}
.acc-home dt.active a {
    border-bottom: none !important;
}
.ckeditor-accordion-container > dl dt > a, .ckeditor-accordion-container > dl dt > a:not(.button) {
    border-bottom: 1px solid white;
}
.ckeditor-accordion-container > dl {
    border: 1px solid white;
}
.ckeditor-accordion-container > dl dd {
    padding: 0 50px;
}
.label {
    font-family:var(--font-heading);
    font-weight:100;
    text-transform: uppercase;
    margin-bottom:1rem;
    display: block;
    font-size: 1.1rem;
    letter-spacing: .5px;
}

/********************************************* Fin  Acordeon home *****************************/

/********************************************* Botones principales*****************************/

.but-box {
    display: flex;
}
.boton {
        border: 1px solid white;
        color: white;
        font-family: var(--font-heading);
        font-size: 1.3rem;
        border-radius: 40px;
        padding: 0 1.5rem 0 2rem;
        font-weight: 100;
        display:flex;
        align-items:center;
        justify-content:space-between;
        text-decoration: none;
        gap:1rem;
}

.boton:hover {
        color: var(--color-secondary-lightest);
    border-color: var(--color-secondary-lightest);

}

.boton:after {
    font-family: "bootstrap-icons";
  content: "\F134";
    margin-left:0rem;
    font-size:2.5rem
}

.but-primary .boton {
    color:var(--color-primary);
    border: 1px solid var(--color-primary);
}
.but-primary .boton:hover {
        color: var(--color-neutral-dark);
    border-color: var(--color-neutral-dark);

}

/********************************************* Fin  Botones principales*****************************/

/********************************************* Bloque Noticias home *****************************/

.view-articulos .slick-list {
    margin-left:-20px;
    margin-right: -20px;
}

.view-articulos .slick__arrow {
    top: unset;
    bottom: 0;
    left: unset;
    width: unset;
    right: 3rem;
}

.slick-prev:before, .slick-next:before, .sub-ub:before, .sub-inst:before, .breadcrumb li:nth-child(1) a:before {
    font-family: "bootstrap-icons" !important;
}

.sub-inst:before{
    content:"\F154";
    display: flex;
    flex-direction: column;
}
.slick-prev:before {
    content: "\F134" !important;
}

.slick-next:before {
   content: "\F12A" !important;  
}

.view-articulos .slick-prev:before, .view-articulos .slick-next:before {
    color: var(--color-primary);
}

.new-box:hover .scale2 img {
    scale: 1.1;
}

.new-txt p {
    font-size: 1.1rem;
}

.new-date {
    margin-top: .5rem;
    color: var(--color-neutral);
}

.page-node-type-page h1,
.page-node-type-article h1{
    text-align: center;
        color: var(--color-neutral-dark);
    margin: 3rem 0;
}


.body-art {   
color: var(--color-neutral-dark);
    font-size: 1.1rem;
    margin-top: 3rem;
}

.field--name-node-changed-date:before {
    content:"Última modificación: ";
}

.field--name-node-changed-date {
        text-align: right;
    margin-top: 4rem;
    font-weight: 500;
    font-size: 1rem;
}

.body-art h2,
.tab-pane-content h2{
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--color-primary-dark);
    margin-top: 2rem;
    margin-bottom: 1.2rem;
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0;
}
.body-art a {
    color:var(--color-primary);
    text-decoration:none;
}



.field--name-node-post-date {
    text-align: center;
    margin-bottom: .5rem;
    color: var(--color-neutral);
    font-size: 1.2rem;
}

.page-node-type-page .field--name-field-image {
    margin-bottom: 3rem;
}
.field--name-field-image img {
    width: 100%;
    height: auto;

}


/********************************************* Fin Bloque Noticias home *****************************/

/************************ Tabs laterales pagina basica ***********************************/
.page-node-type-page .bootstrap-tabs {
    display:flex;
}

.page-node-type-page .bootstrap-tabs .nav-tabs {
    width: 30%;
    display: flex;
    flex-direction: column;
}

.page-node-type-page .bootstrap-tabs .tab-content {
    width:70%;
}
.page-node-type-page .bootstrap-tabs .tab-link {
    font-family:var(--font-heading);
    font-weight:500;
    color:var(--color-neutral);
    font-size:1.6rem;
    text-decoration:none;
    border: none;
    line-height: 1.2;
    margin-bottom: .5rem;
}
.page-node-type-page .bootstrap-tabs .nav-tabs > li.active,
.page-node-type-page .bootstrap-tabs .nav-tabs > li.active > a{
    background:none;
    border:none;
}
.page-node-type-page .bootstrap-tabs .nav > li > a:hover {
    background:none;
    border:none;
        color: var(--color-primary-dark);
}

.page-node-type-page .bootstrap-tabs .nav-tabs > li.active > a {
    color: var(--color-neutral-darker);
    border-left: 6px solid var(--color-neutral-dark);
    padding-left: .7rem;
}

.page-node-type-page .tab-content > .active > .tab-pane-content {
    min-height: 500px;
    margin-bottom: 6rem;
}
.tab-pane-content li,
.body-art li{
    margin-bottom:1rem;
    font-size:1.1rem;
    color: var(--color-neutral-dark);
}

.tab-pane-content p {
    font-size:1.1rem
}


.page-node-type-page .tab-pane-content img {
    max-width:100%;
    height:auto;
}

/************************ Fin Tabs laterales pagina basica ***********************************/

/************************* Listadao de instituciones ************************/
.box-ent {
    padding: 2rem;
    background-color: var(--color-neutral-lightest);
    min-height: 250px;
    margin-bottom: 2rem;
}

.ent-info {
        gap: .6rem;
}

.ent-place:before {
    content: "\F3E8";
    font-family: "bootstrap-icons";


}

.ent-web:before {
    content: "\F470";
    font-family: "bootstrap-icons";
}

.ent-ig:before {
    content: "\F437";
    font-family: "bootstrap-icons";
}



.ent-title, .ent-web, .ent-ig, .ent-place {
    display: flex;
    flex-direction: row;
    gap:.5rem;
    align-items: center;
         
}

.ent-web, .ent-ig {
    word-break: break-all;
        word-break: break-word;
    line-height: 1.2;
    font-size: .9rem;
}


/****************************Fin listado de instituciones *******************/


/************************* FOOTER **********************************/

footer .region-footer {
    padding: 0;
}

footer {
    padding: 0;
}





@media (max-width: 768px) {
 
h1, .h1 {
    font-size: 2.75rem;
    line-height: 120%;
}

h2, .h2 {
    font-size: 2rem;
    line-height: 120%;
}

h3, .h3 {
    font-size: 1.5rem;
    line-height: 130%;
}

h4, .h4 {
    font-size: 1.25rem;
    line-height: 130%;
}

h5, .h5 {
    font-size: 1.125rem;
    line-height: 140%;
} 
    
}