/* Asistente de registro (spec 2026-09-05, revisión 2026-09-06). Prefijo ob-
   para no chocar con .card/.reveal de la home ni con .auth-* del login.
   Tokens de marca en landing.css (--navy, --violet, --blue, --teal, --light,
   --grad-brand). Criterio móvil: cada paso entra en un fold de 390x844 con
   la tarjeta viva compacta arriba. */

.ob-shell {
  position: relative;
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 3rem;
}
@media (min-width: 900px) { .ob-shell { padding-top: 2.25rem; } }

/* Lo que solo tiene sentido sin JS (checkboxes que los botones fijan). */
.ob-shell:not(.no-js) .ob-nojs-only { display: none; }
/* Arranque: mientras el JS restaura el borrador (paso, valores, franja de la
   tarjeta) nada se pinta, así no se ven los valores por defecto un instante
   antes de los del comercio. Ocupa su espacio (visibility) y sin transiciones,
   para que la barra y la tarjeta no aparezcan a medio animar. */
.ob-shell.is-booting .ob-progress, .ob-shell.is-booting .ob-layout, .ob-shell.is-booting .ob-resumed { visibility: hidden; }
.ob-shell.is-booting * { transition: none !important; animation: none !important; }

/* --- Progreso --- */
.ob-progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
}
@media (min-width: 640px) { .ob-progress { gap: 0.75rem; } }
/* Volver: solo el ícono, 36 px de área táctil. */
.ob-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1.5px solid rgba(11, 15, 43, 0.12);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.ob-back svg { width: 18px; height: 18px; }
.ob-back:hover { border-color: var(--violet); transform: translateY(-1px); }
.ob-back:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
/* Oculto sigue ocupando su celda: la barra no salta en el paso 1. */
.ob-back[hidden] { display: inline-flex; visibility: hidden; pointer-events: none; }
/* Barra de progreso delgada: cabe en cualquier ancho, sin puntos que se
   desborden. El JS fija el ancho del relleno (n/total). */
.ob-bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(11, 15, 43, 0.1);
  overflow: hidden;
}
.ob-bar-fill {
  display: block;
  width: 14.3%;
  height: 100%;
  border-radius: 999px;
  background: var(--grad-brand);
  transition: width 0.3s ease;
}
/* El placeholder no puede parecer texto escrito: más claro y en cursiva. */
.ob-shell .passito-input::placeholder { color: #aab0cc; font-style: italic; opacity: 1; }
.ob-resumed {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: rgba(11, 15, 43, 0.62);
}
.ob-resumed-reset {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: #6b4dff;
  text-decoration: underline;
  cursor: pointer;
}
.ob-counter {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  white-space: nowrap;
}

/* --- Layout: pasos a la izquierda, tarjeta viva a la derecha --- */
.ob-layout { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
/* Las columnas nunca crecen por el contenido: con la letra del sistema
   agrandada, el ancho mínimo de los carriles empujaba la columna más allá
   del viewport y la tarjeta y el título salían cortados (visto en Android). */
.ob-layout > * { min-width: 0; }
.ob-shell { overflow-x: clip; }
.ob-card-col { order: -1; }
/* Con JS la tarjeta aparece desde el paso 3; el script inline del template
   quita no-js antes de pintar el aside, así no hay parpadeo. */
.ob-shell:not(.no-js) .ob-card-col[hidden] { display: none; }
@media (min-width: 900px) {
  .ob-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; align-items: start; margin-top: 1.75rem; }
  .ob-card-col { order: 1; position: sticky; top: 5.5rem; }
  /* Pasos 1 y 2 (sin tarjeta viva): en vez de dejar el carril derecho
     vacío y el paso pegado a la izquierda, el asistente entero se angosta
     y queda centrado, barra de progreso incluida. */
  .ob-shell:not(.no-js):has(.ob-card-col[hidden]) { max-width: 46rem; }
  .ob-shell:not(.no-js):has(.ob-card-col[hidden]) .ob-layout { grid-template-columns: minmax(0, 1fr); }
}
.ob-card-caption { margin-top: 0.6rem; text-align: center; font-size: 0.72rem; color: #64748b; }
@media (max-width: 899px) { .ob-card-caption { display: none; } }

/* --- Pasos --- */
.ob-step { display: none; }
.ob-step.is-active { display: block; animation: ob-in 0.22s ease-out; }
.no-js .ob-step { display: block; }
.no-js .ob-step + .ob-step { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid rgba(11, 15, 43, 0.08); }
.no-js .ob-autohint, .no-js .ob-back { display: none; }
@keyframes ob-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.ob-tag {
  display: inline-flex;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ob-tag[data-tone="violet"] { background: rgba(107, 77, 255, 0.12); color: var(--violet); }
.ob-tag[data-tone="blue"] { background: rgba(61, 123, 255, 0.12); color: var(--blue); }
.ob-tag[data-tone="teal"] { background: rgba(0, 212, 179, 0.18); color: #00806c; }
.ob-title { margin-top: 0.45rem; font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.15; }
.ob-hint { margin-top: 0.4rem; color: #64748b; font-size: 0.86rem; max-width: 34rem; }
@media (min-width: 900px) { .ob-hint { font-size: 0.95rem; } }
.ob-hint-tight { margin-top: 0.55rem; font-size: 0.74rem; }
.ob-autohint { margin-top: 0.9rem; font-size: 0.74rem; color: #94a3b8; text-align: center; }
.ob-fields { margin-top: 1.1rem; }
.ob-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin-top: 1.1rem;
}
.ob-actions .btn-primary { min-width: 11rem; text-align: center; }
.ob-actions .btn-secondary { background: #fff; }
@media (max-width: 480px) {
  .ob-actions { gap: 0.5rem; }
  .ob-actions .btn-primary, .ob-actions .btn-secondary { min-width: 0; padding: 0.7rem 1rem; font-size: 0.88rem; }
}
.ob-link {
  margin-top: 0.5rem;
  padding: 0.35rem 0;
  border: 0;
  background: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--violet);
  cursor: pointer;
}
.ob-link:hover { text-decoration: underline; }
.ob-link[hidden] { display: none; }

/* --- Tiles de categoría: en móvil, filas compactas de dos columnas --- */
.ob-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 1rem;
}
@media (min-width: 640px) { .ob-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.4rem; } }
.ob-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0.5rem 0.65rem;
  background: #fff;
  border: 1.5px solid rgba(11, 15, 43, 0.08);
  border-radius: 0.9rem;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
@media (min-width: 640px) {
  .ob-tile { flex-direction: column; justify-content: center; gap: 0.6rem; padding: 1rem 0.75rem; border-radius: 1.1rem; }
  /* La décima (Otro negocio) queda sola en la fila: se estira. */
  .ob-tile:last-child:nth-child(3n + 1) { grid-column: 1 / -1; flex-direction: row; gap: 0.9rem; padding: 0.8rem 1rem; }
}
@media (max-width: 639px) {
  .ob-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.ob-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.ob-tile input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.ob-tile:has(input:checked) { border-color: var(--teal); background: var(--light); }
.ob-tile:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: 2px; }
.ob-tile-ico {
  display: inline-flex;
  flex: none;
  padding: 0.45rem;
  border-radius: 0.7rem;
  background: var(--light);
  color: var(--violet);
}
@media (min-width: 640px) { .ob-tile-ico { padding: 0.7rem; border-radius: 0.9rem; } }
.ob-tile:has(input:checked) .ob-tile-ico { background: #fff; }
.ob-tile-ico svg { width: 20px; height: 20px; }
@media (min-width: 640px) { .ob-tile-ico svg { width: 24px; height: 24px; } }
.ob-tile-label { font-size: 0.8rem; font-weight: 600; line-height: 1.2; }
@media (min-width: 640px) { .ob-tile-label { font-size: 0.85rem; text-align: center; } }

/* --- Plantillas de sellos: carril horizontal en móvil, grilla en escritorio --- */
.ob-templates {
  display: flex;
  gap: 0.6rem;
  margin: 1rem -1.25rem 0;
  padding: 0.25rem 1.25rem 0.5rem;
  contain: inline-size;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 640px) {
  .ob-templates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 1.4rem 0 0; padding: 0; overflow: visible; }
}
.ob-tpl {
  position: relative;
  flex: 0 0 72%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.55rem 0.55rem 0.65rem;
  background: #fff;
  border: 1.5px solid rgba(11, 15, 43, 0.08);
  border-radius: 1rem;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
@media (min-width: 640px) { .ob-tpl { flex: initial; } }
.ob-tpl[hidden] { display: none; }
.ob-tpl:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.ob-tpl input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.ob-tpl:has(input:checked) { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0, 212, 179, 0.25); }
.ob-tpl:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: 2px; }
.ob-tpl-strip {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 375 / 144;
  border-radius: 0.65rem;
  background: var(--tpl-bg, #0b0f2b);
  object-fit: cover;
}
.ob-tpl-name { font-size: 0.78rem; font-weight: 600; text-align: center; }

/* --- La meta: frase con stepper en píldora + premio (estilo propio) --- */
.ob-goal {
  margin-top: 0.9rem;
  padding: 0.85rem;
  background: #fff;
  border: 1.5px solid rgba(11, 15, 43, 0.08);
  border-radius: 1.1rem;
}
.ob-goal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
}
.ob-goal-text {
  font-family: "Poppins", "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--navy);
}
.ob-pill-stepper {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--light);
  border: 1.5px solid rgba(107, 77, 255, 0.25);
}
.ob-pill-btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--violet);
  cursor: pointer;
  transition: background 0.15s;
}
.ob-pill-btn:hover { background: rgba(107, 77, 255, 0.12); }
.ob-pill-btn:focus-visible { outline: 3px solid var(--teal); outline-offset: -3px; }
.ob-pill-stepper input {
  width: 2.6rem;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: "Poppins", "Inter", system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--navy);
  -moz-appearance: textfield;
  appearance: textfield;
}
.ob-pill-stepper input::-webkit-outer-spin-button,
.ob-pill-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ob-pill-stepper input:focus { outline: none; }
.ob-pill-stepper:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(107, 77, 255, 0.12); border-color: var(--violet); }
.ob-pill-stepper-sm .ob-pill-btn { width: 34px; height: 34px; font-size: 1.1rem; }
.ob-pill-stepper-sm input { width: 2.2rem; font-size: 1.1rem; }
.ob-goal-input { margin-top: 0.75rem; font-size: 1.05rem; }
.ob-goal .auth-label { margin-bottom: 0.4rem; }

/* Chips */
.ob-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.6rem; }
.ob-chips:empty { display: none; }
.ob-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.35rem 0.85rem;
  border: 1.5px solid rgba(11, 15, 43, 0.12);
  border-radius: 999px;
  background: #fff;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
}
.ob-chip:hover { border-color: var(--violet); transform: translateY(-1px); }
.ob-chip.is-on { background: var(--violet); border-color: var(--violet); color: #fff; }
.ob-chip:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.ob-chips-sm .ob-chip { min-height: 30px; padding: 0.25rem 0.7rem; font-size: 0.76rem; }

/* --- Etapas (prellenadas) --- */
.ob-stage-list { margin-top: 0.9rem; }
.ob-stage {
  padding: 0.9rem 1rem;
  background: #fff;
  border: 1.5px solid rgba(11, 15, 43, 0.08);
  border-radius: 1.1rem;
}
.ob-stage + .ob-stage { margin-top: 0.6rem; }
.ob-stage[hidden] { display: none; }
.ob-stage-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--violet);
}
.ob-stage .passito-input { margin-top: 0.6rem; }

/* --- Mini-devices del cumpleaños: carril en móvil, tres columnas en escritorio --- */
.ob-bday {
  display: flex;
  gap: 0.6rem;
  margin: 0.7rem -1.25rem 0;
  padding: 0 1.25rem 0.4rem;
  contain: inline-size;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 640px) {
  .ob-bday { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 1rem 0 0; padding: 0; overflow: visible; }
}
.ob-device {
  flex: 0 0 68%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.55rem;
  border-radius: 0.9rem;
  background: var(--light);
}
@media (min-width: 640px) { .ob-device { flex: initial; } }
.ob-device-os { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #64748b; }
.ob-device-note, .ob-device-banner, .ob-device-mailbox {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: var(--shadow-soft);
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--navy);
  overflow-wrap: anywhere;
}
.ob-device-banner { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(6px); border-radius: 1rem; }
.ob-device-app { font-size: 0.64rem; font-weight: 700; }
.ob-device-subject { font-weight: 700; }
.ob-device-cta {
  align-self: flex-start;
  margin-top: 0.25rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: var(--violet);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
}

/* --- Logo --- */
.ob-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 2px dashed rgba(107, 77, 255, 0.35);
  border-radius: 1.1rem;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.ob-drop:hover, .ob-drop.is-over { border-color: var(--violet); background: var(--light); }
.ob-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ob-drop:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: 2px; }
.ob-drop-ico { display: inline-flex; flex: none; padding: 0.7rem; border-radius: 1rem; background: var(--light); color: var(--violet); }
.ob-drop-ico svg { width: 24px; height: 24px; }
.ob-drop-preview { flex: none; width: 64px; height: 64px; border-radius: 1rem; object-fit: cover; background: #fff; box-shadow: var(--shadow-soft); }
.ob-drop.has-file .ob-drop-ico { display: none; }
.ob-drop-text { display: flex; flex-direction: column; gap: 0.15rem; }
.ob-drop-text strong { font-size: 0.92rem; }
.ob-drop-text span { font-size: 0.78rem; color: #64748b; }
.ob-drop-compact { margin-top: 0.9rem; padding: 0.7rem 0.85rem; gap: 0.7rem; }
.ob-drop-compact .ob-drop-ico { padding: 0.5rem; }
.ob-drop-compact .ob-drop-ico svg { width: 20px; height: 20px; }
.ob-drop-compact .ob-drop-preview { width: 48px; height: 48px; border-radius: 0.75rem; }
.ob-drop-compact .ob-drop-text strong { font-size: 0.85rem; }
.ob-drop-compact .ob-drop-text span { font-size: 0.72rem; }
/* Interruptor de colores del logo: aparece al subirlo, con dos muestras. */
.ob-brand-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--navy);
  cursor: pointer;
}
.ob-brand-toggle[hidden] { display: none; }
.ob-brand-toggle input { width: 18px; height: 18px; accent-color: var(--violet); }
.ob-brand-swatches { display: inline-flex; gap: 3px; }
.ob-brand-swatches i {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1px solid rgba(11, 15, 43, 0.12);
  background: var(--swatch, #e2e8f0);
}

/* --- Resumen compacto --- */
.ob-summary-list { display: grid; gap: 0.35rem 1rem; margin: 1rem 0 0; }
@media (min-width: 640px) { .ob-summary-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ob-summary-list > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.5rem; font-size: 0.85rem; }
.ob-summary-list dt { color: #64748b; }
.ob-summary-list dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ob-summary-title {
  font-family: "Poppins", "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--violet);
}

/* --- Plan: una línea, detalle plegado --- */
.ob-included {
  margin-top: 1rem;
  border-radius: 1.1rem;
  background: #fff;
  border: 1.5px solid rgba(11, 15, 43, 0.08);
}
.ob-included-summary {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
  cursor: pointer;
  list-style: none;
}
.ob-included-summary::-webkit-details-marker { display: none; }
.ob-included-summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 1.1rem; }
.ob-included-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.5rem; }
.ob-included-badge {
  display: inline-flex;
  align-self: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--grad-brand);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ob-price { font-family: "Poppins", "Inter", system-ui, sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--navy); }
.ob-price-period { font-size: 0.8rem; color: #64748b; }
/* Oferta (decisión 2026-09-06): precio tachado, "Gratis N días" grande y el
   descuento como etiqueta. Que se note que empezar es gratis. */
.ob-price-old { font-family: "Poppins", "Inter", system-ui, sans-serif; font-size: 0.95rem; color: #94a3b8; text-decoration-thickness: 2px; }
.ob-price-free { font-size: 1.25rem; color: var(--violet); }
.ob-offer-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--navy); }
.ob-offer-badge {
  display: inline-flex; padding: 0.15rem 0.5rem; border-radius: 999px;
  background: var(--teal); color: var(--navy); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em;
}
.ob-offer-expired { font-size: 0.78rem; color: #b45309; }
.ob-countdown { font-size: 0.78rem; font-weight: 700; color: #b45309; font-variant-numeric: tabular-nums; }
.ob-countdown.is-over { color: #64748b; }
/* Barra de promoción, arriba de todos los pasos (con cuenta regresiva si vence). */
.ob-promo-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem;
  margin: 0.75rem 0 0; padding: 0.5rem 0.8rem; border-radius: 0.8rem;
  background: rgba(107, 77, 255, 0.08); border: 1px solid rgba(107, 77, 255, 0.18);
  font-size: 0.8rem; color: var(--navy);
}
.ob-promo-tag {
  display: inline-flex; padding: 0.15rem 0.5rem; border-radius: 999px;
  background: var(--grad-brand); color: #fff; font-size: 0.72rem; font-weight: 800;
}
.ob-promo-text { font-weight: 600; }
.ob-promo-name { font-weight: 800; }
.ob-offer-countdown { font-size: 0.78rem; color: #475569; }
.ob-promo-bar .ob-countdown { margin-left: auto; }
.ob-shell.is-booting .ob-promo-bar { visibility: hidden; }
.ob-included-limits { font-size: 0.8rem; color: #475569; }
.ob-included-toggle { font-size: 0.78rem; font-weight: 600; color: var(--violet); }
.ob-included-toggle::after { content: " \2193"; }
.ob-included[open] .ob-included-toggle::after { content: " \2191"; }
.ob-included-body { padding: 0 1rem 1rem; border-top: 1px solid rgba(11, 15, 43, 0.07); }
.ob-included-list { display: grid; gap: 0.45rem 1.25rem; margin: 0.9rem 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .ob-included-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ob-included-list li { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.82rem; }
.ob-included-list svg { flex: none; width: 17px; height: 17px; margin-top: 0.05rem; color: var(--teal); }
.ob-assurances {
  display: grid;
  gap: 0.6rem 1.25rem;
  margin: 1rem 0 0;
  padding: 0.9rem 0 0;
  list-style: none;
  border-top: 1px solid rgba(11, 15, 43, 0.07);
}
@media (min-width: 640px) { .ob-assurances { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ob-assurances li { display: flex; flex-direction: column; gap: 0.1rem; }
.ob-assurances strong { font-size: 0.82rem; }
.ob-assurances span { font-size: 0.76rem; color: #64748b; }
.ob-included-foot { margin-top: 0.9rem; font-size: 0.76rem; color: #64748b; }

/* --- Cuenta (último paso) --- */
.ob-account { margin-top: 1rem; }
/* Google Sign-In (decisión 2026-09-06): el botón de Google arriba y el
   formulario de correo plegado como alternativa. */
.ob-google { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding-bottom: 1rem; }
.ob-google .g_id_signin { min-height: 44px; }
.ob-google-hint { margin: 0; font-size: 0.82rem; color: #475569; text-align: center; max-width: 24rem; }
.ob-alt-email { border-top: 1px solid rgba(11, 15, 43, 0.08); padding-top: 0.9rem; }
.ob-alt-summary { cursor: pointer; list-style: none; font-size: 0.86rem; font-weight: 600; color: var(--violet); }
.ob-alt-summary::-webkit-details-marker { display: none; }
.ob-alt-summary::after { content: " \2193"; }
.ob-alt-email[open] .ob-alt-summary::after { content: " \2191"; }
.ob-alt-summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 0.4rem; }
.ob-alt-email[open] .ob-alt-summary { margin-bottom: 0.9rem; }
.ob-account .ob-summary-title { margin-bottom: 0.8rem; }
.ob-account .auth-field + .auth-field { margin-top: 0.9rem; }
.ob-account .auth-check { margin-top: 1.1rem; }
.ob-account .btn-primary { margin-top: 1.1rem; }

/* --- Tarjeta viva ---
   landing.css se carga después de este archivo, así que .wallet-card, .pcc y
   .pc-* le ganarían a una sola clase: todo va anclado a .ob-shell. */
.ob-shell .ob-card {
  --pc-ink: #ffffff;
  --pc-label: rgba(255, 255, 255, 0.75);
  --pc-empty: rgba(255, 255, 255, 0.45);
  margin: 0;
  padding: 14px 14px 16px;
  border-radius: 18px;
  background: var(--pc-bg, var(--navy));
  color: var(--pc-ink);
  box-shadow: var(--shadow-lift);
  opacity: 1;
  transform: none;
  animation: none;
  transition: background 0.3s ease;
}
.ob-shell .ob-card.is-light { --pc-ink: #0b0f2b; --pc-label: rgba(11, 15, 43, 0.6); }
.ob-shell .ob-card .pc-logo { font-size: 0.9rem; gap: 8px; min-width: 0; }
.ob-shell .ob-card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-shell .ob-card-initial {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--pc-bg, var(--navy));
  font-size: 0.85rem;
}
.ob-shell .ob-card.is-light .ob-card-initial { background: rgba(11, 15, 43, 0.9); color: #fff; }
.ob-shell .ob-card-logo { flex: none; width: 28px; height: 28px; border-radius: 8px; object-fit: cover; background: #fff; }
.ob-shell .ob-card-logo[hidden] { display: none; }
.ob-shell .ob-card:has(.ob-card-logo:not([hidden])) .ob-card-initial { display: none; }
.ob-shell .ob-card .pc-sellos { font-size: 0.55rem; color: var(--pc-label); }
.ob-shell .ob-card .pc-sellos strong { font-size: 1rem; display: inline-block; }
.ob-shell .ob-card .pc-sellos strong.is-pop { animation: ob-pop 0.35s ease-out; }
@keyframes ob-pop { 40% { transform: scale(1.35); } }
.ob-shell .ob-card-strip {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 375 / 144;
  margin-top: 12px;
  border-radius: 10px;
  transition: opacity 0.2s;
}
.ob-shell .ob-card-strip.is-loading { opacity: 0.6; }
.ob-shell .ob-card .pc-fields { margin-top: 12px; }
.ob-shell .ob-card .pc-label { color: var(--pc-label); }
.ob-shell .ob-card .pc-value { font-size: 0.8rem; font-weight: 600; white-space: normal; }
.ob-shell .ob-card-qr { margin-top: 12px; }
.ob-shell .ob-card-qr svg { display: block; width: 84px; height: 84px; padding: 6px; border-radius: 10px; background: #fff; color: #0b0f2b; }
/* Móvil: la tarjeta se compacta a cabecera + franja + premio en una línea,
   para dejar el fold al paso. */
@media (max-width: 899px) {
  .ob-shell .ob-card { max-width: 300px; margin: 0 auto; padding: 9px 11px 10px; border-radius: 13px; }
  .ob-shell .ob-card .pc-logo { font-size: 0.82rem; }
  .ob-shell .ob-card-strip { margin-top: 8px; border-radius: 8px; }
  .ob-shell .ob-card .pc-fields { margin-top: 8px; }
  .ob-shell .ob-card .pc-field { flex-direction: row; align-items: baseline; gap: 0.5rem; }
  .ob-shell .ob-card .pc-label { font-size: 0.52rem; }
  .ob-shell .ob-card .pc-value { font-size: 0.72rem; }
  .ob-shell .ob-card-qr { display: none; }
}

/* --- Header de la landing: en móvil se esconde al bajar (onboarding.js) --- */
@media (max-width: 899px) {
  body > header { transition: transform 0.25s ease; }
  body > header.is-hidden { transform: translateY(-100%); }
}

/* --- Movimiento: nada para quien lo pide --- */
@media (prefers-reduced-motion: reduce) {
  .ob-step.is-active, .ob-shell .ob-card, .ob-dots li, .ob-tile, .ob-tpl, .ob-chip,
  .ob-back, .ob-pill-btn, .ob-bar-fill, body > header { animation: none; transition: none; }
}