/* TV PLAY V1.75 — Ajustes puntuales del configurador de Planes.
   Mismo título, texto, catálogo y funcionalidad de V1.74.
   1) Más espacio entre título y descripción.
   2) PASO 1/2/3 más legibles.
   3) Grillas de botones más angostas, alineadas a la izquierda.
*/

/* Escritorio: ancho máximo de controles para no ocupar toda la columna. */
@media (min-width: 861px) {
  #planes .section-top.centered p,
  #planes:has(.duration-button.active:not([data-months="1"])) .section-top.centered p {
    margin-top: 17px;
  }
  /* Compensar el espacio agregado sobre la descripción para conservar
     el título y el configurador en el mismo encuadre. */
  #planes .section-top.centered {
    margin-bottom: 13px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .section-top.centered {
    margin-bottom: 8px;
  }
  #planes .selector-caption {
    font-size: 13px;
    letter-spacing: 1.55px;
  }
  #planes .option-row,
  #planes .duration-row {
    width: 90%;
    max-width: 555px;
    margin-left: 0;
    margin-right: auto;
  }
}

/* En pantallas bajas, una separación moderada preserva el espacio
   para el resumen y el bloque de ahorro, sin disminuir la tipografía. */
@media (min-width: 861px) and (max-height: 835px) {
  #planes .section-top.centered p,
  #planes:has(.duration-button.active:not([data-months="1"])) .section-top.centered p {
    margin-top: 12px;
  }
  #planes .section-top.centered {
    margin-bottom: 3px;
  }
  #planes:has(.duration-button.active:not([data-months="1"])) .section-top.centered {
    margin-bottom: 0;
  }
  #planes .selector-caption {
    font-size: 12.6px;
    letter-spacing: 1.45px;
  }
}

/* Tablet: acortar filas largas; mantener botones de tamaño cómodo. */
@media (min-width: 601px) and (max-width: 860px) {
  #planes .section-top.centered p {
    margin-top: 19px;
  }
  #planes .section-top.centered {
    margin-bottom: 22px;
  }
  #planes .selector-caption {
    font-size: 12.6px;
    letter-spacing: 1.5px;
  }
  #planes .option-row,
  #planes .duration-row {
    width: 90%;
    max-width: 575px;
    margin-left: 0;
    margin-right: auto;
  }
}

/* Teléfonos: los botones siguen ocupando el espacio útil para poder
   tocarlos fácilmente. Se ajusta solo texto y margen del encabezado. */
@media (max-width: 600px) {
  #planes .section-top.centered p {
    margin-top: 18px;
  }
  #planes .section-top.centered {
    margin-bottom: 20px;
  }
  #planes .selector-caption {
    font-size: 12.4px;
    letter-spacing: 1.45px;
  }
  #planes .option-row,
  #planes .duration-row {
    width: 100%;
    max-width: none;
  }
}