/* TV PLAY V1.72 — Planes: composición abierta estilo Instalación.
   Se eliminan separadores horizontales de página y el marco exterior del
   configurador. La selección queda sobre el fondo y el resumen en su propia
   tarjeta, sin modificar texto, cálculo, pagos ni navegación. */

/* Transiciones de fondo continuas entre secciones; sin líneas horizontales. */
#instalacion.section-install-inline {
  border-bottom: 0 !important;
}
#planes.section-plans {
  border-top: 0 !important;
  border-bottom: 0 !important;
  background:
    radial-gradient(ellipse 55% 44% at 85% 49%, rgba(24,71,137,.115), transparent 86%),
    linear-gradient(180deg, #0a1729 0%, #091626 100%);
}
#clientes.section-customers {
  border-top: 0 !important;
  background:
    radial-gradient(ellipse 52% 76% at 80% 65%,rgba(26,75,142,.16),transparent),
    linear-gradient(180deg,#091626 0%,#091224 29%);
}

/* Un único diseño limpio: formulario abierto + resumen premium independiente. */
#planes .plans-shell {
  display: grid;
  grid-template-columns: minmax(0,1.09fr) minmax(0,.91fr);
  gap: 26px;
  align-items: stretch;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  min-height: 0;
}
#planes .selector-zone {
  min-width: 0;
  padding: 26px 4px 14px 0;
  border: 0;
  background: transparent;
}
#planes .selector-caption {
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 1.55px;
}
#planes .selector-heading h3 {
  margin-top: 8px;
  font-size: 21px;
  font-weight: 760;
  line-height: 1.24;
  letter-spacing: -.032em;
}
#planes .selector-heading.second-selector,
#planes .selector-heading.third-selector {
  margin-top: 24px;
}
#planes #planCountry {
  margin-top: 13px;
  height: 54px;
  min-height: 54px;
  border-color: #355879;
  background: #102540;
  font-size: 17.5px;
  border-radius: 13px;
}
#planes .option-row,
#planes .duration-row {
  margin-top: 13px;
  gap: 10px;
}
#planes .option-button {
  min-height: 54px;
  height: 54px;
  border-radius: 11px;
  font-size: 22px;
}
#planes .duration-button {
  min-height: 52px;
  height: 52px;
  border-radius: 11px;
  font-size: 15.5px;
}
#planes #selectorFootnote {
  margin-top: 15px;
  line-height: 1.55;
  font-size: 12.5px;
  color: #a9c4e0;
}

/* El resumen ahora es una tarjeta, no la mitad derecha de un marco compartido. */
#planes .plan-summary-premium {
  min-width: 0;
  align-self: stretch;
  border: 1px solid rgba(66,109,161,.56);
  border-radius: 21px;
  padding: 24px 27px 23px;
  background:
    radial-gradient(ellipse 73% 43% at 98% 1%, rgba(57,117,211,.20), transparent 90%),
    linear-gradient(159deg, #173556 0%, #122a48 53%, #0e203a 100%);
  box-shadow: 0 22px 58px rgba(0,5,20,.18), inset 0 1px 0 rgba(182,221,255,.045);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
#planes .plan-summary-premium::before {
  display: none;
}
#planes .plan-summary-premium::after {
  opacity: .64;
}
#planes .plan-summary-premium .summary-premium-top {
  min-height: 17px;
}
#planes .plan-summary-premium .summary-mini {
  font-size: 11px;
  letter-spacing: 1.35px;
}
#planes .plan-summary-premium .summary-plan-hero {
  margin-top: 20px;
  margin-bottom: 18px;
}
#planes .summary-plan-identification > .summary-inline-meta {
  margin-top: 13px;
}
#planes .plan-summary-premium .summary-price-card {
  border-radius: 15px;
  padding: 20px 19px 19px;
}
#planes .plan-summary-premium .summary-payment-note {
  margin-top: 16px;
}
#planes .plan-summary-premium button.summary-primary-cta {
  margin-top: 18px;
  min-height: 53px;
}
#planes .summary-footer-notes {
  margin-top: 12px;
}

/* Se conserva el título del tamaño de Instalación, pero con un margen fluido. */
@media (min-width:861px) {
  #planes .section-top.centered {
    margin-bottom: 20px;
  }
}

/* Vista de escritorio con altura limitada: mantener el formulario legible y
   mostrar, cuando es posible, el título y la tarjeta en una misma pantalla. */
@media (min-width:861px) and (max-height:835px) {
  #planes .section-top.centered {
    margin-bottom: 10px;
  }
  #planes .selector-zone {
    padding-top: 17px;
    padding-bottom: 8px;
  }
  #planes .selector-caption {
    font-size: 10.6px;
  }
  #planes .selector-heading h3 {
    margin-top: 6px;
    font-size: 19.8px;
  }
  #planes .selector-heading.second-selector,
  #planes .selector-heading.third-selector {
    margin-top: 18px;
  }
  #planes #planCountry {
    height: 48px;
    min-height: 48px;
    margin-top: 9px;
    font-size: 16.8px;
  }
  #planes .option-row,#planes .duration-row {
    margin-top: 10px;
    gap: 8px;
  }
  #planes .option-button {
    height: 48px;
    min-height: 48px;
    font-size: 20px;
  }
  #planes .duration-button {
    height: 47px;
    min-height: 47px;
    font-size: 14.5px;
  }
  #planes #selectorFootnote {
    margin-top: 10px;
    font-size: 11.8px;
  }
  #planes .plan-summary-premium {
    padding: 17px 22px 17px;
  }
  #planes .plan-summary-premium .summary-plan-hero {
    margin-top: 12px;
    margin-bottom: 13px;
  }
  #planes .summary-plan-identification > .summary-inline-meta {
    margin-top: 9px;
  }
  #planes .plan-summary-premium .summary-price-card {
    padding: 14px 16px;
  }
  #planes .plan-summary-premium .summary-payment-note {
    margin-top: 11px;
  }
  #planes .plan-summary-premium button.summary-primary-cta {
    margin-top: 12px;
    min-height: 48px;
  }
  #planes .summary-footer-notes {
    margin-top: 8px;
  }
  /* Para 3/6/12 meses se comprime solamente el resumen, no el texto principal. */
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium {
    padding-top: 14px;
    padding-bottom: 13px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium .summary-plan-hero {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .summary-plan-identification > .summary-inline-meta {
    margin-top: 6px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium .summary-price-card {
    padding: 11px 14px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium .plan-comparison {
    margin-top: 7px;
    padding: 8px 10px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium .plan-comparison .comparison-savings {
    margin-top: 6px;
    padding: 7px 9px;
  }
  #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;
    min-height: 46px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .summary-footer-notes {
    margin-top: 6px;
  }
}

@media (min-width:861px) and (max-width:1060px) {
  #planes .plans-shell {
    grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr);
    gap: 20px;
  }
  #planes .selector-zone {
    padding-left: 0;
    padding-right: 0;
  }
  #planes .plan-summary-premium {
    padding-left: 19px;
    padding-right: 19px;
  }
}

/* En tablet y celular se apila el formulario seguido de su resumen.
   Mantener áreas táctiles cómodas y separación similar a Instalación. */
@media (max-width:860px) {
  #planes .plans-shell {
    grid-template-columns: minmax(0,1fr);
    gap: 18px;
  }
  #planes .selector-zone {
    padding: 10px 0 12px;
  }
  #planes .plan-summary-premium {
    border-radius: 18px;
    padding: 25px 25px 24px;
  }
  #planes .selector-caption {
    font-size: 11px;
  }
  #planes .selector-heading h3 {
    font-size: 21px;
  }
}
@media (max-width:600px) {
  #planes .plans-shell {gap:15px;}
  #planes .selector-zone {padding: 6px 0 12px;}
  #planes .selector-heading h3 {font-size:20px;}
  #planes .plan-summary-premium {
    padding: 22px 18px 22px;
    border-radius: 16px;
  }
}

/* Plazos largos en pantallas bajas: reservar un pequeño margen inferior.
   Sólo se reducen huecos del resumen, sin tocar tamaño de las letras. */
@media (min-width:861px) and (max-height:810px) {
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium {
    padding-top: 12px;
    padding-bottom: 11px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium .summary-plan-hero {
    margin-top: 5px;
    margin-bottom: 6px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium .summary-price-card {
    padding-top: 10px;
    padding-bottom: 11px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .plan-summary-premium .summary-payment-note {
    margin-top: 6px;
  }
  #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: 5px;
  }
}