/*
Theme Name: The Spine
Theme URI: https://thespine.es
Author: The Spine
Description: The Spine, presenting itself. Conscience speaks; the spine holds; boards open when something needs showing.
Version: 0.26.2
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: the-spine-web
*/

/* ═════════════════════════════════════════════════════════════════════════
   0 · La piel de la casa
   ═════════════════════════════════════════════════════════════════════════ */
:root {
  --ink: #111111;
  --ink-2: #101012;
  --soft: #6f6f6f;
  --faint: #a3a3a3;
  --hair: #eeeeee;
  --band: #eeeeee;
  --faldon: #f7f7f7;
  --line: #e6e6e6;
  --amber: #b85c1a;
  --panel-w: 380px;
  --spine-w: 22vw;
  --font: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 400 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img, svg, video { display: block; max-width: 100%; }
.sp-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* ═════════════════════════════════════════════════════════════════════════
   1 · La casa: fondo #f4f4f4 con la luz central, el logo y su claim arriba
   ═════════════════════════════════════════════════════════════════════════ */
body { background: #f4f4f4; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 50% 55%, rgba(255,255,255,.9), rgba(244,244,244,0) 70%);
}
.sp-top { position: fixed; inset: 0 0 auto 0; z-index: 40; height: 0; }
.sp-logo {
  position: absolute; left: 50%; top: 24px; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 6px; text-decoration: none; color: #101012;
}
.sp-logo svg { width: 150px; height: auto; display: block; }
.sp-claim { font-size: 12.5px; letter-spacing: .04em; color: rgba(16,16,18,.5); }
.sp-talk {
  position: absolute; right: 28px; top: 34px;
  font-size: 14px; color: rgba(16,16,18,.72); text-decoration: none; padding: 4px 0;
  border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.sp-talk:hover { color: #101012; border-color: #101012; }

/* ═════════════════════════════════════════════════════════════════════════
   2 · La espina: en el centro, quieta, siempre
   ═════════════════════════════════════════════════════════════════════════ */
.sp-spine {
  position: fixed; z-index: 1; left: 50%; top: clamp(130px, 15vh, 180px);
  transform: translateX(-50%);
  width: min(455px, 31vw); height: min(80vh, 860px);
  display: flex; justify-content: center; pointer-events: none;
  mix-blend-mode: multiply; /* el vídeo va sobre blanco: al multiplicar, el blanco desaparece en el gris */
  transition: filter .6s var(--ease), opacity .6s var(--ease);
}
.sp-spine video, .sp-spine img { height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: contrast(1.04); opacity: .95; }
.no-js .sp-spine { opacity: .25; }

/* ═════════════════════════════════════════════════════════════════════════
   3 · Las tres columnas, alineadas por arriba (como en el programa):
       izquierda la voz · centro la espina y la prueba · derecha la respuesta
   ═════════════════════════════════════════════════════════════════════════ */
:root { --top: clamp(210px, calc(18.6vh + 40px), 262px); }

/* Sin JavaScript (o con «menos movimiento»): se lee como un artículo, capítulo a capítulo */
.sp-stage { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 200px 20px 80px; }
.sp-chapter { margin: 0 0 72px; }
.sp-chapter > * + * { margin-top: 22px; }

html.js .sp-stage { max-width: none; margin: 0; padding: 0; height: calc(var(--beats, 13) * 90vh); }
html.js .sp-chapter { display: none; }
.sp-col { display: none; }
html.js .sp-col { display: block; position: fixed; z-index: 3; top: var(--top); transition: filter .6s var(--ease), opacity .6s var(--ease); }
html.js .sp-col--left { left: max(20px, calc(50vw - 680px)); width: clamp(280px, 26vw, 432px); }
html.js .sp-col--right { right: max(48px, calc(50vw - 652px)); width: clamp(300px, 27vw, 430px); max-height: calc(100vh - var(--top) - 56px); overflow-y: auto; scrollbar-width: none; }
html.js body.has-proof .sp-col, html.js body.has-proof .sp-spine { filter: blur(7px); opacity: .4; }

/* ── La voz: la frase de ahora en tinta, la de antes en gris encima ── */
.sp-line { margin: 0 0 26px; }
html.js .sp-col--left .sp-line { display: none; }
html.js .sp-col--left .sp-line.is-prev,
html.js .sp-col--left .sp-line.is-cur { display: block; }
html.js .sp-col--left .sp-line.is-prev { opacity: .32; transition: opacity .6s var(--ease); }
html.js .sp-col--left .sp-line.is-prev .sp-verbs { display: none; }
html.js .sp-col--left .sp-line.is-cur { animation: sp-rise .7s var(--ease) both; }
@keyframes sp-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.sp-say { margin: 0 0 10px; font-size: clamp(14.5px, 1.2vw, 16px); line-height: 1.6; color: rgba(16,16,18,.72); max-width: 44ch; }
h1.sp-say, h2.sp-say { font-size: clamp(21px, 2.1vw, 27px); line-height: 1.28; font-weight: 600; color: #101012; letter-spacing: -.012em; margin-bottom: 12px; }
.sp-say strong { color: #101012; font-weight: 600; }

/* Los verbos: palabras, no botones. El principal en tinta. */
.sp-verbs { display: flex; flex-wrap: wrap; column-gap: 26px; row-gap: 4px; margin-top: 22px; font-size: 15.5px; }
.sp-verb {
  appearance: none; background: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  padding: 6px 0; font: inherit; color: rgba(16,16,18,.6); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.sp-verb:hover, .sp-verb.is-chosen { color: #101012; border-bottom-color: #101012; }
.sp-verb--main { color: #101012; font-weight: 600; }

/* ── La respuesta: bandas de la casa que se abren y se pliegan, y se quedan ── */
.sp-ans { margin: 0 0 5px; }
html.js .sp-col--right .sp-ans { display: none; }
html.js .sp-col--right .sp-ans.is-shown { display: block; animation: sp-rise .6s var(--ease) both; }
.sp-ans__t {
  display: flex; align-items: center; height: 40px; padding: 0 22px; background: #eeeeee;
  font-size: 14.5px; font-weight: 600; color: #101012; letter-spacing: -.005em; margin: 0;
}
html.js .sp-ans.is-folded .sp-ans__t { cursor: pointer; font-weight: 500; color: rgba(16,16,18,.72); }
html.js .sp-ans.is-folded .sp-ans__t:hover { color: #101012; }
.sp-ans__b { background: #f7f7f7; padding: 16px 22px 18px; font-size: 14.5px; line-height: 1.6; color: rgba(16,16,18,.72); }
.sp-ans__b p { margin: 0 0 8px; } .sp-ans__b p:last-child { margin: 0; }
html.js .sp-ans.is-folded .sp-ans__b { display: none; }
.sp-ans__list { margin: 0; padding: 0; list-style: none; }
.sp-ans__list li { padding: 3px 0; }

/* ── La prueba: un panel que nace en el centro, encima de la espina ── */
.sp-proof { background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(16,16,18,.06), 0 24px 70px rgba(16,16,18,.16); padding: 30px 36px; }
html.js .sp-proof {
  position: fixed; z-index: 20; left: 50%; top: calc(var(--top) - 40px);
  width: min(640px, 46vw); max-height: calc(100vh - var(--top) + 10px); overflow: hidden;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 28px) scale(.97);
  transition: opacity .5s var(--ease), transform .7s var(--ease), visibility 0s linear .5s;
}
html.js .sp-proof.is-on {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
  transition: opacity .6s var(--ease), transform .8s var(--ease), visibility 0s;
}
.sp-proof > * { max-width: 100%; }

/* La carta que sólo envía una persona (paso 3) */
.sp-letter { width: 520px; max-width: 100%; font-size: 14px; }
.sp-letter__h { display: grid; gap: 5px; margin-bottom: 14px; }
.sp-letter__h div { height: 36px; background: #eeeeee; display: flex; align-items: center; gap: 14px; padding: 0 14px; font-size: 13px; }
.sp-letter__h b { width: 60px; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--soft); font-weight: 500; }
.sp-letter__body { background: #f7f7f7; padding: 16px 18px; line-height: 1.6; color: #333; }
.sp-letter__body p { margin: 0 0 8px; } .sp-letter__body p:last-child { margin: 0; }
.sp-letter__foot { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.sp-letter__foot small { color: var(--soft); font-size: 12.5px; }
.sp-send { width: 140px; height: 39px; border: 0; border-radius: 3px; background: #111; color: #fff; font: 500 14px/1 var(--font); }
.sp-cursor { position: absolute; width: 18px; height: 18px; right: 50px; top: 24px; opacity: 0; pointer-events: none; }
html.js .is-on .sp-cursor { animation: sp-cursor 2.4s var(--ease) .9s forwards; }
@keyframes sp-cursor { 0% { opacity: 0; transform: translate(-180px, 70px); } 25% { opacity: 1; } 70%, 100% { opacity: 1; transform: translate(0, 0); } }
.sp-only { margin: 16px 0 0; font-size: 15px; font-weight: 600; color: #101012; text-align: right; }
html.js .sp-only { opacity: 0; transition: opacity .6s var(--ease); }
html.js .is-on .sp-only { opacity: 1; transition-delay: 3.2s; }


/* ═════════════════════════════════════════════════════════════════════════
   5 · Los tableros (libres por dentro)
   ═════════════════════════════════════════════════════════════════════════ */
.sp-card {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16,16,18,.05), 0 10px 30px rgba(16,16,18,.08);
}
.sp-kicker { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }

/* Los tableros anchos se dibujan a su tamaño y se encogen a la columna */

/* 1 · Quién mira */
.sp-who { display: grid; gap: 6px; font-size: clamp(30px, 3.4vw, 54px); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; color: #d6d6d6; }
.sp-who span { transition: color .6s var(--ease); }
html.js .is-on .sp-who span { animation: sp-who 4.8s var(--ease) infinite; animation-delay: calc(var(--i) * 1.2s); }
@keyframes sp-who { 0%, 30% { color: var(--ink); } 40%, 100% { color: #d6d6d6; } }

/* 2 · Lo disperso → una ficha */
.sp-bits { position: relative; width: 520px; max-width: 100%; height: 440px; }
.sp-bit {
  position: absolute; left: 50%; top: 50%; width: 210px; padding: 12px 14px; font-size: 12.5px;
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r));
}
.sp-bit b { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); font-weight: 500; margin-bottom: 4px; }
html.js .is-on .sp-bit { animation: sp-gather 1.1s var(--ease) forwards; animation-delay: calc(1.2s + var(--i) * .18s); }
@keyframes sp-gather { to { transform: translate(-50%, -50%) scale(.5); opacity: 0; } }
.sp-rec { position: absolute; inset: 60px 40px; padding: 18px; display: flex; flex-direction: column; gap: 5px; }
.sp-rec__t { font-size: 15px; font-weight: 600; margin: 0 0 2px; }
.sp-rec__by { font-size: 12.5px; color: var(--soft); margin: 0 0 12px; }
.sp-band { height: 40px; background: var(--band); display: flex; align-items: center; gap: 14px; padding: 0 14px; font-size: 13px; }
.sp-band b { width: 84px; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--soft); font-weight: 500; }
html.js .sp-rec { opacity: 0; transform: scale(.96); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js .is-on .sp-rec { opacity: 1; transform: none; transition-delay: 2.2s; }
html.js .sp-rec .sp-band { opacity: 0; transform: translateX(-10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
html.js .is-on .sp-rec .sp-band { opacity: 1; transform: none; transition-delay: calc(2.6s + var(--i) * .22s); }

/* 3 · La obra, despiezada */
.sp-work { position: relative; width: 520px; max-width: 100%; height: 480px; }
.sp-work__img { position: absolute; left: 50%; top: 50%; width: 220px; transform: translate(-50%, -50%); box-shadow: 0 20px 50px rgba(16,16,18,.18); }
.sp-tag {
  position: absolute; left: 50%; top: 50%; width: 168px; padding: 10px 12px; font-size: 12.5px; line-height: 1.4;
  transform: translate(-50%, -50%) translate(var(--tx), var(--ty));
}
.sp-tag b { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); font-weight: 500; margin-bottom: 2px; }
html.js .sp-tag { opacity: 0; transform: translate(-50%, -50%) scale(.8); transition: transform 1s var(--ease), opacity .6s var(--ease); }
html.js .is-on .sp-tag { opacity: 1; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)); transition-delay: calc(.9s + var(--i) * .16s); }

/* 4 · La mañana: el escritorio de verdad */
.sp-desk { width: 560px; max-width: 100%; overflow: hidden; }
.sp-desk__bar { display: flex; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--hair); font-size: 12px; color: var(--soft); }
.sp-desk__bar b { color: var(--ink); font-weight: 600; }
.sp-desk__body { padding: 18px; display: grid; gap: 5px; }
.sp-desk__line { background: var(--faldon); padding: 18px 20px; margin-bottom: 10px; }
.sp-desk__line p { margin: 0 0 4px; font-size: 15px; line-height: 1.45; }
.sp-desk__line .sp-say--small { margin: 0; }
.sp-desk__line .sp-doors { margin-top: 14px; opacity: 1 !important; transform: none !important; }
.sp-desk__row { height: 40px; background: var(--band); display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-size: 12.5px; color: #555; }
.sp-desk__row i { font-style: normal; color: var(--soft); font-size: 11.5px; }
.sp-flip { transition: opacity .35s var(--ease); }
.sp-flip.is-out { opacity: 0; }

/* 5 · El freno */
.sp-brake { display: grid; justify-items: center; gap: 28px; width: 460px; max-width: 100%; }
.sp-publish {
  width: 260px; height: 72px; border-radius: 999px; border: 0; background: var(--ink); color: #fff;
  font: 600 20px/1 var(--font); letter-spacing: -.01em;
}
html.js .is-on .sp-publish { animation: sp-press 1.2s var(--ease) .9s forwards; }
@keyframes sp-press { 0% { transform: scale(1); } 40% { transform: scale(.94); background: #2b2528; } 100% { transform: scale(.97); background: #2b2528; } }
.sp-reason { width: 100%; padding: 18px 20px; }
.sp-reason p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; }
.sp-field { display: flex; justify-content: space-between; align-items: center; height: 40px; padding: 0 14px; background: var(--band); font-size: 13px; margin-top: 5px; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .6s var(--ease); }
.sp-field i { font-style: normal; color: var(--amber); font-size: 12px; }
html.js .sp-reason { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.js .is-on .sp-reason { opacity: 1; transform: none; transition-delay: 1.9s; }
html.js .is-on .sp-field { box-shadow: inset 0 0 0 1px var(--amber); transition-delay: 2.6s; }

/* 6 · El sí: de la firma a la mano */
.sp-phone {
  width: 300px; height: 560px; max-height: 70vh; border-radius: 44px; background: #fff; padding: 14px;
  box-shadow: 0 0 0 10px #111, 0 30px 70px rgba(16,16,18,.25); overflow: hidden; position: relative;
}
.sp-phone::before { content: ""; position: absolute; top: 12px; left: 50%; width: 90px; height: 24px; margin-left: -45px; border-radius: 20px; background: #111; z-index: 2; }
.sp-sheet { padding: 48px 12px 12px; font-size: 12.5px; }
.sp-sheet h3 { margin: 0 0 4px; font-size: 16px; letter-spacing: -.01em; }
.sp-sheet .sp-band { font-size: 12px; height: 36px; margin-top: 5px; }
.sp-sheet .sp-band b { width: 64px; }
.sp-sign { margin-top: 16px; background: var(--faldon); padding: 10px 12px 12px; }
.sp-sign svg { width: 100%; height: 70px; }
.sp-sign path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sp-sign small { display: block; color: var(--soft); font-size: 11px; }
html.js .sp-sign path { stroke-dasharray: 900; stroke-dashoffset: 900; }
html.js .is-on .sp-sign path { transition: stroke-dashoffset 1.8s ease-in-out .9s; stroke-dashoffset: 0; }
html.js .sp-sign small { opacity: 0; transition: opacity .5s var(--ease); }
html.js .is-on .sp-sign small { opacity: 1; transition-delay: 2.7s; }
html.js .sp-zoom { transform: scale(2.1); transform-origin: 50% 80%; transition: transform 1.6s var(--ease); }
html.js .is-on .sp-zoom { transform: scale(1); transition-delay: 3.1s; }

/* 7 · El viaje: la espina se tumba y se hace ruta */
.sp-trip { width: 600px; max-width: 100%; padding: 26px 26px 22px; }
.sp-trip__ends { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--soft); margin-bottom: 14px; }
.sp-trip__ends b { color: var(--ink); font-weight: 600; font-size: 15px; display: block; }
.sp-route { position: relative; height: 34px; }
.sp-route::before { content: ""; position: absolute; left: 0; right: 0; top: 16px; height: 2px; background: var(--hair); }
.sp-route__fill { position: absolute; left: 0; top: 16px; height: 2px; width: 0; background: var(--ink); }
.sp-route__dot { position: absolute; left: 0; top: 10px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--ink); }
.sp-stops { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 10px; font-size: 11.5px; color: var(--soft); }
.sp-stops span { display: flex; gap: 5px; align-items: baseline; }
.sp-stops span::before { content: "○"; font-size: 10px; }
html.js .is-on .sp-route__fill { animation: sp-fill 4s var(--ease) .8s forwards; }
html.js .is-on .sp-route__dot { animation: sp-go 4s var(--ease) .8s forwards; }
@keyframes sp-fill { to { width: 100%; } }
@keyframes sp-go { to { left: 100%; } }
.no-js .sp-stops span, .sp-stops span.done { color: var(--ink); }
.no-js .sp-stops span::before, .sp-stops span.done::before { content: "●"; }
.sp-late { margin-top: 22px; display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--faldon); font-size: 13px; }
.sp-late i { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); flex: none; }
html.js .sp-late { opacity: 0; transition: opacity .6s var(--ease); }
html.js .is-on .sp-late { opacity: 1; transition-delay: 5s; }

/* 8 · Papeles con memoria */
.sp-papers { position: relative; width: 460px; height: 420px; max-width: 100%; }
.sp-paper {
  position: absolute; left: 50%; top: 50%; width: 240px; height: 320px; margin: -160px 0 0 -120px; padding: 20px;
  transform: rotate(var(--r0, 0deg)); transition: transform 1.2s var(--ease);
  display: flex; flex-direction: column;
}
.sp-paper h4 { margin: 0 0 2px; font-size: 14px; }
.sp-paper .sp-lines { flex: 1; margin: 14px 0; background: repeating-linear-gradient(#fff 0 12px, var(--hair) 12px 13px); opacity: .9; }
.sp-paper small { font-size: 11.5px; color: var(--soft); line-height: 1.45; }
.sp-paper small b { color: var(--ink); font-weight: 600; }
html.js .is-on .sp-paper { transform: translate(var(--fx), var(--fy)) rotate(var(--fr)); transition-delay: calc(.9s + var(--i) * .15s); }
.no-js .sp-paper { transform: translate(var(--fx), var(--fy)) rotate(var(--fr)); }

/* 9 · Una obra, cada mirada */
.sp-views { perspective: 1200px; width: 300px; height: 380px; }
.sp-cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: translateZ(-150px) rotateY(calc(var(--face, 0) * -90deg)); transition: transform 1.1s var(--ease); }
.sp-face { position: absolute; inset: 0; padding: 18px; backface-visibility: hidden; display: flex; flex-direction: column; gap: 12px; transform: rotateY(calc(var(--i) * 90deg)) translateZ(150px); }
.sp-face svg { width: 100%; height: 190px; }
.sp-face b { font-size: 16px; letter-spacing: -.01em; }
.sp-face .sp-verb-pill { align-self: flex-start; margin-top: auto; font: 500 13px/1 var(--font); padding: 11px 16px; border-radius: 3px; background: var(--ink); color: #fff; }

/* 10 · El libro: cada movimiento con un nombre */
.sp-book { width: 540px; max-width: 100%; display: grid; gap: 5px; }
.sp-log { height: 40px; background: var(--band); display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 12px; padding: 0 14px; font-size: 12.5px; }
.sp-log time { color: var(--soft); font-variant-numeric: tabular-nums; }
.sp-log b { font-weight: 600; }
html.js .sp-log { opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
html.js .is-on .sp-log { opacity: 1; transform: none; transition-delay: calc(.8s + var(--i) * .28s); }


/* 11 · Hablar: el formulario vive en su banda */
.sp-talkform { display: grid; gap: 10px; }
.sp-talkform label { display: grid; gap: 4px; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--soft); }
.sp-talkform input, .sp-talkform textarea, .sp-talkform select {
  font: 400 14.5px/1.4 var(--font); color: var(--ink); text-transform: none; letter-spacing: 0;
  border: 0; background: #fff; padding: 10px 12px; border-radius: 0; width: 100%;
}
.sp-talkform textarea { min-height: 80px; resize: vertical; }
.sp-talkform input:focus, .sp-talkform textarea:focus, .sp-talkform select:focus { outline: 1px solid var(--ink); outline-offset: 0; }
.sp-talkform .sp-send { justify-self: start; margin-top: 4px; cursor: pointer; }
.sp-hp { position: absolute; left: -9999px; }

/* ═════════════════════════════════════════════════════════════════════════
   6 · Abajo del todo
   ═════════════════════════════════════════════════════════════════════════ */
.sp-foot { position: relative; z-index: 3; padding: 28px 20px 24px; text-align: center; font-size: 11px; color: var(--soft); display: grid; gap: 4px; }
.sp-foot .sp-made { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
html.js .sp-foot { position: fixed; inset: auto 0 0 0; padding: 14px; opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
html.js body.is-end .sp-foot { opacity: 1; pointer-events: auto; }

/* ═════════════════════════════════════════════════════════════════════════
   7 · Móvil: la voz arriba, la respuesta debajo, la prueba sube como una hoja
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .sp-logo { top: 16px; } .sp-logo svg { width: 118px; } .sp-claim { font-size: 11.5px; }
  .sp-talk { right: 16px; top: 22px; font-size: 13px; }
  .sp-spine { top: 90px; width: 60vw; height: 70vh; opacity: .16; }
  html.js body.is-start .sp-spine { opacity: .9; height: 46vh; }
  :root { --top: 104px; }
  html.js .sp-col--left { left: 16px; right: 16px; width: auto; }
  html.js .sp-col--right { left: 16px; right: 16px; width: auto; top: auto; bottom: 20px; }
  html.js body.is-start .sp-col--left { top: auto; bottom: 36px; }
  html.js .sp-col--left .sp-line.is-prev { display: none; }
  h1.sp-say, h2.sp-say { font-size: 20px; }
  .sp-say { font-size: 15px; }
  html.js .sp-proof {
    left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 78vh; border-radius: 16px 16px 0 0; padding: 22px 16px;
    transform: translateY(100%);
  }
  html.js .sp-proof.is-on { transform: none; }
  .sp-proof > * { zoom: .78; }
}

/* Sin movimiento: todo quieto y en su sitio final */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Páginas normales */
.sp-page { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; padding: 150px 24px 80px; }
.sp-page h1 { font-size: 40px; letter-spacing: -.03em; line-height: 1.1; }

/* Los botones de dentro de las pruebas (el escritorio de la mañana) siguen siendo botones de la casa */
.sp-proof .sp-doors { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-proof .sp-door {
  appearance: none; cursor: pointer; font: 500 13px/1 var(--font);
  padding: 11px 16px; border-radius: 3px; border: 1px solid #d9d9d9; background: #fff; color: var(--ink);
}
.sp-proof .sp-door:hover { border-color: var(--ink); }
.sp-proof .sp-door--yes { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Nunca caja dentro de caja (CANON-DESKS): dentro del panel, las piezas pierden su sombra */
.sp-proof .sp-rec, .sp-proof .sp-desk { box-shadow: none; border: 0; }
.sp-proof .sp-rec { inset: 70px 40px; }
.sp-proof .sp-face { box-shadow: none; }
html.js .sp-proof { width: fit-content; min-width: min(460px, 46vw); max-width: min(680px, 48vw); }
html.js .sp-foot { inset: auto auto 0 max(20px, calc(50vw - 680px)); text-align: left; justify-items: start; padding: 16px 0; }

/* ══ v0.4 · correcciones de Samuel ══════════════════════════════════════════
   1 · La derecha es tipografía, como la columna de puertas del programa (conscience.css ·
       .door h2): nada de cajas. Las cajas sólo viven en los paneles del centro.
   2 · Nada de «See how»: un gesto pequeño que se mueve y dice «baja».
   3 · El primer panel: la espina hecha con los trozos de la casa. */
.sp-ans { margin: 0 0 22px; }
.sp-ans__t {
  display: block; height: auto; padding: 0; background: none; margin: 0 0 6px;
  font-size: clamp(18px, 1.7vw, 21px); font-weight: 600; line-height: 1.3; color: #101012; letter-spacing: -.01em;
}
.sp-ans__b { background: none; padding: 0; font-size: 15px; line-height: 1.65; color: rgba(16,16,18,.72); max-width: 42ch; }
html.js .sp-ans.is-folded { margin-bottom: 10px; }
html.js .sp-ans.is-folded .sp-ans__t { font-size: 15.5px; font-weight: 400; color: rgba(16,16,18,.42); margin: 0; }
html.js .sp-ans.is-folded .sp-ans__t:hover { color: #101012; }
.sp-ans__list li { padding: 2px 0; }
.sp-talkform input, .sp-talkform textarea, .sp-talkform select { background: #eeeeee; }



/* El panel sin tarjetas dentro */
html.js .sp-proof--bare { width: min(760px, 52vw); max-width: none; min-width: 0; height: min(600px, calc(100vh - var(--top) - 20px)); padding: 0; place-items: stretch; }
.sp-weave { position: relative; width: 100%; height: 100%; min-height: 480px; overflow: hidden; --mx: 0; --my: 0; }
.sp-weave__line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 20; pointer-events: none; }
/* La espina: gruesa y clara, como un trazo de lápiz blando, detrás de las palabras cercanas */
.sp-weave__line path { fill: none; stroke: rgba(16,16,18,.16); stroke-width: 5; stroke-linecap: round; stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); transition: stroke-dashoffset 1.6s var(--ease); }
.sp-weave__line circle { fill: rgba(16,16,18,.28); opacity: 0; transition: opacity .5s var(--ease); }
.sp-weave.is-woven .sp-weave__line path { stroke-dashoffset: 0; transition-delay: 1.2s; }
.sp-weave.is-woven .sp-weave__line circle { opacity: 1; transition-delay: calc(1.6s + var(--r) * 30ms); }
/* EL CAOS: tres planos. Delante, negro, nítido y grande; en medio, gris y apenas velado;
   al fondo, claro, pequeño y desenfocado. Flotan, y el ratón los mueve más cuanto más cerca. */
.sp-weave__bit {
  position: absolute; left: 0; top: 0; white-space: nowrap; line-height: 1;
  font-size: 14px; font-weight: 500; letter-spacing: -.005em;
  color: var(--col, rgba(16,16,18,.5));
  filter: blur(var(--blur, 0px));
  z-index: var(--zi, 1);
  transform-origin: var(--ox, left) center;
  transform: translate(var(--x0, 0), var(--y0, 0)) translate(calc(var(--mx) * var(--z, .5) * 34px), calc(var(--my) * var(--z, .5) * 22px)) rotate(var(--a0, 0deg)) scale(var(--sc, 1));
  transition: transform 1.7s cubic-bezier(.65,0,.25,1), color 1.2s var(--ease), filter 1.2s var(--ease);
  animation: sp-drift calc(5s + var(--z, .5) * 4s) ease-in-out infinite alternate; animation-delay: calc(var(--k) * -170ms);
}
@keyframes sp-drift { to { margin-top: calc(6px + var(--z, .5) * 8px); margin-left: calc(-4px - var(--z, .5) * 6px); } }
/* EL ORDEN: todos iguales. Un tamaño, un tono, nítidos, quietos, en su sitio. */
.sp-weave.is-woven .sp-weave__bit {
  transform: translate(var(--x1, 0), var(--y1, 0)) rotate(0deg) scale(1);
  color: rgba(16,16,18,.82); filter: blur(0); z-index: 1;
  animation: none; margin: 0;
  transition-delay: calc(var(--k) * 26ms);
}
.no-js .sp-weave { display: none; }

.sp-weave.is-setting .sp-weave__bit { transition: none !important; }

/* ══ v0.5 ══════════════════════════════════════════════════════════════════
   El gesto de bajar: una mano que se mueve, abajo a la izquierda, en la línea de la voz.
   El pie, siempre: «made by Astronomus» y la bandera, abajo a la derecha, en la línea de la respuesta.
   «Talk to us» en la retícula: alineado con la columna derecha y a la altura del logo. */
.sp-hint {
  position: fixed; z-index: 30; left: max(20px, calc(50vw - 680px)); bottom: 26px;
  display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(16,16,18,.6);
  opacity: 0; transition: opacity .6s var(--ease); pointer-events: none;
}
.sp-hint svg { color: #101012; animation: sp-hand 1.8s var(--ease) infinite; }
@keyframes sp-hand { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(5px); } }
html.js body.is-start .sp-hint, .no-js .sp-hint { opacity: 1; }
.no-js .sp-hint { display: none; }

.sp-foot, html.js .sp-foot {
  position: fixed; z-index: 30; inset: auto max(48px, calc(50vw - 652px)) 24px auto; padding: 0;
  display: flex; align-items: center; gap: 18px; opacity: 1; pointer-events: auto; background: none;
  font-size: 11px; color: rgba(16,16,18,.5); text-align: right;
}
.sp-foot .sp-made { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(16,16,18,.5); }
.sp-foot .sp-made svg { width: 15px; height: 10px; display: block; }
html.js body.has-proof .sp-foot { opacity: .35; }

.sp-talk {
  right: max(48px, calc(50vw - 652px)); top: 36px;
  font-size: 15px; font-weight: 600; color: #101012; border-bottom: 1px solid #101012; padding: 3px 0;
}
.sp-talk span { display: inline-block; transition: transform .25s var(--ease); }
.sp-talk:hover span { transform: translateX(3px); }

@media (max-width: 860px) {
  .sp-hint { left: 16px; bottom: 18px; }
  .sp-foot, html.js .sp-foot { right: 16px; bottom: 18px; gap: 10px; }
  .sp-foot > span:first-child { display: none; }
  .sp-talk { right: 16px; top: 22px; font-size: 13px; }
}

/* ══ El panel de «Nothing to learn»: el menú que se va ═══════════════════════
   Primero, la pared de menús de cualquier programa (se siente, no se lee);
   luego se la lleva un soplo; queda una frase. */
.sp-storm { position: relative; width: 100%; height: 100%; min-height: 480px; overflow: hidden; }
.sp-storm__menus { position: absolute; inset: 0; transform-origin: 50% 50%; }
.sp-storm.is-storm .sp-storm__menus { transform: scale(1.06); transition: transform 3.2s linear; }
.sp-menu {
  position: absolute; left: 0; top: 0; min-width: 158px; margin: 0; padding: 4px 0; list-style: none;
  background: #fff; border: 1px solid rgba(16,16,18,.1); border-radius: 7px;
  box-shadow: 0 8px 26px rgba(16,16,18,.13), 0 1px 2px rgba(16,16,18,.08);
  font-size: 11.5px; line-height: 1; color: rgba(16,16,18,.78);
  opacity: 0; transform: translate(var(--x), var(--y)) translateY(-6px) scale(.97);
  transition: opacity .18s ease, transform .22s ease;
}
.sp-menu li { display: flex; justify-content: space-between; gap: 22px; padding: 5px 12px; white-space: nowrap; }
.sp-menu li i { font-style: normal; color: rgba(16,16,18,.35); }
.sp-menu li.is-hot { background: #2b6fd6; color: #fff; }
.sp-menu li.is-hot i { color: rgba(255,255,255,.75); }
.sp-menu li.is-sep { height: 1px; padding: 0; margin: 4px 0; background: rgba(16,16,18,.08); }
.sp-storm.is-storm .sp-menu { opacity: 1; transform: translate(var(--x), var(--y)); transition-delay: var(--d); }
.sp-storm.is-blow .sp-menu {
  opacity: 0; filter: blur(8px);
  transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))) rotate(var(--r)) scale(.85);
  transition: transform 1.1s cubic-bezier(.55,0,.85,.35), opacity .9s ease, filter .9s ease; transition-delay: var(--bd);
}
.sp-storm__count { position: absolute; left: 30px; top: 24px; z-index: 30; display: flex; align-items: baseline; gap: 10px; font-variant-numeric: tabular-nums; }
.sp-storm__count b { font-size: 46px; font-weight: 600; letter-spacing: -.03em; color: rgba(16,16,18,.22); transition: color .6s ease; }
.sp-storm__count span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(16,16,18,.45); }
.sp-storm.is-calm .sp-storm__count b { color: #101012; }
.sp-storm__calm { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 18px; padding: 0 40px; pointer-events: none; }
.sp-storm__one { margin: 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: #101012; opacity: 0; transform: translateY(12px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.sp-storm__verb { font-size: 17px; font-weight: 600; color: #101012; padding-bottom: 4px; opacity: 0;
  background: linear-gradient(#101012, #101012) left bottom / 0% 1.5px no-repeat; transition: opacity .5s ease .5s, background-size .7s ease 1s; }
.sp-storm.is-calm .sp-storm__one { opacity: 1; transform: none; }
.sp-storm.is-calm .sp-storm__verb { opacity: 1; background-size: 100% 1.5px; }
.no-js .sp-storm__menus, .no-js .sp-storm__count { display: none; }
.no-js .sp-storm__one, .no-js .sp-storm__verb { opacity: 1; transform: none; }
.no-js .sp-storm { min-height: 200px; }

/* ══ El panel de «You decide»: la línea que sólo cruza una persona ═══════════
   Todo lo que The Spine prepara llega corriendo y se detiene ante una línea. Espera.
   Un toque, y una sola cosa la cruza, con el nombre de quien la dejó pasar. */
.sp-gate { position: relative; width: 100%; height: 100%; min-height: 480px; overflow: hidden; --gx: 60%; }
.sp-gate__line { position: absolute; left: var(--gx); top: 50%; width: 2px; height: 0; margin-left: -1px; background: #101012; opacity: .9; transform: translateY(-50%); transition: height 1s cubic-bezier(.2,.7,.2,1); }
.sp-gate.is-on .sp-gate__line { height: 78%; }
.sp-gate__it {
  position: absolute; right: calc(100% - var(--gx) + 22px); top: calc(13% + var(--i) * 9.6%);
  font-size: 16px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; color: rgba(16,16,18,.5);
  opacity: 0; filter: blur(10px); transform: translateX(-70vw) scale(2.4); transform-origin: right center;
  transition: transform 1.4s cubic-bezier(.16,1,.3,1), opacity .5s ease, filter 1.1s ease, color .5s ease;
  transition-delay: calc(.35s + var(--i) * 110ms);
}
.sp-gate__it::after { content: "→"; margin-left: 10px; color: rgba(16,16,18,.3); }
.sp-gate.is-on .sp-gate__it { opacity: 1; filter: blur(0); transform: translateX(0); }
.sp-gate.is-waiting .sp-gate__it { animation: sp-press 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * -190ms); }
@keyframes sp-press { 50% { transform: translateX(7px); } }
.sp-gate.is-chosen .sp-gate__it--go { color: #101012; }
.sp-gate.is-through .sp-gate__it--go { opacity: 0; transform: translateX(40px); transition: transform .5s ease-in, opacity .3s ease; animation: none; }
.sp-gate.is-through .sp-gate__it:not(.sp-gate__it--go) { color: rgba(16,16,18,.28); }
.sp-gate__touch { position: absolute; left: var(--gx); top: calc(13% + 8px); width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 1.5px solid #101012; opacity: 0; transform: scale(.3); }
.sp-gate.is-chosen .sp-gate__touch { animation: sp-touch 1s ease-out forwards; }
@keyframes sp-touch { 0% { opacity: 0; transform: scale(.3); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(2.4); } }
.sp-gate__done { position: absolute; left: calc(var(--gx) + 24px); top: 13%; font-size: 16px; white-space: nowrap; color: rgba(16,16,18,.6); opacity: 0; transform: translateX(-24px); transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .6s ease; }
.sp-gate__done b { color: #101012; font-weight: 600; }
.sp-gate.is-through .sp-gate__done { opacity: 1; transform: none; transition-delay: .25s; }
.no-js .sp-gate { display: none; }
@media (max-width: 1100px) { .sp-gate { --gx: 64%; } .sp-gate__it, .sp-gate__done { font-size: 14px; } }

/* ══ v0.6.2 · la tipografía de los paneles (Samuel): más cuerpo y más clara, que llene sin pesar.
   La línea sigue fina; la solución, más gorda. La línea al centro, para que el peso no caiga a la izquierda. */
.sp-gate { --gx: 50%; }
.sp-gate__it { font-size: clamp(16px, 1.4vw, 20px); font-weight: 600; letter-spacing: -.015em; color: rgba(16,16,18,.34); }
.sp-gate__it::after { color: rgba(16,16,18,.22); }
.sp-gate.is-chosen .sp-gate__it--go { color: #101012; }
.sp-gate.is-through .sp-gate__it:not(.sp-gate__it--go) { color: rgba(16,16,18,.2); }
.sp-gate__line { width: 1.5px; margin-left: -.75px; }
.sp-gate__done { font-size: clamp(20px, 1.8vw, 26px); font-weight: 400; letter-spacing: -.02em; color: rgba(16,16,18,.45); top: calc(13% - 4px); }
.sp-gate__done b { font-weight: 700; }
.sp-gate__touch { top: calc(13% + 11px); }
@media (max-width: 1100px) { .sp-gate { --gx: 52%; } }
/* el orden del primer panel, con el mismo cuerpo */
.sp-weave.is-woven .sp-weave__bit { font-size: 15.5px; font-weight: 600; letter-spacing: -.012em; color: rgba(16,16,18,.5); }
/* Cuando uno ha cruzado, la izquierda se calla: quieta y apagada. Lo importante está a la derecha. */
.sp-gate.is-through .sp-gate__it { animation: none; }
.sp-gate.is-through .sp-gate__it:not(.sp-gate__it--go) { color: rgba(16,16,18,.16); transition: color 1.2s ease; }
.sp-gate.is-through .sp-gate__it:not(.sp-gate__it--go)::after { color: rgba(16,16,18,.1); }
.sp-gate__done { font-size: clamp(22px, 2vw, 28px); }

/* ══ v0.6.4 · la espina, como en el programa (Samuel: «un manchurrón alrededor; en el móvil, un recuadro
   más claro»). El vídeo de la casa trae su halo gris pintado dentro, del mismo #f4f4f4 que el fondo
   del programa: por eso allí no se ve. Aquí el fondo tenía una luz blanca en el centro y el halo salía
   como una mancha; y en el iPhone el vídeo sobre blanco dejaba un rectángulo más claro.
   Ahora: el vídeo va pintado sobre #f4f4f4 (el mismo gris de la página), sin fundidos que un navegador
   pinta y otro no, el fondo es #f4f4f4 liso detrás de la espina, y los bordes se funden 4 px como en
   .the-spine-axial-video. */
body::before { display: none; }
.sp-spine { mix-blend-mode: normal; }
.sp-spine video, .sp-spine img {
  filter: none; opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%), linear-gradient(to right, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%), linear-gradient(to right, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%);
  mask-composite: intersect;
}
/* v0.6.5 · el claim se lee (Samuel: «casi ilegible»): del ancho del logotipo, en gris de lectura */
.sp-claim { font-size: 17px; font-weight: 500; letter-spacing: .01em; color: rgba(16,16,18,.68); margin-top: 2px; }
@media (max-width: 860px) { .sp-claim { font-size: 14px; } }
/* v0.6.6 · el claim en mayúsculas, espaciado como el logotipo que tiene encima */
.sp-claim { text-transform: uppercase; font-size: 13px; font-weight: 500; letter-spacing: .24em; color: rgba(16,16,18,.7); margin-top: 4px; padding-left: .24em; }
@media (max-width: 860px) { .sp-claim { font-size: 11px; letter-spacing: .2em; } }
/* v0.6.7 · el claim ocupa justo el ancho de THE SPINE: 16px con el espaciado que lo cuadra (la última letra no suma aire) */
.sp-claim { font-size: 16px; letter-spacing: .236em; margin-right: -.236em; padding-left: 0; margin-top: 1px; line-height: 1; }
@media (max-width: 860px) { .sp-claim { font-size: 12.5px; letter-spacing: .236em; } }
/* v0.6.8 · el claim en gris al 50 % */
.sp-claim { color: rgba(16,16,18,.5); }
/* v0.7 · cada tablero con su título y su frase arriba; la animación vive debajo */
.sp-proof__head { text-align: center; margin: 0 auto 22px; max-width: 520px; }
.sp-proof__head h3 { margin: 0 0 8px; font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: #101012; }
.sp-proof__head p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(16,16,18,.55); }
html.js .sp-proof--bare { display: flex; flex-direction: column; height: min(680px, calc(100vh - var(--top) - 10px)); }
html.js .sp-proof--bare .sp-proof__head { flex: none; padding: 34px 40px 0; margin-bottom: 0; }
html.js .sp-proof--bare > .sp-weave, html.js .sp-proof--bare > .sp-storm, html.js .sp-proof--bare > .sp-gate { flex: 1; min-height: 0; height: auto; }
html.js .sp-proof:not(.sp-proof--bare) { place-items: center; align-content: start; }
@media (max-width: 860px) { .sp-proof__head h3 { font-size: 19px; } .sp-proof__head p { font-size: 13.5px; } html.js .sp-proof--bare .sp-proof__head { padding: 22px 18px 0; } }
/* v0.7.1 · la cabecera del tablero con alto fijo; en el orden sólo quedan 7 parejas, el resto se va */
.sp-proof__head { box-sizing: border-box; }
html.js .sp-proof .sp-proof__head { height: 150px; padding-top: 38px; margin-bottom: 0; flex: none; overflow: hidden; }
html.js .sp-proof:not(.sp-proof--bare) .sp-proof__head { height: 112px; padding-top: 4px; }
.sp-proof__head p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-weave.is-woven .sp-weave__bit.is-out { opacity: 0; filter: blur(4px); transition: opacity .9s var(--ease), filter .9s var(--ease); transition-delay: 0s; }
.sp-weave.is-woven .sp-weave__bit:not(.is-out) { font-size: 16px; color: rgba(16,16,18,.55); }
@media (max-width: 860px) { html.js .sp-proof .sp-proof__head { height: 112px; padding-top: 22px; } }
/* v0.7.3 · la franja del número, centrada arriba; la tormenta de menús y la calma, debajo */
.sp-storm__count { left: 0; right: 0; top: 14px; justify-content: center; }
.sp-storm__menus { inset: 84px 0 0 0; }
.sp-storm__calm { inset: 84px 0 0 0; }
/* v0.7.4 · el toque: una mano (no un círculo) llega a la frase elegida, que crece; toca, y la frase cruza.
   Al otro lado, con «Sent», sale un sobre que atraviesa el panel y se va. */
.sp-gate__touch { display: none; }
.sp-gate__it--go { transform-origin: right center; }
.sp-gate.is-pointing .sp-gate__it--go { animation: none; color: #101012; transform: scale(1.18); transition: transform .6s cubic-bezier(.2,.7,.2,1), color .4s ease; transition-delay: 0s; }
.sp-gate.is-chosen .sp-gate__it--go { transform: scale(1.13); transition-duration: .18s; }
.sp-gate.is-through .sp-gate__it--go { opacity: 0; transform: translateX(60px) scale(1.13); transition: transform .5s ease-in, opacity .35s ease; }

.sp-gate__hand { position: absolute; z-index: 5; left: calc(var(--gx) - 150px); top: calc(13% + 12px); opacity: 0; pointer-events: none;
  transform: translate(-120px, 180px) rotate(-14deg); filter: drop-shadow(0 6px 10px rgba(16,16,18,.18));
  transition: transform 1.3s cubic-bezier(.16,1,.3,1), opacity .4s ease; }
.sp-gate__hand svg { display: block; }
.sp-gate.is-pointing .sp-gate__hand { opacity: 1; transform: translate(0, 0) rotate(-8deg); }
.sp-gate.is-chosen .sp-gate__hand { transform: translate(0, 3px) rotate(-8deg) scale(.9); transition: transform .15s ease; }
.sp-gate.is-through .sp-gate__hand { opacity: 0; transform: translate(-30px, 70px) rotate(-14deg); transition: transform .9s ease, opacity .6s ease .2s; }
.sp-gate__tap { position: absolute; z-index: 4; left: calc(var(--gx) - 138px); top: calc(13% + 12px); width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(16,16,18,.12); opacity: 0; transform: scale(.2); pointer-events: none; }
.sp-gate.is-chosen .sp-gate__tap { animation: sp-tap .7s ease-out forwards; }
@keyframes sp-tap { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(2.2); } }

.sp-gate__mail { position: absolute; z-index: 5; left: calc(var(--gx) + 30px); top: calc(13% + 58px); opacity: 0; pointer-events: none; }
.sp-gate__mail svg { display: block; }
.sp-gate.is-through .sp-gate__mail { animation: sp-mail 2.6s cubic-bezier(.5,0,.3,1) .25s forwards; }
@keyframes sp-mail {
  0%   { opacity: 0; transform: translate(-18px, 10px) scale(.7); }
  18%  { opacity: 1; transform: translate(0, 0) scale(1); }
  40%  { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(min(40vw, 520px), -120px) rotate(-12deg) scale(.8); }
}
@media (prefers-reduced-motion: reduce) { .sp-gate__hand, .sp-gate__mail, .sp-gate__tap { display: none; } }
/* v0.8 · la portada por el propósito: el porqué primero, un beneficio por capítulo, y al final «How can we help you?» */

/* El tablero «Keep what works»: las herramientas llegan dispersas y se colocan alrededor de la espina, con un hilo cada una */
.sp-fold { position: relative; flex: 1; min-height: 0; margin: 10px 40px 30px; }
.sp-fold__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sp-fold__lines line { stroke: rgba(16,16,18,.16); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1); }
.sp-proof.is-on .sp-fold__lines line { stroke-dashoffset: 0; transition-delay: calc(1.5s + var(--i) * 90ms); }
.sp-fold__tool {
  position: absolute; left: var(--x); top: var(--y); z-index: 2; white-space: nowrap;
  font-size: clamp(15px, 1.35vw, 19px); font-weight: 600; letter-spacing: -.015em; color: rgba(16,16,18,.55);
  background: #fff; padding: 4px 10px;
  transform: translate(-50%, -50%) translate(var(--sx), var(--sy)) rotate(calc(var(--i) * 7deg - 24deg)) scale(1.5);
  opacity: 0; filter: blur(6px);
  transition: transform 1.4s cubic-bezier(.16,1,.3,1), opacity .5s ease, filter 1s ease, color .6s ease;
}
.sp-proof.is-on .sp-fold__tool { opacity: 1; filter: blur(0); transform: translate(-50%, -50%); transition-delay: calc(.3s + var(--i) * 80ms); }
.sp-fold__core { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%) scale(.85); opacity: 0; background: #fff; padding: 10px 16px; transition: opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.sp-fold__core svg { width: 128px; height: auto; display: block; }
.sp-proof.is-on .sp-fold__core { opacity: 1; transform: translate(-50%, -50%); transition-delay: 1.2s; }
.sp-fold__note { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: rgba(16,16,18,.45); opacity: 0; transition: opacity .8s ease; white-space: nowrap; }
.sp-proof.is-on .sp-fold__note { opacity: 1; transition-delay: 2.6s; }
.no-js .sp-fold { display: none; }

/* El final: los roles son palabras que llevan a su página; escribirnos queda plegado debajo */
.sp-roles { display: grid; gap: 2px; margin: 14px 0 18px; }
.sp-roles a { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(16,16,18,.1); font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: #101012; text-decoration: none; transition: padding .25s ease, color .2s ease; }
.sp-roles a span { color: rgba(16,16,18,.35); transition: transform .25s ease, color .2s ease; }
.sp-roles a:hover { padding-left: 6px; }
.sp-roles a:hover span { color: #101012; transform: translateX(4px); }
.sp-write summary { cursor: pointer; list-style: none; font-size: 14.5px; color: rgba(16,16,18,.6); padding: 4px 0; }
.sp-write summary::-webkit-details-marker { display: none; }
.sp-write summary::after { content: " ↓"; }
.sp-write[open] summary { color: #101012; margin-bottom: 10px; }
.sp-write[open] summary::after { content: " ↑"; }
/* v0.8.5 · la apertura se despide al bajar (no se queda en gris sobre la siguiente),
   y la mano de «Scroll down» vive justo debajo de ella, no en la esquina */
html.js .sp-col--left .sp-line[data-beat="0"].is-prev { display: none; }
.sp-hint { display: none !important; }
.sp-scroll { display: flex; align-items: center; gap: 10px; margin-top: 34px; font-size: 13px; color: rgba(16,16,18,.6); }
.sp-scroll svg { color: #101012; animation: sp-hand 1.8s var(--ease) infinite; }
html.js .sp-col--left .sp-line.is-cur .sp-scroll { animation: sp-rise .8s var(--ease) 1.2s both; }
.no-js .sp-scroll { display: none; }
/* v0.8.6 · una voz por trabajo: claim a la izquierda, el cómo (una palabra + una línea) a la derecha, el tablero sin cabecera */
html.js .sp-proof--bare { height: min(560px, calc(100vh - var(--top) - 10px)); }
/* v0.8.7 · la voz: sólo la frase de ahora; la anterior no se queda en gris encima (Samuel). La derecha sí acumula: ahí se ve la evolución. */
html.js .sp-col--left .sp-line.is-prev { display: none !important; }

/* v0.8.8 · «Your tools»: cada palabra con su icono de línea, y por los hilos viaja un punto hacia
   The Spine — sólo hacia dentro: lo mismo que dice «Nothing leaves your server.» */
.sp-fold__tool { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sp-fold__ico { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.sp-fold__dot { position: absolute; z-index: 1; left: var(--x); top: var(--y); width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: rgba(16,16,18,.45); opacity: 0; pointer-events: none; }
.sp-proof.is-on .sp-fold__dot { animation: sp-inward 9s cubic-bezier(.45,0,.35,1) infinite; animation-delay: calc(2.8s + var(--i) * 1.5s); }
@keyframes sp-inward {
  0%   { left: var(--x); top: var(--y); opacity: 0; }
  3%   { opacity: 1; }
  22%  { left: 50%; top: 50%; opacity: .9; transform: scale(1); }
  25%  { left: 50%; top: 50%; opacity: 0; transform: scale(.4); }
  100% { left: 50%; top: 50%; opacity: 0; }
}
.sp-proof.is-on .sp-fold__core svg { animation: sp-breathe 1.5s ease-in-out 4.8s infinite; }
@keyframes sp-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
@media (prefers-reduced-motion: reduce) { .sp-fold__dot { display: none; } .sp-proof.is-on .sp-fold__core svg { animation: none; } }

/* ═══ v0.8.8 · EL MÓVIL (hasta 860 px) — todo lo de arriba pensado para escritorio se reordena:
   cabecera compacta, la voz arriba, la palabra de ahora abajo (sin el índice acumulado),
   la espina como fondo tenue, y cada tablero como una hoja que ocupa la pantalla. ═══ */
@media (max-width: 860px) {
  .sp-logo { top: 14px !important; gap: 4px !important; }
  .sp-logo svg { width: 100px !important; }
  .sp-claim { font-size: 9px !important; letter-spacing: .236em !important; margin-right: -.236em; }
  .sp-talk { top: 20px !important; right: 14px !important; font-size: 12px !important; }
  html.js .sp-spine { top: 96px !important; width: 60vw !important; height: 72vh !important; opacity: .13 !important; filter: none !important; }
  html.js body.is-start .sp-spine { opacity: .35 !important; }

  html.js .sp-col { transition: opacity .4s ease; }
  html.js .sp-col--left { top: 104px !important; left: 20px !important; right: 20px !important; width: auto !important; bottom: auto !important; }
  html.js body.is-start .sp-col--left { top: 38vh !important; }
  h1.sp-say, h2.sp-say { font-size: 22px !important; line-height: 1.25 !important; }
  .sp-say { font-size: 15px !important; }
  html.js .sp-col--right { top: auto !important; bottom: 58px !important; left: 20px !important; right: 20px !important; width: auto !important; max-height: calc(100vh - 260px); overflow: auto; }
  html.js .sp-col--right .sp-ans.is-folded { display: none !important; }
  html.js body.is-end .sp-col--right { bottom: 48px !important; max-height: calc(100vh - 250px); }

  html.js .sp-proof, html.js .sp-proof--bare {
    left: 10px !important; right: 10px !important; top: 92px !important; bottom: 14px !important;
    width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; max-height: none !important;
    padding: 14px !important; margin: 0 !important; border-radius: 14px !important; transform: translateY(18px) !important; overflow: hidden !important;
  }
  html.js .sp-proof.is-on { transform: none !important; }
  html.js .sp-proof:not(.sp-proof--bare) { overflow: auto !important; align-content: center; }
  .sp-proof > * { zoom: 1 !important; }

  .sp-weave.is-woven .sp-weave__bit:not(.is-out) { font-size: 12.5px !important; }
  .sp-weave__bit { font-size: 12px !important; }
  .sp-gate__it { font-size: 12.5px !important; }
  .sp-gate__done { font-size: 15px !important; left: calc(var(--gx) + 12px) !important; }
  .sp-gate__hand { left: calc(var(--gx) - 110px) !important; }
  .sp-gate__hand svg { width: 26px; height: 32px; }
  .sp-fold { margin: 6px 4px 26px !important; }
  .sp-fold__tool { font-size: 12.5px !important; padding: 2px 4px !important; gap: 5px; }
  .sp-fold__ico { width: 20px; height: 20px; }
  .sp-fold__core svg { width: 96px !important; }
  .sp-fold__note { font-size: 10px !important; bottom: -20px !important; }
  .sp-bookwrap, .sp-book { width: 100% !important; }
  .sp-log { grid-template-columns: 1fr !important; height: auto !important; padding: 8px 12px !important; gap: 2px !important; }

  .sp-foot, html.js .sp-foot { right: 14px !important; left: 14px !important; bottom: 14px !important; justify-content: space-between; font-size: 10px !important; }
  html.js body.has-proof .sp-foot { opacity: 0 !important; }
}
@media (max-width: 860px) {
  /* la cabecera sólo lleva la marca; «How can we help?» baja al pie, a la derecha, con el pulgar */
  .sp-talk { top: auto !important; bottom: 12px !important; right: 16px !important; position: fixed !important; z-index: 45 !important; }
  .sp-foot > span:first-child { display: none !important; }
  .sp-foot, html.js .sp-foot { justify-content: flex-start !important; right: auto !important; }
  .sp-weave.is-woven .sp-weave__bit:not(.is-out) { font-size: 11.5px !important; }
}
@media (max-width: 860px) {
  html.js body.has-proof .sp-talk, html.js body.is-end .sp-talk { opacity: 0 !important; pointer-events: none !important; }
  .sp-gate { --gx: 66% !important; }
  .sp-gate__it { font-size: 11px !important; right: calc(100% - var(--gx) + 14px) !important; }
  .sp-gate__it::after { margin-left: 6px !important; }
  .sp-gate__done { font-size: 12.5px !important; white-space: normal !important; width: calc(100% - var(--gx) - 20px); left: calc(var(--gx) + 10px) !important; }
  .sp-gate__hand { left: calc(var(--gx) - 80px) !important; }
  .sp-gate__mail { left: calc(var(--gx) + 12px) !important; top: calc(13% + 70px) !important; }
}
/* v0.8.9 · los iconos de «Your tools», un 25 % más grandes (26 → 32,5; en el móvil 20 → 25) */
.sp-fold__ico { width: 32.5px !important; height: 32.5px !important; }
@media (max-width: 860px) { .sp-fold__ico { width: 25px !important; height: 25px !important; } }


/* ═══ v0.9.0 · EL MENÚ — tres barras arriba a la derecha (sustituye a «How can we help?»):
   un desplegable con todas las puertas desde el principio, sin esperar a que la pantalla las dé.
   Arriba los cuatro perfiles; debajo lo que no es presentación pero pesa al firmar; al final,
   Talk to us. ═══ */
.sp-burger {
  position: absolute; right: max(48px, calc(50vw - 652px)); top: 30px; z-index: 46;
  width: 40px; height: 40px; padding: 0; margin: 0 -9px 0 0; border: 0; background: none; cursor: pointer;
  display: grid; align-content: center; justify-items: center; gap: 5px; color: #101012;
}
.sp-burger i { display: block; width: 22px; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease), opacity .2s; }
.sp-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.sp-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.sp-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }
.sp-burger:focus-visible { outline: 1px solid #101012; outline-offset: 2px; border-radius: 8px; }

.sp-nav__panel {
  position: absolute; right: max(48px, calc(50vw - 652px)); top: 78px; z-index: 45;
  width: 280px; box-sizing: border-box; padding: 18px 24px 22px;
  background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(16,16,18,.12), 0 1px 0 rgba(16,16,18,.04);
  display: grid; gap: 2px; text-align: left;
  animation: sp-nav-in .22s var(--ease);
}
.sp-nav__panel[hidden] { display: none; }
@keyframes sp-nav-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sp-nav__label { margin: 12px 0 4px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(16,16,18,.45); }
.sp-nav__label:first-child { margin-top: 0; }
.sp-nav__panel a { display: block; padding: 5px 0; font-size: 17px; line-height: 1.3; color: #101012; text-decoration: none; }
.sp-nav__panel a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.sp-nav__panel a.sp-nav__small { font-size: 14px; color: rgba(16,16,18,.72); }
.sp-nav__panel a.sp-nav__talk {
  justify-self: start; margin-top: 16px; padding: 3px 0; font-size: 15px; font-weight: 600;
  border-bottom: 1px solid #101012; text-decoration: none;
}
.sp-nav__talk span { display: inline-block; transition: transform .25s var(--ease); }
.sp-nav__talk:hover span { transform: translateX(3px); }

@media (max-width: 860px) {
  .sp-burger { top: 12px; right: 12px; margin: 0; }
  .sp-nav__panel { position: fixed; top: 60px; right: 10px; left: 10px; width: auto; padding: 18px 22px 22px; }
  .sp-nav__panel a { font-size: 19px; padding: 7px 0; }
  .sp-nav__panel a.sp-nav__small { font-size: 15px; }
}

/* ═══ v0.9.1 · LAS PÁGINAS DE TEXTO (/security/) — gris clarito, bloques centrados como un
   léeme, sin gráficos. La letra y el aire hacen el trabajo. Ganchos arriba para ir directo. ═══ */
body.sp-text { background: #f4f4f4; }
body.sp-text::before { display: none; }
body.sp-text .sp-top { position: absolute; }
.sp-read { position: relative; z-index: 2; padding: 190px 24px 40px; }
.sp-read__doc { max-width: 640px; margin: 0 auto; text-align: center; color: #1d1d1f; }
.sp-read__head { padding-bottom: 40px; }
.sp-read__kicker { margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: rgba(16,16,18,.5); }
.sp-read h1 { margin: 0 auto; max-width: 14ch; font-size: clamp(38px, 5.4vw, 60px); line-height: 1.05; font-weight: 600; letter-spacing: -.035em; text-wrap: balance; }
.sp-read__lead { margin: 28px auto 0; max-width: 34em; font-size: 21px; line-height: 1.5; letter-spacing: -.012em; color: #3a3a3c; text-wrap: pretty; }
.sp-read__hooks { margin: 44px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 600px; }
.sp-read__hooks a {
  padding: 8px 15px; border-radius: 999px; background: #fff; color: #1d1d1f; text-decoration: none;
  font-size: 13.5px; line-height: 1.2; transition: background .2s, color .2s;
}
.sp-read__hooks a:hover { background: #111; color: #fff; }
.sp-read__block { padding: 96px 0 0; scroll-margin-top: 40px; }
.sp-read h2 { margin: 0 0 26px; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.12; font-weight: 600; letter-spacing: -.028em; text-wrap: balance; }
.sp-read__block p { margin: 0 auto 18px; max-width: 33em; font-size: 19px; line-height: 1.6; letter-spacing: -.008em; color: #3a3a3c; text-wrap: pretty; }
.sp-read__block p:last-child { margin-bottom: 0; }
.sp-read__cta { padding-top: 34px; }
.sp-read__cta a { font-size: 17px; font-weight: 600; color: #111; text-decoration: none; border-bottom: 1px solid #111; padding-bottom: 3px; }
.sp-read__cta a span { display: inline-block; transition: transform .25s var(--ease); }
.sp-read__cta a:hover span { transform: translateX(3px); }
.sp-read__foot {
  position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; gap: 18px;
  padding: 120px 24px 40px; font-size: 11px; color: rgba(16,16,18,.5);
}
.sp-read__foot .sp-made { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }
.sp-read__foot .sp-made svg { width: 15px; height: 10px; }
@media (max-width: 860px) {
  .sp-read { padding: 130px 22px 20px; }
  .sp-read__lead { font-size: 18px; }
  .sp-read__block { padding-top: 72px; }
  .sp-read__block p { font-size: 17px; }
  .sp-read__hooks a { font-size: 13px; padding: 7px 13px; }
  .sp-read__foot { padding-top: 80px; flex-direction: column; gap: 8px; }
}
body.sp-text .sp-burger, body.sp-text .sp-nav__panel { position: fixed; }

/* v0.9.2 · un rótulo dentro de un bloque (las salas, lo que creemos) */
.sp-read__block h3 { margin: 34px 0 8px; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.015em; color: #1d1d1f; }
.sp-read__block h2 + h3 { margin-top: 0; }
.sp-read__block h3 + p { margin-bottom: 0; }

/* v0.9.8 · un enlace dentro del texto: la misma tinta, subrayado fino */
.sp-read__lead a, .sp-read__block p:not(.sp-read__cta) a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(16,16,18,.35); transition: text-decoration-color .2s; }
.sp-read__lead a:hover, .sp-read__block p:not(.sp-read__cta) a:hover { text-decoration-color: #111; }

/* v0.10.3 · la espina entra fundida, cuando ya pinta su gris: sin el salto del recuadro claro al cargar */
html.js .sp-spine video { opacity: 0; transition: opacity .9s var(--ease); }
html.js .sp-spine.is-ready video { opacity: 1; }

/* ═══ v0.11.0 · PROOF — la cápsula del tiempo. Tres años después alguien pregunta; los registros se
   apilan hacia el fondo como fichas en un acordeón, el tiempo corre hacia atrás (2029 → 2026) y se
   para en la ficha que contesta, que sale al frente con su papel y el nombre de quien lo hizo. ═══ */
.sp-vault { position: relative; display: flex; flex-direction: column; height: 100%; width: 100%; }
.sp-vault__ask {
  flex: none; margin: 30px 40px 0; height: 46px; border-radius: 999px; background: #f2f2f2;
  display: flex; align-items: center; padding: 0 22px; font-size: 15px; color: #101012;
}
.sp-vault__ask::before {
  content: ""; width: 15px; height: 15px; margin-right: 12px; flex: none; opacity: .45;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23101012' stroke-width='1.8'%3E%3Ccircle cx='8.5' cy='8.5' r='6'/%3E%3Cpath d='M13 13l5 5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sp-vault__caret { width: 1.5px; height: 18px; background: #101012; margin-left: 2px; animation: sp-caret 1s steps(1) infinite; }
.sp-vault.is-searching .sp-vault__caret, .sp-vault.is-found .sp-vault__caret { opacity: 0; animation: none; }
@keyframes sp-caret { 50% { opacity: 0; } }
.sp-vault__stage { position: relative; flex: 1; min-height: 0; perspective: 900px; perspective-origin: 50% -10%; overflow: hidden; }
.sp-vault__stack { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; transform-style: preserve-3d; }
.sp-vault__card {
  position: absolute; left: 13%; right: 13%; top: 62%; height: 58px; border-radius: 10px;
  background: #f4f4f4; box-shadow: 0 1px 0 rgba(16,16,18,.05), 0 10px 26px rgba(16,16,18,.07);
  display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 14px; padding: 0 18px;
  font-size: 13px; color: #101012; transform-origin: 50% 100%; will-change: transform, opacity;
}
.sp-vault__card time { color: rgba(16,16,18,.5); font-variant-numeric: tabular-nums; font-size: 12px; }
.sp-vault__card span { display: grid; gap: 1px; min-width: 0; }
.sp-vault__card small { font-size: 11px; color: rgba(16,16,18,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-vault__card b { font-weight: 600; font-size: 12.5px; }
.sp-vault__years { list-style: none; margin: 0; padding: 0; position: absolute; right: 16px; top: 18%; display: grid; gap: 16px; font-size: 11px; letter-spacing: .08em; color: rgba(16,16,18,.28); font-variant-numeric: tabular-nums; }
.sp-vault__years li { transition: color .25s, transform .25s; }
.sp-vault__years li.is-now { color: #101012; font-weight: 600; transform: translateX(-4px); }
.sp-vault__found {
  position: absolute; left: 11%; right: 11%; top: 50%; transform: translateY(-40%) scale(.96); opacity: 0;
  display: flex; align-items: center; gap: 20px; padding: 22px 24px; border-radius: 14px; background: #fff;
  box-shadow: 0 2px 4px rgba(16,16,18,.06), 0 26px 60px rgba(16,16,18,.18);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.sp-vault.is-found .sp-vault__found { opacity: 1; transform: translateY(-50%) scale(1); }
.sp-vault__paper {
  position: relative; flex: none; width: 58px; height: 74px; border-radius: 4px; background: #fafafa;
  box-shadow: inset 0 0 0 1px rgba(16,16,18,.12); display: flex; flex-direction: column; gap: 6px; padding: 12px 10px;
}
.sp-vault__paper i { display: block; height: 2px; background: rgba(16,16,18,.18); }
.sp-vault__paper i:nth-child(2) { width: 70%; } .sp-vault__paper i:nth-child(4) { width: 50%; }
.sp-vault__paper em { position: absolute; left: 8px; bottom: 7px; font: 700 8.5px/1 var(--font); letter-spacing: .06em; font-style: normal; color: #b85c1a; }
.sp-vault__what { display: grid; gap: 4px; min-width: 0; }
.sp-vault__what time { font-size: 12px; color: rgba(16,16,18,.5); font-variant-numeric: tabular-nums; }
.sp-vault__what strong { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.sp-vault__what small { font-size: 12.5px; color: rgba(16,16,18,.6); }
.sp-vault__what small b { color: #101012; font-weight: 600; }
.sp-vault__say { flex: none; margin: 0; padding: 0 40px 28px; text-align: center; font-size: 13.5px; color: rgba(16,16,18,.55); opacity: 0; transition: opacity .6s var(--ease) .3s; }
.sp-vault.is-found .sp-vault__say { opacity: 1; }
@media (max-width: 860px) {
  .sp-vault__ask { margin: 8px 6px 0; height: 40px; font-size: 13px; padding: 0 16px; }
  .sp-vault__card { left: 4%; right: 4%; grid-template-columns: 1fr auto; height: 52px; padding: 0 12px; }
  .sp-vault__card time { display: none; }
  .sp-vault__years { right: 4px; font-size: 9.5px; gap: 10px; }
  .sp-vault__found { left: 2%; right: 2%; gap: 14px; padding: 16px; }
  .sp-vault__what strong { font-size: 15px; }
  .sp-vault__paper { width: 44px; height: 58px; padding: 10px 8px; }
  .sp-vault__say { padding: 0 10px 12px; font-size: 12px; }
}
.sp-vault__stack { transition: opacity .6s var(--ease), filter .6s var(--ease); }
.sp-vault.is-found .sp-vault__stack { opacity: .35; filter: blur(2px); }
.sp-vault__found { z-index: 300; top: 56%; }
.sp-vault.is-found .sp-vault__stack { opacity: .14; }

/* v0.11.1 · las fichas, blancas y solapadas: se separan por la sombra, no por el gris */
.sp-vault__card {
  background: #fff; border: 1px solid rgba(16,16,18,.07);
  box-shadow: 0 1px 2px rgba(16,16,18,.05), 0 -6px 18px rgba(16,16,18,.06), 0 12px 28px rgba(16,16,18,.08);
}

/* ═══ v0.13 · LAS ESCENAS EN FILA (páginas de público): una banda blanca entre bloques, sin
   ventanas encima. Se reproduce al entrar en pantalla; tocarla la repite. Color de la app:
   la obra es un cuadrado menta (#e6efea), el acento es el verde de la casa (#599B81). ═══ */
:root { --menta: #e6efea; --verde: #599B81; }
.sp-scene {
  position: relative; box-sizing: border-box; margin: 72px 0 0 50%; transform: translateX(-50%);
  width: min(880px, calc(100vw - 44px)); height: 380px; border-radius: 18px; background: #fff;
  box-shadow: 0 1px 2px rgba(16,16,18,.05), 0 24px 60px rgba(16,16,18,.08); overflow: hidden; cursor: pointer; text-align: left;
}
.sp-scene + .sp-read__block { padding-top: 72px; }
.sp-scene::after { content: "Tap to play again"; position: absolute; right: 16px; bottom: 12px; font-size: 10.5px; color: rgba(16,16,18,.3); opacity: 0; transition: opacity .3s; }
.sp-scene:hover::after { opacity: 1; }

/* La obra, como en la app (.sp-obra: .sp-work ya existe en la portada) */
.sp-obra { position: absolute; left: 0; top: 0; display: grid; gap: 3px; opacity: 0; transition: transform 1s var(--ease), opacity .5s var(--ease), box-shadow .4s; will-change: transform; }
.sp-obra b { display: block; aspect-ratio: 1; border-radius: 9px; background: var(--menta); position: relative; overflow: hidden; }
.sp-obra b::before { content: ""; position: absolute; width: 70%; height: 70%; left: -22%; top: -22%; border-radius: 50%; background: rgba(89,155,129,.12); }
.sp-obra strong { font-size: 11.5px; font-weight: 600; color: #101012; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-obra small { font-size: 10px; color: rgba(16,16,18,.5); white-space: nowrap; }
.sp-obra.is-in { opacity: 1; }

/* ── La mañana ── */
.sp-morn { position: absolute; inset: 0; }
.sp-morn__count { position: absolute; left: 0; right: 0; top: 26px; margin: 0; text-align: center; font-size: 13px; color: rgba(16,16,18,.55); z-index: 3; transition: top .6s var(--ease); }
.sp-morn__count b { font-size: 30px; font-weight: 600; color: #101012; font-variant-numeric: tabular-nums; vertical-align: -4px; margin-right: 4px; }
.sp-morn__noise { position: absolute; left: 28px; right: 28px; top: 78px; bottom: 24px; }
.sp-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px;
  background: #f4f4f4; font-size: 11.5px; color: rgba(16,16,18,.72); white-space: nowrap;
  opacity: 0; transform: translate(0, 10px) scale(.9) rotate(var(--r, 0deg));
  transition: opacity .35s var(--ease), transform .5s var(--ease), filter .5s var(--ease);
}
.sp-chip::before { content: ""; width: 14px; height: 14px; flex: none; background: center/contain no-repeat; opacity: .55; }
.sp-chip--mail::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101012' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5l8.5 6.5 8.5-6.5'/%3E%3C/svg%3E"); }
.sp-chip--paper::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101012' stroke-width='1.6'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E"); }
.sp-chip--date::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101012' stroke-width='1.6'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.sp-chip--truck::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101012' stroke-width='1.6'%3E%3Cpath d='M2.5 6h11v10h-11zM13.5 9.5h4l3 3.5v3h-7z'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E"); }
.sp-chip--work { background: var(--menta); color: #101012; }
.sp-chip--work::before { display: none; }
.sp-chip--work i { width: 14px; height: 14px; border-radius: 4px; background: rgba(89,155,129,.35); }
.is-noise .sp-chip { opacity: 1; transform: translate(0, 0) rotate(var(--r, 0deg)); transition-delay: calc(var(--i) * 110ms); }
.is-blow .sp-chip { opacity: 0; filter: blur(6px); transform: translate(var(--dx), var(--dy)) scale(.85) rotate(var(--r, 0deg)); transition-delay: calc(var(--i) * 25ms); }
.sp-morn__one {
  position: absolute; left: 50%; top: 54%; width: min(420px, 82%); transform: translate(-50%, -40%) scale(.96); opacity: 0;
  display: grid; gap: 6px; padding: 22px 24px; border-radius: 14px; background: #fff;
  box-shadow: 0 2px 4px rgba(16,16,18,.05), 0 20px 50px rgba(16,16,18,.14);
  transition: opacity .6s var(--ease), transform .7s var(--ease);
}
.sp-morn__one small { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(16,16,18,.45); font-weight: 600; }
.sp-morn__one strong { font-size: 19px; font-weight: 600; letter-spacing: -.012em; color: #101012; }
.sp-morn__one span { font-size: 13px; color: rgba(16,16,18,.6); }
.sp-morn__one em { justify-self: start; margin-top: 8px; font-style: normal; font-size: 12.5px; font-weight: 600; color: #fff; background: #111; border-radius: 999px; padding: 8px 16px; }
.is-calm .sp-morn__one { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.is-calm .sp-morn__count { top: 30px; }

/* ── La obra que llega curada ── */
.sp-cur { position: absolute; inset: 0; }
.sp-cur__desks { list-style: none; margin: 0; padding: 0; position: absolute; left: 32px; top: 50%; transform: translateY(-58%); display: grid; gap: 22px; width: 200px; }
.sp-cur__desks li { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; color: #101012; }
.sp-cur__desks li i { width: 38px; height: 38px; border-radius: 50%; background: #f2f2f2; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 600; color: rgba(16,16,18,.55); }
.sp-cur__desks li small { display: block; font-size: 10.5px; font-weight: 400; color: rgba(16,16,18,.45); }
.sp-cur__box { position: absolute; left: 268px; right: 32px; top: 48px; bottom: 118px; border-radius: 14px; border: 1.4px dashed rgba(16,16,18,.16); padding: 16px 18px; transition: border-color .5s, background .5s; }
.is-landed .sp-cur__box { border-style: solid; border-color: rgba(16,16,18,.08); background: #fbfbfb; }
.sp-cur__head { margin: 0 0 14px; font-size: 12.5px; font-weight: 600; color: #101012; }
.sp-cur__head span { font-weight: 400; color: rgba(16,16,18,.45); }
.sp-cur__slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.sp-cur__slots i { display: block; aspect-ratio: 1; border-radius: 9px; }
.sp-cur__works { position: absolute; inset: 0; pointer-events: none; }
.sp-obra.is-pick { transition: transform 1s var(--ease), opacity .5s var(--ease); }
.is-chosen .sp-obra.is-pick b { box-shadow: 0 0 0 2px var(--verde), 0 12px 24px -8px rgba(89,155,129,.6); }
.is-chosen .sp-obra.is-pick b::after {
  content: ""; position: absolute; right: 7px; top: 7px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--verde) center/12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.is-chosen .sp-obra:not(.is-pick) { opacity: .45; }
.sp-cur__say { position: absolute; left: 268px; right: 32px; bottom: 22px; margin: 0; font-size: 12.5px; color: rgba(16,16,18,.55); opacity: 0; transition: opacity .6s var(--ease); }
.sp-cur__say b { color: var(--verde); font-weight: 600; }
.is-landed .sp-cur__say { opacity: 1; }

@media (max-width: 760px) {
  .sp-scene { height: 470px; border-radius: 14px; }
  .sp-chip { font-size: 10.5px; height: 26px; }
  .sp-cur__desks { left: 18px; right: 18px; top: 18px; transform: none; width: auto; grid-auto-flow: column; gap: 8px; }
  .sp-cur__desks li { flex-direction: column; gap: 4px; font-size: 10.5px; text-align: center; }
  .sp-cur__desks li small { display: none; }
  .sp-cur__box { left: 14px; right: 14px; top: 110px; bottom: 74px; padding: 12px; }
  .sp-cur__slots { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .sp-cur__say { left: 16px; right: 16px; bottom: 16px; font-size: 11.5px; }
}

/* ═══ v0.14 · ESCENAS SIN CAJA. Viven sobre el mismo gris de la página; el cuerpo lo tienen los
   objetos (fichas, cuadrados menta, la tarjeta), cada uno con su sombra, como piezas en una mesa.
   Debajo, una cartela de museo: qué se ha visto, en dos líneas, y «Play again». ═══ */
.sp-scene { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; height: auto; cursor: default; }
.sp-scene::after { display: none; }
.sp-label { max-width: 540px; margin: 26px 0 0; text-align: left; font-size: 12.5px; line-height: 1.6; color: rgba(16,16,18,.55); }
.sp-label em { font-style: italic; color: #101012; }
.sp-label__again { border: 0; background: none; padding: 0; margin-left: 4px; font: inherit; color: var(--verde); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* La mañana, nueva: la mesa, la línea que lee, las tres bandejas y la de hoy */
.sp-scene--morning .sp-morn { position: relative; inset: auto; height: 420px; }
.sp-scene--morning .sp-morn__count { top: 0; }
.sp-morn__table { position: absolute; left: 0; right: 0; top: 56px; height: 250px; }
.sp-scene--morning .sp-chip {
  opacity: 1; transform: rotate(var(--r, 0deg)); background: #fff; color: rgba(16,16,18,.78);
  box-shadow: 0 1px 2px rgba(16,16,18,.06), 0 6px 16px rgba(16,16,18,.07);
  transition: transform .62s var(--ease), opacity .62s var(--ease); transition-delay: 0s; filter: none;
}
.sp-scene--morning .sp-chip--work { background: var(--menta); color: #101012; }
.sp-scene--morning .sp-chip.is-filed { transform: var(--to, none) rotate(0deg); opacity: 0; }
.sp-scene--morning .sp-chip.is-now.is-filed { transform: scale(.9); opacity: 0; }
.sp-morn__scan {
  position: absolute; top: 48px; height: 260px; left: 0; width: 2px; opacity: 0; z-index: 90; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--verde) 20%, var(--verde) 80%, transparent);
  box-shadow: 0 0 18px 4px rgba(89,155,129,.25);
}
.sp-scene--morning.is-reading .sp-morn__scan { opacity: .85; left: 100%; transition: left 2.6s linear, opacity .3s; }
.sp-scene--morning.is-calm .sp-morn__scan { opacity: 0; transition: opacity .4s; }
.sp-morn__trays { position: absolute; left: 0; right: 0; top: 336px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.sp-tray { border-top: 1px solid rgba(16,16,18,.14); padding-top: 12px; }
.sp-tray p { margin: 0 0 10px; font-size: 12px; color: rgba(16,16,18,.55); }
.sp-tray b { font-size: 22px; font-weight: 600; color: #101012; margin-right: 6px; font-variant-numeric: tabular-nums; vertical-align: -2px; }
.sp-tray__stack { display: flex; flex-wrap: wrap; gap: 4px; min-height: 18px; }
.sp-tray__stack i { width: 22px; height: 8px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(16,16,18,.1); animation: sp-tray-in .3s var(--ease); }
.sp-tray__stack i.is-work { background: var(--menta); box-shadow: none; }
@keyframes sp-tray-in { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
.sp-scene--morning .sp-morn__one { top: 178px; z-index: 100; }

/* La obra que llega, sin caja: la caja de la galería es ya un objeto */
.sp-scene--curated .sp-cur { position: relative; inset: auto; height: 300px; }
.sp-scene--curated .sp-cur__box { top: 20px; bottom: 40px; background: transparent; box-shadow: none; }
.sp-scene--curated.is-landed .sp-cur__box { background: transparent; border-color: rgba(16,16,18,.12); }
.sp-scene--curated .sp-cur__desks { left: 0; }
.sp-scene--curated .sp-cur__desks li i { background: #fff; box-shadow: 0 1px 2px rgba(16,16,18,.06); }
.sp-scene--curated .sp-obra b { box-shadow: 0 1px 2px rgba(16,16,18,.05), 0 8px 18px rgba(16,16,18,.07); }
.sp-scene--curated .sp-cur__box { left: 236px; right: 0; }

@media (max-width: 760px) {
  .sp-scene--morning .sp-morn { height: 560px; }
  .sp-morn__table { height: 300px; }
  .sp-scene--morning .sp-chip { font-size: 10px; height: 24px; padding: 0 9px 0 7px; }
  .sp-morn__trays { top: 400px; gap: 12px; }
  .sp-tray p { font-size: 10.5px; } .sp-tray b { font-size: 18px; display: block; }
  .sp-scene--morning .sp-morn__one { top: 200px; }
  .sp-scene--curated .sp-cur { height: 420px; }
  .sp-scene--curated .sp-cur__box { left: 0; top: 96px; bottom: 20px; }
  .sp-label { padding: 0 4px; }
}

/* ═══ v0.15 · LA META. La tarjeta de «hoy», limpia en blanco (sin ribete). La escena de la meta:
   se escribe adónde va la galería; los pasos llegan a trazos (propuestos) y se vuelven blancos al
   adoptarse; el que no sirve se retira y baja a «espera, sin prisa». El verde sólo marca el camino
   andado y el sí. ═══ */
.sp-goal { position: relative; padding-top: 4px; }
.sp-goal__ask { margin: 0; font-size: 12px; letter-spacing: .02em; color: rgba(16,16,18,.5); }
.sp-goal__text { margin: 6px 0 0; min-height: 1.3em; font-size: clamp(22px, 3vw, 30px); font-weight: 600; letter-spacing: -.02em; color: #101012; line-height: 1.25; }
.sp-goal__caret { display: inline-block; width: 2px; height: .95em; margin-left: 3px; vertical-align: -.1em; background: #101012; animation: sp-caret 1s steps(1) infinite; }
.is-proposed .sp-goal__caret, .is-served .sp-goal__caret { opacity: 0; animation: none; }
@keyframes sp-caret { 50% { opacity: 0; } }
.sp-goal__by { margin: 30px 0 0; font-size: 12px; color: #101012; font-weight: 600; opacity: 0; transition: opacity .5s var(--ease); }
.sp-goal__by span { font-weight: 400; color: rgba(16,16,18,.5); }
.is-proposed .sp-goal__by { opacity: 1; }
.sp-goal__path { position: relative; display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding-top: 22px; }
.sp-goal__line { position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: rgba(16,16,18,.16); }
.sp-goal__line b { position: absolute; left: 0; top: -1px; height: 3px; width: 0; border-radius: 2px; background: var(--verde); transition: width 1s var(--ease); }
.is-served .sp-goal__line b { width: 21px; }
.sp-step {
  position: relative; flex: 1 1 0; min-width: 0; box-sizing: border-box; display: grid; align-content: start; gap: 8px;
  min-height: 112px; padding: 14px 14px 16px; border-radius: 12px; border: 1.4px dashed rgba(16,16,18,.22); background: transparent;
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s var(--ease), transform .5s var(--ease), background .45s, border-color .45s, box-shadow .45s, flex-grow .7s var(--ease), padding .7s var(--ease), margin .7s var(--ease);
}
.sp-step::before { content: ""; width: 16px; height: 16px; background: center/contain no-repeat; opacity: .6; }
.sp-step::after { content: ""; position: absolute; left: 16px; top: -22px; width: 9px; height: 9px; border-radius: 50%; background: #f4f4f4; box-shadow: inset 0 0 0 1.4px rgba(16,16,18,.3); transition: background .4s, box-shadow .4s; }
.sp-step[data-ico="mail"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101012' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5l8.5 6.5 8.5-6.5'/%3E%3C/svg%3E"); }
.sp-step[data-ico="paper"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101012' stroke-width='1.6'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E"); }
.sp-step[data-ico="date"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101012' stroke-width='1.6'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.sp-step[data-ico="truck"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101012' stroke-width='1.6'%3E%3Cpath d='M2.5 6h11v10h-11zM13.5 9.5h4l3 3.5v3h-7z'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E"); }
.sp-step[data-ico="work"]::before { opacity: 1; border-radius: 4px; background: var(--menta); }
.sp-step em { font-style: normal; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(16,16,18,.42); font-weight: 600; }
.sp-step span { font-size: 13px; line-height: 1.35; color: rgba(16,16,18,.6); }
.sp-step.is-in { opacity: 1; transform: none; }
.sp-step.is-yes { border: 1.4px solid transparent; background: #fff; box-shadow: 0 1px 2px rgba(16,16,18,.05), 0 10px 24px rgba(16,16,18,.07); }
.sp-step.is-yes span { color: #101012; }
.sp-step.is-yes em { color: var(--verde); }
.sp-step.is-yes em::before { content: "✓ "; }
.sp-step.is-yes::after { background: #fff; box-shadow: inset 0 0 0 1.4px #101012; }
.sp-step.is-today::after { background: var(--verde); box-shadow: 0 0 0 4px rgba(89,155,129,.18); }
.sp-step.is-today em { color: #101012; }
.sp-step.is-today em::before { content: ""; }
.sp-step.is-out { max-height: 112px; overflow: hidden; opacity: 0; transform: translateY(46px) scale(.92); flex-grow: .0001; padding-left: 0; padding-right: 0; margin-left: -12px; border-color: transparent; }
.sp-goal__flag { flex: none; align-self: start; position: relative; padding: 0 0 0 4px; font-size: 15px; font-weight: 600; color: #101012; min-width: 64px; opacity: 0; transition: opacity .5s var(--ease); }
.sp-goal__flag small { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(16,16,18,.42); font-weight: 600; margin-bottom: 3px; }
.sp-goal__flag::before { content: ""; position: absolute; left: 4px; top: -24px; width: 12px; height: 12px; border-radius: 3px; background: #101012; transform: rotate(45deg); }
.is-proposed .sp-goal__flag { opacity: 1; }
.sp-goal__waits { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 34px; padding-top: 14px; border-top: 1px solid rgba(16,16,18,.1); transition: opacity .6s var(--ease), filter .6s var(--ease); }
.sp-goal__waits p { margin: 0 8px 0 0; font-size: 12px; color: rgba(16,16,18,.5); }
.sp-goal .sp-chip { position: static; opacity: 1; transform: none; height: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(16,16,18,.08); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.sp-goal .sp-chip--work { background: var(--menta); box-shadow: none; }
.sp-goal .sp-chip.is-late { opacity: 0; transform: translateY(-14px); }
.sp-scene--goal .sp-step.is-out ~ * .is-late, .sp-scene--goal:has(.is-out) .sp-chip.is-late { opacity: 1; transform: none; }
.is-served .sp-goal__waits { opacity: .45; filter: grayscale(1); }
@media (max-width: 760px) {
  .sp-goal__path { flex-direction: column; gap: 8px; padding-top: 0; padding-left: 22px; }
  .sp-goal__line { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .sp-goal__line b { width: 3px; height: 0; left: -1px; top: 0; transition: height 1s var(--ease); }
  .is-served .sp-goal__line b { width: 3px; height: 18%; }
  .sp-step { grid-template-columns: 16px auto 1fr; align-items: center; gap: 10px; padding: 10px 12px; }
  .sp-step::after { left: -21px; top: 50%; margin-top: -4.5px; }
  .sp-step.is-out { transform: translateX(30px); max-height: 0; padding-top: 0; padding-bottom: 0; margin: -8px 0 0; overflow: hidden; }
  .sp-goal__flag::before { left: -25px; top: 3px; }
}

/* v0.15.1 · la obra se presenta: título en cursiva, artista debajo, como una ficha de Pantone.
   Es la meta del camino (sustituye al rombo solo); los pasos son verbos con sujeto. */
.sp-goal__text i, .sp-morn__one strong i { font-style: italic; }
.sp-step[data-ico="camera"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101012' stroke-width='1.6'%3E%3Cpath d='M3 8h4l2-2.5h6L17 8h4v11H3z'/%3E%3Ccircle cx='12' cy='13.5' r='3.5'/%3E%3C/svg%3E"); }
.sp-goal__flag { min-width: 0; padding: 0; margin-top: -4px; }
.sp-goal__flag small { margin-bottom: 8px; }
.sp-goal__flag::before { left: 50%; margin-left: -6px; top: -22px; }
.sp-pantone { width: 108px; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(16,16,18,.06), 0 12px 26px rgba(16,16,18,.1); }
.sp-pantone b { display: block; height: 78px; background: var(--menta); position: relative; overflow: hidden; }
.sp-pantone b::before { content: ""; position: absolute; width: 70%; height: 90%; left: -20%; top: -30%; border-radius: 50%; background: rgba(89,155,129,.14); }
.sp-pantone span { display: grid; gap: 2px; padding: 8px 10px 10px; }
.sp-pantone em { font-style: italic; font-size: 13px; font-weight: 600; color: #101012; letter-spacing: -.005em; }
.sp-pantone small { display: block; margin: 0; font-size: 10px; letter-spacing: 0; text-transform: none; font-weight: 400; color: rgba(16,16,18,.55); }
@media (max-width: 760px) { .sp-goal__flag::before { left: -25px; margin-left: 0; top: 30px; } }

/* v0.15.2 · la meta es un lugar (el puntero); la ficha de la obra entra en «Today», cuando Elena
   manda las fotos, y se pone al lado. La ficha: un solo verde, de claro a algo más hondo. */
.sp-goal__flag { min-width: 120px; margin-top: 0; padding-left: 2px; }
.sp-goal__flag::before { width: 20px; height: 20px; left: -2px; margin-left: 0; top: -32px; border-radius: 0; transform: none; background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5a7 7 0 0 0-7 7c0 5.2 7 12 7 12s7-6.8 7-12a7 7 0 0 0-7-7z' fill='%23101012'/%3E%3Ccircle cx='12' cy='9.5' r='2.6' fill='%23fff'/%3E%3C/svg%3E"); }
.sp-goal__flag small { margin-bottom: 4px; }
.sp-goal__flag strong { display: block; font-size: 14px; font-weight: 600; color: #101012; line-height: 1.3; }
.sp-goal__flag span { display: block; font-size: 12px; font-weight: 400; color: rgba(16,16,18,.55); margin-top: 2px; }
.sp-pantone b { background: linear-gradient(160deg, #eef4f0 0%, #d3e4db 55%, #b9d3c6 100%); }
.sp-pantone b::before { display: none; }
.sp-step--first .sp-pantone {
  position: absolute; right: 12px; top: 12px; width: 76px; opacity: 0; transform: translateY(-18px) scale(.9);
  transition: opacity .5s var(--ease) .25s, transform .6s var(--ease) .25s;
}
.sp-step--first .sp-pantone b { height: 52px; }
.sp-step--first .sp-pantone span { padding: 6px 7px 7px; gap: 1px; }
.sp-step--first .sp-pantone em { font-size: 10.5px; }
.sp-step--first .sp-pantone small { font-size: 8.5px; white-space: nowrap; }
.sp-step--first.is-today { flex-grow: 1.7; padding-right: 100px; }
.sp-step--first.is-today .sp-pantone { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .sp-goal__flag::before { left: -29px; top: 14px; }
  .sp-step--first.is-today { padding-right: 12px; padding-bottom: 96px; }
  .sp-step--first .sp-pantone { top: auto; bottom: 10px; left: 38px; right: auto; }
}
.sp-step .sp-pantone em { text-transform: none; letter-spacing: -.005em; font-style: italic; color: #101012; }
.sp-step .sp-pantone em::before { content: none !important; }
.sp-step .sp-pantone span { font-size: inherit; color: inherit; }
.sp-step--first .sp-pantone { width: 90px; }
.sp-step--first.is-today { padding-right: 114px; }

/* v0.15.3 · la meta es una ficha más, pero menta: se ve que es el destino y no un paso.
   «Today» crece un poco y, cuando ha crecido, la ficha de la obra entra deslizándose desde el lado. */
.sp-goal__flag {
  flex: 1 1 0; min-width: 0; box-sizing: border-box; min-height: 112px; margin: 0; padding: 14px 14px 16px;
  display: grid; align-content: start; gap: 8px; border-radius: 12px; background: var(--menta);
  box-shadow: 0 1px 2px rgba(16,16,18,.04), 0 10px 24px rgba(89,155,129,.12);
  opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.is-proposed .sp-goal__flag { opacity: 1; transform: none; }
.sp-goal__flag::before { content: ""; position: static; width: 16px; height: 16px; margin: 0; border-radius: 0; transform: none; background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101012' stroke-width='1.6'%3E%3Cpath d='M12 2.5a7 7 0 0 0-7 7c0 5.2 7 12 7 12s7-6.8 7-12a7 7 0 0 0-7-7z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); opacity: .75; }
.sp-goal__flag::after { content: ""; position: absolute; left: 14px; top: -24px; width: 11px; height: 11px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgba(89,155,129,.16); }
.sp-goal__flag { position: relative; }
.sp-goal__flag small { margin: 0; font-size: 10px; letter-spacing: .1em; color: rgba(16,16,18,.5); }
.sp-goal__flag strong { font-size: 13px; line-height: 1.35; }
.sp-goal__flag span { margin-top: -6px; font-size: 12px; }

.sp-step--first.is-today { flex-grow: 1.35; padding-right: 90px; }
.sp-step--first .sp-pantone, .sp-step--first.is-today .sp-pantone { width: 64px; right: 14px; top: 50%; }
.sp-step--first .sp-pantone {
  opacity: 0; transform: translate(46px, -50%) rotate(7deg);
  transition: opacity .35s var(--ease) .55s, transform .75s cubic-bezier(.2,.9,.25,1.12) .55s;
}
.sp-step--first.is-today .sp-pantone { opacity: 1; transform: translate(0, -50%) rotate(0deg); }
.sp-step--first .sp-pantone b { height: 44px; }
.sp-step--first .sp-pantone span { padding: 5px 6px 6px; }
.sp-step--first .sp-pantone em { font-size: 10px; }
.sp-step--first .sp-pantone small { font-size: 8.5px; }
@media (max-width: 760px) {
  .sp-goal__flag::after { left: -26px; top: 20px; }
  .sp-step--first.is-today { padding-right: 90px; padding-bottom: 10px; }
  .sp-step--first .sp-pantone { top: 50%; bottom: auto; left: auto; }
}
.sp-step--first .sp-pantone, .sp-step--first.is-today .sp-pantone { width: 72px; }
.sp-step--first.is-today { padding-right: 98px; }
.sp-step--first .sp-pantone em { white-space: nowrap; }

/* v0.15.4 · la meta no es un paso más: más estrecha y más alta, con el degradado de la ficha,
   y el verde algo más hondo para que se despegue del gris. */
.sp-goal__flag {
  flex: .82 1 0; min-height: 140px; margin-top: -14px; padding-top: 16px;
  background: linear-gradient(165deg, #e4efe9 0%, #c6ddd1 55%, #9fc5b3 100%);
  box-shadow: 0 1px 2px rgba(16,16,18,.06), 0 14px 30px rgba(89,155,129,.22);
}
.sp-goal__flag::after { top: -8px; }
.sp-goal__flag small { color: rgba(16,16,18,.55); }
.sp-goal__flag strong { font-size: 14px; }
.sp-goal__flag span { color: rgba(16,16,18,.62); }
.sp-goal__flag::before { opacity: .85; }
@media (max-width: 760px) { .sp-goal__flag { margin-top: 0; min-height: 0; } .sp-goal__flag::after { top: 20px; } }

/* v0.15.5 · todas del mismo alto; la meta, apaisada y algo más ancha; Today, un poco menos ancha. */
.sp-goal__path { align-items: stretch; }
.sp-goal__flag { flex: 1.2 1 0; min-height: 112px; margin-top: 0; padding-top: 14px; }
.sp-goal__flag::after { top: -22px; }
.sp-step--first.is-today { flex-grow: 1.2; }
@media (max-width: 760px) { .sp-goal__flag::after { top: 20px; } }
.sp-step--first.is-today { flex-grow: .7; }
.sp-goal__flag { flex-grow: 1.3; }
.sp-goal__flag { align-self: stretch; }

/* v0.15.6 · sin saltos: las medidas quedan fijas desde el principio (Today ya guarda el hueco de la
   ficha, con un marco a trazos que la espera), nada se mueve en vertical, y los cambios son fundidos
   más largos y espaciados. Lo único que se desplaza es en horizontal: el paso que se retira cierra
   su hueco despacio, y la ficha entra por el lado. */
.sp-step, .sp-goal__flag { min-height: 132px; }
.sp-step { transform: none; transition: opacity .7s var(--ease), background .7s var(--ease), border-color .7s var(--ease), box-shadow .7s var(--ease), flex-grow 1.1s var(--ease), padding 1.1s var(--ease), margin 1.1s var(--ease); }
.sp-step em, .sp-step span { transition: color .7s var(--ease); }
.sp-goal__flag { transform: none; transition: opacity .8s var(--ease); }
.sp-step--first, .sp-step--first.is-today { flex-grow: .7; padding-right: 98px; }
.sp-slot { position: absolute; right: 14px; top: 50%; width: 72px; height: 80px; margin-top: -40px; box-sizing: border-box; border-radius: 8px; border: 1.2px dashed rgba(16,16,18,.2); transition: opacity .5s var(--ease) .6s; }
.sp-step--first.is-today .sp-slot { opacity: 0; }
.sp-step--first .sp-pantone { transform: translate(34px, -50%); transition: opacity .6s var(--ease) .15s, transform 1s cubic-bezier(.22,.8,.3,1) .15s; }
.sp-step--first.is-today .sp-pantone { transform: translate(0, -50%); }
.sp-step.is-out { transform: scale(.97); transition: opacity .6s var(--ease), transform .6s var(--ease), flex-grow 1.1s var(--ease) .35s, padding 1.1s var(--ease) .35s, margin 1.1s var(--ease) .35s, border-color .4s; }
.sp-goal .sp-chip.is-late { transform: translateX(-10px); transition: opacity .7s var(--ease) .6s, transform .9s var(--ease) .6s; }
.sp-goal__waits { transition: opacity 1.2s var(--ease), filter 1.2s var(--ease); }
@media (max-width: 760px) {
  .sp-step, .sp-goal__flag { min-height: 0; }
  .sp-step--first, .sp-step--first.is-today { padding-right: 98px; padding-bottom: 10px; min-height: 104px; }
}
@media (min-width: 761px) { .sp-step, .sp-goal__flag { height: 136px; min-height: 0; } }

/* v0.15.7 · Today nace compuesta: la ficha de la obra ya está puesta cuando la tarjeta aparece.
   Lo que se va rellenando son los pasos de en medio. */
.sp-step--first .sp-pantone, .sp-step--first.is-today .sp-pantone { opacity: 1; transform: translate(0, -50%); transition: none; }
.sp-step--first, .sp-step--first.is-today { padding-right: 104px; }

/* v0.15.8 · la fila no cambia nunca de medida: el paso que no sirve ya no ocupa sitio en ella.
   Se propone aparte, como un desvío bajo el camino, y de ahí se va a «Waits». */
.sp-detour {
  position: absolute; left: 50%; top: calc(100% + 16px); display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px 0 12px; box-sizing: border-box; border-radius: 999px; border: 1.3px dashed rgba(16,16,18,.24);
  font-size: 12px; color: rgba(16,16,18,.6); white-space: nowrap; opacity: 0;
  transition: opacity .7s var(--ease), transform .8s var(--ease);
}
.sp-detour::before { content: ""; width: 14px; height: 14px; background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101012' stroke-width='1.6'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); opacity: .55; }
.sp-detour em { font-style: normal; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: rgba(16,16,18,.42); }
.sp-detour.is-in { opacity: 1; }
.sp-detour.is-out { opacity: 0; transform: translateX(-24px); transition-delay: .5s; }
.sp-goal__waits { margin-top: 70px; }
@media (max-width: 760px) {
  .sp-detour { position: relative; left: auto; top: auto; margin: 12px 0 0 22px; }
  .sp-goal__waits { margin-top: 24px; }
}

/* v0.16 · la independencia: una línea en la apertura, algo más baja que la frase de propósito */
.sp-say--aside { font-size: clamp(13px, 1.05vw, 14.5px); color: rgba(16,16,18,.55); margin-top: -2px; }

/* v0.16.3 · LOS DOS LADOS. A la izquierda tu servidor, en blanco; a la derecha el proveedor de IA,
   en gris; entre los dos, una pared con su candado. La frase de la casa se queda en su sitio: al otro
   lado sólo cruza el hecho con los nombres cambiados por lo que son («a gallery», «a work»), vuelve
   mejor dicho y los nombres se ponen en tu lado. Al final quedan juntas «Without AI» y «With AI»:
   los hechos, los mismos. Se reproduce una vez al entrar y se queda en el final. */
html.js .sp-proof--bare > .sp-duo { flex: 1; min-height: 0; }
.sp-duo { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
.sp-duo__side { position: relative; }
.sp-duo__side--out { background: #f3f3f4; }
.sp-duo__side p { position: absolute; top: 26px; left: 0; right: 0; margin: 0; text-align: center; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: rgba(16,16,18,.4); }
.sp-duo__wall { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(16,16,18,.1); transform: translateX(-50%); }
.sp-duo__wall svg { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; padding: 7px; box-sizing: border-box; transform: translate(-50%, -50%); background: #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(16,16,18,.1), 0 6px 16px rgba(16,16,18,.08); fill: none; stroke: #101012; stroke-width: 1.6; stroke-linejoin: round; }
.sp-duo__c {
  position: absolute; left: 25%; top: 50%; width: 41%; box-sizing: border-box; transform: translate(-50%, -50%);
  padding: 14px 16px 15px; border-radius: 12px; background: #fff;
  box-shadow: 0 1px 2px rgba(16,16,18,.06), 0 10px 26px rgba(16,16,18,.08);
  font-size: clamp(13px, 1.1vw, 15px); line-height: 1.42; color: #101012; letter-spacing: -.005em; opacity: 0;
}
.sp-duo__c small { display: block; margin-bottom: 6px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: rgba(16,16,18,.42); }
.sp-duo__c i { font-style: italic; }
.sp-duo__c b { font-weight: 500; color: rgba(16,16,18,.5); }
.sp-duo__c--1 { top: 32%; }
.sp-duo__c--2, .sp-duo__c--3 { left: 75%; }
.sp-duo__c--4 { top: 68%; }
.sp-duo__c--4 small { color: #101012; }

.sp-proof.is-on .sp-duo__c--1 { animation: sp-duo-in .7s ease .4s forwards; }
.sp-proof.is-on .sp-duo__c--2 { animation: sp-duo-go 1.3s cubic-bezier(.45,0,.2,1) 1.9s forwards, sp-duo-out .5s ease 4.4s forwards; }
.sp-proof.is-on .sp-duo__c--3 { animation: sp-duo-in .6s ease 4.6s forwards, sp-duo-leave 1.2s cubic-bezier(.45,0,.2,1) 6.4s forwards; }
.sp-proof.is-on .sp-duo__c--4 { animation: sp-duo-back 1.3s cubic-bezier(.45,0,.2,1) 7.1s forwards; }
@keyframes sp-duo-in { to { opacity: 1; } }
@keyframes sp-duo-out { to { opacity: 0; } }
/* cruza de tu lado al suyo: nace en la pared */
@keyframes sp-duo-go { from { left: 50%; top: 32%; opacity: 0; } 30% { opacity: 1; } to { left: 75%; top: 50%; opacity: 1; } }
@keyframes sp-duo-leave { from { left: 75%; top: 50%; opacity: 1; } to { left: 52%; top: 60%; opacity: 0; } }
@keyframes sp-duo-back { from { left: 50%; top: 66%; opacity: 0; } 35% { opacity: 1; } to { left: 25%; top: 68%; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sp-proof.is-on .sp-duo__c { animation: none !important; }
  .sp-duo__c--1, .sp-duo__c--4, .sp-duo__c--3 { opacity: 1; }
}
.no-js .sp-duo { display: none; }
.sp-duo__wall svg { max-width: none; min-width: 34px; }

/* v0.16.4 · sin cajas dentro de la caja: bloques planos con una línea debajo, y el rótulo es un
   icono. El interruptor de iOS dice «sin IA / con IA» sin palabras de más. */
.sp-duo__c { background: none; box-shadow: none; border-radius: 0; width: 38%; padding: 0 0 16px; border-bottom: 1px solid rgba(16,16,18,.13); }
.sp-duo__c small { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; letter-spacing: .1em; }
.sp-tg { width: 30px; height: 18px; flex: none; }
.sp-tg rect { fill: rgba(16,16,18,.1); stroke: none; }
.sp-tg circle { fill: #fff; filter: drop-shadow(0 1px 1.5px rgba(16,16,18,.25)); }
.sp-tg--on rect { fill: #101012; }
.sp-ar { width: 15px; height: 15px; flex: none; fill: none; stroke: rgba(16,16,18,.55); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ═══ v0.17 · TALK TO US, UNA HOJA. Desde el menú (o cualquier [data-talk]) se abre en el centro de
   la página en la que estés, sobre un velo claro y difuminado. Sin espina, sin capítulos: quién eres
   de un toque, nombre, correo y, si quieres, qué necesitas. Se envía sin salir de la página. ═══ */
.sp-talk { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px;
  background: rgba(244,244,244,.62); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  animation: sp-talk-fade .35s ease both; }
.sp-talk[hidden] { display: none; }
html.is-talking, html.is-talking body { overflow: hidden; }
.sp-talk__sheet { position: relative; width: min(520px, 100%); max-height: calc(100vh - 40px); overflow: auto; box-sizing: border-box;
  padding: 38px 40px 34px; border-radius: 22px; background: #fff;
  box-shadow: 0 1px 2px rgba(16,16,18,.06), 0 40px 90px rgba(16,16,18,.18); animation: sp-talk-rise .5s cubic-bezier(.2,.8,.25,1) both; }
@keyframes sp-talk-fade { from { opacity: 0; } }
@keyframes sp-talk-rise { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.sp-talk__x { position: absolute; right: 16px; top: 16px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f2f2f2; cursor: pointer; display: grid; place-items: center; }
.sp-talk__x svg { width: 14px; height: 14px; fill: none; stroke: #101012; stroke-width: 2; stroke-linecap: round; }
.sp-talk__x:hover { background: #e8e8e8; }
.sp-talk h2 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: #101012; }
.sp-talk__sub, .sp-talk__done p { margin: 6px 0 24px; font-size: 14.5px; line-height: 1.5; color: rgba(16,16,18,.6); }
.sp-talk form { display: grid; gap: 14px; }
.sp-talk__who { border: 0; margin: 0 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sp-talk__who legend { width: 100%; margin-bottom: 8px; padding: 0; font-size: 12px; color: rgba(16,16,18,.55); }
.sp-talk__who label { position: relative; cursor: pointer; }
.sp-talk__who input { position: absolute; opacity: 0; pointer-events: none; }
.sp-talk__who span { display: inline-block; padding: 8px 14px; border-radius: 999px; background: #f2f2f2; font-size: 13.5px; color: #101012; transition: background .2s, color .2s; }
.sp-talk__who label:hover span { background: #e9e9e9; }
.sp-talk__who input:checked + span { background: #101012; color: #fff; }
.sp-talk__who input:focus-visible + span { outline: 2px solid #101012; outline-offset: 2px; }
.sp-talk__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sp-talk form > label, .sp-talk__row label { display: grid; gap: 6px; }
.sp-talk label > span { font-size: 12px; color: rgba(16,16,18,.55); }
.sp-talk label em { font-style: normal; color: rgba(16,16,18,.35); margin-left: 4px; }
.sp-talk input[type=text], .sp-talk input[type=email], .sp-talk textarea {
  width: 100%; box-sizing: border-box; border: 0; border-radius: 10px; background: #f4f4f4; padding: 12px 14px;
  font: 400 15px/1.4 var(--font, inherit); color: #101012; }
.sp-talk textarea { resize: vertical; min-height: 96px; }
.sp-talk input:focus, .sp-talk textarea:focus { outline: none; background: #fff; box-shadow: 0 0 0 1.5px #101012; }
.sp-talk input::placeholder { color: rgba(16,16,18,.32); }
.sp-talk__send { justify-self: start; margin-top: 6px; height: 44px; padding: 0 26px; border: 0; border-radius: 999px; background: #101012; color: #fff; font: 500 15px/1 var(--font, inherit); cursor: pointer; }
.sp-talk__send:disabled { opacity: .5; cursor: default; }
.sp-talk .sp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 560px) {
  .sp-talk { padding: 0; place-items: end stretch; }
  .sp-talk__sheet { width: 100%; border-radius: 22px 22px 0 0; padding: 30px 22px 26px; max-height: 92vh; }
  .sp-talk__row { grid-template-columns: 1fr; }
}

/* ═══ v0.17.1 · LA OBRA QUE LLEGA. No los nombres de los artistas: la ficha. Entra una desde el Desk
   del artista, se toca, y se abre entera: imagen, datos, texto curatorial, papeles y el precio menor
   que acepta el artista (sólo lo ve la casa). Todo sobre el gris de la página; la ficha es el objeto. ═══ */
.sp-arr { position: relative; min-height: 380px; display: grid; place-items: center; }
.sp-arr__tile {
  position: absolute; left: 50%; top: 50%; width: 132px; border-radius: 10px; overflow: visible; background: #fff;
  box-shadow: 0 1px 2px rgba(16,16,18,.06), 0 14px 32px rgba(16,16,18,.12);
  transform: translate(calc(-50% - 360px), -50%) rotate(-6deg); opacity: 0;
  transition: transform 1.1s cubic-bezier(.2,.8,.25,1), opacity .5s ease;
}
.sp-arr__tile b { display: block; height: 104px; border-radius: 10px 10px 0 0; background: linear-gradient(160deg, #eef4f0 0%, #d3e4db 55%, #b9d3c6 100%); }
.sp-arr__tile span { display: grid; gap: 2px; padding: 9px 11px 11px; }
.sp-arr__tile em { font-size: 13px; font-weight: 600; color: #101012; }
.sp-arr__tile small { font-size: 10.5px; color: rgba(16,16,18,.55); }
.sp-arr__new { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: 11px; color: rgba(16,16,18,.5); opacity: 0; transition: opacity .5s ease .8s; }
.sp-arr__tap { position: absolute; left: 50%; top: 44%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(16,16,18,.12); opacity: 0; transform: scale(.4); }
.is-coming .sp-arr__tile { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
.is-coming .sp-arr__new { opacity: 1; }
.is-tap .sp-arr__tap { animation: sp-arr-tap .55s ease-out forwards; }
@keyframes sp-arr-tap { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
.is-open .sp-arr__tile { opacity: 0; transform: translate(-50%, -50%) scale(1.6); transition: transform .6s cubic-bezier(.2,.8,.25,1), opacity .35s ease; }

.sp-arr__sheet {
  position: relative; width: min(760px, 100%); box-sizing: border-box; display: grid; grid-template-columns: 250px 1fr; gap: 30px;
  padding: 26px; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(16,16,18,.05), 0 30px 70px rgba(16,16,18,.12);
  opacity: 0; transform: scale(.2); transform-origin: 50% 50%;
  transition: transform .75s cubic-bezier(.2,.8,.25,1), opacity .4s ease;
}
.is-open .sp-arr__sheet { opacity: 1; transform: none; }
.sp-arr__img { border-radius: 10px; background: linear-gradient(160deg, #eef4f0 0%, #d3e4db 50%, #aecbbd 100%); min-height: 300px; }
.sp-arr__body { display: grid; align-content: start; gap: 16px; min-width: 0; }
.sp-arr__part { opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .6s var(--ease); }
.is-open .sp-arr__part { opacity: 1; transform: none; transition-delay: calc(.55s + var(--k) * .22s); }
.sp-arr__body h4 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: #101012; }
.sp-arr__body header p { margin: 4px 0 0; font-size: 13.5px; color: rgba(16,16,18,.55); }
.sp-arr__facts { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 6px 22px; margin: 0; }
.sp-arr__facts dt { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(16,16,18,.42); font-weight: 600; }
.sp-arr__facts dd { margin: 3px 0 0; font-size: 13px; color: #101012; }
.sp-arr__text { margin: 0; font-size: 13.5px; line-height: 1.6; color: rgba(16,16,18,.72); }
.sp-arr__docs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sp-arr__docs li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: #f3f3f3; font-size: 12px; color: #101012; }
.sp-arr__docs li::before { content: ""; width: 12px; height: 12px; background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101012' stroke-width='1.8'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3C/svg%3E"); opacity: .6; }
.sp-arr__floor { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(16,16,18,.1); }
.sp-arr__floor span { font-size: 12.5px; color: rgba(16,16,18,.6); }
.sp-arr__floor small { font-size: 11.5px; color: rgba(16,16,18,.4); }
.sp-arr__floor b { font-size: 17px; font-weight: 600; color: #101012; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .sp-arr__sheet { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
  .sp-arr__img { min-height: 180px; }
  .sp-arr__facts { grid-template-columns: repeat(2, auto); }
  .sp-arr__tile { transform: translate(calc(-50% - 160px), -50%) rotate(-6deg); }
}

/* ═══ v0.18 · TRES ESCENAS MÁS: vender, el viaje y la memoria. Mismas reglas: sin caja, objetos con
   su sombra sobre el gris, la obra es la ficha verde, y la tipografía hace el resto. ═══ */

/* ── Vender ── */
.sp-sell { position: relative; display: grid; grid-template-columns: 230px 110px 1fr; align-items: center; min-height: 400px; }
.sp-sell__home { display: grid; gap: 16px; justify-items: start; opacity: 0; transform: translateX(-12px); transition: opacity .6s ease, transform .8s var(--ease); }
.is-a .sp-sell__home { opacity: 1; transform: none; }
.sp-sell__zone { margin: 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: rgba(16,16,18,.4); }
.sp-sell__tile { width: 150px; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(16,16,18,.06), 0 14px 30px rgba(16,16,18,.1); overflow: hidden; }
.sp-sell__tile b { display: block; height: 112px; background: linear-gradient(160deg, #eef4f0 0%, #d3e4db 55%, #b9d3c6 100%); }
.sp-sell__tile span { display: grid; gap: 2px; padding: 9px 11px 11px; }
.sp-sell__tile em { font-size: 13px; font-weight: 600; color: #101012; }
.sp-sell__tile small { font-size: 10.5px; color: rgba(16,16,18,.55); }
.sp-sell__floor { display: grid; gap: 5px; }
.sp-sell__floor p { display: flex; align-items: center; gap: 7px; margin: 0; padding: 8px 12px; border-radius: 999px; background: #101012; color: #fff; font-size: 12px; }
.sp-sell__floor p b { font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-sell__floor svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 1.8; }
.sp-sell__floor small { font-size: 11.5px; color: rgba(16,16,18,.5); padding-left: 4px; }
.sp-sell__lines { width: 100%; height: 100%; overflow: visible; }
.sp-sell__lines path { fill: none; stroke: rgba(16,16,18,.22); stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1); }
.is-b .sp-sell__lines path { stroke-dashoffset: 0; }
.is-b .sp-sell__lb { transition-delay: .25s; }
.sp-sell__threads { display: grid; grid-template-rows: 1fr 1fr; gap: 26px; height: 100%; align-content: stretch; }
.sp-sell__thread { position: relative; align-self: center; }
.sp-sell__card { box-sizing: border-box; width: 100%; max-width: 380px; padding: 16px 18px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(16,16,18,.06), 0 14px 32px rgba(16,16,18,.09);
  display: grid; gap: 6px; opacity: 0; transform: translateX(-14px); transition: opacity .6s ease, transform .8s var(--ease), filter .6s ease; }
.is-b .sp-sell__card { opacity: 1; transform: none; transition-delay: .7s; }
.is-b .sp-sell__thread--b .sp-sell__card { transition-delay: .95s; }
.sp-sell__card small { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: rgba(16,16,18,.42); }
.sp-sell__card strong { font-size: 14.5px; font-weight: 600; color: #101012; }
.sp-sell__card i { font-style: italic; }
.sp-sell__card p { margin: 0; font-size: 13px; color: rgba(16,16,18,.65); }
.sp-sell__card p b { color: #101012; font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-sell__card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 5px; }
.sp-sell__card li { font-size: 11.5px; padding: 4px 9px; border-radius: 999px; background: #f2f2f2; color: #101012; }
.sp-sell__card em { font-style: normal; font-size: 11px; color: rgba(16,16,18,.45); }
.sp-sell__card--v2 { position: absolute; left: 0; top: 0; }
.is-b .sp-sell__card--v2 { opacity: 0; transform: translate(-6px, -14px); }
.is-c .sp-sell__card--v2 { opacity: 1; transform: none; transition-delay: 0s; }
.is-c .sp-sell__card--v1 { transform: translate(14px, 14px) scale(.97); filter: saturate(.6); opacity: .55; transition-delay: 0s; }
.sp-sell__card--v2 em { color: #101012; }

/* ── El viaje ── */
.sp-trip { position: relative; padding: 10px 0 0; }
.sp-scene--trip { --at: 3%; }
.sp-trip__ends { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; color: #101012; }
.sp-trip__ends span { display: grid; gap: 2px; }
.sp-trip__ends span:last-child { text-align: right; }
.sp-trip__ends small { font-size: 11.5px; font-weight: 400; color: rgba(16,16,18,.5); }
.sp-trip__track { position: relative; height: 230px; }
.sp-trip__line { position: absolute; left: 0; right: 0; top: 70px; height: 2px; border-radius: 2px; background: rgba(16,16,18,.12); }
.sp-trip__line::before, .sp-trip__line::after { content: ""; position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #101012; }
.sp-trip__line::before { left: -2px; } .sp-trip__line::after { right: -2px; }
.sp-trip__line b { position: absolute; left: 0; top: 0; bottom: 0; width: var(--at); border-radius: 2px; background: #101012; transition: width 1s cubic-bezier(.45,0,.25,1); }
.sp-trip__stop { position: absolute; left: var(--x); top: 70px; }
.sp-trip__stop > i { position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #f4f4f4; box-shadow: inset 0 0 0 1.5px rgba(16,16,18,.35); transition: background .4s, box-shadow .4s; }
.sp-trip__stop.is-done > i { background: #101012; box-shadow: none; }
.sp-trip__doc { position: absolute; left: 0; top: 26px; transform: translate(-50%, 10px); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 9px; background: #fff; box-shadow: 0 1px 2px rgba(16,16,18,.06), 0 10px 22px rgba(16,16,18,.08); font-size: 12px; color: #101012; opacity: 0;
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.9,.25,1.2); }
.sp-trip__doc::before { content: ""; width: 12px; height: 12px; background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101012' stroke-width='1.8'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3C/svg%3E"); opacity: .6; }
.sp-trip__stop.is-done .sp-trip__doc { opacity: 1; transform: translate(-50%, 0); }
.sp-trip__stop.is-done .sp-trip__doc::after { content: ""; position: absolute; left: 50%; top: -20px; width: 1px; height: 18px; background: rgba(16,16,18,.18); }
.sp-trip__work { position: absolute; left: var(--at); top: 70px; transform: translate(-50%, calc(-100% - 12px)); display: grid; justify-items: center; gap: 4px; opacity: 0; transition: left 1s cubic-bezier(.45,0,.25,1), opacity .5s ease; }
.is-on .sp-trip__work { opacity: 1; }
.sp-trip__work b { width: 42px; height: 34px; border-radius: 6px; background: linear-gradient(160deg, #eef4f0 0%, #d3e4db 55%, #b9d3c6 100%); box-shadow: 0 1px 2px rgba(16,16,18,.08), 0 8px 18px rgba(16,16,18,.12); }
.sp-trip__work em { font-size: 10.5px; font-weight: 600; color: #101012; white-space: nowrap; }
.sp-trip__warn { position: absolute; left: 62%; top: 150px; transform: translateX(-50%); margin: 0; height: 34px; }
.sp-trip__warn span { position: absolute; left: 50%; top: 0; transform: translate(-50%, 6px); white-space: nowrap; padding: 8px 14px; border-radius: 999px; font-size: 12.5px; opacity: 0; transition: opacity .5s ease, transform .5s var(--ease); }
.sp-trip__warn span:first-child { background: #fbefe4; color: var(--amber, #b85c1a); }
.sp-trip__warn span:last-child { background: #fff; color: #101012; box-shadow: 0 1px 2px rgba(16,16,18,.06), 0 8px 18px rgba(16,16,18,.08); }
.is-warn .sp-trip__warn span:first-child { opacity: 1; transform: translate(-50%, 0); }
.is-insured .sp-trip__warn span:first-child { opacity: 0; }
.is-warn.is-insured .sp-trip__warn span:last-child { opacity: 1; transform: translate(-50%, 0); }
.sp-trip__stop.is-ins .sp-trip__doc { top: 26px; }
.is-warn:not(.is-insured) .sp-trip__stop.is-ins > i { box-shadow: inset 0 0 0 1.5px var(--amber, #b85c1a); animation: sp-trip-pulse 1s ease infinite; }
@keyframes sp-trip-pulse { 50% { box-shadow: inset 0 0 0 1.5px var(--amber, #b85c1a), 0 0 0 6px rgba(184,92,26,.12); } }
.sp-trip__desk { display: flex; align-items: baseline; gap: 6px; margin: 0; padding-top: 14px; border-top: 1px solid rgba(16,16,18,.1); font-size: 13px; color: #101012; }
.sp-trip__desk span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: rgba(16,16,18,.42); margin-right: 8px; }
.sp-trip__desk b { font-weight: 600; }
.is-arrived .sp-trip__desk b { color: var(--verde); }
.sp-trip.is-warn .sp-trip__stop.is-ins .sp-trip__doc { transition-delay: 0s; }

/* ── La memoria ── */
.sp-mem { max-width: 640px; margin: 0 auto; display: grid; gap: 18px; }
.sp-mem__when { margin: 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: rgba(16,16,18,.4); }
.sp-mem__ask { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(16,16,18,.06), 0 14px 32px rgba(16,16,18,.08);
  font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: #101012; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .6s var(--ease); }
.is-asking .sp-mem__ask { opacity: 1; transform: none; }
.sp-mem__ask svg { width: 18px; height: 18px; flex: none; fill: none; stroke: rgba(16,16,18,.45); stroke-width: 1.8; stroke-linecap: round; }
.sp-mem__caret { width: 2px; height: 20px; background: #101012; animation: sp-caret 1s steps(1) infinite; }
.is-found .sp-mem__caret { opacity: 0; animation: none; }
.sp-mem__trail { margin: 0; padding: 0 0 0 18px; list-style: none; display: grid; gap: 4px; border-left: 1px solid rgba(16,16,18,.12); margin-left: 18px; }
.sp-mem__trail li { position: relative; display: grid; grid-template-columns: 96px 1fr auto; align-items: baseline; gap: 4px 14px; padding: 10px 14px; border-radius: 12px;
  font-size: 13px; color: rgba(16,16,18,.72); opacity: 0; transform: translateX(-8px); transition: opacity .5s ease, transform .6s var(--ease), background .5s, box-shadow .5s; }
.sp-mem__trail li::before { content: ""; position: absolute; left: -23px; top: 16px; width: 9px; height: 9px; border-radius: 50%; background: #f4f4f4; box-shadow: inset 0 0 0 1.5px rgba(16,16,18,.3); }
.is-trail .sp-mem__trail li { opacity: 1; transform: none; transition-delay: calc(var(--k) * .18s); }
.sp-mem__trail time { font-size: 12px; color: rgba(16,16,18,.45); font-variant-numeric: tabular-nums; }
.sp-mem__trail em { font-style: normal; font-size: 12px; color: rgba(16,16,18,.55); }
.is-found .sp-mem__trail li { opacity: .35; transition-delay: 0s; }
.is-found .sp-mem__trail li.is-hit { opacity: 1; background: #fff; box-shadow: 0 1px 2px rgba(16,16,18,.06), 0 14px 30px rgba(16,16,18,.1); color: #101012; }
.is-found .sp-mem__trail li.is-hit::before { background: #101012; box-shadow: none; }
.is-found .sp-mem__trail li.is-hit em { color: #101012; font-weight: 600; }
.sp-mem__paper { grid-column: 2 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 6px 11px; border-radius: 999px; background: #f2f2f2; font-size: 12px; font-weight: 500; color: #101012;
  max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; overflow: hidden; opacity: 0; transition: all .5s var(--ease) .3s; }
.sp-mem__paper::before { content: ""; width: 12px; height: 12px; background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101012' stroke-width='1.8'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3C/svg%3E"); opacity: .6; }
.is-found .sp-mem__paper { max-height: 30px; padding-top: 6px; padding-bottom: 6px; margin-top: 6px; opacity: 1; }

@media (max-width: 760px) {
  .sp-sell { grid-template-columns: 1fr; gap: 18px; min-height: 0; }
  .sp-sell__lines { display: none; }
  .sp-sell__threads { grid-template-rows: auto auto; gap: 34px; }
  .sp-trip__doc { font-size: 10.5px; padding: 5px 8px; }
  .sp-trip__stop:nth-child(odd) .sp-trip__doc { top: 64px; }
  .sp-mem__trail li { grid-template-columns: 1fr; }
}
.is-c .sp-sell__card--v1 { transform: translate(16px, 44px) scale(.96); opacity: .6; }
.is-c .sp-sell__card--v1 em { color: #101012; }
.sp-scene--trip .sp-trip { width: 100%; max-width: none; margin: 0; }

/* v0.19 · el capítulo «Home» abre la portada: el gráfico de las herramientas va en los dos
   sentidos. Lo que llega entra hacia la espina; la web sale de ella, repetida para que se note. */
.sp-proof.is-on .sp-fold__dot--out { animation: sp-outward 4.5s cubic-bezier(.45,0,.35,1) infinite; animation-delay: 3.4s; background: #101012; }
@keyframes sp-outward {
  0%   { left: 50%; top: 50%; opacity: 0; transform: scale(.4); }
  6%   { opacity: .9; transform: scale(1); }
  40%  { left: var(--x); top: var(--y); opacity: .9; }
  46%  { left: var(--x); top: var(--y); opacity: 0; }
  100% { left: var(--x); top: var(--y); opacity: 0; }
}

/* v0.19.1 · Lo que cubre: todo lo que hace, sin complejos, en una franja sobria al final. */
.sp-covers { max-width: 880px; }
.sp-covers__list { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 34px; text-align: left; }
.sp-covers__list li { display: grid; gap: 4px; padding: 16px 0 18px; border-top: 1px solid rgba(16,16,18,.12); }
.sp-covers__list b { font-size: 14.5px; font-weight: 600; color: #101012; letter-spacing: -.01em; }
.sp-covers__list span { font-size: 13px; line-height: 1.5; color: rgba(16,16,18,.6); }
@media (max-width: 760px) { .sp-covers__list { grid-template-columns: 1fr 1fr; gap: 0 18px; } }
@media (max-width: 460px) { .sp-covers__list { grid-template-columns: 1fr; } }
.sp-covers__list { box-sizing: border-box; width: min(880px, calc(100vw - 44px)); margin-left: 50%; transform: translateX(-50%); }

/* v0.19.2 · la cartela, centrada como el resto de la página */
.sp-label { margin: 26px auto 0; text-align: center; max-width: 560px; }
@media (min-width: 761px) { .sp-sell { grid-template-columns: 230px 110px 380px; justify-content: center; } }
.sp-trip__desk { justify-content: center; }

/* v0.19.3 · Volver arriba: un círculo blanco abajo a la derecha, sólo cuando ya has bajado. */
.sp-up { position: fixed; right: 24px; bottom: 24px; z-index: 150; width: 46px; height: 46px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: #fff; box-shadow: 0 1px 2px rgba(16,16,18,.08), 0 10px 28px rgba(16,16,18,.14);
  opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.25,1), box-shadow .2s; }
.sp-up.is-on { opacity: 1; transform: none; pointer-events: auto; }
.sp-up:hover { box-shadow: 0 1px 2px rgba(16,16,18,.08), 0 14px 34px rgba(16,16,18,.2); }
.sp-up svg { width: 18px; height: 18px; fill: none; stroke: #101012; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sp-up:focus-visible { outline: 2px solid #101012; outline-offset: 3px; }
.is-talking .sp-up { opacity: 0; pointer-events: none; }
@media (max-width: 560px) { .sp-up { right: 16px; bottom: 16px; width: 42px; height: 42px; } }

/* v0.19.4 · pastillas de «I am» más ligeras: sin anillo alrededor, más pequeñas, en una línea */
.sp-talk__who { gap: 6px; }
.sp-talk__who span { padding: 6px 12px; font-size: 13px; }
.sp-talk__who input:focus-visible + span { outline: none; }
.sp-talk__who input:focus-visible:not(:checked) + span { background: #e4e4e4; }

/* ═══ v0.20 · FOR ARTISTS: tres escenas. El Desk (añadir una obra), el sí (la invitación a
   viajar) y lo que se mueve (dónde está, dónde ha estado, una sola carta). ═══ */
.sp-dk { display: grid; grid-template-columns: 330px 300px; gap: 40px; justify-content: center; align-items: center; min-height: 340px; }
.sp-dk__desk, .sp-dk__form { opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .7s var(--ease); }
.is-a .sp-dk__desk { opacity: 1; transform: none; }
.is-drop .sp-dk__form { opacity: 1; transform: none; transition-delay: .4s; }
.sp-dk__who { margin: 0 0 18px; font-size: 13px; color: rgba(16,16,18,.55); }
.sp-dk__who b { color: #101012; font-weight: 600; }
.sp-dk__lab, .sp-mv__lab { margin: 0 0 10px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: rgba(16,16,18,.42); }
.sp-dk__grid { display: grid; grid-template-columns: repeat(3, 96px); gap: 12px; }
.sp-dk__w { position: relative; display: grid; gap: 6px; }
.sp-dk__w b { display: block; height: 96px; border-radius: 9px; background: linear-gradient(160deg, #f1f5f2, var(--g, #dfe9e3)); box-shadow: 0 1px 2px rgba(16,16,18,.05), 0 8px 18px rgba(16,16,18,.07); }
.sp-dk__w em { font-size: 11.5px; font-weight: 600; color: #101012; }
.sp-dk__w--new b { background: transparent; box-shadow: none; border: 1.4px dashed rgba(16,16,18,.25); box-sizing: border-box; transition: background .6s ease, border-color .6s ease, box-shadow .6s ease; }
.sp-dk__w--new em { opacity: 0; transition: opacity .4s ease .5s; }
.sp-dk__w--new i { position: absolute; left: 0; right: 0; top: 38px; text-align: center; font-style: normal; font-size: 11px; color: rgba(16,16,18,.5); transition: opacity .3s ease; }
.is-drop .sp-dk__w--new b { background: linear-gradient(160deg, #eef4f0 0%, #d3e4db 55%, #b9d3c6 100%); border-color: transparent; box-shadow: 0 1px 2px rgba(16,16,18,.05), 0 8px 18px rgba(16,16,18,.08); }
.is-drop .sp-dk__w--new i { opacity: 0; }
.is-drop .sp-dk__w--new em { opacity: 1; }
.sp-dk__form { padding: 18px 20px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(16,16,18,.06), 0 16px 36px rgba(16,16,18,.09); display: grid; gap: 12px; }
.sp-dk__f { margin: 0; display: grid; gap: 3px; padding-bottom: 10px; border-bottom: 1px solid rgba(16,16,18,.08); }
.sp-dk__f span { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(16,16,18,.42); font-weight: 600; }
.sp-dk__f b { font-size: 14px; font-weight: 500; color: #101012; min-height: 19px; opacity: 0; transform: translateX(-4px); transition: opacity .4s ease, transform .5s var(--ease); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.is-fill .sp-dk__f b { opacity: 1; transform: none; transition-delay: calc(var(--k) * .5s); }
.sp-dk__f small { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 400; color: rgba(16,16,18,.5); }
.sp-dk__f small svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; }
.sp-dk__send { position: relative; margin: 2px 0 0; height: 38px; }
.sp-dk__btn, .sp-dk__sent { position: absolute; left: 0; top: 0; height: 38px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px; font-size: 13px; transition: opacity .4s ease, transform .25s ease; }
.sp-dk__btn { background: #101012; color: #fff; font-weight: 500; }
.sp-dk__sent { background: var(--menta); color: #101012; opacity: 0; }
.is-press .sp-dk__btn { transform: scale(.95); }
.is-sent .sp-dk__btn { opacity: 0; }
.is-sent .sp-dk__sent { opacity: 1; }

.sp-yes { display: grid; place-items: center; min-height: 380px; }
.sp-yes__card { width: min(420px, 100%); box-sizing: border-box; padding: 22px 24px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(16,16,18,.06), 0 24px 56px rgba(16,16,18,.12);
  opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .8s var(--ease); }
.is-a .sp-yes__card { opacity: 1; transform: none; }
.sp-yes__k { margin: 0 0 14px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: rgba(16,16,18,.45); }
.sp-yes__head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.sp-yes__head b { width: 52px; height: 52px; border-radius: 8px; background: linear-gradient(160deg, #eef4f0 0%, #d3e4db 55%, #b9d3c6 100%); flex: none; }
.sp-yes__head span { display: grid; gap: 2px; }
.sp-yes__head strong { font-size: 16px; font-weight: 600; color: #101012; }
.sp-yes__head small { font-size: 12px; color: rgba(16,16,18,.55); }
.sp-yes dl { margin: 0 0 18px; display: grid; gap: 8px; }
.sp-yes dl div { display: grid; grid-template-columns: 70px 1fr; font-size: 13px; }
.sp-yes dt { color: rgba(16,16,18,.45); }
.sp-yes dd { margin: 0; color: #101012; }
.sp-yes dd u { text-underline-offset: 3px; text-decoration-color: rgba(16,16,18,.3); }
.sp-yes__act { position: relative; display: flex; gap: 8px; justify-content: flex-end; transition: opacity .4s ease, max-height .5s ease; max-height: 50px; }
.sp-yes__no, .sp-yes__ok { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; font-size: 13px; }
.sp-yes__no { color: rgba(16,16,18,.6); background: #f2f2f2; }
.sp-yes__ok { color: #fff; background: #101012; font-weight: 500; transition: transform .2s ease; }
.sp-yes__tap { position: absolute; right: 60px; top: 19px; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: rgba(255,255,255,.5); opacity: 0; }
.is-tap .sp-yes__ok { transform: scale(.95); }
.is-tap .sp-yes__tap { animation: sp-arr-tap .5s ease-out forwards; }
.is-said .sp-yes__act { opacity: 0; max-height: 0; }
.sp-yes__done { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #101012; max-height: 0; opacity: 0; overflow: hidden; transition: opacity .5s ease .3s, max-height .5s ease; }
.sp-yes__done span { width: 20px; height: 20px; border-radius: 50%; background: var(--verde); color: #fff; font-size: 11px; display: grid; place-items: center; }
.sp-yes__done em { margin-left: auto; font-style: normal; font-size: 12px; padding: 6px 11px; border-radius: 999px; background: #f2f2f2; }
.is-said .sp-yes__done { opacity: 1; max-height: 40px; }

.sp-mv { width: min(520px, 100%); margin: 0 auto; }
.sp-mv > * { opacity: 0; transition: opacity .6s ease; }
.is-a .sp-mv > * { opacity: 1; }
.sp-mv__row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; margin-bottom: 8px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(16,16,18,.05), 0 8px 20px rgba(16,16,18,.06); }
.sp-mv__row b { width: 44px; height: 44px; border-radius: 7px; background: linear-gradient(160deg, #f1f5f2, var(--g, #c9ddd2)); }
.sp-mv__row--main b { background: linear-gradient(160deg, #eef4f0 0%, #d3e4db 55%, #b9d3c6 100%); }
.sp-mv__row span { display: grid; gap: 2px; }
.sp-mv__row strong { font-size: 14px; font-weight: 600; color: #101012; }
.sp-mv__row small { font-size: 12px; color: rgba(16,16,18,.5); }
.sp-mv__row em { font-style: normal; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: #101012; color: #fff; transition: opacity .18s ease; white-space: nowrap; }
.sp-mv__row em.is-quiet { background: #f2f2f2; color: rgba(16,16,18,.55); font-weight: 500; }
.sp-mv__row em.is-swap { opacity: 0; }
.is-t3 .sp-mv__row--main em { background: var(--verde); }
.sp-mv__lab { margin-top: 22px !important; }
.sp-mv__trail { margin: 0; padding: 0 0 0 18px; list-style: none; border-left: 1px solid rgba(16,16,18,.14); margin-left: 6px; display: grid; gap: 10px; }
.sp-mv__trail li { position: relative; font-size: 13px; color: #101012; opacity: 0; transform: translateX(-6px); transition: opacity .5s ease, transform .6s var(--ease); }
.sp-mv__trail li::before { content: ""; position: absolute; left: -23px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: #101012; }
.sp-mv__trail time { display: inline-block; width: 58px; font-size: 12px; color: rgba(16,16,18,.45); font-variant-numeric: tabular-nums; }
.is-t1 .sp-mv__trail li:nth-child(1), .is-t2 .sp-mv__trail li:nth-child(2), .is-t3 .sp-mv__trail li:nth-child(3) { opacity: 1; transform: none; }
.sp-mv__letter { display: flex; align-items: center; gap: 10px; margin: 22px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--menta); font-size: 13px; color: #101012; }
.sp-mv > .sp-mv__letter { opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .7s var(--ease); }
.is-letter .sp-mv > .sp-mv__letter, .sp-scene--moving.is-letter .sp-mv__letter { opacity: 1; transform: none; }
.sp-mv__letter svg { width: 18px; height: 18px; flex: none; fill: none; stroke: #101012; stroke-width: 1.6; }
@media (max-width: 760px) {
  .sp-dk { grid-template-columns: 1fr; gap: 20px; }
  .sp-dk__grid { grid-template-columns: repeat(3, 1fr); }
}

/* v0.20.1 · el menú empieza por volver al principio: la espina, el resumen */
.sp-nav__panel a.sp-nav__home { font-size: 15px; font-weight: 600; padding: 0 0 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(16,16,18,.1); }
.sp-nav__panel a.sp-nav__home span { font-weight: 400; color: rgba(16,16,18,.5); }
.sp-nav__home + .sp-nav__label { margin-top: 12px; }

/* v0.21 · lo legal: dos enlaces discretos en el pie y una línea bajo el botón de la hoja */
.sp-legal-links { display: inline-flex; gap: 16px; margin-right: 18px; }
.sp-legal-links a { color: inherit; text-decoration: none; opacity: .75; }
.sp-legal-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.sp-talk__legal { margin: 2px 0 0; font-size: 11.5px; line-height: 1.5; color: rgba(16,16,18,.5); }
.sp-talk__legal a { color: inherit; text-underline-offset: 2px; }

/* ═══ v0.22 · FOR INSTITUTIONS: el registro de dos direcciones, el fichero y la casa que se empaqueta. ═══ */

/* ── El registro ── */
.sp-ldg { position: relative; display: grid; grid-template-columns: 1fr 90px 1fr; gap: 0; padding: 38px 0 40px; }
.sp-ldg__count { position: absolute; left: 0; right: 0; top: 0; margin: 0; display: flex; justify-content: center; gap: 34px; font-size: 12px; color: rgba(16,16,18,.5); }
.sp-ldg__count b { font-size: 18px; font-weight: 600; color: #101012; font-variant-numeric: tabular-nums; margin: 0 1px 0 6px; }
.sp-ldg__lab { margin: 0 0 12px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: rgba(16,16,18,.42); }
.sp-ldg__side--in { text-align: right; }
.sp-ldg__side--in .sp-ldg__row { justify-items: end; }
.sp-ldg__axis { position: relative; }
.sp-ldg__axis::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; margin-left: -.75px; background: #101012; transform: scaleY(0); transform-origin: top; transition: transform .8s var(--ease); }
.is-a .sp-ldg__axis::before { transform: none; }
.sp-ldg__axis span { position: absolute; left: 50%; top: -8px; transform: translate(-50%, -100%); white-space: nowrap; font-size: 11px; font-weight: 600; color: #101012; opacity: 0; transition: opacity .6s ease .5s; }
.is-a .sp-ldg__axis span { opacity: 1; }
.sp-ldg__row { display: grid; gap: 6px; margin-bottom: 14px; min-height: 70px; align-content: start; }
.sp-ldg__w { display: inline-flex; align-items: center; gap: 10px; opacity: 0; transition: transform 1s cubic-bezier(.3,.7,.25,1), opacity .5s ease; }
.sp-ldg__side--out .sp-ldg__w { transform: translateX(-120px); }
.sp-ldg__side--in .sp-ldg__w { transform: translateX(-60px); flex-direction: row-reverse; }
.sp-ldg__w b { width: 38px; height: 38px; border-radius: 6px; flex: none; background: linear-gradient(160deg, #f1f5f2, var(--g, #c9ddd2)); box-shadow: 0 1px 2px rgba(16,16,18,.06), 0 6px 14px rgba(16,16,18,.08); position: relative; }
.sp-ldg__side--out .sp-ldg__row:first-of-type .sp-ldg__w b { background: linear-gradient(160deg, #eef4f0 0%, #d3e4db 55%, #b9d3c6 100%); }
.sp-ldg__w b::after { content: ""; position: absolute; right: -3px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 2px #f4f4f4; transform: scale(0); transition: transform .4s cubic-bezier(.2,.9,.25,1.3); }
.sp-ldg__w span { display: grid; gap: 1px; }
.sp-ldg__w em { font-size: 13px; font-weight: 600; color: #101012; }
.sp-ldg__w small { font-size: 11px; color: rgba(16,16,18,.5); }
.is-go .sp-ldg__w { opacity: 1; transform: none; }
.sp-ldg__tags { margin: 0; display: flex; gap: 4px; flex-wrap: wrap; }
.sp-ldg__side--in .sp-ldg__tags { justify-content: flex-end; }
.sp-ldg__tags span { font-size: 10.5px; padding: 3px 8px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px rgba(16,16,18,.08); color: #101012; opacity: 0; transform: translateY(-4px); transition: opacity .35s ease, transform .4s var(--ease); }
.is-tag .sp-ldg__tags span { opacity: 1; transform: none; }
.is-tag .sp-ldg__tags span:nth-child(2) { transition-delay: .15s; } .is-tag .sp-ldg__tags span:nth-child(3) { transition-delay: .3s; }
.is-ok .sp-ldg__w b::after { transform: scale(1); }
.sp-ldg__end { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; text-align: center; font-size: 14px; font-weight: 600; color: #101012; opacity: 0; transition: opacity .6s ease; }
.is-end .sp-ldg__end { opacity: 1; }
.sp-ldg__side { padding: 0 22px; }

/* ── El fichero ── */
.sp-idx { width: min(480px, 100%); margin: 0 auto; display: grid; gap: 22px; }
.sp-idx__ask { display: grid; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid rgba(16,16,18,.14); opacity: 0; transition: opacity .6s ease; }
.is-a .sp-idx__ask { opacity: 1; }
.sp-idx__ask small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: rgba(16,16,18,.42); }
.sp-idx__ask strong { font-size: 19px; font-weight: 600; letter-spacing: -.015em; color: #101012; }
.sp-idx__drawer { position: relative; height: 210px; perspective: 900px; }
.sp-idx__card {
  position: absolute; left: 0; right: 0; top: calc(var(--k) * 7px); box-sizing: border-box; height: 150px; padding: 14px 18px; border-radius: 8px;
  background: #fffdf8; box-shadow: 0 1px 2px rgba(16,16,18,.07), 0 10px 26px rgba(16,16,18,.08); border-top: 1px solid rgba(16,16,18,.05);
  display: grid; align-content: start; gap: 6px; z-index: calc(10 - var(--k)); transform-origin: 50% 100%;
  transition: transform .55s cubic-bezier(.5,0,.3,1), opacity .45s ease; opacity: 0;
}
.is-a .sp-idx__card { opacity: 1; }
.sp-idx__card::before { content: ""; position: absolute; left: 18px; right: 18px; top: 44px; height: 1px; background: rgba(184,92,26,.18); }
.sp-idx__card small { font-size: 12px; color: rgba(16,16,18,.62); }
.sp-idx__card span { font-size: 11px; color: rgba(16,16,18,.42); font-variant-numeric: tabular-nums; }
.sp-idx__card i { font-style: italic; }
.sp-idx__card.is-flip { transform: translateY(-60px) rotateX(78deg); opacity: 0; }
.sp-idx__card--hit strong { font-size: 15px; font-weight: 600; color: #101012; margin-top: 8px; opacity: 0; transition: opacity .5s ease; }
.sp-idx__card--hit p { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; opacity: 0; transition: opacity .5s ease .2s; }
.sp-idx__card--hit p span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: #f0eee8; font-size: 11.5px; color: #101012; }
.is-found .sp-idx__card--hit { box-shadow: 0 1px 2px rgba(16,16,18,.07), 0 20px 44px rgba(16,16,18,.14); }
.is-found .sp-idx__card--hit strong, .is-found .sp-idx__card--hit p { opacity: 1; }

/* ── La casa que se empaqueta ── */
.sp-pack { position: relative; display: grid; grid-template-columns: 200px 1fr 200px; align-items: center; gap: 20px; min-height: 300px; padding-bottom: 30px; }
.sp-pack__house { display: grid; justify-items: center; gap: 12px; }
.sp-pack__house > p { margin: 0; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: rgba(16,16,18,.42); }
.sp-pack__grid { position: relative; width: 178px; height: 130px; display: grid; grid-template-columns: repeat(4, 34px); grid-auto-rows: 34px; gap: 14px; }
.sp-pack__lines { position: absolute; inset: 0; width: 178px; height: 130px; overflow: visible; }
.sp-pack__lines path { fill: none; stroke: rgba(16,16,18,.18); stroke-width: 1.2; stroke-dasharray: 400; stroke-dashoffset: 0; transition: stroke-dashoffset 1s ease, opacity .5s ease; }
.sp-pack__t { position: relative; z-index: 1; display: block; transition: transform .7s cubic-bezier(.5,0,.3,1), opacity .5s ease; transition-delay: calc(var(--i) * 45ms); }
.sp-pack__t--w { border-radius: 6px; background: linear-gradient(160deg, #eef4f0 0%, #d3e4db 55%, #b9d3c6 100%); box-shadow: 0 1px 2px rgba(16,16,18,.06), 0 5px 12px rgba(16,16,18,.07); }
.sp-pack__t--p { border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.4px rgba(16,16,18,.35); transform: scale(.8); }
.sp-pack__t--d { background: #fff; border-radius: 3px; box-shadow: 0 1px 2px rgba(16,16,18,.08), inset 0 0 0 1px rgba(16,16,18,.12); transform: scale(.78, .92); }
/* se va: las fichas viajan al centro y se apagan */
.is-packing .sp-pack__house--from .sp-pack__t { transform: translateX(160px) scale(.2); opacity: 0; }
.is-packing .sp-pack__house--from .sp-pack__lines path { opacity: 0; }
.is-packing .sp-pack__house--from > p { opacity: .4; }
.sp-pack__house--from .sp-pack__grid { border-radius: 10px; transition: box-shadow .6s ease .8s; }
.is-packing .sp-pack__house--from .sp-pack__grid { box-shadow: 0 0 0 1.2px rgba(16,16,18,.12); }
/* el archivo */
.sp-pack__mid { display: grid; place-items: center; }
.sp-pack__file { width: min(360px, 100%); box-sizing: border-box; padding: 16px 18px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(16,16,18,.06), 0 18px 40px rgba(16,16,18,.1);
  opacity: 0; transform: scale(.85); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.9,.25,1.1); }
.is-file .sp-pack__file { opacity: 1; transform: none; }
.sp-pack__name { margin: 0 0 10px; font-size: 13.5px; font-weight: 600; color: #101012; }
.sp-pack__name small { font-weight: 400; color: rgba(16,16,18,.5); }
.sp-pack__csv { margin: 0; display: grid; gap: 4px; font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: rgba(16,16,18,.7); white-space: pre-wrap; }
.sp-pack__csv span { opacity: 0; transform: translateY(3px); transition: opacity .4s ease, transform .4s ease; }
.sp-pack__csv span:first-child { color: rgba(16,16,18,.42); }
.is-read .sp-pack__csv span { opacity: 1; transform: none; }
.is-read .sp-pack__csv span:nth-child(2) { transition-delay: .35s; } .is-read .sp-pack__csv span:nth-child(3) { transition-delay: .7s; } .is-read .sp-pack__csv span:nth-child(4) { transition-delay: 1.05s; }
/* vuelve: las fichas salen del archivo hacia la casa nueva, y las líneas se redibujan */
.sp-pack__house--to .sp-pack__t { transform: translateX(-160px) scale(.2); opacity: 0; }
.sp-pack__house--to .sp-pack__lines path { stroke-dashoffset: 400; }
.sp-pack__house--to > p { opacity: 0; transition: opacity .5s ease; }
.is-restoring .sp-pack__house--to .sp-pack__t { transform: none; opacity: 1; }
.is-restoring .sp-pack__house--to .sp-pack__t--p { transform: scale(.8); }
.is-restoring .sp-pack__house--to .sp-pack__t--d { transform: scale(.78, .92); }
.is-restoring .sp-pack__house--to > p { opacity: 1; }
.is-restored .sp-pack__house--to .sp-pack__lines path { stroke-dashoffset: 0; stroke: var(--verde); }
.sp-pack__end { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; text-align: center; font-size: 14px; font-weight: 600; color: #101012; opacity: 0; transition: opacity .6s ease; }
.is-restored .sp-pack__end { opacity: 1; }

@media (max-width: 760px) {
  .sp-ldg { grid-template-columns: 1fr 40px 1fr; }
  .sp-ldg__side { padding: 0 6px; }
  .sp-ldg__w small { display: none; }
  .sp-ldg__tags span { font-size: 9.5px; padding: 2px 5px; }
  .sp-pack { grid-template-columns: 1fr; justify-items: center; }
  .is-packing .sp-pack__house--from .sp-pack__t { transform: translateY(120px) scale(.2); }
  .sp-pack__house--to .sp-pack__t { transform: translateY(-120px) scale(.2); }
}
/* v0.22.1 · el registro, más legible: fichas y textos algo mayores; el rótulo del eje abajo, no encima del contador */
.sp-ldg { padding: 48px 0 78px; }
.sp-ldg__axis span { top: auto; bottom: -10px; transform: translate(-50%, 100%); }
.sp-ldg__end { bottom: 0; }
.sp-ldg__w b { width: 48px; height: 48px; border-radius: 7px; }
.sp-ldg__w em { font-size: 14.5px; }
.sp-ldg__w small { font-size: 12px; }
.sp-ldg__tags span { font-size: 11.5px; padding: 4px 9px; }
.sp-ldg__row { min-height: 84px; gap: 8px; }
.sp-ldg__side { padding: 0 28px; }
.sp-ldg__count { font-size: 12.5px; }
/* v0.22.2 · el registro con aire: fichas y etiquetas más pequeñas, más separación entre filas y del eje */
.sp-ldg { grid-template-columns: 1fr 120px 1fr; }
.sp-ldg__side { padding: 0 8px; }
.sp-ldg__w b { width: 36px; height: 36px; border-radius: 6px; }
.sp-ldg__w em { font-size: 13px; }
.sp-ldg__w small { font-size: 11px; }
.sp-ldg__tags { gap: 5px; }
.sp-ldg__tags span { font-size: 10px; padding: 2px 7px; box-shadow: 0 0 0 1px rgba(16,16,18,.07); }
.sp-ldg__row { min-height: 0; gap: 7px; margin-bottom: 26px; }
.sp-ldg__lab { margin-bottom: 18px; }

/* ═══ v0.23 · FOR COLLECTORS: las habitaciones de la colección y la vida de una obra en papel. ═══ */
.sp-rm { position: relative; }
.sp-rm__count { margin: 0 0 22px; text-align: center; font-size: 13px; color: rgba(16,16,18,.55); }
.sp-rm__count b { color: #101012; font-weight: 600; font-size: 16px; }
.sp-rm__count span { color: #101012; }
.sp-rm__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.sp-rm__room { padding-top: 12px; border-top: 1px solid rgba(16,16,18,.16); opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .6s var(--ease); transition-delay: calc(var(--r) * .15s); }
.is-a .sp-rm__room { opacity: 1; transform: none; }
.sp-rm__room > p { margin: 0 0 14px; font-size: 13px; font-weight: 600; color: #101012; }
.sp-rm__room > p small { display: block; font-size: 11px; font-weight: 400; color: rgba(16,16,18,.5); margin-top: 2px; }
.sp-rm__ws { display: flex; flex-wrap: wrap; gap: 10px; min-height: 60px; align-content: flex-start; }
.sp-rm__w { display: grid; justify-items: start; gap: 4px; width: 54px; }
.sp-rm__w b { width: 54px; height: 44px; border-radius: 5px; background: linear-gradient(160deg, #f1f5f2, var(--g, #c9ddd2)); box-shadow: 0 1px 2px rgba(16,16,18,.06), 0 5px 12px rgba(16,16,18,.07); }
[data-rm-from] .sp-rm__w:first-child b, .sp-rm__w.is-arrived b, .sp-rm__fly b { background: linear-gradient(160deg, #eef4f0 0%, #d3e4db 55%, #b9d3c6 100%); }
.sp-rm__w em { font-size: 10.5px; font-weight: 600; color: #101012; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 64px; }
.sp-rm__w small { font-size: 9.5px; color: var(--verde); white-space: nowrap; }
.sp-rm__w.is-gone { opacity: .18; transition: opacity .4s ease; }
.sp-rm__fly { position: absolute; z-index: 5; margin: 0; transition: transform 1.2s cubic-bezier(.45,0,.25,1); }
.sp-rm__w.is-arrived { animation: sp-rm-in .5s ease; }
@keyframes sp-rm-in { from { opacity: 0; } }

.sp-life { position: relative; display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 26px; min-height: 280px; padding-bottom: 34px; }
.sp-life__work { display: grid; gap: 8px; opacity: 0; transition: opacity .6s ease; }
.is-a .sp-life__work { opacity: 1; }
.sp-life__work b { width: 120px; height: 96px; border-radius: 8px; background: linear-gradient(160deg, #eef4f0 0%, #d3e4db 55%, #b9d3c6 100%); box-shadow: 0 1px 2px rgba(16,16,18,.06), 0 12px 26px rgba(16,16,18,.1); }
.sp-life__work span { display: grid; gap: 2px; }
.sp-life__work em { font-size: 14px; font-weight: 600; color: #101012; }
.sp-life__work small { font-size: 11.5px; color: rgba(16,16,18,.5); }
.sp-life__line { position: relative; height: 220px; }
.sp-life__rule { position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: #101012; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); }
.is-a .sp-life__rule { transform: none; }
.sp-life__p { position: absolute; left: var(--x); top: 50%; display: grid; gap: 4px; justify-items: start; opacity: 0; transition: opacity .45s ease, transform .6s cubic-bezier(.2,.9,.25,1.2); transition-delay: calc(var(--k) * .6s); }
.sp-life__p::before { content: ""; position: absolute; left: -4px; width: 8px; height: 8px; border-radius: 50%; background: #101012; }
.sp-life__p--up { transform: translateY(calc(-100% - 22px)) translateY(-18px); }
.sp-life__p--up::before { bottom: -26px; }
.sp-life__p--dn { transform: translateY(22px) translateY(18px); }
.sp-life__p--dn::before { top: -26px; }
.is-drop .sp-life__p--up { opacity: 1; transform: translateY(calc(-100% - 22px)); }
.is-drop .sp-life__p--dn { opacity: 1; transform: translateY(22px); }
.sp-life__p time { font-size: 11px; color: rgba(16,16,18,.45); font-variant-numeric: tabular-nums; }
.sp-life__p span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 6px 10px; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(16,16,18,.06), 0 8px 18px rgba(16,16,18,.07); font-size: 12px; color: #101012; }
.sp-life__p span::before { content: ""; width: 11px; height: 11px; background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101012' stroke-width='1.8'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3C/svg%3E"); opacity: .6; }
.sp-life__end { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; text-align: center; font-size: 14px; color: rgba(16,16,18,.6); opacity: 0; transition: opacity .6s ease; }
.sp-life__end b { color: #101012; }
.is-end .sp-life__end { opacity: 1; }
@media (max-width: 760px) {
  .sp-rm__grid { grid-template-columns: 1fr 1fr; }
  .sp-life { grid-template-columns: 1fr; }
  .sp-life__p span { font-size: 10px; padding: 4px 6px; }
}
.sp-rm__w em { max-width: 54px; } .sp-rm__ws { gap: 12px 10px; }
/* v0.23.1 · la vida en papel, en el móvil: la línea se pone de pie y los papeles bajan en lista */
@media (max-width: 760px) {
  .sp-life__line { height: auto; display: grid; gap: 12px; padding: 4px 0 4px 22px; }
  .sp-life__rule { left: 6px; right: auto; top: 0; bottom: 0; width: 1.5px; height: auto; transform: scaleY(0); transform-origin: top; }
  .is-a .sp-life__rule { transform: none; }
  .sp-life__p, .sp-life__p--up, .sp-life__p--dn { position: relative; left: auto; top: auto; transform: translateX(-8px); grid-template-columns: 40px auto; align-items: center; }
  .is-drop .sp-life__p--up, .is-drop .sp-life__p--dn { transform: none; }
  .sp-life__p::before, .sp-life__p--up::before, .sp-life__p--dn::before { left: -20px; top: 50%; bottom: auto; margin-top: -4px; }
  .sp-life__p span { font-size: 11.5px; padding: 5px 9px; }
  .sp-life__end { position: static; margin-top: 16px; }
  .sp-life { padding-bottom: 0; }
}
/* v0.23.2 · Goals en el móvil: en columna, las fichas no se aplastan (flex-basis 0 en columna las dejaba sin alto) */
@media (max-width: 760px) {
  .sp-goal__path .sp-step, .sp-goal__path .sp-goal__flag { flex: none !important; height: auto; }
  .sp-goal__flag { padding: 12px 14px; }
  .sp-trip__track { height: 250px; }
  .sp-trip__work { transform: translate(-50%, calc(-100% - 16px)); }
}

/* v0.23.4 · el repaso en el móvil */
.sp-storm__one i { font-style: italic; }
@media (max-width: 760px) {
  .sp-mem__trail time { white-space: nowrap; }
  .sp-mem__paper { grid-column: 1 / -1; }
  .sp-idx__card--hit { height: auto; min-height: 150px; }
  .sp-idx__drawer { height: 230px; }
  .sp-arr__floor { flex-direction: column; align-items: flex-start; gap: 4px; }
  .sp-rm__w { width: 62px; }
  .sp-rm__w b { width: 62px; height: 48px; }
  .sp-rm__w em { max-width: 62px; white-space: normal; overflow: visible; line-height: 1.2; font-size: 10px; }
  .sp-rm__ws { gap: 12px 8px; }
}

/* v0.24 · el título de la hoja ya no es un h2 (no debe contar en el orden de títulos de cada página) */
.sp-talk .sp-talk__h { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: #101012; }

/* Talk to us · si no llega a guardarse, se dice (30 sept). */
.sp-talk__err { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: #b3261e; }
.sp-talk__err a { color: inherit; }