html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}main{& .title-section{background:#033f35;position:relative;&:before{content:"";width:100%;height:50%;background-image:linear-gradient(0deg,rgba(35,31,32,.89),#fff0);position:absolute;bottom:0;left:0}&>picture{width:90%;display:flex;margin:0 auto;max-width:900px;&>img{width:100%;height:auto;object-fit:contain}}&>.title-section__branding{position:absolute;bottom:clamp(1rem,2.5vw,4.5rem);left:50%;transform:translate(-50%);& p{text-transform:uppercase;color:#fff;font-size:.8rem;font-size:clamp(.65rem,.9vw,.9rem);text-align:center;margin-bottom:-.7rem}&>h2{color:#fff;font-size:clamp(2rem,3.5vw,2.9rem);display:flex;gap:1rem;& mark{color:#97e15b;background:#fff0}}}>.title-section__sell-land{display:flex;position:absolute;transform:translate(-50%);gap:1rem;top:0;left:50%;background-color:hsla(91,26%,74%,.8);padding:1rem;width:100%;align-items:center;justify-content:center;&.hide{display:none}&>h2{font-size:clamp(.7rem,2vw,2.1rem);color:#033f35;margin-left:auto;text-transform:uppercase}&>a{position:relative;z-index:10;background-color:#033f35;color:#fff;font-weight:600;padding:.5rem 2rem;border-radius:35px;max-width:350px;transition:all .3s ease;font-size:clamp(.7rem,1.1vw,1.1rem);white-space:nowrap;text-align:center;cursor:pointer;border:1px solid #033f35;box-shadow:0 10px 27px -15px #000;&:hover{color:#99e775;background-color:#033f35}&:active{transform:scale(.95)}}&>button{border:none;background:#fff0;cursor:pointer;outline:none;margin-left:auto;& svg{width:2rem;height:2rem;stroke:#033f35;transition:all .3s ease}&:hover{& svg{transform:scale(1.1)}}&:active{transform:scale(.95)}}}&>svg{width:1.5rem;position:absolute;bottom:.5rem;left:50%;transform:translate(-50%);stroke:#fff}}& .description-section{max-width:1050px;width:90%;margin:0 auto;padding:2rem 0 0;position:relative;z-index:2;& span{text-transform:uppercase;margin-top:1rem;font-size:1rem}& h3,& span{font-weight:500;color:#033f35}& h3{margin:2rem 0;line-height:1.4;font-size:clamp(1rem,3vw,1.4rem)}& .progress-bar__container{display:flex;margin:0 auto;gap:clamp(1.5rem,4vw,5rem);justify-content:center;width:100%;& .circular-progress{width:clamp(6rem,17vw,16rem);height:clamp(6rem,17vw,16rem);margin-bottom:calc(clamp(6rem, 17vw, 16rem) * -.5);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;object-fit:contain;transition:all .3s ease;filter:drop-shadow(0 20px 9px #0000007a);& .progress-indicator{width:15px;height:15px;border-radius:50%;position:absolute;top:-7px;transition:transform .1s linear}&:first-of-type{& .progress-indicator{background:#b1e2de}}&:nth-of-type(2){& .progress-indicator{background:#e3efc6}}&:nth-of-type(3){& .progress-indicator{background:#e0eaf3}}&:first-child{background:conic-gradient(#b1e2de 0 0,#dbdbdb 0 100%);&.active{background:conic-gradient(#b1e2de 0 75%,#dbdbdb 75% 100%)}}&:nth-child(2){background:conic-gradient(#e3efc6 0 0,#dbdbdb 0 100%);&.active{background:conic-gradient(#e3efc6 0 75%,#dbdbdb 75% 100%)}}&:nth-child(3){background:conic-gradient(#e0eaf3 0 0,#dbdbdb 0 100%);&.active{background:conic-gradient(#e0eaf3 0 75%,#dbdbdb 75% 100%)}}& .progress-bar__content{width:85%;height:85%;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.5rem;& img{width:clamp(2rem,6vw,5rem);height:clamp(2rem,6vw,5rem);object-fit:contain}& .progress-value{font-size:clamp(.5rem,1.8vw,1rem);font-weight:700;color:#033f35;text-align:center;line-height:1.2;width:90%}}}}}& .team-section{padding-top:calc(clamp(6rem, 17vw, 20rem) * .5);background:#033f35;overflow:hidden;position:relative;&>img{position:absolute;width:clamp(4rem,7vw,8.5rem);object-fit:contain;transform:translateY(25%);left:50%;top:clamp(1.5rem,5vw,3rem);rotate:90deg;height:auto}& h3{margin:2rem auto;text-align:center;color:#fff;font-size:clamp(1rem,3vw,1.4rem);& mark{color:#97e15b;background:#fff0}}& .cards-container{display:flex;flex-wrap:wrap;width:65%;max-width:1050px;margin:0 auto;gap:2rem 1rem;justify-content:space-evenly;transition:all .3s ease;position:relative;z-index:1;overflow:hidden;& .team-card{width:100%;flex-basis:100%;max-width:100%;background:#fff;border-radius:2rem;overflow:hidden;flex-direction:column;justify-content:space-between;transition:all .5s ease;opacity:0;display:none;&.visible{display:flex;opacity:1}&.hidden{opacity:0}& header{& h4{color:#033f35;padding:1rem 1.5rem 0;font-weight:500;line-height:1.1;margin-bottom:.3rem}& figcaption{color:#033f35;font-weight:700;padding:0 1.5rem;margin-top:-.1rem;line-height:1.3}}& figure{display:flex;& img{width:70%;margin:1rem auto 0;object-fit:contain;height:auto}}}}& .see-more__container{width:100%;display:flex;position:relative;padding:3rem 0 1rem;& img{width:auto;height:100px;position:absolute;z-index:0}& button{margin:-1.2rem auto 0;position:relative;z-index:10;background-color:#97e15b;color:#033f35;font-weight:600;padding:.2rem .7rem;border-radius:35px;max-width:350px;display:flex;transition:all .3s ease;font-size:1rem;white-space:nowrap;text-align:center;cursor:pointer;border:1px solid #97e15b;box-shadow:0 10px 27px -15px #000;& svg{width:1.5rem;height:1.5rem;stroke:#033f35;transition:all .3s ease}&:active{transform:scale(.95)}&.expanded{& svg{transform:rotate(-180deg)}}&:hover{background-color:#033f35;& svg{stroke:#97e15b}}}}}& .pilares-section{background:#e3efc6;padding:2rem 0;& h3{color:#033f35;font-weight:500;text-align:center;font-size:clamp(1rem,3vw,1.4rem);& strong{font-weight:700}}& aside{width:90%;display:flex;flex-flow:row wrap;max-width:1050px;justify-content:space-evenly;gap:1rem 0;margin:2rem auto 0;& figure{width:23%;flex-basis:23%;max-width:23%;display:flex;flex-direction:column;justify-content:space-between;& img{width:65%;margin:0 auto;height:auto;object-fit:contain}& figcaption{text-align:center;color:#033f35;font-weight:500;line-height:1.2;font-size:clamp(.5rem,3vw,1rem);margin-top:.8rem}&:first-child{& img{animation:floatingBubble 3s ease infinite}}&:nth-child(2){& img{animation:floatingBubble 3s ease .5s infinite}}&:nth-child(3){& img{animation:floatingBubble 3s ease 1s infinite}}&:nth-child(4){& img{animation:floatingBubble 3s ease 1.5s infinite}}}}}& .certificaciones-section{background:#e0eaf3;padding:2rem 0 4rem;display:flex;& .certificaciones-section__container{flex-flow:row wrap;display:flex;width:90%;margin:0 auto;max-width:1050px;&>span{font-weight:500;color:#182951;text-transform:uppercase;margin:0 auto;width:90%;display:flex;font-size:1rem}& .certificaciones-section__info{& h3{margin:1rem auto 0;font-size:clamp(1rem,3vw,1.4rem)}& h3,&>p{color:#182951;text-align:center}&>p{width:90%;line-height:1.2;font-size:1rem;margin:1.2rem auto 0;text-wrap-style:balance}}&>picture{width:70%;display:flex;margin:2rem auto 3rem;&>img{width:100%;height:auto;object-fit:contain;transition:all 1s ease;opacity:0;margin:0 auto;&.zoom-out-active{opacity:1}}}&>aside{width:85%;margin:0 auto;gap:4rem 0;display:flex;flex-flow:row wrap;justify-content:space-between;&>article{display:flex;flex-direction:column;gap:.5rem;position:relative;border-radius:1.5rem;align-items:center;flex-basis:100%;max-width:100%;filter:drop-shadow(0 45px 30px rgb(0 0 0/.35));padding-bottom:2rem;&>header{padding-bottom:.5rem;width:100%;&>figure{display:flex;flex-direction:column;& img{width:65%;height:5.7rem;margin:2rem auto;object-fit:contain}& figcaption{color:#fff;text-align:center;line-height:1.4;font-weight:500;font-size:clamp(.8rem,1vw,1.1rem);width:80%;margin:0 auto}}}&>p{color:#fff;text-wrap-style:pretty;width:80%;overflow:hidden;height:0;transition:all .3s ease;interpolate-size:allow-keywords;font-weight:400;line-height:1.4;text-align:center;font-size:clamp(.65rem,.7vw,.9em)}&.active{&>p{height:auto}&>button{& svg{transform:rotate(-180deg)}}}&>button{color:#182951;background:#fff;border-radius:50%;padding:.3rem;display:flex;align-items:center;justify-content:center;border:none;outline:none;position:absolute;bottom:-1.3rem;cursor:pointer;& svg{stroke:#182951;width:2rem;transition:all .4s ease-in-out}}&:first-of-type{background:#95afc9}&:nth-of-type(2){background:#6393c9}&:nth-of-type(3){background:#5c789b}}}}}& .brands-section{background:#fff;padding:2rem 0;& h3{color:#182951;font-size:1.2rem;text-align:center}& aside{display:flex;flex-flow:row wrap;max-width:1050px;width:90%;margin:2rem auto 0;justify-content:space-evenly;& figure{width:23%;flex-basis:23%;max-width:23%;display:flex;flex-direction:column;justify-content:space-between;& img{width:100%;margin:0 auto;object-fit:contain;border-radius:50%;height:6rem;transition:all .3s ease;&:hover{filter:drop-shadow(0 0 50px rgb(224 234 243));transform:scale(1.05)}}& figcaption{text-transform:uppercase;color:#182951;font-size:.8rem;text-align:center}}}}}@media (min-width:550px) and (max-width:850px){main{& .title-section{& picture{width:70%}>.title-section__sell-land{gap:2rem}}& .team-section{& .cards-container{width:80%;& .team-card{flex-basis:40%;max-width:40%;height:max-content}}}& .description-section{width:75%;& .progress-bar__container{& .circular-progress{& .progress-indicator{width:25px;height:25px}}}}& .certificaciones-section{& .certificaciones-section__container{width:80%;&>span{width:100%}& .certificaciones-section__info{max-width:100%;flex-basis:100%;& h3{margin:2rem 0;width:80%;line-height:1.2}& h3,&>p{text-align:left}&>p{margin:1rem 0 0}}&>picture{max-width:70%;flex-basis:70%}&>aside{margin-top:-5rem;width:100%;&>article{flex-basis:31%;max-width:31%;height:max-content;min-height:250px}}}}& .brands-section{& aside{width:75%;& figure{& img{width:65%}}}}}}@media (min-width:851px){main{& .title-section{& picture{width:55%}>.title-section__sell-land{gap:2rem}}& .team-section{& .cards-container{width:65%;& .team-card{flex-basis:25%;max-width:25%}}}& .description-section{width:65%;& .progress-bar__container{& .circular-progress{& .progress-indicator{width:25px;height:25px}}}}& .team-section{& .see-more__container{& img{width:100%;object-fit:fill}}}& .pilares-section{padding:3.5rem 0;& aside{width:75%;& figure{& img{width:40%}}}}& .certificaciones-section{& .certificaciones-section__container{width:65%;&>span{width:100%}& .certificaciones-section__info{max-width:38%;flex-basis:38%;& h3{margin:clamp(1rem,3vw,4rem) 0;width:65%;line-height:1.2}& h3,&>p{text-align:left}&>p{margin:1rem 0 0}}&>picture{max-width:55%;flex-basis:55%;margin-top:-2rem;&>img{width:80%}}&>aside{margin-top:0;justify-content:space-around;width:100%;&>article{flex-basis:47%;max-width:275px;height:max-content;min-height:250px}}}}& .brands-section{& aside{width:75%;& figure{& img{width:65%}}}}}}@keyframes floatingBubble{0%{transform:translateY(0)}50%{transform:translateY(-1rem)}to{transform:translateY(0)}}