/* TV PLAY V1.70 — Iguala únicamente la escala del título de Planes
   a la de Instalación en cada ancho de pantalla.
   Se conserva TODO el texto del título, su gradiente y su descripción. */

#planes .section-top.centered h2 {
  font-weight: 830;
  line-height: 1.1;
}
@media (max-width: 600px) {
  #planes .section-top.centered h2 { font-size: clamp(34px, 9vw, 41px); }
}
@media (min-width: 601px) and (max-width: 860px) {
  #planes .section-top.centered h2 { font-size: clamp(39px, 5.1vw, 44px); }
}
@media (min-width: 861px) and (max-width: 1100px) {
  #planes .section-top.centered h2 { font-size: clamp(43px, 5.1vw, 48px); }
}
@media (min-width: 1101px) and (max-width: 1230px) {
  #planes .section-top.centered h2 { font-size: clamp(42px, 3.6vw, 48px); }
}
@media (min-width: 1231px) {
  #planes .section-top.centered h2 { font-size: clamp(44px, 3.5vw, 52px); }
}

/* La selección de varios meses no debe achicar el título: misma escala
   que Instalación para todos los planes. Sobrescribe reglas :has anteriores. */
@media (max-width: 600px) {
  #planes:has(.duration-button.active:not([data-months="1"])) .section-top.centered h2 { font-size: clamp(34px, 9vw, 41px); }
}
@media (min-width: 601px) and (max-width: 860px) {
  #planes:has(.duration-button.active:not([data-months="1"])) .section-top.centered h2 { font-size: clamp(39px, 5.1vw, 44px); }
}
@media (min-width: 861px) and (max-width: 1100px) {
  #planes:has(.duration-button.active:not([data-months="1"])) .section-top.centered h2 { font-size: clamp(43px, 5.1vw, 48px); }
}
@media (min-width: 1101px) and (max-width: 1230px) {
  #planes:has(.duration-button.active:not([data-months="1"])) .section-top.centered h2 { font-size: clamp(42px, 3.6vw, 48px); }
}
@media (min-width: 1231px) {
  #planes:has(.duration-button.active:not([data-months="1"])) .section-top.centered h2 { font-size: clamp(44px, 3.5vw, 52px); }
}

/* Conservar título de escala Instalación y el configurador entero en
   pantallas de escritorio de poca altura, ajustando espacios solamente. */
@media (min-width: 861px) and (max-height: 835px) {
  #planes.section-plans { padding-top: 6px; }
  #planes .section-top.centered { margin-bottom: 9px; }
  #planes .section-top.centered h2 { margin-top: 4px; }
  #planes .section-top.centered p { margin-top: 5px; }

  #planes:has(.duration-button.active:not([data-months="1"])) .section-top.centered {
    margin-bottom: 5px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .section-top.centered h2 {
    margin-top: 3px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium {
    padding-top: 14px;
    padding-bottom: 12px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium .summary-plan-hero {
    margin-top: 5px;
    margin-bottom: 4px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .summary-plan-identification > .summary-inline-meta {
    margin-top: 5px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium .summary-price-card {
    padding-top: 9px;
    padding-bottom: 10px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium .plan-comparison {
    padding: 7px 9px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium .summary-payment-note {
    margin-top: 3px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium button.summary-primary-cta {
    margin-top: 8px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .summary-footer-notes {
    margin-top: 4px;
  }
}