@charset "utf-8";

@font-face {
    font-family: 'BR Nebula';
    src: url('assets/fonts/BRNebula-Bold.woff2') format('woff2'),
        url('assets/fonts/BRNebula-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BR Nebula';
    src: url('assets/fonts/BRNebula-Black.woff2') format('woff2'),
        url('assets/fonts/BRNebula-Black.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BR Nebula';
    src: url('assets/fonts/BRNebula-Light.woff2') format('woff2'),
        url('assets/fonts/BRNebula-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BR Nebula';
    src: url('assets/fonts/BRNebula-Regular.woff2') format('woff2'),
        url('assets/fonts/BRNebula-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BR Nebula';
    src: url('assets/fonts/BRNebula-SemiBold.woff2') format('woff2'),
        url('assets/fonts/BRNebula-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BR Nebula';
    src: url('assets/fonts/BRNebula-RegularItalic.woff2') format('woff2'),
        url('assets/fonts/BRNebula-RegularItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'BR Nebula';
    src: url('assets/fonts/BRNebula-LightItalic.woff2') format('woff2'),
        url('assets/fonts/BRNebula-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

:root {
  --color-azul: #018CB3;
  --color-azul_oscuro: #025E73;
  --color-naranja: #EA6A18;
  --color-amarillo: #F2A71B;
  --color-negro: #222222;
  --color-blanco: #fff;
  --color-gris: #5B6C6E;
  --color-gris_claro: #EDF4F5;
  --color-rojo: #ea1818;

  --size-10: 0.625rem;
  --size-20: 1.25rem;
  --size-30: 1.875rem;
  --size-40: 2.5rem;
  --size-50: 3.125rem;
  --size-60: 3.75rem;
  --size-70: 4.375rem;
  --size-80: 5rem;

  --font-weight-light: 300;
  --font-weight-semibold: 600;
  --font-weight-bold: bold;
  --font-weight-black: 800;
}

/* Base */
* {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
html {height:100%; width:100%; scroll-behavior: smooth;}
body {background: var(--color-blanco); color: var(--color-negro); font: 16px/1.2em 'BR Nebula', sans-serif; margin:0; padding:0; overflow-x:hidden; -webkit-font-smoothing: antialiased; -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px; text-shadow:rgba(0,0,0,.01) 0 0 1px; width:100%;}
body.menu-open {overflow: hidden;}
h1, h2, h3, h4, h5 {line-height: 1em}
h1, h2, h3:not(.title-light), h4:not(.title-light) {font-weight: var(--font-weight-black); line-height: 1em;}
h1 {font-size: clamp(3.75rem, 10vw, 10rem); text-transform: uppercase;}
h2 {font-size: clamp(3.125rem, 8.75vw, 8.75rem); text-transform: uppercase;}
h3 {font-size: clamp(2.25rem, 6.25vw, 6.25rem);}
h3.title-light {font-weight: var(--font-weight-light);}
h4 {font-size: clamp(1.625rem, 3.75vw, 3.75rem);}
h4.title-light {font-weight: var(--font-weight-light);}
h5 {font-size: clamp(1.25rem, 1.875vw, 1.875rem); font-weight: var(--font-weight-light);}
a {color:#333031; text-decoration:none;}
a:hover {color:#ed1d59; text-decoration:none;}
img {height:auto; max-width:100%;}
button {cursor: pointer; font-family: 'BR Nebula', sans-serif;}
p {line-height: 1.4em; text-align: justify;}
table {border: none !important; border-collapse: collapse; font-size: 0.875rem; letter-spacing: -0.6px;}
table thead th {color: var(--color-azul_oscuro); padding-bottom: 8px; padding-top: 8px;}
table thead th:not(:first-child):not(:last-child) {padding-left: 5px; padding-left: 5px;}
table tbody tr td {top: 1px solid #97aaac;}
table tbody td {padding-bottom: 5px; padding-top: 5px;}
table thead th:first-child, table tbody td:first-child {text-align: left;}
table thead th:not(:first-child), table tbody td:not(:first-child) {text-align: right;}
table tbody tr:hover td {background-color: #c9e7eb;}
.text-center {text-align: center;}
.wrap {width: 100%;}

/* Colors */
.bg-color-azul {background-color: var(--color-azul);}
.bg-color-azul_oscuro {background-color: var(--color-azul_oscuro);}
.bg-color-naranja {background-color: var(--color-naranja);}
.bg-color-amarillo {background-color: var(--color-amarillo);}
.bg-color-negro {background-color: var(--color-negro);}
.bg-color-blanco {background-color: var(--color-blanco);}
.bg-color-gris {background-color: var(--color-gris);}
.bg-color-gris_claro {background-color: var(--color-gris_claro);}

.color-azul {color: var(--color-azul);}
.color-azul_oscuro {color: var(--color-azul_oscuro);}
.color-naranja {color: var(--color-naranja);}
.color-amarillo {color: var(--color-amarillo);}
.color-negro {color: var(--color-negro);}
.color-blanco {color: var(--color-blanco);}
.color-gris {color: var(--color-gris);}
.color-gris_claro {color: var(--color-gris_claro);}
.color-rojo {color: var(--color-rojo);}

/* Spacing */
.margin-none {margin: 0;}

/* Header */
#header {background-color: rgb(34 34 34 / 70%); backdrop-filter: blur(20px); bottom: var(--size-30); border-radius: var(--size-10); box-shadow: 0 0 30px rgb(34 34 34 / 15%); display: flex; align-items: center; height: var(--size-60); left: 50%; overflow: hidden; padding: var(--size-10) var(--size-20); position: fixed; transform: translateX(-50%); transition: background 0.3s, opacity 0.3s; width: min(90%, 75em); z-index: 100;}
#header:not(.visible) {opacity: 0;}
body.menu-open #header {background-color: rgb(1 140 179 / 70%)}
#header .header-wrapper {display: flex; flex-wrap: wrap; align-items:center; justify-content: space-between; position: relative; width: 100%; z-index: 1;}
#header .page-progress {background-color: var(--color-negro); height: 100%; left: 0; position: absolute; top: 0; transition: background 0.3s; width: 25%; z-index: 0;}
body.menu-open #header .page-progress {background-color: var(--color-azul);}
#header #logo img {width: 7.5rem;}
#header .menu-toggle {background: transparent; border: none; color: var(--color-blanco); display: flex; align-items: center; gap: var(--size-20); text-transform: uppercase;}
#header .menu-toggle .hb-menu {height: var(--size-30); position: relative; width: var(--size-30);}
#header .menu-toggle .hb-menu span {background: var(--color-blanco); height: 1px; left: 50%; position: absolute; transform: translateX(-50%); transition: transform .3s cubic-bezier(.75,0,.175,1), top .3s cubic-bezier(.75,0,.175,1), width .3s cubic-bezier(.75,0,.175,1), opacity .3s; width: 100%;}
#header .menu-toggle .hb-menu span:nth-child(1) {top: 25%;}
#header .menu-toggle:hover .hb-menu span:nth-child(1) {top: 20%;}
#header .menu-toggle .hb-menu span:nth-child(2) {top: 50%;}
#header .menu-toggle .hb-menu span:nth-child(3) {top: 75%;}
#header .menu-toggle:hover .hb-menu span:nth-child(3) {top: 80%;}
body.menu-open #header .menu-toggle .hb-menu span:nth-child(1) {top: 50%; transform: translateX(-50%) rotate(45deg);}
body.menu-open #header .menu-toggle .hb-menu span:nth-child(2) {opacity: 0; width: 0;}
body.menu-open #header .menu-toggle .hb-menu span:nth-child(3) {top: 50%; transform: translateX(-50%) rotate(-45deg);}

.the-menu {background-color: rgb(34 34 34 / 90%); backdrop-filter: blur(30px); display: flex; flex-wrap: wrap; align-items: center; inset: 0; position: fixed; top: 100vh; transition: top .6s cubic-bezier(.75,0,.175,1), visibility .6s cubic-bezier(.75,0,.175,1); visibility: hidden; z-index: 90;}
body.menu-open .the-menu {top: 0; visibility: visible;}
.the-menu > .row {width: 100%;}
#main-menu ul {display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0;}
#main-menu ul li {counter-increment: counter-list; flex-grow: 0; font-weight: 300;}
#main-menu ul li:before {content: "0" counter(counter-list); line-height: 1.5em;}
#main-menu ul li a {color: var(--color-blanco); transition: color 0.3s;}
#main-menu ul li a:hover {color: var(--color-amarillo);}

/* Members */
.member-list, .directiva {display: flex; flex-wrap: wrap;}
.member-list .item {display: flex;}
.member-list .item > div {width: 50%;}
.member-list .item .item__image {aspect-ratio: 16/14; background-size: cover; background-position: center;}
.member-list .item .item__content {display: flex; flex-wrap: wrap;}
.member-list .item .item__content:not(.bg-color-gris_claro) {color: var(--color-blanco);}
.member-list .item .item__content > div, .directiva .item > div {flex:0 1 100%; width: 100%;}
.member-list .item .item__content .item__type {align-self: flex-start; font-weight: 300; text-transform: uppercase;}
.member-list .item .item__content.bg-color-gris_claro .item__type {color: var(--color-gris);}
.member-list .item .item__content .item__name-logo {align-self: flex-end;}
.member-list .item .item__content .item__name {font-weight: 600; line-height: 1em; margin-bottom: var(--size-30);}
.member-list .item .item__content .item__name span, .directiva .item .item__name span {display: block;}
.directiva .item {display: flex; align-items: flex-end; width: 25%;}
.directiva .item .item__name {font-weight: 600; line-height: 1em; margin-bottom: var(--size-10);}

/* Sections */
#page-cover {background-position: center; background-size: cover; display: flex; flex-direction: column;}
#page-cover .wrap:last-child {margin-top: auto;}
#page-cover h1 span {display: block; line-height: 0.875em;}
#page-cover h1 span:last-child {font-size:clamp(3.125rem, 8.75vw, 8.75rem); font-weight: var(--font-weight-light);}
.section {padding-bottom: 5em; padding-top: 5em;}
.section-flex {display: flex; flex-wrap: wrap; width: 100%;}
.section-fullheight {min-height: 100vh;}
.cover-title span {color: var(--color-amarillo); display: block; font-size: clamp(2.25rem, 6.25vw, 6.25rem); font-weight: 300; line-height: 1em;}
.bg-lines_top {background-image: url(assets/images/bg-lines_border-top.png); background-position: top right; background-repeat: no-repeat;}
.bg-lines_bottom {background-image: url(assets/images/bg-lines_border-bottom.png); background-position: bottom right; background-repeat: no-repeat;}
.section-content [class^="subsection"] ul, .section-content [class^="subsection"] ol { padding: 0 0 1rem;}
.section-content [class^="subsection"] ul li::marker {color: var(--color-azul);}
.section-content [class^="subsection"] ol li::marker {color: var(--color-azul); font-weight: var(--font-weight-bold);}
.section-content [class^="subsection"] ul li, .section-content [class^="subsection"] ol li {margin-bottom: 1rem;}
.section-content .subtitle h3 {display: flex;}
.section-content .subtitle h3 span {font-weight: var(--font-weight-light);}
.section-content .separador > div {padding: 20vh 0;}
.section-content .separador h4 {margin: 0;}
.section-content .texto_imagen_estatica {background-color: var(--color-blanco); position: relative;}
.section-content .texto_imagen_estatica .floating-image {background-size: cover; background-position: center;}
.section-content .texto_imagen_estatica .floating-image:before {background: rgb(0 0 0 / 50%); content: " "; inset: 0; position: absolute;}
.section-content .texto_imagen_estatica .floating-image .title-wrap h4 {margin: 0;}
.section-content .texto_imagen_estatica .floating-image .title-wrap h5 {font-weight: var(--font-weight-light); margin: 0;}
.section-content .texto_imagen_estatica .floating-image .title-wrap {position: relative;}
.section-content .columnas_color {display: flex;}
.section-content .columnas_color h4 {margin: 0 0 var(--size-40);}
.section-content .texto_imagen_fondo {background-attachment: fixed; background-repeat: no-repeat; background-size: contain; display: flex;}
.section-content .texto_imagen_fondo h3 {margin: 0 0 var(--size-60);}
.section-content .texto_imagen_fondo.seccion-latino_america {background-color: var(--color-blanco);}
.section-content .texto_imagen_fondo.seccion-latino_america .column {margin-left: auto;}
.section-content .texto_imagen_fondo.seccion-colombia {background-color: var(--color-negro); color: var(--color-blanco);}
.section-content .texto_imagen_fondo.seccion-colombia h3 {color: var(--color-naranja);}
.section-content.section-03 .texto_imagen_lateral .floating-image {background-position: center; background-size: cover;}
.section-content.section-03 .texto_imagen_lateral .column h4:not(.title-light) {margin: 0 0 var(--size-60);}
.section-content.section-04 .subsection-1 .title-sticky img {border-radius: 50% 50% 50% 0;}
.section-content .title-sticky h4, .section-content .title-sticky h5 {margin: 0;}

/* Chart & Tables */
.object-chart, .object-table, .object-image {border-radius: var(--size-20); margin-bottom: var(--size-20);}
.object-chart {padding: var(--size-20) 0;}
.object-chart > header, .object-table > header, .object-image > header {color: var(--color-azul_oscuro); display: block; font-weight: var(--font-weight-bold); margin-bottom: var(--size-20); text-align: center;}
.object-chart .object-content {display: flex; flex-wrap: wrap; flex-direction: column; gap: var(--size-20);}
.object-chart .object-fuente {margin-right: var(--size-30);}
.object-chart .object-fuente, .object-table .object-fuente, .object-image .object-fuente {border: 1px solid var(--color-azul_oscuro); border-radius: var(--size-30); display: inline-flex; font-size: 0.875rem; line-height: var(--size-20); margin-left: auto; padding: 0 var(--size-10); text-align: right;}
.object-chart .visualizer-front-container svg > rect {fill: transparent;}
.object-table:not(:last-child) {margin-bottom: var(--size-30);}
.object-table .object-content, .object-image .object-content {display: flex; flex-wrap: wrap; flex-direction: column; gap: var(--size-20);}
.object-table table {background: transparent !important;}
.object-table .object-content .table-wrapper {max-width: 100%; overflow-x: scroll;}
.object-table .object-content > table {min-width: 600px;}
.object-image {border: 1px solid var(--color-azul); padding: var(--size-30) var(--size-20);}

.gobierno-corporativo span {background: var(--color-naranja); color: var(--color-blanco); border-radius: var(--size-20); display: block; margin-bottom: var(--size-20); padding: var(--size-20);}

@media screen and (min-width: 1081px) {
  .directiva .item {aspect-ratio: 16/12; padding: var(--size-40) var(--size-40) var(--size-80); width: 25%;}
  .directiva .item .item__name {font-size: var(--size-30);}

  .section-content.section-04 .subsection-1 {padding-left: 10vw; padding-right: 10vw;}
  .section-content .texto_imagen_estatica {display: flex;}
  .section-content .texto_imagen_estatica .floating-image {height: 100vh; left: 0; position: sticky; top: 0;}
  .section-content .texto_imagen_estatica .column-right {margin-left: auto;}
}

@media screen and (max-width: 1080px) {
  .directiva .item {aspect-ratio: 16/14; padding: var(--size-30) var(--size-30) var(--size-40); width: 50%;}
  .directiva .item .item__name {font-size: var(--size-20);}

  .section-content .basica .wrap .row {gap: var(--size-20);}
}

@media screen and (min-width: 821px) and (max-width: 1080px) {
  .section-content .texto_imagen_estatica .floating-image {height: 50vh; position: relative; width: 100%;}
  .section-content .texto_imagen_estatica .column-right {width: 100%;}
}

@media screen and (min-width: 821px) {
  .wrap {padding:0 var(--size-40);}
  .subtitle {padding: 20vh 0;}

  .the-menu {padding: var(--size-80) 5vw 7.5em;}
  .the-menu h4 {margin: 0;}
  #main-menu ul {gap: var(--size-40);}
  #main-menu ul li {font-size: 1.625rem; line-height: 1em; width: calc(50% - 1.25em);}
  #main-menu ul li:before {display: block; font-size: 1rem;}

  .member-list .item .item__content {padding: var(--size-40);}
  .member-list .item .item__content .item__name {font-size: var(--size-30);}

  .bg-lines_top {background-size: 50%;}
  .bg-lines_bottom {background-size: 50%;}
  .section-content [class^="subsection"].basica {padding-top: var(--size-60); padding-bottom: var(--size-60);}
  .section-content .subtitle h3 {gap: var(--size-20);}
  .section-content .texto_imagen_estatica .column-right {padding: var(--size-80) var(--size-40);}
  .section-content .texto_imagen_fondo.seccion-latino_america {background-image: url(assets/images/2-3-mapa_latino_america.jpg);}
  .section-content .texto_imagen_fondo.seccion-colombia {background-image: url(assets/images/2-3-mapa_colombia.jpg); background-position:right center;}
  .section-content .texto_imagen_fondo .column {padding: var(--size-80) var(--size-40);}
  .section-content .texto_imagen_estatica .floating-image .title-wrap {padding: var(--size-80) var(--size-60); z-index: 2;}
  .section-content .columnas_color > [class^="column-"] {padding: var(--size-80) var(--size-40);}
  .section-content.section-03 .texto_imagen_lateral .column {padding: var(--size-80) var(--size-40);}
  .section-content.section-03 .texto_imagen_lateral {display: flex; justify-content: space-between; min-height: 100vh;}
  .section-content.section-03 .texto_imagen_lateral:nth-child(even) .floating-image {order: 2;}
  .section-content .title-sticky {position: sticky; top: var(--size-60);}
  .section-content.section-04 .subsection-1 .title-sticky img {width: 15vw;}

  .object-table {padding: var(--size-20);}
}

@media screen and (max-width: 820px) {
  .wrap {padding:0 var(--size-20);}
  .subtitle {padding: 10vh 0;}

  .the-menu {padding: var(--size-60) 3vw 7.5em;}
  .the-menu h4 {margin: 0 0 var(--size-30);}
  #main-menu ul {gap: var(--size-20);}
  #main-menu ul li {display: flex; font-size: 1.25rem; gap: var(--size-10); line-height: 1em; width: 100%;}
  #main-menu ul li:before {flex-grow: 0; font-size: var(--size-10);}

  #page-cover {background-image: url(assets/images/img-cover_mobile.jpg) !important;}
  #page-cover .wrap:first-child {margin-top: 30vh;}
  #page-cover .cover-logo img {max-width: 11.25rem}

  .member-list .item .item__content {padding: var(--size-30);}
  .member-list .item .item__content .item__name {font-size: var(--size-20);}

  .bg-lines_top {background-size: 90%;}
  .bg-lines_bottom {background-size: 90%;}
  .section-content [class^="subsection"].basica {padding-top: var(--size-30); padding-bottom: var(--size-30);}
  .section-content .subtitle h3 {flex-direction: column;}
  .section-content .texto_imagen_estatica .floating-image {position: relative;}
  .section-content .texto_imagen_estatica .column-right {padding: var(--size-40) var(--size-20);}
  .section-content .texto_imagen_fondo.seccion-latino_america {background-image: url(assets/images/2-3-mapa_latino_america_mobile.jpg); background-position: center top;}
  .section-content .texto_imagen_fondo.seccion-colombia {background-image: url(assets/images/2-3-mapa_colombia_mobile.jpg); background-position: center top;}
  .section-content .texto_imagen_fondo .column {padding: var(--size-40) var(--size-20);}
  .section-content .texto_imagen_estatica .floating-image .title-wrap {min-height: 40vh; padding: var(--size-80) var(--size-20);}
  .section-content .columnas_color > [class^="column-"] {padding: var(--size-40) var(--size-20);}
  .section-content.section-03 .texto_imagen_lateral .column {padding: var(--size-40) var(--size-20);}
  .section-content.section-03 .texto_imagen_lateral .floating-image {height: 40vh;}
  .section-content.section-04 .subsection-1 .title-sticky img {width: 40vw;}
  .section-content.section-04 .subsection-1 .title-sticky {margin-bottom: var(--size-40);}

  .object-table {padding: var(--size-10)}
}

@media screen and (min-width: 431px) {
  .member-list .item {width: 50%;}
  .member-list .item .item__content .item__type {font-size: var(--size-20); letter-spacing: 0.4rem;}
}

@media screen and (max-width: 430px) {
  .member-list .item {height: 30vh; width: 100%;}
  .member-list .item .item__content .item__type {font-size: 0.875; letter-spacing: 0.2rem;}
  .member-list .item .item__content .item__name-logo img {max-height: 1.5625rem; max-width: 60%;}
}