/* ============================================================
   Estilos de /precios. Se cargan encima de legal.css (mismos
   colores, tipografía y nebulosa que el resto de HookOrbit) y solo
   agregan los componentes propios de esta página: el interruptor
   Mensual/Anual y las dos tarjetas de plan.
   ============================================================ */

:root { --radius: 20px; }

/* legal.css deja al logo su propio margen inferior para cuando va solo en su
   fila; acá comparte fila con el selector de idioma. */
.top-actions .brand-logo { margin-bottom: 0; }

/* legal.css limita .page a 720px (pensado para texto largo tipo
   privacidad/términos); esta página necesita más ancho para las dos
   tarjetas lado a lado. */
.page-precios { max-width: 960px; }

.precios-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.precios-head h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 600;
  margin-bottom: 10px;
}

.precios-sub { color: var(--muted); font-size: 1rem; }

/* ---------- Interruptor Mensual / Anual ---------- */
.billing-toggle {
  position: relative;
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(16, 18, 40, 0.6);
  border: 1px solid var(--border-strong);
  margin-top: 24px;
}

.billing-opt {
  font: 600 0.85rem var(--font-display);
  color: var(--muted);
  background: none;
  border: 0;
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s, background 0.25s;
}

.billing-opt:hover { color: var(--text); }

.billing-opt[aria-pressed="true"] {
  color: #fff;
  background: var(--grad-boton);
}

/* "2 meses gratis": burbuja flotante en la esquina superior derecha del
   interruptor completo (que coincide con el botón "Anual", el de más a la
   derecha) — no relativa al botón en sí, para que no quede centrada entre
   los dos. Se ancla al punto exacto de esa esquina y se corre una fracción
   de su propio ancho/alto hacia afuera, así su borde derecho sobresale un
   poco del interruptor pero la mayor parte queda claramente sobre "Anual".
   Más suave que la etiqueta "Más popular" de la tarjeta Pro: fondo oscuro,
   borde en degradado, texto morado claro. */
.billing-badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(38%, -60%);
  font: 700 0.72rem var(--font-body);
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--lila);
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(rgba(10, 11, 26, 0.92), rgba(10, 11, 26, 0.92)) padding-box,
              var(--grad) border-box;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* En celular angosto (390px y similares) el texto se achica un poco; el
   corrimiento sigue siendo un porcentaje de su propio tamaño, así que no
   se acerca al borde de la pantalla ni se corta. */
@media (max-width: 420px) {
  .billing-badge { font-size: 0.66rem; padding: 2px 8px; }
}

/* ---------- Tarjetas de plan ---------- */
.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 44px 0 24px;
  align-items: stretch;
}

@media (max-width: 720px) {
  .plans { grid-template-columns: 1fr; margin-top: 36px; }
  /* En una sola columna, Pro va primero: es el plan que queremos vender y no
     debe quedar bajo el pliegue detrás de Gratis. */
  .plan-card--pro { order: -1; }
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* La tarjeta Pro se destaca: borde y fondo con el degradado de la marca,
   un poco más de sombra, para que sea obvio cuál es el plan recomendado. */
.plan-card--pro {
  border-color: rgba(139, 92, 246, 0.55);
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.12), rgba(16, 18, 40, 0.68));
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.22) inset, 0 24px 70px rgba(99, 102, 241, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

@media (min-width: 721px) {
  /* Un poco más grande que la de al lado, para reforzar que es la recomendada.
     Origen arriba: crece hacia abajo, así las dos tarjetas siguen alineadas
     por el borde superior en vez de que Pro "flote" más alto que Gratis. */
  .plan-card--pro { transform: scale(1.03); transform-origin: top center; }
}

.plan-badge {
  position: absolute;
  top: -14px;
  left: 28px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--grad-boton);
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(139, 92, 246, 0.45);
}

.plan-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 14px;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.plan-price .amount {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--text);
}

.plan-price .period { color: var(--muted); font-size: 0.95rem; }

.plan-price-note {
  color: var(--faint);
  font-size: 0.85rem;
  margin-top: 6px;
  min-height: 1.2em;
}

.plan-features {
  list-style: none;
  margin: 24px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}

.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.4;
}

.plan-features li::before {
  content: "✦";
  color: var(--lila);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Botón base: borde sencillo, sin degradado. Solo el de Pro (más abajo) lleva
   el degradado llamativo, para que quede claro cuál es el plan recomendado. */
.plan-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  margin-top: auto;
  font: 600 0.95rem var(--font-body);
  color: var(--text);
  text-decoration: none;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.2s, box-shadow 0.25s, opacity 0.2s, background 0.2s, border-color 0.2s;
}

.plan-btn:not(:disabled):not(.is-current):hover {
  border-color: rgba(139, 92, 246, 0.5);
  background: rgba(255, 255, 255, 0.09);
}

#btnPro {
  color: #fff;
  background: var(--grad-boton);
  border: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 8px 26px rgba(99, 102, 241, 0.35);
}

#btnPro:not(:disabled):not(.is-current):hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 12px 34px rgba(139, 92, 246, 0.5);
}

/* Plan actual (o ya incluido en el plan de la persona): apagado, sin
   degradado, para que solo el llamado a la acción de Pro destaque. */
.plan-btn.is-current {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Pro con plan Pro: "Gestionar suscripción" (abre el portal de Stripe).
   Sin degradado, como el plan actual, pero se puede usar. */
#btnPro.is-manage {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.16));
  box-shadow: none;
}

#btnPro.is-manage:not(:disabled):hover {
  transform: none;
  border-color: rgba(139, 92, 246, 0.5);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: none;
}

/* Mientras se espera a Stripe (o se revisa la sesión al cargar) */
#btnPro:disabled { cursor: wait; opacity: 0.75; }
/* "Próximamente" (sin pagos para esta cuenta): no está cargando, solo no disponible */
#btnPro.is-proximamente:disabled { cursor: default; opacity: 1; }

.plan-btn-error {
  text-wrap: balance;
  text-align: center;
  color: var(--rosa);
  font-size: 0.82rem;
  margin-top: 10px;
}

.plan-btn small {
  /* "Tu plan termina el 27 de septiembre de 2027" ocupa dos líneas en
     celular: repartidas parejas, sin dejar el año solo abajo */
  text-wrap: balance;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 500;
  opacity: 0.85;
  margin-top: 2px;
}

/* Solo existe en la tarjeta Pro (no hay markup equivalente en Gratis). */
.plan-btn-nota {
  text-align: center;
  color: var(--faint);
  font-size: 0.8rem;
  margin-top: 10px;
}

.precios-nota {
  text-align: center;
  color: var(--faint);
  font-size: 0.85rem;
  margin: 4px 0 48px;
}