/* =========================
   Hero
   ========================= */
.hero{ background: var(--soft-color); border-bottom:1px solid rgba(0,0,0,.06); }
.hero__inner{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 2.5rem;
  align-items:center;
  padding:3.5rem 0; /* ← solo vertical; los laterales vienen de .container */
}

/* Márgenes laterales robustos para notch/safe areas (iPhone/iPad) */
.hero{
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
}

.subtitle{ font-size:1.05rem; line-height:1.6; opacity:.9; margin:0 0 1.25rem 0; }
.hero__cta{ display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:1rem; }

.bullets{ display:grid; grid-template-columns:1fr 1fr; gap:.35rem 1rem; margin:1rem 0 0 0; padding:0; list-style:none; }
.bullets li{ position:relative; padding-left:1.35rem; }
.bullets li::before{ content:""; position:absolute; left:0; top:.55rem; width:.55rem; height:.55rem; border-radius:999px; background:var(--primary-color); opacity:.9; }

/* Hero visual: sombra visible y sin recortes */
.hero__visual{ overflow: visible; }
.hero__visual img{
  width:100%; height:auto; display:block; border-radius:.75rem;
  box-shadow: 0 18px 48px rgba(0,0,0,.18), 0 10px 20px rgba(0,0,0,.10);
  background:var(--soft-color);
}

.hero-title-with-icon {
  display: flex;
  align-items: center;
  gap: .6rem;       /* espacio entre icono y texto */
}

.hero-title-with-icon .hero-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;   /* que no se deforme */
}


.subtitle-with-icon {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}

.subtitle-with-icon .subtitle-icon {
  flex-shrink: 0;   /* que no se deforme ni ocupe más */
}

.subtitle-with-icon .hero-icon {
  width: 28px;
  height: 28px;
  display: block;
}

.hero__title-highlight {
    color: var(--menta-accent);
}

/* ==========================================================
   HERO — RESPONSIVE AND SAFE AREAS
   Merged from styles.css and overrides.css.
   ========================================================== */

.hero__visual {
  position: relative;
  z-index: 2;
  overflow: visible;
}

.hero__visual img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.22),
    0 10px 20px rgba(0, 0, 0, 0.12);
}

@media (max-width: 980px) {
  .hero__inner {
    grid-template-columns: 1fr;
    padding: 2.25rem 0;
  }

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

@media (max-width: 430px) {
  .hero {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 2rem 0;
  }
}

@media (min-width: 431px) and (max-width: 820px) and (orientation: portrait) {
  .hero {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 3rem 0;
  }
}