/* ============================================================================
   jesusmhernandez.com · home 2026 · v3 (final, 2026-09-10)
   Chrome de la página sobre el sistema de diseño v3 (assets/ds/: tokens, base,
   components, patrones). Aquí solo viven: alias de nombres cortos que las
   secciones usan, el puente al motor scroll-craft, la barra con anclas, el
   reloj al pie (rail), el footer y las reglas de impresión y de movimiento
   reducido. Cada sección trae su propio CSS con prefijo en src/v3/sections/.
   Cero hex: todo var(--…) del sistema de diseño.
   ========================================================================== */

/* ------------------------------------------------------------- alias -- */
:root, :root[data-mode="noche"] {
  --serif: var(--font-serif); --mono: var(--font-mono);
  --ease: var(--ease-out);
  --gutter: var(--sp-gutter); --maxw: var(--sp-container);
  --r-sm: var(--r-btn); --r-md: var(--r-card); --r-lg: var(--r-panel);
  --line-strong: color-mix(in oklab, var(--ink) 30%, transparent);
  --glass-rim: var(--glass-line);
  --shadow-e2: var(--elev-3);
  --bar-h: 64px; --rail-h: 48px;
  --hero-img: url(/img/home-2026/hero-day.webp); --city-img: url(/img/home-2026/city.webp);
}
:root[data-mode="noche"] { --hero-img: url(/img/home-2026/hero-night.webp); }

/* puente al motor scroll-craft: sus clases heredan los tokens del sistema */
:root, :root[data-mode="noche"] {
  --sc-canvas: var(--canvas); --sc-surface: var(--surface); --sc-ink: var(--ink); --sc-ink-soft: var(--soft);
  --sc-accent: var(--leaf-fill); --sc-accent-ink: var(--cta-ink);
  --sc-font-display: var(--serif); --sc-font-text: var(--mono); --sc-font-mono: var(--mono);
  --sc-r-sm: var(--r-sm); --sc-r-md: var(--r-md); --sc-r-lg: var(--r-lg); --sc-r-pill: var(--r-pill);
  --sc-gutter: var(--gutter); --sc-maxw: var(--maxw);
  --sc-section: clamp(4rem, 7vw, 8rem);
  --sc-hairline: var(--line); --sc-hairline-strong: var(--line-strong);
  --sc-leading-none: 1.04; --sc-track-tight: -0.015em; --sc-track-snug: -0.01em; --sc-track-normal: 0;
}

/* --------------------------------------------------------------- base -- */
html { background: var(--canvas); }
body { padding-bottom: var(--rail-h); }
h1, .sc-display--xl { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
h2, .sc-display--lg { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h3, .sc-display--md { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.sc-display { font-family: var(--serif); font-weight: 400; text-wrap: balance; margin: 0; }
.sc-display em { font-style: normal; color: var(--leaf-fill); }
[data-mode="noche"] .sc-display em { color: var(--leaf); }
.sc-lede { font-family: var(--mono); font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink); max-width: 44ch; }
.sc-body { font-family: var(--mono); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--soft); max-width: 60ch; text-wrap: pretty; }
.sc-label { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--soft); }
.lbl b, .sc-label b { color: var(--leaf); font-weight: 500; }
p { max-width: none; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: fixed; left: -100vw; top: 0; z-index: 100; padding: .6rem 1rem; background: var(--ink); color: var(--canvas); }
.skip:focus { left: 1rem; top: 1rem; }
/* titulares que se desenfocan al salir bajo la barra (pryzm); page-v3.js pinta filter/opacity */
.h-blur { will-change: filter, opacity; }

/* --------------------------------------------------------------- barra -- */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--bar-h); display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 1.25rem; padding-inline: var(--gutter); background: transparent; border-bottom: 0; transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease); }
.bar--scrolled { background: color-mix(in oklab, var(--canvas) 84%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bar--on-dark { color: var(--panel-ink); }
.bar--on-dark .bar__nav a, .bar--on-dark .bar__modo { color: var(--panel-soft); }
.bar--on-dark .dial { color: var(--panel-ink); border-color: color-mix(in oklab, var(--panel-ink) 24%, transparent); }
.bar--on-dark.bar--scrolled { background: color-mix(in oklab, var(--panel) 84%, transparent); border-bottom-color: color-mix(in oklab, var(--panel-ink) 14%, transparent); }
.bar__name { font-family: var(--serif); font-size: 1.2rem; text-decoration: none; letter-spacing: -0.01em; color: inherit; white-space: nowrap; }
.bar__nav { display: flex; gap: 1.25rem; justify-self: start; }
.bar__nav a { font-family: var(--mono); font-size: var(--fs-small); text-decoration: none; color: var(--soft); padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.bar__nav a:hover, .bar__nav a:focus-visible { color: inherit; border-color: var(--leaf-fill); }
.bar__modo { margin: 0; }
.bar .dial { width: 44px; height: 44px; }
.bar .dial svg { width: 30px; height: 30px; }
.bar__cta { white-space: nowrap; }
@media (max-width: 860px) {
  .bar { grid-template-columns: 1fr auto auto; gap: .75rem; }
  .bar__nav, .bar__modo { display: none; }
  .bar .btn { padding: .7em .9em; }
}

/* ---------------------------------------------------------------- rail -- */
.rail {
  position: fixed; inset: auto 0 0 0; z-index: 50; height: var(--rail-h);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; padding-inline: var(--gutter);
  background: color-mix(in oklab, var(--canvas) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--line-strong);
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--soft);
  transition: background-color var(--t-slow) var(--ease);
}
.rail__now { display: flex; align-items: baseline; gap: .75rem; white-space: nowrap; }
.rail__time { font-size: 15px; color: var(--ink); letter-spacing: 0; font-variant-numeric: tabular-nums; font-weight: 500; }
.rail__day { color: var(--leaf); }
.rail__track { position: relative; height: 100%; }
.rail__ruler { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-strong); }
.rail__ruler::before { content: ""; position: absolute; inset: -5px 0 auto 0; height: 11px; background-image: repeating-linear-gradient(to right, var(--line-strong) 0 1px, transparent 1px calc(100% / 26)); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2px, #000 9px, transparent 11px); mask-image: linear-gradient(to bottom, transparent 0, #000 2px, #000 9px, transparent 11px); }
.rail__midnight { position: absolute; top: 0; bottom: 0; left: var(--midnight, 69.2%); width: 1px; background: var(--ink); opacity: .45; }
.rail__midnight span { position: absolute; left: 6px; top: 2px; font-size: 9px; letter-spacing: .05em; }
.rail__head { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--leaf-fill); border: 1px solid var(--ink); box-shadow: 0 0 0 3px color-mix(in oklab, var(--leaf-fill) 30%, transparent); }
.rail__stamps { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.rail__stamps li { position: absolute; top: 50%; transform: translate(-50%, -50%); margin: 0; }
.rail__stamps button { appearance: none; background: var(--canvas); border: 1px solid var(--ink); width: 7px; height: 7px; border-radius: 50%; padding: 0; cursor: pointer; display: block; opacity: .35; transform: scale(.8); transition: opacity 240ms var(--ease), transform 240ms var(--ease), background-color 240ms var(--ease); }
.rail__stamps li.is-stamped button { opacity: 1; transform: scale(1); background: var(--ink); }
.rail__stamps li.is-current button { background: var(--leaf-fill); }
.rail__tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--ink); color: var(--canvas); padding: .35em .6em; border-radius: var(--r-sm); font-size: 10px; letter-spacing: .06em; opacity: 0; pointer-events: none; transition: opacity 160ms var(--ease); }
.rail__stamps li:hover .rail__tip, .rail__stamps li:focus-within .rail__tip { opacity: 1; }
.rail__legend { display: flex; gap: 1.5rem; white-space: nowrap; }
.rail__legend span:last-child { color: var(--leaf); }
@media (max-width: 860px) { .rail { grid-template-columns: auto minmax(0, 1fr); gap: 1rem; } .rail__legend, .rail__chapter, .rail__midnight span { display: none; } }

/* el botón de pausa vive arriba del reloj al pie, no encima de él */
.motion-toggle { bottom: calc(var(--rail-h) + 12px + env(safe-area-inset-bottom, 0px)); }
/* en móvil se vuelve un círculo de 40 px con glifos (no emojis): el texto completo tapaba la nota bajo el CTA del hero */
@media (max-width: 860px) {
  .motion-toggle { width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 0; display: grid; place-items: center; right: 10px; }
  .motion-toggle::before { content: "▮▮"; font: 500 10px/1 var(--mono); letter-spacing: -1px; color: var(--ink); }
  .motion-toggle[aria-pressed="true"]::before { content: "▶"; letter-spacing: 0; }
}

/* ------------------------------------------------------------- footer -- */
.foot { border-top: 1px solid var(--line-strong); padding: 2rem var(--gutter) 3rem; font-size: 12px; color: var(--soft); }
.foot__inner { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: auto 1fr; gap: 1rem 3rem; align-items: baseline; }
.foot__name { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); margin: 0; }
.foot__links { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; margin: 0; }
.foot__small { grid-column: 1 / -1; letter-spacing: .02em; margin: 0; }
@media (max-width: 760px) { .foot__inner { grid-template-columns: 1fr; } }

/* ------------------------------------------------------ reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .h-blur { filter: none !important; opacity: 1 !important; }
}
@media print { .bar, .rail, .motion-toggle { display: none; } }