/* Planes y precios — pagina publica */

.pre-ancho { max-width: 56rem; }

.pre-cabecera { margin-bottom: var(--spacing-5); }

.pre-ancho .card { margin-bottom: var(--spacing-4); }

/* ── Planes ──────────────────────────────────────────────────────────────── */

.pre-planes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-5);
}

.pre-plan {
  position: relative;
  margin-bottom: 0 !important;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}

.pre-plan:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-base);
  transform: translateY(-1px);
}

.pre-plan-destacado {
  border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border));
}

/* La cinta del semestral: es el mensaje que decide la compra */
.pre-cinta {
  position: absolute;
  top: -10px;
  right: var(--spacing-4);
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.pre-plan-nombre {
  margin: 0 0 var(--spacing-2);
  font-size: 1.15rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
}

.pre-plan-desc {
  margin: 0 0 var(--spacing-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  min-height: 2.4em;
}

.pre-precio {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-bottom: var(--spacing-2);
}

.pre-moneda {
  font-size: 1.1rem;
  color: var(--color-text-secondary);
}

.pre-monto {
  font-size: 2.1rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
  line-height: 1;
}

.pre-periodo {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-left: 4px;
}

.pre-ahorro {
  margin: 0 0 var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-success);
}

.pre-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: var(--spacing-4);
}

/* Sin pasarela configurada el boton se ve inerte a proposito: prometer un
   pago que no se puede completar es peor que decir que no esta disponible. */
.pre-btn-off {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Que incluye ─────────────────────────────────────────────────────────── */

.pre-lista {
  margin: 0;
  padding-left: 1.1rem;
  columns: 2;
  column-gap: var(--spacing-5);
}

.pre-lista li {
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  break-inside: avoid;
}

/* ── Transferencia ───────────────────────────────────────────────────────── */

.pre-transfer-intro { margin-top: 0; }

.pre-nequi {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  border-radius: 8px;
  background: var(--color-bg-tertiary);
  margin-bottom: var(--spacing-4);
}

.pre-nequi > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pre-nequi strong {
  font-size: 1.05rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--color-text-primary);
}

.pre-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.pre-transfer-paso {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-3);
}

.pre-legal {
  font-size: var(--font-size-xs);
  text-align: center;
  margin-top: var(--spacing-5);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .pre-planes { grid-template-columns: 1fr; gap: var(--spacing-5); }
  .pre-lista { columns: 1; }
  .pre-plan-desc { min-height: 0; }
}

@media (max-width: 480px) {
  .pre-monto { font-size: 1.8rem; }
  .pre-nequi { flex-direction: column; align-items: stretch; }
}

/* ── Tarjeta "arma tu plan" ──────────────────────────────────────────────── */

.pre-incluye {
  margin: 0 0 var(--spacing-4);
  padding-left: 1.1rem;
}

.pre-incluye li {
  margin-bottom: 5px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Lo ilimitado es el argumento de venta frente a quien cobra por documento:
   se destaca en vez de esconderse en la descripcion. */
.pre-ilimitado {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: var(--font-weight-semibold);
  background: color-mix(in srgb, var(--color-success) 14%, transparent);
  color: var(--color-success);
}

.pre-modulos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--spacing-4);
}

.pre-modulo {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.pre-modulo:hover { border-color: var(--color-primary); }

.pre-modulo:has(input:checked) {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

/* Lo que ya compro se ve como logrado, no como una opcion apagada */
.pre-modulo.ya-tiene {
  cursor: default;
  border-color: color-mix(in srgb, var(--color-success) 40%, var(--color-border));
  background: color-mix(in srgb, var(--color-success) 6%, transparent);
}

.pre-modulo-datos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.pre-modulo-nombre {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.pre-modulo-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.45;
}

.pre-modulo-precio {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.pre-modulo.ya-tiene .pre-modulo-precio {
  color: var(--color-success);
  font-weight: var(--font-weight-medium);
}

.pre-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-border);
}

.pre-total-monto {
  font-size: 1.5rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.pre-semestral {
  margin: var(--spacing-3) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}

.pre-semestral a { color: var(--color-primary); }

@media (max-width: 480px) {
  .pre-modulo { flex-wrap: wrap; }
  .pre-modulo-precio { width: 100%; text-align: right; }
}