/* ═══════════════════════════════════════════════════════════════════════════
   /pase/, /pase/listo/, /arrepentimiento/ y /baja/. Se apoya en enlace.css
   (paleta, barra, botones) y legal.css (la columna de lectura).
   ═══════════════════════════════════════════════════════════════════════════ */

.bloque {
  background: var(--surface);
  border: 1px solid var(--slate-200);
  border-radius: 20px;
  padding: 24px;
  margin: 0 0 20px;
}
.bloque h2 { margin-top: 0; }

.precio { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 6px; }
.precio strong { font-size: 2.2rem; font-weight: 900; color: var(--teal-900); line-height: 1.1; }
.precio span { color: var(--gray-500); font-size: 0.95rem; }

.opciones { display: grid; gap: 10px; margin: 8px 0 0; }
.opcion {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 1px solid var(--slate-200); border-radius: 14px; padding: 14px 16px; background: #fff;
}
.opcion:has(input:checked) { border-color: var(--teal-600); background: var(--teal-100); box-shadow: 0 0 0 1px var(--teal-600); }
.opcion input { width: 20px; height: 20px; accent-color: var(--teal-600); flex: none; margin: 0; }
.opcion-cuerpo { display: grid; gap: 2px; flex: 1; min-width: 0; }
.opcion-cuerpo strong { font-size: 1.1rem; color: var(--teal-900); }
.opcion-cuerpo small { color: var(--gray-500); font-size: 0.9rem; }
.opcion-cuerpo em {
  font-style: normal; font-size: 0.82rem; font-weight: 700; color: var(--teal-700);
  justify-self: start; border: 1px solid var(--slate-200); border-radius: 99px; padding: 1px 8px; background: #fff;
}
.opcion-precio { font-weight: 900; font-size: 1.15rem; color: var(--teal-900); white-space: nowrap; }

.incluye { list-style: none; padding: 0; margin: 12px 0 0; }
.incluye li { position: relative; padding-left: 26px; }
.incluye li::before {
  content: ''; position: absolute; left: 4px; top: 0.55em;
  width: 10px; height: 6px;
  border-left: 2.5px solid var(--teal-600); border-bottom: 2.5px solid var(--teal-600);
  transform: rotate(-45deg);
}

/* ── Cuenta ─────────────────────────────────────────────────────────────── */
.cuenta-activa {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: #F8FAFC; border: 1px solid var(--slate-200); border-radius: 12px;
  padding: 12px 14px; font-weight: 700; overflow-wrap: anywhere;
}
.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--teal-700); font-weight: 700; text-decoration: underline;
}
.login { display: grid; gap: 12px; }
.login form { display: grid; gap: 10px; }
.login label { display: grid; gap: 4px; font-size: 0.92rem; font-weight: 700; }
.login input {
  font: inherit; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--slate-200); background: #fff; color: var(--teal-900);
}
.login input:focus { outline: 2px solid var(--teal-500); outline-offset: 1px; }
.separador { text-align: center; color: var(--gray-500); font-size: 0.88rem; }
.btn-google { background: #fff; color: var(--teal-900); border-color: var(--slate-200); width: 100%; }
.login .btn-primary { width: 100%; }

.cuenta-error, .error {
  margin: 0; padding: 10px 14px; border-radius: 12px;
  background: #FEF2F2; color: #991B1B; font-weight: 600; font-size: 0.95rem;
}
.ok {
  margin: 0; padding: 12px 14px; border-radius: 12px;
  background: var(--teal-100); color: var(--teal-900); font-weight: 700;
}
main .aclaracion, main.legal p.aclaracion { color: var(--gray-500); font-size: 0.95rem; }

.consentimiento { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0; font-size: 0.98rem; }
.consentimiento input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--teal-600); flex: none; }

.btn { font-family: inherit; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-ancho { width: 100%; }

.codigo {
  display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--teal-100); color: var(--teal-700);
  padding: 4px 10px; border-radius: 8px; font-size: 1.1rem; font-weight: 800;
}

.enlaces-legales { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }