@import url('utilitarios.css');

/*PÁGINA INICIAL*/
.comunidadResu
{
   .comunidadResu__evento
   {
      display: grid; grid-template-columns: repeat(2, 1fr);
      & > div:nth-child(2){display: flex; flex-flow: column wrap; row-gap: 15px;}      
   }
   .comunidadResu__pestanha
   {
      border-radius: 10px; border: 2px solid var(--azul); padding: 10px; display: flex; margin: 50px auto; text-transform: uppercase; column-gap: 10px; max-width: 237px;
      & .btnEnlace{padding: 10px 20px; }
   }
}
.programaResu
{ 
   background-color: var(--negro); padding-top: 50px;
   & .tituloInnova{bottom: -40px; right: unset; left: 1%; z-index: 1; opacity: .3; }
}

.cursoCont
{
   display: flex; flex-flow: row wrap; justify-content: space-evenly; row-gap: 30px; 
   & .flecha{position: absolute; top: 50%; }
   & .flecha__ant{left: -20px; }
   & .flecha__sig{right: -20px; }
}

.indicadores
{
   background: linear-gradient(0deg, rgba(33, 118, 255, 0.80) 0%, rgba(33, 118, 255, 0.80) 100%), url('../imagenes/fondoIndicador.png') lightgray; background-size: cover; background-position: center; background-repeat: no-repeat; padding: 50px 0; border-radius: 0 130px 0;
   & .espacio{display: flex; flex-flow: row wrap; justify-content: space-evenly; row-gap: 30px; }
   & .tituloPrincipal{margin-bottom: 30px; }
   &::after{content: ''; width: 150px; height: 150px; display: block; position: absolute; top: 0; right: 0; background-color: var(--negro10); z-index: -1; }
   & .indicador::after{content: ''; height: 80%; width: 1px; border-right: 2px dotted; position: absolute; right: -15px; top: 12%; }
   & .indicador:nth-child(4)::after{display: none;}
}

.testimonios
{
   padding: 50px 0; 
   & .tituloPrincipal
   {
      color: var(--blanco); 
      &::after{background: var(--blanco); }
   }
   & .espacio{background: var(--azul); border-radius: 20px 100px 20px 20px; }
   
   .testimonios__nav
   {
      position: absolute; right: 50px; bottom:30px; display: flex; flex-flow: row wrap; column-gap: 7px;
      & li{width: 20px; height: 20px; background: var(--negro20); border-radius: 100%; cursor: pointer; }
      .testimonios__nav--activo{background: var(--negro); border-radius: 40px; width: 50px; }
   }
}

.menuBloque
{
   display: flex; flex-flow: row wrap; justify-content: space-around; width: 100%; padding: 30px 10px 20px; z-index: 10; align-items: center;
   .menuBloque__logo{width: 190px; }
}

.bannerBloque
{
   height: 550px; background: linear-gradient(101deg, rgba(33, 118, 255, 0.70) 2.36%, rgba(33, 118, 255, 0.14) 48.38%, rgba(255, 129, 33, 0.42) 71.38%, rgba(255, 129, 33, 0.70) 94.39%);

   .menuBloque{ position: absolute; }
   .sliderBloque{ height: 100%;}
   .slider__nav{position: absolute; bottom: 100px; right: 10%; display: flex; column-gap: 15px;}
}

.enlaceBloque{text-align: center; padding-top: 80px; }

.formularioBloque
{
   background: var(--azul); padding: 70px 0 50px;
   .formulario
   {
      max-width: 700px; display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 20px; column-gap: 40px; padding: 50px 10px 0;
      & textarea{grid-area: 4/1/5/3;}
      & .envolverInput:nth-of-type(3){ grid-area: 5/1/6/3; column-gap: 10px; font-size: 13px; color: var(--blanco); display: flex; }
      & input[type="checkbox"]{ color: var(--naranja) }
      & .btnEnlace{box-shadow: 0px 1.326px 9.944px 0px rgba(0, 0, 0, 0.05); justify-self: left; padding: 8px 20px;}
      
   }
}







/*-----------------------------------------------------------------*/

/*TAMAÑO COL*/
@media (width <= 575px)
{   
   .footer
   {  
      & h4{text-align: center; }
      .footer__content{row-gap: 40px; }    
      .footer__navegacion
      { 
         grid-template-columns: 1fr; order: 1; 
         & div:nth-child(1), & div:nth-child(2){text-align: center; }
         & div:nth-child(4){justify-self: center; }
         & ul{display: inline-block; }
      }
      .footer__logo
      { 
         order: 2; margin: 0 auto; text-align: center; 
         & div:nth-child(2) img{display: inline-block; }
      }
   }

   .comunidadResu
   {
      .comunidadResu__evento{ grid-template-columns: 1fr; row-gap: 20px;}
      .cuadroCurso--comunidad{margin: 0 auto; width: 100%; }
      .cuadroCurso--notas
      {
         grid-template-columns: 1fr;
         .cuadroCurso__imagen{margin: 0 auto; margin-bottom: 15px; border-top-left-radius: 25px; }
      }
   }

   .programaResu
   { 
      .itemCuadro
      {
         height: 350px; width: 100%;
         .itemCuadro__contenido{padding: 0px 10px 10px;}
         & .itemCuadro__texto{ font-size: .85rem; line-height: 20px;}
      } 
   }

   .informativo
   {
      .tituloPrincipal{align-items: center; }
      .informativo__cont{grid-template-columns: 1fr; row-gap: 40px; }
      & .informativo_imagen {& figcaption{text-align: center; } }
   }

   .informativo--alterno 
   {
      border-top-right-radius: 80px;
      & figcaption{text-align: center;} 
   }

   .informativo--galeria
   {
      & .informativo_imagen
      {
         grid-template-columns: 1fr; 
         & img:nth-child(3){grid-area: -1 / 1 / -1 / 2; }
      }      
   }

   .cursoCont{ .flecha{display: none;}} 
   .cursoResu__nav{display: flex; }   

   .indicadores
   {
      border-radius: 0 75px 0;
      & .indicador::after{ border-bottom: 1px dotted; width: 80%; border-right: 0; height: 2px; top: 115%; left: 10%;  }
   }

   .testimonio
   {
      grid-template-columns: 1fr; padding: 30px 0;
      & img{position: unset; height: inherit; width: inherit; max-width: inherit;}
      .testimonio__imagen { text-align: center; }
      .testimonio__imagen img{ width: 60%; display: inline-block; }
      .testimonio__infomarcion
      {
         padding-right: 0; padding-bottom: 150px;
         & img{bottom: 50px; right: 40%; width: 70px; top: unset; position: absolute; }
      }
   }
   .testimonios 
   {
      .testimonios__nav{width: 100%; right: 0; justify-content: center; }
   } 
   .tituloInnova{ font-size: clamp(.5rem, 4rem + 5vw, 18rem); right: 10%; }

   .enlaceDirecto
   {
      .enlaceDirecto__redes{order: 3; }
      .enlaceDirecto__nav{order: 2; }
      .enlaceDirecto_sitios{order: 1; }
   }

   .formularioBloque {
      .formulario
      {
         grid-template-columns: 1fr; 
         & textarea {grid-area: unset; }
         & .envolverInput:nth-of-type(3) {grid-area: unset;}
      }
   }

}


/*TAMAÑO COL-SM*/
@media (576px <= width <= 767px)
{
   .footer
   {  
      & h4{text-align: center; }
      .footer__content{row-gap: 40px; }    
      .footer__navegacion
      { 
         grid-template-columns: repeat(2, 1fr); order: 1; 
         & div:nth-child(4){justify-self: center; }
         & ul{display: inline-block; }
      }
      .footer__logo
      { 
         display: flex; flex-flow: row wrap; width: 100%; column-gap: 20px; justify-content: space-evenly; order: 2; margin: 0 auto; text-align: center; 
         & div:nth-child(1) img{height: auto;}
         & div:nth-child(2) img{display: inline-block; }
         & div:nth-child(3) {width: 100%; }
         & div:nth-child(3) ul{justify-content: center; column-gap: 30px; }
      }
   }

   .comunidadResu
   {
      .comunidadResu__evento{ grid-template-columns: 1fr; row-gap: 20px;}
      .cuadroCurso--comunidad{margin: 0 auto; }
      .cuadroCurso--notas{grid-template-columns: auto 1fr; }
   }

   .programaResu{ .itemCuadro{height: 350px; width: 78%;} }

   .informativo
   {
      .tituloPrincipal{align-items: center; }
      .informativo__cont{grid-template-columns: 1fr; row-gap: 40px; }
      & .informativo_imagen
      {
         max-width: 70%; justify-self: center;
         & figcaption{text-align: center; } 
      }
   }

   .informativo--alterno 
   {
      border-top-right-radius: 80px;
      & figcaption{text-align: center;} 
   }

   .cursoCont{ .flecha{display: none;}} 
   .cursoResu__nav{display: flex; }

   .informativo
   {
      & .informativo_imagen{ max-width: 100%; }
   }

   .testimonio
   {
      grid-template-columns: 1fr; padding: 30px 0;
      & img{position: unset; height: inherit; width: inherit; max-width: inherit;}
      .testimonio__imagen 
      { 
         text-align: center; 
         & img{ width: 40%; display: inline-block; }
      }
      
      .testimonio__infomarcion
      {
         padding-right: 0; padding-bottom: 150px;
         & img{bottom: 50px; right: 40%; width: 80px; top: unset; position: absolute; }
      }
   }
   .testimonios 
   {
      .testimonios__nav{width: 100%; right: 0; justify-content: center; }
   }
   .tituloInnova{ font-size: clamp(.5rem, 8rem + 5vw, 18rem); right: 10%; }

   .enlaceDirecto
   {
      flex-flow: column;
      .enlaceDirecto__redes{order: 3; }
      .enlaceDirecto__nav{order: 2; }
      .enlaceDirecto_sitios{order: 1; }
   }

   .formularioBloque {
      .formulario
      {         
         & .envolverInput:nth-of-type(1){grid-area: 3 / 1 / 4 / 3;}
         & .envolverInput:nth-of-type(2){grid-area: 4 / 1 / 5 / 3;}
         & textarea{grid-area: 5 / 1 / 6 / 3;}
         & .envolverInput:nth-of-type(3){grid-area: 6 / 1 / 7 / 3;}
      }
   }


}


/*TAMAÑO COL-MD*/
@media (768px <= width <= 991px)
{
   .footer
   {  
      & h4{text-align: center; }
      .footer__content{row-gap: 40px; }    
      .footer__navegacion
      { 
         grid-template-columns: .8fr auto; order: 1; margin: 0 auto; column-gap: 40px;
         & div:nth-child(4){justify-self: center; }
         & ul{display: inline-block; }
      }
      .footer__logo
      { 
         display: flex; flex-flow: row wrap; width: 100%; column-gap: 20px; justify-content: space-evenly; order: 2; margin: 0 auto; text-align: center; 
         & div:nth-child(1) img{height: auto;}
         & div:nth-child(2) img{display: inline-block; }
         & div:nth-child(3) {width: 100%; }
         & div:nth-child(3) ul{justify-content: center; column-gap: 30px; }
      }
   }

   .comunidadResu
   {
      .comunidadResu__evento{ grid-template-columns: 1fr; row-gap: 20px;}
      .cuadroCurso--comunidad{margin: 0 auto; }
      .cuadroCurso--notas{grid-template-columns: auto 1fr; }
   }

   .informativo{.informativo__cont{column-gap: 30px;}}
   .informativo--alterno{border-top-right-radius: 80px;}
   .cursoCont{ .flecha{display: none;}} 
   .cursoResu__nav{display: flex; }
   
   .testimonio {
      padding: 30px 0 0;
      .testimonio__imagen img{width: 283px; }
      .testimonio__infomarcion 
      {
         padding-right: 100px;
         & img{width: 80px; top: 50px;  }
      }
   }
   .testimonios {
      .testimonios__nav { right: 10px; }
   }
   .tituloInnova{ font-size: clamp(.5rem, 12rem + 5vw, 18rem); right: 10%; }

   .informativo--galeria
   {
      & .informativo_imagen{grid-template-rows: repeat(2, 200px);}
   }

}


/*TAMAÑO COL-LG*/
@media (992px <= width <= 1199px)
{
   .footer
   {  
      & h4{text-align: center; }
      .footer__content{row-gap: 40px; }    
      .footer__navegacion
      { 
         grid-template-columns: .8fr auto; order: 1; margin: 0 auto; column-gap: 100px;
         & div:nth-child(4){justify-self: center; }
         & ul{display: inline-block; }
      }
      .footer__logo
      { 
         display: flex; flex-flow: row wrap; width: 100%; column-gap: 20px; justify-content: space-evenly; order: 2; margin: 0 auto; text-align: center; 
         & div:nth-child(1) img{height: auto;}
         & div:nth-child(2) img{display: inline-block; }
         & div:nth-child(3) {width: 100%; }
         & div:nth-child(3) ul{justify-content: center; column-gap: 30px; }
      }
   }
   .informativo{.informativo__cont{column-gap: 50px;}}
   .informativo--alterno{border-top-right-radius: 80px;}
   
   .informativo--galeria
   {
      & .informativo_imagen{grid-template-rows: repeat(2, 200px);}
   }
   .tituloInnova{ font-size: clamp(.5rem, 12rem + 5vw, 18rem); right: 10%; }

   .cursoCont 
   {
      & .flecha__sig {right: 0px;}
   }
   .cursoCont 
   {
      & .flecha__ant {left: 0px;}
   }

}


/*TAMAÑO COL-XL*/
@media (1200px <= width <= 1399px)
{

}


/*TAMAÑO COL-XXL*/
@media (1400px <= width)
{
   
}