/* TV PLAY V1.79 — TU PLAN PERSONALIZADO más arriba y más alto.
   Cambios limitados a la tarjeta del resumen en #planes. No se altera el ancho
   del formulario, la navegación, el texto ni los cálculos de precios. */

/* Pantallas grandes: ganar altura hacia arriba, sin desplazar el pie fuera
   del viewport de 864px cuando se elige un plan de varios meses. */
@media (min-width: 1061px) and (min-height: 836px) {
  #planes .plan-summary-premium {
    margin-top: -64px;
    min-height: 585px;
    padding-top: 34px;
    padding-bottom: 30px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium {
    margin-top: -54px;
    min-height: 600px;
    padding-top: 26px;
    padding-bottom: 20px;
  }
  #planes .plan-summary-premium .summary-price-card {
    padding-top: 27px;
    padding-bottom: 26px;
  }
  #planes .plan-summary-premium button.summary-primary-cta {
    min-height: 60px;
  }
}

/* Notebooks: ampliar hacia arriba tanto el mensual como el plazo con ahorro.
   Conservar suficiente espacio para el botón y los enlaces de la tarjeta. */
@media (min-width: 1061px) and (min-height: 736px) and (max-height: 835px) {
  #planes .plan-summary-premium {
    margin-top: -54px;
    min-height: 500px;
    padding-top: 26px;
    padding-bottom: 22px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium {
    margin-top: -64px;
    min-height: 520px;
    padding-top: 19px;
    padding-bottom: 16px;
  }
  #planes .plan-summary-premium .summary-price-card {
    padding-top: 21px;
    padding-bottom: 21px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium .summary-price-card {
    padding-top: 13px;
    padding-bottom: 13px;
  }
}

/* 720px de alto: la ampliación debe ocurrir hacia arriba, no hacia abajo. */
@media (min-width: 1061px) and (max-height: 735px) {
  #planes .plan-summary-premium {
    margin-top: -50px;
    min-height: 490px;
    padding-top: 23px;
    padding-bottom: 19px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium {
    margin-top: -56px;
    min-height: 510px;
    padding-top: 14px;
    padding-bottom: 12px;
  }
  #planes .plan-summary-premium .summary-price-card {
    padding-top: 19px;
    padding-bottom: 18px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium .summary-price-card {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* Desktop angosto: ajuste algo más medido, sin recortar marca o pantallas. */
@media (min-width: 861px) and (max-width: 1060px) {
  #planes .plan-summary-premium {
    margin-top: -48px;
    min-height: 488px;
    padding-top: 24px;
    padding-bottom: 20px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium {
    margin-top: -53px;
    min-height: 508px;
    padding-top: 17px;
    padding-bottom: 14px;
  }
}

/* Pantallas apiladas: tarjeta un poco más alta y más cerca del formulario,
   sin superponer elementos interactivos. */
@media (max-width: 860px) {
  #planes .plans-shell {
    gap: 13px;
  }
  #planes .plan-summary-premium {
    margin-top: -5px;
    min-height: 545px;
    padding-top: 35px;
    padding-bottom: 32px;
  }
}
@media (max-width: 600px) {
  #planes .plans-shell {
    gap: 12px;
  }
  #planes .plan-summary-premium {
    margin-top: -5px;
    min-height: 565px;
    padding-top: 32px;
    padding-bottom: 30px;
  }
}