/* =====================================================================
   Habitué · sistema de diseño
   Tokens primero; componentes y pantallas después. Ver DESIGN.md.
   En la app manda Habitué (verde y dorado). En la tarjeta y en las páginas
   que ven los clientes de un comercio, manda el color de ese comercio.
   ===================================================================== */

/* ---------- tipografías (servidas desde la propia web, licencia SIL OFL en /fonts) ---------- */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/fonts/geist-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/geist-mono-latin.woff2") format("woff2");
}
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dm-serif-display-latin.woff2") format("woff2");
}

/* ---------- tokens ---------- */

:root {
  color-scheme: light;

  /* Neutros con un leve tinte hacia el verde de la marca (contraste AA verificado en DESIGN.md). */
  --bg: #f2f7f4;
  --surface: #fcfefd;
  --sunken: #e9f0ed;
  --line: #dae2de;
  --line-strong: #c0cac5;
  --line-input: #858f8a;
  --ink: #14211b;
  --ink-2: #424e48;
  --muted: #5b6661;

  /* Marca Habitué. --brand cambia al color del comercio solo en las páginas de sus clientes. */
  --brand: #1f4d3a;
  --brand-ink: #f6ecd2;
  --brand-hover: #275f48;
  --brand-tint: #dbf2e4;
  --brand-soft: #bce2cc;
  --gold: #c08a2d;          /* solo para la firma (la tilde) y detalles; nunca como color de texto */
  --gold-ink: #8f5d04;      /* dorado legible sobre fondos claros */
  --gold-tint: #fbedd1;
  --cream: #f3e4c0;

  /* Estados (siempre acompañados de ícono o texto). */
  --danger: #b02b27;
  --danger-tint: #ffe7e4;
  --success: #21763c;
  --success-tint: #e1f5e7;
  --warning-ink: #875814;
  --warning-tint: #fbedd1;

  /* Gráficos. */
  --chart: #16784f;

  /* Tipografía. */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: var(--font-display);
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 30px;
  --fs-3xl: clamp(32px, 5.2vw, 40px);
  --fs-display: clamp(40px, 7vw, 68px);

  /* Espaciado (base 4 px). */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px;

  /* Radios: botones y campos 12, tarjetas de contenido 18, tarjeta de fidelidad 24, chips redondos. */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;
  --radius: var(--r-lg);

  /* Sombras teñidas del verde de la marca, nunca negras. */
  --shadow-1: 0 1px 2px rgb(20 33 27 / .06), 0 1px 1px rgb(20 33 27 / .04);
  --shadow-2: 0 10px 30px -14px rgb(20 50 36 / .28), 0 2px 6px -2px rgb(20 50 36 / .08);
  --shadow-3: 0 30px 60px -28px rgb(20 50 36 / .45), 0 6px 16px -8px rgb(20 50 36 / .14);

  /* Movimiento: curvas de salida fuertes (referencia: video) y duraciones cortas en la app. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-press: 140ms;
  --dur-fast: 180ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-reveal: 600ms;

  /* Capas. */
  --z-sticky: 10;
  --z-tabbar: 20;
  --z-overlay: 40;
  --z-modal: 50;
  --z-toast: 60;
  --z-confetti: 70;
}

/* ---------- base ---------- */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-base)/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 var(--s-3); text-wrap: balance; font-weight: 650; }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
p { margin: 0 0 var(--s-3); text-wrap: pretty; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
code { font-family: var(--font-mono); background: var(--sunken); padding: 1px 6px; border-radius: 6px; font-size: 0.88em; }
img { max-width: 100%; }

.icon { flex: none; vertical-align: -0.2em; }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; border-radius: 6px; }

.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.center { text-align: center; }
.mono { font-family: var(--font-mono); }
.break { overflow-wrap: anywhere; }
.lead { font-size: var(--fs-md); color: var(--ink-2); max-width: 60ch; }
.error-text { color: var(--danger); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link {
  position: absolute; left: var(--s-4); top: -60px; z-index: var(--z-toast);
  background: var(--ink); color: var(--surface); padding: 10px 14px; border-radius: var(--r-md); text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: var(--s-3); }

/* En las páginas de la plataforma los títulos principales llevan la tipografía de la marca. */
.platform h1 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.005em; line-height: 1.08; }

/* ---------- contenedores ---------- */

.narrow { max-width: 460px; margin: 0 auto; padding: var(--s-8) var(--s-4) var(--s-12); }
.wrap { max-width: 1080px; margin: 0 auto; padding: var(--s-8) var(--s-4) var(--s-16); }
.narrow-wrap { max-width: 580px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  margin-bottom: var(--s-4);
  box-shadow: var(--shadow-1);
}
.card > h2:first-child { margin-top: 0; }

.grid-2 { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
.grid-2 > .card { margin-bottom: 0; }
@media (min-width: 820px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .grid-wide { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

.back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-bottom: var(--s-2);
  color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500;
}
.back:hover { color: var(--ink); }

.title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.title-row h1 { margin: 0; }
.count { font: 500 0.5em var(--font-sans); color: var(--muted); vertical-align: middle; margin-left: 4px; }

/* ---------- botones ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5);
  background: var(--brand); color: var(--brand-ink);
  border: 1px solid transparent; border-radius: var(--r-md);
  font: 600 var(--fs-base)/1.2 var(--font-sans); text-decoration: none; white-space: nowrap;
  cursor: pointer; touch-action: manipulation; position: relative;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-fast) ease, box-shadow var(--dur-base) ease, border-color var(--dur-fast) ease;
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line-strong); font-weight: 500; }
.btn-danger { color: var(--danger); }
.btn-ghost.btn-danger { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.btn-block { width: 100%; white-space: normal; text-align: center; padding-block: 10px; }
.btn-small { min-height: 44px; padding: 0 var(--s-4); font-size: var(--fs-sm); }
.btn-big { min-height: 68px; font-size: var(--fs-lg); border-radius: var(--r-lg); margin-bottom: var(--s-2); }
@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):hover { background: var(--brand-hover); box-shadow: var(--shadow-2); }
  .btn-secondary:not(:disabled):hover, .btn-ghost:not(:disabled):hover { background: var(--surface); border-color: var(--ink-2); box-shadow: var(--shadow-1); }
}
/* El comercio puede tener un color claro: el hover no oscurece, solo levanta la sombra. */
.cardpage .btn:not(.btn-secondary):not(.btn-ghost):hover, .join-page .btn:not(.btn-secondary):not(.btn-ghost):hover { background: var(--brand); filter: brightness(1.06); }

/* Mientras se envía un formulario: la tilde de la marca hace de indicador de carga. */
.btn.is-busy { pointer-events: none; color: transparent; }
.btn.is-busy::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 4px; margin: -2px 0 0 -11px; border-radius: 4px;
  background: currentColor; color: var(--brand-ink);
  animation: tilde-load 800ms var(--ease-in-out) infinite;
}
.btn-secondary.is-busy::after, .btn-ghost.is-busy::after { color: var(--ink); }
@keyframes tilde-load {
  0% { transform: rotate(-52deg) scaleX(0.15); opacity: .4; }
  50% { transform: rotate(-52deg) scaleX(1); opacity: 1; }
  100% { transform: rotate(-52deg) scaleX(0.15); opacity: .4; }
}

.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.btn-stamp { overflow: hidden; }
.btn-stamp::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at center, rgb(255 255 255 / .35), transparent 60%);
  opacity: 0; transform: scale(0.4); transition: opacity 400ms ease-out, transform 500ms var(--ease-out);
}
.btn-stamp:active::before { opacity: 1; transform: scale(1.4); transition-duration: 60ms; }

/* ---------- formularios ---------- */

.form { display: grid; gap: var(--s-4); }
.form h2 { margin-bottom: 0; }
.field { display: grid; gap: 6px; }
.field > span { font-weight: 600; font-size: 15px; }
.field em { font-style: normal; font-weight: 400; color: var(--muted); }
.field small { color: var(--muted); font-size: 13px; }
.field-row { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.field-row .field { flex: 1 1 140px; }
.field-row .grow { flex: 3 1 200px; }

input, textarea, select {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-input); border-radius: var(--r-md);
  padding: 11px 14px; min-height: 48px;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-base) ease;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
textarea { resize: vertical; line-height: 1.5; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
input[type="color"] { padding: 4px; width: 88px; cursor: pointer; }
input[type="checkbox"], input[type="radio"] { min-height: 0; }
input[type="range"] { border: 0; padding: 0; min-height: 44px; background: transparent; box-shadow: none; accent-color: var(--brand); }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--brand); flex: none; }
.check em { font-style: normal; color: var(--muted); }
.fineprint { font-size: 13px; color: var(--muted); margin: 0; }

.inline { display: flex; gap: var(--s-2); }
.inline input { flex: 1; min-width: 0; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- avisos ---------- */

.flash { border-radius: var(--r-md); padding: 12px 16px; margin-bottom: var(--s-4); font-size: 15px; display: flex; gap: 10px; align-items: flex-start; }
.flash > .icon { margin-top: 2px; }
.flash-ok { background: var(--success-tint); color: #11502a; }
.flash-error { background: var(--danger-tint); color: #7c1d1a; display: grid; gap: 4px; }
.flash-info { background: var(--sunken); color: var(--ink-2); }
.flash-info a { font-weight: 600; }
.warn { color: var(--warning-ink); background: var(--warning-tint); border-radius: var(--r-md); padding: 10px 14px; font-size: var(--fs-sm); display: flex; gap: 8px; align-items: flex-start; }

/* Confirmaciones: un aviso flotante con la firma de la marca (sello + tilde). Se va solo (app.js). */
.toast-region { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 12px); z-index: var(--z-toast); display: grid; justify-items: center; padding: 0 var(--s-4); pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: min(460px, 100%);
  background: var(--ink); color: #f4f7f5; border-radius: var(--r-pill); padding: 8px 18px 8px 8px;
  box-shadow: var(--shadow-3); font-weight: 500; font-size: 15px;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  @starting-style { opacity: 0; transform: translateY(-12px) scale(0.98); }
}
.toast.is-leaving { opacity: 0; transform: translateY(-8px) scale(0.98); transition-duration: 160ms; }
.no-js .toast-region { position: static; padding-top: var(--s-4); }

/* Diálogos: confirmaciones y festejos. En el celular suben desde abajo; en la computadora, al centro. */
.modal {
  border: 0; padding: 0; margin: auto; width: min(420px, calc(100% - 32px)); max-height: calc(100dvh - 32px);
  background: var(--surface); color: var(--ink); border-radius: var(--r-xl); box-shadow: var(--shadow-3);
  opacity: 0; transform: translateY(8px) scale(.96);
  transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out), overlay 240ms allow-discrete, display 240ms allow-discrete;
}
.modal[open] { opacity: 1; transform: none; @starting-style { opacity: 0; transform: translateY(8px) scale(.96); } }
.modal:not([open]) { transition-duration: 150ms; }
.modal::backdrop { background: rgb(12 24 18 / 0); transition: background-color 240ms ease, overlay 240ms allow-discrete, display 240ms allow-discrete; }
.modal[open]::backdrop { background: rgb(12 24 18 / .5); @starting-style { background: rgb(12 24 18 / 0); } }
.modal-body { display: grid; justify-items: center; text-align: center; gap: var(--s-2); padding: var(--s-8) var(--s-6) var(--s-4); }
.modal-body h2 { margin: var(--s-2) 0 0; font-size: var(--fs-xl); }
.modal-body p { margin: 0; color: var(--ink-2); max-width: 34ch; }
.modal-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--sunken); color: var(--ink-2); }
.modal-icon.is-danger { background: var(--danger-tint); color: var(--danger); }
.modal-icon .icon { width: 28px; height: 28px; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); padding: var(--s-4) var(--s-6) var(--s-6); }
.modal-actions form { margin: 0; display: grid; }
.btn-danger-solid { background: var(--danger); color: #fff; }
@media (hover: hover) and (pointer: fine) { .btn-danger-solid:not(:disabled):hover { background: #962320; } }
.modal-celebrate .modal-body { padding-top: var(--s-10); }
.modal-celebrate h2 { font: 400 var(--fs-2xl)/1.1 var(--font-display); }
.customer .modal-celebrate h2 { font: 650 var(--fs-xl)/1.2 var(--font-sans); }
@media (max-width: 600px) {
  .modal {
    width: 100%; max-width: none; margin: auto 0 0; border-radius: 28px 28px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%); transition-duration: 200ms, 380ms; transition-timing-function: ease, var(--ease-drawer);
  }
  .modal[open] { transform: none; @starting-style { transform: translateY(100%); } }
  .modal:not([open]) { transition-duration: 160ms, 220ms; }
  .modal-actions { grid-template-columns: 1fr; }
  .modal-actions > :last-child { order: -1; }
}

.pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; }
.pill-brand { background: var(--brand-tint); color: var(--brand); }
.pill-warn { background: var(--warning-tint); color: var(--warning-ink); }

/* ---------- firma de la marca: el sello que se estampa y la tilde dorada que se traza ---------- */

.firma {
  --size: 40px;
  position: relative; flex: none; display: inline-grid; place-items: center;
  width: var(--size); height: var(--size); border-radius: 50%;
  background: var(--brand); color: var(--cream);
  box-shadow: inset 0 0 0 calc(var(--size) * .075) var(--brand), inset 0 0 0 calc(var(--size) * .1) var(--gold);
}
.firma .icon { width: 46%; height: 46%; }
.firma::after {
  content: ""; position: absolute; right: calc(var(--size) * -.06); top: calc(var(--size) * .02);
  width: calc(var(--size) * .36); height: calc(var(--size) * .1); border-radius: 99px; background: var(--gold);
  transform: rotate(-52deg); transform-origin: left center;
}
.firma.is-light { background: var(--cream); color: var(--brand); box-shadow: inset 0 0 0 calc(var(--size) * .075) var(--cream), inset 0 0 0 calc(var(--size) * .1) var(--gold); }
.firma.is-anim { animation: firma-press 460ms var(--ease-out) both; }
.firma.is-anim::after { animation: tilde-draw 240ms var(--ease-out) 300ms both; }
@keyframes firma-press {
  0% { opacity: 0; transform: scale(1.4) rotate(-14deg); }
  60% { opacity: 1; transform: scale(0.93) rotate(2deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes tilde-draw { from { transform: rotate(-52deg) scaleX(0); } }

/* Trama de anillos de sello para superficies de marca (decorativa, sin contenido). */
.seal-pattern { position: relative; isolation: isolate; overflow: hidden; }
.seal-pattern::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 520px; height: 520px; right: -180px; top: -200px; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 26px, currentColor 26px 27px);
  opacity: .12;
}

/* ---------- estados vacíos ---------- */

.empty-state { display: grid; justify-items: center; text-align: center; gap: var(--s-2); padding: var(--s-10) var(--s-6); }
.empty-state .empty-icon {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin-bottom: var(--s-2);
  background: var(--brand-tint); color: var(--brand); position: relative;
}
.empty-state .empty-icon::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--brand) 35%, transparent);
}
.empty-state .empty-icon .icon { width: 28px; height: 28px; }
.empty-state h2, .empty-state h3 { margin: 0; font-size: var(--fs-md); }
.empty-state p { color: var(--muted); max-width: 42ch; margin: 0; }
.empty-state .btn { margin-top: var(--s-3); }
.empty-state.is-compact { padding: var(--s-6) var(--s-2) var(--s-4); }
.empty-state.is-compact .empty-icon { width: 52px; height: 52px; }
.empty-state.is-compact .empty-icon .icon { width: 24px; height: 24px; }
.empty-state.is-compact h3 { font-size: var(--fs-base); }

/* ---------- barra del panel ---------- */

.topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1080px; margin: 0 auto; padding: 8px var(--s-4); min-height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.topbar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 650; min-width: 0; }
.topbar-brand img { display: block; border-radius: 7px; flex: none; }
.topbar-brand .biz { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar-brand .biz span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-brand .sep { width: 1px; height: 22px; background: var(--line-strong); flex: none; }
.topbar-brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--card, var(--brand)); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line-strong); flex: none; }
.topbar-nav { display: flex; align-items: center; gap: 2px; }
.topbar-nav form { margin: 0; }
.nav-item {
  position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px;
  border-radius: var(--r-md); text-decoration: none; color: var(--ink-2); font-size: 15px; font-weight: 500; white-space: nowrap;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.nav-item:hover { background: var(--sunken); color: var(--ink); }
.nav-item.active { color: var(--ink); font-weight: 600; }
/* La pestaña activa se marca con la tilde dorada. */
.nav-item.active::after {
  content: ""; position: absolute; right: 4px; top: 7px; width: 10px; height: 3px; border-radius: 3px;
  background: var(--gold); transform: rotate(-52deg);
}
.nav-item .icon { width: 19px; height: 19px; }
button.nav-item { background: none; border: 0; font-family: inherit; cursor: pointer; }
.topbar-nav .nav-exit { color: var(--muted); }

/* En el celular, la navegación pasa a una barra inferior al alcance del pulgar. */
.tabbar { display: none; }
@media (max-width: 760px) {
  .has-tabbar .topbar-nav .nav-item:not(.nav-exit) { display: none; }
  .topbar-nav .nav-item { padding: 0 10px; }
  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .tabbar .nav-item { flex-direction: column; gap: 2px; min-height: 52px; padding: 4px 2px; justify-content: center; font-size: 12px; border-radius: var(--r-md); transition: transform var(--dur-press) var(--ease-out), color var(--dur-fast) ease; }
  .tabbar .nav-item:active { transform: scale(.94); }
  .tabbar .nav-item .icon { width: 22px; height: 22px; }
  .tabbar .nav-item.active { color: var(--brand); }
  .tabbar .nav-item.active::after { right: calc(50% - 18px); top: 5px; }
  .has-tabbar main { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .has-tabbar .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- tarjeta de fidelidad (el protagonista es el comercio: usa su color) ---------- */

.lcard {
  --c: var(--card, var(--brand));
  --c-ink: var(--card-ink, var(--brand-ink));
  --c-accent: var(--card-accent, var(--c-ink));
  --c-accent-ink: var(--card-accent-ink, var(--c));
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(120% 90% at 100% 0%, rgb(255 255 255 / .2), transparent 55%),
    linear-gradient(160deg, color-mix(in srgb, var(--c) 86%, white), var(--c) 55%, color-mix(in srgb, var(--c) 80%, black));
  color: var(--c-ink);
  border-radius: var(--r-xl);
  padding: 22px 22px 18px;
  margin-bottom: var(--s-4);
  box-shadow: 0 1px 2px rgb(20 33 27 / .1), 0 18px 36px -16px color-mix(in srgb, var(--c) 60%, transparent);
  transform-style: preserve-3d;
}
.lcard > * { position: relative; }
.lcard-top { display: flex; justify-content: space-between; gap: var(--s-3); align-items: center; }
.lcard-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lcard-logo { width: 40px; height: 40px; flex: none; border-radius: 12px; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .08); }
.lcard-logo[hidden] { display: none; }
.lcard-business { font-weight: 700; font-size: var(--fs-md); letter-spacing: -0.01em; }
.lcard-kind { font-size: 13px; opacity: .85; white-space: nowrap; }
.lcard-name { font-size: 15px; opacity: .9; margin: 2px 0 18px; }
.stamps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.stamp {
  aspect-ratio: 1; border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--c-ink) 45%, transparent);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.stamp span { opacity: .6; }
.stamp.on { border: 0; background: var(--c-accent); color: var(--c-accent-ink); }

/* Plantilla clara: fondo blanco, una franja con el color del comercio y los sellos de color. */
.lcard.t-clara { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); --c-ink: var(--ink); }
.lcard.t-clara::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: var(--c); }
/* Plantilla con foto: la portada del comercio con un velo oscuro que asegura el contraste del texto. */
.lcard.t-foto {
  background:
    linear-gradient(180deg, rgb(0 0 0 / .66) 0%, rgb(0 0 0 / .56) 32%, rgb(0 0 0 / .44) 62%, rgb(0 0 0 / .66) 100%),
    var(--cover, none) center / cover no-repeat, var(--c);
  color: #fff; --c-ink: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / .35);
}
.lcard.t-foto .stamp:not(.on) { background: rgb(0 0 0 / .28); border-color: rgb(255 255 255 / .7); }
.stamp .icon { width: 56%; height: 56%; }
.lcard-foot { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); flex-wrap: wrap; opacity: .95; }
.lcard-foot strong { font-size: var(--fs-md); }

.remaining { text-align: center; color: var(--ink-2); margin-bottom: var(--s-4); }

.reward {
  display: flex; gap: 14px; align-items: center;
  background: var(--surface); border: 2px solid var(--brand); border-radius: var(--r-lg);
  padding: 16px 18px; margin-bottom: var(--s-4); box-shadow: var(--shadow-2);
}
.reward > div { flex: 1; min-width: 0; }
.reward-icon { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); }
.reward-icon .icon { width: 26px; height: 26px; }
.reward-action { margin-bottom: var(--s-3); }

.show-code { text-align: center; }
.show-code h2 { font-size: var(--fs-base); color: var(--muted); font-weight: 600; }
.qr { width: min(240px, 100%); margin: 0 auto 10px; }
.qr svg { display: block; width: 100%; height: auto; }
.qr-small { width: 168px; margin: 8px 0 10px; }
.code { font-family: var(--font-mono); font-size: 28px; font-weight: 600; letter-spacing: .16em; }

.tip summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; gap: 10px; list-style: none; }
.tip summary::-webkit-details-marker { display: none; }
.tip summary .icon { color: var(--muted); }
.tip summary .caret { margin-left: auto; transition: transform var(--dur-base) var(--ease-out); }
.tip[open] summary .caret { transform: rotate(180deg); }
.tip[open] > :not(summary), .table-view[open] > :not(summary) { animation: rise 280ms var(--ease-out) both; }

/* Copiar: el texto del botón se transforma en «Copiado» (con un leve desenfoque que funde los dos estados). */
.copy-btn { display: inline-grid; place-items: center; }
.copy-btn > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: var(--s-2); transition: opacity 200ms ease, transform 240ms var(--ease-out), filter 200ms ease; }
.copy-done, .copy-btn.is-copied .copy-idle { opacity: 0; transform: scale(.92); filter: blur(2px); }
.copy-btn.is-copied .copy-done { opacity: 1; transform: none; filter: none; }
.no-js .copy-btn { display: none; }
.tip[open] summary { margin-bottom: 10px; }
.tip p { font-size: 15px; color: var(--ink-2); }

.join-head { text-align: center; margin-bottom: var(--s-5); }
.badge {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px;
  background: var(--brand); color: var(--brand-ink);
  display: grid; place-items: center; font-size: 30px; font-weight: 700;
}
.badge .icon { width: 30px; height: 30px; }
.badge-logo { width: 76px; height: 76px; padding: 0; overflow: hidden; background: #fff; border-radius: 22px; box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
.badge-logo img { width: 100%; height: 100%; object-fit: cover; }
.join-program { margin: -6px 0 var(--s-2); font-weight: 600; color: var(--ink-2); }
.join-desc { color: var(--ink-2); max-width: 40ch; margin: var(--s-2) auto 0; }

/* Crédito discreto de Habitué en las páginas de los comercios. */
.made-with { display: flex; justify-content: center; align-items: center; gap: 8px; margin: var(--s-8) 0 0; font-size: 13px; color: var(--muted); text-decoration: none; }
.made-with img { height: 22px; width: auto; }
a.made-with:hover { color: var(--ink); }
.footer-top .made-with { margin: 0; }

/* En las páginas de un comercio, la firma se reduce a su sello (sin el dorado de Habitué). */
.customer .firma { box-shadow: none; }
.customer .firma::after { display: none; }

/* ---------- panel ---------- */

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); }
.page-head h1 { margin: 0; }
.page-head p { margin: 4px 0 0; color: var(--muted); }

/* Bienvenida al registrarse: el momento de marca del onboarding. */
.welcome {
  background: var(--brand); color: var(--cream); border-radius: var(--r-xl); padding: var(--s-6) var(--s-6) var(--s-6);
  margin-bottom: var(--s-4); display: flex; gap: var(--s-4); align-items: center; box-shadow: var(--shadow-2);
}
.welcome h1 { font-size: var(--fs-2xl); margin: 0 0 4px; color: var(--brand-ink); }
.welcome p { margin: 0; color: color-mix(in srgb, var(--brand-ink) 88%, transparent); }
.welcome .firma { --size: 56px; }

.search-stamp label { display: grid; gap: 2px; margin-bottom: var(--s-3); }
.search-stamp input { text-transform: uppercase; letter-spacing: .05em; font-family: var(--font-mono); }
.search-stamp input::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; color: var(--muted); font-size: var(--fs-sm); box-shadow: var(--shadow-1); }
.stat span { display: block; color: var(--ink); font-size: 30px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }

.activity { list-style: none; margin: 0; padding: 0; }
.activity li { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; }
.activity li:first-child { border-top: 0; padding-top: 0; }
.activity a { font-weight: 600; }
.activity span { color: var(--ink-2); }
.activity time { margin-left: auto; color: var(--muted); font-size: 13px; }

.search { margin-bottom: var(--s-4); }
.table-wrap { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow-x: auto; box-shadow: var(--shadow-1); }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; font-size: 13px; font-weight: 600; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table a { text-decoration: none; }
.table a:hover strong { text-decoration: underline; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

.details { display: grid; gap: 10px; margin: 0; }
.details div { display: flex; justify-content: space-between; gap: var(--s-4); font-size: 15px; }
.details dt { color: var(--muted); }
.details dd { margin: 0; text-align: right; overflow-wrap: anywhere; }

.result-list { list-style: none; padding: 6px 0; }
.result-list li a { display: grid; padding: 12px var(--s-6); text-decoration: none; border-top: 1px solid var(--line); }
.result-list li:first-child a { border-top: 0; }
.result-list li a:hover { background: var(--sunken); }

.danger-zone { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; margin-top: var(--s-2); }
.danger-card { border-color: color-mix(in srgb, var(--danger) 25%, var(--line)); }

.campaigns { list-style: none; margin: 0; padding: 0; }
.campaigns li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); }
.campaigns li:first-child { border-top: 0; padding-top: 0; }
.campaigns form { margin: 2px 0 0; }
.campaign-status { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }

.setup { border-color: color-mix(in srgb, var(--brand) 28%, var(--line)); }
.setup-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.progress { height: 6px; border-radius: 99px; background: var(--sunken); overflow: hidden; margin: 4px 0 var(--s-4); }
.progress span, .send-bar {
  display: block; height: 100%; background: var(--brand); border-radius: inherit;
  transform-origin: left; transform: scaleX(var(--p, 0)); animation: grow 900ms var(--ease-out) 250ms both;
}
@keyframes grow { from { transform: scaleX(0); } }
.send-bar { height: 4px; opacity: .75; margin-top: 4px; }
.setup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.setup-list li { display: flex; gap: var(--s-3); align-items: flex-start; }
.setup-list p { margin: 2px 0 8px; }
.setup-check {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--line-strong); font-size: 13px; font-weight: 700; color: var(--muted);
}
.setup-list .is-done .setup-check { border: 0; }
.setup-list .is-done .firma { --size: 30px; }
.setup-list .is-done strong { color: var(--muted); }
.inline-accept { display: grid; gap: 8px; justify-items: start; }

.email-status { display: flex; align-items: center; gap: 14px; }
.email-status > div { flex: 1; }
.email-status p { margin: 2px 0 0; }
.status-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--line-input); }
.email-status.is-connected .status-dot { background: var(--success); box-shadow: 0 0 0 4px var(--success-tint); }

.segmented { display: inline-flex; padding: 4px; gap: 4px; border: 0; margin: 0; background: var(--sunken); border-radius: var(--r-md); justify-self: start; }
.segmented label { cursor: pointer; }
.segmented input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.segmented span { display: block; padding: 10px 16px; border-radius: 9px; font-weight: 600; font-size: var(--fs-sm); color: var(--muted); transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.segmented input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.segmented input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); }
.custom-smtp { display: none; }
.email-form:has(input[value="otro"]:checked) .custom-smtp { display: flex; }
.email-form:has(input[value="otro"]:checked) .gmail-help { display: none; }
.gmail-help { background: var(--sunken); border-radius: var(--r-md); padding: 12px 16px; font-size: 15px; }
.gmail-help p { margin: 0 0 6px; }
.gmail-help ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }

/* ---------- métricas del comercio ---------- */

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin: var(--s-6) 0 var(--s-3); }
.section-head h2 { margin: 0; font-size: var(--fs-md); }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; font-size: var(--fs-sm); color: var(--ink); text-decoration: none; }
.link-arrow .icon { transition: transform var(--dur-fast) var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(3px); }

.range { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.range-custom { position: relative; }
.range-custom summary {
  list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; cursor: pointer;
  border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); background: var(--sunken);
}
.range-custom summary::-webkit-details-marker { display: none; }
.range-custom[open] summary { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-1); }
.range-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2); margin-top: var(--s-2); padding: var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.range-form .field { flex: 1 1 140px; }
.range-form input { min-height: 44px; }
@media (min-width: 760px) {
  .range-form { position: absolute; right: 0; top: 100%; z-index: var(--z-overlay); width: 360px; }
}

.sample-banner { display: flex; gap: var(--s-3); align-items: center; padding: 14px 18px; margin-bottom: var(--s-4); border-radius: var(--r-lg); background: var(--gold-tint); color: var(--ink); }
.sample-banner p { margin: 0; }
.sample-banner a { font-weight: 600; }
.pill-example { background: var(--gold-tint); color: var(--gold-ink); font-size: 12px; vertical-align: middle; margin-left: 4px; }
.pill-gold { background: var(--gold-tint); color: var(--gold-ink); }
.small-title { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; margin: var(--s-5) 0 0; }

.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0; margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 12px; height: 12px; border-radius: 3px; }

/* Barras: columnas apiladas de abajo hacia arriba, separadas por un hilo del color de la tarjeta. */
.bars { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 100%; }
.bars-grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); pointer-events: none; }
.bar-col { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column-reverse; gap: 2px; cursor: default; transform-origin: bottom; }
.bar-seg { display: block; width: 100%; border-radius: 3px 3px 1px 1px; }
.bar-col.is-hover .bar-seg { filter: brightness(1.12); }
.seg-1 { background: #1f4d3a; }
.seg-2 { background: #4f9d7a; }
.seg-gold { background: var(--gold-ink); }

.ranking { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.ranking li { display: flex; align-items: center; gap: var(--s-3); padding: 10px 0; border-top: 1px solid var(--line); }
.ranking li:first-child { border-top: 0; }
.rank { flex: none; width: 32px; font: 400 24px/1 var(--font-display); color: var(--muted); text-align: center; }
.ranking li:nth-child(-n+3) .rank { color: var(--gold-ink); }
.ranking-who { display: grid; min-width: 0; flex: 1; }
.ranking-who a, .close-who a { font-weight: 600; text-decoration: none; }
.ranking-who a:hover, .close-who a:hover { text-decoration: underline; }

.close-list { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.close-list li { display: flex; align-items: center; gap: var(--s-4); padding: 10px 0; border-top: 1px solid var(--line); }
.close-list li:first-child { border-top: 0; }
.close-who { display: grid; flex: 1; min-width: 0; }
.close-bar { flex: none; width: 72px; height: 8px; border-radius: 99px; background: var(--sunken); overflow: hidden; }
.close-bar span { display: block; height: 100%; background: var(--brand); border-radius: inherit; transform-origin: left; transform: scaleX(var(--p, 0)); animation: grow 800ms var(--ease-out) 200ms both; }

/* Mientras se cambia el período: los números se apagan y una línea dorada indica que se está cargando. */
.metrics.is-loading .kpi, .metrics.is-loading .chart, .metrics.is-loading .card { opacity: .55; transition: opacity 200ms ease; }
.metrics.is-loading::before {
  content: ""; position: fixed; z-index: var(--z-toast); top: 0; left: 0; width: 40%; height: 3px; border-radius: 3px;
  background: var(--gold); animation: loading-bar 900ms var(--ease-in-out) infinite;
}
@keyframes loading-bar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* ---------- cuentas de clientes: billetera ---------- */

@media (max-width: 480px) {
  .account-topbar .topbar-brand .sep, .account-topbar .topbar-brand .biz { display: none; }
  .account-topbar .nav-item { padding: 0 8px; }
}

/* Las tarjetas se apilan como en una billetera: de cada una se ve la cabecera y la última se ve entera. */
.wallet-page { max-width: 560px; }
.wallet-list { display: grid; padding: var(--s-2) 0 var(--s-4); }
.wallet-item { display: block; position: relative; text-decoration: none; color: inherit; border-radius: var(--r-xl); }
.wallet-item:not(:last-child) { height: 92px; }
.wallet-item .lcard { margin: 0; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) ease; }
.wallet-item:not(:first-child) .lcard { box-shadow: 0 -10px 24px -14px rgb(6 18 12 / .45), 0 18px 36px -16px color-mix(in srgb, var(--c) 60%, transparent); }
.wallet-item:focus-visible { outline: none; }
.wallet-item:focus-visible .lcard { outline: 3px solid color-mix(in srgb, var(--brand) 60%, transparent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .wallet-item:hover .lcard { transform: translateY(-12px); } }
.wallet-item:active .lcard { transform: translateY(-6px) scale(.99); }
.lcard-prize { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--c-accent); color: var(--c-accent-ink); font-weight: 650; text-shadow: none; }
.wallet-help { margin-top: var(--s-6); }

.wallet-detail .lcard { margin-bottom: var(--s-4); }
.wallet-actions { display: grid; gap: var(--s-2); }
.wallet-actions p { margin: 0; }
.wallet-actions form { margin: 0; }

/* La tarjeta guardada y la invitación a crear la cuenta (en la página de cada tarjeta). */
.account-chip {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-bottom: var(--s-4);
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
}
.account-chip:hover { color: var(--ink); border-color: var(--line-strong); }
.account-box { display: grid; gap: var(--s-3); }
.account-box p { margin: 2px 0 0; }

.check-email { display: grid; justify-items: center; text-align: center; gap: var(--s-3); padding: var(--s-8) var(--s-6); }
.check-email p { margin: 0; }
.auth-resend { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--muted); }
.auth-resend summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; justify-content: center; }
.auth-resend form { margin-top: var(--s-2); }
.auth-main form .small { justify-self: center; }

/* Entrar con Google: botón blanco con la «G» en colores, como piden las pautas de Google. */
.btn-google { background: #fff; color: #1f1f1f; border-color: #747775; gap: var(--s-3); }
.btn-google .google-g { flex: none; }
@media (hover: hover) and (pointer: fine) {
  .btn-google:not(:disabled):hover { background: #f4f7f5; border-color: #1f1f1f; box-shadow: var(--shadow-1); }
}
.auth-or { display: flex; align-items: center; gap: var(--s-3); margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.google-identity { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--sunken); border-radius: var(--r-md); }
.google-identity .google-g { flex: none; }
.google-identity div { display: grid; min-width: 0; }
.google-identity span { font-size: var(--fs-xs); color: var(--muted); }
.google-identity strong { overflow-wrap: anywhere; }

.signin-methods { list-style: none; margin: 0; padding: 0; }
/* En el celular, la acción baja debajo del texto, alineada con él; con lugar, va a la derecha. */
.signin-methods li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: var(--s-2) var(--s-3); padding-block: var(--s-3); }
.signin-methods li + li { border-top: 1px solid var(--line); }
.signin-methods li > div { display: grid; min-width: 0; }
.signin-methods li > div span { overflow-wrap: anywhere; }
.signin-methods li > :is(form, a) { grid-column: 2; justify-self: start; }
@media (min-width: 560px) {
  .signin-methods li { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .signin-methods li > :is(form, a) { grid-column: 3; }
}
.signin-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sunken); color: var(--ink-2); }

/* ---------- ajustes: diseñador de la tarjeta ---------- */

.subnav { display: flex; gap: 4px; padding: 4px; width: fit-content; max-width: 100%; overflow-x: auto; background: var(--sunken); border-radius: var(--r-md); margin-bottom: var(--s-5); }
.subnav a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 9px; white-space: nowrap;
  color: var(--muted); font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

.designer { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.designer-fields > .card { margin-bottom: var(--s-4); }
.designer-preview { order: -1; }
.preview-label { display: flex; align-items: center; gap: 8px; margin-bottom: var(--s-3); color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.designer-preview .lcard { margin: 0; }
.preview-hint { margin: var(--s-3) 0 0; }
.designer-save .btn { box-shadow: var(--shadow-2); }
@media (max-width: 899px) {
  /* En el celular la vista previa queda arriba, chica y a la vista mientras se cambian los campos. */
  .designer-preview {
    position: sticky; top: 60px; z-index: 5; margin: 0 calc(-1 * var(--s-4)); padding: var(--s-3) var(--s-4);
    background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .designer-preview .lcard { max-width: 340px; margin: 0 auto; zoom: .74; }
  .designer-preview .preview-label, .designer-preview .preview-hint { display: none; }
}
@media (max-width: 480px) {
  .subnav { width: 100%; }
  .subnav a { flex: 1; justify-content: center; padding: 0 8px; }
  .subnav a .icon { display: none; }
}
@media (min-width: 900px) {
  .designer { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: var(--s-8); }
  .designer-preview { order: 0; position: sticky; top: 84px; }
  .designer-save { position: sticky; bottom: var(--s-4); z-index: 4; }
}

.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.choice { display: grid; gap: 8px; justify-items: center; cursor: pointer; }
.choice input, .stamp-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.choice-swatch {
  width: 100%; aspect-ratio: 8 / 5; border-radius: 12px; position: relative; overflow: hidden;
  display: grid; grid-template-columns: repeat(3, 1fr); align-content: center; gap: 8%; padding: 0 16%;
  box-shadow: 0 0 0 1px var(--line); transition: box-shadow var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
.choice:active .choice-swatch { transform: scale(.97); }
.choice-swatch i { aspect-ratio: 1; border-radius: 50%; }
.swatch-clasica { background: var(--card, var(--brand)); }
.swatch-clasica i { background: color-mix(in srgb, var(--card, var(--brand)) 15%, white); }
.swatch-clara { background: var(--surface); }
.swatch-clara::before { content: ""; position: absolute; inset: 0 0 auto; height: 14%; background: var(--card, var(--brand)); }
.swatch-clara i { background: var(--card, var(--brand)); }
.swatch-foto { background: linear-gradient(180deg, rgb(0 0 0 / .5), rgb(0 0 0 / .35)), repeating-linear-gradient(135deg, #8a6a4e 0 10px, #6f5440 10px 20px); }
.swatch-foto i { background: #fff; }
.choice input:checked + .choice-swatch { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); }
.choice input:focus-visible + .choice-swatch, .stamp-choice input:focus-visible + .stamp-choice-icon { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 4px; }
.choice-label { font-size: var(--fs-sm); font-weight: 600; }

.contrast-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.contrast-list li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-md); font-size: var(--fs-sm); background: var(--success-tint); color: #11502a; }
.contrast-list li.is-low { background: var(--warning-tint); color: var(--warning-ink); }
.contrast-list strong { margin-left: auto; font-family: var(--font-mono); font-weight: 600; }
.contrast-verdict { min-width: 7.5em; text-align: right; }
.contrast-mark { display: inline-flex; }

.upload { display: flex; gap: var(--s-4); align-items: flex-start; }
.upload + .upload { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.upload-preview {
  flex: none; width: 72px; height: 72px; border-radius: 16px; overflow: hidden; display: grid; place-items: center;
  background: var(--sunken); color: var(--muted); border: 1px dashed var(--line-strong);
}
.upload-cover { width: 116px; }
.upload-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upload-preview:has(img) { border-style: solid; border-color: var(--line); }
.upload-preview:has(img) .upload-empty { display: none; }
.upload-body { display: grid; gap: 4px; min-width: 0; }
.upload-body small { color: var(--muted); font-size: 13px; }
.upload-actions { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; margin-top: 6px; }
.upload-btn { cursor: pointer; }
.upload-btn:focus-within { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }
.upload-error { margin: 2px 0 0; }

.stamp-picker { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.stamp-picker legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 15px; }
.stamp-choice-icon {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--sunken); color: var(--ink-2);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
.stamp-choice:active .stamp-choice-icon { transform: scale(.94); }
.stamp-choice input:checked + .stamp-choice-icon { background: var(--brand); color: var(--brand-ink); }

/* Recorte de imágenes (diálogo). */
.modal-crop { width: min(480px, calc(100% - 32px)); }
.modal-crop .modal-body { justify-items: stretch; text-align: left; padding-top: var(--s-6); }
.crop-frame {
  position: relative; width: 100%; overflow: hidden; border-radius: var(--r-lg); touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none;
  background: repeating-conic-gradient(var(--sunken) 0 25%, var(--surface) 0 50%) 0 0 / 20px 20px;
}
.crop-frame:active { cursor: grabbing; }
.crop-frame img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.crop-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .85), inset 0 0 0 3px rgb(0 0 0 / .12); pointer-events: none; }
.crop-zoom { display: flex; align-items: center; gap: 10px; color: var(--muted); }

/* ---------- registro y acceso: panel de marca + formulario ---------- */

.auth { min-height: 100dvh; display: grid; }
@media (min-width: 900px) { .auth { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.auth-brand {
  display: none; background: var(--brand); color: var(--cream); padding: var(--s-12);
  position: sticky; top: 0; align-self: start; height: 100dvh;
  flex-direction: column; justify-content: space-between; gap: var(--s-8);
}
@media (min-width: 900px) { .auth-brand { display: flex; } }
.auth-brand-logo { display: inline-block; line-height: 0; align-self: flex-start; }
.auth-brand img { width: 168px; height: auto; }
.auth-brand p { margin: 0; color: color-mix(in srgb, var(--brand-ink) 84%, transparent); max-width: 38ch; }
.auth-brand .auth-quote { margin: 0 0 var(--s-4); font: 400 clamp(30px, 3.2vw, 42px)/1.08 var(--font-display); color: var(--brand-ink); max-width: 14ch; text-wrap: balance; }
.auth-main { display: grid; align-content: start; justify-items: center; padding: var(--s-8) var(--s-4) var(--s-12); }
@media (min-width: 900px) { .auth-main { padding: clamp(var(--s-12), 11vh, 120px) var(--s-8) var(--s-16); } }
.auth-main .narrow { width: 100%; padding: 0; }
.auth-logo { display: inline-block; line-height: 0; margin-bottom: var(--s-6); }
.auth-logo img { height: 48px; width: auto; }
@media (min-width: 900px) { .auth-main .auth-logo { display: none; } }
.auth-lead { color: var(--muted); margin-bottom: var(--s-5); }
.auth-alt { text-align: center; color: var(--muted); margin-top: var(--s-4); }

/* Selector «Soy cliente / Soy comercio»: son dos enlaces; el fondo blanco marca dónde estás y, al cambiar de
   pantalla, se desliza al otro lado (transición entre páginas; con «reducir movimiento», cambia sin moverse). */
.audience {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-bottom: var(--s-6);
  background: var(--sunken); border-radius: var(--r-md); view-transition-name: audience;
}
.audience a {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 12px;
  border-radius: 9px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); text-decoration: none;
  transition: color var(--dur-fast) ease;
}
.audience a:hover, .audience a[aria-current="page"] { color: var(--ink); }
.audience a[aria-current="page"] .icon { color: var(--brand); }
.audience a:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 0; }
.audience-glider {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  background: var(--surface); border-radius: 9px; box-shadow: var(--shadow-1); view-transition-name: audience-glider;
}
.audience[data-active="comercio"] .audience-glider { transform: translateX(100%); }
.audience-cliente { view-transition-name: audience-cliente; }
.audience-comercio { view-transition-name: audience-comercio; }
::view-transition-group(audience), ::view-transition-group(audience-glider),
::view-transition-group(audience-cliente), ::view-transition-group(audience-comercio) {
  animation-duration: var(--dur-base); animation-timing-function: var(--ease-in-out);
}
.auth-page .site-footer { border-top: 0; }

/* ---------- portada ---------- */

.home-body { overflow-x: hidden; }
/* Arriba: logo, «Botón de baja de servicios» y los accesos de clientes y comercios. En el celular, los accesos
   ocupan su propia fila; en pantallas muy angostas, el botón de baja baja a la suya y los accesos se apilan. */
.home-topbar {
  position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; padding: 14px var(--s-4) 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-3);
}
.home-logo { display: block; line-height: 0; flex: none; margin-right: auto; }
.home-logo img { height: 38px; width: auto; }
.home-topbar a.home-baja {
  display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 0 12px; text-decoration: none;
}
.home-topbar a.home-baja:hover { border-color: var(--ink); }
.access {
  flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-pill);
}
.access a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 8px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
.access a + a { border-left: 1px solid var(--line); }
.access a .icon { flex: none; color: var(--brand); }
.access a:hover { background: var(--sunken); }
.access a:active { transform: scale(.97); }
.access a:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: -3px; }
@media (max-width: 359px) {
  .access { grid-template-columns: 1fr; border-radius: var(--r-md); }
  .access a + a { border-left: 0; border-top: 1px solid var(--line); }
}
@media (min-width: 560px) {
  .access { flex: none; }
  .access a { padding: 0 16px; }
}
@media (min-width: 800px) {
  .home-logo img { height: 44px; }
  .home-topbar a.home-baja { font-size: var(--fs-sm); padding: 0 16px; }
}

.landing { max-width: 1080px; margin: 0 auto; padding: 0 var(--s-4); position: relative; }
.home-main > .landing:first-child { padding-top: var(--s-12); }
.home-main > .landing:last-child { padding-bottom: var(--s-20); }
.hero { display: grid; gap: var(--s-10); align-items: center; margin-bottom: var(--s-16); }
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.hero h1 { font-size: var(--fs-display); letter-spacing: -0.015em; line-height: 1.02; margin-bottom: var(--s-5); }
.hero .lead { margin-bottom: var(--s-6); }
.hero .actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); max-width: 460px; }
.hero .actions .btn { width: 100%; margin: 0; padding-inline: var(--s-4); white-space: normal; text-align: center; }
.hero-note { margin: var(--s-5) 0 0; color: var(--muted); font-size: var(--fs-sm); }
.eyebrow { color: var(--brand); font-weight: 600; font-size: 15px; margin-bottom: var(--s-4); display: inline-flex; align-items: center; gap: 10px; }
.hero-stage {
  position: relative; border-radius: 32px; padding: 76px var(--s-6) var(--s-6); background: var(--brand); color: var(--cream);
  display: grid; place-items: center; min-height: 460px; box-shadow: var(--shadow-3);
}
.hero-stage .lcard { margin: 0; }
/* El aviso del premio baja desde arriba, como una notificación del celular. */
.hero-stage .stage-note {
  position: absolute; z-index: 5; left: 50%; top: 18px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; margin: 0;
  background: var(--surface); color: var(--ink); padding: 8px 16px 8px 8px; border-radius: var(--r-pill); box-shadow: var(--shadow-2);
  font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
}
.hero-stage .stage-note .firma { --size: 30px; }

.how { margin-bottom: var(--s-20); }
.how h2 { font: 400 var(--fs-3xl)/1.08 var(--font-display); margin: 0 0 var(--s-3); }
.how-intro { margin-bottom: var(--s-8); }
.how-intro p { color: var(--ink-2); max-width: 46ch; margin: 0; }
.how-list { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.how-list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-6) 0; border-top: 1px solid var(--line); }
.how-list li:last-child { border-bottom: 1px solid var(--line); }
.how-list .num { font: 400 40px/1 var(--font-display); color: var(--brand); position: relative; }
.how-list h3 { margin: 4px 0 6px; }
.how-list p { margin: 0; color: var(--ink-2); }

.cta-band {
  border-radius: 32px; background: var(--brand); color: var(--cream); padding: var(--s-12) var(--s-8);
  display: grid; gap: var(--s-4); justify-items: center; text-align: center;
}
.cta-band h2 { font: 400 var(--fs-3xl)/1.08 var(--font-display); color: var(--brand-ink); margin: 0; max-width: 18ch; }
.cta-band p { margin: 0; color: color-mix(in srgb, var(--brand-ink) 85%, transparent); max-width: 50ch; }
.cta-band .btn { background: var(--cream); color: var(--brand); white-space: normal; text-align: center; max-width: 100%; margin: var(--s-2) 0 0; }
/* El botón de la banda final «llama» con una onda que sale cada tanto. */
.cta-band .btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--cream); pointer-events: none;
  opacity: 0; animation: cta-ring 2800ms var(--ease-out) 1200ms infinite;
}
@keyframes cta-ring { 0% { opacity: .75; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1.08, 1.3); } }
@media (max-width: 600px) { .cta-band { padding: var(--s-10) var(--s-5); } .cta-band .btn { width: 100%; font-size: var(--fs-md); padding-inline: var(--s-3); } }
@media (hover: hover) and (pointer: fine) { .cta-band .btn:hover { background: #fff6dc; } }

/* Título cinético: cada palabra sube desde su propia máscara. */
.kinetic .kw { display: inline-block; overflow: clip; vertical-align: top; padding: .12em 0 .16em; margin: -.12em 0 -.16em; }
.kinetic .kw > span { display: inline-block; animation: kw-in 900ms var(--ease-out-expo) both; animation-delay: calc(80ms + var(--i, 0) * 60ms); }
@keyframes kw-in { from { transform: translateY(112%); } }

/* Carrusel tipo wallet: tarjetas apiladas; se pasan arrastrando, con las flechas o tocando la de atrás. */
.wallet { width: min(340px, 100%); display: grid; gap: var(--s-5); justify-items: center; }
.wallet-stack { display: grid; width: 100%; padding-top: 40px; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.wallet-card {
  grid-area: 1 / 1; cursor: grab; transform-origin: 50% 0;
  transition: transform 560ms var(--ease-drawer), opacity 300ms ease;
}
.wallet-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #06120c; opacity: 0; pointer-events: none; transition: opacity 400ms ease; }
.wallet-card { animation: deal-in 900ms var(--ease-out-expo) backwards; animation-delay: 420ms; }
.wallet-card:nth-child(2) { animation-delay: 300ms; }
.wallet-card:nth-child(3) { animation-delay: 180ms; }
@keyframes deal-in { from { opacity: 0; transform: translateY(70px) rotate(-7deg) scale(.9); } }
.wallet-card[data-depth="0"] { z-index: 3; }
.wallet-card[data-depth="1"] { z-index: 2; transform: translateY(-22px) scale(.94); }
.wallet-card[data-depth="2"] { z-index: 1; transform: translateY(-42px) scale(.88); }
.wallet-card[data-depth="1"]::after { opacity: .14; }
.wallet-card[data-depth="2"]::after { opacity: .26; }
.wallet-card.is-dragging { transition: none; cursor: grabbing; }
.wallet-card.is-thrown { transition: transform 280ms var(--ease-out), opacity 220ms ease; opacity: 0; }
.wallet-nav { display: flex; align-items: center; gap: var(--s-3); }
.wallet-btn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--cream); border: 1px solid color-mix(in srgb, var(--cream) 38%, transparent);
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-fast) ease;
}
.wallet-btn:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .wallet-btn:hover { background: color-mix(in srgb, var(--cream) 14%, transparent); } }
.wallet-btn:focus-visible { outline-color: var(--cream); }
.wallet-dots { display: flex; gap: 8px; }
.wallet-dots i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--cream) 40%, transparent); transition: transform 240ms var(--ease-out), background-color 240ms ease; }
.wallet-dots i.is-on { background: var(--cream); transform: scale(1.4); }
.no-js .wallet-nav { display: none; }

/* La única marquesina: los rubros que ya pueden usar Habitué. */
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--surface); padding: var(--s-5) 0; margin-bottom: var(--s-16); }
.marquee-track { display: flex; align-items: center; width: max-content; animation: marquee 52s linear infinite; font: 400 clamp(28px, 4vw, 44px)/1.1 var(--font-display); color: var(--ink); white-space: nowrap; }
.marquee-track > * { margin-right: var(--s-6); flex: none; }
.marquee-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--brand); box-shadow: inset 0 0 0 2px var(--brand), inset 0 0 0 3.5px var(--gold); }
@media (hover: hover) { .marquee:hover .marquee-track { animation-play-state: paused; } }
@keyframes marquee { to { transform: translateX(-50%); } }

/* «Así funciona»: el celular queda fijo y cambia de escena con cada paso que entra en pantalla. */
.story-grid { display: grid; gap: var(--s-8); }
.story-visual { display: none; }
@media (min-width: 900px) {
  .story-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-12); align-items: start; }
  .story-visual { display: block; position: sticky; top: max(var(--s-6), calc(50vh - 290px)); }
  .story .how-list li { min-height: 42vh; align-content: center; transition: opacity 320ms ease; }
  .story.is-live .how-list li:not(.is-active) { opacity: .42; }
  .story .how-list .num { transition: color 320ms ease; }
  .story.is-live .how-list li:not(.is-active) .num { color: var(--muted); }
}
.story.is-live .how-list li.is-active .num { animation: num-pop 560ms var(--ease-pop) both; }
@keyframes num-pop { from { opacity: .3; transform: scale(.55) rotate(-12deg); } }
.story-dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--s-5); }
.story-dots i { width: 22px; height: 4px; border-radius: 4px; background: var(--line-strong); transform-origin: left; transition: background-color 320ms ease, transform 420ms var(--ease-out); transform: scaleX(.5); }
.story[data-active="1"] .story-dots i:nth-child(1), .story[data-active="2"] .story-dots i:nth-child(2), .story[data-active="3"] .story-dots i:nth-child(3) { background: var(--brand); transform: none; }
@media (max-width: 899px) {
  .story-grid { gap: 0; }
  .story-visual {
    --ph: .54; display: block; position: sticky; top: 0; z-index: 2; pointer-events: none;
    height: calc(580px * var(--ph) + 46px); margin: 0 calc(-1 * var(--s-4)); padding-top: 10px; background: var(--bg);
  }
  /* Los pasos se esfuman al pasar por debajo del teléfono. */
  .story-visual::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 40px; background: linear-gradient(var(--bg), color-mix(in srgb, var(--bg) 0%, transparent)); }
  .story-phone { transform: scale(var(--ph)); transform-origin: 50% 0; }
  .story-dots { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; }
  .story .how-list li { min-height: 58vh; align-content: start; transition: opacity 320ms ease; }
  .story .how-list li:last-child { min-height: 46vh; }
  .story.is-live .how-list li:not(.is-active) { opacity: .35; }
}
@media (max-width: 899px) and (max-height: 640px) { .story-visual { --ph: .44; } }
.story-phone { position: relative; width: 300px; height: 580px; margin: 0 auto; border-radius: 46px; background: var(--ink); box-shadow: var(--shadow-3); }
.story-phone::before { content: ""; position: absolute; z-index: 2; top: 22px; left: 50%; width: 88px; height: 24px; margin-left: -44px; border-radius: 99px; background: #08110d; }
.scene {
  position: absolute; inset: 11px; border-radius: 36px; background: var(--bg); overflow: hidden;
  display: grid; align-content: center; justify-items: center; gap: var(--s-4); padding: 64px var(--s-4) var(--s-6);
  opacity: 0; transform: translateY(16px) scale(.98); filter: blur(4px);
  transition: opacity 360ms ease, transform 560ms var(--ease-out-expo), filter 360ms ease;
}
.story[data-active="1"] [data-scene="1"], .story[data-active="2"] [data-scene="2"], .story[data-active="3"] [data-scene="3"] { opacity: 1; transform: none; filter: none; }
.scene-poster { width: 100%; background: #fff; border-radius: 20px; padding: 20px 16px 18px; text-align: center; display: grid; gap: 8px; justify-items: center; border-top: 8px solid #b4461b; box-shadow: var(--shadow-1); }
.scene-biz { color: #9c3a14; font-weight: 700; font-size: 14px; }
.scene-poster strong { font: 400 24px/1.1 var(--font-display); max-width: 12ch; }
.scene-qr { color: var(--ink); line-height: 0; position: relative; }
.scene-scan {
  position: absolute; left: -8px; right: -8px; top: 0; height: 3px; border-radius: 3px; background: var(--brand);
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--brand) 55%, transparent); opacity: 0;
}
.story.is-seen[data-active="1"] .scene-scan { animation: scan 1600ms var(--ease-in-out) 400ms 2 alternate both; }
@keyframes scan { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; transform: translateY(129px); } }
.scene-ok {
  display: inline-flex; gap: 8px; align-items: center; background: var(--surface); color: var(--ink); font-weight: 600; font-size: 15px;
  padding: 8px 16px 8px 10px; border-radius: var(--r-pill); box-shadow: var(--shadow-2); opacity: 0; transform: translateY(10px) scale(.94);
}
.scene-ok .icon { color: var(--brand); }
.story.is-seen[data-active="1"] .scene-ok { animation: ok-in 520ms var(--ease-pop) 3600ms forwards; }
@keyframes ok-in { to { opacity: 1; transform: none; } }
.scene-hint { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); }
.scene-card { width: 100%; }
.scene-card .lcard-top { margin-bottom: 16px; }
.scene-btn { display: inline-flex; gap: 8px; align-items: center; background: var(--brand); color: var(--brand-ink); border-radius: var(--r-md); padding: 13px 22px; font-weight: 600; }
.story[data-active="2"] .scene-btn { animation: btn-tap 420ms var(--ease-out) 380ms both; }
.story[data-active="2"] .scene-just { position: relative; animation: stamp-press 560ms var(--ease-out) 560ms both; }
.story[data-active="2"] .scene-card { animation: card-bump 480ms var(--ease-out) 760ms; }
@keyframes btn-tap { 50% { transform: scale(.94); } }
.scene-mail { width: 100%; background: var(--surface); border-radius: var(--r-lg); padding: 14px 16px; display: grid; gap: 2px; box-shadow: var(--shadow-2); font-size: 14px; color: var(--ink-2); }
.scene-mail strong { font-size: 15px; color: var(--ink); }
.scene-from { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.scene-from i { width: 16px; height: 16px; border-radius: 5px; }
.story[data-active="3"] .scene-mail { animation: notif-in 640ms var(--ease-out-expo) 200ms both; }
@keyframes notif-in { from { opacity: 0; transform: translateY(-28px) scale(.94); } }
.story[data-active="3"] .scene-mail + .scene-mail { animation-delay: 320ms; }

/* Banda final: los anillos del sello siguen al mouse, con un poco de inercia (app.js). */
.cta-band::before { translate: var(--fx, 0px) var(--fy, 0px); }

/* ---------- cartel imprimible ---------- */

.poster-body { background: #fff; }
.poster {
  max-width: 640px; margin: 0 auto; padding: var(--s-12) var(--s-6); text-align: center;
  border-top: 14px solid var(--card, var(--brand));
}
.poster-business { font-weight: 700; font-size: 22px; color: var(--ink); margin-bottom: 8px; }
.poster-logo { display: block; width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 24px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.poster h1 { font-size: clamp(32px, 7vw, 46px); margin-bottom: 14px; }
.poster-reward { font-size: var(--fs-lg); margin-bottom: 28px; }
.qr-poster { width: min(360px, 80%); }
.poster-hint { font-size: var(--fs-md); color: var(--muted); margin-top: 18px; }
.poster-credit { margin-top: 36px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); }
.poster-credit img { height: 26px; width: auto; }
.print-btn { position: fixed; right: var(--s-4); bottom: var(--s-4); }
@media print {
  .print-btn { display: none; }
  .poster { padding-top: 24px; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- privacidad y textos legales ---------- */

.privacy-basics { border-top: 1px solid var(--line); padding-top: 14px; font-size: 13px; color: var(--ink-2); }
.privacy-basics h2 { font-size: 13px; letter-spacing: .02em; color: var(--muted); margin-bottom: 8px; }
.privacy-basics dl { margin: 0 0 8px; display: grid; gap: 6px; }
.privacy-basics dl div { display: grid; grid-template-columns: 96px 1fr; gap: 8px; }
.privacy-basics dt { font-weight: 600; color: var(--ink); }
.privacy-basics dd { margin: 0; }
.aaip-note { font-size: 13px; line-height: 1.5; color: var(--ink-2); background: var(--sunken); border-radius: var(--r-md); padding: 10px 12px; }

.legal h2 { font-size: var(--fs-md); margin-top: 28px; }
.legal p, .legal li { color: var(--ink-2); }
.legal ul { padding-left: 20px; display: grid; gap: 6px; }
.legal-id { list-style: none; padding: 14px 18px !important; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.legal-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: 8px 0 16px; display: block; overflow-x: auto; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 10px; border-bottom: 1px solid var(--line); min-width: 120px; }
.legal-table th { color: var(--muted); font-weight: 600; }
mark.pending { background: var(--warning-tint); color: var(--warning-ink); padding: 0 4px; border-radius: 4px; }

.baja-code { display: inline-grid; gap: 4px; margin-top: 8px; padding: 14px 22px; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-md); }
.baja-code strong { font: 600 22px/1.2 var(--font-mono); letter-spacing: .06em; }
.baja-code small { color: var(--muted); }
.btn.is-highlighted { outline: 3px solid color-mix(in srgb, var(--danger) 35%, transparent); outline-offset: 3px; }

/* ---------- pie ---------- */

.site-footer { border-top: 1px solid var(--line); background: var(--surface); }
.site-footer-inner {
  max-width: 1080px; margin: 0 auto; padding: var(--s-8) var(--s-4) var(--s-10);
  display: grid; gap: var(--s-5);
}
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.footer-top p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); font-size: var(--fs-sm); color: var(--muted); }
.footer-links a, .footer-links span { display: inline-flex; align-items: center; min-height: 40px; }
.footer-links a { color: var(--ink-2); text-decoration: none; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; }
.footer-links a.footer-strong { color: var(--ink); font-weight: 650; text-decoration: underline; }
.site-footer a.footer-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font: 400 22px/1 var(--font-display); }
.site-footer a.footer-brand img { border-radius: 6px; }
.poster-body .site-footer { display: none; }
@media print { .site-footer { display: none; } }

/* ---------- panel del administrador ---------- */

.admin .title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.admin .title-row h1 { margin: 0; }
.period { display: inline-flex; gap: 2px; padding: 3px; background: var(--sunken); border-radius: var(--r-pill); }
.period a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); text-decoration: none; transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.period a:hover { color: var(--ink); }
.period a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.section-title { margin: 28px 0 12px; }

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
@media (min-width: 820px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; display: grid; gap: 4px; align-content: start; min-width: 0; box-shadow: var(--shadow-1); }
.kpi-label { font-size: var(--fs-sm); color: var(--muted); }
.kpi-value { font-size: 32px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
.delta { font-size: 13px; color: var(--muted); }
.delta-up { color: var(--success); font-weight: 600; }
.delta-down { color: var(--danger); font-weight: 600; }

.admin .grid-2 { margin-bottom: var(--s-4); }
.chart [hidden], .chart-tip[hidden] { display: none; }
.chart { margin: 0; min-width: 0; }
.chart figcaption h2 { margin-bottom: 2px; }
.chart figcaption { margin-bottom: 14px; }
.chart-body { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 170px auto; column-gap: 10px; }
.y-axis { position: relative; min-width: 24px; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.y-axis span { position: absolute; right: 0; transform: translateY(50%); line-height: 1; }
.plot { position: relative; outline: none; touch-action: pan-y; }
.plot:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent); border-radius: 4px; }
.plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plot .grid { stroke: var(--line); stroke-width: 1; }
.plot .area { fill: var(--chart); opacity: .1; }
.plot .line { fill: none; stroke: var(--chart); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.end-dot, .hover-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--chart); box-shadow: 0 0 0 2px var(--surface); transform: translate(-50%, 50%); pointer-events: none; }
.crosshair { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--muted); opacity: .5; pointer-events: none; }
.chart-tip { position: absolute; top: 4px; z-index: 5; display: grid; gap: 1px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--ink); color: #fff; font-size: 13px; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-2); }
.chart-tip strong { font-size: 15px; }
.chart-tip span { opacity: .78; }
.chart-tip-float { position: fixed; top: 0; left: 0; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--muted); font-size: var(--fs-sm); text-align: center; padding: 0 12px; }
.x-axis { grid-column: 2; position: relative; height: 22px; margin-top: 6px; font-size: var(--fs-xs); color: var(--muted); }
.x-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.x-axis span:first-child { transform: none; }
.x-axis span:last-child { transform: translateX(-100%); }

.table-view { margin-top: 12px; font-size: var(--fs-sm); }
.table-view summary { cursor: pointer; color: var(--muted); font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.table-scroll { max-height: 260px; overflow: auto; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-md); }
.table-compact { font-size: 13px; }
.table-compact th, .table-compact td { padding: 6px 10px; }

.heat { display: grid; grid-template-columns: auto repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; }
.heat-day { font-size: var(--fs-xs); color: var(--muted); padding-right: 6px; }
.heat-hour { font-size: var(--fs-xs); color: var(--muted); text-align: left; height: 16px; }
.heat-cell { display: block; height: 22px; border-radius: 3px; background: var(--sunken); transition: transform 120ms ease; }
.heat-cell.l1 { background: #7fb79a; }
.heat-cell.l2 { background: #4f9475; }
.heat-cell.l3 { background: #2f6b52; }
.heat-cell.l4 { background: #1f4d3a; }
.heat-cell.l5 { background: #12301f; }
.heat-cell.is-hover { transform: scale(1.18); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--ink); position: relative; z-index: 1; }
.heat-legend { display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 10px; font-size: var(--fs-xs); color: var(--muted); }
.heat-legend .heat-cell { width: 16px; height: 12px; }
.heat-legend span { margin: 0 4px; }

.hbars { display: grid; gap: 14px; margin-top: 14px; }
.hbar { display: grid; grid-template-columns: minmax(0, 1fr) 5.5em; gap: 4px 12px; align-items: center; }
.hbar-label { grid-column: 1 / -1; font-size: var(--fs-sm); }
.hbar-track { height: 16px; background: var(--brand-tint); border-radius: 0 4px 4px 0; }
.hbar-fill { height: 100%; min-width: 2px; background: var(--brand); border-radius: 0 4px 4px 0; transform-origin: left; animation: grow 700ms var(--ease-out) both; }
.hbar-fill.is-hover { filter: brightness(1.15); }
.hbar-value { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.hbar-value small { font-weight: 500; color: var(--muted); margin-left: 4px; }

.mini-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin: 8px 0 0; }
.mini-stats div { min-width: 0; }
.mini-stats dt { font-size: 13px; color: var(--muted); }
.mini-stats dd { margin: 2px 0 0; font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.01em; }
.mini-stats dd small { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 4px; }

.check-ok { color: var(--success); font-weight: 700; }
.check-no { color: var(--muted); font-weight: 700; }
.config { margin-top: var(--s-4); }
.config-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.config-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.config-list code { font-size: var(--fs-xs); color: var(--muted); }

/* Alta de un comercio: datos para pasarle. */
.credentials dl { display: grid; gap: var(--s-3); margin: 0 0 var(--s-5); }
.credentials dt { font-size: var(--fs-sm); color: var(--muted); }
.credentials dd { margin: 2px 0 0; font-size: var(--fs-md); word-break: break-all; }
.credential-secret { display: inline-block; padding: 6px 12px; border-radius: var(--r-md); background: var(--gold-tint); color: var(--ink); font-size: var(--fs-lg); letter-spacing: .04em; }
.credentials .actions { gap: var(--s-3); }
.admin-steps { padding-left: 20px; display: grid; gap: 8px; margin: 0; }
.privacy-note { margin-top: 12px; }

/* =====================================================================
   Movimiento
   App (se usa muchas veces al día): respuestas cortas y nítidas.
   Tarjeta del cliente, celebraciones y portada (se ven pocas veces): más vistosas.
   Solo se animan transform y opacity. Con «reducir movimiento», todo queda en fundidos.
   ===================================================================== */

/* Transición entre páginas (Chrome, Edge y Safari recientes). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 140ms ease-out both; }
::view-transition-new(root) { animation: vt-in 240ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
main > .lcard { view-transition-name: lcard; }
::view-transition-group(lcard) { animation-duration: 260ms; animation-timing-function: var(--ease-out); }
/* Billetera: la tarjeta tocada se expande hasta su detalle (y vuelve a su lugar al volver). */
::view-transition-group(*.tarjeta) { animation-duration: 440ms; animation-timing-function: var(--ease-drawer); }
::view-transition-old(*.tarjeta), ::view-transition-new(*.tarjeta) { animation-duration: 240ms; }
.topbar { view-transition-name: topbar; }
.tabbar { view-transition-name: tabbar; }
::view-transition-old(topbar), ::view-transition-new(topbar), ::view-transition-old(tabbar), ::view-transition-new(tabbar) { animation: none; }

/* Entrada escalonada de los bloques de cada página: parte de un estado visible. */
.rise { animation: rise 420ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* Aparición al hacer scroll. Donde el navegador lo permite, la anima el propio scroll (sin JavaScript
   y con el contenido visible si la animación no corre); si no, la activa app.js al entrar en pantalla. */
.reveal { opacity: 0; transform: translateY(32px) scale(.97); transition: opacity 500ms ease-out, transform var(--dur-reveal) var(--ease-out-expo); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@supports (animation-timeline: view()) {
  .reveal { opacity: 1; transform: none; transition: none; animation: reveal-in linear both; animation-timeline: view(); animation-range: entry calc(var(--i, 0) * 6%) entry calc(55% + var(--i, 0) * 6%); }
}
@keyframes reveal-in { from { opacity: 0; transform: translateY(44px) scale(.96); } }

.flash-error { animation: shake 420ms 80ms ease-in-out; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* Sellos: en la tarjeta del cliente aparecen en cascada; en el panel solo se anima el recién puesto. */
.card-body .stamp.on { animation: stamp-in 380ms var(--ease-pop) both; animation-delay: calc(160ms + var(--i, 0) * 40ms); }
@keyframes stamp-in { from { opacity: 0; transform: scale(0.6) rotate(-14deg); } }
.stamp.just { position: relative; animation: stamp-press 560ms var(--ease-out) both; animation-delay: 120ms; }
.stamp.just::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 3px solid var(--c-ink); opacity: 0;
  animation: ink-ring 700ms ease-out both; animation-delay: 300ms;
}
@keyframes stamp-press {
  0% { opacity: 0; transform: scale(1.9) rotate(-18deg); }
  55% { opacity: 1; transform: scale(0.88) rotate(4deg); }
  75% { transform: scale(1.06) rotate(-2deg); }
  100% { transform: none; }
}
@keyframes ink-ring { 0% { opacity: .9; transform: scale(0.8); } 100% { opacity: 0; transform: scale(1.7); } }
.lcard.is-stamped { animation: card-bump 480ms var(--ease-out) 200ms; }
@keyframes card-bump { 40% { transform: scale(1.025); } }

.reward { animation: reward-in 520ms var(--ease-pop) both; animation-delay: 360ms; }
@keyframes reward-in { from { opacity: 0; transform: translateY(12px) scale(0.94); } }

.badge { animation: badge-in 520ms var(--ease-pop) both; }
@keyframes badge-in { from { opacity: 0; transform: scale(0.7) rotate(-10deg); } }

/* Gráficos: la línea se descubre de izquierda a derecha, las barras crecen y el mapa de calor se enciende por hora. */
.plot svg { animation: chart-reveal 900ms var(--ease-out) 150ms both; }
@keyframes chart-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.plot .end-dot { animation: fade 300ms ease-out 900ms both; }
.bar-col { animation: bar-grow 620ms var(--ease-out) both; animation-delay: calc(120ms + var(--i, 0) * 14ms); }
@keyframes bar-grow { from { transform: scaleY(0); } }
.heat-cell[style] { animation: fade 360ms ease-out both; animation-delay: calc(100ms + var(--h, 0) * 18ms); }
@keyframes fade { from { opacity: 0; } }

/* Confeti (lo crea app.js) */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-confetti); overflow: hidden; }
.confetti[popover] { margin: 0; padding: 0; border: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent; }
.confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; }

/* Tarjeta de la portada que se va sellando sola. */
.demo-stamp { position: relative; }
.demo-stamp > * { grid-area: 1 / 1; }
.demo-stamp .icon, .demo-stamp.on > span { display: none; }
.demo-stamp.on .icon { display: block; }
.demo-stamp.on.just { animation: stamp-press 560ms var(--ease-out) both; }
.stage-note { transition: opacity 300ms ease-out, transform 400ms var(--ease-pop); }
.stage-note:not(.show) { opacity: 0; transform: translate(-50%, -14px) scale(.96); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .rise, .flash-error, .badge, .reward, .stamp.on, .stamp.just, .demo-stamp.on, .lcard.is-stamped, .firma.is-anim {
    animation: fade 200ms ease-out both !important; animation-delay: 0ms !important;
  }
  .firma.is-anim::after, .stamp.just::after { animation: none !important; }
  .reveal { transform: none; transition: opacity 300ms ease-out; }
  @supports (animation-timeline: view()) { .reveal { animation: none; opacity: 1; } }
  .progress span, .send-bar, .hbar-fill { animation: none; }
  .btn.is-busy::after { animation-duration: 2s; }
  .heat-cell { transition: none; }
  .toast { transition: opacity var(--dur-base) ease; @starting-style { opacity: 0; transform: none; } }
  .confetti { display: none; }
  .kinetic .kw > span, .marquee-track, .story .scene-btn, .story .scene-just, .story .scene-mail, .story .scene-card,
  .story .scene-scan, .story .how-list .num, .wallet-card, .cta-band .btn::before { animation: none !important; }
  .story .scene-ok { opacity: 1; transform: none; animation: none !important; }
  .wallet-card, .wallet-card.is-thrown { transition: opacity 200ms ease; }
  .scene { transform: none; filter: none; transition: opacity 200ms ease; }
  .modal, .modal[open] { transform: none; transition: opacity 200ms ease, overlay 200ms allow-discrete, display 200ms allow-discrete; @starting-style { transform: none; } }
  .copy-btn > span { transform: none !important; filter: none !important; }
  .tip[open] > :not(summary), .table-view[open] > :not(summary) { animation: none; }
  .plot svg, .plot .end-dot, .bar-col, .heat-cell[style], .close-bar span { animation: none; }
  .metrics.is-loading::before { animation-duration: 2s; }
}

/* Seguridad: campo trampa para bots (nunca visible) y el «no soy un robot» de Cloudflare, si está activado. */
.hp { display: none !important; }
.cf-turnstile { min-height: 65px; }