/* Tipografía web */
@font-face {
   font-family: 'roboto';
   src: url('tipografia/roboto.woff2') format('woff2'),
      url('tipografia/roboto.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'poppins';
   src: url('tipografia/poppins.woff2') format('woff2'),
      url('tipografia/poppins.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'helvetica';
   src: url('tipografia/helvetica.woff2') format('woff2'),
      url('tipografia/helvetica.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'raleway-thin';
   src: url('tipografia/raleway-thin.woff2') format('woff2'),
      url('tipografia/raleway-thin.woff') format('woff');
   font-weight: normal;
   font-style: normal;
} 

@font-face {
   font-family: 'raleway';
   src: url('tipografia/raleway.woff2') format('woff2'),
      url('tipografia/raleway.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'raleway-medium';
   src: url('tipografia/raleway-medium.woff2') format('woff2'),
      url('tipografia/raleway-medium.woff') format('woff');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'helvetica-light';
   src: url('tipografia/helvetica-light.woff2') format('woff2'),
      url('tipografia/helvetica-light.woff') format('woff');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
}


/*Variables*/
:root
{
   --colorPRojo: #E3173E;
   --colorPNegro: #231F20;
   --colorPBlanco: #fff; 
   --colorVerde: #007700;
   --colorTexto: #58595B;
   

   --raleway-m: 'raleway-medium';
   --raleway-t: 'raleway-thin';
   --helvetica: 'helvetica';
   --poppins: 'poppins';
   --roboto: 'roboto';
   --helvetica-l: 'helvetica-light';

   --areaTrabajo: 1280px;
   --transicion: all .3s cubic-bezier(0.65, 0.05, 0.36, 1);
}


/* http://meyerweb.com/eric/tools/css/reset/ */
*{ transition: all .3s ease-in-out; box-sizing: border-box; position: relative; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0 auto; padding: 0; border: 0; box-sizing: border-box; font-size: 1.03rem; font-family: var(--raleway-m); vertical-align: baseline; color: var(--colorTexto);}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1.3rem !important; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none;  color: inherit; display: inline-block; margin: 0; padding: 0;}
img{border: 0; margin: 0; padding: 0; display: inline-block;}
input, button{ margin: 0; padding: 0; border: none; outline: none; }
input::placeholder, textarea::placeholder { color: var(--colorPlaceHolder); } /* Color del placeholder */ 
p{padding-bottom: 10px; font-size: 1.03rem !important; font-family: var(--raleway-m) !important; color: var(--colorTexto) !important;}
li{font-size: 1.03rem !important; font-family: var(--raleway-m) !important; color: var(--colorTexto) !important;}

/* GENERALIDADES */
.titulo
{
   font-family: var(--helvetica); font-size: 1.5rem; font-weight: bold; display: block; color: var(--colorPNegro); padding: 0 0 6px 0; display: flex; flex-flow: column; text-transform: uppercase; margin-bottom: 30px; line-height: 28px;   
   & span{font-family: var(--helvetica-l); font-size: 1.5rem; text-transform: lowercase; font-weight: lighter; color: var(--colorPNegro); margin: 0;}
   & span::first-letter{text-transform: capitalize;}
   &::after{content: ''; width: 78px; height: 3px; background: var(--colorPNegro); display: block; position: relative; bottom: -6px; } 
}

.titulo--verde
{
   color: var(--colorVerde);
   & span, &::after{color: var(--colorVerde);} 
   &::after{background: var(--colorVerde);} 
} 

h3
{   
   color: var(--colorVerde); margin-bottom: 10px; font-size: 1.03rem !important; line-height: 1.3rem !important;
   & i{margin-right: 10px;}
   &.titulo__activo--verde, &.titulo__activo--verde i{color: #00B400;}
   &.titulo__plus{margin-bottom: 20px;}
   &.titulo__plus+.titulo__plus--cont{padding-left: 25px; display: none; } 
   &.titulo__plus:hover{cursor: pointer;}  
   & span{font-family: var(--raleway-m); font-size: .8rem; display: block; }
   & span::before{content: ''; display: block; width: 14px; height: 14px; background: var(--colorVerde); position: absolute; border-radius: 100%; left: -26px; top: 21px;}
   & span::after{content: ''; display: block; width: 8px; height: 8px; background: var(--colorPBlanco); position: absolute; border-radius: 100%; left: -23px; top: 24px;}
   &.titulo__time{padding: 0 0 20px 20px; margin-bottom: 0; font-size: 1.2rem !important;}
   &.titulo__time::before{content: ''; display: block; height: 100%; width: 2px; background: var(--colorVerde); position: absolute; left: 0px;}   
   &.titulo__plus+.titulo__plus--contActivo{display: block; min-height: 150px; margin-bottom: 30px;} 
}

.titulo__time--activo
{
   color: #00B400;
   & span::before{width: 18px; height: 18px; background: #00B400; left: -28px; }
   & span::after{display: none;}
}

.titulo__plus--cont
{
   ul li{padding-left: 10px; margin-bottom: 5px;} 
   ul li::before{content: ''; width: 5px; height: 5px; background: #58595B; display: block; border-radius: 100%; position: absolute; left: 0; top: 8px;}
}

.areaTrabajo{max-width: var(--areaTrabajo); padding: 0 10px;} 
.onda{z-index: 1; }

/* FIN GENERALIDADES */


/* ACCESOS */
.sAcceso
{
   display: flex; flex-flow: column; row-gap: 8px; align-items: flex-end; position: fixed; right: 0; z-index: 50; bottom: 10%; transition: var(--transicion); transform: translateX(0px);
   & div{width: 30px; height: 30px; background: url('../imagen/split.png');} 
   & a{ position: relative; padding: 15px 0px 15px; border-radius: 37px 0 0 37px; width: 70px; margin: 0; transition: var(--transicion); }
   & a::before, & a::after{content: ''; height: 100%; position: absolute; border-radius: 37px 0 0 37px; top: 0; width: 50%; z-index: -1; transform: translateX(0px); transition: all .5s cubic-bezier(0.65, 0.05, 0.36, 1); }  
   & a:hover{ width: 100px; }
   & a:hover::before{ transform: translateX(-10px); }
   & a:hover::after{ transform: translateX(-20px); } 

   & .sAcceso__whatsapp
   { 
      background: #2AB318;
      &::before{background: rgb(42 179 24 / 80%); }
      &::after{background: rgb(42 179 24 / 60%); }
      & div{background-position: -27px -73px; }
   }
   & .sAccesso_esan
   { 
      background: #E31A40;
      &::before{background: rgb(227 26 64 / 80%); }
      &::after{background: rgb(227 26 64 / 60%); }
      & div{background-position: -57px -73px; }
   }
   & .sAccesso_subir
   { 
      background: #575757;
      &::before{background: rgb(87 87 87 / 80%); }
      &::after{background: rgb(87 87 87 / 60%); }
      & div{background-position: 3px -73px; } 
   }
}

.sAcceso--ocultar{transform: translateX(90px);}

/* ORGANIZACIÓN */
.organizacion
{
   margin: 0 0 40px ;
   & .titulo{align-items: center;}
   & .titulo:nth-of-type(2){margin-top: 50px;} 
   .organizacion__contendor
   {
      display: flex; flex-flow: row wrap; justify-content: center; row-gap: 20px; column-gap: 100px; align-items: center;
      & div{margin: 0; width: auto;}
      
   }
   & .organizacion--imgAltura
   {
      & div{height: 55px;}
      & div img{max-inline-size: 100%; block-size: auto; height: 100%;}
   }

}

/* OBJETIVOS */
.objetivos
{  
   margin: 40px 0; 
   & .areaTrabajo{z-index: 1; padding: 20px 0;}  
   & .titulo{align-items: center; color: var(--colorPBlanco);}
   & .titulo::after{background: var(--colorPBlanco);}
   & p{color: var(--colorPBlanco) !important; width: 65%; text-align: center;}
   &::after{content: ''; background: rgb(0 119 0 / 70%); width: 100%; height: 100%; display: block; position: absolute; top: 0;} 
   .objetivos__logo{display: flex; flex-flow: row wrap; justify-content: center; align-items: center; gap: 15px;}
}

/* DEFINICIÓN */
.definicion
{
   margin: 40px 0;
   .definicion__contenedor
   {
      display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 20px;
      & > div:nth-child(2){width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, auto); row-gap: 20px; column-gap: 15px; }
      & > div.grid__modelo--mapa{grid-template-columns: 1fr; grid-template-rows: 1fr; } 
      & .grid__modelo--2
      {
         grid-template-rows: repeat(4, auto);
         & .definicion__img:nth-child(3){grid-area: 1/2/4/4; }
         .definicion__img:nth-child(2){height: 100%;}
      }
   }
   .definicion__medio
   {
      display: flex; flex-flow: column; justify-content: center; 
      & h2{margin: 0 0 30px 0; }
   } 
   .definicion__img{margin: 0; border-radius: 20px; overflow: hidden;} 
   .definicion__img img{max-inline-size: 100%; block-size: auto; object-fit: cover; object-position: center center; height: 100%; width: 100%;}
   .definicion__img:nth-child(1){width: 300px; height: auto;}
   .definicion__img:nth-child(2){width: 300px; height: 135px;}
   .definicion__img:nth-child(3){width: 360px; height: 100%; grid-area: 1/2/3/3; }
}

/* ALTERNO */
.alterno
{
   margin: 80px 0;   
   & .areaTrabajo {display: grid; grid-template-columns: repeat(2, 1fr);}      
   & .alterno__img{position: absolute; width: 650px; left: 0; border-radius: 0 20px 150px 0; overflow: hidden;}
   & .alterno__img img{object-fit: contain; object-position: center center; max-inline-size: 100%; block-size: auto;}
   & .alterno__img--derecho{margin: 0; top: 0px; border-radius: 20px 0px 0px 150px; position: absolute; right: 0; overflow: hidden; width: 650px; }
   & .alterno__img--derecho img{object-fit: cover; object-position: center center; block-size: auto; display: block;}         
   & .alterno__img--linear::before{content: ''; display: block; position: absolute; width: 100%; height: 100%; z-index: 1; background: linear-gradient(108deg, rgba(227, 23, 62, 0.50) 0.01%, rgba(0, 33, 77, 0.50) 100.01%);} 
}


/* BANNER */
header
{  
   height: 635px; background: radial-gradient(circle at 46.91% 99.81%, rgba(233, 224, 207, 1) 20.47%,rgba(231, 222, 205, 1) 33.30%,rgba(213, 197, 172, 1) 64.18%,rgba(202, 183, 151, 1) 90.09%) 50% 50%;
   & .areaTrabajo{display: flex; flex-flow: column; justify-content: center; height: 100%;}
   & .banner{display: grid; grid-template-columns: repeat(3, 1fr); align-items: start;}
   & .banner__info
   {
      display: flex; flex-flow: column; justify-content: start; align-self: center;
      & h1{color: #264444; font-family: var(--helvetica); font-weight: bolder; text-transform: uppercase; font-size: 2rem; margin: 0;}
      & p{color: #264444; font-family: var(--helvetica); font-weight: bolder; font-size: 1.2rem;}
      & .fechas{background: #a59d92; border-radius: 10px; padding: 20px 10px; margin: 0;}
      & .fechas ul{display: flex; flex-flow: column; row-gap: 10px; }
      & .fechas li{color: var(--colorPBlanco) !important; }
      & .fechas li i{color: var(--colorPBlanco); width: 20px; margin-right: 10px;} 
   }
   & .onda{position: absolute; bottom: 0px; width: 100%;}
}

/* LOGOS */
.logos
{ 
   background: var(--colorPBlanco); padding: 20px 20px 15px; position: relative; z-index: 3;
   & .logos__cont
   {
      display: flex; flex-flow: row wrap; column-gap: 30px; justify-content: center;
      & article{width: 112px;  height: 37px; margin: 0; }   
      & article img{object-fit: contain; object-position: center center; max-inline-size: 100%; block-size: auto; height: 100%; width: 100%;}
   }
}

.logos--fijo
{
   position: fixed; width: 100%; padding: 0 10px;
   & .logos__cont{ & article{width: 70px; height: 30px;} }
   & nav{bottom: -40px; width: 100%; background-color: #00B400; border-radius: 0 0 5px 5px;}
   & .navegacion{justify-content: center; }
   & li{margin: 0;}
}

nav
{ 
   position: absolute; bottom: -60px; right: 0;
   & .navegacion{display: flex; flex-flow: row wrap; gap: 10px; justify-content: center;}
   & .navegacion a{font-size: 12px; text-transform: uppercase; color: var(--colorPBlanco); font-weight: bold; padding: 10px; }
   & .navegacion li{margin: 0; }
   & .navegacion li::before, & .navegacion li::after, & .navegacion li a::before{content: ''; position: absolute; height: 33.33%; transition: all .5s; width: 0; background-color: var(--colorVerde); }
   & .navegacion li::before{right: 0; z-index: 0; top: 33.33%;}
   & .navegacion li::after{left: 0; bottom: 0; z-index: 0; border-radius: 0  0 5px 5px; }
   & .navegacion li a::before{bottom: 66.66%; left: 0; border-radius: 5px 5px 0  0 ;}
   & .navegacion li:hover::before, & .navegacion li:hover::after, & .navegacion li:hover a::before{width: 100%;}
   
}

nav.navegacion--movil
{
   bottom: unset; background-color: #00B400; width: 250px; top: 47px; right: -5px; border-radius: 5px 0 0 5px; display: block;
   & .navegacion{flex-flow: column; }
   & .navegacion li, & .navegacion li a{width: 100%; text-align: right;}
   & .navegacion li a{border-radius: unset;}
}

.icoMenu
{
   position: absolute; right: 20px; top: 5px; display: none;
   & i{font-size: 28px;}
   & .fa-xmark{display: none;}

   &:hover{cursor: pointer; }
}

footer 
{
   padding-top: 100px;
   .firma { background: var(--colorPNegro); font-size: 0.8rem; font-family: var(--poppins); text-align: center; color: var(--colorPBlanco); padding: 8px 0 5px;}
}










/**** BLOQUE DE MEDIA QUERIES ****/
@media (max-width: 575px) /*COL*/
{   
   .logos 
   {
      padding: 10px 5px; 
      & .logos__cont 
      {  
         justify-content: start; column-gap: 15px;
         & article{width: 80px;}
      }
   }

   nav{display: none;}
   .icoMenu{display: block;}

   header
   {
      & .areaTrabajo{height: 75%;}
      & .banner{grid-template-columns: 1fr; grid-template-rows: repeat(3, auto); }
      & img{height: 150px;}
      & .banner__info
      {
         & h1{text-align: center;}
      }
      & .banner__info
      {
         & p, & .fechas li{font-size: 0.8rem !important; text-align: center;}
         & .fechas{padding: 10px 5px;}
         
      }
   }
   
   .definicion
   {
      & .definicion__contenedor
      {
         grid-template-columns: 1fr;
         & > div:nth-child(2){grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); margin-top: 10px; }
         & .grid__modelo--2
         {
            grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); 
            & .definicion__img:nth-child(3){grid-area: unset; }
            & .definicion__img{height: 175px;}
            & .definicion__img:nth-child(2){grid-area: unset;}
         }

         & > div.grid__modelo--mapa{grid-template-columns: 1fr; grid-template-rows: 1fr; }
      }
      .definicion__img:nth-child(3){width: 100%; grid-area: unset;}
      .definicion__img:nth-child(2){grid-area: 2/1/3/3; width: 100%;}
      .definicion__img:nth-child(1){width: 100%;}            
   }

   .alterno
   {
      & .areaTrabajo{grid-template-columns: 1fr;}
      & .alterno__img {display: none;}
      & .alterno__img--derecho{display: none;}
   }

   .objetivos
   {
      & p{width: 95%;}
   }

   .organizacion
   {
      & .titulo{text-align: center;}
   }

}

@media (min-width: 576px) and (max-width: 767px) /*COL-SM*/
{
   .logos 
   {
      padding: 10px 5px; 
      & .logos__cont 
      {  
         justify-content: start; column-gap: 15px;
         & article{width: 80px;}
      }
   }

   nav{display: none;}
   .icoMenu{display: block;}

   header
   {
      & .areaTrabajo{height: 75%;}
      & .banner{grid-template-columns: 1fr; grid-template-rows: repeat(3, auto); }
      & img{height: 150px;}
      & .banner__info
      {
         & h1{text-align: center;}
      }
      & .banner__info
      {
         & p, & .fechas li{font-size: 0.8rem !important; text-align: center;}
         & .fechas{padding: 10px 5px;}
         
      }
   }
   
   .definicion
   {
      & .definicion__contenedor
      {
         grid-template-columns: 1fr;
         & > div:nth-child(2){grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); margin-top: 10px; }
         & .grid__modelo--2
         {
            grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); 
            & .definicion__img:nth-child(3){grid-area: unset; }
            & .definicion__img{height: 175px;}
            & .definicion__img:nth-child(2){grid-area: unset;}
         }

         & > div.grid__modelo--mapa{grid-template-columns: 1fr; grid-template-rows: 1fr; }
      }
      .definicion__img:nth-child(3){width: 100%; grid-area: unset;}
      .definicion__img:nth-child(2){grid-area: 2/1/3/3; width: 100%;}
      .definicion__img:nth-child(1){width: 100%;}            
   }

   .alterno
   {
      & .areaTrabajo{grid-template-columns: 1fr;}
      & .alterno__img {display: none;}
      & .alterno__img--derecho{display: none;}
   }

   .objetivos
   {
      & p{width: 95%;}
   }

   .organizacion
   {
      & .titulo{text-align: center;}
   }

}

@media (min-width: 768px) and (max-width: 991px) /*COL-MD*/
{
   .logos 
   {
      padding: 10px 5px; 
      & .logos__cont 
      {  
         justify-content: start; column-gap: 15px;
         & article{width: 100px;}
      }
   }

   nav{display: none;}
   .icoMenu{display: block;}

   header
   {
      & .areaTrabajo{height: 75%;}
      & .banner{grid-template-columns: 2fr; grid-template-rows: repeat(2, auto); align-items: center;}
      & img{height: 220px;}
      & .banner__info
      {
         & h1{text-align: center;}
      }
      & .banner__info
      {
         grid-area: 1 / 2 / 3 / 3;
         & p, & .fechas li{font-size: 0.8rem !important; text-align: center;}
         & .fechas{padding: 10px 5px;}
         
      }
   }

   .definicion
   {
      & .definicion__contenedor
      {
         grid-template-columns: 1fr;
         & > div:nth-child(2){grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); margin-top: 10px; }
         & .grid__modelo--2
         {
            grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); align-items: center;
            & .definicion__img:nth-child(3){grid-area: unset; }
            & .definicion__img{height: 175px;}
            & .definicion__img:nth-child(2){grid-area: unset;}
         }

         & > div.grid__modelo--mapa{grid-template-columns: 1fr; grid-template-rows: 1fr; }
      }
      .definicion__img:nth-child(3), .definicion__img:nth-child(2), .definicion__img:nth-child(1){width: 100%; }      
   }

   .alterno
   {      
      & .alterno__img--derecho{width: 400px;}
      & .alterno__img{left: -36%; }
   }

   .objetivos
   {
      & p{width: 85%;}
   }


}

@media (min-width: 992px) and (max-width: 1199px) /*COL-LG*/
{
   header
   {
      & .areaTrabajo{height: 75%;}
      & .banner{grid-template-columns: 2fr; grid-template-rows: repeat(2, auto); align-items: center;}
      & img{height: 270px;}
      & .banner__info
      {
         & h1{text-align: center;}
      }
      & .banner__info
      {
         grid-area: 2 / 1 / 3 / 3;
         & p, & .fechas li{font-size: 0.8rem !important; text-align: center;}
         & .fechas{padding: 10px 5px;}
         
      }      
   }

   nav
   {
      & .navegacion{gap: 8px;}
   }

   .definicion
   {
      .definicion__img:nth-child(2){grid-area: 2 / 1 / 3 / 3; }
      .definicion__img:nth-child(3){grid-area: 1 / 2 / 2 / 3; }
      .definicion__img:nth-child(3), .definicion__img:nth-child(2), .definicion__img:nth-child(1){width: 100%; } 

      & .grid__modelo--2
         {
            grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); align-items: center;
            & .definicion__img:nth-child(3){height: 100%;}
            & .definicion__img{height: 175px;}
            & .definicion__img:nth-child(2){grid-area: unset;}
         }

   }

   .alterno
   {      
      & .alterno__img--derecho{width: 550px;}
      & .alterno__img{left: -18%;}
   }



}

@media (min-width: 1200px) and (max-width: 1399px) /*COL-XL*/
{
   .alterno
   {            
      & .alterno__img{left: -5%;}
   }
}

@media (min-width: 1400px)   /*COL-XXL*/
{
   
}