/* 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 --- */
/* --- Estilo Realista / Clásico (paso 3): dos pills en una píldora --- */
.ob-style-pills {
  display: inline-flex;
  gap: 0.25rem;
  margin-top: 0.9rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(11, 15, 43, 0.06);
}
.ob-style-pills[hidden] { display: none; }
.ob-style-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.25rem 0.95rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ob-style-pill input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.ob-style-pill:has(input:checked) { background: var(--violet); color: #fff; box-shadow: var(--shadow-soft); }
.ob-style-pill:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: 2px; }
.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;
}
/* Brillo de carga (feedback 2026-09-15): en frío la franja tarda ~2 s y el
   recuadro mostraba el alt. Sobre el color de la escena (--tpl-bg), con el
   texto transparente hasta que la imagen llega (is-ready lo pone el JS). */
.ob-tpl-strip:not(.is-ready) {
  color: transparent;
  background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.38) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: ob-shimmer 1.4s linear infinite;
}
@keyframes ob-shimmer {
  from { background-position: 130% 0; }
  to { background-position: -30% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ob-tpl-strip:not(.is-ready) { animation: none; }
}
.ob-tpl-name { font-size: 0.78rem; font-weight: 600; text-align: center; }
.ob-tint-toggle { margin: 0.75rem 0 0.15rem; }

/* --- 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 ---
   El pase de Apple Wallet estilizado pero fiel (feedback 2026-09-15): la
   franja va de borde a borde y sin esquinas propias (la tarjeta la recorta),
   los rótulos toman el acento como el labelColor real, la fila COMERCIO /
   CLIENTE / RECOMPENSA va debajo, después el espacio del pase y el código en
   su caja blanca con el serial. Misma anatomía que la cara iOS del editor
   (flow.css .flow-face-ios). 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);
  --pc-pad-x: 14px;
  margin: 0;
  padding: 14px var(--pc-pad-x) 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  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;
  overflow: hidden;
}
.ob-shell .ob-card.is-light { --pc-ink: #0b0f2b; --pc-label: rgba(11, 15, 43, 0.6); border-color: rgba(11, 15, 43, 0.1); }
.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; }
/* Apple dibuja logo.png tal cual sobre el color del pase: sin plato blanco
   ni recorte cuadrado (esos son de Google). */
.ob-shell .ob-card-logo { flex: none; width: auto; max-width: 96px; height: 28px; border-radius: 0; object-fit: contain; background: transparent; }
.ob-shell .ob-card-logo[hidden] { display: none; }
.ob-shell .ob-card:has(.ob-card-logo:not([hidden])) .ob-card-initial { display: none; }
/* Rótulos con el acento, como el labelColor del pase real (builders). */
.ob-shell .ob-card .pc-sellos { font-size: 0.55rem; letter-spacing: 0.06em; color: var(--pc-stamp, var(--pc-label)); }
.ob-shell .ob-card .pc-sellos strong { font-size: 1.05rem; display: inline-block; color: var(--pc-ink); }
.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: calc(100% + var(--pc-pad-x) * 2);
  max-width: none;
  height: auto;
  aspect-ratio: 375 / 144;
  margin: 12px calc(var(--pc-pad-x) * -1) 0;
  border-radius: 0;
  transition: opacity 0.2s;
}
.ob-shell .ob-card-strip.is-loading { opacity: 0.6; }
.ob-shell .ob-card-strip:not(.is-ready) {
  color: transparent;
  background-color: rgba(255, 255, 255, 0.08);
  background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: ob-shimmer 1.4s linear infinite;
}
.ob-shell .ob-card-row { display: flex; gap: 12px; margin-top: 12px; }
.ob-shell .ob-card-field { display: flex; flex: 1 1 0; flex-direction: column; gap: 2px; min-width: 0; }
/* La recompensa se lee completa; comercio y cliente truncan primero, como
   en el pase real. */
.ob-shell .ob-card-field-reward { flex: 1.5 1 0; }
.ob-shell .ob-card-label { font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pc-stamp, var(--pc-label)); }
.ob-shell .ob-card-value { font-size: 0.8rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-shell .ob-card-field-reward .ob-card-value { white-space: normal; overflow-wrap: anywhere; }
.ob-shell .ob-card-space { height: 44px; }
.ob-shell .ob-card-qr { margin-top: 0; display: flex; justify-content: center; }
.ob-shell .ob-card-code {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  padding: 8px 12px 6px;
  border-radius: 10px;
  background: #fff;
  color: #0b0f2b;
}
.ob-shell .ob-card-qr svg { display: block; width: 84px; height: 84px; color: #0b0f2b; }
.ob-shell .ob-card-serial { max-width: 160px; font-size: 0.5rem; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #0b0f2b; }
/* Móvil: la tarjeta se compacta a cabecera + franja + campos, para dejar el
   fold al paso. */
@media (max-width: 899px) {
  .ob-shell .ob-card { --pc-pad-x: 11px; max-width: 300px; margin: 0 auto; padding: 9px var(--pc-pad-x) 10px; border-radius: 12px; }
  .ob-shell .ob-card .pc-logo { font-size: 0.82rem; }
  .ob-shell .ob-card-strip { margin-top: 8px; }
  .ob-shell .ob-card-row { margin-top: 8px; gap: 8px; }
  .ob-shell .ob-card-label { font-size: 0.5rem; }
  .ob-shell .ob-card-value { font-size: 0.72rem; }
  .ob-shell .ob-card-space, .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; }
}