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

.about-hero{
  position:relative;
  background:
    linear-gradient(
      180deg,
      rgba(8,24,51,0.82) 0%,
      rgba(8,24,51,0.72) 100%
    ),
    url('../img/hero/nosotros-hero.jpg');
    background-size:cover;
    background-position:center;
    padding:115px 0 90px;
    overflow:hidden;
    isolation:isolate;
}

.about-hero::before{
  content:'';
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at top right,
      rgba(255,255,255,0.08),
      transparent 35%
    );

  z-index:1;
}

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

  background:
    linear-gradient(
      to right,
      rgba(8,24,51,0.35),
      rgba(8,24,51,0.12)
    );

  z-index:1;
}

.about-hero-content{
  position:relative;
  z-index:2;

  max-width:820px;

  color:#fff;
}

.about-tag{
  display:inline-block;

  padding:8px 16px;

  border-radius:30px;

  background:rgba(255,255,255,0.08);

  border:1px solid rgba(255,255,255,0.12);

  backdrop-filter:blur(8px);

  font-size:12px;
  font-weight:600;

  letter-spacing:1px;
  text-transform:uppercase;

  margin-bottom:24px;
}

.about-hero h1{
  font-size:58px;
  line-height:1.1;

  margin-bottom:26px;

  max-width:820px;
}

.about-hero p{
  font-size:19px;
  line-height:1.9;

  color:rgba(255,255,255,0.82);

  max-width:680px;
}

/* MOBILE */

@media(max-width:768px){

  .about-hero{
    padding:95px 0 70px;
  }

  .about-hero h1{
    font-size:40px;
  }

  .about-hero p{
    font-size:16px;
    line-height:1.7;
  }

}

/* ========================= */
/* INTRO */
/* ========================= */

.about-intro{
  padding:100px 0 70px;

  background:#fff;
}

.about-intro-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;

  gap:70px;

  align-items:end;
}

.about-intro-tag{
  display:inline-block;

  padding:8px 14px;

  border-radius:30px;

  background:rgba(28,53,94,0.08);

  color:var(--azul);

  font-size:12px;
  font-weight:600;

  letter-spacing:1px;
  text-transform:uppercase;

  margin-bottom:22px;
}

.about-intro-left h2{
  font-size:46px;
  line-height:1.12;

  color:var(--azul);

  max-width:700px;
}

.about-intro-right p{
  font-size:18px;
  line-height:1.9;

  color:#647082;

  margin-bottom:22px;
}

/* MOBILE */

@media(max-width:992px){

  .about-intro{
    padding:80px 0 50px;
  }

  .about-intro-grid{
    grid-template-columns:1fr;

    gap:35px;
  }

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

  .about-intro-right p{
    font-size:16px;
    line-height:1.8;
  }

}

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

.about-stats{
  padding:10px 0 75px;

  background:#fff;
}

.about-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:28px;
}

.about-stat{
  padding:38px 28px;

  border-radius:24px;

  background:#f8fafc;

  border:1px solid rgba(15,23,42,0.05);

  transition:0.4s ease;
}

.about-stat:hover{
  transform:translateY(-8px);

  box-shadow:
    0 24px 50px rgba(15,23,42,0.08);
}

.about-stat h3{
  font-size:46px;
  font-weight:700;

  color:var(--azul);

  margin-bottom:18px;
}

.about-stat p{
  font-size:16px;
  line-height:1.8;

  color:#647082;

  margin:0;
}

/* MOBILE */

@media(max-width:992px){

  .about-stats{
    padding:10px 0 80px;
  }

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

}

@media(max-width:768px){

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

}

/* ========================= */
/* INDUSTRIAL SECTION */
/* ========================= */

.about-industrial{
  padding:10px 0 85px;

  background:#fff;
}

.about-industrial-grid{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:70px;

  align-items:center;
}

.about-industrial-image{
  position:relative;

  overflow:hidden;

  border-radius:28px;

  box-shadow:
    0 30px 60px rgba(15,23,42,0.12);
}

.about-industrial-image img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
}

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

  margin-bottom:18px;

  padding:8px 14px;

  border-radius:30px;

  background:rgba(28,53,94,0.08);

  color:var(--azul);

  font-size:12px;
  font-weight:600;

  letter-spacing:1px;
  text-transform:uppercase;
}

.about-industrial-content h2{
  font-size:44px;
  line-height:1.12;

  color:var(--azul);

  margin-bottom:26px;
}

.about-industrial-content p{
  font-size:18px;
  line-height:1.9;

  color:#647082;

  margin-bottom:22px;
}

/* MOBILE */

@media(max-width:992px){

  .about-industrial{
    padding:0 0 90px;
  }

  .about-industrial-grid{
    grid-template-columns:1fr;

    gap:40px;
  }

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

  .about-industrial-content p{
    font-size:16px;
    line-height:1.8;
  }

}

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

.about-cta{
  padding:0 0 85px;

  background:#fff;
}

.about-cta-box{
  position:relative;

  padding:65px 45px;

  border-radius:36px;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      rgba(8,24,51,0.96),
      rgba(15,35,72,0.92)
    );

  text-align:center;

  color:#fff;
}

.about-cta-box::before{
  content:'';

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at top right,
      rgba(255,255,255,0.08),
      transparent 35%
    );

  pointer-events:none;
}

.about-cta-box span{
  display:inline-block;

  margin-bottom:20px;

  padding:8px 14px;

  border-radius:30px;

  background:rgba(255,255,255,0.08);

  border:1px solid rgba(255,255,255,0.10);

  font-size:12px;
  font-weight:600;

  letter-spacing:1px;
  text-transform:uppercase;
}

.about-cta-box h2{
  font-size:46px;
  line-height:1.12;

  max-width:900px;

  margin:
    0 auto 28px;
}

.about-cta-box p{
  font-size:18px;
  line-height:1.9;

  color:rgba(255,255,255,0.78);

  max-width:760px;

  margin:
    0 auto 40px;
}

.about-cta-box .btn{
  background:var(--amarillo);

  color:var(--azul);

  padding:15px 34px;

  border-radius:14px;

  font-weight:600;

  transition:0.35s ease;
}

.about-cta-box .btn:hover{
  transform:translateY(-4px);

  box-shadow:
    0 20px 40px rgba(0,0,0,0.22);
}

/* MOBILE */

@media(max-width:768px){

  .about-cta{
    padding:0 0 90px;
  }

  .about-cta-box{
    padding:70px 28px;
  }

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

  .about-cta-box p{
    font-size:16px;
    line-height:1.8;
  }

}