/* sobre.cash — sistema de marca: tokens, logo animado, sello, escenas.
   Todo vive bajo --sb-* / .sb-* para no pisar app.css.
   Movimiento: transform + opacity solamente. Reduced motion = mismo set de reglas
   con dos disparadores: @media (prefers-reduced-motion) y html.reduce-motion. */

:root {
  /* Aqua — escala de marca. El 400 es "el" aqua: botón, lacre y luz. */
  --sb-aqua-50:  #effcfd;
  --sb-aqua-100: #d3f5f8;
  --sb-aqua-200: #a6ebf1;  /* 13.9:1 sobre noche — títulos */
  --sb-aqua-300: #62dbe6;  /* 11.2:1 — links, hashes */
  --sb-aqua-400: #1ccad8;  /*  9.2:1 — el aqua; texto encima en 950 */
  --sb-aqua-500: #0fb0c0;
  --sb-aqua-600: #0a8e9d;  /* 4.7:1 — trazos e íconos, nunca texto chico */
  --sb-aqua-700: #0a6874;
  --sb-aqua-800: #0a5e69;  /* cuerpo del sobre */
  --sb-aqua-900: #0c4651;
  --sb-aqua-950: #072f37;
  --sb-tide:     #3d8bff;  /* compañero frío: auroras, foco (5.6:1) */
  --sb-tide-300: #7fb2ff;

  /* Superficies oscuras (tema principal): noche azul, no negro. */
  --sb-night:   var(--bg, #080f13);       /* fondo */
  --sb-deep:    var(--surface, #0e1a1f);  /* paneles */
  --sb-raised:  var(--raised, #152429);   /* tarjetas elevadas */
  --sb-edge:    var(--line, #20343b);     /* bordes */
  --sb-rim:     rgba(98, 219, 230, .22);  /* luz de borde en vidrio */

  /* Semánticos — los componentes sólo usan estos. Toman los tokens de app.css si están
     cargados (mismos valores de respaldo). .sb-light los da vuelta. */
  --sb-bg:      var(--sb-night);
  --sb-text:    var(--text, #eaf4f5);     /* 17:1 */
  --sb-muted:   var(--muted, #8ea4a9);    /* 6.1:1 aun sobre relieve */
  --sb-heading: var(--heading, #6fe4ee);
  --sb-link:    var(--aqua-text, #5fe3ee);
  --sb-line:    var(--sb-edge);
  --sb-hold:    var(--warn, #f2b35b);   /* "en revisión": ámbar, nunca rojo para plata en camino */
  --sb-break:   var(--bad, #ff7a72);   /* eslabón roto */

  /* Movimiento */
  --sb-d-tap:   120ms;   /* respuesta a un toque */
  --sb-d-ui:    240ms;   /* hover, foco, cambios chicos */
  --sb-d-fold:  380ms;   /* la solapa que se cierra */
  --sb-d-stamp: 300ms;   /* el lacre que cae */
  --sb-d-shine: 520ms;   /* el brillo que cruza la cera */
  --sb-d-scene: 900ms;   /* una escena completa, sin contar el sello */
  --sb-e-out:   cubic-bezier(.2, .8, .2, 1);       /* entradas */
  --sb-e-fold:  cubic-bezier(.65, 0, .35, 1);      /* papel: arranca y frena */
  --sb-e-stamp: cubic-bezier(.3, 1.35, .45, 1);    /* cae, rebota apenas */
  --sb-e-lift:  cubic-bezier(.34, 1.56, .64, 1);   /* hover del sello */
}

/* ── Logo (svg generado por brand.js, misma geometría que logo-mark.svg) ── */
.sb-logo { display: inline-flex; align-items: center; gap: .45em; color: var(--sb-text); text-decoration: none; }
.sb-logo svg { overflow: visible; }
.sb-mark { width: 2.25em; height: 2.25em; flex: none; overflow: visible; }
.sb-wordmark { height: 1.5em; width: auto; flex: none; }
/* fill-box sólo en lo que se anima: aplicado a todo, rompe los transform="" del SVG. */
:is(.sb-mark__env, .sb-mark__flap, .sb-mark__flap-in, .sb-mark__seal, .sb-mark__glow, .sb-mark__shine, .sb-mark__dot,
    .sb-seal__wax, .sb-seal__ring, .sb-seal__shadow, .sb-seal__glow, .sb-seal__shine,
    .sb-slip, .sb-flap-back, .sb-flap-front, .sb-wait, .sb-key-tooth, .sb-key-tag, .sb-coin) { transform-box: fill-box; }
.sb-mark__flap, .sb-mark__flap-in { transform-origin: 50% 0; }
.sb-mark__seal { transform-origin: 50% 50%; }
.sb-mark__shine { transform: translateX(-16px); }
.sb-mark__flap-in { opacity: 0; }

/* Intro: una sola vez. Sobre aparece → solapa se cierra → lacre cae → brillo. ≈1.1 s */
.sb-mark.is-intro .sb-mark__env   { animation: sb-rise 300ms var(--sb-e-out) both; }
.sb-mark.is-intro .sb-mark__flap,
.sb-mark.is-intro .sb-mark__flap-in { animation: sb-fold var(--sb-d-fold) var(--sb-e-fold) 120ms both; }
.sb-mark.is-intro .sb-mark__flap-in { animation-name: sb-fold-in; }
.sb-mark.is-intro .sb-mark__flap-shadow { animation: sb-fadein 160ms linear 440ms both; }
.sb-mark.is-open .sb-mark__flap-shadow { opacity: 0; }
@keyframes sb-fadein { from { opacity: 0; } }
.sb-mark.is-intro .sb-mark__seal  { animation: sb-stamp var(--sb-d-stamp) var(--sb-e-stamp) 440ms both; }
.sb-mark__glow { transform-origin: 50% 50%; }
.sb-mark.is-intro .sb-mark__glow  { animation: sb-glow 800ms var(--sb-e-out) 560ms both; }
.sb-mark.is-loading .sb-mark__glow { animation: sb-breathe 1.6s var(--sb-e-fold) infinite reverse; }
.sb-mark.is-intro .sb-mark__shine { animation: sb-shine var(--sb-d-shine) var(--sb-e-fold) 720ms both; }
.sb-wordmark.is-intro { animation: sb-rise 360ms var(--sb-e-out) 60ms both; }
.sb-wordmark.is-intro .sb-mark__dot { animation: sb-stamp var(--sb-d-stamp) var(--sb-e-stamp) 600ms both; }

/* Hover: el sobre "espía": la solapa se levanta 2 px y el lacre la acompaña. */
.sb-mark__flap, .sb-mark__seal { transition: transform var(--sb-d-ui) var(--sb-e-lift); }
:is(a, button):is(:hover, :focus-visible) > .sb-mark:not(.is-intro):not(.is-loading) .sb-mark__flap,
.sb-mark.is-hover:not(.is-intro):not(.is-loading) .sb-mark__flap,
.sb-mark:not(.is-intro):not(.is-loading):hover .sb-mark__flap { transform: scaleY(.88); }
:is(a, button):is(:hover, :focus-visible) > .sb-mark:not(.is-intro):not(.is-loading) .sb-mark__seal,
.sb-mark.is-hover:not(.is-intro):not(.is-loading) .sb-mark__seal,
.sb-mark:not(.is-intro):not(.is-loading):hover .sb-mark__seal { transform: translateY(-1.9px) rotate(-6deg); }
:is(a, button):is(:hover, :focus-visible) > .sb-mark:not(.is-intro):not(.is-loading) .sb-mark__shine,
.sb-mark.is-hover:not(.is-intro):not(.is-loading) .sb-mark__shine,
.sb-mark:not(.is-intro):not(.is-loading):hover .sb-mark__shine { animation: sb-shine var(--sb-d-shine) var(--sb-e-fold) 60ms both; }
/* Hover: el brillo del lacre se enciende un poco más. */
:is(a, button):is(:hover, :focus-visible) > .sb-mark:not(.is-loading) .sb-mark__glow { opacity: .85; transition: opacity var(--sb-d-ui) var(--sb-e-out); }

/* Vida en reposo (después de la intro): el brillo cruza el lacre cada 9 s y la luz respira.
   Sutil a propósito: se nota de reojo, no distrae. Apagado con movimiento reducido. */
.sb-mark.is-alive:not(.is-intro):not(.is-loading):not(.is-open) .sb-mark__shine { animation: sb-idle-shine 9s var(--sb-e-fold) 2s infinite; }
.sb-mark.is-alive:not(.is-intro):not(.is-loading):not(.is-open) .sb-mark__glow  { animation: sb-idle-glow 4.5s ease-in-out infinite; }
@keyframes sb-idle-shine { 0%, 90% { transform: translateX(-16px); } 100% { transform: translateX(16px); } }
@keyframes sb-idle-glow  { 0%, 100% { opacity: .45; } 50% { opacity: .8; } }

/* Tamaño de header: el lockup a 17 px deja la marca en ~38 px, suficiente para que la intro se lea. */
a.sb-logo.sb-logo--head, .sb-logo.sb-logo--head { font-size: 17px; gap: .45em; }
.sb-logo .sb-logo__tag { font-size: .8em; font-weight: 500; color: var(--sb-muted); margin-left: .1em; }

/* Cargando: reemplazo del spinner. El lacre respira, el brillo pasa cada 1.6 s. */
.sb-mark.is-loading .sb-mark__seal  { animation: sb-breathe 1.6s var(--sb-e-fold) infinite; }
.sb-mark.is-loading .sb-mark__shine { animation: sb-shine 1.6s var(--sb-e-fold) infinite; }
.sb-mark.is-loading .sb-mark__flap  { animation: sb-peek 1.6s var(--sb-e-fold) infinite; }
.sb-loader { display: inline-flex; align-items: center; gap: .6rem; color: var(--sb-muted); }
.sb-loader .sb-mark { width: 1.6em; height: 1.6em; }

/* Abrir (login correcto): se rompe el lacre, la solapa se abre. */
.sb-mark.is-open .sb-mark__seal { animation: sb-unseal 420ms var(--sb-e-fold) both; }
.sb-mark.is-open .sb-mark__flap { animation: sb-unfold var(--sb-d-fold) var(--sb-e-fold) 200ms both; }
.sb-mark.is-open .sb-mark__flap-in { animation: sb-unfold-in var(--sb-d-fold) var(--sb-e-fold) 200ms both; }

@keyframes sb-rise   { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes sb-fold   { 0% { transform: scaleY(-1); opacity: 0; } 1% { opacity: 1; } 100% { transform: scaleY(1); } }
@keyframes sb-fold-in{ 0% { transform: scaleY(-1); opacity: 1; } 49.9% { opacity: 1; } 50%, 100% { opacity: 0; transform: scaleY(1); } }
@keyframes sb-unfold { 0% { transform: scaleY(1); opacity: 1; } 49.9% { opacity: 1; } 50%, 100% { opacity: 0; transform: scaleY(-1); } }
@keyframes sb-unfold-in { 0%, 49.9% { opacity: 0; transform: scaleY(1); } 50% { opacity: 1; } 100% { opacity: 1; transform: scaleY(-1); } }
@keyframes sb-stamp {
  0%   { opacity: 0; transform: translateY(-9px) scale(1.55) rotate(-14deg); }
  55%  { opacity: 1; transform: translateY(0) scale(1.14, .8) rotate(0); }  /* aplasta: más ancho que alto */
  78%  { transform: scale(.96, 1.05); }                                      /* rebota */
  100% { opacity: 1; transform: none; }
}
@keyframes sb-shine  { from { transform: translateX(-16px); } to { transform: translateX(16px); } }
@keyframes sb-breathe{ 0%, 100% { transform: none; } 50% { transform: scale(.9); opacity: .75; } }
@keyframes sb-peek   { 0%, 100% { transform: none; } 50% { transform: scaleY(.82); } }
@keyframes sb-unseal { 0% { transform: none; } 30% { transform: scale(1.08) rotate(4deg); } 100% { opacity: 0; transform: translate(6px, -14px) rotate(28deg) scale(.8); } }

/* ── Sello con huella de hash ─────────────────────────────────────────────
   La huella (24 marcas alrededor del ojo de la cerradura) sale del hash del
   movimiento: dos sellos iguales = mismo hash. */
.sb-seal { width: 4rem; height: 4rem; display: inline-block; overflow: visible; }
.sb-seal__wax { transform-origin: 50% 50%; }
.sb-seal__ring { transform-origin: 50% 50%; opacity: 0; }
.sb-seal__glow { transform-origin: 50% 50%; }
.sb-seal.is-stamping .sb-seal__glow { animation: sb-glow 900ms var(--sb-e-out) 200ms both; }
@keyframes sb-glow { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: .75; transform: scale(1.15); } 100% { opacity: .4; transform: none; } }
.sb-seal__shadow { transform-origin: 50% 50%; }
.sb-seal.is-stamping .sb-seal__wax    { animation: sb-stamp-lg 520ms var(--sb-e-stamp) both; }
.sb-seal.is-stamping .sb-seal__shadow { animation: sb-shadow 520ms var(--sb-e-stamp) both; }
.sb-seal.is-stamping .sb-seal__ring   { animation: sb-ripple 700ms var(--sb-e-out) 260ms both; }
.sb-seal.is-stamping .sb-seal__shine  { animation: sb-shine-lg 600ms var(--sb-e-fold) 420ms both; }
.sb-seal__shine { transform: translateX(-60px); }
@keyframes sb-stamp-lg {
  0%   { opacity: 0; transform: translateY(-26px) scale(1.4) rotate(-18deg); }
  50%  { opacity: 1; transform: translateY(0) scale(1.12, .82) rotate(0); }
  72%  { transform: scale(.97, 1.04); }
  100% { opacity: 1; transform: none; }
}
@keyframes sb-shadow { 0% { opacity: 0; transform: scale(1.6); } 50% { opacity: 1; transform: scale(.9); } 100% { opacity: 1; transform: none; } }
@keyframes sb-ripple { from { opacity: .7; transform: scale(.9); } to { opacity: 0; transform: scale(1.7); } }
@keyframes sb-shine-lg { from { transform: translateX(-60px); } to { transform: translateX(60px); } }

/* ── Escenas ─────────────────────────────────────────────────────────────── */
.sb-scene { position: relative; width: 100%; max-width: 360px; margin-inline: auto; aspect-ratio: 32 / 22; }
.sb-scene > svg { width: 100%; height: 100%; overflow: visible; }
.sb-scene :is(.sb-slip, .sb-flap-back, .sb-flap-front, .sb-wait, .sb-key-tooth, .sb-key-bow, .sb-key-tag, .sb-key-seal, .sb-ghost-seal) {
  transition: transform var(--sb-d-scene) var(--sb-e-fold), opacity var(--sb-d-ui) var(--sb-e-out);
}

/* 1 · Cobrar. idle: sobre abierto, el pago arriba. working: entra a medias
   y espera. done: entra, se cierra, se sella. hold: queda a medias, sin sello. */
.sb-flap-back  { transform-origin: 50% 100%; }
.sb-flap-front { transform-origin: 50% 0; transform: scaleY(0); }
.sb-slip       { transform: translateY(-54px); }
.sb-wait       { opacity: 0; transform-origin: 50% 50%; }
.sb-scene--cobro .sb-seal-slot { opacity: 0; }
.sb-scene--cobro[data-state="working"] .sb-slip { transform: translateY(-22px); animation: sb-bob 2.4s var(--sb-e-fold) var(--sb-d-scene) infinite; }
.sb-scene--cobro[data-state="working"] .sb-wait { opacity: 1; animation: sb-spin 6s linear infinite; }
.sb-scene--cobro[data-state="done"] .sb-slip { transform: translateY(32px); transition-duration: 520ms; }
.sb-scene--cobro[data-state="done"] .sb-flap-back  { transform: scaleY(0); transition: transform 190ms ease-in 420ms; }
.sb-scene--cobro[data-state="done"] .sb-flap-front { transform: scaleY(1); transition: transform 240ms var(--sb-e-out) 610ms; }
.sb-scene--cobro[data-state="done"] .sb-seal-slot { opacity: 1; }
.sb-scene--cobro[data-state="done"] .sb-seal-slot .sb-seal__wax    { animation: sb-stamp-lg 520ms var(--sb-e-stamp) 820ms both; }
.sb-scene--cobro[data-state="done"] .sb-seal-slot .sb-seal__shadow { animation: sb-shadow 520ms var(--sb-e-stamp) 820ms both; }
.sb-scene--cobro[data-state="done"] .sb-seal-slot .sb-seal__glow { animation: sb-glow 900ms var(--sb-e-out) 1020ms both; }
.sb-scene--cobro[data-state="done"] .sb-seal-slot .sb-seal__ring   { animation: sb-ripple 700ms var(--sb-e-out) 1080ms both; }
.sb-scene--cobro[data-state="done"] .sb-seal-slot .sb-seal__shine  { animation: sb-shine-lg 600ms var(--sb-e-fold) 1240ms both; }
.sb-scene--cobro[data-state="hold"] .sb-slip { transform: translateY(-22px); }
.sb-scene--cobro[data-state="hold"] .sb-wait { opacity: 1; stroke: var(--sb-hold); }
@keyframes sb-bob  { 0%, 100% { transform: translateY(-22px); } 50% { transform: translateY(-28px); } }
@keyframes sb-spin { to { transform: rotate(360deg); } }

/* 2 · Llave. idle: llave en blanco. working: los dientes se buscan. done: quedan
   fijos (salen de la llave real) y el lacre sella el ojo. */
.sb-key-tooth { transform-origin: 50% 0; transform: scaleY(var(--t, .5)); }
.sb-key-bow   { stroke-dasharray: 170; stroke-dashoffset: 0; }
.sb-key-seal  { opacity: 0; }
.sb-key-tag   { transform-origin: 0 50%; transform: rotate(-4deg); }
.sb-scene--key[data-state="idle"] .sb-key-tooth { transform: scaleY(.15); }
.sb-scene--key[data-state="working"] .sb-key-tooth { animation: sb-tooth 520ms var(--sb-e-fold) calc(var(--i) * -90ms) infinite alternate; }
.sb-scene--key[data-state="working"] .sb-key-bow { animation: sb-draw 1.4s var(--sb-e-fold) infinite; }
.sb-scene--key[data-state="done"] .sb-key-tooth { transition: transform 420ms var(--sb-e-stamp) calc(var(--i) * 45ms); }
.sb-scene--key[data-state="done"] .sb-key-seal { opacity: 1; }
.sb-scene--key[data-state="done"] .sb-key-tag  { transform: rotate(3deg); transition: transform 700ms var(--sb-e-lift) 500ms; }
.sb-scene--key[data-state="done"] .sb-key-seal .sb-seal__wax    { animation: sb-stamp-lg 520ms var(--sb-e-stamp) 420ms both; }
.sb-scene--key[data-state="done"] .sb-key-seal .sb-seal__shadow { animation: sb-shadow 520ms var(--sb-e-stamp) 420ms both; }
.sb-scene--key[data-state="done"] .sb-key-seal .sb-seal__glow { animation: sb-glow 900ms var(--sb-e-out) 620ms both; }
.sb-scene--key[data-state="done"] .sb-key-seal .sb-seal__ring   { animation: sb-ripple 700ms var(--sb-e-out) 680ms both; }
.sb-scene--key[data-state="done"] .sb-key-seal .sb-seal__shine  { animation: sb-shine-lg 600ms var(--sb-e-fold) 840ms both; }
@keyframes sb-tooth { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
@keyframes sb-draw  { 0% { stroke-dashoffset: 170; } 60%, 100% { stroke-dashoffset: 0; } }

/* 3 · Auditoría. Lista real (HTML) de eslabones; cada uno con su sello-huella.
   working: se verifican de a uno. done: la cadena queda cerrada con el sello del libro.
   broken: el eslabón marcado .is-broken corta la cadena. */
.sb-chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 34rem; }
.sb-chain__link { position: relative; display: grid; grid-template-columns: 3.25rem 1fr auto; gap: .9rem; align-items: center; padding: .7rem 0; }
.sb-chain__link .sb-seal { width: 3.25rem; height: 3.25rem; }
.sb-chain__link::before { /* el eslabón: tramo que une este sello con el anterior */
  content: ""; position: absolute; left: calc(1.625rem - 1.5px); top: -.7rem; height: 1.4rem; width: 3px; border-radius: 3px;
  background: var(--sb-aqua-400); box-shadow: 0 0 10px rgba(28, 202, 216, .55); transform-origin: 50% 0; transform: scaleY(0);
  transition: transform 260ms var(--sb-e-out) calc(var(--i, 0) * 260ms);
}
.sb-chain__link:first-child::before { display: none; }
.sb-chain__title { color: var(--sb-text); font-weight: 600; }
.sb-chain__meta { color: var(--sb-muted); font-size: .875rem; }
.sb-chain__hash { color: var(--sb-link); font: 500 .8125rem/1 var(--mono, ui-monospace), ui-monospace, 'SF Mono', Menlo, monospace; font-variant-numeric: tabular-nums; }
.sb-chain__link .sb-seal { transition: opacity 260ms var(--sb-e-out) calc(var(--i, 0) * 260ms), filter 260ms var(--sb-e-out) calc(var(--i, 0) * 260ms); }
.sb-chain[data-state="idle"] .sb-chain__link .sb-seal,
.sb-chain[data-state="working"] .sb-chain__link .sb-seal { opacity: .35; filter: grayscale(1); }
.sb-chain[data-state="working"] .sb-chain__link .sb-seal { animation: sb-check 260ms var(--sb-e-out) calc(var(--i, 0) * 260ms) both; }
.sb-chain[data-state="working"] .sb-chain__link::before { animation: sb-link 260ms var(--sb-e-out) calc(var(--i, 0) * 260ms) both; }
.sb-chain:is([data-state="done"], [data-state="broken"]) .sb-chain__link::before { transform: scaleY(1); }
.sb-chain:is([data-state="done"], [data-state="broken"]) .sb-chain__link .sb-seal { opacity: 1; filter: none; }
.sb-chain[data-state="broken"] .sb-chain__link.is-broken::before { background: none; box-shadow: none; border-block: 3px solid var(--sb-break); width: 9px; left: calc(1.625rem - 4.5px); height: 1rem; top: -.5rem; border-radius: 0; }
.sb-chain[data-state="broken"] .sb-chain__link.is-broken ~ .sb-chain__link .sb-seal { opacity: .35; filter: grayscale(1); }
.sb-chain[data-state="broken"] .sb-chain__link.is-broken ~ .sb-chain__link::before { background: var(--sb-line); box-shadow: none; }
.sb-chain[data-state="broken"] .is-broken .sb-chain__hash { color: var(--sb-break); }
.sb-chain__end { display: grid; grid-template-columns: 3.25rem 1fr; gap: .9rem; align-items: center; padding-top: .9rem; border-top: 1px solid var(--sb-line); margin-top: .4rem; }
.sb-chain__end .sb-seal { width: 3.25rem; height: 3.25rem; opacity: 0; }
.sb-chain__end p { margin: 0; color: var(--sb-muted); }
.sb-chain[data-state="done"] .sb-chain__end .sb-seal { opacity: 1; }
.sb-chain[data-state="done"] .sb-chain__end .sb-seal__wax    { animation: sb-stamp-lg 520ms var(--sb-e-stamp) var(--sb-end-delay, 0ms) both; }
.sb-chain[data-state="done"] .sb-chain__end .sb-seal__shadow { animation: sb-shadow 520ms var(--sb-e-stamp) var(--sb-end-delay, 0ms) both; }
.sb-chain[data-state="done"] .sb-chain__end .sb-seal__glow { animation: sb-glow 900ms var(--sb-e-out) calc(var(--sb-end-delay, 0ms) + 200ms) both; }
.sb-chain[data-state="done"] .sb-chain__end .sb-seal__ring   { animation: sb-ripple 700ms var(--sb-e-out) calc(var(--sb-end-delay, 0ms) + 260ms) both; }
@keyframes sb-check { 0% { opacity: .35; filter: grayscale(1); } 100% { opacity: 1; filter: none; } }
@keyframes sb-link  { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* 2 · Chanchito. idle: quieto, al nivel actual. working: la plata va y viene. done: entra
   una moneda, el nivel sube a --sb-lvl y el chanchito queda sellado. */
.sb-scene--chanchito { --sb-lvl: .35; }
.sb-pot-fill { transform: translateY(calc(180px - var(--sb-lvl) * 100px)); transition: transform 900ms var(--sb-e-fold); }
.sb-coin { opacity: 0; transform-origin: 50% 50%; }
.sb-pig-seal { opacity: 0; }
.sb-scene--chanchito[data-state="working"] .sb-coin { animation: sb-coin 1.5s var(--sb-e-fold) infinite; }
.sb-scene--chanchito[data-state="working"] .sb-pot-wave { animation: sb-wave 1.6s linear infinite; }
.sb-scene--chanchito[data-state="done"] .sb-coin { animation: sb-coin 900ms var(--sb-e-fold) both; }
.sb-scene--chanchito[data-state="done"] .sb-pot-fill { transition-delay: 700ms; }
.sb-scene--chanchito[data-state="done"] .sb-pig-seal { opacity: 1; }
.sb-scene--chanchito[data-state="done"] .sb-pig-seal .sb-seal__wax    { animation: sb-stamp-lg 520ms var(--sb-e-stamp) 1100ms both; }
.sb-scene--chanchito[data-state="done"] .sb-pig-seal .sb-seal__shadow { animation: sb-shadow 520ms var(--sb-e-stamp) 1100ms both; }
.sb-scene--chanchito[data-state="done"] .sb-pig-seal .sb-seal__glow   { animation: sb-glow 900ms var(--sb-e-out) 1300ms both; }
.sb-scene--chanchito[data-state="done"] .sb-pig-seal .sb-seal__ring   { animation: sb-ripple 700ms var(--sb-e-out) 1360ms both; }
@keyframes sb-coin {
  0%   { opacity: 0; transform: translate(0, 0) scale(.6); }
  12%  { opacity: 1; transform: translate(4px, -8px) scale(1); }
  50%  { transform: translate(76px, -80px) rotate(160deg); }
  82%  { opacity: 1; transform: translate(147px, -44px) rotate(300deg) scale(.95); }
  100% { opacity: 0; transform: translate(147px, -26px) rotate(360deg) scale(.55, .3); }
}
@keyframes sb-wave { to { transform: translateX(-48px); } }

/* ── Kit de carga: esqueletos con brillo, spinner de lacre (.sb-loader) ── */
.sb-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sb-skel-group { display: grid; gap: .25rem; }
.sb-skel { position: relative; display: block; overflow: hidden; border-radius: 7px; background: rgba(234, 244, 245, .07); }
.sb-skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(98, 219, 230, .13) 50%, transparent);
  animation: sb-shimmer 1.5s var(--sb-e-fold) calc(var(--i, 0) * 60ms) infinite;
}
.sb-skel-line { height: .75rem; margin: .4rem 0; }
.sb-w3 { width: 30%; } .sb-w4 { width: 40%; } .sb-w5 { width: 50%; } .sb-w6 { width: 60%; }
.sb-w7 { width: 70%; } .sb-w8 { width: 80%; } .sb-w9 { width: 90%; } .sb-w10 { width: 100%; }
.sb-skel-amount { height: 2.4rem; width: 55%; margin: .6rem 0; border-radius: 10px; }
.sb-skel-dot { width: 2.25rem; height: 2.25rem; border-radius: 50%; }
.sb-skel-num { width: 4.5rem; height: .9rem; }
.sb-skel-row { display: grid; grid-template-columns: 2.25rem 1fr auto; gap: .9rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--sb-line); }
.sb-skel-row:last-child { border-bottom: 0; }
.sb-skel-card { padding: 1.25rem; border-radius: 18px; border: 1px solid var(--sb-line); background: linear-gradient(180deg, rgba(234, 244, 245, .03), transparent); }
.sb-light .sb-skel { background: rgba(14, 42, 48, .07); }
.sb-light .sb-skel::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7) 50%, transparent); }
@keyframes sb-shimmer { to { transform: translateX(100%); } }

/* ── Transiciones de vista ─────────────────────────────────────────────
   enter(): una vista o bloque nuevo entra 8 px y aparece. transition(): View Transitions. */
.sb-enter { animation: sb-enter 360ms var(--sb-e-out) both; }
.sb-enter--left  { --sb-ex: -12px; --sb-ey: 0; }
.sb-enter--right { --sb-ex: 12px;  --sb-ey: 0; }
.sb-enter--up    { --sb-ex: 0;     --sb-ey: 8px; }
@keyframes sb-enter { from { opacity: 0; transform: translate(var(--sb-ex, 0), var(--sb-ey, 8px)); } to { opacity: 1; transform: none; } }
::view-transition-old(root) { animation: sb-vt-out 160ms var(--sb-e-out) both; }
::view-transition-new(root) { animation: sb-vt-in 300ms var(--sb-e-out) 60ms both; }
@keyframes sb-vt-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes sb-vt-in  { from { opacity: 0; transform: translateY(8px); } }

/* ── Revelado al scroll (usar en ≤2 momentos por página, nunca en cada sección) ── */
.sb-reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--sb-e-out), transform 600ms var(--sb-e-out); }
.sb-reveal.is-in { opacity: 1; transform: none; }
html:not(.sb-js) .sb-reveal { opacity: 1; transform: none; }

/* ── Profundidad: capas del héroe siguen al puntero (sólo mouse fino) ──── */
[data-sb-depth] { --sb-dx: 0; --sb-dy: 0; }
[data-sb-layer] {
  transform: translate3d(calc(var(--sb-dx) * var(--sb-z, 1) * 8px), calc(var(--sb-dy) * var(--sb-z, 1) * 8px), 0);
  transition: transform 500ms var(--sb-e-out);
}
.sb-z-1 { --sb-z: .35; } .sb-z-2 { --sb-z: .7; } .sb-z-3 { --sb-z: 1; }

/* ── Reduced motion: cuadro final, legible, sin bucles ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sb-mark *, .sb-seal *, .sb-scene *, .sb-chain *, .sb-chain *::before { animation: none !important; transition: none !important; }
  .sb-skel::after, .sb-enter { animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .sb-reveal { opacity: 1; transform: none; transition: none; }
  [data-sb-layer] { transform: none; transition: none; }
}
html.reduce-motion :is(.sb-mark, .sb-seal, .sb-scene, .sb-chain) *,
html.reduce-motion .sb-chain *::before { animation: none !important; transition: none !important; }
html.reduce-motion .sb-reveal { opacity: 1; transform: none; transition: none; }
html.reduce-motion .sb-skel::after, html.reduce-motion .sb-enter { animation: none !important; }
html.reduce-motion::view-transition-old(root), html.reduce-motion::view-transition-new(root) { animation: none !important; }
html.reduce-motion [data-sb-layer] { transform: none; transition: none; }

/* Variante clara (secundaria): sobre papel blanco. Mismo sobre, wordmark en tinta. */
.sb-light {
  --sb-bg: #ffffff; --sb-text: #0e2a30; --sb-muted: #4d6268; --sb-heading: var(--sb-aqua-800);
  --sb-link: var(--sb-aqua-700); --sb-line: #d7e3e6; --sb-hold: #9a5b00; --sb-break: #b42318;
}
.sb-light .sb-logo, .sb-light.sb-logo { color: var(--sb-aqua-900); }
.sb-light .sb-mark__glow { opacity: .3; }

/* Antes de la intro (250 ms): oculto, para que no se vea el cuadro final y después "rebobine". */
.sb-mark.is-pre, .sb-wordmark.is-pre { opacity: 0; }
/* Intro sobre un lockup que ya se ve (hydrateLogos): sin fundido de entrada. */
.sb-mark.is-intro.is-over .sb-mark__env, .sb-wordmark.is-intro.is-over { animation: none; }
@media (prefers-reduced-motion: reduce) { .sb-mark.is-pre, .sb-wordmark.is-pre { opacity: 1; } }
html.reduce-motion .sb-mark.is-pre, html.reduce-motion .sb-wordmark.is-pre { opacity: 1; }