/* =========================================================================
   malo_ia · hoja de estilo  (v3 — editorial premium, nivel landonorris.com)
   - Paleta oliva calida + hueso + un acento verde esmeralda.
   - Secciones CLARAS alternando con OSCURAS (clave de la elegancia).
   - Mona Sans (grotesca variable, auto-hospedada) + Bricolage (display de
     caracter para palabras sueltas) + JetBrains Mono (metadatos).
   ========================================================================= */

@font-face {
  font-family: "Mona Sans";
  src: url("fonts/MonaSans.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens base --------------------------------------------------------- */
:root {
  --olive:   #0c1019;   /* fondo oscuro: tinta azul marino (la gorra) */
  --olive-2: #141a28;   /* superficie oscura */
  --olive-3: #1e263a;
  --black:   #070a11;   /* footer / negro calido */

  --paper:   #efece4;   /* fondo claro + texto sobre oscuro */
  --paper-2: #e3dfd3;   /* superficie clara */
  --ink-900: #0c1019;   /* texto sobre claro */
  --ink-600: #454859;
  --ink-400: #7a7d8c;
  --mist:    #b8bfd1;   /* texto tenue sobre oscuro */
  --mist-2:  #7d849a;

  --esmeralda:      #34e8a2;   /* acento sobre oscuro */
  --esmeralda-deep: #0a8a5c;   /* acento sobre claro */
  --esmeralda-ink:  #04140d;
  --sage:           #d6477f;   /* verde apagado secundario */

  --font-sans:    "Mona Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "Bricolage Grotesque", "Mona Sans", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  --wrap: 1360px;
  --gutter: clamp(1.1rem, 4.5vw, 5rem);

  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io:     cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  color-scheme: dark;
}

/* Tematizacion por seccion: cada seccion fija su contexto de color y los
   componentes leen las variables --bg/--fg/--line/--accent. */
.sec-dark {
  --bg: var(--olive); --surface: var(--olive-2); --surface-2: var(--olive-3);
  --fg: var(--paper); --fg-dim: var(--mist); --fg-faint: var(--mist-2);
  --line: rgba(239,236,228,0.14); --line-2: rgba(239,236,228,0.26);
  --accent: var(--esmeralda);
}
.sec-light {
  --bg: var(--paper); --surface: var(--paper-2); --surface-2: #d6d2c6;
  --fg: var(--ink-900); --fg-dim: var(--ink-600); --fg-faint: var(--ink-400);
  --line: rgba(17,17,18,0.14); --line-2: rgba(17,17,18,0.26);
  --accent: var(--esmeralda-deep);
}
section.sec-dark, section.sec-light, .sec-dark.panel, .sec-light.panel {
  background: var(--bg); color: var(--fg);
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.m-strict { scroll-behavior: auto; }
/* Lenis (scroll suave) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  background: var(--olive); color: var(--paper);
  font-family: var(--font-sans);
  font-size: 1rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--esmeralda); color: var(--esmeralda-ink); }
:focus-visible { outline: 2px solid var(--esmeralda); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--font-mono); }

.kicker, .eyebrow {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: 0.7em;
}
.eyebrow::before { content: ""; width: 1.8em; height: 2px; background: var(--accent); }

/* Titulos: Mona Sans pesada, mayuscula, tracking negativo (como Lando). */
.t-display {
  font-family: var(--font-sans); font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.92;
}

/* =========================================================================
   Loader
   ========================================================================= */
#loader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--esmeralda);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.3rem;
  transition: transform 720ms var(--ease-drawer), opacity 260ms ease 540ms;
}
#loader.done { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.loader-mark { width: clamp(72px, 11vw, 120px); height: auto; }
.loader-mark path, .loader-mark circle { stroke: var(--esmeralda-ink); stroke-width: 7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.loader-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--esmeralda-ink); }
.loader-bar { width: min(240px, 60vw); height: 2px; background: rgba(4,23,15,0.25); overflow: hidden; }
.loader-bar i { display: block; height: 100%; width: 0; background: var(--esmeralda-ink); }
.loader-bar i { animation: fill 1.05s var(--ease-out) forwards; }

@keyframes fill { to { width: 100%; } }
body.loading { overflow: hidden; }

/* =========================================================================
   Header
   ========================================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  --hdr-fg: var(--paper); --hdr-accent: var(--esmeralda);
  border-bottom: 1px solid transparent;
  transition: background 300ms var(--ease-out), border-color 300ms var(--ease-out);
}
.site-header.solid {
  --hdr-fg: var(--paper); --hdr-accent: var(--esmeralda);
  background: color-mix(in srgb, var(--olive) 82%, transparent);
  backdrop-filter: blur(14px) saturate(130%);
  border-bottom: 1px solid rgba(239,236,228,0.14);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: inline-flex; align-items: baseline; gap: 0.04em; font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; color: var(--hdr-fg); }
.brand .ia { color: var(--hdr-accent); }
.brand .cursor { display: inline-block; width: 0.5em; height: 1em; margin-left: 0.18em; background: var(--hdr-accent); transform: translateY(0.1em); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.nav { display: flex; align-items: center; gap: clamp(0.8rem, 2.5vw, 2rem); }
.nav a { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--hdr-fg) 68%, transparent); position: relative; padding: 0.3rem 0; transition: color 180ms var(--ease-out); }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--hdr-accent); transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease-out); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--hdr-fg); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .pill { border: 1px solid var(--hdr-accent); color: var(--hdr-accent); border-radius: 100px; padding: 0.4rem 0.95rem; }
.nav .pill::after { display: none; }
.nav .pill:hover { background: var(--hdr-accent); color: var(--bg, var(--olive)); }

/* =========================================================================
   Transicion de vista + line-art
   ========================================================================= */
.view { opacity: 1; }
.view.is-entering { opacity: 0; }
.view { transition: opacity 360ms var(--ease-out); }


.topo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.topo path { fill: none; stroke: var(--accent); stroke-width: 1.4; opacity: 0.28; }
.topo.ink path { stroke: var(--fg); opacity: 0.08; }
.draw path { stroke-dasharray: var(--len, 1400); stroke-dashoffset: var(--len, 1400); }
  .draw.in path { animation: draw 1.8s var(--ease-out) forwards; animation-delay: var(--dd, 0ms); }

@keyframes draw { to { stroke-dashoffset: 0; } }
.doodle { position: absolute; pointer-events: none; }
.doodle path { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* =========================================================================
   Hero (claro)
   ========================================================================= */
.hero { position: relative; overflow: hidden; padding-top: 110px; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); min-height: 88vh; display: flex; align-items: center; }
.hero .wrap { position: relative; z-index: 3; width: 100%; }
.hero-inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
@media (max-width: 880px) { .hero-inner { grid-template-columns: 1fr; gap: 2rem; } }

.hero-left { min-width: 0; }
.wordmark {
  font-family: var(--font-sans); font-weight: 800;
  font-size: clamp(3.8rem, 13vw, 11rem); line-height: 0.84;
  letter-spacing: -0.045em; text-transform: lowercase; color: var(--fg);
  margin-top: 1rem;
}
.wordmark .ia { color: var(--accent); }
.wordmark .reveal { display: inline-block; overflow: hidden; clip-path: inset(0 0 -16% 0); vertical-align: bottom; }
.wordmark .reveal > span { display: inline-block; transform: translateY(0); }
body.loading .wordmark .reveal > span, .hero.preload .wordmark .reveal > span { transform: translateY(106%); }
  .wordmark .reveal > span { transition: transform 820ms var(--ease-drawer); transition-delay: var(--d, 0ms); }

.hero-lede { max-width: 42ch; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.5; color: var(--fg-dim); margin-top: clamp(1.4rem, 3vw, 2rem); }
.hero-reveal-2 { opacity: 1; transform: translateY(0); }
body.loading .hero-reveal-2, .hero.preload .hero-reveal-2 { opacity: 0; transform: translateY(20px); }
  .hero-reveal-2 { transition: opacity 640ms var(--ease-out) 540ms, transform 640ms var(--ease-out) 540ms; }


/* widget "ultima entrada" */
.latest { display: inline-flex; flex-direction: column; margin-top: clamp(1.6rem, 4vw, 2.4rem); border: 1px solid var(--line-2); padding: 0.95rem 1.1rem; max-width: 340px; background: color-mix(in srgb, var(--surface) 55%, transparent); }
.latest .k { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.latest .t { font-weight: 700; font-size: 1.1rem; line-height: 1.15; margin-top: 0.45rem; letter-spacing: -0.01em; }
.latest .m { font-family: var(--font-mono); font-size: 0.66rem; color: var(--fg-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.5rem; }
.latest a { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.8rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.latest a:hover .arr { transform: translateX(3px); }
.latest a .arr { transition: transform 200ms var(--ease-out); }

/* marco de clip a la derecha (eco del retrato de Lando) */
.hero-right { position: relative; }
.hero-frame { position: relative; aspect-ratio: 4 / 5; border: 1px solid var(--line-2); overflow: hidden; background: var(--olive); }
.hero-frame video, .hero-frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-frame figcaption { position: absolute; left: 0; bottom: 0; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper); background: color-mix(in srgb, var(--olive) 72%, transparent); border-top: 1px solid rgba(239,236,228,.2); border-right: 1px solid rgba(239,236,228,.2); padding: 0.4rem 0.7rem; backdrop-filter: blur(6px); }
.hero-right .doodle { right: -6%; top: -8%; width: 120px; height: 70px; z-index: 4; }

.scroll-cue { position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%); z-index: 3; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-faint); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.scroll-cue .line { width: 1px; height: 34px; background: linear-gradient(var(--accent), transparent); }
.scroll-cue .line { animation: cue 1.8s var(--ease-io) infinite; transform-origin: top; }

@keyframes cue { 0%,100% { transform: scaleY(0.4); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* hero scroll-expand: el retrato crece al bajar y el titulo se parte (ScrollExpandMedia) */
.hero.scrollx { height: 220vh; min-height: 0; padding: 0; display: block; overflow: visible; }
.scrollx-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg); }
.shaderbg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; }
.scrollx .topo { z-index: 0; }
.scrollx .hero-kick { position: absolute; top: calc(66px + 1rem); left: var(--gutter); z-index: 3; }
.sx-title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; pointer-events: none; }
.sx-word { font-family: var(--font-sans); font-weight: 800; text-transform: lowercase; letter-spacing: -0.045em; font-size: clamp(3.4rem, 15vw, 13rem); line-height: 0.8; color: var(--fg); will-change: transform; }
.sx-word.ia { color: var(--accent); }
.sx-media { position: relative; z-index: 1; height: min(78vh, 740px); aspect-ratio: 318 / 485; transform: scale(var(--sx, 0.4)); transform-origin: center; will-change: transform; }
.sx-media .pcanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scrollx .scroll-cue { position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 3; }

/* orden de capas del hero integrado */
.scrollx .sx-title { z-index: 4; }
.scrollx .hero-kick { z-index: 5; }
.scrollx .scroll-cue { z-index: 5; }
.sx-media { z-index: 2; filter: grayscale(var(--sx-g, 0)); }
.sx-media .pcanvas { z-index: 1; }
.sx-media::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line-2); opacity: var(--sx-g, 0); pointer-events: none; z-index: 3; }
.sx-media .firma { position: absolute; left: 50%; top: 50%; width: 172%; transform: translate(-50%, -50%) rotate(-5deg); z-index: 4; overflow: visible; pointer-events: none; }

/* banners dentro del hero (fase B), detras del retrato */
.sx-banners { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(0.3rem, 2vw, 1rem); overflow: hidden; opacity: 0; will-change: opacity; }
.sx-banners .bt-row { font-size: clamp(3.4rem, 15vw, 13rem); line-height: 0.82; }
.sx-banners .bt-row.drift-l { color: color-mix(in srgb, var(--fg) 22%, transparent); }
.sx-banners .bt-row.drift-r { color: color-mix(in srgb, var(--accent) 34%, transparent); }

/* galaxia: planetas neon detallados que orbitan y giran, giro lento + tilt al mouse + estrellas */
.solar { position: absolute; left: 50%; top: 50%; width: min(132vmin, 1280px); aspect-ratio: 1; z-index: 0; pointer-events: none; opacity: 0.9;
  transform: translate(-50%, calc(-50% + var(--pty, 0px))) perspective(1300px) rotateX(var(--gx, 0deg)) rotateY(var(--gy, 0deg)) scale(var(--psc, 1));
  transition: transform 0.45s var(--ease-out); }
.solar { animation: solarfade 5s ease forwards; }

@keyframes solarfade { 0% { opacity: 0; } 16% { opacity: 1; } 100% { opacity: 1; } }
.solar .stars { position: absolute; inset: 0; opacity: 0.4; }
.solar .star { position: absolute; border-radius: 50%; background: #e4fff5; box-shadow: 0 0 5px #bfffe6; }
.solar .star { animation: twinkle 3s ease-in-out infinite; }

.galaxy { position: absolute; inset: 0; }
.galaxy { animation: galaxyspin 160s linear infinite; }

@keyframes galaxyspin { to { transform: rotate(360deg); } }
.solar .sun { position: absolute; left: 50%; top: 50%; width: 26%; height: 26%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent) 0%, color-mix(in srgb, #2b8cff 8%, transparent) 45%, transparent 70%); }
.solar .sun { animation: twinkle 3.6s ease-in-out infinite; }

.solar .orbit { position: absolute; left: 50%; top: 50%; border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 50%; transform: translate(-50%, -50%); }
.solar .o1 { width: 30%; height: 30%; }
.solar .o2 { width: 54%; height: 54%; }
.solar .o3 { width: 76%; height: 76%; }
.solar .o4 { width: 98%; height: 98%; }
.solar .planet { position: absolute; top: -78px; left: calc(50% - 78px); width: 156px; height: 156px; color: var(--pc); }
.solar .o2 .planet { width: 210px; height: 210px; top: -105px; left: calc(50% - 105px); }
.solar .o4 .planet { width: 116px; height: 116px; top: -58px; left: calc(50% - 58px); }
.solar .planet canvas { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 14px var(--pc)) drop-shadow(0 0 4px var(--pc)); }
.solar .gsurf { animation: gsurf 16s linear infinite; }
  .solar .o2 .gsurf { animation-duration: 24s; }
  .solar .o3 .gsurf { animation-duration: 11s; }
  .solar .o4 .gsurf { animation-duration: 20s; }
  .solar .garc.a { animation: garcA 5.2s linear infinite; }
  .solar .garc.b { animation: garcB 7.4s linear infinite reverse; }

@keyframes gsurf { to { transform: translateX(-100px); } }
@keyframes garcA { to { stroke-dashoffset: -231; } }
@keyframes garcB { to { stroke-dashoffset: -211; } }
.solar .c-gr { --pc: #1dffab; }
.solar .c-bl { --pc: #2b8cff; }
.solar .c-mg { --pc: #ff3d9a; }
.solar .c-vi { --pc: #9b5bff; }
.comet { position: absolute; left: 0; top: 20%; width: 100px; height: 2px; background: linear-gradient(90deg, transparent, #1dffab); border-radius: 2px; filter: drop-shadow(0 0 12px #1dffab); opacity: 0; }
.comet.comet2 { top: 66%; background: linear-gradient(90deg, transparent, #ff3d9a); filter: drop-shadow(0 0 12px #ff3d9a); }
.solar .o1 { animation: orbit 11s linear infinite; }
  .solar .o2 { animation: orbit 19s linear infinite reverse; }
  .solar .o3 { animation: orbit 29s linear infinite; }
  .solar .o4 { animation: orbit 44s linear infinite reverse; }
  .solar .o1 .planet { animation: spin 11s linear infinite reverse; }
  .solar .o2 .planet { animation: spin 19s linear infinite; }
  .solar .o3 .planet { animation: spin 29s linear infinite reverse; }
  .solar .o4 .planet { animation: spin 44s linear infinite; }
  .comet { animation: comet 7s linear infinite; }
  .comet.comet2 { animation: comet 9s linear infinite 3s; }

@keyframes orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes comet { 0% { transform: translate(-25vw, -8vh) rotate(22deg); opacity: 0; } 8% { opacity: 1; } 42% { transform: translate(72vw, 28vh) rotate(22deg); opacity: 0; } 100% { opacity: 0; } }

/* campo de estrellas/chispas del hero (estilo malmercado): titilan y se mueven con el scroll */
.hero-stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; will-change: transform; }
.hero-stars .star { position: absolute; border-radius: 50%; background: var(--sc, #e8fff6); box-shadow: 0 0 7px var(--sc, #bfffe6), 0 0 2px #fff; }
.hero-stars .star { animation: twinkle 3.2s ease-in-out infinite; }

.hero-stars .star.spark::before, .hero-stars .star.spark::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--sc, #fff); box-shadow: 0 0 6px var(--sc, #fff); }
.hero-stars .star.spark::before { width: 11px; height: 1px; transform: translate(-50%, -50%); }
.hero-stars .star.spark::after { width: 1px; height: 11px; transform: translate(-50%, -50%); }

/* =========================================================================
   Marquee
   ========================================================================= */
.marquee { background: var(--black); border-block: 1px solid rgba(239,236,228,0.1); overflow: hidden; padding-block: 0.8rem; display: flex; user-select: none; }
.marquee-track { display: flex; gap: 2.6rem; white-space: nowrap; padding-left: 2.6rem; will-change: transform; }
.marquee-track { animation: scroll-x 42s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; }

@keyframes scroll-x { to { transform: translateX(-50%); } }
.marquee-item { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist); display: inline-flex; align-items: center; gap: 2.6rem; }
.marquee-item::after { content: "✦"; color: var(--esmeralda); }

/* =========================================================================
   Manifesto (oscuro)
   ========================================================================= */
.manifesto { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 10vw, 8rem); }
.manifesto .wrap { position: relative; z-index: 3; }
.big-quote {
  font-family: var(--font-sans); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.9rem, 5.6vw, 4.6rem); line-height: 1.0; letter-spacing: -0.035em;
  max-width: 18ch; margin-top: 1.4rem; text-wrap: balance;
}
.big-quote .hl { color: var(--accent); }

/* mensaje que se escribe solo (palabras resaltadas + cursor) */
.msg-text { font-family: var(--font-sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; line-height: 1.04; font-size: clamp(1.8rem, 5.6vw, 4.4rem); color: var(--fg); max-width: 20ch; margin-top: 1.4rem; }
.msg-text .hl { font-family: var(--font-display); color: var(--accent); }
.msg-text.typing .ch { display: none; }
.msg-text .ch.on { display: inline; }
.caret { display: inline-block; width: 0.1em; height: 0.78em; background: var(--accent); margin-left: 0.07em; vertical-align: -0.04em; box-shadow: 0 0 10px var(--accent); }
.caret { animation: blink 1s steps(1) infinite; }

html.m-strict .caret { display: none; }
.quote-sub { max-width: 54ch; color: var(--fg-dim); font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.6; margin-top: 1.6rem; }

/* dispersion editorial de clips rotulados */
.scatter { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(0.8rem, 2vw, 1.4rem); margin-top: clamp(2.2rem, 5vw, 3.6rem); align-items: start; }
.scatter .plate { position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.scatter .plate.a { grid-column: 1 / span 4; aspect-ratio: 3/4; }
.scatter .plate.b { grid-column: 5 / span 4; aspect-ratio: 3/4; margin-top: clamp(1.4rem, 4vw, 3rem); }
.scatter .plate.c { grid-column: 9 / span 4; aspect-ratio: 3/4; }
@media (max-width: 720px) { .scatter .plate { grid-column: span 6 !important; margin-top: 0 !important; } }
@media (max-width: 460px) { .scatter .plate { grid-column: span 12 !important; } }
.scatter .plate video, .scatter .plate img { width: 100%; height: 100%; object-fit: cover; }
.scatter .cap { position: absolute; left: 0; bottom: 0; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper); background: color-mix(in srgb, var(--olive) 70%, transparent); border-top: 1px solid rgba(239,236,228,.18); border-right: 1px solid rgba(239,236,228,.18); padding: 0.35rem 0.6rem; backdrop-filter: blur(5px); }
.pull { font-family: var(--font-sans); font-weight: 400; text-transform: uppercase; font-size: clamp(1.3rem, 3.4vw, 2.6rem); line-height: 1.08; letter-spacing: -0.02em; max-width: 24ch; margin-top: clamp(2.4rem, 6vw, 4rem); color: var(--fg); }
.pull .hl { color: var(--accent); }

/* =========================================================================
   Divisor grande (tipo ON / TRACK)
   ========================================================================= */
.divider { padding-block: clamp(2.6rem, 7vw, 5rem); }
.divider-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1.4rem; }
.huge { font-family: var(--font-sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.82; font-size: clamp(2.8rem, 11vw, 9rem); }
.huge .stroke { -webkit-text-stroke: 1.5px var(--fg); color: transparent; display: block; }
.huge .solid { display: block; }
.huge .solid .bd { font-family: var(--font-display); font-weight: 800; color: var(--accent); }
.divider-desc { max-width: 38ch; color: var(--fg-dim); line-height: 1.6; }
.divider-desc .go { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; color: var(--accent); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* =========================================================================
   Galeria editorial (claro)
   ========================================================================= */
.gallery { padding-block: clamp(2.6rem, 6vw, 4.5rem); }
.gallery-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.gallery-head h2 { font-family: var(--font-sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.035em; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 0.95; }
.gallery-head .count { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }

.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2.2vw, 1.8rem); }
.card { grid-column: span 6; display: flex; flex-direction: column; position: relative; }
.card.feature { grid-column: span 12; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1rem, 3vw, 2.4rem); align-items: center; }
@media (max-width: 820px) { .card, .card.feature { grid-column: span 12; display: flex; } }

.card-media { position: relative; overflow: hidden; border: 1px solid var(--line-2); background: var(--surface); aspect-ratio: 16/10; }
.card.feature .card-media { aspect-ratio: 4/3; }
.card-media video, .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
@media (hover: hover) { .card:hover .card-media video, .card:hover .card-media img { transform: scale(1.05); } }
.card-panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--surface); }
.card-panel .glyph { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.4rem, 10vw, 8rem); color: color-mix(in srgb, var(--fg) 12%, transparent); line-height: 1; transition: color 400ms var(--ease-out); }
@media (hover: hover) { .card:hover .card-panel .glyph { color: color-mix(in srgb, var(--accent) 55%, transparent); } }
.card-cap { position: absolute; left: 0; bottom: 0; z-index: 2; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper); background: color-mix(in srgb, var(--olive) 72%, transparent); border-top: 1px solid rgba(239,236,228,.18); border-right: 1px solid rgba(239,236,228,.18); padding: 0.38rem 0.65rem; backdrop-filter: blur(5px); }
.card-badge { position: absolute; right: 0.6rem; top: 0.6rem; z-index: 2; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--esmeralda-ink); background: var(--esmeralda); padding: 0.18rem 0.5rem; border-radius: 100px; }
.card-info { display: flex; align-items: flex-start; gap: 1rem; padding-top: 0.95rem; }
.card.feature .card-info { flex-direction: column; gap: 0.6rem; padding-top: 0; }
.card-num { font-family: var(--font-mono); font-size: 0.76rem; color: var(--fg-faint); padding-top: 0.35rem; min-width: 3.2em; }
.card-body { flex: 1; min-width: 0; }
.card-title { font-family: var(--font-sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 0.98; }
.card.feature .card-title { font-size: clamp(2rem, 5vw, 3.8rem); }
.card-sub { color: var(--fg-dim); line-height: 1.5; margin-top: 0.55rem; max-width: 46ch; }
.card-go { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); align-self: center; white-space: nowrap; transition: transform 260ms var(--ease-out); }
.card.feature .card-go { align-self: flex-start; margin-top: 0.4rem; }
@media (hover: hover) { .card:hover .card-go { transform: translateX(4px); } }

.reveal-up { opacity: 1; transform: translateY(0); }
.reveal-up.pending { opacity: 0; transform: translateY(26px); }
  .reveal-up { transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); }


/* =========================================================================
   CTA (oscuro)
   ========================================================================= */
.cta { position: relative; overflow: hidden; padding-block: clamp(3.2rem, 9vw, 7rem); text-align: center; }
.cta h2 { font-family: var(--font-sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; font-size: clamp(2.2rem, 7vw, 5.5rem); line-height: 0.9; }
.cta h2 .hl { font-family: var(--font-display); color: var(--accent); }
.cta p { max-width: 48ch; margin: 1.2rem auto 0; color: var(--fg-dim); }
.btn { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.8rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--esmeralda-ink); background: var(--esmeralda); border-radius: 100px; padding: 0.85rem 1.4rem; transition: transform 160ms var(--ease-out), box-shadow 240ms var(--ease-out); }
.btn:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--esmeralda) 25%, transparent); }
.btn:active { transform: scale(0.97); }

/* bloques tipo ON / OFF TRACK */
.tracks { padding-block: clamp(3rem, 8vw, 6rem); }
.tracks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 760px) { .tracks-grid { grid-template-columns: 1fr; } }
.track { position: relative; display: flex; flex-direction: column; gap: 0.85rem; padding: clamp(1.6rem, 4vw, 3rem); background: var(--bg); transition: background 320ms var(--ease-out); overflow: hidden; min-height: clamp(260px, 32vw, 360px); }
.track::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform 360ms var(--ease-out); }
@media (hover: hover) { .track:hover { background: var(--surface); } .track:hover::before { transform: scaleY(1); } .track:hover .track-go .arr { transform: translateX(5px); } }
.track:active { transform: scale(0.995); }
.track-k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); }
.track-title { font-family: var(--font-sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.82; font-size: clamp(2.4rem, 7vw, 5rem); }
.track-title .stroke { display: block; -webkit-text-stroke: 1.5px var(--fg); color: transparent; }
.track-title .solid { display: block; }
.track-title .solid .bd { font-family: var(--font-display); color: var(--fg); }
.track-title .solid.em .bd { color: var(--accent); }
.track-desc { max-width: 42ch; color: var(--fg-dim); line-height: 1.6; }
.track-go { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.6rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.track-go .arr { transition: transform 240ms var(--ease-out); }

/* salón de la fama: grid de clips */
.hof { padding-block: clamp(2.6rem, 6vw, 4.5rem); }
.hof-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.hof-title { font-family: var(--font-sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.035em; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 0.95; }
.hof-title .bd { font-family: var(--font-display); color: var(--accent); }
.hof-head .count { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.hof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.8rem, 2vw, 1.4rem); }
@media (max-width: 860px) { .hof-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .hof-grid { grid-template-columns: 1fr; } }
.hof-media { position: relative; overflow: hidden; border: 1px solid var(--line-2); background: var(--olive); aspect-ratio: 3 / 4; }
.hof-media video { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease-out); }
@media (hover: hover) { .hof-card:hover .hof-media video { transform: scale(1.05); } }
.hof-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(12,17,14,0.62)); pointer-events: none; }
.hof-cap { position: absolute; left: 0; bottom: 0; z-index: 2; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper); background: color-mix(in srgb, var(--olive) 72%, transparent); border-top: 1px solid rgba(239,236,228,.18); border-right: 1px solid rgba(239,236,228,.18); padding: 0.35rem 0.55rem; backdrop-filter: blur(5px); }

/* =========================================================================
   Detalle de tema (oscuro)
   ========================================================================= */
.detail { padding-top: 110px; padding-bottom: clamp(3rem, 8vw, 6rem); }
.back { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim); padding-block: 1.1rem; transition: color 180ms var(--ease-out); }
.back:hover { color: var(--accent); }
.back:hover .arr { transform: translateX(-4px); }
.back .arr { transition: transform 200ms var(--ease-out); }
.detail-head { border-top: 1px solid var(--line); padding-top: clamp(1.4rem, 4vw, 2.4rem); }
.detail-head .kicker { color: var(--accent); }
.detail-title { font-family: var(--font-sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; font-size: clamp(2.6rem, 9vw, 7rem); line-height: 0.86; margin-top: 0.7rem; text-wrap: balance; }
.detail-desc { max-width: 62ch; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--fg); margin-top: 1.3rem; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.6rem; }
.tag { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); border: 1px solid var(--line-2); padding: 0.3rem 0.6rem; border-radius: 100px; transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out); }
.tag:hover { border-color: var(--accent); color: var(--fg); }
.entries-label { display: flex; align-items: center; justify-content: space-between; margin-top: clamp(2.4rem, 6vw, 4rem); padding-bottom: 0.9rem; border-bottom: 1px solid var(--line-2); }
.entries-label h3 { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-dim); }
.entry { border-bottom: 1px solid var(--line); padding-block: clamp(1.3rem, 3vw, 2rem); display: grid; grid-template-columns: 92px 1fr auto; gap: clamp(1rem, 3vw, 2.2rem); align-items: start; }
@media (max-width: 680px) { .entry { grid-template-columns: 1fr; gap: 0.9rem; } .entry .entry-action { justify-self: start; } }
.chip { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.28rem 0.5rem; border: 1px solid var(--line-2); color: var(--fg-dim); justify-self: start; white-space: nowrap; border-radius: 100px; }
.chip[data-tipo="video"] { color: var(--esmeralda-ink); background: var(--esmeralda); border-color: var(--esmeralda); }
.chip[data-tipo="enlace"], .chip[data-tipo="doc"] { color: var(--fg); }
.chip[data-tipo="nota"] { color: var(--fg-faint); }
.entry-body { min-width: 0; }
.entry-title { font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
.entry-meta { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--fg-faint); text-transform: uppercase; margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.entry-meta .new { color: var(--accent); }
.entry-note { color: var(--fg-dim); line-height: 1.55; margin-top: 0.7rem; max-width: 64ch; }
.entry-action { align-self: center; }
.open-link { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); border: 1px solid var(--line-2); padding: 0.55rem 0.9rem; white-space: nowrap; border-radius: 100px; transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 160ms var(--ease-out); }
.open-link:hover { border-color: var(--accent); color: var(--accent); }
.open-link:active { transform: scale(0.97); }
.open-link:hover .arr { transform: translate(2px, -2px); }
.open-link .arr { transition: transform 200ms var(--ease-out); }
.entry.is-video { grid-template-columns: 92px 1fr; }
@media (max-width: 680px) { .entry.is-video { grid-template-columns: 1fr; } }
.video-wrap { grid-column: 2 / -1; margin-top: 1.1rem; border: 1px solid var(--line-2); background: #000; max-width: 420px; }
@media (max-width: 680px) { .video-wrap { grid-column: 1 / -1; } }
.video-wrap video { width: 100%; height: auto; display: block; }

/* =========================================================================
   About (claro)
   ========================================================================= */
.about { padding-top: 110px; padding-bottom: clamp(3rem, 9vw, 6rem); }
.about > .back { display: inline-flex; }
.about > .eyebrow { display: flex; margin-top: 0.3rem; }
.about-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.4rem, 4vw, 2.4rem); border-top: 1px solid var(--line); padding-top: clamp(1.6rem, 4vw, 2.6rem); }
@media (min-width: 860px) { .about-grid { grid-template-columns: 1.5fr 1fr; } }
.about h1 { font-family: var(--font-sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; font-size: clamp(2.6rem, 8vw, 6rem); line-height: 0.88; }
.about p { max-width: 60ch; color: var(--fg); line-height: 1.7; margin-top: 1.1rem; }
.about .lead { font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.about aside { font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.8; color: var(--fg-dim); }
.about aside dl { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.2rem; }
.about aside dt { color: var(--fg-faint); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; }
.about aside dd { color: var(--fg); }

/* =========================================================================
   Footer (negro calido)
   ========================================================================= */
.site-footer { background: var(--black); color: var(--paper); border-top: 1px solid rgba(239,236,228,0.1); padding-block: clamp(2.6rem, 6vw, 4.5rem); position: relative; overflow: hidden; }
.site-footer .big { font-family: var(--font-sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; font-size: clamp(2.6rem, 12vw, 11rem); line-height: 0.82; text-wrap: balance; }
.site-footer .big .hl { font-family: var(--font-display); color: var(--esmeralda); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: clamp(1.6rem, 4vw, 2.4rem); padding-top: 1.4rem; border-top: 1px solid rgba(239,236,228,0.12); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist-2); }
.footer-row a { color: var(--mist); transition: color 180ms var(--ease-out); }
.footer-row a:hover { color: var(--esmeralda); }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: clamp(2rem, 6vw, 4rem); }
@media (max-width: 680px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
.fcol { display: flex; flex-direction: column; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.82rem; }
.fcol h3 { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist-2); margin-bottom: 0.4rem; }
.fcol a { color: var(--mist); transition: color 180ms var(--ease-out); width: fit-content; }
.fcol a:hover { color: var(--esmeralda); }
.fcol span { color: var(--mist); line-height: 1.5; max-width: 32ch; }
.fcol span.muted { color: var(--mist-2); }

/* =========================================================================
   Hero de retrato (efecto de luz que activa color + paralaje pseudo-3D)
   ========================================================================= */
.hero.portrait-hero { display: block; min-height: 100vh; padding-top: 86px; padding-bottom: 2.5rem; }
.hero.portrait-hero .wrap { position: relative; z-index: 3; height: 100%; }
.hero-inner2 { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 120px); gap: 0.6rem; text-align: center; }
.hero-kick { position: absolute; top: 0.6rem; left: 0; }
.hero-portrait-wrap { perspective: 1100px; width: 100%; display: flex; justify-content: center; }
.portrait {
  position: relative;
  width: min(66vmin, 400px);
  aspect-ratio: 318 / 485;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(var(--px, 0), var(--py, 0), 0);
  transform-style: preserve-3d;
  will-change: transform;
}
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.pcanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.portrait .p-base { filter: grayscale(1) brightness(0.52) contrast(1.08); }
.portrait .p-color {
  filter: saturate(1.18) contrast(1.04);
  -webkit-mask-image: radial-gradient(circle at var(--mx, 52%) var(--my, 34%), #000 0%, #000 20%, rgba(0,0,0,0.25) 38%, transparent 50%);
          mask-image: radial-gradient(circle at var(--mx, 52%) var(--my, 34%), #000 0%, #000 20%, rgba(0,0,0,0.25) 38%, transparent 50%);
}
.portrait .p-light {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle at var(--mx, 52%) var(--my, 34%), color-mix(in srgb, var(--esmeralda) 46%, transparent) 0%, transparent 42%);
}
.hero.lit-full .portrait .p-color { -webkit-mask-image: none; mask-image: none; filter: saturate(1.1); }
.hero.lit-full .portrait .p-light { opacity: 0.35; }
.ph-note { margin-top: 0.8rem; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); opacity: 0.7; }

/* ensamblado del hero: la pagina se va armando */
.hero-portrait-wrap { transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-drawer), filter 0.9s var(--ease-out); }
.hero-kick, .ph-note { transition: opacity 0.7s var(--ease-out) 0.5s; }
.portrait-hero.preload .hero-portrait-wrap { opacity: 0; transform: scale(0.93) translateY(26px); filter: blur(12px); }
  .portrait-hero.preload .hero-kick, .portrait-hero.preload .ph-note { opacity: 0; }


/* firma: "malo_ia" tipeado que se revela sobre el retrato */
.signature { position: absolute; left: 50%; top: 53%; z-index: 5; pointer-events: none; transform: translate(-50%, -50%) rotate(-5deg); }
.sigword {
  display: inline-block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 9vw, 3.6rem); line-height: 1; letter-spacing: -0.02em;
  text-transform: lowercase; color: var(--esmeralda); white-space: nowrap;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--esmeralda) 50%, transparent));
  clip-path: inset(-28% 100% -28% 0);
}
.signature.in .sigword { transition: clip-path 0.8s var(--ease-out); clip-path: inset(-28% -12% -28% 0); }
html.m-strict .sigword { clip-path: none; }

/* seccion retrato (como la "message" de Lando): banners + retrato enmarcado + firma */
.retrato { position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; padding-block: clamp(3rem, 8vw, 6rem); }
.retrato .wrap { position: relative; z-index: 3; display: flex; justify-content: center; }
/* banners enormes que se parten, detras del retrato */
.retrato .backtext { justify-content: center; gap: clamp(0.4rem, 2vw, 1.2rem); }
.retrato .bt-row { font-size: clamp(3.4rem, 15vw, 13rem); line-height: 0.82; }
.retrato .bt-row.drift-l { color: color-mix(in srgb, var(--fg) 22%, transparent); }
.retrato .bt-row.drift-r { color: color-mix(in srgb, var(--accent) 34%, transparent); }
.retrato-frame { position: relative; width: min(60vmin, 440px); max-width: 100%; aspect-ratio: 318 / 485; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--surface) 68%, transparent); }
.retrato-frame img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05) brightness(0.9); opacity: 0.92; }
.retrato-frame .firma { position: absolute; left: 50%; top: 48%; width: 178%; transform: translate(-50%, -50%) rotate(-5deg); z-index: 4; overflow: visible; pointer-events: none; }
.firma path { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 50%, transparent)); }
.retrato-frame.reveal-up { transition: opacity 0.85s var(--ease-out), transform 1s var(--ease-drawer); transform: scale(1); }
.retrato-frame.reveal-up.pending { opacity: 0; transform: scale(1.14); }


/* tira: manifiesto + ultima entrada */
.intro-strip { padding-block: clamp(2.6rem, 7vw, 5rem); }
.intro-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; }
.intro-inner .hero-lede { max-width: 54ch; color: var(--fg-dim); }
.intro-inner .latest { text-align: left; }

/* =========================================================================
   Statement: aqui "aparece" malo_ia, con letras de fondo en movimiento
   ========================================================================= */
.statement { position: relative; overflow: hidden; padding-block: clamp(3rem, 9vw, 7rem); }
.backtext { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; pointer-events: none; user-select: none; overflow: hidden; }
.bt-row { white-space: nowrap; font-family: var(--font-sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; font-size: clamp(3rem, 12vw, 11rem); line-height: 0.9; color: color-mix(in srgb, var(--fg) 7%, transparent); will-change: transform; }
.bt-row.drift-l { animation: drift-l 34s linear infinite; }
  .bt-row.drift-r { animation: drift-r 40s linear infinite; }

@keyframes drift-l { from { transform: translateX(0); } to { transform: translateX(-33.33%); } }
@keyframes drift-r { from { transform: translateX(-33.33%); } to { transform: translateX(0); } }
.statement-inner { position: relative; z-index: 3; }
.statement .wordmark { margin-top: 0; }
.statement .hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1.6rem; margin-top: clamp(1.4rem, 4vw, 2.4rem); }

/* ====================================================================
   Lluvia de clips (slide-rain estilo Lando)
   ==================================================================== */
.sliderain { position: relative; overflow: hidden; padding: clamp(3rem, 7vw, 5.5rem) 0; }
.sliderain-head { position: relative; z-index: 2; text-align: center; margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.sliderain-title { font-size: clamp(2.2rem, 8vw, 5rem); line-height: 0.92; letter-spacing: -0.02em; }
.sliderain-title .bd { color: var(--accent); }
.sliderain-sub { color: var(--fg-dim); margin-top: 0.7rem; font-size: 0.95rem; }
.rain { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.6rem, 1.4vw, 1.1rem); height: min(76vh, 660px); padding: 0 var(--gutter);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 11%, #000 89%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 11%, #000 89%, transparent); }
.rain-col { overflow: hidden; }
.rain-run { display: flex; flex-direction: column; gap: clamp(0.6rem, 1.4vw, 1.1rem); will-change: transform; }
.rain-col.up .rain-run { animation: rainup 36s linear infinite; }
  .rain-col.down .rain-run { animation: raindown 44s linear infinite; }
  .rain-col.slow .rain-run { animation-duration: 56s; }
  .rain:hover .rain-run { animation-play-state: paused; }

@keyframes rainup { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes raindown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.rslide { position: relative; display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 9 / 12; background: #0b0f16; text-decoration: none; }
.rslide img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.35) brightness(0.82); transition: transform 0.5s var(--ease-out), filter 0.5s var(--ease-out); }
.rslide:hover img { transform: scale(1.06); filter: grayscale(0) brightness(1); }
.rslide-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.8rem 0.7rem 0.6rem; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: linear-gradient(to top, rgba(2,5,10,0.92), transparent); }
.rslide-play { position: absolute; top: 0.55rem; right: 0.6rem; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--esmeralda-ink); font-size: 0.55rem; opacity: 0; transform: scale(0.8); transition: opacity 0.3s, transform 0.3s; }
.rslide:hover .rslide-play { opacity: 1; transform: scale(1); }
@media (max-width: 720px) {
  .rain { grid-template-columns: repeat(2, 1fr); height: 58vh; }
  .rain-col.slow { display: none; }
}

/* ====================================================================
   Blog (pagina de detalle enriquecida)
   ==================================================================== */
.detail-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.5rem 0 0; }
.repo-btn, .link-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.62rem 1rem; border-radius: 100px; text-decoration: none; transition: transform 0.2s var(--ease-out), background 0.2s, border-color 0.2s, color 0.2s; }
.repo-btn { background: var(--accent); color: var(--esmeralda-ink); border: 1px solid var(--accent); }
.repo-btn:hover { transform: translateY(-2px); }
.repo-btn .arr { opacity: 0.7; }
.link-btn { background: transparent; color: var(--fg); border: 1px solid var(--line-2); }
.link-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.detail-cover { margin: 1.8rem 0 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.detail-cover img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.cpb { margin: 2.2rem 0 0; }
.cpb-track { display: grid; }
.cpb-slide { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); pointer-events: none; border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.4rem, 3.5vw, 2.6rem); background: color-mix(in srgb, var(--fg) 4%, transparent); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.cpb-slide.on { opacity: 1; transform: none; pointer-events: auto; }
.cpb-kind { display: inline-block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.26rem 0.65rem; border-radius: 100px; margin-bottom: 0.9rem; }
.cpb-contexto { background: color-mix(in srgb, #2b8cff 24%, transparent); color: #a9d4ff; }
.cpb-dolor { background: color-mix(in srgb, #ff3d9a 24%, transparent); color: #ffabd1; }
.cpb-beneficio { background: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--accent); }
.cpb-title { font-size: clamp(1.3rem, 3.6vw, 2.1rem); margin-bottom: 0.5rem; letter-spacing: -0.01em; }
.cpb-text { color: var(--fg-dim); font-size: clamp(1rem, 2.2vw, 1.15rem); line-height: 1.55; max-width: 60ch; }
.cpb-nav { display: flex; align-items: center; gap: 1rem; margin-top: 1.1rem; }
.cpb-prev, .cpb-next { background: transparent; border: 1px solid var(--line-2); color: var(--fg); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 1rem; transition: border-color 0.2s, color 0.2s; }
.cpb-prev:hover, .cpb-next:hover { border-color: var(--accent); color: var(--accent); }
.cpb-dots { display: flex; gap: 0.45rem; }
.cpb-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--line-2); cursor: pointer; padding: 0; transition: background 0.2s, transform 0.2s; }
.cpb-dot.on { background: var(--accent); transform: scale(1.35); }
.blogbody { margin: 2.2rem 0 0; max-width: 68ch; }
.blogh { font-size: clamp(1.2rem, 3vw, 1.7rem); margin: 1.7rem 0 0.5rem; letter-spacing: -0.01em; }
.blogp { color: var(--fg-dim); line-height: 1.7; margin: 0 0 1rem; font-size: 1.02rem; }
.blogfig { margin: 1.5rem 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.blogfig img { width: 100%; display: block; }
.blogfig figcaption, .bloggal-item figcaption { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-faint); padding: 0.5rem 0.7rem; }
.bloggal { margin: 1.2rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.9rem; }
.bloggal-item { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.bloggal-item img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; }

/* ====================================================================
   Historia — scatter con scroll-scrub (deriva a la derecha + zoom) estilo Lando
   ==================================================================== */
.story { position: relative; height: 330vh; }
.story > .topo { position: absolute; inset: 0; z-index: 0; opacity: 0.6; }
.story-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--bg); }
.story-cards { position: absolute; inset: 0; z-index: 1; }
.story-track { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: flex-start; gap: clamp(1.4rem, 5vw, 4rem); padding: 0 8vw; will-change: transform; }
.story-card { position: relative; flex: 0 0 auto; width: clamp(140px, 17vw, 230px); margin-top: calc(var(--y, 4%) + 7vh); transform-origin: center center; will-change: transform, opacity; }
.story-cap { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--fg) 60%, transparent); margin-bottom: 0.45rem; display: block; }
.story-card > a { display: block; border-radius: 8px; overflow: hidden; box-shadow: 0 26px 64px rgba(18, 20, 14, 0.24); }
.story-card img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 5; filter: grayscale(0.55) contrast(1.02); transition: filter 0.5s var(--ease-out); }
.story-card:hover img { filter: grayscale(0); }
.s-hero img { aspect-ratio: 1 / 1; }
.s-c img { aspect-ratio: 4 / 3; }
.story-panel { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 4 / 5; padding: 0.85rem; background: var(--surface); color: var(--fg); text-decoration: none; }
.sp-num { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); }
.sp-t { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.story-center { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); width: min(720px, 86vw); text-align: center; z-index: 3; }
.story-quote { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: clamp(1.7rem, 4.8vw, 3.2rem); line-height: 1.16; letter-spacing: 0; color: var(--fg); }
.story-quote .kw { font-style: italic; color: color-mix(in srgb, var(--fg) 46%, transparent); transition: color 0.5s var(--ease-out); }
.story-quote .kw.on { color: var(--accent); }
.story-sign { margin-top: 1.3rem; display: flex; justify-content: center; }
.story-sign svg { width: 130px; height: auto; color: var(--fg); opacity: 0.72; overflow: visible; }
@media (max-width: 720px) {
  .story { height: 420vh; }
  .story-card { width: 44vw; }
}

/* ====================================================================
   Paletas (selector abajo a la izquierda). La base 'ink' vive en :root.
   ==================================================================== */
:root[data-theme="neon"] {
  --olive: #0f0f23;
  --olive-2: #17173a;
  --olive-3: #20204d;
  --black: #08081a;
  --paper: #f6f1f7;
  --paper-2: #ebe3ee;
  --ink-900: #0f0f23;
  --ink-600: #4a4766;
  --ink-400: #807d9a;
  --mist: #bdbcdc;
  --mist-2: #8583ab;
  --esmeralda: #ff5577;
  --esmeralda-deep: #be123c;
  --esmeralda-ink: #1a0309;
  --sage: #8b5cf6;
}
:root[data-theme="ember"] {
  --olive: #100f24;
  --olive-2: #1b1a3e;
  --olive-3: #26255a;
  --black: #08071a;
  --paper: #f5efe6;
  --paper-2: #eae2d5;
  --ink-900: #100f24;
  --ink-600: #4b4863;
  --ink-400: #84819c;
  --mist: #c0bfdc;
  --mist-2: #8886ad;
  --esmeralda: #ff8a3d;
  --esmeralda-deep: #c2410c;
  --esmeralda-ink: #1c0a02;
  --sage: #ffcf70;
}
:root[data-theme="gold"] {
  --olive: #1c1917;
  --olive-2: #292524;
  --olive-3: #36312d;
  --black: #100e0d;
  --paper: #f5f1e8;
  --paper-2: #e9e3d4;
  --ink-900: #1c1917;
  --ink-600: #55504a;
  --ink-400: #8a847b;
  --mist: #cfc8bb;
  --mist-2: #968f82;
  --esmeralda: #e6b030;
  --esmeralda-deep: #a16207;
  --esmeralda-ink: #1c1100;
  --sage: #c8794a;
}
:root[data-theme="cinema"] {
  --olive: #07070b;
  --olive-2: #101018;
  --olive-3: #1a1a26;
  --black: #030305;
  --paper: #eeeef4;
  --paper-2: #e1e1ea;
  --ink-900: #07070b;
  --ink-600: #464659;
  --ink-400: #7d7d92;
  --mist: #b9b9cf;
  --mist-2: #80809a;
  --esmeralda: #7d89ee;
  --esmeralda-deep: #3f4bb8;
  --esmeralda-ink: #070914;
  --sage: #c084fc;
}
/* YouTube: portada que carga el reproductor al hacer clic */
.yt-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-wrap.yt { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.video-wrap.yt.yt-short { aspect-ratio: 9 / 16; max-width: 360px; }
.video-wrap.yt iframe, .yt-facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-facade { cursor: pointer; background-size: cover; background-position: center; padding: 0; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--esmeralda-ink); font-size: 1.3rem; padding-left: 4px; transition: transform 0.2s var(--ease-out); }
.yt-facade:hover .yt-play { transform: scale(1.1); }

/* ====================================================================
   Efectos portados de mal-gusto-site (tienda): WordsPullUp, coverflow 3D, asentado
   ==================================================================== */
.palabra { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; }
.palabra__int { display: inline-block; position: relative; transform: translateY(105%); opacity: 0; }
[data-palabras].es-visible .palabra__int { animation: mg-subir 600ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes mg-subir { from { transform: translateY(105%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes mg-asentar { from { transform: scale(1.09); } to { transform: scale(1); } }
html.m-strict .palabra { overflow: visible; } html.m-strict .palabra__int { transform: none; opacity: 1; animation: none !important; }

.hof .cf { --cf-card: clamp(190px, 24vw, 300px); position: relative; width: 100%; }
.cf.es-activo { overflow-x: clip; overflow-y: visible; }
.cf__pista { display: flex; gap: clamp(12px, 2vw, 24px); overflow-x: auto; padding: 40px clamp(20px, 5vw, 88px); scroll-snap-type: x mandatory; scrollbar-width: none; }
.cf__pista::-webkit-scrollbar { display: none; }
.cf__lamina { flex: 0 0 var(--cf-card); scroll-snap-align: center; }
.cf.es-activo .cf__pista { display: block; position: relative; height: calc(var(--cf-card) * 1.4); overflow: visible; padding: 44px 0 24px; transform-style: preserve-3d; touch-action: pan-y; cursor: grab; outline: none; }
.cf.es-activo.es-arrastrando .cf__pista { cursor: grabbing; }
.cf.es-activo .cf__lamina { position: absolute; left: 50%; top: 44px; width: var(--cf-card); will-change: transform, opacity; transition: none; }
.cf__lamina { display: block; text-decoration: none; color: inherit; user-select: none; -webkit-user-drag: none; }
.cf__marco { aspect-ratio: 3 / 4; overflow: hidden; border-radius: clamp(10px, 1.2vw, 18px); background: var(--surface-2); box-shadow: 0 26px 60px rgba(8, 10, 16, 0.3); }
.cf__marco img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.cf__texto { padding: 16px 2px 0; }
.cf__cat { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.cf__titulo { margin: 0.35em 0 0; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.12; color: var(--fg); }
.cf.es-activo .cf__texto { opacity: 0; transition: opacity 0.25s ease; }
.cf.es-activo .cf__lamina.es-centro .cf__texto { opacity: 1; }
.cf__puntos { display: flex; justify-content: center; gap: 6px; margin-top: clamp(14px, 2vh, 26px); }
.cf__punto { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.cf__punto::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--fg); opacity: 0.28; transition: opacity 0.25s ease, transform 0.25s var(--ease-out); }
.cf__punto.es-activo::after { opacity: 1; transform: scale(1.4); background: var(--accent); }
.cf__pista:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

/* asentado: las imagenes llegan con zoom 1.09 y se acomodan al revelarse */
.card:not(.pending) .card-media video, .card:not(.pending) .card-media img,
  .detail-cover:not(.pending) img, .blogfig:not(.pending) img { animation: mg-asentar 2.2s var(--ease-out) both; }


.hof .cf.es-activo .cf__pista { height: calc(var(--cf-card) * 1.33 + 150px); }
.hof .cf { padding-bottom: 12px; }

/* Carrusel de slides (PNG compuestos en el panel) */
.car { margin: 2.2rem 0 0; }
.car-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 12px; outline: none; -webkit-overflow-scrolling: touch; }
.car-track::-webkit-scrollbar { display: none; }
.car-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
.car-slide { flex: 0 0 min(78vw, 400px); margin: 0; scroll-snap-align: center; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(4, 8, 16, .3); }
.car-slide img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; user-select: none; }
.car-nav { display: flex; align-items: center; gap: 1rem; margin-top: .9rem; }
.car-prev, .car-next { background: transparent; border: 1px solid var(--line-2); color: var(--fg); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 1rem; transition: border-color .2s, color .2s, transform .15s; }
.car-prev:hover, .car-next:hover { border-color: var(--accent); color: var(--accent); }
.car-prev:active, .car-next:active { transform: scale(.94); }
.car-dots { display: flex; gap: .45rem; }
.car-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--line-2); cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.car-dot.on { background: var(--accent); transform: scale(1.35); }

/* Paleta que rota sola: cada token de color es una propiedad registrada, asi el navegador
   puede interpolarla y todo el sitio cambia de color con suavidad. */
@property --olive { syntax: "<color>"; inherits: true; initial-value: #0c1019; }
@property --olive-2 { syntax: "<color>"; inherits: true; initial-value: #141a28; }
@property --olive-3 { syntax: "<color>"; inherits: true; initial-value: #1e263a; }
@property --black { syntax: "<color>"; inherits: true; initial-value: #070a11; }
@property --paper { syntax: "<color>"; inherits: true; initial-value: #efece4; }
@property --paper-2 { syntax: "<color>"; inherits: true; initial-value: #e3dfd3; }
@property --ink-900 { syntax: "<color>"; inherits: true; initial-value: #0c1019; }
@property --ink-600 { syntax: "<color>"; inherits: true; initial-value: #454859; }
@property --ink-400 { syntax: "<color>"; inherits: true; initial-value: #7a7d8c; }
@property --mist { syntax: "<color>"; inherits: true; initial-value: #b8bfd1; }
@property --mist-2 { syntax: "<color>"; inherits: true; initial-value: #7d849a; }
@property --esmeralda { syntax: "<color>"; inherits: true; initial-value: #34e8a2; }
@property --esmeralda-deep { syntax: "<color>"; inherits: true; initial-value: #0a8a5c; }
@property --esmeralda-ink { syntax: "<color>"; inherits: true; initial-value: #04140d; }
@property --sage { syntax: "<color>"; inherits: true; initial-value: #d6477f; }
:root { transition: --olive 3s cubic-bezier(.4, 0, .2, 1), --olive-2 3s cubic-bezier(.4, 0, .2, 1), --olive-3 3s cubic-bezier(.4, 0, .2, 1), --black 3s cubic-bezier(.4, 0, .2, 1), --paper 3s cubic-bezier(.4, 0, .2, 1), --paper-2 3s cubic-bezier(.4, 0, .2, 1), --ink-900 3s cubic-bezier(.4, 0, .2, 1), --ink-600 3s cubic-bezier(.4, 0, .2, 1), --ink-400 3s cubic-bezier(.4, 0, .2, 1), --mist 3s cubic-bezier(.4, 0, .2, 1), --mist-2 3s cubic-bezier(.4, 0, .2, 1), --esmeralda 3s cubic-bezier(.4, 0, .2, 1), --esmeralda-deep 3s cubic-bezier(.4, 0, .2, 1), --esmeralda-ink 3s cubic-bezier(.4, 0, .2, 1), --sage 3s cubic-bezier(.4, 0, .2, 1); }
html.m-strict { transition: none; }

/* ====================================================================
   POST editorial (patron de landonorris.com/off-track)
   ==================================================================== */
.post { position: relative; background: var(--bg); color: var(--fg); overflow-x: clip; }
.post > .topo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; pointer-events: none; z-index: 0; }

.phero { position: relative; z-index: 2; min-height: 100vh; padding: calc(66px + 5vh) var(--gutter) 5vh; display: flex; flex-direction: column; }
.phero .back { align-self: flex-start; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); text-decoration: none; }
.phero .back:hover { color: var(--accent); }
.ptitle { position: relative; z-index: 1; margin: 5vh 0 0; font-size: var(--ts, clamp(4rem, 14vw, 13rem)); line-height: .86; max-width: 100%; }
.ptitle .t-serif { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; text-transform: uppercase; letter-spacing: -.02em; }
.ptitle .t-sans { font-family: var(--font-sans); font-weight: 800; text-transform: uppercase; letter-spacing: -.05em; }
.ptitle .palabra { padding-top: .1em; margin-top: -.1em; padding-bottom: .12em; }
.pcover { position: absolute; z-index: 3; right: var(--gutter); top: 25vh; width: clamp(240px, 31vw, 500px); aspect-ratio: 4 / 5; margin: 0; overflow: hidden; box-shadow: 0 30px 80px rgba(8, 12, 20, .25); }
.pcover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pmeta { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin-top: 1.6rem; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); }
.pbottom { position: relative; z-index: 2; margin-top: auto; padding-top: 5vh; display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.plede-wrap { max-width: 34rem; }
.plede { margin: 0; font-size: clamp(1.25rem, 2vw, 1.85rem); line-height: 1.28; font-weight: 500; letter-spacing: -.01em; }
.hl-serif { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; color: var(--accent); font-size: 1.08em; }
.psig { display: block; width: 118px; margin-top: 1rem; }
.psig svg { width: 100%; height: auto; overflow: visible; }
.pnote { margin: 0; max-width: 15rem; font-size: .74rem; line-height: 1.5; color: var(--fg-dim); }

/* el rio */
.river { position: relative; z-index: 2; }
.river-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.river-track { display: flex; align-items: center; gap: clamp(64px, 9vw, 150px); height: 100%; width: max-content; padding: 0 14vw 0 12vw; will-change: transform; }
.river-bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 4.5vh; height: 2px; background: var(--line); }
.river-bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--rp, 0)); }
.river-cue { position: absolute; left: var(--gutter); bottom: calc(4.5vh + 14px); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-faint); opacity: calc(1 - var(--rp, 0) * 14); }

.ri { flex: 0 0 auto; position: relative; will-change: transform; }
.ri-cap { display: block; margin: 0 0 .6rem; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); }
.ri-photo img { display: block; width: 100%; max-height: 64vh; object-fit: cover; user-select: none; box-shadow: 0 22px 60px rgba(8, 12, 20, .18); }
.ri-s { width: clamp(180px, 16vw, 290px); } .ri-m { width: clamp(240px, 23vw, 410px); } .ri-l { width: clamp(300px, 33vw, 560px); }
.ri-ya { margin-top: -16vh; } .ri-yb { margin-top: 20vh; } .ri-yc { margin-top: 3vh; } .ri-yd { margin-top: 28vh; }

.ri-text { width: clamp(290px, 26vw, 400px); }
.ri-num { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .2em; color: var(--accent); }
.ri-h { margin: .4rem 0 1.2rem; font-family: "Instrument Serif", Georgia, serif; font-weight: 400; text-transform: uppercase; font-size: clamp(1.9rem, 2.7vw, 2.8rem); line-height: .95; letter-spacing: -.01em; }
.ri-text p { margin: 0 0 1.15em; font-size: clamp(1rem, .55vw + .8rem, 1.18rem); line-height: 1.66; color: var(--fg); }
.ri-ul { margin: 0 0 1.15em; padding: 0; list-style: none; }
.ri-ul li { position: relative; padding-left: 1.3em; margin-bottom: .55em; font-size: clamp(1rem, .55vw + .8rem, 1.12rem); line-height: 1.5; }
.ri-ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: .6em; height: 2px; background: var(--accent); }
.kw { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; color: var(--accent); font-size: 1.1em; }

.ri-quote { width: clamp(250px, 21vw, 340px); margin: 0; }
.ri-quote p { margin: 0; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(1.55rem, 2.1vw, 2.15rem); line-height: 1.1; letter-spacing: -.005em; }
.ri-by { display: block; margin-top: .9rem; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); }
.ri-sig { display: block; width: 92px; margin-top: .8rem; }
.ri-sig svg { width: 100%; height: auto; overflow: visible; }

.ri-state { width: clamp(300px, 28vw, 440px); }
.ri-label { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-dim); }
.ri-label i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.s-dolor .ri-label i { background: var(--sage); } .s-contexto .ri-label i { background: #2b8cff; }
.ri-big { margin: .9rem 0 .7rem; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(1.75rem, 2.5vw, 2.5rem); line-height: 1.08; letter-spacing: -.01em; }
.ri-sub { font-size: .76rem; color: var(--fg-dim); }

.ri-video { width: clamp(300px, 36vw, 600px); }
.ri-video.is-short { width: clamp(210px, 19vw, 320px); }
.ri-video .video-wrap { margin: 0; }
.ri-video .video-wrap.yt.yt-short { max-width: none; }
.ri-end { width: clamp(300px, 30vw, 470px); }
.ri-btns { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 1.6rem; }
.ri-next { display: block; text-decoration: none; color: var(--fg); border-top: 1px solid var(--line-2); padding-top: 1rem; }
.ri-next small { display: block; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: .4rem; }
.ri-next b { font-size: clamp(1.4rem, 2.2vw, 2.2rem); line-height: 1; letter-spacing: -.03em; font-weight: 800; text-transform: uppercase; }
.ri-next:hover b { color: var(--accent); }
.post .repo-btn { color: var(--esmeralda-ink); }
.post .link-btn { color: var(--fg); border-color: var(--line-2); }
.post .car-wrap { padding-block: 5rem; background: var(--bg); }
.post .pentries { padding-block: 4rem 6rem; }

/* movil / menos movimiento: el rio se apila en vertical */
.river.is-static .river-stage { position: static; height: auto; overflow: visible; }
.river.is-static .river-track { flex-direction: column; align-items: stretch; width: auto; height: auto; gap: 3rem; padding: 3rem var(--gutter); transform: none; }
.river.is-static .ri { width: 100% !important; margin-top: 0 !important; }
.river.is-static .river-bar, .river.is-static .river-cue { display: none; }
@media (max-width: 860px) {
  .pcover { position: relative; right: auto; top: auto; width: min(76vw, 360px); margin: 1.6rem 0 0 auto; }
  .pbottom { flex-direction: column; align-items: flex-start; }
  .ptitle { --ts: clamp(3rem, 15vw, 6rem) !important; }
}

/* ====================================================================
   Pasada 2 (auditoria con taste-skill + web-interface-guidelines):
   rio a escala real, hero legible, encabezado claro en posts.
   ==================================================================== */
.skip { position: fixed; left: 12px; top: -56px; z-index: 300; background: var(--esmeralda); color: var(--esmeralda-ink); padding: .6rem 1rem; border-radius: 8px; text-decoration: none; font-weight: 600; transition: top .2s var(--ease-out); }
.skip:focus { top: 12px; }
body.route-post .site-header.solid { --hdr-fg: var(--ink-900); --hdr-accent: var(--esmeralda-deep); background: color-mix(in srgb, var(--paper) 90%, transparent); border-bottom-color: var(--line); }
.post a:focus-visible, .post button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.ptitle { text-wrap: balance; }
.ptitle.long { max-width: 56%; }
.plede, .ri-text p { text-wrap: pretty; }
.phero .back { font-size: .8rem; color: var(--fg); }
.pmeta { font-size: .8rem; letter-spacing: .08em; color: var(--fg); }
.pnote { font-size: .92rem; line-height: 1.5; color: var(--fg); max-width: 17rem; }
.plede { font-size: clamp(1.3rem, 2.1vw, 2rem); }

.river-track { gap: clamp(72px, 10vw, 170px); padding: 0 16vw 0 10vw; }
.ri-cap { font-size: .72rem; color: var(--fg-dim); }
.ri-label { font-size: .74rem; color: var(--fg); }
.ri-num { font-size: .8rem; }
.ri-text { width: clamp(320px, 31vw, 500px); }
.ri-text p { font-size: clamp(1.08rem, .6vw + .85rem, 1.3rem); line-height: 1.62; }
.ri-ul li { font-size: clamp(1.05rem, .55vw + .85rem, 1.25rem); }
.ri-h { font-size: clamp(2.3rem, 3.8vw, 4.2rem); text-wrap: balance; }
.ri-state { width: clamp(340px, 34vw, 560px); }
.ri-big { font-size: clamp(2rem, 3.4vw, 3.8rem); line-height: 1.04; text-wrap: balance; }
.ri-sub { font-size: .9rem; color: var(--fg-dim); }
.ri-quote { width: clamp(300px, 28vw, 460px); }
.ri-quote p { font-size: clamp(2rem, 3.2vw, 3.6rem); line-height: 1.04; text-wrap: balance; }
.ri-by { font-size: .74rem; color: var(--fg-dim); }
.ri-sig { width: 110px; }
.ri-video { width: clamp(380px, 46vw, 780px); }
.ri-video.is-short { width: clamp(240px, 24vw, 400px); }
.ri-s { width: clamp(220px, 20vw, 360px); } .ri-m { width: clamp(300px, 30vw, 520px); } .ri-l { width: clamp(380px, 42vw, 700px); }
.ri-photo img { max-height: 70vh; }
.ri-end { width: clamp(340px, 34vw, 540px); }
.ri-next b { font-size: clamp(1.8rem, 3vw, 3.2rem); }
.ri-next small { font-size: .74rem; color: var(--fg-dim); }
@media (max-width: 860px) { .ptitle.long { max-width: 100%; } }

/* ====================================================================
   Pasada 3: hero en rejilla (la foto ya no tapa el titulo) y rio con
   dos carriles verticales + escala grande, para llenar el escenario.
   ==================================================================== */
.post > .topo { opacity: .32; }
@media (min-width: 861px) {
  .phero { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 31vw, 500px); column-gap: 3vw; grid-template-rows: auto auto auto 1fr; align-content: start; }
  .phero .back { grid-column: 1 / -1; grid-row: 1; }
  .ptitle, .ptitle.long { grid-column: 1; grid-row: 2; max-width: none; }
  .pmeta { grid-column: 1; grid-row: 3; }
  .pcover { position: relative; right: auto; top: auto; grid-column: 2; grid-row: 2 / 5; width: 100%; margin: 4vh 0 0; align-self: start; }
  .pbottom { grid-column: 1; grid-row: 4; align-self: end; padding-top: 4vh; }
}
.river-track > .ri:not(.ri-photo):nth-child(odd) { margin-top: -14vh; }
.river-track > .ri:not(.ri-photo):nth-child(even) { margin-top: 16vh; }
.ri-state { width: clamp(360px, 38vw, 620px); }
.ri-big { font-size: clamp(2.2rem, 4.2vw, 4.6rem); }
.ri-quote { width: clamp(340px, 34vw, 560px); }
.ri-quote p { font-size: clamp(2.4rem, 4.2vw, 4.6rem); }
.ri-text { width: clamp(340px, 34vw, 540px); }
.ri-text p { font-size: clamp(1.12rem, .7vw + .9rem, 1.4rem); }
.ri-h { font-size: clamp(2.6rem, 4.8vw, 5.2rem); }
.ri-end { width: clamp(360px, 36vw, 580px); }

/* Pasada 4: lineas topograficas casi invisibles bajo el texto; slides en el rio */
.post > .topo { opacity: .16; }
.ri-photo.ri-m img { max-height: 66vh; }

/* Pasada 5 (auditoria): ningun texto visible por debajo de 12px; h1 del inicio. */
h1.sx-title { margin: 0; font: inherit; }
.fcol h3 { font-size: .75rem; }
.loader-label, .kicker, .eyebrow, .track-k, .card-badge, .card-cap, .card-cap .mono, .cap, .story-cap, .rslide-cap, .latest .k, .latest .m, .count, .card-go, .entry-meta, .tag { font-size: max(.75rem, 12px); }
.story-cap, .rslide-cap { letter-spacing: .1em; }
figcaption, .plate .cap, .nav a, .nav .pill, .brand .cursor + * { font-size: max(.75rem, 12px); }

/* Pasada movil: mas aire entre piezas, y en una columna cada pieza respira */
.river-track { gap: clamp(96px, 10vw, 170px); }
.river.is-static .river-track { gap: 3.5rem; padding: 3rem var(--gutter) 4rem; }
.river.is-static .ri-photo { margin: 0; }
.river.is-static .ri-photo img { width: 100%; max-height: none; aspect-ratio: auto; height: auto; }
.river.is-static .ri-text p { font-size: 1.1rem; }
.river.is-static .ri-h { font-size: clamp(2rem, 9vw, 2.8rem); }
.river.is-static .ri-big { font-size: clamp(1.9rem, 8vw, 2.6rem); }
.river.is-static .ri-quote p { font-size: clamp(1.9rem, 8vw, 2.6rem); }
.river.is-static .ri-video.is-short { max-width: 340px; }
.river.is-static .ri-cap { font-size: .76rem; }

/* El titular nunca se sale de la pantalla: el tamano se limita por su palabra mas larga */
.ptitle { font-size: min(var(--ts, 8vw), calc((100vw - 2 * var(--gutter)) / (var(--lw, 8) * 0.72))); overflow-wrap: anywhere; }
@media (min-width: 861px) { .ptitle { font-size: min(var(--ts, 8vw), calc(60vw / (var(--lw, 8) * 0.72))); } }
@media (max-width: 860px) { .ptitle { font-size: min(clamp(3rem, 15vw, 6rem), calc((100vw - 2 * var(--gutter)) / (var(--lw, 8) * 0.72))) !important; } }

/* Las imagenes del rio conservan SU proporcion: el atributo height solo reserva espacio, no manda sobre la altura */
.ri-photo img { height: auto; object-fit: contain; max-height: 74vh; }
.ri-photo.ri-s img, .ri-photo.ri-m img, .ri-photo.ri-l img { height: auto; }

/* Con limite de alto, la imagen reduce tambien su ancho (misma forma siempre): width/height auto + max-*  */
.ri-photo img { width: auto; max-width: 100%; height: auto; max-height: 74vh; object-fit: fill; }
.river.is-static .ri-photo img { width: 100%; max-width: 100%; max-height: none; }

/* ====================================================================
   MOVIMIENTO: por defecto el sitio se mueve. El ajuste "reducir movimiento" del telefono
   solo apaga lo GRANDE y AUTOMATICO (class os-reduce). El interruptor del pie apaga todo (m-strict).
   ==================================================================== */
html.os-reduce .galaxy, html.os-reduce .comet, html.os-reduce .marquee-track,
html.os-reduce .bt-row.drift-l, html.os-reduce .bt-row.drift-r, html.os-reduce .rain-col .rain-run { animation: none !important; }
html.os-reduce .comet { opacity: 0; }
html.m-strict *, html.m-strict *::before, html.m-strict *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* en celular el rio es una columna: cada pieza sube con un fundido al entrar */
.river.is-static .ri { opacity: 0; transform: translateY(28px); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); }
.river.is-static .ri.in { opacity: 1; transform: none; }
html.m-strict .river.is-static .ri { opacity: 1; transform: none; }

/* ====================================================================
   CELULAR Y TABLETA: el rio horizontal se adapta (no se apaga).
   Medidas en vw con tope en px, alto con svh (la barra de URL no lo mueve), sin carriles verticales que recorten.
   ==================================================================== */
.river-stage { height: 100vh; height: 100svh; }
@media (max-width: 860px) {
  .river-track { gap: 11vw; padding: 0 16vw 0 9vw; }
  .river-track > .ri:not(.ri-photo):nth-child(odd), .river-track > .ri:not(.ri-photo):nth-child(even) { margin-top: 0; }
  .ri-ya { margin-top: -5svh; } .ri-yb { margin-top: 7svh; } .ri-yc { margin-top: 1svh; } .ri-yd { margin-top: 9svh; }
  .ri-text { width: min(80vw, 440px); }
  .ri-text p { font-size: 1rem; line-height: 1.55; margin-bottom: .9em; }
  .ri-ul li { font-size: 1rem; }
  .ri-h { font-size: clamp(1.9rem, 8.5vw, 3rem); margin-bottom: .9rem; }
  .ri-state { width: min(80vw, 460px); }
  .ri-big { font-size: clamp(1.8rem, 7.6vw, 2.9rem); }
  .ri-quote { width: min(76vw, 440px); }
  .ri-quote p { font-size: clamp(1.8rem, 7.6vw, 2.9rem); }
  .ri-video { width: min(82vw, 520px); }
  .ri-video.is-short { width: min(58vw, 300px); }
  .ri-s { width: min(52vw, 260px); } .ri-m { width: min(70vw, 380px); } .ri-l { width: min(78vw, 440px); }
  .ri-photo img { max-height: 70svh; }
  .ri-end { width: min(80vw, 460px); }
  .ri-next b { font-size: clamp(1.5rem, 7vw, 2.4rem); }
  .ri-cap { font-size: .72rem; }
  .river-bar { bottom: max(3.5svh, env(safe-area-inset-bottom)); }
  .river-cue { bottom: calc(max(3.5svh, env(safe-area-inset-bottom)) + 12px); }
}

/* mini clip de YouTube sobre la miniatura */
.yt-live { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; z-index: 1; background: #000; }
.yt-thumb { position: relative; }
.yt-live.short { transform: scale(3.16); }