/* entrada.css · páginas públicas de Memoria (laboratorio). Dueño: A1 · Memory.
   Identidad: azul noche, crema y ámbar para la llegada y los ejemplos.
   DM Sans para leer y actuar; Bodoni Moda para la voz y la memoria. */
:root {
  color-scheme: dark light;
  --bg: #101b33; --bg-2: #17264a; --bg-3: #1f3159;
  --text: #f5f0df; --muted: #c3bfae; --line: rgba(245, 240, 223, .16);
  --accent: #ff975d; --on-accent: #101b33; --accent-ink: #ffb48a; --focus: #ff975d;
  --blue: #82bedf; --lilac: #c6b2ee; --mint: #c7ffe1; --sun: #ffdf48;
  --sample-bg: #101b33; --sample-text: #f5f0df; --sample-muted: #c3bfae;
  --sample-accent: #ffb48a; --sample-line: rgba(245, 240, 223, .2);
  --ok: #8fd8b0; --bad: #ff9b8c;
  --radius: 14px; --radius-sm: 8px;
  --font-ui: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --wrap: 1120px; --gutter: clamp(16px, 4vw, 40px);
}
@media (prefers-color-scheme: light) {
  :root:not([data-mode="dark"]) {
    --bg: #f5f0df; --bg-2: #ebe3c8; --bg-3: #e1d7b6;
    --text: #101b33; --muted: #4a5167; --line: rgba(16, 27, 51, .15);
    --accent-ink: #a8431a; --focus: #101b33; --ok: #2f6b46; --bad: #a3372a;
  }
}
/* elección explícita en la app (uxlab:mode), gana a la del sistema */
:root[data-mode="light"] {
  --bg: #f5f0df; --bg-2: #ebe3c8; --bg-3: #e1d7b6;
  --text: #101b33; --muted: #4a5167; --line: rgba(16, 27, 51, .15);
  --accent-ink: #a8431a; --focus: #101b33; --ok: #2f6b46; --bad: #a3372a;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.55 var(--font-ui); text-rendering: optimizeLegibility;
}
a { color: inherit; text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 8px 14px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 8px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
h1, h2, h3 { text-wrap: balance; margin: 0; }
h1 { font: 500 clamp(2.5rem, 6.4vw, 5.2rem)/1.02 var(--font-display); letter-spacing: -.01em; }
h1 em, h2 em { font-style: italic; }
h2 { font: 500 clamp(1.9rem, 4vw, 3rem)/1.08 var(--font-display); }
h3 { font: 600 1.15rem/1.3 var(--font-ui); }
p { margin: 0; }
.eyebrow { font: 600 .78rem/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lead { font-size: clamp(1.08rem, 1.8vw, 1.3rem); color: var(--muted); max-width: 36ch; }
.muted { color: var(--muted); }

/* ---------- cabecera ---------- */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; text-decoration: none; font-size: 1.02rem; }
.brand-mark { width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--accent-ink); box-shadow: inset 0 0 0 8px var(--bg); border: 1.5px solid var(--accent-ink); }
.top-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.top-links > a:not(.button) { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--muted); font-weight: 500; }
.top-links > a:not(.button):hover, .top-links a[aria-current="page"] { color: var(--text); }
.who { display: inline-flex; gap: 10px; align-items: center; }

/* ---------- botones ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 1.5px solid var(--line); background: transparent; color: var(--text);
  font: 600 1rem/1 var(--font-ui); text-decoration: none; cursor: pointer; transition: transform .08s ease, background-color .18s ease, border-color .18s ease; }
.button:hover { border-color: var(--text); }
.button:active { transform: scale(.97); }
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.button.primary:hover { background: color-mix(in srgb, var(--accent) 86%, white); }
.button.small { min-height: 44px; padding: 0 16px; font-size: .95rem; }
.button[disabled] { opacity: .55; cursor: not-allowed; }
.text-button { background: none; border: 0; color: var(--text); font: 600 1rem var(--font-ui); text-decoration: underline; text-underline-offset: .22em; cursor: pointer; padding: 10px 4px; min-height: 44px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- portada: un disco atravesado por sus años ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 40px; align-items: center; padding-block: 48px 64px; }
.hero-copy { display: grid; gap: 24px; align-content: start; }
.hero-heading .eyebrow { margin-bottom: 12px; }
.hero .lead { text-wrap: pretty; }
.landing { font-size: 1.125rem; line-height: 1.55; }
.landing .skip { min-height: 44px; }
.landing h1 { font-size: clamp(2.5rem, 5.28vw, 4.75rem); line-height: 1.0264; }
.landing h1, .landing h2, .landing h3 { overflow-wrap: anywhere; }
.headline-line { display: block; }
/* Text Effect, preset slide por palabra: Julien Thibeaut / Motion Primitives, MIT.
   El marco conserva sitio y tapa el recorrido. Solo se anima transform/opacity.
   https://21st.dev/@ibelick/components/text-effect ; CREDITOS-21st.md. */
.headline-mask { display: inline-block; vertical-align: bottom; max-width: 100%; overflow: clip; padding: .13em .02em; margin: -.13em -.02em; }
.headline-word { display: inline-block; max-width: 100%; transform-origin: left bottom; }
@media (prefers-reduced-motion: no-preference) {
  .headline-playing .headline-word { animation: headline-reveal .8s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--word) * .055s); }
}
@keyframes headline-reveal {
  from { opacity: 0; transform: translateY(110%) rotate(5deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}
.landing .lead, .landing .section-head > p:not(.eyebrow) { max-width: 560px; font-size: 1.25rem; line-height: 1.6; }
.landing .eyebrow { font-size: 1rem; line-height: 1.5; letter-spacing: 0; text-transform: none; }
.landing .button.small, .landing .state-chip, .landing .lab-note, .landing .site-footer { font-size: 1rem; }
.landing .u-privacy, .landing .u-where, .landing .u-detail, .landing .u-primary, .landing .u-secondary, .landing .u-ghost { font-size: 1rem; }
.landing .button { transition: transform .15s ease-out; }
.hero .actions { margin-top: 0; gap: 8px 16px; }
.hero .demo-link { flex-basis: 100%; text-align: left; }
.demo-link { font-weight: 400; color: var(--muted); }
.demo-link:hover { color: var(--text); }
.hero-privacy { font-size: 1rem; line-height: 1.5; }
.hero-image { position: relative; min-width: 0; }
.hero-art { position: relative; isolation: isolate; width: 100%; max-width: 560px; aspect-ratio: 6 / 5; border-radius: 24px; overflow: hidden; background: #101b33; }
.hero-scene { position: relative; display: block; width: 100%; height: 100%; }
.hero-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, #704b42 0%, #293046 37%, #101b33 75%); }
.aurora-layer { position: absolute; inset: -35% -55%; opacity: .88; filter: blur(4px);
  background: repeating-linear-gradient(112deg, transparent 0% 14%, rgba(255,151,93,.12) 18%, rgba(255,151,93,.65) 22%, rgba(245,240,223,.95) 24%, rgba(255,151,93,.28) 27%, transparent 33% 44%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 12%, rgba(0,0,0,.75) 44%, transparent 72%);
  transform: translate(-13%, -4%) rotate(-19deg); }
.aurora-front { opacity: .66; filter: blur(7px);
  background: repeating-linear-gradient(72deg, transparent 0% 24%, rgba(255,151,93,.38) 29%, rgba(245,240,223,.8) 31%, rgba(255,151,93,.22) 34%, transparent 41% 55%);
  transform: translate(11%, 4%) rotate(17deg); }
.record-reflection { transform-box: fill-box; transform-origin: center; transform: translateX(-35px) rotate(-12deg); }
.hero-motion { position: absolute; right: 14px; bottom: 12px; max-width: calc(100% - 28px); min-height: 44px; padding: 8px 12px; border: 1px solid rgba(245,240,223,.5); border-radius: 999px;
  background: #101b33; color: #f5f0df; font: 400 1rem/1.5 var(--font-ui); cursor: pointer; }
.hero-motion:focus-visible { outline-color: #f5f0df; }
.hero-image[data-paused="true"] .hero-art *, .hero-image[data-visible="false"] .hero-art * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: no-preference) {
  .aurora-back { animation: hero-aurora 6.4s ease-in-out infinite alternate; will-change: transform; }
  .aurora-front { animation: hero-aurora-front 8.6s ease-in-out infinite alternate; will-change: transform; }
  .record-reflection { animation: record-light 8.6s ease-in-out infinite alternate; }
}
@keyframes hero-aurora {
  from { transform: translate(-13%, -4%) rotate(-19deg); opacity: .82; }
  to { transform: translate(14%, 5%) rotate(11deg); opacity: 1; }
}
@keyframes hero-aurora-front {
  from { transform: translate(11%, 4%) rotate(17deg); opacity: .72; }
  to { transform: translate(-14%, -5%) rotate(-13deg); opacity: .52; }
}
@keyframes record-light {
  from { transform: translateX(-35px) rotate(-12deg); opacity: .65; }
  to { transform: translateX(40px) rotate(22deg); opacity: 1; }
}

/* ---------- tarjeta de estado (la puerta) ---------- */
.door { border: 1.5px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 3vw, 28px); background: var(--bg-2);
  display: grid; gap: 14px; position: relative; overflow: hidden; }
.door::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--accent); }
.door h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.door .state-chip { justify-self: start; }
.state-chip { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 5px 12px; background: var(--bg-3); font: 600 .82rem var(--font-ui); }
.state-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ---------- Timeline de cubby-ui, reconstruido sin framework ----------
Copyright (c) 2026 joncoronel
MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
Fuente: https://21st.dev/@cubby-ui/components/timeline ; CREDITOS-21st.md.
Aurora Background: Manu Arora / Aceternity UI, MIT en 21st.dev; reconstrucción propia.
https://21st.dev/@manuarora700/components/aurora-background
Timeline animada: https://21st.dev/@manuarora700/components/timeline
Glowing Effect: https://21st.dev/@manuarora700/components/glowing-effect
Text Effect: Julien Thibeaut / Motion Primitives, MIT en 21st.dev.
https://21st.dev/@ibelick/components/text-effect
*/
.section { padding-block: 64px; }
.section-head { display: grid; gap: 16px; margin-bottom: 40px; max-width: 640px; }
.timeline-wrap { position: relative; }
.timeline-track { position: absolute; z-index: 1; pointer-events: none; border-radius: 999px; background: var(--line); }
.timeline-beam { position: absolute; inset: 0; display: block; border-radius: inherit; opacity: 0;
  background: linear-gradient(90deg, var(--accent-ink), var(--accent) 75%, #f5f0df);
  box-shadow: 0 0 16px rgba(255,151,93,.42); transform-origin: 0 0; transform: scaleX(0); }
.timeline-tip { position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; opacity: 0;
  background: var(--accent); border: 2px solid var(--bg); box-shadow: 0 0 0 5px rgba(255,151,93,.17), 0 0 20px rgba(255,151,93,.5); }
.steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.step { position: relative; min-width: 0; padding-top: 76px; display: grid; gap: 12px; align-content: start; justify-items: start; overflow-wrap: anywhere; }
.step-indicator { position: absolute; z-index: 2; top: 0; left: 0; width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid var(--accent-ink); background: var(--bg); color: var(--accent-ink); font: 500 1.35rem/1 var(--font-display); }
.step-indicator[data-state="current"] { outline: 1px solid var(--accent-ink); outline-offset: 5px; background: var(--accent); color: var(--on-accent); }
.step-indicator[data-state="completed"] { background: var(--accent); color: var(--on-accent); }
.step-separator { position: absolute; top: 23px; left: 60px; right: -12px; height: 2px; background: var(--line); }
.step-separator[data-state="completed"] { background: var(--accent-ink); }
.step-position { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; min-height: 32px; }
.step .when { font: 600 1rem/1.5 var(--font-ui); color: var(--muted); }
.step-status { font-size: 1rem; line-height: 1.5; color: var(--muted); }
.step.is-current .step-status { background: var(--accent); color: var(--on-accent); }
.step.is-current .step-status { padding: 4px 10px; border-radius: 999px; }
.step .text-button { margin-left: -4px; }
.needs { margin-top: 32px; color: var(--muted); max-width: 560px; font-size: 1rem; line-height: 1.6; }
.truth { margin-top: 10px; font-family: var(--font-display); font-style: italic; font-size: 1.15rem; }

/* ---------- cómo funciona ---------- */
.tour { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 48px; }
.tour-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-content: start; min-width: 0; }
.tour-card h3 { font: 500 1.75rem/1.15 var(--font-display); }
.tour-copy { display: grid; gap: 16px; max-width: 560px; }
.tour-years { grid-column: 1 / -1; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.tour-years h3 { font-size: 2.25rem; }
.tour-card .visual { position: relative; isolation: isolate; overflow: hidden; min-width: 0; padding: 28px; border-radius: 20px; display: grid; gap: 20px; align-content: start;
  background: var(--sample-bg); color: var(--sample-text); box-shadow: inset 0 0 0 1px var(--sample-line); }
.tour-card .visual > :not(.glow-border):not(.glow-light):not(.glow-sweep) { position: relative; z-index: 1; }
.glow-border { position: absolute; inset: 0; z-index: 3; padding: 2px; border-radius: inherit; overflow: hidden;
  pointer-events: none; opacity: 0; transition: opacity .3s ease-out;
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0); mask-clip: content-box, border-box; mask-composite: exclude; }
.glow-border i { position: absolute; inset: -100%;
  background: conic-gradient(from -65deg, transparent, #ff975d 25deg, #f5f0df 65deg, #ff975d 105deg, transparent 135deg 360deg);
  transform: rotate(0deg); transition: transform .35s cubic-bezier(.16,1,.3,1); }
.glow-light { position: absolute; left: 0; top: 0; z-index: 0; width: 620px; height: 620px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255,151,93,.32) 0% 28%, rgba(255,151,93,.23) 46%, transparent 72%); transition: opacity .2s ease-out; }
.glow-sweep { position: absolute; inset: -30%; pointer-events: none; z-index: 2; opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,151,93,.05) 44%, rgba(245,240,223,.17) 49%, rgba(255,151,93,.08) 54%, transparent 61%); }
.tour-card.is-lit .glow-border, .tour-card.is-lit .glow-light { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .tour-card.is-glow-preview .glow-border { animation: card-light-presence 1.8s ease-out both; }
  .tour-card.is-glow-preview .glow-border i { animation: card-light-turn 1.8s cubic-bezier(.2,.7,.3,1) both; }
  .tour-card.is-glow-preview .glow-sweep { animation: card-light-sweep 1.8s cubic-bezier(.2,.7,.3,1) both; }
}
@keyframes card-light-presence { 0% { opacity: 0; } 12%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes card-light-turn { from { transform: rotate(-110deg); } to { transform: rotate(250deg); } }
@keyframes card-light-sweep { 0% { opacity: 0; transform: translateX(-62%); } 20%, 65% { opacity: 1; } 100% { opacity: 0; transform: translateX(62%); } }
.sample-label { color: var(--sample-muted); font: 400 1rem/1.5 var(--font-ui); }
.sample-caption { font-size: 1rem; color: var(--sample-accent); }
.mini-bars { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(4ch, 100%), 1fr)); gap: 12px; min-height: 196px; }
.mini-bars li { min-width: 0; min-height: 196px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; }
.mini-bars i { width: 100%; height: calc(164px * var(--v)); border-radius: 3px 3px 0 0; background: var(--sample-muted); }
.mini-bars span { color: var(--sample-muted); font-size: 1rem; font-variant-numeric: tabular-nums; }
.mini-bars .peak i { background: var(--sample-accent); }
.mini-bars .peak span { color: var(--sample-accent); font-weight: 600; }
.song-chip { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; width: 100%; }
.song-chip > div { display: grid; flex: 1 1 10ch; min-width: 0; gap: 5px; }
.song-chip strong { font: 500 1.5rem/1.15 var(--font-display); }
.song-chip > div > span { color: var(--sample-muted); font-size: 1rem; }
.sample-disc { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; border: 1px solid var(--sample-muted);
  background: radial-gradient(circle, var(--sample-bg) 0 2px, var(--sample-accent) 3px 8px, transparent 9px), repeating-radial-gradient(circle, transparent 0 4px, rgba(245, 240, 223, .2) 5px, transparent 6px); }
.sample-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding-top: 16px; border-top: 1px solid var(--sample-line); }
.sample-dates dt { color: var(--sample-muted); font-size: 1rem; }
.sample-dates dd { margin: 4px 0 0; font-size: 1rem; }
.sample-playlist { min-width: 0; }
.sample-playlist > strong { display: block; font: 500 1.5rem/1.15 var(--font-display); }
.sample-playlist ol { list-style: none; counter-reset: song; padding: 0; margin: 14px 0 0; }
.sample-playlist li { counter-increment: song; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 48px; padding-block: 8px; border-bottom: 1px solid var(--sample-line); font-size: 1rem; }
.sample-playlist li::before { content: counter(song); color: var(--sample-muted); font-size: 1rem; }
.sample-duration { color: var(--sample-muted); font-size: 1rem; font-variant-numeric: tabular-nums; }

/* ---------- formularios y paneles ---------- */
.panel { border-radius: var(--radius); background: var(--bg-2); padding: clamp(18px, 3vw, 30px); display: grid; gap: 16px; }
label.field { display: grid; gap: 6px; font-weight: 600; }
input[type="text"] { min-height: 48px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg); color: var(--text); padding: 0 14px; font: 400 1.05rem var(--font-ui); width: 100%; }
input[type="text"]:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.status { min-height: 1.5em; }
.status.ok { color: var(--ok); } .status.bad { color: var(--bad); }
.lab-note { font-size: .9rem; color: var(--muted); }

.people { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.person { width: 100%; text-align: left; display: grid; grid-template-columns: 48px 1fr; gap: 4px 14px; align-items: center; padding: 14px 16px; border-radius: var(--radius);
  background: var(--bg-2); border: 1.5px solid var(--line); color: var(--text); font: inherit; cursor: pointer; min-height: 84px; }
.person:hover { border-color: var(--text); }
.person .avatar { grid-row: span 2; width: 48px; height: 48px; border-radius: 50%; background: var(--bg-3); display: grid; place-items: center; font: 600 1.2rem var(--font-display); color: var(--text); }
.person strong { font-size: 1.05rem; }
.person small { color: var(--muted); font-size: .88rem; line-height: 1.35; }

/* ---------- guía ---------- */
.guide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding-block: 24px 64px; }
.guide-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.guide-steps button { width: 100%; text-align: left; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1.5px solid transparent; background: transparent; color: var(--muted); font: 500 1rem var(--font-ui); cursor: pointer; min-height: 52px; }
.guide-steps button .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-3); color: var(--text); font-weight: 700; font-size: .9rem; }
.guide-steps button[aria-current="step"] { background: var(--bg-2); border-color: var(--line); color: var(--text); }
.guide-steps button[aria-current="step"] .n { background: var(--accent); color: var(--on-accent); }
.guide-steps button.done .n { background: var(--ok); color: #101b33; }
.guide-card { position: sticky; top: 16px; border-radius: var(--radius); background: var(--bg-2); padding: clamp(18px, 3vw, 28px); display: grid; gap: 14px; }
.guide-card .chapter { font: 600 .8rem var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.guide-card h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.screen { border-radius: 16px; background: #f7f5ef; color: #1f1e1c; padding: 14px; border: 6px solid #0b1224; display: grid; gap: 10px; font-size: .92rem; }
.screen .bar { display: flex; gap: 6px; align-items: center; font: 500 .78rem var(--font-ui); color: #555; background: #e9e5da; border-radius: 8px; padding: 6px 10px; }
.screen .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: #fff; border: 1px solid #e2ded3; }
.screen .row.hi { outline: 3px solid #ff975d; outline-offset: 1px; }
.screen .tick { width: 20px; height: 20px; border-radius: 5px; border: 2px solid #777; flex: none; }
.screen .tick.on { background: #1f6f4a; border-color: #1f6f4a; }
.screen .mail { display: grid; gap: 6px; }
.screen .mail strong { font-size: .95rem; }
.screen .fake-btn { justify-self: start; background: #1f1e1c; color: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: .85rem; }
.illustration-note { font-size: .82rem; color: var(--muted); }
.step-nav { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.two-step { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.two-step div { border-radius: 10px; background: var(--bg-3); padding: 10px 12px; font-size: .92rem; }
.two-step b { display: block; font-size: .78rem; color: var(--accent-ink); letter-spacing: .06em; text-transform: uppercase; }

/* ---------- importar ---------- */
.drop { border: 2px dashed var(--line); border-radius: var(--radius); padding: clamp(22px, 4vw, 40px); display: grid; gap: 12px; justify-items: start; background: var(--bg-2); transition: border-color .18s ease, background-color .18s ease; }
.drop.over { border-color: var(--accent); background: var(--bg-3); }
.drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.progress { height: 10px; border-radius: 999px; background: var(--bg-3); overflow: hidden; width: 100%; }
.progress > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff975d, #c6b2ee); transition: width .2s ease; }
.result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.result div { background: var(--bg-3); border-radius: 12px; padding: 14px; }
.result strong { display: block; font: 500 1.8rem/1.1 var(--font-display); }
.waiting { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.waiting .clock { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--blue); position: relative; }
.waiting .clock::after { content: ""; position: absolute; left: 50%; top: 12px; width: 3px; height: 20px; background: var(--blue); transform-origin: bottom; translate: -50% 0; }
@media (prefers-reduced-motion: no-preference) { .waiting .clock::after { animation: hand 6s linear infinite; } }
@keyframes hand { to { rotate: 360deg; } }

footer.site-footer { border-top: 1px solid var(--line); padding-block: 28px 40px; color: var(--muted); font-size: .9rem; display: grid; gap: 6px; }

/* ---------- móvil ---------- */
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art { max-width: none; aspect-ratio: 16 / 10; border-radius: 20px; }
  .hero-scene { width: 100%; height: 100%; }
  .record-body, .record-years { transform-origin: 300px 250px; transform: scale(.9); }
  /* en móvil, la ilustración ocupa una franja baja para acercar el acceso */
  .hero { padding-block: 24px 44px; gap: 32px; }
  .hero-copy { gap: 16px; }
  .hero .actions > .primary { width: 100%; }
  .landing .lead, .landing .section-head > p:not(.eyebrow) { font-size: 1.125rem; line-height: 1.5556; }
  .section { padding-block: 44px; }
  .section-head { margin-bottom: 32px; }
  .steps, .tour { grid-template-columns: minmax(0, 1fr); }
  .steps { gap: 32px; }
  .timeline-beam { background: linear-gradient(180deg, var(--accent-ink), var(--accent) 75%, #f5f0df); transform: scaleY(0); }
  .timeline-tip { top: 0; left: 50%; }
  .step-separator { top: 60px; bottom: -20px; left: 23px; right: auto; width: 2px; height: auto; }
  .step { padding: 0 0 0 60px; gap: 8px; }
  .tour { gap: 48px; }
  .tour-years { grid-template-columns: 1fr; gap: 24px; }
  .tour-years h3 { font-size: 1.75rem; }
  .tour-card .visual { padding: 24px; }
  .guide { grid-template-columns: 1fr; }
  .guide-card { position: static; }
  .result { grid-template-columns: 1fr 1fr; }
  .top-links { gap: 12px; }
  .top-links > a:not(.button):first-child { display: none; }
}
@media (max-width: 420px) {
  body { font-size: 16px; }
  .two-step { grid-template-columns: 1fr; }
  .two-step > span { display: none; }
}
@media (max-width: 360px) {
  .landing .sample-dates { grid-template-columns: 1fr; }
  .landing .tour-card .visual { padding: 20px; }
  .landing .mini-bars { gap: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  .landing .button:focus-visible { transition: none; }
  .landing .button:focus-visible:active { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
#tour-actions { margin-top: 28px; }
#acceso-head, .page-head { padding-top: clamp(20px, 5vw, 56px); }
[hidden] { display: none !important; }

/* onboarding de subida */
.hero-help { display: grid; gap: 2px; }
.door .u-privacy { margin-top: 0; }
.lab-tools { margin-top: 6px; color: var(--muted); }
.lab-tools summary { cursor: pointer; font-size: .9rem; }
.after-drop { margin-top: 14px; }
.privacy-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 14px 28px; margin: 0 0 28px; max-width: 900px; }
.privacy-list dt { font-weight: 700; }
.privacy-list dd { margin: 0; color: var(--muted); }
@media (max-width: 640px) { .privacy-list { grid-template-columns: 1fr; gap: 4px; } .privacy-list dd { margin-bottom: 12px; } }
.person.private { border-color: var(--accent); }
.person.private .avatar { background: var(--accent); color: var(--on-accent); }
.u-ask-actions .button { white-space: nowrap; }
.owner-panel { justify-items: start; margin-bottom: 18px; }
.owner-enter { min-height: 56px; font-size: 1.1rem; padding: 0 28px; }
.test-people { margin-top: 8px; }
.test-people > summary { cursor: pointer; font-weight: 600; padding: 10px 0; color: var(--muted); }
.test-people[open] > summary { color: var(--text); }