/* TV PLAY V1.74 — Refinamiento del resumen de Planes.
   Mantiene composición abierta V1.73 y textos, logos, botones, precios,
   ahorros, navegación y WhatsApp intactos. */

/* Fondo más sereno y jerarquía visual clara: una sola textura decorativa. */
#planes .plan-summary-premium {
  background:
    radial-gradient(ellipse 64% 40% at 99% 0%,
      rgba(61,127,209,.18), transparent 87%),
    radial-gradient(ellipse 48% 50% at 0% 92%,
      rgba(18,91,154,.09), transparent 88%),
    linear-gradient(158deg,#173352 0%,#122842 57%,#0f2039 100%);
  border-color: rgba(89,142,195,.44);
  box-shadow: 0 24px 55px rgba(0,7,23,.20),
              inset 0 1px 0 rgba(221,247,255,.065);
}
#planes .plan-summary-premium::after {
  display: none;
}
#planes .plan-summary-premium .summary-price-card {
  background:
    linear-gradient(125deg,
      rgba(30,83,148,.84) 0%,
      rgba(23,57,105,.80) 64%,
      rgba(20,42,89,.82) 100%);
  border-color: rgba(90,154,228,.49);
  box-shadow: inset 0 1px 0 rgba(209,237,255,.13),
              0 13px 25px rgba(1,12,35,.11);
}
#planes .summary-price-card .summary-price-ambient {
  opacity: .29;
}
#planes .plan-summary-premium .summary-mini {
  color: #83e4fa;
}
#planes .plan-summary-premium .summary-price-topline #summaryPriceLabel {
  color: #b9e2ff;
}
#planes .plan-summary-premium .summary-payment-note #priceInfo {
  color: #c5d9ec !important;
}
#planes .plan-summary-premium .summary-footer-notes {
  color: #a8c2de;
}
#planes .plan-summary-premium .summary-footer-notes a {
  color: #bee9f7;
  font-weight: 650;
}

/* Columna derecha se alinea con el comienzo del paso 1, no con el subtítulo
   principal. Se conserva el mismo peso visual y la altura de V1.73. */
@media (min-width: 861px) {
  #planes .plan-summary-premium {
    margin-top: -7px;
  }
  #planes .plan-summary-premium .summary-premium-top {
    min-height: 18px;
  }
  #planes .plan-summary-premium .summary-plan-hero {
    margin-top: 20px;
    margin-bottom: 18px;
  }
  #planes .plan-summary-premium .summary-price-card {
    border-radius: 16px;
  }
  #planes .plan-summary-premium .summary-payment-note {
    gap: 11px;
  }
  #planes .plan-summary-premium .summary-footer-notes {
    margin-top: 12px;
  }
}

/* Ventanas bajas: la tarjeta mantiene un encuadre completo sin sacrificar
   contenido ni volver a comprimir el título general. */
@media (min-width: 861px) and (max-height: 835px) {
  #planes .plan-summary-premium {
    margin-top: -8px;
  }
  #planes .plan-summary-premium .summary-plan-hero {
    margin-top: 13px;
    margin-bottom: 12px;
  }
  #planes .plan-summary-premium .summary-price-card {
    padding-top: 16px;
    padding-bottom: 17px;
  }
  #planes .plan-summary-premium .summary-payment-note {
    margin-top: 11px;
  }
  #planes .plan-summary-premium button.summary-primary-cta {
    margin-top: 12px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium {
    margin-top: -20px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium .summary-plan-hero {
    margin-top: 9px;
    margin-bottom: 8px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium .summary-price-card {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium .summary-payment-note {
    margin-top: 8px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium button.summary-primary-cta {
    margin-top: 10px;
  }
}

/* Laptop angosta: el logo y las pantallas conservan una sola línea. */
@media (min-width: 861px) and (max-width: 1060px) {
  #planes .plan-summary-premium {
    margin-top: -9px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium {
    margin-top: -13px;
  }
}

/* Móvil y tablet: mantener la tarjeta amplia que ya se venía usando.
   Sólo ordenar la distancia respecto al formulario. */
@media (max-width: 860px) {
  #planes .plans-shell {
    gap: 17px;
  }
  #planes .plan-summary-premium {
    border-radius: 19px;
  }
  #planes .plan-summary-premium .summary-price-card {
    border-radius: 15px;
  }
}
@media (max-width: 600px) {
  #planes .plans-shell {
    gap: 15px;
  }
  #planes .plan-summary-premium .summary-price-card {
    border-radius: 13px;
  }
}

/* Un pequeño margen de seguridad para visualizar íntegro el pie del plan
   de varios meses en portátiles con 720–835 px de alto. */
@media (min-width: 1061px) and (max-height: 835px) {
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium {
    margin-top: -24px;
  }
}