/* ============================================================================
   SAMAPP 1.20.0 · TUTORIAL — onboarding, guided tour y centro de aprendizaje
   ----------------------------------------------------------------------------
   Capa de presentación pura. Hereda TODO de tokens.css: colores, radios,
   sombras, tipografía y ritmo. No define paleta propia: así los cuatro cruces
   (Claro/Oscuro × Sobrio/Pastel) funcionan sin una sola regla por tema.

   Jerarquía de capas (ver base.css):
     app (≤90) < tutorial hint (55) < toast (60) < sheets/confirm (70)
     < tutorial overlay (99900) < billing-gate (100000)
   2.1.1 — El hint decía "convive bajo sheets" y estaba en 80, por encima del
   scrim (70): medido, el globo de Finanzas se pintaba SOBRE la hoja «Agregar
   método» y tapaba el campo «Saldo inicial». Ahora está de verdad por debajo.
   El overlay del tutorial queda por debajo del billing-gate a propósito: si
   el servidor exige Premium, esa puerta manda.
   2.1.2 — Nueva capa (base.css, #toast.toast-arriba): el aviso que nace con
   una hoja o un diálogo abiertos sube a 80, por encima del velo. Orden:
     tutorial hint (55) < toast (60) < sheets/confirm (70)
     < toast con capa (80) < acceso (90) < tutorial overlay (99900)
     < billing-gate (100000)
   Sólo comentario: ningún z-index de este archivo cambia.
   ========================================================================== */

/* ------------------------------------------------------------------ ROOT -- */
#tutorialRoot {
  position: fixed;
  inset: 0;
  z-index: 99900;
  font-family: var(--font-text);
}
#tutorialRoot[hidden] { display: none; }

/* Los textos del tutorial se pintan ya traducidos con I18N.t(); el walker de
   frases no debe volver a tocarlos (data-i18n-skip vive en el markup). */

/* --------------------------------------------------------------- BACKDROP --
   Pasos "card" (onboarding y módulos): velo de papel con blur, como la
   billing-gate. Pasos "spot": el velo lo dibuja la sombra del spotlight. */
.tutorial-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .26s var(--ease);
}
#tutorialRoot[data-mode="card"] .tutorial-backdrop { opacity: 1; }
#tutorialRoot[data-mode="spot"] .tutorial-backdrop { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------------ CARD -- */
.tutorial-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--s5) + var(--safe-top)) var(--s5) calc(var(--s5) + var(--safe-bottom));
  overflow-y: auto;
}
#tutorialRoot[data-mode="spot"] .tutorial-stage { display: none; }

.tutorial-card {
  width: 100%;
  max-width: 430px;
  margin: auto;               /* centrado real también cuando hay scroll */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--s6) var(--s5) var(--s5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: tutorial-in .32s var(--ease);
}
@keyframes tutorial-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Sam en un disco pequeño. Sutil: respira, no rebota. */
.tutorial-sam {
  width: 72px; height: 72px;
  border-radius: var(--r-full);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  margin-bottom: var(--s4);
  animation: tutorial-sam-breathe 3.4s var(--ease) infinite;
}
.tutorial-sam .sam-mark { width: 42px; height: 42px; }
@keyframes tutorial-sam-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
/* Confirmación: Sam asiente una vez (máx. 4 px, requisito de sutileza). */
.tutorial-sam[data-cheer="1"] { animation: tutorial-sam-nod .5s var(--ease) 1; }
@keyframes tutorial-sam-nod {
  0%,100% { transform: translateY(0); }
  40%     { transform: translateY(-4px); }
  70%     { transform: translateY(1px); }
}

.tutorial-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--ink-strong);
  margin: 0 0 var(--s2);
}
.tutorial-body {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-muted);
  margin: 0;
  max-width: 34ch;
}
.tutorial-body b, .tutorial-body strong { color: var(--ink); font-weight: 600; }

/* Texto que Sam "escribe" en la bienvenida. El caret desaparece al terminar. */
.tutorial-typed { min-height: 1.2em; }
.tutorial-typed[data-typing="1"]::after {
  content: '';
  display: inline-block;
  width: 2px; height: 1em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: var(--ink-muted);
  animation: tutorial-caret 1s steps(2, start) infinite;
}
@keyframes tutorial-caret { 50% { opacity: 0; } }

/* Aparición escalonada del cuerpo tras el typing. */
.tutorial-fade { opacity: 0; transform: translateY(4px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.tutorial-fade[data-shown="1"] { opacity: 1; transform: translateY(0); }

/* ------------------------------------------------------------------ DEMO --
   Las demostraciones son sandbox: DOM local, cero datos reales. Se etiquetan
   como ejemplo para que nunca se confundan con contenido del usuario. */
.tutorial-demo {
  width: 100%;
  margin-top: var(--s4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s4);
  text-align: left;
}
.tutorial-demo-badge {
  display: block;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s3);
}

/* Chat simulado: mismas clases visuales que el hilo real de Sam no se
   reutilizan a ciegas; se replican aquí con tokens para no depender de
   detalles internos de base.css. */
.tutorial-chat { display: flex; flex-direction: column; gap: var(--s2); }
.tutorial-msg {
  max-width: 88%;
  padding: 9px var(--s4);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.tutorial-msg[data-shown="1"] { opacity: 1; transform: translateY(0); }
.tutorial-msg-user {
  align-self: flex-end;
  background: var(--tint-atencion);
  border-radius: var(--r-md) var(--r-md) var(--r-xs) var(--r-md);
}
.tutorial-msg-sam {
  align-self: flex-start;
  background: var(--surface-sunken);
  border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-xs);
}
.tutorial-typing-dots { display: inline-flex; gap: 6px; padding: 4px 0; }
.tutorial-typing-dots i {
  width: 6px; height: 6px;
  border-radius: var(--r-full);
  background: var(--ink-faint);
  animation: tutorial-dot 1.2s var(--ease) infinite;
}
.tutorial-typing-dots i:nth-child(2) { animation-delay: .15s; }
.tutorial-typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes tutorial-dot { 0%,60%,100% { opacity: .3; } 30% { opacity: 1; } }

/* Resultado de la demo: una fila que parece de la app (pendiente, producto…) */
.tutorial-result {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s3);
  padding: 10px var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-low);
  opacity: 0;
  transform: translateY(6px) scale(.98);
  transition: opacity .34s var(--ease), transform .34s var(--ease);
}
.tutorial-result[data-shown="1"] { opacity: 1; transform: translateY(0) scale(1); }
.tutorial-result-check {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: var(--r-full);
  border: 1.6px solid var(--ctx-finanzas-soft);
  color: var(--ctx-finanzas-soft);
  display: grid;
  place-items: center;
  font-size: 0.8125rem;
  font-weight: 700;
}
.tutorial-result-copy { min-width: 0; }
.tutorial-result-copy b { display: block; font-size: 0.875rem; color: var(--ink); font-weight: 600; }
.tutorial-result-copy small { display: block; font-size: var(--t-meta); color: var(--ink-muted); margin-top: 1px; }

/* Lista de ejemplos "escríbele así" */
.tutorial-examples { display: flex; flex-direction: column; gap: var(--s2); }
.tutorial-example {
  padding: 9px var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: 0.875rem;
  color: var(--ink);
}

/* Mini estadísticas de finanzas (demo) */
.tutorial-finrow { display: flex; gap: var(--s2); }
.tutorial-finstat {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s3);
}
.tutorial-finstat small { display: block; font-size: var(--t-micro); color: var(--ink-muted); margin-bottom: 2px; }
.tutorial-finstat b { font-size: 0.9375rem; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.tutorial-finstat[data-kind="expense"] b { color: var(--ctx-expense); }
.tutorial-finstat[data-kind="income"] b { color: var(--ctx-income); }
.tutorial-finstat b .tutorial-fin-new { color: var(--ctx-expense); font-weight: 700; }

/* Lista demo (súper) */
.tutorial-list-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 8px 2px;
  font-size: 0.875rem;
  color: var(--ink);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.tutorial-list-item[data-shown="1"] { opacity: 1; transform: translateX(0); }
.tutorial-list-item i {
  width: 18px; height: 18px;
  border: 1.6px solid var(--line-strong);
  border-radius: 6px;
  flex: 0 0 auto;
}

/* Mini calendario (demo) */
.tutorial-cal { width: 100%; }
.tutorial-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--s2);
}
.tutorial-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.tutorial-cal-day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  color: var(--ink-muted);
  border-radius: var(--r-xs);
  position: relative;
}
.tutorial-cal-day[data-today="1"] { background: var(--action); color: var(--action-ink); font-weight: 700; }
.tutorial-cal-day[data-dot="1"]::after {
  content: '';
  position: absolute;
  bottom: 3px;
  width: 4px; height: 4px;
  border-radius: var(--r-full);
  background: var(--ctx-calendario);
}

/* Diagrama "todo conectado": Sam al centro, módulos alrededor. Sobrio. */
.tutorial-hub { position: relative; width: 100%; max-width: 300px; margin: 0 auto; }
.tutorial-hub svg { display: block; width: 100%; height: auto; }
.tutorial-hub svg line { stroke: var(--line-strong); stroke-width: 1.2; }
.tutorial-hub svg circle { fill: var(--surface); stroke: var(--line); stroke-width: 1.2; }
.tutorial-hub svg text {
  fill: var(--ink-muted);
  font-family: var(--font-text);
  font-size: 0.6875rem;
  text-anchor: middle;
}
.tutorial-hub .tutorial-hub-sam {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: var(--r-full);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}
.tutorial-hub .tutorial-hub-sam .sam-mark { width: 30px; height: 30px; }

/* Chips demo de personalización */
.tutorial-chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }
.tutorial-chip {
  padding: 7px var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  color: var(--ink);
  background: var(--surface);
}
.tutorial-chip[data-on="1"] { background: var(--action); color: var(--action-ink); border-color: transparent; }

/* -------------------------------------------------------------- CONTROLES -- */
.tutorial-controls {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-top: var(--s5);
}
.tutorial-controls .btn { width: 100%; }
.tutorial-nav {
  display: flex;
  gap: var(--s2);
}
.tutorial-nav .btn { flex: 1; }

.tutorial-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: var(--s4);
}
.tutorial-dots i {
  width: 6px; height: 6px;
  border-radius: var(--r-full);
  background: var(--line-strong);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tutorial-dots i[data-on="1"] { background: var(--ink); transform: scale(1.25); }

.tutorial-skip {
  margin-top: var(--s3);
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font-size: var(--t-meta);
  font-family: inherit;
  cursor: pointer;
  min-height: var(--tap);
  padding: 0 var(--s4);
}
.tutorial-skip:hover { color: var(--ink-muted); }

/* -------------------------------------------------------------- SPOTLIGHT --
   Un solo elemento posicionado sobre el objetivo real; la sombra gigante
   dibuja el velo. Respeta el radio del elemento (JS lo copia) y transiciona
   con transform/opacity-friendly properties. */
.tutorial-spot {
  position: fixed;
  z-index: 1;
  pointer-events: none;
  box-shadow: 0 0 0 200vmax rgba(9, 16, 26, .5);
  border-radius: var(--r-md);
  transition: top .3s var(--ease), left .3s var(--ease),
              width .3s var(--ease), height .3s var(--ease),
              border-radius .3s var(--ease);
}
html[data-theme="dark"] .tutorial-spot { box-shadow: 0 0 0 200vmax rgba(2, 8, 16, .62); }

/* ---------------------------------------------------------------- TOOLTIP -- */
.tutorial-tip {
  position: fixed;
  z-index: 2;
  width: min(320px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
  padding: var(--s4);
  animation: tutorial-in .3s var(--ease);
}
.tutorial-tip-title {
  font-family: var(--font-display);
  font-size: var(--t-heading);
  font-weight: 600;
  color: var(--ink-strong);
  margin: 0 0 var(--s1);
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.tutorial-tip-title .sam-mark { width: 18px; height: 18px; }
.tutorial-tip-body { font-size: 0.875rem; line-height: 1.5; color: var(--ink-muted); margin: 0; }
.tutorial-tip-foot {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
}
.tutorial-tip-foot .tutorial-dots { margin: 0; margin-right: auto; }
/* Los botones del tooltip son los únicos que compiten con el elemento
   resaltado por espacio, pero siguen siendo controles táctiles: --tap manda. */
.tutorial-tip-foot .btn { min-height: var(--tap); padding: 0 var(--s4); }

/* Flecha del tooltip: rombo con el mismo borde de la tarjeta. */
.tutorial-tip-arrow {
  position: absolute;
  width: 12px; height: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  transform: rotate(45deg);
}
.tutorial-tip[data-place="top"]    .tutorial-tip-arrow { bottom: -7px; border-top: 0; border-left: 0; }
.tutorial-tip[data-place="bottom"] .tutorial-tip-arrow { top: -7px; border-bottom: 0; border-right: 0; }
.tutorial-tip[data-place="left"]   .tutorial-tip-arrow { right: -7px; border-bottom: 0; border-left: 0; }
.tutorial-tip[data-place="right"]  .tutorial-tip-arrow { left: -7px; border-top: 0; border-right: 0; }

/* ------------------------------------------------------------ MINI CONFIRM --
   Confirmación de salida propia del tutorial. No usa #confirmScrim para no
   interferir con la pila de History del router. */
.tutorial-exit {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: var(--s5);
  background: color-mix(in srgb, var(--hero-navy) 30%, transparent);
}
.tutorial-exit-card {
  width: 100%;
  max-width: 340px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  padding: var(--s5);
  text-align: center;
  animation: tutorial-in .22s var(--ease);
}
.tutorial-exit-card h3 {
  font-family: var(--font-display);
  font-size: var(--t-heading);
  color: var(--ink-strong);
  margin: 0 0 var(--s2);
}
.tutorial-exit-card p { font-size: 0.875rem; color: var(--ink-muted); margin: 0 0 var(--s4); }
.tutorial-exit-card .tutorial-nav { margin: 0; }

/* --------------------------------------------------- CENTRO DE APRENDIZAJE --
   Vive dentro del sheet estándar; aquí solo el grid de tarjetas. */
.tutorial-center-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2);
}
@media (min-width: 700px) {
  .tutorial-center-grid { grid-template-columns: 1fr 1fr; }
}
.tutorial-center-card {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tutorial-center-card:hover { background: var(--surface-hover); border-color: var(--line-strong); }
.tutorial-center-icon {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  display: grid;
  place-items: center;
  color: var(--ink-muted);
}
.tutorial-center-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tutorial-center-icon .sam-mark { width: 20px; height: 20px; }
.tutorial-center-copy { min-width: 0; }
.tutorial-center-copy b { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.tutorial-center-copy small { display: block; font-size: var(--t-meta); color: var(--ink-muted); margin-top: 1px; }
.tutorial-center-done {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--ctx-finanzas-soft);
}
.tutorial-center-done svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tutorial-center-card-wide { grid-column: 1 / -1; }

/* ---------------------------------------------- OTROS DISPOSITIVOS · 2.0.3 --
   Sheet estándar: enlace para copiar/compartir y pasos por plataforma, con la
   del dispositivo actual primero y abierta. */
.devices-guide { display: grid; gap: var(--s3); }
.devices-lead { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--ink-muted); }
.devices-link {
  display: grid;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.devices-link-label { font-size: var(--t-meta); color: var(--ink-muted); }
.devices-link-url { font-size: 1.125rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.devices-link-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.devices-link-actions .btn { flex: 1 1 130px; min-height: var(--tap); }
.devices-platform {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.devices-platform > summary {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--tap);
  padding: var(--s3) var(--s4);
  cursor: pointer;
  list-style: none;
}
.devices-platform > summary::-webkit-details-marker { display: none; }
.devices-platform > summary::after {
  content: '';
  flex: 0 0 auto;
  margin-left: auto;
  width: 7px; height: 7px;
  border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.devices-platform[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.devices-platform-copy { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s2); }
.devices-platform-name { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.devices-here {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--ink-muted);
  white-space: nowrap;
}
.devices-steps {
  margin: 0;
  padding: 0 var(--s4) var(--s3) calc(var(--s4) + 22px);
  display: grid;
  gap: 6px;
  font-size: 0.90625rem;
  line-height: 1.45;
  color: var(--ink);
}
.devices-note { margin: 0 var(--s4) var(--s3); font-size: var(--t-meta); line-height: 1.4; color: var(--ink-muted); }
.devices-notes { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: var(--t-meta); line-height: 1.4; color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) { .devices-platform > summary::after { transition: none; } }

/* ------------------------------------------------------- HINT CONTEXTUAL --
   Burbuja discreta de primera vez. Una sola visible; convive con la tabbar
   sin taparla y respeta safe areas. */
.tutorial-hint {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--s3));
  /* 2.1.1 — Por debajo del toast (60) y de las hojas (70). Un aviso de
     primera vez no puede ganarle a lo que la persona acaba de abrir. */
  z-index: 55;
  width: min(360px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
  padding: var(--s3) var(--s4);
  animation: tutorial-in .3s var(--ease);
}
@media (min-width: 900px) {
  .tutorial-hint { bottom: var(--s5); left: auto; right: var(--s5); transform: none; }
}
.tutorial-hint .sam-mark { flex: 0 0 auto; width: 22px; height: 22px; }
.tutorial-hint-copy { flex: 1; min-width: 0; }
.tutorial-hint-copy b { display: block; font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.tutorial-hint-copy span { display: block; font-size: 0.8125rem; color: var(--ink-muted); }
.tutorial-hint-cta {
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r-full);
  /* 2.1.1 — «Ver» medía 47x34 y la × 30x30 en el aviso flotante: los dos
     únicos controles de un aviso que puede tapar contenido. */
  min-height: var(--tap);
  padding: 0 var(--s3);
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.tutorial-hint-cta:hover { background: var(--surface-hover); }
.tutorial-hint-close {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  width: var(--tap); height: var(--tap);
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: var(--r-full);
}
.tutorial-hint-close:hover { color: var(--ink-muted); background: var(--surface-sunken); }
.tutorial-hint-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Tarjeta "Ahora puedes aprender Samapp" para usuarios existentes. Reutiliza
   la anatomía del hint: mismo lugar, misma discreción. */
.tutorial-hint[data-kind="update"] .tutorial-hint-copy b { font-size: 0.875rem; }

/* --------------------------------------------------------- REDUCED MOTION -- */
@media (prefers-reduced-motion: reduce) {
  .tutorial-card,
  .tutorial-tip,
  .tutorial-hint,
  .tutorial-exit-card { animation: none; }
  .tutorial-sam,
  .tutorial-sam[data-cheer="1"] { animation: none; }
  .tutorial-typing-dots i { animation: none; opacity: .5; }
  .tutorial-typed[data-typing="1"]::after { animation: none; }
  .tutorial-spot { transition: none; }
  .tutorial-msg, .tutorial-result, .tutorial-list-item, .tutorial-fade {
    transition-duration: .01s;
  }
}

/* ------------------------------------------------ 1.32.17 · HÁBITOS (demo) -- */
.tutorial-habit {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 8px 2px;
  font-size: 0.875rem;
  color: var(--ink);
}
.tutorial-habit-check {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: var(--r-full);
  border: 1.6px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.tutorial-habit-check svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tutorial-habit[data-done="1"] .tutorial-habit-check {
  background: var(--habit-green, var(--ctx-finanzas));
  border-color: transparent;
  color: var(--habit-on-green, var(--surface));
}
.tutorial-habit-streak {
  margin-top: var(--s2);
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--habit-green-ink, var(--ink));
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.tutorial-habit-streak[data-shown="1"] { opacity: 1; }

/* ------------------------------------------ 1.32.17 · AVISO DE EJEMPLO (demo) -- */
.tutorial-notif {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 10px var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.tutorial-notif[data-shown="1"] { opacity: 1; transform: none; }
.tutorial-notif .sam-mark { flex: 0 0 auto; }
.tutorial-notif-copy { min-width: 0; display: flex; flex-direction: column; text-align: left; }
.tutorial-notif-copy small { font-size: var(--t-micro); color: var(--ink-faint); }
.tutorial-notif-copy b { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.tutorial-notif-copy span { font-size: var(--t-meta); color: var(--ink-muted); }
.tutorial-note { margin: var(--s3) 0 0; font-size: var(--t-meta); color: var(--ink-muted); }

/* --------------------------------------- 1.32.17 · BIENVENIDA ANTES DE ENTRAR --
   Vive dentro de #authGate (auth.js). Mientras está abierta, la tarjeta de
   acceso se oculta; al cerrarla vuelve exactamente como estaba. Reutiliza las
   piezas de demo del tutorial para que se vea como la app de verdad. */
.auth-gate[data-intro="1"] { align-items: stretch; padding: 0; }
.auth-gate[data-intro="1"] .auth-card { display: none; }
.auth-gate:not([data-intro="1"]) .auth-intro { display: none; }
.auth-intro {
  width: 100%;
  max-width: 480px;
  min-height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: calc(var(--s3) + var(--safe-top)) 0 calc(var(--s5) + var(--safe-bottom));
}
.auth-intro-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap);
  padding: 0 var(--s4) 0 var(--s5);
}
.auth-intro-brand {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink-strong);
}
.auth-intro-brand .sam-mark { width: 28px; height: 28px; }
.auth-intro-skip {
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: var(--t-meta);
  min-height: var(--tap);
  padding: 0 var(--s3);
  cursor: pointer;
}
.auth-intro-skip:hover { color: var(--ink); }
.auth-intro-track {
  flex: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.auth-intro-track::-webkit-scrollbar { display: none; }
.auth-intro-track:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.auth-intro-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Centrado puro dejaba un hueco grande arriba en teléfonos altos: el
     relleno inferior sube el bloque hacia el tercio superior. */
  padding: var(--s4) var(--s5) clamp(var(--s4), 9vh, 96px);
  text-align: center;
}
.auth-intro-demo { width: 100%; max-width: 360px; margin: 0 auto var(--s5); text-align: left; }
.auth-intro-demo .tutorial-demo { margin-top: 0; }
.auth-intro-demo .tutorial-result:first-child { margin-top: 0; }
.auth-intro-kind {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-size: var(--t-micro);
  font-weight: 600;
}
.auth-intro-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--ink-strong);
  margin: 0 0 var(--s2);
}
.auth-intro-body {
  max-width: 34ch;
  margin: 0 auto;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-muted);
}
.auth-intro-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  padding: 0 var(--s5);
}
.auth-intro-foot .tutorial-dots { margin-top: 0; }
.auth-intro-actions { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: var(--s2); }
.auth-intro-actions[hidden] { display: none; }
.auth-intro-note { font-size: var(--t-meta); line-height: 1.45; color: var(--ink-muted); text-align: center; }
.auth-intro-link {
  display: block;
  min-height: var(--tap);
  margin: var(--s3) auto 0;
  padding: 0 var(--s3);
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: 0.8125rem;
  text-decoration: underline;
  cursor: pointer;
}
.auth-intro-link:hover { color: var(--ink); }
@media (max-height: 680px) {
  .auth-intro-demo { margin-bottom: var(--s3); }
  .auth-intro-title { font-size: 20px; }
  .auth-intro-slide { padding-top: var(--s2); padding-bottom: var(--s2); }
}
@media (prefers-reduced-motion: reduce) {
  .tutorial-habit-check, .tutorial-habit-streak, .tutorial-notif { transition-duration: .01s; }
}

/* ------------------------------------ 1.32.17 · SELECTOR DE IDIOMA (acceso) -- */
.auth-lang {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-full);
  background: var(--surface-sunken);
}
.auth-lang button {
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: 0.78125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.auth-lang button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-low); }
.auth-lang button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
/* En la tarjeta de acceso va en su propia fila, arriba a la derecha: junto al
   nombre no cabe en teléfonos de 320 px. */
.auth-card > .auth-lang { display: flex; width: max-content; margin: calc(-1 * var(--s4)) 0 var(--s5) auto; }
/* La puerta centraba la tarjeta con align-items:center. Cuando la tarjeta es
   más alta que la pantalla (teléfonos de 640 px, teclado abierto), lo que sobra
   por ARRIBA queda fuera y no se puede desplazar: medido en 360×640, el
   selector de idioma salía cortado. Con márgenes automáticos la tarjeta se
   centra si cabe y, si no cabe, empieza arriba y se desplaza entera. */
.auth-gate:not([data-intro="1"]) { align-items: flex-start; }
.auth-gate:not([data-intro="1"]) .auth-card { margin-top: auto; margin-bottom: auto; }
.auth-intro-top { gap: var(--s2); }
.auth-intro-top .auth-lang { margin-left: auto; }
.auth-intro-brand-name { font-weight: inherit; }
@media (max-width: 359px) {
  .auth-intro-brand-name { display: none; }
}

/* ==========================================================================
   2.3.0 · LA BIENVENIDA, VIVA
   Tres escenas que se reproducen solas dentro de un «escenario» (una tarjeta
   que parece la app), con el botón de entrar siempre a la vista. Las piezas
   llevan .iv: nacen invisibles y entran cuando la escena recibe data-play,
   cada una con su retraso (--d). Sólo se anima opacidad y transform.
   ========================================================================== */
.auth-intro { position: relative; isolation: isolate; }
/* Un resplandor quieto detrás del escenario. Mezclado contra transparente: no
   hay deriva de matiz porque no se mezcla con el fondo. */
.auth-intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%; top: 8%;
  width: min(120%, 560px); height: 46%;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side at 32% 40%, color-mix(in oklab, var(--ctx-calendario) 22%, transparent), transparent),
    radial-gradient(closest-side at 72% 58%, color-mix(in oklab, var(--ctx-personal) 18%, transparent), transparent);
  filter: blur(8px);
  pointer-events: none;
}
.auth-intro-slide { justify-content: flex-start; padding: var(--s4) var(--s5) var(--s3); }
.intro2-stage {
  width: 100%;
  max-width: 360px;
  min-height: 318px;
  margin: 0 auto var(--s5);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  text-align: left;
  background: color-mix(in oklab, var(--surface) 86%, transparent);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-lift);
}
.auth-intro-title { font-size: 28px; letter-spacing: -0.01em; }
.auth-intro-body { max-width: 32ch; }

/* --- piezas que entran ---------------------------------------------------- */
.iv {
  opacity: 0;
  transform: translateY(10px) scale(.97);
  transition: opacity .42s var(--ease), transform .5s cubic-bezier(.2, .9, .3, 1.15);
}
.auth-intro-slide[data-play="1"] .iv { opacity: 1; transform: none; transition-delay: var(--d, 0ms); }

/* Lo que la persona «dice» */
.intro2-say {
  align-self: flex-end;
  max-width: 92%;
  min-height: 42px;
  padding: 10px var(--s4);
  background: var(--action);
  color: var(--action-ink);
  border-radius: 18px 18px 6px 18px;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.intro2-caret {
  display: inline-block;
  width: 2px; height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: currentColor;
  opacity: 0;
}
.auth-intro-slide[data-typing="1"] .intro2-caret { opacity: 1; animation: intro2-blink .7s steps(1) infinite; }
@keyframes intro2-blink { 50% { opacity: 0; } }

/* Sam contesta */
.intro2-sam { display: flex; align-items: center; gap: var(--s2); margin: 2px 0; }
.intro2-samtext { font-size: 0.9375rem; font-weight: 600; color: var(--ink-strong); }
.intro2-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
}
.intro2-avatar .sam-mark { width: 20px; height: 20px; }
.intro2-avatar::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--ink-muted);
  opacity: 0;
  animation: intro2-ring 2.6s var(--ease) infinite;
}
@keyframes intro2-ring { 0% { opacity: .5; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.55); } }

/* Tarjetas de resultado */
.intro2-card, .intro2-notif {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 10px var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-low);
}
.intro2-card[data-tone="tasks"]      { --tone: var(--ctx-tasks); }
.intro2-card[data-tone="expense"]    { --tone: var(--ctx-expense); }
.intro2-card[data-tone="personal"]   { --tone: var(--ctx-personal); }
.intro2-card[data-tone="calendario"] { --tone: var(--ctx-calendario); }
.intro2-card[data-tone="finanzas"]   { --tone: var(--ctx-income); }
.intro2-ico {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: color-mix(in oklab, var(--tone, var(--ink-muted)) 20%, transparent);
  color: var(--tone, var(--ink));
}
.intro2-ico svg, .intro2-bell svg { width: 18px; height: 18px; }
.intro2-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.intro2-copy b { font-size: 0.875rem; font-weight: 600; color: var(--ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intro2-copy small { font-size: var(--t-meta); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intro2-kind {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: color-mix(in oklab, var(--tone, var(--ink-muted)) 16%, transparent);
  color: var(--ink);
  font-size: var(--t-micro);
  font-weight: 600;
}

/* Dinero */
.intro2-money {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-low);
}
.intro2-money > small { font-size: var(--t-meta); color: var(--ink-muted); }
.intro2-big { font-family: var(--font-display); font-size: 34px; font-weight: 600; line-height: 1; color: var(--ink-strong); font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.intro2-bar { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: var(--s2); font-size: var(--t-meta); color: var(--ink-muted); }
.intro2-bar i { height: 8px; border-radius: var(--r-full); background: var(--surface-sunken); overflow: hidden; }
.intro2-bar u { display: block; height: 100%; width: var(--w); border-radius: inherit; transform: scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.intro2-bar[data-kind="income"] u { background: var(--ctx-income); }
.intro2-bar[data-kind="expense"] u { background: var(--ctx-expense); }
.intro2-bar em { font-style: normal; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.auth-intro-slide[data-play="1"] .intro2-bar u { transform: scaleX(1); transition-delay: 1.2s; }
.auth-intro-slide[data-play="1"] .intro2-bar[data-kind="expense"] u { transition-delay: 1.45s; }

/* Aviso y hábito */
.intro2-notif { padding: var(--s3); border-radius: 18px; box-shadow: var(--shadow-lift); transform: translateY(-14px) scale(.97); }
.intro2-bell { flex: 0 0 auto; color: var(--ctx-atencion); display: grid; place-items: center; }
.auth-intro-slide[data-play="1"] .intro2-bell { animation: intro2-bell .9s var(--ease) .7s 1; transform-origin: 50% 10%; }
@keyframes intro2-bell { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(16deg); } 45% { transform: rotate(-13deg); } 70% { transform: rotate(8deg); } }
.intro2-week { display: flex; gap: 5px; margin-top: 5px; }
.intro2-week i { width: 14px; height: 14px; border-radius: var(--r-full); background: var(--surface-sunken); border: 1px solid var(--line); }
.intro2-week i[data-on] { background: var(--ctx-income); border-color: transparent; }
.intro2-week i[data-new] { transition: background-color .3s var(--ease), transform .45s cubic-bezier(.2, .9, .3, 1.6); }
.auth-intro-slide[data-play="1"] .intro2-week i[data-new] { background: var(--ctx-income); border-color: transparent; transform: scale(1.18); transition-delay: 1.9s; }
.intro2-stage > .intro2-notif { margin-bottom: var(--s2); }

/* --- pie: progreso y acciones --------------------------------------------- */
.intro2-dots { display: flex; gap: 6px; }
.intro2-dots button {
  width: 34px; height: 24px;
  padding: 10px 0;
  border: 0; background: transparent; cursor: pointer;
}
.intro2-dots button i { display: block; position: relative; height: 4px; border-radius: var(--r-full); background: var(--line-strong); overflow: hidden; }
.intro2-dots button i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); transform: scaleX(0); transform-origin: left center; }
.intro2-dots button[data-done="1"] i::after { transform: scaleX(1); }
.intro2-dots button[data-on="1"] i::after { animation: intro2-fill var(--intro-dur, 7s) linear forwards; }
.auth-intro[data-auto="0"] .intro2-dots button[data-on="1"] i::after { animation: none; transform: scaleX(1); }
.auth-intro[data-auto="0"] .intro2-dots button[data-done="1"] i::after { transform: scaleX(0); }
@keyframes intro2-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.intro2-dots button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-xs); }

.intro2-cta { min-height: 54px; font-size: 1rem; font-weight: 600; box-shadow: var(--shadow-lift); }
.intro2-alt { display: flex; flex-direction: column; gap: var(--s2); }
.intro2-alt[data-links="1"] { flex-direction: row; justify-content: center; gap: var(--s2); }
.intro2-link {
  min-height: var(--tap);
  padding: 0 var(--s3);
  border: 0; background: transparent;
  color: var(--ink);
  font: inherit; font-size: 0.875rem; font-weight: 500;
  cursor: pointer;
  border-radius: var(--r-full);
}
.intro2-link:hover { background: var(--surface-hover); }
.intro2-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.intro2-alt[data-links="1"] .intro2-link + .intro2-link { position: relative; }
.intro2-alt[data-links="1"] .intro2-link + .intro2-link::before { content: ""; position: absolute; left: calc(var(--s2) / -2); top: 30%; height: 40%; width: 1px; background: var(--line-strong); }
.auth-intro-foot { gap: var(--s2); }
.auth-intro-actions[data-role="final"] { gap: var(--s1, 4px); }
.auth-intro-actions[data-role="final"] .auth-intro-note { margin-top: 2px; }

/* Teléfonos bajos: el escenario se aprieta antes de que algo se salga. */
@media (max-height: 760px) {
  .intro2-stage { min-height: 0; padding: var(--s3); margin-bottom: var(--s3); border-radius: 20px; }
  .intro2-card { padding: 7px var(--s3); }
  .intro2-ico, .intro2-avatar { width: 30px; height: 30px; }
  .auth-intro-title { font-size: 24px; }
  .auth-intro-slide { padding-top: var(--s2); padding-bottom: var(--s2); }
  .intro2-big { font-size: 28px; }
}
@media (max-height: 680px) {
  .auth-intro-body { display: none; }
  .auth-intro-title { font-size: 22px; margin-bottom: 0; }
  .intro2-say { font-size: 0.875rem; padding: 8px var(--s3); min-height: 0; }
  .intro2-cta { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .iv, .intro2-bar u, .intro2-week i[data-new] { transition: none !important; }
  .intro2-avatar::after, .intro2-caret, .intro2-bell, .intro2-dots button i::after { animation: none !important; }
  .intro2-dots button[data-on="1"] i::after { transform: scaleX(1); }
}

/* 2.3.0 — ajustes tras medir en 320×568 y 390×844 */
.auth-intro-slide { justify-content: center; }
.intro2-stage, .intro2-stage > * { flex-shrink: 0; }
.auth-intro-slide[data-scene="3"] .intro2-stage { justify-content: center; }
.intro2-link { white-space: nowrap; }
@media (max-height: 600px) {
  .intro2-stage { padding: 10px; gap: 5px; margin-bottom: var(--s2); }
  .intro2-card, .intro2-notif { padding: 5px var(--s2); gap: var(--s2); }
  .intro2-ico, .intro2-avatar { width: 28px; height: 28px; border-radius: 9px; }
  .intro2-avatar { border-radius: var(--r-full); }
  .intro2-say { font-size: 0.8125rem; line-height: 1.35; padding: 7px var(--s3); }
  .intro2-samtext { font-size: 0.875rem; }
  .intro2-copy b { font-size: 0.8125rem; }
  .intro2-money { padding: var(--s2) var(--s3); gap: 4px; }
  .intro2-big { font-size: 24px; }
  .auth-intro-title { font-size: 20px; }
  .intro2-dots button { height: 16px; padding: 6px 0; }
}
@media (max-width: 340px) {
  .intro2-link { font-size: 0.8125rem; padding: 0 var(--s2); }
  .intro2-kind { padding: 2px 7px; }
}
/* Los tres escenarios empiezan a la misma altura (no saltan al pasar de uno a
   otro) y en teléfonos altos crecen para no dejar un hueco bajo el texto. */
.auth-intro-slide { justify-content: flex-start; }
.intro2-stage { justify-content: center; }
@media (min-height: 761px) { .intro2-stage { min-height: clamp(318px, 45vh, 420px); gap: var(--s3); } }