/*Theme Name: COLLAHUASI
Theme URI: somosjam.cl
Description: Template hecho para tomarlo como base inicial de cualquier proyecto wordpress
Version: 1.0
Author: SOMOS JAM
Author URI: https://somosjam.cl/
*/

@font-face {
   font-family: gotham;
   src: url(./assets/fonts/GothamRounded-Book.otf);
   font-weight: normal;
 }
 
 @font-face {
   font-family: gotham;
   src: url(./assets/fonts/GothamRounded-Bold.otf);
   font-weight: bold;
 }
 
 
 
 @font-face {
   font-family: gotham;
   src: url(./assets/fonts/GothamRounded-Light.otf);
   font-weight: 300;
 }

html{
   scroll-behavior: smooth;
   scroll-padding-top: 50px;
}

*{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: gotham;

}

body{
   /* height: 2000px; */
   overflow-x: hidden;
   position: relative;
}

header{
   padding: 15px;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 10;
   opacity: 0.9;
}
header.scroll{
   background-color: #F7F7F7;
   opacity: 1;
   box-shadow: 0 0 5px #EBEBEC;
}

.contenedor{
   max-width: 1200px;
}

.menu-contenedor{
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 0 auto;
}

.header__logo img{
   width: 210px;
}

.menu-links ul{
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 30px;
   list-style: none;
}

.menu-links ul li a{
   text-decoration: none;
   color: #2B2B2B;
   font-size: 15px;
	text-transform: uppercase;
}

.button-menu-responsive{
   display: none;
   color: #A8AD00;
   font-size: 35px;
   cursor: pointer;
}

.header-movil{
   position: fixed;
   top: 109.25px;
   left: -90%;
   z-index: 100;
   width: 100%;
   height: calc(100vh - 87.25px);
   background-color: #A8AD00;
   display: flex;
   place-content: center;
   align-items: center;
   transition: all .3s ease-in-out;
   visibility: hidden;
   opacity: 0;
}

.header-movil.show{
   left: 0;
   opacity: 1;
   visibility: visible;
}

.header-movil__close{
   font-size: 40px;
   color: #fff;
   cursor: pointer;
   font-weight: 300;
   position: absolute;
   right: 20px;
   top:10px
}

.header-movil__menu ul{
   list-style: none;
   
}

.header-movil__menu ul li{
   text-align: center;
   margin-bottom: 15px;
}

.header-movil__menu ul li a{
   color: #fff;
   text-align: center;
   /* text-decoration: none; */
   font-size: 30px;
   
}

.contenedor{
   margin: 0 auto;
}

/* SECTION colla_portada */

.colla_portada{
   height: 700px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #F8F7F8;
   background-image: url(./assets/fondo-principal.png);
}

.colla_portada-contenedor{
   margin: 0 auto;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   
}

.colla_portada-textos p {
   color: #A8AD00;
   font-size: 30px;
   font-weight: 300;
   line-height: 30px;
}

.colla_portada-textos p strong {
   color: #53575A;
   font-size: 40px;
   line-height: 40px;
}

.colla_portada-imagen img{
/*    width: 520px;
   display: flex;
   position: relative;
   z-index: 1; */
	
	width: 520px;
    display: flex;
    position: relative;
    z-index: 1;
    object-position: 96px;
	border-top-right-radius:30px;
}

.colla_portada-imagen>div{
   position: relative;
   top: 120px;
}

.colla_portada-imagen>div::before{
   content: '';
   width: 180px;
   height: 220px;
   display: block;
   background-color: #A8AD00;
   position: absolute;
   bottom: -12px;
   right: -12px;
   z-index: 0;
}

.colla_portada-cdd{
   position: absolute;
   top: 70%;
   z-index: 2;
}

.colla_portada-cdd-content {
   background-color: #fff;
   box-shadow: 0px 3px 6px #00000029;
   border-radius: 38px;
   display: flex;
   align-items: center;
   overflow: hidden;
   justify-content: space-between;
   width: 650px;
   padding-left: 50px;
}

.colla_portada-cdd-content p{
   color: #53575A;
   font-weight: bold;
   font-size: 27px;
}

.colla_portada-cdd-content a{
   background-color: #FF5100;
   color: #fff;
   font-weight: bold;
   font-size: 27px;
   height: 63px;
   width: 130px;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   border-bottom-left-radius: 38px;
   border-top-left-radius: 38px;
}

/* que es cdd */

section.colla-cdd{
   padding-top: 120px;
   background-image: url(./assets/fondo-cdd.png);
   background-repeat: no-repeat;
   background-position: bottom right;
   background-size: 900px 100%;
   padding-bottom: 50px;
}

.colla-cdd-intro{
   max-width: 550px;
   margin-bottom: 120px;
}

.colla-cdd-intro h2{
   color: #53575A;
   font-size: 35px;
   margin-bottom: 40px;
   display: table;
   position: relative;

}

.colla-cdd-intro h2::after{
   content: '';
   position: absolute;
   width: calc(100% + calc(calc(100vw - 1200px) / 2));
   left: calc(0px - calc(calc(100vw - 1200px) / 2));
   height: 2px;
   bottom: -10px;
   display: block;
   background-color: #FF5100;

}

.colla-cdd-intro > p {
   color: #53575A;
   font-size: 20px;
   line-height: 20px;
}

.colla-cdd-intro > p strong{
   margin-bottom: 20px;
   color: #53575A;
   font-size: 20px;
   line-height: 20px;
}

.colla-cdd-intro-texto1{
   margin-bottom: 20px;
}

.colla-cdd-caracteristica-colums{
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.colla-cdd-caracteristica-item.textos{
   width: 500px;
}

.colla-cdd-caracteristica-item.textos h2{
   color: #53575A;
   font-size: 35px;
   line-height: 35px;
   margin-bottom: 10px;
}

.colla-cdd-caracteristica-item.textos p{
   color: #53575A;
   font-size: 17px;
   display: block;
   margin-bottom: 30px;
}

.colla-cdd-caracteristica-item.textos a{
   color: #fff;
   background-color: #A8AD00;
   text-decoration: none;
   border-radius: 17px;
   padding: 10px 22px;
   font-weight: bold;
   font-size: 20px;
}

.colla-cdd-caracteristica-item.cards.mobil{
	display:none;
}

.colla-cdd-caracteristica-item.cards>div{
   display: flex;
   align-items: center;

}

.colla-cdd-caracteristica-card {
   width: 225px;
   text-align: center;
   background-color: #eaeaea9c;
   border-radius: 20px;
   margin: 0px 14px;
   margin-bottom: 60px;
   padding: 10px;
	transition: all .4s;
}

.colla-cdd-caracteristica-card-img{
   background-color: #A8AD00;
   width: 80px;
   height: 80px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
   margin: 0 auto;
   position: relative;
   top: -30px;
   position: relative;
   top: -30px;
}

.colla-cdd-caracteristica-card-img svg{
   width: 48px;
}

.colla-cdd-caracteristica-card-texto{
   display: none;
}

.colla-cdd-caracteristica-card-texto p{
   color:#fff
}

.colla-cdd-caracteristica-card-title{
   position: relative;
   top: -15px;
   color: #53575A;
   font-weight: bold;
   font-size: 17px;
}

.colla-cdd-caracteristica-card:hover{
   background-color: #FF5100;
   padding: 20px 10px;
}

.colla-cdd-caracteristica-card:hover .colla-cdd-caracteristica-card-title{
   color: #fff;
   position: static;
   margin-bottom: 10px;
}
.colla-cdd-caracteristica-card:hover .colla-cdd-caracteristica-card-img{
   background-color: #fff;
   position: static;
   margin-bottom: 10px;
} 

.colla-cdd-caracteristica-card:hover .colla-cdd-caracteristica-card-img svg path{
   fill: #FF5100;
}

/* .colla-cdd-caracteristica-card:hover .colla-cdd-caracteristica-card-texto{
   display: block;
} */

.colla-cdd-caracteristica-card.tercero{
   position: relative;
   top: 35px;
}

.colla-cdd-caracteristica-card.quinto{
   position: relative;
   top: 26px;
}

/* BENEFICIOS */

.colla-beneficios{
   padding: 100px;
}

.colla-beneficios-contenedor {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 80px;
}

.colla-beneficios-imagen{
   position: relative;
}

.colla-beneficios-imagen::before{
   content: '';
   width: 200px;
   height: 200px;
   display: block;
   position: absolute;
   background-color: #A8AD00;
   z-index: 0;
   bottom: -7px;
   left: -9px;
}

.colla-beneficios-imagen img{
   max-width: 500px;
   position: relative;
   z-index: 0;
   filter: drop-shadow(2px 4px 6px #00000029);
}

.colla-beneficios-textos h2{
   color: #53575A;
   font-size: 40px;
   line-height: 40px;
   margin-bottom: 20px;
   position: relative;
}

.colla-beneficios-textos h2::before {
    content: '';
    width: 80%;
    height: 2px;
    position: absolute;
    bottom: -12px;
	left:-80px;
    background-color: #FF5100;
}

.colla-beneficios-textos p{
   color: #53575A;
   font-size: 24px;
   line-height: 24px;
   margin-bottom: 20px;
   font-weight: 500;
}

.colla-beneficios-textos ul {
   list-style: none;
   padding-left: 60px;
}

.colla-beneficios-textos ul li{
   color: #53575A;
   margin-bottom: 15px;
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 17px;
}

.colla-beneficios-textos ul li span{
   display: block;
   background: #FFFFFF 0% 0% no-repeat padding-box;
   box-shadow: 0px 3px 6px #00000029;
   border-radius: 4px;
   color: #A8AD00;
   padding: 7px;
   font-size: 24px;
}


/* Quieres aprender carrusel */
section.quieres-aprender{
   padding: 100px 0 100px 0;
}

.quieres-aprender-contenedor{
   display: flex;
   align-items: center;
   justify-content: center;
	gap: 25px;
}

/* #53575A */
.quieres-aprender-textos{
   max-width: 450px;
   /* margin-left: calc(calc(100vw - 1200px) / 2); */
}
.quieres-aprender-textos h2{
   color: #53575A;
   font-size: 40px;
   line-height: 40px;
   margin-bottom: 15px;
}

.quieres-aprender-textos p{
   color: #53575A;
   font-size: 17px;
}

.quieres-aprender-carrusel{
   width: 711px;
   display: flex;
   gap: 20px;
   
}
.quieres-aprender-carrusel .swiper-slide{
   /* width: 220px; */
   flex-grow: 1;
   height: 450px;
   background-image: url(./assets/quieres-aprender-car1.png);
   background-position: center;
   background-size: cover;
   transition: all .4s ease-in;
   border-radius: 20px;
   position: relative;
   box-shadow: inset 0px -44px 30px 30px #00000075;
}

.quieres-aprender-carrusel .swiper-slide.segundo{
	background-image: url(./assets/quieres-aprender-car3.png);
	    
}
.quieres-aprender-carrusel .swiper-slide.tercero{
	background-image: url(./assets/quieres-aprender-car2.png);
	background-position: left;
}


.quieres-aprender-carrusel .swiper-slide:hover{
   flex-grow: 5;
}

.quieres-aprender-carrusel .swiper-slide .texto-normal{
   position: absolute;
   color: #fff;
   font-weight: 500;
   font-size: 25px;
   line-height: 25px;
   bottom: 40px;
   left: 40px;
   visibility: hidden;
   opacity: 0;
   transition: all .4s ease-in;
}

.quieres-aprender-carrusel .swiper-slide:hover .texto-normal{
   visibility: visible;
   opacity: 1;
}

.quieres-aprender-carrusel .swiper-slide .play-icono{
   background-color: #FF5100;
   position: absolute;
   color: #fff;
   width: 60px;
   height: 60px;
   font-size: 25px;
   display: flex;
   justify-content: center;
   align-items: center;
   left: -80px;
   bottom: 30px;
   visibility: hidden;
   opacity: 0;
   transition: all .4s ease-in;
}

.quieres-aprender-carrusel .swiper-slide:hover .play-icono{
   visibility: visible;
   opacity: 1;
   left: -30px;
}

.quieres-aprender-carrusel .swiper-slide .texto-vertical{
   position: absolute;
    bottom: 55px;
    left: -25px;
    width: 90px;
    height: 40px;
    color: #fff;
    font-weight: 500;
    font-size: 20px;
    background-color: #A8AD00;
    white-space: nowrap;
    display: flex;
    align-items: center;
    transform: rotate(-90deg);
    padding-left: 30px;
    transition: all .4s ease-in;
    opacity: 1;
}

.quieres-aprender-carrusel .swiper-slide:hover .texto-vertical{
   visibility: hidden;
   opacity: 0;
}

/* 

.swiper.quieres-aprender .swiper-slide:hover{
   width: 350px !important;
} */

/*colla-acceder  */

.colla-acceder{
   height: 600px;
   background-color: #F7F7F7;
   background-image: url(./assets/fonfo-acceder.png);
   background-repeat: no-repeat;
   background-position: left 90px;
   background-size: contain;
   display: flex;
   align-items: center;
   justify-content: center;
}

.colla-acceder-contenedor{
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
}

.colla-acceder-informacion{
   max-width: 700px;
}

.colla-acceder-informacion> p{
   color: #414141;
   text-align: center;
   font-size: 35px;
   margin-bottom: 40px;
}

.colla-acceder-informacion> p strong{
   color: #414141;
   display: block;
}

.colla-acceder-aqui{
   background-color: #FF5100;
   box-shadow: 0px 3px 6px #00000029;
   border-radius: 38px;
   display: flex;
   align-items: center;
   overflow: hidden;
   justify-content: space-between;
   width: 540px;
   padding-left: 50px;
   margin: 0 auto;
}

.colla-acceder-aqui p{
   color: #fff;
   font-weight: 500;
   font-size: 28px;
}
.colla-acceder-aqui a{
   background-color: #A8AD00;
   color: #fff;
   font-weight: bold;
   font-size: 27px;
   height: 63px;
   width: 130px;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   border-bottom-left-radius: 38px;
   border-top-left-radius: 38px;
}

/* FOOTER */
footer{
   padding: 150px 0 100px 0;
   background-color: #F7F7F7;
}

.footer-content{
   padding: 70px 0 0px 0;
   border-top: 2px solid #FF5100;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.footer-content ul{
   list-style: none;

}

.footer-content strong{

   color: #53575A;
}

.footer-content ul li a{
   color: #53575A;
   text-decoration: none;
}


/* #EAEAEA */

/* MEDIAQUERY */
@media(max-width:1200px){
   .contenedor{
      padding: 0 10px;
   }
   
   .quieres-aprender-contenedor{
      padding: 0 10px;
      
   }

    /* esconder */

   section.quieres-aprender{
      display: none;
   }

   /* footer{
      display: none;
   } */

   .footer-content{
      padding: 70px 0 0px 0;

      justify-content: space-around;
   }
}

@media(max-width:1100px){
   .colla-beneficios-textos ul{
      padding-left: 0;
   }

   .colla_portada-imagen{
      display: none;
   }

   .colla_portada-contenedor{
      display: block;
   }

   .colla_portada-textos{
      max-width: 430px;
      margin: 0 auto;
      margin-bottom: 30px;
   }

   .colla_portada-cdd{
      display: block;
      position: static;
   }

   .colla-cdd-intro {
      max-width: initial;
      margin-bottom: 60px;
      text-align: center;
  }

  .colla-cdd-intro h2{
      margin-left: auto;
      margin-right: auto;
  }


  .colla-cdd-caracteristica-colums{
      flex-direction: column;
      gap: 60px;
  }

  .colla-cdd-caracteristica-item.textos{
   text-align: center;
  }

  .colla-beneficios-contenedor{
      flex-direction: column-reverse;
      gap: 30px;
  }

  .colla-beneficios-textos ul{
   padding-left: 0px;
  }
  
}

@media(max-width:918px){
   .menu-links{
      display: none;
   }

   .button-menu-responsive{
      display: block;
   }


}

@media(max-width:800px){

   .colla-cdd-caracteristica-card.tercero{
      position: static;
   }

   .colla-cdd-caracteristica-item.cards>div{
      flex-wrap: wrap;
      justify-content: center;
   }
	
	.colla-cdd-caracteristica-item.cards{
		display:none;
	}
	
	.colla-cdd-caracteristica-item.cards.mobil{
		display:block;
		display: flex;
    	flex-wrap: wrap;
	}
	.colla-cdd-caracteristica-item.cards.mobil>div{
		width: 41% !important;
	}
	
	.colla-cdd-caracteristica-item.cards.mobil>div.tercer{
		position:static !important;
	}
	
	.colla-cdd-caracteristica-item.cards.mobil>div.quinto{
		position:static !important;
	}
	
	.colla-cdd-caracteristica-item.cards>div{
		    display: block;
	}

}

@media(max-width:710px){
   .colla_portada-imagen img{
      width: 465px;
   }
	
	section.colla-cdd{
		padding-top: 70px;
	}
}


@media(max-width:650px){
   .colla_portada-cdd-content{
      width: 95%;
   }

   .colla_portada-cdd-content a{
      height: 75px;
   }

   .colla-beneficios {
      padding: 0 0px;
  }

   .colla-beneficios-imagen img{
      width: 97%;
   }
   .colla-beneficios-textos h2{
      font-size: 35px;
      text-align: center;
      line-height: 35px;
   }

   .colla-beneficios-textos p{
      text-align: center;
   }

   .colla-acceder{
      height: 500px;
   }

   .colla-acceder-informacion> p{
      font-size: 30px;
   }

   .colla-acceder-aqui p{
      font-size: 25px;

   }

   .colla-acceder-aqui a{
      font-size: 24px;
   }

   .colla-acceder-aqui{
      width: 100%;
   }

   footer{
      padding: 0px 0 50px 0;
   }

   .footer-content {
    padding: 35px 0 0px 0;
    flex-direction: column;
    gap: 26px;
	   align-items: flex-start;
    	padding-left: 20px;
   }
	
	.colla_portada {
		height: 623px;
	}

	.colla_portada-contenedor{
		padding-top: 60px;
	}
   
}

@media(max-width:550px){
	
	.menu-contenedor{
		flex-direction:row-reverse;
	}
	
   #header > div > div:nth-child(1){
      display: none;
   }

   .colla_portada-textos p strong{
      font-size: 34px;
      line-height: 34px;
   }

   .colla_portada-textos p{
      font-size: 25px;
      font-weight: 300;
      line-height: 25px;
   }

   .colla_portada-cdd-content{
      padding-left: 27px;
   }

   .colla_portada-cdd-content p{
      font-size: 20px;
      line-height: 20px;
   }

   .colla_portada-cdd-content a{
      height: 54px;
      font-size: 20px;
   }

   .colla-cdd-caracteristica-item.textos{
      width: 100%;
   }

   .colla-acceder-aqui p{
      font-size: 20px;
      line-height: 20px;
   }

   .colla-acceder-aqui a {
      font-size: 21px;
  }
	
	.colla_portada{
		height: 530px;
	}

}

@media(max-width:476px){
  .header__logo img {
   width: 175px;
  }

  .header-movil{
   top: 97.25px;

  }
	
	.colla-cdd-caracteristica-card-title{
		font-size: 14px;
	}
	
	.colla-cdd-caracteristica-card{
		margin: 0px 8px;
		margin-bottom:37px;
	}

}