/* ===== HERO ===== */
.hero {
  padding-top: 72px; /* header height */
  line-height: 0;
}
.hero__banner {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== BENEFITS ===== */
.benefits {
  position: relative;
  /*background: var(--bg-gray);
  overflow: hidden;*/
  background-image: url(../images/imagen.png);
  background-position: center center;
  background-size: cover;
  padding: 8vh 0;
}
.benefits__wave-top { line-height: 0; }
.benefits__wave-top svg { height: 80px; display: block; width: 100%; }
.benefits__wave-bottom { line-height: 0; margin-top: -1px; }
.benefits__wave-bottom svg { height: 80px; display: block; width: 100%; }

.benefits__inner { padding: 40px 0; }

.benefits__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.benefits__content { display: flex; flex-direction: column; gap: 12px; }
.benefits__intro { font-size: 15px; line-height: 1.7; max-width: 480px; }
.benefits__cta { margin-top: 8px; }

.benefits__img-wrap {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.benefits__img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
}

/* ===== COMPONENTS SECTION ===== */
.components-section {
  padding: 80px 0 100px;
  background: #fff;
}
.components-section .section-title { margin-bottom: 40px; }

/* ===== RESPONSIVE HOME ===== */
@media (max-width: 768px) {
  .benefits__grid { grid-template-columns: 1fr; gap: 32px; }
  .benefits__img { height: 280px; }
  .benefits__img-wrap { order: -1; }

  .components-section { padding: 60px 0 80px; }
  .benefits{
    background: initial;
    padding: 0;
  }
  .hero{
    overflow-x: hidden;
  }
  .hero__banner{
    width: 130%;
    max-width: initial;
    margin: 0 0 0 -15%;
  }
}

@media (max-width: 480px) {
  .benefits__img { height: 220px; }
}