/* Hero · see-for-yourself (.hero-copy): centrado, padding 48/20/40, H1 48/52.8/-1.44 */

.hero__copy {
  padding: var(--hero-pad);
  text-align: center;
}

.hero__cities {
  margin-bottom: 16px;
}

.hero__title {
  max-width: 14em;
  margin-inline: auto;
}

.hero__sub {
  max-width: var(--hero-sub-max);
  margin: 16px auto 0;
  font-size: var(--hero-sub-size);
  line-height: var(--hero-sub-line);
  color: var(--ink);
}

.hero__ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.hero__stage {
  display: flex;
  justify-content: center;
  padding: 8px var(--gutter) 90px; /* ref .carousel-wrap: 90px abajo */
}

@media (min-width: 768px) {
  .hero__ctas {
    flex-direction: row;
    justify-content: center;
  }
}

/* Desde 1440: texto a la izquierda, configurador + iPhone a la derecha (el teléfono queda arriba del pliegue) */
@media (min-width: 1440px) {
  .hero:not(.page-hero) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--stage-gap);
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding: 56px var(--gutter) 40px;
  }
  .hero:not(.page-hero) .hero__copy { padding: 0; text-align: left; }
  .hero:not(.page-hero) .hero__title,
  .hero:not(.page-hero) .hero__sub { margin-inline: 0; }
  .hero:not(.page-hero) .hero__ctas { justify-content: flex-start; }
  .hero:not(.page-hero) .hero__stage { padding: 0 0 56px; }

  /* El H1 crece con la pantalla: 48px a 1440 (referencia) hasta 64px en pantallas anchas; tracking -0.03em como la ref. */
  .hero:not(.page-hero) .hero__title {
    font-size: clamp(var(--h1-size), 3.35vw, var(--h1-size-xl));
    line-height: 1.1;
    letter-spacing: -0.03em;
  }

  .page-hero .hero__title {
    font-size: clamp(var(--h1-size), 3vw, 58px);
    line-height: 1.1;
    letter-spacing: -0.03em;
  }
}