/* =========================================
   HERO - definitivo (media queries sin var())
========================================= */

.hero {
  color: var(--color-text);
  padding: 72px 0 88px;
}

/* =========================
   GRID BASE (Desktop + Tablet)
========================= */

.hero__container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 48px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "title media"
    "content media";

  align-items: center;
  gap: 64px;
}

/* Áreas */
.hero__title { grid-area: title; }
.hero__media { grid-area: media; }
.hero__content { grid-area: content; }

/* =========================
   TIPOGRAFÍA DESKTOP
========================= */

.hero__title {
  font-size: 46px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;  
}

.hero__title span {
  display: block;
}

.hero__subtitle {
  font-size: 22px;
  line-height: 1.45;
  color: var(--color-nav-hover);
}

.hero__price-value {
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
}

.hero__price-note {
  margin-top: 8px;
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-nav);
}

.hero__btn {
  margin-top: 20px;
}

.hero__footnote {
  margin-top: 18px;
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: rgba(0, 0, 0, 0.45);
}

/* =========================
   IMAGE
========================= */

.hero__media {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero__image {
  width: 100%;
  max-width: 760px;
  height: auto;
  object-fit: contain;
}

/* =========================================
   1400px ↓
========================================= */

@media (max-width: 1400px) {

  .hero__title { font-size: 42px; }
  .hero__subtitle { font-size: 20px; }
  .hero__price-value { font-size: 42px; }
}

/* =========================================
   1200px ↓
========================================= */

@media (max-width: 1200px) {

  .hero__container {
    padding: 0 36px;
    gap: 48px;
  }

  .hero__title { font-size: 38px; }
  .hero__subtitle { font-size: 18px; }
  .hero__price-value { font-size: 38px; }

  .hero__price-note,
  .hero__footnote { font-size: 14px; }
}

/* =========================================
   1000px ↓
========================================= */

@media (max-width: 1000px) {

  .hero__title { font-size: 30px; }
  .hero__price-value { font-size: 34px; }
}

/* =========================================
   MOBILE (<= 820px)  ✅ sin var()
========================================= */

@media (max-width: 820px) {
  .hero {
    padding: 28px 0 48px;
    text-align: center;
  }

  .hero__container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "media"
      "content";

    padding: 0 24px;
    gap: 22px;
  }

  /* Título más pequeño y estable (evita “Tus” solo) */
  .hero__title {
    font-size: 28px;
    line-height: 1.12;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }

  /* Mantén las 4 líneas del diseño en móvil (sin romper por palabras) */
  .hero__title span {
    display: block;
  }

  .hero__subtitle {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 18px;
  }

  .hero__price-value { font-size: 44px; }

  .hero__price-note,
  .hero__footnote { font-size: 13px; }

  /* Card de imagen */
  .hero__media {
    border-radius: 22px;
    border: 1px solid var(--color-border-soft);
    background: rgba(0, 0, 0, 0.02);
    padding: 22px;
  }

  .hero__image {
    max-width: 520px;
    margin: 0 auto;
  }
}

/* =========================================
   SMALL PHONES (<= 420px)
========================================= */

@media (max-width: 420px) {

  .hero__container { padding: 0 20px; }

  .hero__title { font-size: 24px; }
  .hero__price-value { font-size: 38px; }
}