@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lora:ital,wght@0,400..700;1,400..700&family=MonteCarlo&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
   margin:0;
  padding:0;
}


html {
  height: 100%;
  width: 100%;
  font-size:10px;
  scroll-behavior: smooth;
}

body {
  text-decoration:none;   
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: #000;
}
.section-label {
   font-family: "Lora", serif;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .2rem;
  font-weight: 400;
  line-height: 4rem;
}
h1, h2 {
  font-family: "MonteCarlo", cursive;
  font-size: 4rem;
  line-height: 3.6rem;
  font-weight: 100;
}
p {
  font-family: "Inter", sans-serif;
  font-size: 1.6rem;
  margin: 3rem 0;
  font-weight: 400;
}
blockquote {
font-size: 2rem;
font-family: "Inter", sans-serif;
font-weight: 300;
font-style: italic;
text-align: center;
max-width: 30rem;
width: 100%;
padding: 8rem 0 6rem 0;
margin: auto;
background-image: url("images/corchete-top.svg"), url("images/corchete-bottom.svg");
background-position: left top, right bottom;
background-repeat: no-repeat;
background-size: 8rem auto;
}
.bt-email {
font-size: 2rem;
font-family: "Inter", sans-serif;
font-weight: 500;
margin-top: 3rem;
display: block;
color: #000;
text-decoration: none;
hanging-punctuation: none;
}
/*HEADER*/

.header{
  position:fixed;
  top:0;
  width:100%;
  padding:2rem 8rem;
  transition:all .3s ease;
  z-index: 10;
}

.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.header.scrolled .header-inner{
  height:4rem;
}

/* logos */

.logo img{
  height:16rem;
}
.logo-dark{
  display:none;
}
.header.scrolled .logo img{
  height:3rem;
}

/* estado cuando haces scroll */

.header.scrolled{
  background:white;
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
}

.header.scrolled .logo-light{
  display:none;
}

.header.scrolled .logo-dark{
  display:block;
}



.menu{
  display:flex;
  align-items:center;
  gap:6rem;
}

.menu a{
  text-decoration:none;
  color:#000;
  font-family: "Lora", serif;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .2rem;
  font-weight: 400;
}

.menu-social  {
width: 4rem;
height: 4rem;
transition: transform .25s ease;
background-position: center center;
background-repeat: no-repeat;
background-size: 50% auto;
background-color: #FFF;
border-radius: 50%;
color: transparent !important;
}
.menu-social:hover  {
transform: scale(1.1);
box-shadow:0 10px 30px rgba(0,0,0,0.15);
}
.menu-social.fb  {
background-image:url("images/icon-fb.svg");
}
.menu-social.fb:hover  {
background-image:url("images/icon-fb-color.svg");
}
.menu-social.in  {
background-image:url("images/icon-in.svg");
}
.menu-social.in:hover  {
background-image:url("images/icon-in-color.svg");
}


/* Idioma */

.lang-dropdown{
  position:relative;
}

.lang-btn{
  background:none;
  border:solid .1rem #000;
  padding: .5rem;
  cursor:pointer;
  font-size: 1.2rem;
  
}

.lang-menu{
  position:absolute;
  top:120%;
  right:0;
  background:white;
  color:black;
  border-radius:6px;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
  padding:1rem 0;
  min-width:6rem;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:all .25s ease;
}

.lang-menu a {
  display:block;
  padding:.8rem 1.6rem;
  text-decoration:none;
}

.lang-menu a:hover{
  background:#FFF;
}

.lang-dropdown.active .lang-menu{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/*SLIDES */

main {
margin-top: 20rem;
}

.section {
  display:flex;
  position: relative;
  align-items:center;     /* centra verticalmente */
  padding:0 16rem;
  gap:6rem;
}

.col{
  width:50%;
}
.section-top {
  align-items:flex-start;
}

.inicio {
scroll-margin-top:20rem;
background-image: url("images/cinta-inicio.svg");
background-position: bottom left;
background-repeat: no-repeat;
background-size: 40% auto;
}
.descubrimiento {
background-image: url("images/cinta-descubrimiento.svg");
background-position: bottom right;
background-repeat: no-repeat;
background-size: 30% auto;
}
.permanencia {
background-image: url("images/cinta-permanencia.svg");
background-position: bottom right;
background-repeat: no-repeat;
background-size: 90% auto;
}
.col-permanencia-fix{
padding-top: 10rem;
}
.portafolio{
  background-color:#000;
  color:#FFF;
  z-index:2;
  flex-wrap:wrap;
  align-items:flex-start;
  scroll-margin-top:20rem;
}
.portafolio .col {
  width:calc(50% - 3rem);
}
.col-portafolio-fix {
margin-top: -10rem;
}
.contacto {
background-color: #c1ab98;
scroll-margin-top:8rem;
background-image: url("images/curve-contacto.svg?v=1.3");
background-position: top center;
background-repeat: no-repeat;
background-size: 100% auto;
}


.img-inicio img{
  display:block;
  margin-left:auto;
  margin-right:-16rem;
  width: 55rem;
}
.img-proceso img{
  display:block;
  margin-left:auto;
  margin-left:-16rem;
  width: 55rem;
}
.img-permanencia img{
  display:block;
  margin-left:auto;
  margin-right:-8rem;
  width: 45rem;
}
.img-contacto img{
  display:block;
  margin-left:auto;
  margin-left:-16rem;
  width: 60rem;
}

.curva {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
z-index: 2;
}
.curva img {
width: 100%;
display: block;
}



.colibri-inicio{
  position:relative;
}


.colibri-inicio::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 200px;
    background: url(images/colibri-inicio.jpg) no-repeat center;
    background-size: contain;
    left: -10rem;
    top: -12rem;
    z-index: -1;
}

.colibri-descubrimiento, .colibri-proceso {
position: absolute;
z-index: 2;
left:50%;
}
.colibri-descubrimiento img, .colibri-proceso img {
width: 100%;
}
.colibri-descubrimiento {
width: 20rem;
top: 0;
transform: translate(-50%, -50%);
}
.colibri-proceso {
width: 10rem;
bottom: 0;
transform: translate(-50%, 50%);
}
/* SLIDER*/


.slider {
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  width:100vw;
  display:flex;
  gap:2rem;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding:0 16rem;
  margin-bottom: 6rem;
}

.slider img{
  height:50rem;
  width:auto;
  flex-shrink:0;
}

.slider::-webkit-scrollbar{
  display:none;
}

.nav-arrows {
justify-content: flex-end;
display: flex;
gap:3rem;
}
.slider-prev, .slider-next {
width: 4rem;
height: 3rem;
color: transparent;
background-color: transparent;
outline:none;
border: none;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
background-image: url("images/bt-prev.svg");
}
.slider-next {
background-image: url("images/bt-next.svg");
}


/* FORM*/

.form-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.row {
  display: grid;
  gap: 1rem;
}

/* layouts forms */
.row-1 { grid-template-columns: 1fr; }
.row-2 { grid-template-columns: 1fr 1fr; }



.field_box, .area_box, .drop {
padding: 1rem;
background-color: #FFFF;
text-align: left;
width: 100%;
border-radius: 1rem;
border: none;
}
.field, .area {
	border: none;
	color:#000;
	width:100%;
	height: 3rem;
	text-decoration:none;
	font-size:1.4rem;
	background-color: transparent;
	outline:none;
    appearance:none;
	resize:none;
}
.area {
    height: 10rem;
}
.drop {
margin-top: 3rem;
appearance:none;
esize:none;
font-size:1.6rem;
height: 4rem;
background-image: url("images/down-arrow.svg");
background-position: right 2rem center;
background-repeat: no-repeat;
background-size: 2rem auto;
outline: none;
font-weight: 500;
}
.send {
background-color: transparent;
outline:none;
cursor: pointer;
appearance:none;
resize:none;
height: 3rem;
width: 100%;
color: transparent;
text-decoration: none;
border: none;
background-position: right center;
background-repeat: no-repeat;
background-size: auto 100%;
background-image: url(images/icon-send.svg);
display: flex;
box-sizing: border-box;
}




@media (max-width:1200px){

.section{
  padding:0 8rem;
}

.slider{
  padding:4rem 8rem 0 8rem;
}

.img-inicio img,
.img-proceso img,
.img-permanencia img,
.img-contacto img{
  margin-right:0;
  margin-left:0;
}

}


@media (max-width:900px){

.section{
  flex-direction:column;
}

.col{
  width:100%;
}

.portafolio .col{
  width:100%;
}

.menu{
  gap:3rem;
}

.logo img{
  height:10rem;
}

main{
  margin-top:14rem;
}

}


@media (max-width:600px){

html{
  font-size:9px;
}

.section{
  padding:0;
  gap:3rem;
}
.txt-mob {
text-align: center;
padding: 3rem;
}
.header{
  padding:2rem 3rem;
}

.menu{
  gap:2rem;
}

h1, h2{
  font-size:3.4rem;
  line-height:3.2rem;
}

.slider{
  padding:4rem 3rem 0 3rem;
}

.slider img{
  height:32rem;
}

blockquote{
  padding:6rem 0;
}
img{
  max-width:100%;
  height:auto;
}


.menu-link{
  display:none;
}

.menu{
  gap:2rem;
}

.logo img{
  height:6rem;
}

.header{
  padding:2rem 3rem;
}

#contacto{
  flex-direction: column-reverse;
  padding-top: 4rem;
}


.colibri-descubrimiento {
    transform: translate(-50%, 0%);
}
.col-portafolio-fix {
    margin-top: 0;
}
.nav-arrows {
    justify-content: center;
}
.logo-light {
height: 10rem !important;
}
.logo-dark {
height: 2rem !important;
}

.inicio {
background-image:none;
}
.descubrimiento {
background-image:url("images/cinta-mobile.svg");
background-position: top 5rem center;
background-size: 100% auto;
padding-top: 25rem;
}

.img-permanencia {
margin-bottom: -4rem;
}

.colibri-inicio {
padding-bottom: 0 !important;
}

.col-permanencia-fix {
margin-top: 10rem;
}
.col-proceso-fix {
margin-bottom: 10rem;
}
.permanencia {
    background-size: 300% auto;
}


}