/* ===================================================== */
/* HERO */
/* ===================================================== */

.contact-hero{
  position:relative;

  min-height:720px;

  display:flex;
  align-items:center;

  overflow:hidden;

  padding-top:180px;
  padding-bottom:120px;

  background:
  linear-gradient(
    135deg,
    rgba(7,26,47,.92),
    rgba(7,26,47,.72)
  ),

  url("../img/banner-nosotros.webp");

  background-size:cover;
  background-position:center 38%;
}

.contact-hero::after{
  content:"";

  position:absolute;

  width:700px;
  height:700px;

  border-radius:50%;

  background:
  radial-gradient(
    rgba(30,144,255,.18),
    transparent 70%
  );

  top:-250px;
  right:-150px;
}

.contact-overlay{
  position:absolute;
  inset:0;

  background:
  linear-gradient(
    135deg,
    rgba(0,17,43,.82),
    rgba(0,17,43,.55)
  );
}

.contact-hero-content{
  position:relative;

  z-index:2;

  color:white;

  max-width:850px;
}

.contact-hero-content span{
  display:inline-block;

  margin-bottom:20px;

  color:#38BDF8;

  font-weight:700;

  letter-spacing:2px;

  text-transform:uppercase;

  font-size:.95rem;
}

.contact-hero-content h1{
  font-size:clamp(3rem,7vw,5.5rem);

  line-height:1.02;

  margin-bottom:28px;

  font-weight:800;
}

.contact-hero-content p{
  font-size:1.2rem;

  line-height:1.9;

  color:rgba(255,255,255,.88);

  max-width:760px;
}

/* ===================================================== */
/* CONTACT PAGE */
/* ===================================================== */

.contact-page{
  background:#f5f7fb;
}

/* ===================================================== */
/* GRID */
/* ===================================================== */

.contact-grid{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:60px;

  align-items:start;
}

/* ===================================================== */
/* INFO */
/* ===================================================== */

.contact-info h2{
  font-size:56px;

  line-height:1.08;

  color:#00112b;

  margin-bottom:25px;
}

.contact-info p{
  color:#64748B;

  line-height:1.95;

  margin-bottom:35px;
}

/* ===================================================== */
/* CONTACT CARDS */
/* ===================================================== */

.contact-cards{
  display:grid;

  gap:22px;
}

.contact-item{
  display:flex;

  align-items:flex-start;

  gap:18px;

  background:white;

  padding:28px;

  border-radius:24px;

  transition:.35s;

  box-shadow:
  0 15px 35px rgba(0,0,0,.05);
}

.contact-item:hover{
  transform:translateY(-5px);
}

.contact-item i{
  width:64px;
  height:64px;

  border-radius:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
  linear-gradient(
    135deg,
    #1E90FF,
    #38BDF8
  );

  color:white;

  font-size:24px;

  flex-shrink:0;
}

.contact-item h4{
  font-size:22px;

  color:#00112b;

  margin-bottom:10px;
}

.contact-item p{
  margin:0;

  color:#64748B;

  line-height:1.7;
}

/* ===================================================== */
/* FORM */
/* ===================================================== */

.contact-form{
  background:white;

  border-radius:32px;

  padding:45px;

  box-shadow:
  0 20px 45px rgba(0,0,0,.06);
}

/* ===================================================== */
/* FORM GROUP */
/* ===================================================== */

.form-group{
  margin-bottom:22px;
}

.form-group input,
.form-group select,
.form-group textarea{
  width:100%;

  border:none;

  background:#f8fafc;

  border-radius:18px;

  padding:18px 22px;

  font-size:15px;

  font-family:'Montserrat',sans-serif;

  outline:none;

  transition:.3s;
}

.form-group textarea{
  min-height:170px;

  resize:none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

  background:white;

  box-shadow:
  0 0 0 3px rgba(30,144,255,.15);
}

/* ===================================================== */
/* BUTTON */
/* ===================================================== */

.contact-form button{
  width:100%;

  min-height:62px;

  border:none;

  cursor:pointer;

  position:relative;

  overflow:hidden;
}

/* ===================================================== */
/* LOADING */
/* ===================================================== */

.btn-loading{
  display:none;
}

button.loading .btn-text{
  display:none;
}

button.loading .btn-loading{
  display:flex;

  align-items:center;
  justify-content:center;

  gap:10px;
}

button.loading .btn-loading i{
  animation:spin 1s linear infinite;
}

@keyframes spin{

  to{
    transform:rotate(360deg);
  }

}

/* ===================================================== */
/* SUCCESS TOAST */
/* ===================================================== */

.success-toast{
  position:fixed;

  right:30px;
  bottom:30px;

  background:#10b981;

  color:white;

  padding:18px 24px;

  border-radius:18px;

  display:flex;

  align-items:center;

  gap:12px;

  font-weight:700;

  z-index:999999;

  transform:translateY(120px);

  opacity:0;

  transition:.4s ease;

  box-shadow:
  0 20px 45px rgba(0,0,0,.15);
}

.success-toast.active{
  transform:translateY(0);
  opacity:1;
}

.success-toast i{
  font-size:22px;
}

/* ===================================================== */
/* CTA */
/* ===================================================== */

.premium-cta{
  position:relative;

  overflow:hidden;
}

.premium-cta::before{
  content:"";

  position:absolute;

  width:600px;
  height:600px;

  border-radius:50%;

  background:
  radial-gradient(
    rgba(30,144,255,.12),
    transparent 70%
  );

  top:-250px;
  left:-150px;
}

.premium-cta .container{
  position:relative;
  z-index:2;
}

/* ===================================================== */
/* RESPONSIVE */
/* ===================================================== */

@media(max-width:992px){

  .contact-grid{
    grid-template-columns:1fr;
  }

}

@media(max-width:768px){

  .contact-hero{
    min-height:760px;

    text-align:center;
  }

  .contact-hero-content{
    text-align:center;
    margin:auto;
  }

  .contact-hero-content h1{
    font-size:2.8rem;
  }

  .contact-hero-content p{
    font-size:1rem;
  }

  .contact-info h2{
    font-size:38px;
  }

  .contact-form{
    padding:32px 24px;
  }

  .contact-item{
    flex-direction:column;
  }

  .contact-item i{
    width:58px;
    height:58px;
  }

  .success-toast{
    right:20px;
    left:20px;
    bottom:20px;
  }

  .contact-hero::after{
    width:320px;
    height:320px;

    top:-100px;
    right:-100px;
  }

}