/* TV PLAY V1.78 — agrandar y elevar exclusivamente TU PLAN PERSONALIZADO.
   Conserva la estructura abierta, el título principal, los tres pasos,
   catálogo y flujo comercial. El ancho adicional crece hacia la izquierda:
   nunca contrae todo .plans-shell. */

/* Pantallas de escritorio: más anchura, mayor presencia y unos px más arriba. */
@media (min-width: 1061px) {
  #planes .plan-summary-premium {
    width: calc(100% + 16px);
    margin-left: -16px;
    margin-top: -22px;
    min-height: 544px;
    padding-top: 30px;
    padding-bottom: 27px;
  }
  #planes .summary-full-brand img {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }
  #planes .summary-full-brand-name {font-size: 27px;}
  #planes .summary-brand-divider {height: 39px;}
  #planes .plan-summary-premium .summary-plan-identification .summary-plan-title-row .summary-title {
    font-size: 41px;
  }
  #planes .plan-summary-premium .summary-plan-hero {
    margin-top: 23px;
    margin-bottom: 19px;
  }
  #planes .plan-summary-premium .summary-price-card {
    padding-top: 25px;
    padding-bottom: 24px;
  }
  #planes .plan-summary-premium #summaryPrice {
    font-size: clamp(47px, 3.7vw, 59px);
  }
  #planes .plan-summary-premium button.summary-primary-cta {
    min-height: 58px;
  }
}

/* Ventanas bajas: priorizar que el resumen y su botón terminen visibles. */
@media (min-width: 1061px) and (max-height: 835px) {
  #planes .plan-summary-premium {
    margin-top: -20px;
    min-height: 465px;
    padding-top: 21px;
    padding-bottom: 18px;
  }
  #planes .summary-full-brand img {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
  #planes .summary-full-brand-name {font-size: 24px;}
  #planes .summary-brand-divider {height: 35px;}
  #planes .plan-summary-premium .summary-plan-identification .summary-plan-title-row .summary-title {
    font-size: 37px;
  }
  #planes .plan-summary-premium .summary-plan-hero {
    margin-top: 16px;
    margin-bottom: 14px;
  }
  #planes .plan-summary-premium .summary-price-card {
    padding-top: 19px;
    padding-bottom: 19px;
  }
  #planes .plan-summary-premium #summaryPrice {
    font-size: clamp(43px, 3.4vw, 52px);
  }
  #planes .plan-summary-premium button.summary-primary-cta {
    min-height: 52px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium {
    margin-top: -29px;
    padding-top: 15px;
    padding-bottom: 13px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium .summary-plan-hero {
    margin-top: 10px;
    margin-bottom: 9px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium .summary-price-card {
    padding-top: 13px;
    padding-bottom: 13px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium button.summary-primary-cta {
    min-height: 48px;
  }
}

/* Laptops de 720px de alto: mantener dentro del viewport los planes largos. */
@media (min-width: 1061px) and (max-height: 735px) {
  #planes .plan-summary-premium {margin-top: -16px; min-height: 457px;}
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium {
    margin-top: -24px;
  }
}

/* Desktop angosto: elevar y ensanchar muy poco, evitando recortar 5 pantallas. */
@media (min-width: 861px) and (max-width: 1060px) {
  #planes .plan-summary-premium {
    width: calc(100% + 8px);
    margin-left: -8px;
    margin-top: -17px;
    min-height: 457px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium {
    margin-top: -21px;
  }
}

/* En celular/tablet no se mueve hacia arriba: las columnas se apilan.
   Esto evita superposiciones sobre los botones y preserva el área táctil. */

/* Afinar los planes con ahorro: aprovechar la altura hacia arriba en lugar
   de empujar el pie del resumen fuera de la ventana. */
@media (min-width: 1061px) and (min-height: 836px) {
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium {
    margin-top: -16px;
    min-height: 562px;
  }
}
@media (min-width: 861px) and (max-width: 1060px) {
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium {
    min-height: 475px;
  }
}
@media (min-width: 1061px) and (max-height: 735px) {
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium .summary-price-card {
    padding-top: 11px;
    padding-bottom: 11px;
  }
}