:root {

  /**
   * coloress
   */
  --green: #bed965; 
  --grey: #d3d3d3;
  --white: hsl(0, 0%, 100%);
  --black: #212121;

  /**
   * tipografia
   */

  --ff-Syne: 'Syne', sans-serif;
  
  --headline-lg: 5rem;
  --headline-md: 3rem;
  --headline-sm: 2rem;
  --title-lg: 1.8rem;
  --title-md: 1.5rem;
  --title-sm: 1.4rem;
  
  --fw-500: 500;
  --fw-700: 700;



  --section-padding: 120px;



  --shadow-1: 0px 2px 20px hsla(209, 36%, 72%, 0.2);
  --shadow-2: 0 4px 16px hsla(0, 0%, 0%, 0.06);



  --radius-circle: 50%;
  --radius-12: 12px;
  --radius-6: 6px;
  --radius-4: 4px;

  /**
   * transition
   */

  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease;
  --transition-3: 1s ease;
  --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
  --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97);

}


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

li { list-style: none; }

a,
img,
span,
time,
input,
button,
ion-icon { display: block; }

a {
  color: inherit;
  text-decoration: none;
}

img { height: auto; }

input,
button {
  background: none;
  border: none;
  font: inherit;
}

input {
  width: 100%;
  outline: none;
}

button { cursor: pointer; }

ion-icon { pointer-events: none; }

address { font-style: normal; }

html {
  font-size: 10px;
  font-family: var(--ff-Syne);
  scroll-behavior: smooth;
}

body {
  background-color: var(--black);
  font-size: 1.6rem;
  color: var(--white);
  line-height: 1.8;
  overflow: hidden;
}

body.loaded { overflow-y: visible; }

body.nav-active { overflow: hidden; }




.container { padding-inline: 16px; }

.headline-lg {
  font-size: var(--headline-lg);
  color: var(--white);
  font-weight: var(--fw-500);
  line-height: 1.2;
}

.headline-md {
  font-size: var(--headline-md);
  font-weight: var(--fw-700);
}

.headline-lg,
.headline-md { font-family: var(--ff-Syne); }

.headline-md,
.headline-sm { line-height: 1.3; }

.headline-md,
.headline-sm { color: var(--midnight-green); }

.headline-sm { font-size: var(--headline-sm); }

.title-lg { font-size: var(--title-lg); }

.title-md { font-size: var(--title-md); }

.title-sm { font-size: var(--title-sm); }

.social-list { display: flex; }

.section { padding-block: var(--section-padding); }

.has-before,
.has-after {
  position: relative;
  z-index: 1;
}

.has-before::before,
.has-after::after {
  content: "";
  position: absolute;
}
.btns {
  position: relative;
  background-color: transparent;
  color: #fff;
  font-weight: 500;
  font-size: 1.4rem;
  padding: 4px 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  clip-path: polygon(27px -18.93%, 102.08% -5.58%, 102.5% 35.81%, 90.49% 132.96%, 0% 105.47%, -3.53% 78.94%);
  border: 1px solid #fff;
  transition: all 0.5s ease;
}

.btns::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #fff;
  clip-path: polygon(38px -48.14%, -2.61% 72.17%, 1.98% 149.32%, 91.19% 130.22%, 103.81% 23.05%, 114.08% 157.45%, -18px 115.15%, 4px -8px);
  pointer-events: none;
  transition: all 0.5s ease;
}
.btns:focus,.btns:hover{
  color: var(--black);
  border: 1px solid var(--black);
}

.btns-t {
  position: relative;
  background-color: transparent;
  color: #fff;
  font-weight: 200;
  padding: 0px 15px;
  margin-left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  clip-path: polygon(34px -54.65%, 102.08% -5.58%, 116.68% 26.07%, 70.23% 139.45%, 0% 105.47%, -11.63% 62.7%);
  border: 1px solid #fff;
  transition: all 0.5s ease;
}

.btns-t::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #fff;
  clip-path: polygon(146.13% -12.68%, 61.23% 162.82%, 118.36% 20.47%, 105.04% -19.25%, 28.12% -41.90%, -0.9rem 59.6%, -0.1rem -1.5rem);
  pointer-events: none;
  transition: all 0.5s ease;
}

.btns-t:hover,.btns-t:focus{
  color: var(--black);
  border: 1px solid var(--green);
  background-color: var(--green);
}
.btn-green {
  position: relative;
  background-color: var(--green);
  color: var(--black);
  font-weight: 500;
  padding: 5px 30px;
  margin-left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  clip-path: polygon(36px -44.23%, 101.7% -43.77%, 107.47% -1.72%, 88.27% 129.04%, 3.07% 126.3%, -6.64% 83.53%);
 
  transition: all 0.5s ease;
}



.btn-green:hover,.btn-green:focus{
  
  background-color: var(--white);
}

.btn-blanco {
  position: relative;
  background-color: var(--white);
  color: var(--black);
  font-weight: 500;
  padding: 5px 50px;
  margin-left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  clip-path: polygon(36px -44.23%, 101.7% -43.77%, 107.47% -1.72%, 88.27% 129.04%, 3.07% 126.3%, -6.64% 83.53%);
 
  transition: all 0.5s ease;
}



.btn-blanco:hover,.btn-blanco:focus{
  
  background-color: var(--green);
}

.btns:hover::before,
.btns:focus::before {
  background-color: var(--black);
}
.btns-t:hover::before,
.btns-t:focus::before {
  background-color: var(--green);
}
.btn {
  position: relative; /* Necesario para posicionar el pseudo-elemento */
  background-color: transparent;
  border: 1px solid #fff; /* Borde original */
  color: var(--white);
  font-weight: var(--fw-700);
  padding: 12px 36px;
  display: flex;
  align-items: center;
  gap: 8px;
    clip-path: polygon(10px 0, 100% 0, 100% 90px, 90px 100%, 0 100%, 0 10px);
}



.btn:is(:hover, :focus-visible)::before { transform: translateX(100%); }

.w-100 { width: 100%; }

.grid-list {
  display: grid;
  gap: 40px 28px;
}

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

[data-reveal] {
  opacity: 0;
  transition: var(--transition-2);
}

[data-reveal].revealed { opacity: 1; }

[data-reveal="bottom"] { transform: translateY(50px); }

[data-reveal="bottom"].revealed { transform: translateY(0); }

[data-reveal="left"] { transform: translateX(-50px); }

[data-reveal="right"] { transform: translateX(50px); }

[data-reveal="left"].revealed,
[data-reveal="right"].revealed { transform: translateX(0); }





/*-----------------------------------*\
  #PRELOADER
\*-----------------------------------*/


.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #ffffff89;
  backdrop-filter: blur(13px);
  display: grid;
  place-items: center;
  z-index: 6;
  transition: var(--transition-1);
}

.preloader.loaded {
  visibility: hidden;
  opacity: 0;
}

.preloader .circle {
  width: 50px;
  height: 50px;
  border: 4px solid var(--white);
  border-radius: var(--radius-circle);
  border-block-start-color: transparent;
  animation: rotate360 1s ease infinite;
}

@keyframes rotate360 {
  0% { transform: rotate(0); }
  100% { transform: rotate(1turn); }
}





/*-----------------------------------*\
  #HEADER
\*-----------------------------------*/

.header .btn { display: none; }

.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-block: 16px;
  z-index: 4;
}

.header.active {
  position: fixed;
  background-color: #00000057;
  animation: headerActive 0.5s ease forwards;
  backdrop-filter: blur(13px);
}

@keyframes headerActive {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.icon{
  width: 65px;
  fill: var(--white);
}


.nav-open-btn {
  color: var(--white);
  font-size: 4rem;
}

.navbar,
.overlay {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
}

.navbar {
  right: -300px;
  max-width: 300px;
  backdrop-filter: blur(20px);
  z-index: 20;
  transition: 0.25s var(--cubic-in);
  visibility: hidden;
}

.navbar.active {
  transform: translateX(-300px);
  visibility: visible;
  transition: 0.5s var(--cubic-out);
}

.navbar-top {
  position: relative;
  padding-inline: 25px;
  padding-block: 55px 100px;
}

.nav-close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  color: var(--white);
  font-size: 2.8rem;
}

.navbar-list {
  margin-block-end: 30px;
  border-block-end: 1px solid var(--white_a10);
}

.navbar-item { border-block-start: 1px solid var(--white_a10); }

.navbar-link {
  text-transform: uppercase;
  padding: 10px 24px;
}
.cons{
  display: flex;
  align-items: center;
}
.social-list {
  justify-content: center;
  gap: 20px;
  color: var(--white);
  font-size: 1.8rem;
}

.overlay {
  right: -100%;
  background-color: var(--black);
  opacity: 0.3;
  visibility: hidden;
  transition: var(--transition-2);
  z-index: 2;
}

.overlay.active {
  transform: translateX(-100%);
  visibility: visible;
}

/*-----------------------------------*\
  #INDEX
\*-----------------------------------*/
.i1{
  height: 110dvh;
  position: relative;
  overflow: hidden;
}
.i2{
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.i3 {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: end;
  overflow: hidden;
  justify-content: center;
}

.i4 {
  height: auto;
  width: max-content;
  display: block; 
}

.i3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%; 
  background: linear-gradient(to bottom, transparent, #212121);
  pointer-events: none; 
}
.i5 {
  font-size: 4rem;
  text-align: inherit;
  line-height: 1.1;
}
.i6{
  margin-top: 60px;
}
.i7{
  font-size: 2.3rem;
  line-height: 1.1;
  color: var(--green);
  text-align: center;
}
.i8{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 60px;
  margin-top: 100px;
  justify-items: center;
}
.i9{
  position: relative;
  width: 330px;
  padding: 35px 30px 95px 30px;
  background-color: var(--green);
  clip-path: polygon(62px -1px, 100% 0px, 330px 84.86%, 85.81% 99.71%, 0px 100%, -1px 53px);
  max-height: 380px;
  transition: all 0.5s ease;
}
.i9::before{
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(64px 5px, 98.50% 5px, 98.62% 84%, 285px 98.27%, 5px 98.56%, 5px 55px);
  pointer-events: none;
}

.i9::before {
  background: var(--black); 
  z-index: -1;
  inset: -2px; 
  transition: all 0.5s ease;
}
.i9:focus,.i9:hover{
 color: var(--green);
}
.i9:hover::before,
.i9:focus::before {
  background: #272727;
}
.i10a{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px;
}
.i10{
  width: 84px;
}
.i11{
  font-size: 1.3rem;
}
.i12{
  margin-top: 10px;
  font-size: 1.4rem;
  line-height: 1.5rem;
}
.i13{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
}
.i14{
  position: absolute;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.i15{
  width: auto;
  height: 102%;
}
.i15a{
  position: absolute;
  top: 95%;
  left: 80%;
  transform: translate(-65%, -50%);
  width: 300px;
  z-index: 1;
}
.i16{
  color: var(--black);
  display: flex;
  justify-content: end;
}
.i16a{
  width: 100%;
  padding: 30px;
}
.i17{
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 30px;
}
.i18{
  font-size: 1.3rem;
  margin-bottom: 15px;
}
.i19{
  text-align: center;
  font-size: 2.3rem;
  line-height: 1.1;
}
.i20{
  margin-top: 50px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.i21{
  width: 100%;
  padding: 20px;
}
.i22{
  font-size: 1.6rem;
  line-height: 1.1;

}
.i23{
  width: 100%;
  padding: 0;
  gap: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.i24{
  width: 200px;
  height: 250px;
  margin-top: 42px;
  display: flex;
  align-items: center;
  justify-content: left;
  overflow: hidden;
  background-color: var(--green);
  clip-path: polygon(19% -0.2%, 100.5% -0.4%, 100.5% 84.86%, 82.81% 100.51%, 0% 100%, 0.00% 15.40%);
}
.i25{
  width: 560px;
  margin-left: -50px;
  margin-top: -50px;
  clip-path: polygon(15.75% 24.25%, 44.33% 24.31%, 44.32% 79.32%, 38.45% 88.75%, 9.25% 88.71%, 9.25% 34%);
}
.i26{
  position: relative;
  width: 200px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  background-color: var(--green);
  clip-path: polygon(19% -0.2%, 100.5% -0.4%, 100.5% 84.86%, 82.81% 100.51%, 0% 100%, 0.00% 15.40%);
  
}
.i27{
  clip-path: polygon(59.5% 4.92%, 99.5% 4.72%, 99.5% 81.94%, 91.31% 95.02%, 50.50% 95.25%, 50.5% 18.32%);
  width: 400px;
}

.i28{
  background-color: #fff;
  color: var(--black);
}
.i29{
  text-align: center;
  font-size: 2.2rem;
  line-height: 1.1;
  margin-bottom: 30px;
}
.i30{
  text-align: center;
  font-size: 1.5rem;
}
.i31{
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  padding-block: 10%;
}
.i32{
  width: 33%;
}
.i33{
  width: 100%;
}
.i34{
  position: absolute;
  z-index: 3;
  width: 40%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  clip-path: polygon(7.49% -0.09%, 99.93% 0.02%, 100.15% 87.89%, 94.31% 100.02%, -0.01% 99.95%, -0.01% 10.81%);

}
.i35{
  width: 100%;
}
.i36{
  width: 33%;
}
.i37{
  width: 100%;
}
.i38{
  display: flex;
  align-items: center;
  justify-content: center;
}

.i39{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}
.i40{
  width: 100%;
}
.i41{
  font-size: 2.6rem;
  line-height: 1.1;
}
.i42{
margin-top: 80px;
padding-left: 40px;
}
.i43{
  font-size: 1.3rem;
  line-height: 1.1;
}
.i44{
  padding-left: 20px;
  font-size: 1.3rem;
  line-height: 1.13;
  margin-top: 20px;
}
.i45{
  list-style: inside;
}
.i43a{
  font-size: 1.3rem;
  line-height: 1.1;
  margin-top: 30px;
}

.i46{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
}

.i48{
  width: 130%;
}
.i49{
  width: 100%;
}
.i50{
  background-color: #fff;
  color: var(--black);

}
.i50a{
  text-align: center;
  font-size: 2.5rem;
  line-height: 1.2;
}
.i51{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-block: 40px;
}
.i52{
  color: var(--green);
  font-size: 20px;
}
.i53{
  position: relative;
  width: 80%;
  height: unset;
  margin-left: 9px;
  margin-right: 9px;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-block: 15px;
  background-color: var(--green);
  clip-path: polygon(99.99% -0.3%, 99.96% 64.57%, 89.82% 100.15%, 0.04% 100.09%, -0.04% 28.96%, 11.32% -0.34%);
}
.i53::before{
  content: "";
  position: absolute;
  inset: 0;
  background-color: #fff;
  clip-path: polygon(11.45% 1.34%, 99.32% 1.71%, 99.05% 65.22%, 89.47% 97.93%, 0.6% 98.8%, 0.52% 30.18%);
  pointer-events: none;
  z-index: -1;
}
.i54{
  font-weight: 600;
}
.i55{
  width: 80%;
  font-size: 1.1rem;
  line-height: 1.1;
}
.i56{
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.i57{
  font-size: 0.75rem;
  color: #a5a5a5;
  cursor: pointer;
}
.i57-active{
  color: #212121;
}
.testimonial {
  display: none;
}

.testimonial.active {
  display: contents;
}

.testimonio{
  width: 100%;
  padding-block: 60px;
  display: flex;
  gap: 10px;
  flex-direction: column;
  align-items: center;
}
.testimonio-vid{
  width: 100%;
  
}
/*-----------------------------------*\
  #NOSOTROS JP
\*-----------------------------------*/

.n0{
  background-color: #fff;
  overflow: hidden;
}
.n1{
  margin-top: 0;
  text-align: center;
  font-size: 5rem;
  line-height: 1.1;
  color: var(--black);
}
.n2{
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.1;
  font-weight: 500;
  color: var(--black);
}
.n3{
  position: relative;
  width: 100%;
  height: 500px;
  margin-top: 0;
}
.n4{
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.n5{
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.n6{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.n7{
  width: 100%;
  height: 60vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}
.n7a{
  width: 100%;
}
.n8{
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}
.n9{
  width: inherit;
  height: 60vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.n99{
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  transition: all 0.5s ease;
}
.n9a{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.n9b{
  position: absolute;
  background-color: #212121b6;
  padding: 30px;
  bottom: 0;
 
}
.n99:hover,.n99:focus{
 opacity: 1;
}
.n9c{
  font-size: 1.3rem;
  line-height: 1.1;
}
.n10{
  display: flex;
  flex-direction: column;
  gap: 10vw;
}
.n11{
  text-align: center;
}
.n12{
  font-size: 4.5rem;
  color: var(--green);
}
.n13{
  margin-top: 20px;
  font-size: 1.4rem;
  line-height: 1.1;
}
.n14{
  text-align: center;
}
.n15{
  font-size: 4.5rem;
  color: var(--green); 
}
.n16{
  margin-top: 20px;
  font-size: 1.4rem;
  line-height: 1.1;
}
.n17{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.n18{
  width: 75vw;
  height: 65vh;
 overflow: hidden;
  background-color: var(--green);
  clip-path: polygon(14.59% -0.19%, 100% -0.03%, 99.75% 91.19%, 87.23% 100.11%, -0.08% 100.11%, -0.16% 7.88%);

}
.n18b{
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  clip-path: polygon(14.9% 0.68%, 98.76% 0.62%, 98.82% 90.75%, 87.23% 99.24%, 0.85% 99.24%, 1.07% 8.1%);
}
.n19{
  width: 800px;
}
.n20{
  margin-left: 40px;
}
.n21{
  font-size: 2.5rem;
  line-height: 1.3;
  margin-bottom: 60px;
  margin-top: 60px;
}
.n22{
  font-size: 1.5rem;
  line-height: 1.1;
  margin-top: 20px;
}
.n23{
  font-size: 2rem;
  line-height: 1.2;
  text-align: center;
}
.n24{
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  align-items: center;
  justify-content: center;
}
.n25{
  width: 100%;
}
.n26{
  font-size: 1.6rem;
  line-height: 1.1;
}
.n28{
  width: 100%;
  position: relative;

}
.n29{
  width: 100%;
}
.n30{
  position: absolute;
  z-index: 1;
  background-color: var(--green);
  width: 230px;
  height: 250px;
  overflow: hidden;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  clip-path: polygon(14.59% -0.19%, 100% -0.03%, 99.75% 91.19%, 87.23% 100.11%, -0.08% 100.11%, -0.16% 11.59%);
}
.n31{
  overflow: hidden;
  width: 100%;
  height: 100%;
  clip-path: polygon(14.59% 0.95%, 99.09% 0.83%, 99.24% 89.82%, 87.23% 98.97%, 0.83% 98.97%, 0.75% 12.17%);
}
.n32{
  width: 600px;
}
.n33{
  width: 80%;
  position: absolute;
  z-index: 2;
  top: 60%;
  left: 70%;
  transform: translate(-50%, -50%);
}
.n34{
  color: var(--green);
  font-size: 3rem;
  line-height: 1.2;
  text-align: center;
}
.n35{
  color: var(--black);
  font-size: 1.7rem;
  font-weight: 500;
  text-align: center;
  margin-top: 30px;
}
.n36{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 100px;
}
.n37{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 50px;
}
.n38a{
  background-color: var(--green);
  width: 100%;
  max-width: 330px;
  height: 260px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(14.59% -0.19%, 100% -0.03%, 99.87% 99.71%, -0.08% 100.11%, -0.16% 11.59%);
}
.n38{
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: all 0.5s ease;
}
.n38:focus,.n38:hover{
  height: 110%;
  width: 110%;
}
.n39{
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  color: var(--black); 
}
.n40{
  font-size: 1.6rem;
  line-height: 1;
  color: var(--green);
}


/*-----------------------------------*\
  #TERRENOS E
\*-----------------------------------*/

.div-portada-terrenos {
  height: 100vh;
  position: relative;
  overflow: hidden;
 }
 .portada-terrenos {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden; 
}
 .shadow-portada-terrenos::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: linear-gradient(to bottom, transparent, #fff);
 }
.contenido-portada-terrenos {
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.texto-portada-terrenos {
  font-size: 5rem;
  text-align: center;
  line-height: 5.1rem;
}
.arrow-icon {
  margin-top: 50px;
  width: 70px;
  filter: invert(1);
  transition: all 500ms ease;
}
.arrow-icon:hover {
  opacity: 0;
}
.terrenos-section {
  background: white;
}
.terreno-carts {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 5%
}
.terreno-carts2 > .terreno-cart {
  margin-top: 0;
  margin-bottom: 0;
}
/* .terreno-cart {
  position: absolute;
} */

.terreno-cart {
  position: relative;
}
.terreno-image-hover {
  background-color: var(--green);
  position: relative;
  width: 100%;
  height: 250px;
  display: flex;
  font-size: 30px;
  font-weight: bold;
  justify-content: center;
  align-items: center;
  clip-path: polygon(100% 0%, 100% 80%, 90% 100%, 0% 100%, 0% 20%, 10% 0%);
  opacity: 0;
  transition: all 500ms ease;
}
.terreno-image-hover:hover {
  opacity: 0.8;
}
.terreno-cart-image {
  position: absolute;
  width: 100%;
  height: 250px;
  object-fit: cover;
  clip-path: polygon(100% 0%, 100% 80%, 90% 100%, 0% 100%, 0% 20%, 10% 0%);
}
.terreno-cart > h2 {
  color: black;
  text-align: center;
  margin-top: 40px;
  margin-bottom: 20px;
}
.terreno-cart > p {
  color: black;
  text-align: justify;
  line-height: 20px;
}
.separator-subtitle {
  color: black;
  text-align: center;
  margin-top: 480px;
  margin-bottom: 70px;
}
.terrenos-video {
  width: 100%;
}
.subtitle-h2 {
  color: black;
  font-size: 3.5rem;
  line-height: 1.2;
  text-align: center;
  margin-top: 120px;
}
.subtitle-h3 {
  color: black;
  text-align: center;
  font-size: 30px;
  margin-top: 120px;
  margin-bottom: 120px;
}
.subtitle-text {
  color: black;
  text-align: center;
  line-height: 1;
}
.benefits-carts {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 40px;
  width: 100%;
  margin-top: 120px;
}
.benefit-cart-border {
  background-color: var(--green);
  width: 100%;
  clip-path: polygon(100% 0%, 100% 80%, 80% 100%, 0% 100%, 0% 20%, 20% 0%);
}
.benefit-cart {
  color: black;
  font-size: 12px;
  background-color: white;
  width: 98.5%;
  height: 98.5%;
  margin: 2px 0 0 2px;
  padding: 50px 30px 30px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 15px;
  clip-path: polygon(100% 0%, 100% 80%, 80% 100%, 0% 100%, 0% 20%, 20% 0%);
  transition: all 500ms ease;
}
.benefit-cart:hover {
  background-color: #f7f2f2;
}
.benefit-cart-image {
  width: 30%;
  text-align: center;
}
.benefit-cart-title {
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}
.map-container {
  background-color: var(--green);
  width: 100%;
  height: 500px;
}
.agendar-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.agendar-button {
  color: black;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  margin-top: 120px;
  background-color: var(--green);
  padding: 5px 0 5px 0;
  clip-path: polygon(100% 0%, 100% 60%, 92% 100%, 0% 100%, 0% 40%, 8% 0%);
  transition: all 500ms ease;
}
.agendar-button:hover {
  background-color: white;
}
.proyectos-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
}
 .proyecto-card {
  color: black;
 }
.proyecto-image {
  background-color: var(--green);
  width: 100%;
  height: 250px;
  clip-path: polygon(100% 0%, 100% 85%, 90% 100%, 0% 100%, 0% 15%, 10% 0%);
}
.proyecto-title {
  font-size: var(--title-lg);
  font-weight: bold;
  text-align: center;
  margin-top: 20px;
}
.proyecto-date {
  text-align: center;
  color: var(--green);
  font-size: 15px;
}

/*-----------------------------------*\
  #SERVICIOS JP
\*-----------------------------------*/
.s0{
  background-color: #fff;
  height: 90dvh;
}
.s1{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s2{
  font-size: 5rem;
  line-height: 1.1;
  color: var(--black);
  text-align: center;
}
.s0a{
  background-color: #fff;
  color: var(--black);
}
.s3{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.s4{
  display: flex;
  justify-content: right;
  align-items: center;
  position: relative;
  width: 100%;

}
.s4b{
  display: flex;
  justify-content: left;
  align-items: center;
  position: relative;
  width: 100%;
}

.s5{
  width: 200px;
  height: 260px;
  overflow: hidden;
  background-color: var(--green);
}
.s6{
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
.s7{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.s78{
  width: 100%;
  display: flex;
  justify-content: center;
}
.s7a{
  width: 50px;
}
.s8{
  color: var(--black);
  width: 80%;
  position: absolute;
  padding: 15px;
  backdrop-filter: blur(10px);
  background-color: #ffffffb2;
  right: 25%;
  
}
.s8b{
  color: var(--black);
  width: 80%;
  position: absolute;
  padding: 15px;
  backdrop-filter: blur(10px);
  background-color: #ffffffb2;
  left: 25%;
}
.s9{
  font-size: 1.4rem;
}
.s10{
  font-size: 1rem;
}

.main-container-blog {
  background-color: white;
}
.div-portada-blog {
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.contenido-portada-blog {
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}
.texto-portada-blog {
  color: var(--black);
  font-size: 4rem;
}

.btns-t-blog {
  position: relative;
  background-color: transparent;
  color: #000;
  font-weight: 200;
  padding: 0px 15px;
  margin-left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  clip-path: polygon(34px -54.65%, 102.08% -5.58%, 116.68% 26.07%, 70.23% 139.45%, 0% 105.47%, -11.63% 62.7%);
  border: 1px solid #000;
  transition: all 0.5s ease;
}

.subtexto-titulo-blog {
  color: black;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}

.subtexto-titulo-blog-iconos {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
  margin-top: 20px;
}

.social-list-header-blog {
  filter: invert(1);
}

.social-list-header-blog > li >.social-link > ion-icon {
  font-size: 40px;
}

.articulos-section-blog {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 60px;
}

.articulo-blog {
  position: relative;
  color: var(--black);
  width: auto;
}

.articulo-image-hover {
  background-color: var(--green);
  color: white;
  position: relative;
  width: 100%;
  height: 300px;
  display: flex;
  font-size: 30px;
  font-weight: bold;
  justify-content: center;
  align-items: center;
  clip-path: polygon(100% 0%, 100% 85%, 90% 100%, 0% 100%, 0% 15%, 10% 0%);
  opacity: 0;
  transition: all 500ms ease;
}

.articulo-image-hover:hover {
  opacity: 0.8;
}

.imagen-articulo-blog {
  position: absolute;
  width: 100%;
  height: 300px;
  clip-path: polygon(100% 0%, 100% 85%, 90% 100%, 0% 100%, 0% 15%, 10% 0%);
}

.titulo-articulo-blog {
  text-align: center;
  margin-top: 25px;
  line-height: 25px;
  transition: all 500ms ease;
}

.titulo-articulo-hover:hover {
  color: var(--green);
}

.descripcion-articulo-blog {
  text-align: justify;
  line-height: 20px;
  margin-top: 20px;
}

.fecha-duracion-articulo-blog {
  text-align: center;
  margin-top: 10px;
  opacity: 0.7;
  font-size: 15px;
}



.btns-t-blog::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000;
  clip-path: polygon(146.13% -12.68%, 61.23% 162.82%, 118.36% 20.47%, 105.04% -19.25%, 28.12% -41.90%, -0.9rem 59.6%, -0.1rem -1.5rem);
  pointer-events: none;
  transition: all 0.5s ease;
}

/*-----------------------------------*\
  #CONTACTO E
\*-----------------------------------*/
.contenido-portada-contacto {
  height: 100vh;
  color: var(--black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.texto-portada-contacto {
  font-size: 3rem;
  text-align: center;
  line-height: 1.1;
}

.btn-green-contacto {
  background-color: var(--green);
  margin-top: 50px;
  font-size: 1.2rem;
  padding: 5px 15px;
  clip-path: polygon(100% 0%, 100% 70%, 97% 100%, 0% 100%, 0% 25%, 3% 0%);
  transition: all 500ms ease;
}

.btn-green-contacto:hover {
  background-color: #fff;
}

.subtitle {
  text-align: center;
  color: var(--black);
}

.formulario-container-main {
  margin-top: 100px;
}

.green-border-formulario {
  background-color: var(--green);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 1600px;
  clip-path: polygon(100% 0%, 100% 93%, 95% 100%, 0% 100%, 0% 7%, 5% 0%);
}

.formulario-container {
  width: 99.6%;
  height: 99.6%;
  background-color: #fff;
  padding: 50px 10px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 100px;
  color: var(--black);
  clip-path: polygon(100% 0%, 100% 93%, 95% 100%, 0% 100%, 0% 7%, 5% 0%);
}

.campo > label {
  font-weight: bold;
  margin-left: 15px;
}

.campo > input {
  background-color: var(--grey);
  padding: 7px 20px;
  margin: 10px 0;
  font-size: 15px;
}

.textarea-mensaje {
  display: block;
  width: 100%;
  height: 170px;
  resize: none;
  background-color: var(--grey);
  border: none;
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 15px;
  font-family: var(--ff-Syne);
  outline: none;
}

.submit-button {
  cursor: pointer;
  width: 60%;
  margin: 40px auto;
  clip-path: polygon(100% 0%, 100% 60%, 94% 100%, 0% 100%, 0% 40%, 6% 0%);
}

.mapa {
  width: 100%;
  height: 300px;
  margin-top: 40px;
}

.informacion-contacto {
  margin-top: 50px;
  line-height: 20px;
}

.texto-informacion-contacto {
  margin-bottom: 15px;
}

.titulo-informacion {
  font-weight: bold;
  margin-bottom: 40px;
}

.subtitle-preguntas {
  margin: 120px 0;
}

/* accordion */
.accordion {
  background-color: #fff;
  color: var(--black);
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  border-bottom: solid var(--green) 1px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.active/* , .accordion:hover */ {
  border-bottom: none;
  font-weight: bold;
}

.arrow-down {
  width: 30px;
  color: var(--black);
  transition: all 200ms;
}

.rotate-arrow {
  rotate: 180deg;
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.1s ease-out;
  color: var(--black);
  border-bottom: solid var(--green) 1px;
}



/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

.footer {
  color: var(--white);
  background-color: var(--black);
  padding-block: 50px;
}
.info-footer{
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1.4rem;
  margin-top: 15px;
  line-height: 1.1;
  margin-bottom: 100px;
  text-align: center;
  gap: 30px;
}
.f0{
  width: 100%;
}
.icon-footer{
    width: 105px;
    fill: var(--white);
    margin-bottom: 30px;
  
}
.f1{
  font-size: 1.4rem;
  margin-top: 15px;
  line-height: 1.1;
}
.f2{
  width: 100%;
}
.f3{
  font-size: 2rem;
}
.f4{
  margin-top: 20px;
}
.f5{
  margin-top: 15px;
}
.f5a{
  color: #fff;
  transition: all 0.5s ease;
}
.f5a:hover,.f5a:focus{
  margin-left: 5px;
  color: var(--green);
}

.f7{
  font-size: 2rem;
  margin-bottom: 20px;
}
.f8{
  margin-bottom: 20px;
}
.f9{
  display: flex;
  margin-bottom: 20px;
  align-items: baseline;
  gap: 1px;
  justify-content: center;
}
.f10{
  font-size: 1.3rem;
  transition: all 0.5s ease;
}
.f10:focus,.f10:hover{
  font-size: 1.4rem;
  color: var(--green);
}

.f12{
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.f14{
  font-size: 30px;
  color: #fff;
  transition: all 0.5s ease;
}
.f14:hover,.f14:focus{
  color: var(--green);
}
/*-----------------------------------*\
  #BACK TO TOP
\*-----------------------------------*/
.back-top-btns {
  position: fixed;
  bottom: 100px;
  right: 30px;
  background: linear-gradient(90deg, #25D366, #128C7E);
  color: var(--white);
  padding: 9px;
  font-size: 4rem;
  border-radius: var(--radius-circle);
  transition: var(--transition-1);
  opacity: 1;
  z-index: 3;
}
.back-top-btns:hover, .back-top-btns:focus{
    font-size: 4.5rem;
}
.back-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: var(--green);
  color: var(--white);
  padding: 16px;
  font-size: 2rem;
  border-radius: var(--radius-circle);
  transition: var(--transition-1);
  opacity: 0;
  z-index: 3;
}

.back-top-btn:is(:hover, :focus-visible) { background-color: var(--eerie-black); }

.back-top-btn.active {
  transform: translateY(-10px);
  opacity: 1;
}





/*-----------------------------------*\
  #MEDIA 
\*-----------------------------------*/

@media (min-width: 768px) {
  :root {
    --headline-lg: 8rem;
    --headline-md: 4.8rem;

  }
  .container {
    max-width: 750px;
    width: 100%;
    margin-inline: auto;
  }

  .header .btn { display: block; }

  .nav-open-btn { margin-inline-start: auto; z-index: 1; }

  .header .container { gap: 40px; }

  .btns {
    font-size: 1.6rem;
  }

}




@media (min-width: 992px) {


  .container { max-width: 940px; }
  .i5{
    font-size: 5rem;
    text-align: center;
    line-height: 5.1rem;
  }
  .i3 {
    align-items: center;
    justify-content: unset;
  }
  .i7{
    font-size: 4rem;
    line-height: 4.2rem;
    color: var(--green);
    text-align: center;
  }
  .i8{
    grid-template-columns: repeat(3, 1fr);
    justify-items: unset;
    gap: 30px
  }
  .i9 {
    width: 300px;
    clip-path: polygon(62px -1px, 100% 0px, 300px 85.39%, 85.81% 99.71%, 0px 100%, -1px 53px);
    
  }
  .i9::before {
    clip-path: polygon(64px 5px, 98.5% 5px, 98.29% 84.52%, 258px 98.27%, 5px 98.56%, 5px 55px);
    
  }
  .i14{
    height: 110%;
  }
  .i15{
    width: 100%;
    height: auto;
  }
  .i16a{
    width: 45%;
    padding: 30px;
  }
  .i15a{
    top: 50%;
    left: 50%;
  }
  .i19{
    text-align: center;
    font-size: 3.6rem;
    line-height: 1.1;
  }
  .i20{
    justify-content: space-between;
    flex-direction: row;
  }
  .i21{
    width: 50%;
    padding: 20px;
  }
  .i22 {
    font-size: 1.3rem;
    line-height: 1.1;
  }
  .i23{
    width: 50%;
    padding: 0px 30px 0px 30px;
    flex-direction: row;
    align-items: unset;
  }
  .i29{
    font-size: 4rem;
  }
  .i30{
    text-align: center;
    font-size: 1.9rem;
  }
  .i39{
    flex-direction: row;
  }
  .i40{
    width: 40%;
  }
  .i41{
    font-size: 2.8rem;
    line-height: 1.1;
  }
  .i46{
    display: flex;
    align-items: center;
    justify-content: left;
    margin-top: 100px;
  }
  .i48{
    width: 60%;
  }
  .i50a{
    text-align: center;
    font-size: 3.5rem;
    line-height: 1.2;
  }
  .i52{
    color: var(--green);
    font-size: 50px;
  }
  .i53{
    position: relative;
    width: 80%;
    height: 150px;
    margin-left: 20px;
    margin-right: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-block: 40px;
    background-color: var(--green);
    clip-path: polygon(4.71% 0.05%, 99.99% -0.3%, 99.96% 69.23%, 94.71% 99.22%, 0.04% 100.09%, -0.04% 28.96%);
  }
  .i53::before{
    content: "";
    position: absolute;
    inset: 0;
    background-color: #fff;
    clip-path: polygon(4.82% 1.34%, 99.67% 1.71%, 99.75% 68.95%, 94.71% 97.93%, 0.25% 98.8%, 0.17% 29.25%);
    pointer-events: none;
    z-index: -1;
  }
  .i55{
    width: 70%;
    font-size: 1.4rem;
    line-height: 1.1;
  }
  .testimonio{
    width: 100%;
    padding-block: 60px;
    display: flex;
    gap: 10px;
    flex-direction: row;
  }
  /*-----------------------------------*\
  #NOSOTROS JP
  \*-----------------------------------*/
  .n1{
    margin-top: 80px;
  }
  .n2{
    font-size: 2.1rem;
    font-weight: 700;
  }
  .n3{
    margin-top: 60px;
  }
  .n8{
    flex-direction: row;
  }
  .n10{
    flex-direction: row;
  }
  .n13{
    font-size: 1.6rem;
  }
  .n16{
    font-size: 1.6rem;
  }
  .n17{
    flex-direction: row;
    align-items: unset;
  }
  .n21{
    font-size: 3.5rem;
    line-height: 1.3;
    margin-bottom: 60px;
    margin-top: 0;
  }
  .n22{
    font-size: 1.6rem;
  }
  .n23{
    font-size: 4rem;
  }
  .n24{
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    align-items: center;
    justify-content: space-between;
  }
  .n25{
    width: 30%;
  }
  .n28{
    width: 60%;
  
  }
  .n30{
    width: 330px;
    height: 350px;
  }
  .n34{
    font-size: 3.6rem;
  }
  .n35{
    font-size: 3rem;
  }
  .n36{
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }
  .n37{
    gap: 14px;
  }
  .n38a{
    height: 360px;
  }
  .n39{
    font-size: 2.2rem; 
  }

  /*-----------------------------------*\
    #TERRENOS E
  \*-----------------------------------*/
  .terreno-carts {
    grid-template-columns: repeat(2, 1fr);
  }

  .terreno-carts2 > .terreno-cart {
    margin-top: 30px;
    margin-bottom: 70px;
  }
  .separator-subtitle {
    margin-top: 80px;
  }
  .subtitle-h2 {
    font-size: 40px;
  }
  .benefits-carts {
    grid-template-columns: repeat(3, 1fr);
    gap: 80px;
  }
  .proyectos-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
  }
   /*-----------------------------------*\
    #SERVICIOS JP
  \*-----------------------------------*/

  .s5{
    width: 400px;
    height: 430px;
  }
  .s7a{
    width: 150px;
  }
  .s9{
    font-size: 2.4rem;
  }
  .s10{
    font-size: 1.6rem;
  }
   /*-----------------------------------*\
  #BLOG
  \*-----------------------------------*/
  .texto-portada-blog {
    font-size: 60px;
  }
  .subtexto-titulo-blog {
    font-size: 25px;
    text-align: center;
  }

  .subtexto-titulo-blog-iconos {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    margin-top: 20px;
  }
  .articulos-section-blog {
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
  }
  .articulo-image-hover {
    height: 400px;
  }
  .imagen-articulo-blog {
    height: 400px;
  }

   /*-----------------------------------*\
  #CONTACTO
  \*-----------------------------------*/

  .texto-portada-contacto {
    font-size: 50px;
    text-align: center;
    line-height: 60px;
  }
  .btn-green-contacto {
    font-size: 1.6rem;
  }
  .green-border-formulario {
    height: 800px;
    }
    .formulario-container {
      padding: 50px 70px;
      grid-template-columns: repeat(2, 1fr);
    
    }
  /*-----------------------------------*\
  #Footer
  \*-----------------------------------*/
  .info-footer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 1.4rem;
    margin-top: 15px;
    line-height: 1.1;
    margin-bottom: 100px;
    text-align: unset;
    gap: 0;
  }
  .f0{
    width: 35%;
  }
  .f2{
    width: 20%;
  }
  .f9{
    display: flex;
    margin-bottom: 20px;
    align-items: baseline;
    gap: 1px;
    justify-content: unset;
  }
  .f12{
    width: 70%;
  }

}



@media (min-width: 1200px) {

  .container { max-width: 1200px; }



  /**
   * HEADER
   */

  .header { padding-block: 0px; }

  .nav-open-btn,
  .overlay,
  .navbar-top,
  .navbar .social-list { display: none; }

  .navbar,
  .navbar.active,
  .navbar-list {
    all: unset;
    display: block;
  }

  .navbar { margin-inline-start: auto; }

  .navbar-list {
    display: flex;
  }

  .navbar-item { 
    border-block-start: none; 
    padding: 20px;
    transition: all 0.5s ease;
  }
  .navbar-item:hover,.navbar-item:focus{
    background-color: var(--green);
    color: var(--black);
  }
  .active-nav{
    background-color: var(--green);
    color: var(--black);
  }

  .navbar-link {
    --title-md: 1.5rem;
    font-weight: var(--fw-500);
    padding-inline: 6px;
    text-transform: capitalize;
  }
  .i8{
    gap: 60px;
  }
  .i9{
    position: relative;
    width: 330px;
    padding: 35px 30px 95px 30px;
    background-color: var(--green);
    clip-path: polygon(62px -1px, 100% 0px, 330px 84.86%, 85.81% 99.71%, 0px 100%, -1px 53px);
    max-height: 380px;
    transition: all 0.5s ease;
  }
  .i9::before{
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(64px 5px, 98.50% 5px, 98.62% 84%, 285px 98.27%, 5px 98.56%, 5px 55px);
    pointer-events: none;
  }
  .i14{
    height: 102%;
  }
  .i22 {
    font-size: 1.6rem;
  }
  .i41{
    font-size: 3.6rem;
    line-height: 1.1;
  }
}