/* =========================
   INDEX - HOME MINIMALISTA
   ========================= */

/* HERO */

.page-hero{
  position: relative;
  min-height: 74vh;
  display: grid;
  place-items: center;
  padding-top: 100px;
  overflow: hidden;
}

.page-hero__bg{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(17,17,17,.56), rgba(29,175,150,.26)),
    url("../images/stock/Nals_slider.png") center/cover no-repeat;
}

.page-hero__content{
  position: relative;
  text-align: center;
  max-width: 1050px;
}

.page-hero__title{
  font-weight: 800;
  font-size: clamp(38px, 4.4vw, 68px);
  line-height: 1;
  margin: 0;
  color: #fff;
}

.page-hero__subtitle{
  max-width: 840px;
  margin: 18px auto 0 auto;
  font-size: 19px;
  line-height: 1.6;
  color: rgba(255,255,255,.88);
}

.hero-buttons{
  margin-top: 28px;
}

.hero-btn {
  display: inline-block;
  font-size: 20px;
  padding: 13px 28px;
  border-radius: 6px;
  margin: 8px;
  background: var(--azul-nals);
  color: #fff;
  text-decoration: none;
  font-family: "Satoshi-Bold", sans-serif;
  font-weight: 800;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.hero-btn:hover,
.hero-btn:focus,
.hero-btn:active {
  background: var(--azul-nals-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}

/* QUIÉNES SOMOS */

.quienes-somos {
  position: relative;
  overflow: hidden;
}

.quienes-text {
  max-width: 820px;
}

.quienes-text p {
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
  margin-bottom: 20px;
  color: var(--gris-texto);
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: .1px;
}

.quienes-img-frame {
  width: min(100%, 310px);
  aspect-ratio: 2 / 3;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  border-radius: 28px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.quienes-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* OFERTAS */

.offer-card {
  height: 100%;
  padding: 34px 28px;
  border-radius: 28px;
  background:var(--gris-claro);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.offer-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(29,175,150,.28);
}

.offer-icon {
  width: 134px;
  height: 134px;
  border-radius: 999px;
  background: #99d6cc ;
  margin: 0 auto 26px auto;
  display: grid;
  place-items: center;
  border: 2px solid #1daf96;
}

.offer-icon img {
  width: 86px;
  height: 86px;
  object-fit: contain;
  filter: drop-shadow(0px  0px  26px rgba(29,175,150));
}

.offer-title {
  max-width: 300px;
  margin: 0 auto 16px auto;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.12;
}

.offer-text {
  max-width: 310px;
  margin: 0 auto 28px auto;
  color: var(--gris-texto);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
}

.offer-btn {
  margin-top: auto;
  display: inline-block;
  font-size: 19px;
  padding: 11px 26px;
  border-radius: 6px;
  background: var(--azul-nals);
  color: #fff;
  text-decoration: none;
  font-family: "League Spartan", sans-serif;
  font-weight: 800;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.offer-card:hover .offer-btn,
.offer-btn:hover,
.offer-btn:focus,
.offer-btn:active {
  background: var(--azul-nals-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}

/* RESEÑAS */

.ti-widget{
  margin-inline: auto;
}

.bg-soft .ti-widget{
  background: transparent;
}

.ti-widget-container{
  align-items: flex-start;
}

/* MAPA */

.map-container{
  border-radius: 28px !important;
  box-shadow: var(--shadow-soft) !important;
}

.map-container iframe{
  width: 100%;
  height: 470px;
  border: 0;
}

/* RESPONSIVE HOME */

@media (max-width: 992px){

  .page-hero{
    min-height: 72vh;
    padding-inline: 18px;
  }

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

  .quienes-title {
    margin-bottom: 28px;
    text-align: center;
  }

  .quienes-text {
    text-align: center;
    margin-inline: auto;
  }

  .quienes-img-wrap {
    margin-top: 10px;
    width: min(100%, 280px);
  }
}

@media (max-width: 575px) {

  .page-hero{
    min-height: auto;
    padding-top: 130px;
    padding-bottom: 80px;
  }

  .page-hero__subtitle{
    font-size: 17px;
  }

  .hero-btn{
    width: 100%;
    margin: 8px 0;
    font-size: 18px;
  }

  .quienes-somos {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .quienes-text p {
    font-size: 16px;
    line-height: 1.65;
    text-align: left;
  }

  .offer-card{
    border-radius: 24px;
  }
}