@charset "UTF-8";
/* CSS Document */

/*0.----VARS ROOT*/
:root {
  
/*test*/  
--border-test-dashed: dashed;
--border-test-dotted: dotted;    
  
--color-test-green: green;
--color-test-green-20: rgba(0, 128, 0, 0.2);  
--color-test-green-30: rgba(0, 128, 0, 0.3);  
--color-test-green-50: rgba(0, 128, 0, 0.5);  
  
--color-test-lime: lime;
--color-test-lime-20: rgba(0,255,0,0.2);  
--color-test-lime-30: rgba(0,255,0,0.3);
--color-test-lime-50: rgba(0,255,0,0.5);  
  
--color-test-red: red;
--color-test-red-20: rgba(255,0,0,0.2);  
--color-test-red-30: rgba(255,0,0,0.3); 
--color-test-red-50: rgba(255,0,0,0.5);  
  
--color-test-tomato: tomato;
--color-test-tomato-20: rgba(255, 99, 71, 0.2);  
--color-test-tomato-30: rgba(255, 99, 71, 0.3);  
--color-test-tomato-50: rgba(255, 99, 71, 0.5);  
  
--color-test-peru: peru;
--color-test-peru-20: rgba(205, 133, 63, 0.2);
--color-test-peru-30: rgba(205, 133, 63, 0.3);  
--color-test-peru-50: rgba(205, 133, 63, 0.5);  
  
--color-test-brown: brown;
--color-test-brown-20: rgba(165, 42, 42, 0.3);  
--color-test-brown-30: rgba(165, 42, 42, 0.3);  
--color-test-brown-50: rgba(165, 42, 42, 0.5);  
  
--color-test-magenta: magenta; 
--color-test-magenta-20: rgba(255, 0, 255, 0.2);  
--color-test-magenta-30: rgba(255, 0, 255, 0.3);  
--color-test-magenta-50: rgba(255, 0, 255, 0.5);  
  
--color-test-purple: purple;
--color-test-purple-20: rgba(128, 0, 128, 0.2);  
--color-test-purple-30: rgba(128, 0, 128, 0.3);  
--color-test-purple-50: rgba(128, 0, 128, 0.5);   
  
--color-test-pink: pink; 
--color-test-pink-20: rgba(255, 192, 203, 0.2);  
--color-test-pink-30: rgba(255, 192, 203, 0.3);  
--color-test-pink-50: rgba(255, 192, 203, 0.5);  
  
--color-test-orange: orange;
--color-test-orange-20: rgba(255, 165, 0, 0.2);  
--color-test-orange-30: rgba(255, 165, 0, 0.3);  
--color-test-orange-50: rgba(255, 165, 0, 0.5);  
  
--color-test-yellow: yellow;
--color-test-yellow-20: rgba(255, 255, 0, 0.2);  
--color-test-yellow-30: rgba(255, 255, 0, 0.3);  
--color-test-yellow-50: rgba(255, 255, 0, 0.5);  
  
--color-test-cyan: cyan;
--color-test-cyan-20: rgba(0, 255, 255, 0.2);  
--color-test-cyan-30: rgba(0, 255, 255, 0.3);
--color-test-cyan-50: rgba(0, 255, 255, 0.5);  
  
--color-test-blue: blue;
--color-test-blue-20: rgba(0,0,255,0.2);  
--color-test-blue-30: rgba(0,0,255,0.3); 
--color-test-blue-50: rgba(0,0,255,0.5);  

  
/*borders*/
--border-r-xs: 2px;	
--border-r-sm: 5px;	
--border-r-base: 10px;
--border-r-md: 15px;	
--border-r-lg: 20px;
--border-r-xl: 30px;
--border-r-xxl: 50px;	
--border-r-100p: 100%;
  
/*controla anchos globales de bloques txt*/  
--width-global: 790px;  
--max-width-global: 790px;
  
/*controla ancho en tablet para bloque central de texto y label*/
--ancho-tablet: 90px;  
  
/*controla ancho en tablet para elementos que sobresalen (galerías, mapas, botones mapas, grillas, gráficas*/
--ancho-desborde-tablet: 40px;
  
/*relación padding left contenido - header (menú)*/  
--relacion-layout-header-cont: 210px;
@media screen and (max-width:851px){  
--relacion-layout-header-cont: 0px;
}  
  
/*ancho global bloques contenido*/
--ancho-global-art-grid-blq: calc(100% - 80px); 
  
/*ancho global recurso tabla, gráfica hc, img md*/  
--ancho-global-graf-tbl-imgmd: 1000px;  
  
/*margins cajas subtítulos de componentes: tablas, gráficas highcharts, datatables*/ 
--margin-caja-subtit-componente: 10px 0px 16px 0px;
  
/*paddings cajas subtítulos de componentes: tablas, gráficas highcharts, datatables*/   
--padding-caja-subtit-componente: 10px 10px 10px 10px; 
  
/*padding left en cajas subtítulos de componentes entre ícono y subtítulo*/  
--padding-left-caja-subtit-componente-icn-txt: 5px;   
  
/*padding right en cajas subtítulos de componentes entre subtítulo y botón i (pie fuente)*/  
--padding-right-caja-subtit-componente-txt-btn-i: 55px;  
  
  
/*padding en divs .art-grid-blq--tabla*/  
--padding-tabla-5: 5px;  
--padding-tabla-10: 10px;
--padding-tabla-20: 20px; 
--padding-tabla-25: 25px;  
  
  
/*home ancho art-grid-blq*/
--home-ancho-art-grid-blq: 1700px;   
  
/*home ancho section móvil responsive*/  
--home-ancho-section-movil-responsive: calc(100% - 10px);  
  
/*home box-shadow títulos fichas swiper*/ 
/*valor positivo*/  
--home-boxshadow-tit-fichas-pos: 0.65rem;
/*valor negativo*/  
--home-boxshadow-tit-fichas-neg: -0.65rem;  
  
}


/*1.----LAYOUT*/
html {
/*scroll-behavior: smooth;*/ /*¡!*/	
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
z-index: 0;	
}
html, body{
font-size: 100%;
background-color: var(--base-a-6-100);	
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
}
img {
border-style: none;
}
*, :after, :before {
box-sizing: border-box;
margin: 0px;
padding: 0px;	
}

/*----NAVS*/
.elem-anchor{
position: absolute;
right: 0px;	
width: 0px !important;
height: 100%;
z-index: 10;
visibility: hidden;		
}


/*2.----MAQUETACIÓN*/
/*2.1--widths y heights*/
.w-sm{
max-width: 700px;
}
.w-md{
max-width: 1000px;
}
.w-lg{
max-width: 1200px;
}
.w-30{
left: 0px;
width: 30%;	
max-width: none;
}
.w-50{
left: 0px;
width: 50%;	
max-width: none;
}
.w-60{
left: 0px;
width: 60%;	
max-width: none;
}
.w-75{
left: 0px;
width: 75%;	
max-width: none;
}
.w-100{
width: 100%;
max-width: 1200px;	
max-width: none;	
}

.h-50vh{			
height: 50vh !important;
}
.h-70vh{			
height: 70vh !important;
}
.h-100vh{			
height: 100vh !important;
}
.h-150vh{			
height: 150vh !important;
}
.h-200vh{			
height: 200vh !important;
}
.h-300vh{			
height: 300vh !important;
}
.h-auto{			
height: auto !important;
}


/*CJ RESPONSIVE*/
.cj-flex-1 { flex: 1;}
.cj-100 {	flex: 0 0 100%;	 width: 100%;	}

/*extralarge*/
@media (min-width: 1921px) {
.cj-dk-xl-flex-1 { flex: 1; }  
.cj-dk-xl-10 { flex: 0 0 10%; width: 10%; }
.cj-dk-xl-20 { flex: 0 0 20%;  width: 20%; }
.cj-dk-xl-25 { flex: 0 0 25%;  width: 25%; }
.cj-dk-xl-30 { flex: 0 0 30%;  width: 30%; }
.cj-dk-xl-33 { flex: 0 0 33.3%;  width: 33.3%; }
.cj-dk-xl-35 { flex: 0 0 35%;  width: 35%; }  
.cj-dk-xl-40 { flex: 0 0 40%;  width: 40%; }
.cj-dk-xl-50 { flex: 0 0 50%;  width: 50%; }
.cj-dk-xl-60 { flex: 0 0 60%;  width: 60%; }
.cj-dk-xl-65 { flex: 0 0 65%;  width: 65%; }  
.cj-dk-xl-70 { flex: 0 0 70%;  width: 70%; }
.cj-dk-xl-75 { flex: 0 0 75%;  width: 75%; }
.cj-dk-xl-80 { flex: 0 0 80%;  width: 80%; }
.cj-dk-xl-90 { flex: 0 0 90%;  width: 90%; }
.cj-dk-xl-100 { flex: 0 0 100%;  width: 100%; }
}  

/*desktop*/
@media (max-width: 1920px) {
.cj-dk-flex-1 { flex: 1; }  
.cj-dk-10 { flex: 0 0 10%;  width: 10%; }
.cj-dk-20 { flex: 0 0 20%;  width: 20%; }
.cj-dk-25 { flex: 0 0 25%;  width: 25%; }
.cj-dk-30 { flex: 0 0 30%;  width: 30%; }
.cj-dk-33 { flex: 0 0 33.3%;  width: 33.3%; }
.cj-dk-35 { flex: 0 0 35%;  width: 35%; }  
.cj-dk-40 { flex: 0 0 40%;  width: 40%; }
.cj-dk-50 { flex: 0 0 50%;  width: 50%; }
.cj-dk-60 { flex: 0 0 60%;  width: 60%; }
.cj-dk-65 { flex: 0 0 65%;  width: 65%; }  
.cj-dk-70 { flex: 0 0 70%;  width: 70%; }
.cj-dk-75 { flex: 0 0 75%;  width: 75%; }
.cj-dk-80 { flex: 0 0 80%;  width: 80%; }
.cj-dk-90 { flex: 0 0 90%;  width: 90%; }
.cj-dk-100 { flex: 0 0 100%;  width: 100%; }
}


/*tablet h*/
/*@media screen and (orientation:landscape) and (max-width:1024px) {*/
@media screen and (orientation:landscape) and (max-width:1280px) {
.cj-tb-h-flex-1 { flex: 1; }  
.cj-tb-h-10 { flex: 0 0 10%;  width: 10%; }
.cj-tb-h-20 { flex: 0 0 20%;  width: 20%; }
.cj-tb-h-25 { flex: 0 0 25%;  width: 25%; }
.cj-tb-h-30 { flex: 0 0 30%;  width: 30%; }
.cj-tb-h-33 { flex: 0 0 33.3%;  width: 33.3%; }
.cj-tb-h-35 { flex: 0 0 35%;  width: 35%; }  
.cj-tb-h-40 { flex: 0 0 40%;  width: 40%; }
.cj-tb-h-50 { flex: 0 0 50%;  width: 50%; }
.cj-tb-h-60 { flex: 0 0 60%;  width: 60%; }
.cj-tb-h-65 { flex: 0 0 65%;  width: 65%; }  
.cj-tb-h-70 { flex: 0 0 70%;  width: 70%; }
.cj-tb-h-75 { flex: 0 0 75%;  width: 75%; }
.cj-tb-h-80 { flex: 0 0 80%;  width: 80%; }
.cj-tb-h-90 { flex: 0 0 90%;  width: 90%; }
.cj-tb-h-100 { flex: 0 0 100%;  width: 100%; }
}


/*vertical*/
@media (max-width:851px) {
.cj-tb-v-flex-1 { flex: 1; }  
.cj-tb-v-10 { flex: 0 0 10%;  width: 10%; }
.cj-tb-v-20 { flex: 0 0 20%;  width: 20%; }
.cj-tb-v-25 { flex: 0 0 25%;  width: 25%; }
.cj-tb-v-30 { flex: 0 0 30%;  width: 30%; }
.cj-tb-v-33 { flex: 0 0 33.3%;  width: 33.3%; }
.cj-tb-v-35 { flex: 0 0 35%;  width: 35%; }  
.cj-tb-v-40 { flex: 0 0 40%;  width: 40%; }
.cj-tb-v-50 { flex: 0 0 50%;  width: 50%; }
.cj-tb-v-60 { flex: 0 0 60%;  width: 60%; }
.cj-tb-v-65 { flex: 0 0 65%;  width: 65%; }  
.cj-tb-v-70 { flex: 0 0 70%;  width: 70%; }
.cj-tb-v-75 { flex: 0 0 75%;  width: 75%; }
.cj-tb-v-80 { flex: 0 0 80%;  width: 80%; }
.cj-tb-v-90 { flex: 0 0 90%;  width: 90%; }
.cj-tb-v-100 { flex: 0 0 100%;  width: 100%; }
}

/*móvil*/
@media (max-width:677px) {
.cj-mb-flex-1 { flex: 1; }  
.cj-mb-10 { flex: 0 0 10%;  width: 10%; }
.cj-mb-20 { flex: 0 0 20%;  width: 20%; }
.cj-mb-25 { flex: 0 0 25%;  width: 25%; }
.cj-mb-30 { flex: 0 0 30%;  width: 30%; }
.cj-mb-33 { flex: 0 0 33.3%;  width: 33.3%; }  
.cj-mb-35 { flex: 0 0 35%;  width: 35%; }  
.cj-mb-40 { flex: 0 0 40%;  width: 40%; }
.cj-mb-50 { flex: 0 0 50%;  width: 50%; }
.cj-mb-60 { flex: 0 0 60%;  width: 60%; }
.cj-mb-65 { flex: 0 0 65%;  width: 65%; }  
.cj-mb-70 { flex: 0 0 70%;  width: 70%; }
.cj-mb-75 { flex: 0 0 75%;  width: 75%; }
.cj-mb-80 { flex: 0 0 80%;  width: 80%; }
.cj-mb-90 { flex: 0 0 90%;  width: 90%; }
.cj-mb-100 { flex: 0 0 100%;  width: 100%; }
}


/*2.2--base flex*/
.flex
{
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}
/*clase ajuste posicion flex*/
.flex-row{
flex-direction: row; /*¡!*/	
}
.flex-col{
flex-direction: column !important; /*¡!*/
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center; 
}
/*.flex-row img{
object-fit: contain;
}
.flex-col img{
object-fit: contain;
}*/
/*para flex direction row*/
.jcont-flex-start{
justify-content: flex-start !important;
}
.jcont-flex-end{
justify-content: flex-end !important;
}

/*para flex direction column*/
.align-items-start{
-webkit-flex-align: flex-start !important;
-ms-flex-align: flex-start !important;
-webkit-align-items: flex-start !important;
align-items: flex-start !important;
}
.align-items-end{
-webkit-flex-align: flex-end !important;
-ms-flex-align: flex-end !important;
-webkit-align-items: flex-end !important;
align-items: flex-end !important;
}
.align-items-stretch{
-webkit-flex-align: stretch !important;
-ms-flex-align: stretch !important;
-webkit-align-items: stretch !important;
align-items: stretch !important;
}

/*2.3--clases utilitarias*/
/*.body{}*/
.of-hd{
overflow: hidden;	
}

/*globales*/
/*ícono bajar chap*/
.cenefa-apt .elem{
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: flex-start;
-ms-flex-align: flex-start;
-webkit-align-items: flex-start;
align-items: flex-start;
justify-content: center;
position: absolute;
bottom: 29.5px;
left: 50%;	
-moz-transform: translateX(-50%) translateY(0%);
-webkit-transform: translateX(-50%) translateY(0%);
transform: translateX(-50%) translateY(0%);	
width: 80px;
height: 70px;
border-radius: var(--border-r-base) var(--border-r-base) 0px 0px;
background-color: var(--base-a-6-100);  
}
.cenefa-apt-elem-novis{
height: 0px !important;
overflow: hidden;  
opacity: 0; 
}
.cenefa-apt-elem-novis .cj-icn{ 
animation: none !important;  
}
.cenefa-apt-elem-noact{
display: none;  
}


.cenefa-apt .elem .elem-curv{
position: absolute;
bottom: 0px;
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: cover;
}
.cenefa-apt .elem .elem-curv:first-of-type {
right: -19px;
background-image: url("https://observatorioamazonia.fcds.org.co/imagenes/globales-oafcds-v6-2/elementos/base/elem-curv-bottom-left-base-6.svg");	
}
.cenefa-apt .elem .elem-curv:last-of-type {
left: -19px;
background-image: url("https://observatorioamazonia.fcds.org.co/imagenes/globales-oafcds-v6-2/elementos/base/elem-curv-bottom-right-base-6.svg");	
}

body.home main section .divs > div .icn, /*--> home*/
.cenefa-apt .elem .cj-icn
{
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
flex-direction: column;  
flex: 0 0 45px;
width: 45px;
height: 45px; 
margin-top: 5px;  
animation: subirBajar 4.5s ease-in-out infinite;  
}
@keyframes subirBajar {
0% { transform: translateY(0); }
50% { transform: translateY(10px); }
100% { transform: translateY(0); }
}

body.home main section .divs > div .icn::before, /*--> home*/
.cenefa-apt .elem .cj-icn::before
{
position: relative;  
content: 'scroll';
font-family: var(--fuente-creditos);
text-rendering: optimizeLegibility;
font-size: var(--font-size-xxs);
line-height: var(--line-height-xxs);
font-weight: 400;
font-variation-settings: "wght" 700;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;  
color: var(--base-a-1-60);  
}
body.home main section .divs > div .icn::before /*--> home*/
{ 
top: -30px;
color: var(--bn-60);  
}
.cenefa-apt .elem .cj-icn > .icn {
position: relative;
top: auto;
left: auto;
-moz-transform: none;
-webkit-transform: none;
transform: none;
opacity: 0.3;  
}

/*3.----FONDO OSCURO*/
body.fondo-oscuro{
background-color: var(--ng-100);	
}
body.fondo-oscuro .tit h1 {
color: var(--bn-100);
}
body.fondo-oscuro .chap h2, .grp.dest h5 {
color: var(--bn-70);
}
body.fondo-oscuro .nom h4 {
color: var(--bn-100);
}
body.fondo-oscuro .nom h4 span {
color: var(--bn-50);
}

/*4.----MEDIA QUERIES*/
/*@media screen and (orientation:portrait){*/
@media screen and (max-width:851px){
.cenefa-apt .elem {
bottom: 29.5px;
width: 60px;  
height: 50px;
}
  
body.home main section .divs > div .icn::before, /*--> home*/
.cenefa-apt .elem .cj-icn::before{
font-size: calc(var(--font-size-xxs) - 1px);
line-height: calc(var(--line-height-xxs) - 4px);
}
  
.elem-anchor{
top: -150px;
}  
.w-50 {
left: 0px;
width: 100vw;
max-width: none;
}
.w-75 {
justify-content: flex-start;	
width: 100vw;
max-width: none;
}
}

@media screen and (max-width:677px){  
.w-60 {
width: calc(100% - 20px);
}	
}