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

.about-hero{
  position:relative;

  min-height:720px;

  display:flex;
  align-items:center;

  overflow:hidden;

  padding-top:140px;

  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%;
}

.about-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;
}

.about-hero-overlay{
  position:absolute;
  inset:0;

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

.about-hero-content{
  position:relative;

  z-index:2;

  color:white;

  max-width:850px;
}

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

  margin-bottom:20px;

  color:#38BDF8;

  font-weight:700;

  letter-spacing:2px;

  text-transform:uppercase;

  font-size:.95rem;
}

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

  line-height:1.02;

  margin-bottom:28px;

  font-weight:800;
}

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

  line-height:1.9;

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

  max-width:760px;
}

/* ===================================================== */
/* ABOUT */
/* ===================================================== */

.about-section{
  background:white;
}

.about-grid{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:80px;

  align-items:center;
}

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

  line-height:1.1;

  color:#00112b;

  margin-bottom:28px;
}

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

  line-height:1.95;

  margin-bottom:22px;
}

/* ===================================================== */
/* FEATURES */
/* ===================================================== */

.about-features{
  margin-top:35px;

  display:grid;

  gap:20px;
}

.about-features div{
  display:flex;

  align-items:center;

  gap:16px;
}

.about-features i{
  width:58px;
  height:58px;

  border-radius:16px;

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

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

  color:white;

  font-size:22px;
}

.about-features span{
  font-weight:700;

  color:#00112b;
}

/* ===================================================== */
/* IMAGE */
/* ===================================================== */

.about-image img{
  border-radius:32px;

  width:100%;

  box-shadow:
  0 30px 60px rgba(0,0,0,.12);
}

/* ===================================================== */
/* VALUES */
/* ===================================================== */

.company-values{
  background:#f5f7fb;
}

.values-grid{
  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(320px,1fr));

  gap:35px;
}

.value-card{
  background:white;

  border-radius:30px;

  padding:45px 35px;

  text-align:center;

  transition:.45s;

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

.value-card:hover{
  transform:translateY(-10px);
}

.value-card i{
  width:90px;
  height:90px;

  border-radius:24px;

  margin:auto auto 28px;

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

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

  color:white;

  font-size:34px;

  box-shadow:
  0 18px 35px rgba(30,144,255,.22);
}

.value-card h3{
  font-size:32px;

  color:#00112b;

  margin-bottom:18px;
}

.value-card p{
  color:#64748B;

  line-height:1.9;
}

/* ===================================================== */
/* STATS */
/* ===================================================== */

.stats{
  position:relative;

  background:white;
}

.stats-grid{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:25px;
}

.stat{
  background:#f8fafc;

  border-radius:28px;

  padding:45px 30px;

  text-align:center;

  transition:.35s;
}

.stat:hover{
  transform:translateY(-10px);
}

.stat h2{
  font-size:56px;

  color:#1E90FF;

  margin-bottom:12px;
}

.stat p{
  color:#64748B;
}

/* ===================================================== */
/* COVERAGE */
/* ===================================================== */

.coverage-section{
  background:#f5f7fb;
}

/* ===================================================== */
/* ANIMATIONS */
/* ===================================================== */

.reveal-left{
  opacity:0;

  transform:translateX(-80px);

  transition:1s ease;
}

.reveal-right{
  opacity:0;

  transform:translateX(80px);

  transition:1s ease;
}

.reveal-left.active,
.reveal-right.active{
  opacity:1;
  transform:translateX(0);
}

.zoom-in{
  opacity:0;

  transform:scale(.8);

  transition:1s ease;
}

.zoom-in.active{
  opacity:1;
  transform:scale(1);
}

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

@media(max-width:992px){

  .about-grid,
  .stats-grid{
    grid-template-columns:1fr 1fr;
  }

}

@media(max-width:768px){

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

    text-align:center;
  }

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

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

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

  .about-grid,
  .stats-grid{
    grid-template-columns:1fr;
  }

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

  .value-card{
    padding:38px 28px;
  }

  .value-card h3{
    font-size:28px;
  }

  .stat h2{
    font-size:42px;
  }

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

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

}