html {
   scroll-behavior: smooth;
   margin: 0 !important;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Montserrat', sans-serif;
}

.colla__portada {

   color: #148998;
   color: #F2F2F2;
   background-image: linear-gradient(to right, #148998 70%, #F2F2F2 30%);
}

.colla__contenedor {
   max-width: 1400px;
   margin: 0 auto;
}

.colla__portada-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
}

.colla__portada-grid-texto-logo {
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 60px;
   padding: 0 25px;

}

.colla__portada-grid-texto-logo img {
   width: 350px;
}

#burger-menu {
   display: none;
   cursor: pointer;
   height: 27px;
   width: 27px;
   overflow: visible;
   position: relative;
   z-index: 2;
   background: #2eb2e1;
   padding: 28px;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   position: fixed;
   top: 5%;
   left: 3%;
}

#burger-menu span {
   width: 27px;
}

#burger-menu span,
#burger-menu span:before,
#burger-menu span:after {
   background: white;
   display: block;
   height: 2px;
   opacity: 1;
   position: absolute;
   transition: 0.3s ease-in-out;
}


#burger-menu span:before,
#burger-menu span:after {
   content: "";
}

#burger-menu span:before {
   left: 0px;
   top: -10px;
   width: 27px;
}

#burger-menu span:after {
   left: 0px;
   top: 10px;
   width: 27px;
}

#burger-menu.close span {
   transform: rotate(-45deg);
   width: 27px;
}

#burger-menu.close span:before {
   top: 0px;
   transform: rotate(90deg);
   width: 27px;
}

#burger-menu.close span:after {
   top: 0px;
   left: 0;
   transform: rotate(90deg);
   opacity: 0;
   width: 0;
}

/* menu responsive */

#menu {
   z-index: 1;
   min-width: 100%;
   min-height: 100%;
   position: fixed;
   top: 0;
   height: 0;
   visibility: hidden;
   opacity: 0;
   text-align: center;
   padding-top: 20px;
   transition: all 0.3s ease-in-out;
}

#menu li {
   list-style: none;
}

#menu.overlay {
   visibility: visible;
   opacity: 1;
   padding-top: 100px;
   background: rgba(0, 0, 0, 0.7);
}

#menu a {
   color: #fff;
   display: block;
   font-size: 20px;
   margin-bottom: 30px;
   text-decoration: none;
   font-weight: 600;
}

#menu a span {
   color: white;
}


.colla__portada-grid-texto-logo h1 {
   font-weight: 800;
   font-size: 45px;
}


.colla__portada-grid-imagen {
   position: relative;
   padding: 25px 0;
}

.colla__portada-imagen-principal {
   max-width: 650px;
}

.colla__portada-imagen-top-icon {
   position: absolute;
   top: 0;
   left: -32px;
   width: 157px;
}

.colla__portada-imagen-bottom-icon {
   position: absolute;
   width: 110px;
   bottom: 4px;
   right: 21px;
}

.colla__caracteristicas {
   padding: 40px 0 100px 0;
   background-color: #F2F2F2;
   position: relative;
   overflow: hidden;
}

.colla__caracteristicas-img-triangulo-amarillo {

   width: 100px;
   position: absolute;
   right: -62px;
   top: 170px;

}

.colla__caracteristicas-options {

   margin-bottom: 60px;
   /* nuevo agregado */
   box-shadow: 5px 5px 15px #00000029;
   border-radius: 30px;
   padding: 10px 20px;
   background-color: #F8F8F8;

}

.colla__caracteristicas-options ul {
   display: flex;
   justify-content: space-between;
   list-style: none;
   font-weight: 900;
   font-size: 17px;
}

.colla__caracteristicas-options ul li {
   position: relative;
   padding-right: auto;
}

.colla__caracteristicas-options ul li:not(:last-child)::before {
   content: '';
   position: absolute;
   right: -25px;
   top: 10px;
   bottom: 10px;
   width: 1px;
   background-color: #949494;
}

.colla__caracteristicas-options ul li a {
   padding: 20px 0;
   color: #158C96;
   text-decoration: none;
   display: block;
   text-align: center;
   border-bottom: 4px solid transparent;
}

/* .colla__caracteristicas-options ul li:first-child a {
   border-bottom: 4px solid #158C96;
}
 */
.colla__caracteristicas-options ul li a:hover {
   border-bottom-color: #158C96;

}

.colla__caracteristicas-contenido {
   display: flex;
   gap: 2 0px;
}

.colla__caracteristicas-contenido-item {
   width: 40%;
}

.colla__caracteristicas-contenido-item.colla-swiper {
   width: 60%;

}


.colla__caracteristicas-contenido-item h2 {
   text-align: right;
   color: #148998;
   font-weight: 900;
   font-size: 31px;
   margin-bottom: 40px;
   line-height: 36px;
}

.colla__caracteristicas-contenido-item h2 span {
   font-weight: 400;
   display: block;

}


.colla__caracteristicas-contenido-item p {
   font-weight: 500;
   text-align: right;
   margin-bottom: 20px;
   color: #3C4B4D;
   font-size: 18px;
}

.swiper {
   width: 600px;
}

.swiper-slide {
   text-align: center;
}



/*========== SECCION INSUMO  ==========*/
.colla__insumos {
   padding: 40px 0;
   background-image: linear-gradient(to right, #F0F0F0 50%, #E4EDEF 50%);
   padding-bottom: 100px;
}

.colla__insumos-titulo {
   margin-bottom: 30px;
}

.colla__insumos-titulo>div {
   width: 50%;
}

.colla__insumos-titulo h2 {
   text-align: left;
   color: #EEAD0B;
   font-weight: 900;
   font-size: 31px;
   margin-bottom: 30px;
   line-height: 35px;
}

.colla__insumos-titulo h2 span {
   font-weight: 400;
   display: block;
}

.colla__insumos-titulo p {
   text-align: left;
   color: #3C4B4D;
   font-weight: 500;
   font-size: 18px;
}

.colla__portada-grid-imagen.insumos .swiper {
   margin-left: 0;
}

.colla__portada-grid-imagen.insumos .swiper-slide img {
   width: 90%;
}

.colla__portada-grid-texto-logo.insumos {
   justify-content: center;
   flex-direction: initial;
   align-items: center;
}

.colla__portada-grid-texto-logo.insumos>div {
   max-width: 470px;
   border-left: 12px solid #148998;
   padding: 30px 0;
   padding-left: 20px;
}

.colla__portada-grid-texto-logo.insumos h2 {
   color: #707070;
   font-weight: 900;
   font-size: 31px;
   margin-bottom: 30px;
}



.colla__portada-grid-texto-logo.insumos p {
   color: #707070;
   font-size: 18px;
}

.colla__insumos-portada-amarillo {
   position: absolute;
   right: 108px;
   width: 91px;
   top: 0;
   z-index: 1;
}

/* retroalimentacion */
.colla__retroalimentacion {
   padding: 40px 0;

   background-color: #fff;
   position: relative;
   padding-bottom: 100px;
}

.colla__retroalimentacion-triangulo-azul {
   position: absolute;
   bottom: 40px;
   left: -25px;
   width: 100px;
}

.colla__retroalimentacion-titulo {
   padding: 20px 0;
   margin-bottom: 30px;
}

.colla__retroalimentacion-titulo h2 {
   color: #3C4B4D;
   font-weight: 900;
   font-size: 31px;
   text-align: center;
   display: table;
   margin: 0 auto;
   background: #FFFFFF 0% 0% no-repeat padding-box;
   box-shadow: 7px 7px 15px #00000029;
   border-radius: 37px;
   padding: 30px 50px;
   position: relative;
   top: -127px;
   margin-bottom: -70px;
}

.colla__retroalimentacion-titulo h2 strong {
   display: block;
   color: #148998;
   font-weight: 900;
   font-size: 41px;
}

.colla__retroalimentacion-titulo p {
   text-align: center;
   color: #707070;
   font-size: 19px;
   font-weight: 400;
}

.colla__retroalimentacion-contenido-image {
   text-align: center;
}

.colla__retroalimentacion-contenido-image img {
   max-width: 500px;
}

.colla__retroalimentacion-contenido-image img.img-mobil {
   display: none;
}

.colla__retroalimentacion-contenido {
   position: relative;
   margin-bottom: 100px;
}

.colla__retroalimentacion-contenido-textos {
   color: var(--color);
   max-width: 400px;
   font-size: 17px;
   text-align: var(--posicion);
}

.colla__retroalimentacion-contenido-textos.identificar {
   position: absolute;
   top: 0;
   left: 35px;
}

.colla__retroalimentacion-contenido-textos.describir {
   top: 0;
   position: absolute;
   right: 90px;
}

.colla__retroalimentacion-contenido-textos.estimular {
   position: absolute;
   bottom: -70px;
   left: 50px;
}

.colla__retroalimentacion-contenido-textos.actuar {
   position: absolute;
   bottom: -40px;
   right: 30px;
}

.image-ideas-mobil {
   display: none;
}

.image-ideas-mobil img {
   width: 100%;
}


.colla__retroalimentacion-hondar-modelo {
   padding: 60px 0;
   text-align: center;
}

.colla__retroalimentacion-hondar-modelo h3 {
   color: #707070;
   text-align: center;
   font-weight: 700;
   font-size: 22px;
   margin-bottom: 25px;
}

.colla__button-link {
   background: #148998 0% 0% no-repeat padding-box;
   border-radius: 44px;
   display: inline-block;
   margin: 0 auto;
   color: #F2F2F2;
   text-decoration: none;
   font-weight: 800;
   font-size: 25px;
   padding: 13px 40px;
}

/* videos */
.colla__conversacion {
   padding: 50px 0;
   position: relative;
   overflow: hidden;
   background-color: #F2F2F2;
   padding-top: 200px;
}

.colla__conversacion-img-triangulo-naranjo {
   width: 100px;
	position: absolute;
    right: -50px;
    top: 54px
}

.colla__conversacion-textos {
   display: grid;
   grid-template-columns: 1fr 1fr;
   padding: 50px 0;
   column-gap: 20px;
   margin-bottom: 50px;

}

.colla__conversacion-textos.interno {
   display: none;
}

.colla__conversacion-textos.afuera {

   margin-top: -100px;
   margin-bottom: -100px;
   position: relative;
   z-index: 1;
   display: block;
}

.colla__conversacion-textos.afuera>div {
   background: #FFFFFF 0% 0% no-repeat padding-box;
   box-shadow: 8px 8px 26px #00000029;
   border-radius: 76px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   padding: 50px;
}

.colla__conversacion-textos-titulo h2 {
   color: #707070;
   font-weight: 900;
   font-size: 31px;
   text-align: right;
   display: table;
   max-width: 420px;
   margin: 0 auto;
   padding-bottom: 10px;
   border-bottom: 10px solid #ED670A;
}

.colla__conversacion-textos-parrafo {
   color: #707070;
   font-size: 19px;
   padding-right: 60px;
   text-align: left;
}

.colla__conversacion-videos {
   display: block;
   /* grid-template-columns: 1fr 1fr; */
   /* column-gap: 20px; */
}

.colla__conversacion-videos-compromiso {
   text-align: center;
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
   justify-content: space-between;
}

.colla__conversacion-videos-compromiso-titulo {
   color: #707070;
   font-weight: 900;
   font-size: 25px;
   width: 50%;
}

.colla__conversacion-videos-compromiso-titulo.herramientas h2{
   color: #707070;
   font-weight: 900;
   font-size: 25px;
   margin-bottom: 20px;
   text-align: left;
}

.colla__conversacion-videos-compromiso-titulo.medidas h2{
   text-align: right;
   color: #707070;
   font-weight: 900;
   font-size: 25px;
   margin-bottom: 20px;
}

.colla__conversacion-videos-compromiso-titulo.medidas p{
   text-align: right;
   padding: 0;
   font-weight: 400;
}

.colla__conversacion-videos-compromiso-video iframe {
   margin: 0 auto;
   display: block;
   border-radius: 20px;
   height: 290px !important;
}

.colla__conversacion-videos-compromiso>p {
   color: #707070;
   font-weight: 700;
   font-size: 19px;
   text-align: center;
   padding: 0 30px;
}

.colla__conversacion-videos-compromiso a {
   background: #ED670A 0% 0% no-repeat padding-box;
   border-radius: 44px;
   color: #fff;
   font-size: 25px;
   padding: 10px 30px;
   font-weight: 800;
   text-decoration: none;
   display: inline-block;
   margin: 30px auto;
}

.colla__conversacion-videos-evaluadores{
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.colla__conversacion-videos-evaluadores p {
   color: #707070;
   font-size: 18px;
   text-align: center;
   padding: 0 25px;
}


.colla__medidas-autocuidado{
   padding: 80px 0;
   padding-bottom: 120px;
   position: relative;
}

.triangulo-verde-oscuro{
    position: absolute;
    width: 100px;
    bottom: 16px;
    left: 30px;
    z-index: -1;
}


section.colla__medidas-autocuidado.nueva_seccion{
	background-color: #F2F2F2;
}

.colla__conversacion-videos-evaluadores.nueva_seccion {
    flex-direction: row-reverse;
}

.colla__conversacion-videos-compromiso-video video {
   margin: 0 auto;
   display: block;
   border-radius: 20px;
   height: 290px !important;
}


/* hemos llegado al final */

.colla__hemos-llegado {
   background-image: linear-gradient(to left, #148998 80%, #F2F2F2 20%);
   padding: 140px 0 140px 0;
}


.colla__hemos-llegado-contenido {
   display: flex;
   justify-content: flex-end;
   position: relative;
}

.colla__hemos-llegado-triangulo-naranjo {
   position: absolute;
   top: -100px;
   left: -20px;
   width: 110px;
}

.colla__hemos-llegado-triangulo-amarillo {
   position: absolute;
   top: 80px;
   left: -10px;
   width: 170px;
}


.colla__hemos-llegado-textos {
   max-width: 700px;
}


.colla__hemos-llegado-textos h2 {
   color: #FFFFFF;
   font-size: 31px;
   font-weight: 900;
   padding-bottom: 10px;
   border-bottom: 10px solid #D8D8D8;
   display: table;
   margin-bottom: 25px;
}

.colla__hemos-llegado-textos p {
   color: #fff;
   font-weight: 700;
   font-size: 25px;
}



/* mediaquery */
@media(max-width:1400px) {

   .colla__contenedor {
      padding: 0 20px;
   }

   .colla__portada-grid-imagen {
      padding-right: 25px;
   }

   /* RETROALIMENTACIÓN */

   .colla__retroalimentacion-contenido {
      margin-bottom: 210px;
   }

   .colla__retroalimentacion-contenido-image img {
      max-width: 425px;
   }

   .colla__retroalimentacion-titulo {
      margin-bottom: 90px;
   }

   .colla__retroalimentacion-contenido-textos {
      max-width: 370px;
   }

   .colla__retroalimentacion-contenido-textos.identificar {
      position: absolute;
      top: 0;
      left: 23px;
   }

   .colla__retroalimentacion-contenido-textos.estimular {
      position: absolute;
      bottom: -177px;
      left: 50px;
   }

   .colla__retroalimentacion-contenido-textos.describir {
      top: -67px;
      position: absolute;
      right: 84px;
   }

   .colla__retroalimentacion-contenido-textos.actuar {
      position: absolute;
      bottom: -77px;
      right: 24px;
   }


   /* llegado */
   .colla__hemos-llegado-triangulo-naranjo {
      position: absolute;
      top: -100px;
      left: 83px;
      width: 110px;
   }

   .colla__hemos-llegado-triangulo-amarillo {
      position: absolute;
      top: 80px;
      left: 116px;
      width: 170px;
   }

   .colla__caracteristicas-options ul li:not(:last-child)::before {
      right: -6px;
   }

   .colla__conversacion-img-triangulo-naranjo {
      display: none;
   }


}

/* nuevo agregado */
@media(max-width:1300px) {

   .colla__caracteristicas-options ul {
      font-size: 15px;
   }

}

@media(max-width:1279px) {

   .colla__portada-imagen-principal {
      max-width: 500px;
   }

   .colla__retroalimentacion-contenido {
      margin-bottom: 0px;
   }

   .colla__retroalimentacion-contenido-image img:not(.img-mobil) {
      display: none;
   }

   .colla__retroalimentacion-contenido-image img.img-mobil {
      width: 100%;
      max-width: unset;
      display: block;
   }

   .colla__retroalimentacion-contenido-textos {
      display: none;
   }

   .colla__caracteristicas-options {
      overflow: auto;
      padding: 0px 20px;
   }

   .colla__caracteristicas-options ul {
      width: 1320px;
   }

   .colla__caracteristicas-options ul li:not(:last-child)::before {
      right: -11px;
   }

   .colla__caracteristicas-options ul li:first-child a {
      border: none;
   }


   .triangulo-verde-oscuro {
      position: absolute;
      width: 90px;
      bottom: 10px;
      left: 10px;
      z-index: -1;
  }

}

@media(max-width:1020px) {

   section.colla__portada {
      background-image: unset;
      background-color: #148998;
   }

   .colla__portada-grid {
      display: block;
   }

   .colla__portada-grid-texto-logo {
      gap: 40px;
      padding: 40px 0;
   }

   section.colla__portada .colla__portada-grid-imagen {
      display: none;
   }

   .colla__portada-grid-imagen {
      text-align: center;
   }


   /* colla__insumos */

   .colla__insumos {
      background-image: linear-gradient(to bottom, #F0F0F0 50%, #E4EDEF 50%);
   }

   .colla__insumos-titulo>div {
      width: initial;
   }

   .colla__insumos-portada-amarillo {
      display: none;
   }

   .colla__insumos .colla__portada-grid-imagen {
      padding-right: 0;
   }

   .colla__insumos .swiper {
      width: 100%;
   }


   /* conversacion al medio */
   .colla__conversacion-textos.afuera>div {
      display: block;
      padding: 34px 20px;
   }

   .colla__conversacion-textos.afuera .colla__conversacion-textos-titulo {
      padding: 0;
      text-align: center;
   }

   .colla__conversacion-textos.afuera h2 {
      text-align: center;
      font-size: 24px;
   }

   .colla__conversacion-textos.afuera .colla__conversacion-textos-parrafo {
      padding: 0;
      text-align: center;
   }


   .colla__conversacion-textos {
      display: block;
   }

   .colla__conversacion {
      padding-bottom: 50px;
   }


   .colla__conversacion-videos {
      display: block;
   }

   .colla__conversacion-textos-titulo h2 {
      max-width: initial;
      margin-bottom: 40px;
   }

   .colla__conversacion-videos-compromiso {
      margin-bottom: 40px;
      border: none;
      flex-direction: column;
      gap: 20px;
  
   }

   .colla__medidas-autocuidado .colla__conversacion-videos-evaluadores{
      flex-direction: column;
      gap: 40px;
   }
	
	.colla__conversacion-videos-evaluadores.nueva_seccion {
    flex-direction: column;
		 gap: 40px;
}

   .colla__conversacion-videos-compromiso-titulo{
      width: initial;
   }


   .colla__conversacion-videos-evaluadores{
      flex-direction: column;
      gap: 40px;
   }

   .colla__hemos-llegado-triangulo-naranjo {
      display: none;
   }

   .colla__hemos-llegado {
      background-image: unset;
      background-color: #148998;
   }

   .colla__hemos-llegado-triangulo-amarillo {
      display: none;
   }

   .colla__hemos-llegado-contenido {
      justify-content: center;
   }

   .colla__hemos-llegado {
      padding: 70px 0 70px 0
   }

   .colla__conversacion-img-triangulo-naranjo {
      display: none;
   }

   .colla__caracteristicas-contenido {
      display: block;
   }

   .colla__caracteristicas-contenido-item {
      width: auto;
   }

   .colla__caracteristicas-contenido-item.colla-swiper {
      width: auto;
      margin-top: 40px;
   }

   .colla__caracteristicas-contenido-item h2 {
      text-align: center;
   }

   .colla__caracteristicas-contenido-item p {
      text-align: center;
   }


   .colla__caracteristicas-options ul {
      width: 1176px;
   }

   .colla__caracteristicas-options ul li:not(:last-child)::before {
      right: -16px;
   }

   .colla__caracteristicas-options ul li:not(:last-child)::before {
      top: 15px;
      bottom: 15px;
   }

   .colla__caracteristicas-img-triangulo-amarillo {
      width: 100px;
      position: absolute;
      right: -62px;
      top: 480px;
   }


}

@media(max-width:767px) {




   .colla__retroalimentacion-titulo {
      margin-bottom: 20px;
   }

   .colla__retroalimentacion-contenido-image img.img-mobil {
      display: none;
   }

   .colla__retroalimentacion-contenido-textos {
      display: block;
      position: static !important;
      margin-bottom: 35px;
      margin-left: auto;
      margin-right: auto;
      text-align: left;
   }

   .colla__caracteristicas {
      padding-bottom: 50px;
   }



}

@media(max-width:600px) {

   .colla__portada-imagen-principal {
      max-width: 100%;
   }

   .colla__medidas-autocuidado{
      padding-bottom: 60px;
   }

   .colla__conversacion-videos-compromiso-video iframe {
      width: 100% !important;
      height: 236px !important;

   }
	
	.colla__conversacion-videos-compromiso-video video{
		 width: 100% !important;
      height: 206px !important;
	}

   .colla__portada-grid-texto-logo h1 {
      font-size: 31px;
   }

   .colla__portada-grid-texto-logo img {
      width: 186px;
   }

   #burger-menu {
      display: flex;
      left: initial;
      right: 3%;
   }

   .colla__portada-grid-texto-logo.insumos h2 {
      font-size: 26px;

   }

   .colla__retroalimentacion-titulo h2 {
      font-size: 23px;
      padding: 30px 8px;
   }

   .colla__insumos-portada-amarillo {
      position: absolute;
      right: -2px;
      width: 49px;
      top: -37px;
   }

   .image-ideas-mobil {
      display: block;
   }

   .colla-swiper .swiper {
      width: 100%;
   }

   .swiper-slide img {
      width: 90%;
   }

   .colla__caracteristicas-img-triangulo-amarillo {
      display: none;
   }


   .colla__conversacion-videos-compromiso-video{
      width: 100%;
   }

   .triangulo-verde-oscuro{
      display: none;
   }


}