/* TerraUY home: Field Nocturne (ADR-0045) en una sola apariencia oscura. Un canvas fijo cuenta
   la historia; el texto pasa por encima con revelado por línea, deriva ligada al scroll y salida. */
:root {
  --ground: #0c1211; --earth-900: #121a18; --earth-800: #1a2422; --earth-700: #243029;
  --accent: #d9b56c; --accent-hover: #e6c583; --on-accent: #1a1407;
  --sage: #e3ead6; --text: #f1ede2; --text-2: #cdcfc3; --text-3: #a3a89d;
  --water: #8cc7da; --thermal: #e8a565; --veg: #9fc27a;
  --border: rgba(236, 231, 219, .12); --border-strong: rgba(236, 231, 219, .26);
  --display: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-line: cubic-bezier(.2, .75, .15, 1); --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 180ms; --t-panel: 380ms; --t-line: 900ms; --t-copy: 760ms;
  --gutter: clamp(16px, 4vw, 56px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--text); font: 16px/1.5 var(--display); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- Escena ------------------------------------------------------------------------------ */
.stage { position: fixed; inset: 0; z-index: 0; background: radial-gradient(120% 80% at 50% 110%, #102019 0%, #0b1110 45%, #050807 100%); }
.stage canvas { display: block; width: 100%; height: 100%; }
#vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 95% at 50% 50%, transparent 45%, rgba(5, 8, 7, .9) 100%), linear-gradient(180deg, rgba(5, 8, 7, .55), transparent 18%, transparent 70%, rgba(5, 8, 7, .65)); opacity: .8; }
.pins { position: absolute; inset: 0; pointer-events: none; }
.pin { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity var(--t-panel) var(--ease-out); will-change: transform; }
.pin.on { opacity: 1; }
.pin.on.dim { opacity: .38; }
.pin-label { position: absolute; left: 0; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid var(--border-strong); border-radius: 999px; background: rgba(12, 18, 17, .88); font: 600 11.5px/1 var(--mono); letter-spacing: .04em; color: var(--text-2); white-space: nowrap; transition: background var(--t-panel), border-color var(--t-panel), color var(--t-panel); }
.pin-label > i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.pin-label b { font-weight: 600; }
.pin-label em { font-style: normal; max-width: 0; overflow: hidden; opacity: 0; transition: max-width 520ms var(--ease-out), opacity 300ms; }
.pin-label em:not(:empty) { max-width: 260px; opacity: 1; }
.pin-label em:not(:empty)::before { content: '· '; }
.pin-stem { position: absolute; left: -.5px; bottom: 0; width: 1px; height: 18px; background: var(--border-strong); }
.pin.nolabel .pin-label { opacity: 0; }
.pin.nolabel .pin-stem { height: 6px; }
.pin.nolabel::after, .pin.dot::after { content: ''; position: absolute; left: -3.5px; top: -3.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 2px rgba(12, 18, 17, .7); }
.pin.dot .pin-dot { display: none; }
.pin[data-state='new'] .pin-label { color: var(--text); border-color: var(--accent); }
.pin[data-state='new'] .pin-label > i, .pin[data-state='new']::after { background: var(--accent); }
.pin[data-state='alert'] .pin-label { background: var(--accent); border-color: var(--accent); color: var(--on-accent); opacity: 1; }
.pin[data-state='alert'] .pin-label > i { background: var(--on-accent); }
.pin[data-state='alert'] .pin-stem { background: var(--accent); height: 18px; }
.pin[data-state='alert']::before, .pin[data-state='new']::before { content: ''; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border: 1.5px solid var(--accent); border-radius: 50%; animation: ring-once 1.6s var(--ease-out) 1 both; }
.pin.breathe:not([data-state]) .pin-label > i, .pin.breathe.dot:not([data-state])::after { animation: breathe var(--br, 6s) ease-in-out var(--bd, 0s) infinite; }
.pin[data-state='guar'] .pin-label { border-color: var(--sage); }
.pin[data-state='mon'] .pin-label > i, .pin[data-state='mon']::after { background: var(--sage); animation: breathe 4.8s ease-in-out infinite; }
@keyframes ring-once { from { transform: scale(.4); opacity: 1; } to { transform: scale(3.4); opacity: 0; } }
@keyframes breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.anchor { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity 600ms var(--ease-out); }
.anchor.on { opacity: 1; }
.anchor.uy span { display: block; transform: translate(-50%, -50%); font: 700 clamp(28px, 4.4vw, 64px)/1 var(--display); letter-spacing: .62em; padding-left: .62em; text-transform: uppercase; color: var(--sage); opacity: .9; transition: letter-spacing 1600ms var(--ease-out); }
.anchor.uy.on span { letter-spacing: .34em; padding-left: .34em; }
.anchor.tag { transform-origin: 0 0; }
.anchor.tag { padding: 6px 10px; border-left: 2px solid var(--sage); background: rgba(12, 18, 17, .78); font: 500 12px/1.2 var(--mono); color: var(--text-2); white-space: nowrap; margin: -14px 0 0 12px; }
.anchor.tag b { color: var(--text); font-weight: 600; }
.anchor.tag.warm { border-color: var(--accent); }
.sat-tip { position: absolute; left: 0; top: 0; display: grid; gap: 2px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: rgba(12, 18, 17, .9); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity 240ms; }
.sat-tip.on { opacity: 1; }
.sat-tip span { font: 500 11.5px/1.3 var(--mono); color: var(--text-3); }

/* Complejidad → claridad */
.chips { position: absolute; inset: 0; pointer-events: none; visibility: hidden; }
.chips.on { visibility: visible; }
.chip { position: absolute; left: 50%; top: 50%; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: 6px; background: rgba(12, 18, 17, .82); font: 500 11.5px/1 var(--mono); letter-spacing: .03em; color: var(--text-2); white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.cx-count { position: absolute; left: var(--gutter); top: 96px; margin: 0; font: 600 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.groups { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); margin: 0; padding: 0 0 0 18px; list-style: none; display: grid; gap: 22px; opacity: 0; --link: 0; }
.groups::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1.5px; background: var(--accent); transform: scaleY(var(--link)); transform-origin: top; }
.groups li { position: relative; padding: 8px 14px; border: 1px solid var(--accent); border-radius: 8px; background: rgba(12, 18, 17, .9); font: 600 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.groups li::before { content: ''; position: absolute; left: -19px; top: 50%; width: 18px; height: 1.5px; background: var(--accent); transform: scaleX(var(--link)); transform-origin: left; }
.lead { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 400ms; }
.lead path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.stage-note { position: absolute; right: 16px; bottom: 14px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: rgba(12, 18, 17, .72); font: 500 10.5px/1.35 var(--mono); color: var(--text-3); max-width: 46vw; }
.no-webgl .stage canvas, .no-webgl .pins, .no-webgl .anchor { display: none; }
.no-webgl .stage::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 60%, rgba(140, 199, 218, .12), transparent 70%); }

/* ---- Navegación ----------------------------------------------------------------------------- */
.top { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 24px; padding: 14px var(--gutter); background: linear-gradient(180deg, rgba(8, 12, 11, .82), rgba(8, 12, 11, 0)); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.brand-mark .brand-orbit { stroke-width: 1.1; opacity: .8; }
.brand-mark .brand-node { fill: var(--accent); stroke: none; }
.brand-mark .brand-panel { fill: #0c1211; }
.brand-mark .brand-face { fill: var(--accent); }
.brand-type { font-weight: 700; font-size: 13.5px; letter-spacing: .2em; line-height: 1; }
.brand-type span { display: block; margin-top: 5px; font-size: 6.6px; font-weight: 400; letter-spacing: .44em; color: var(--text-3); }
.top nav { margin-left: auto; display: flex; gap: 22px; }
.top nav a { text-decoration: none; font-size: 13.5px; color: var(--text-2); transition: color var(--t-fast); }
.top nav a:hover { color: var(--text); }
.cta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 12px; border: 1px solid transparent; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background var(--t-fast), transform var(--t-fast) var(--ease-out), padding var(--t-panel) var(--ease-out); }
.cta::after { content: '→'; display: inline-block; width: 0; overflow: hidden; opacity: 0; transition: width var(--t-panel) var(--ease-out), opacity var(--t-fast); }
.cta:hover { background: var(--accent-hover); transform: translateY(-1px); }
.cta:hover::after { width: 1em; opacity: 1; }
.cta.ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.cta.ghost::after { display: none; }
.cta.ghost:hover { border-color: var(--text-2); background: rgba(236, 231, 219, .04); }
.cta.small { min-height: 40px; padding: 0 16px; font-size: 12.5px; }
.sticky-cta { position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 20; display: none; }
.case-nav { position: fixed; top: calc(70px + env(safe-area-inset-top, 0px)); left: 50%; z-index: 15; display: flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: rgba(12, 18, 17, .86); transform: translate(-50%, -8px); opacity: 0; pointer-events: none; transition: opacity var(--t-panel), transform var(--t-panel) var(--ease-out); }
.case-nav.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.case-nav a { padding: 8px 14px; border-radius: 999px; font-size: 13px; text-decoration: none; color: var(--text-2); transition: background var(--t-fast), color var(--t-fast); }
.case-nav a.is-active { background: var(--earth-700); color: var(--text); }
.progress { position: fixed; right: 18px; top: 50%; z-index: 10; height: 44vh; transform: translateY(-50%); width: 1px; background: var(--border); }
.progress i { position: absolute; inset: 0; background: var(--accent); transform-origin: top; transform: scaleY(0); }
.progress ol { position: absolute; right: 10px; top: 0; bottom: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; justify-content: space-between; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); text-align: right; opacity: .7; }

/* ---- Capítulos -------------------------------------------------------------------------- */
main { position: relative; z-index: 2; overflow-x: clip; }
.ch { position: relative; min-height: 135vh; padding: 0 var(--gutter); pointer-events: none; --t: 0; }
.ch.tall { min-height: 190vh; }
.ch.calm { min-height: 120vh; }
.ch .copy, .ch .path { pointer-events: auto; }
.copy { position: sticky; top: 0; min-height: 100vh; display: grid; align-content: center; gap: 18px; max-width: 760px; isolation: isolate; will-change: transform, opacity;
  transform: translateY(calc((.5 - var(--t)) * 6vh)); opacity: clamp(0, min(calc(var(--t) * 5), calc((1 - var(--t)) * 4.2)), 1); }
.copy.right { margin-left: auto; margin-right: 40px; text-align: right; justify-items: end; }
.copy.center { margin: 0 auto; text-align: center; justify-items: center; }
.copy.low { align-content: end; padding-bottom: 12vh; }
.eyebrow { margin: 0; font: 600 11.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--accent); }
.copy.right .eyebrow { flex-direction: row-reverse; }
.copy.center .eyebrow::before { display: none; }
h1, h2 { margin: 0; font-weight: 700; letter-spacing: -.022em; line-height: 1.02; text-wrap: balance; text-shadow: 0 1px 2px rgba(5, 8, 7, .55), 0 6px 28px rgba(5, 8, 7, .5); }
.copy::before { content: ''; position: absolute; inset: 14% -8% 10%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(8, 12, 11, .62), rgba(8, 12, 11, 0)); }
.copy.center::before { inset: 10% -4%; }
.hero .copy::before { inset: 20% -10% 6% -30%; background: radial-gradient(closest-side, rgba(5, 8, 7, .5), rgba(5, 8, 7, 0)); }
h1 { font-size: clamp(40px, 6vw, 86px); }
h2 { font-size: clamp(32px, 5vw, 70px); }
h2.quiet { font-size: clamp(24px, 3.2vw, 44px); font-weight: 600; line-height: 1.12; }
.lede { margin: 0; max-width: 34em; font-size: clamp(16px, 1.25vw, 18.5px); color: var(--text-2); text-shadow: 0 1px 2px rgba(5, 8, 7, .6), 0 4px 18px rgba(5, 8, 7, .45); }
.copy.center .lede { margin: 0 auto; }
.ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.ln > span { display: block; transform: translateY(108%); transition: transform var(--t-line) var(--ease-line); }
.ln.soft { color: var(--text-2); }
.ln.accent { color: var(--accent); }
.reveal.in .ln > span { transform: none; }
.reveal.in .ln:nth-child(2) > span { transition-delay: 90ms; } .reveal.in .ln:nth-child(3) > span { transition-delay: 180ms; }
.eyebrow.reveal { opacity: 0; letter-spacing: .42em; transition: opacity var(--t-copy) var(--ease-out), letter-spacing 1100ms var(--ease-out); }
.eyebrow.reveal.in { opacity: 1; letter-spacing: .14em; }
.lede.reveal, .quiet.reveal, .reading.reveal, .benefits.reveal, .limit.reveal, .actions.reveal, .ticker.reveal { opacity: 0; transform: translateY(12px); filter: blur(5px); transition: opacity var(--t-copy) var(--ease-out) 160ms, transform var(--t-copy) var(--ease-out) 160ms, filter var(--t-copy) var(--ease-out) 160ms; }
.reveal.in:is(.lede, .quiet, .reading, .benefits, .limit, .actions, .ticker) { opacity: 1; transform: none; filter: none; }
.results .reveal .ln > span { transition-delay: 0ms; }
.results li.reveal:nth-child(2) .ln > span { transition-delay: 80ms; } .results li.reveal:nth-child(3) .ln > span { transition-delay: 160ms; } .results li.reveal:nth-child(4) .ln > span { transition-delay: 240ms; } .results li.reveal:nth-child(5) .ln > span { transition-delay: 320ms; } .results li.reveal:nth-child(6) .ln > span { transition-delay: 400ms; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.copy.right .actions { justify-content: flex-end; }

/* Hero: secuencia temporal de la órbita y escala ligada a la cámara. */
.hero .copy { opacity: clamp(0, calc((1 - var(--t)) * 3.2), 1); }
.hero h1 { transform: scale(calc(1 + min(var(--hs, 0), 1) * .07)) translateY(calc(min(var(--hs, 0), 1) * -3vh)); transform-origin: 0 100%; }
.hero .copy { padding-top: 90px; }
.hero h1 .ln.soft { font-size: .78em; }
.hero .gap { display: block; height: clamp(10px, 2vh, 22px); }
.intro-a.ln > span, .intro-b.ln > span { transform: translateY(108%); }
body.i1 .intro-a.ln > span, body.i2 .intro-b.ln > span { transform: none; }
body.i2 .intro-b.d1 > span { transition-delay: 110ms; }
.eyebrow.intro-a { opacity: 0; letter-spacing: .42em; transition: opacity 900ms var(--ease-out), letter-spacing 1400ms var(--ease-out); }
body.i1 .eyebrow.intro-a { opacity: 1; letter-spacing: .14em; }
.intro-c { opacity: 0; transform: translateY(10px); transition: opacity var(--t-copy) var(--ease-out), transform var(--t-copy) var(--ease-out); }
body.i3 .intro-c { opacity: 1; transform: none; }
.scroll-hint { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.scroll-hint i { width: 1px; height: 34px; background: linear-gradient(var(--accent), transparent); animation: hint 2.4s var(--ease-inout) infinite; transform-origin: top; }
@keyframes hint { 0%, 100% { transform: scaleY(.35); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* Señales observadas: se encienden con el scroll, en el orden de la escena. */
.signals { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 12px; margin: 6px 0 0; padding: 0; list-style: none; max-width: 560px; }
.signals li { --s: clamp(0, calc((var(--t) - var(--a)) * 14), 1); padding: 8px 14px; border: 1px solid rgba(236, 231, 219, calc(.08 + .2 * var(--s))); border-radius: 999px; font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sage); background: rgba(12, 18, 17, .6); opacity: calc(.2 + .8 * var(--s)); transform: translateY(calc((1 - var(--s)) * 8px)); }
.signals li::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: var(--c); vertical-align: 1px; box-shadow: 0 0 0 calc(var(--s) * 3px) color-mix(in srgb, var(--c) 25%, transparent); }

.ticker { margin: 0; display: inline-flex; align-items: center; gap: 10px; font: 500 13px/1.3 var(--mono); color: var(--text-2); min-height: 1.3em; text-shadow: 0 1px 2px rgba(5, 8, 7, .6); }
.ticker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); transition: background var(--t-panel); }
.ticker.live::before { background: var(--sage); box-shadow: 0 0 0 4px rgba(227, 234, 214, .14); }
.ticker.alert { color: var(--accent); }
.ticker.alert::before { background: var(--accent); }
.copy.right .ticker { flex-direction: row-reverse; }

/* Evidencia */
.reading { display: grid; gap: 7px; padding: 14px 16px; border-left: 2px solid var(--accent); background: rgba(12, 18, 17, .86); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); max-width: 460px; text-align: left; justify-items: start; }
.reading b { font-size: 15.5px; font-weight: 600; }
.reading > span { color: var(--text-2); font-size: 14px; }
.reading small { font: 400 12px/1.45 var(--mono); color: var(--text-3); }
.reading small.tag { padding: 3px 7px; border: 1px dashed var(--border-strong); border-radius: 5px; }
.reading .live { font: 500 12.5px/1.3 var(--mono); color: var(--water); }
.reading details { font-size: 13px; color: var(--text-2); }
.reading summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 13px; }
.reading dl { margin: 8px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-family: var(--mono); font-size: 12px; }
.reading dt { color: var(--text-3); } .reading dd { margin: 0; }
.range { position: relative; width: 100%; height: 40px; margin-top: 4px; }
.range .band { position: absolute; left: var(--a); right: calc(100% - var(--b)); top: 10px; height: 6px; border-radius: 3px; background: rgba(227, 234, 214, .22); transform-origin: left; transform: scaleX(0); transition: transform 700ms var(--ease-out) 300ms; }
.range .median { position: absolute; left: var(--m); top: 6px; width: 1.5px; height: 14px; background: var(--sage); opacity: 0; transition: opacity 300ms 900ms; }
.range .now { position: absolute; left: var(--v); top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); transform: translateX(-50%) scale(0); box-shadow: 0 0 0 3px var(--earth-900); transition: transform 420ms var(--ease-out) 1100ms; }
.reading.in .range .band { transform: scaleX(1); } .reading.in .range .median { opacity: 1; } .reading.in .range .now { transform: translateX(-50%) scale(1); }
.range .lab { position: absolute; top: 26px; font: 500 10.5px/1 var(--mono); color: var(--text-3); transform: translateX(-50%); font-style: normal; }
.ramp { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--mono); color: var(--text-3); }
.ramp i { width: 120px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #4b3e2b, #6f7a3f, #9fc27a); }
.keys { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font: 500 11.5px/1.3 var(--mono); color: var(--text-2); }
.keys li { display: flex; align-items: center; gap: 8px; }
.key-solid { width: 10px; height: 10px; border-radius: 50%; background: var(--thermal); }
.key-ring { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--thermal); background: radial-gradient(circle, var(--thermal) 0 3px, rgba(232, 165, 101, .12) 3.5px); }
.key-hollow { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--thermal); }
.key-pixel { width: 11px; height: 11px; border: 1.5px solid var(--water); background: rgba(140, 199, 218, .4); }
.key-line { width: 16px; height: 0; border-top: 2px solid var(--sage); }

/* Historia */
.year-stamp { margin: 0; font: 700 clamp(56px, 8vw, 120px)/.9 var(--display); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.2px var(--sage); opacity: 0; transition: opacity 300ms; min-height: .9em; }
.year-stamp.on { opacity: .9; }
.year-stamp.small { font-size: clamp(40px, 5vw, 72px); }
.years { display: grid; grid-template-columns: repeat(3, 1fr); margin: 6px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border-strong); max-width: 640px; }
.years li { position: relative; padding: 14px 14px 0 0; display: grid; gap: 6px; font-size: 13px; color: var(--text-3); transition: color var(--t-panel); }
.years li::before { content: ''; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--accent); transition: width 500ms var(--ease-out); }
.years li.now { color: var(--text); }
.years li.now::before { width: 70%; }
.years b { font: 700 20px/1 var(--display); color: var(--text-2); }
.years li.now b { color: var(--accent); }

/* Casos */
.case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; min-height: 125vh; }
.case .copy { max-width: 600px; }
.case .path { position: sticky; top: 0; min-height: 100vh; display: grid; align-content: center; justify-items: end; padding-right: 40px; }
.case:nth-of-type(odd) .path { order: -1; justify-items: start; padding-right: 0; }
.path ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; width: min(100%, 340px); position: relative; }
.path li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: rgba(12, 18, 17, .8); font-size: 14px; color: var(--text-2); --s: clamp(0, calc((var(--t) - .08 - var(--i, 0) * .06) * 10), 1); opacity: var(--s); transform: translateX(calc((1 - var(--s)) * -14px)); }
.path li:nth-child(2) { --i: 1; } .path li:nth-child(3) { --i: 2; } .path li:nth-child(4) { --i: 3; } .path li:nth-child(5) { --i: 4; } .path li:nth-child(6) { --i: 5; }
.path li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--sage)); flex-shrink: 0; }
.path li b { color: var(--text); font-weight: 600; }
.benefits { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 15px; color: var(--text-2); }
.benefits li::before { content: '— '; color: var(--accent); }
.limit { margin: 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 13.5px; color: var(--text-2); background: rgba(12, 18, 17, .6); }
.limit b { color: var(--text); font-weight: 600; }

/* Resultados y transformación */
.results { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(8px, 1.6vh, 18px); max-width: 920px; }
.results li { font-size: clamp(22px, 3vw, 40px); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; }
.results li:nth-child(even) { color: var(--text-2); }
.shift-head { display: grid; grid-template-columns: 1fr 1fr; max-width: 900px; font: 600 11.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.shift-head span:last-child { padding-left: 12%; color: var(--accent); }
.shift { position: relative; width: min(100%, 900px); height: calc(6 * 58px); --k: 0; }
.card { position: absolute; left: 0; top: 0; width: 40%; min-width: 200px; padding: 12px 14px; border: 1px solid rgba(236, 231, 219, calc(.12 + .18 * var(--k, 0))); border-radius: 9px; background: rgba(12, 18, 17, .82); font-size: 14.5px; will-change: transform; }
.card .b, .card .a { display: block; }
.card .b { color: var(--text-2); opacity: clamp(0, calc(1 - (var(--k, 0) - .3) * 3), 1); }
.card .a { position: absolute; left: 14px; top: 12px; color: var(--text); font-weight: 600; opacity: clamp(0, calc((var(--k, 0) - .4) * 3), 1); }
.card::before { content: ''; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 2px; background: var(--accent); transform: scaleY(var(--k, 0)); }

/* Confianza: registro que se escribe con calma */
.trust { margin: 10px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; max-width: 780px; font-size: 14.5px; color: var(--text-2); text-align: left; }
.trust li { display: grid; grid-template-columns: 112px 1fr; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); --s: clamp(0, calc((var(--t) - .12 - var(--i, 0) * .035) * 9), 1); opacity: var(--s); }
.trust li:nth-child(2) { --i: 1; } .trust li:nth-child(3) { --i: 2; } .trust li:nth-child(4) { --i: 3; } .trust li:nth-child(5) { --i: 4; } .trust li:nth-child(6) { --i: 5; } .trust li:nth-child(7) { --i: 6; } .trust li:nth-child(8) { --i: 7; }
.trust li b { font: 500 12px/1 var(--mono); color: var(--accent); letter-spacing: .04em; }

/* Producto real */
.ch.product { min-height: 240vh; }
.ch.product .copy { opacity: clamp(0, calc((.42 - var(--t)) * 6), 1); }
.ch.final { min-height: 170vh; }
.final-copy { max-width: 560px; align-content: end; padding-bottom: 14vh; opacity: clamp(0, calc((var(--t) - .05) * 8), 1); transform: none; }
.final-copy h2 { font-size: clamp(34px, 4.6vw, 64px); }
.shell { position: fixed; inset: 0; z-index: 1; pointer-events: none; visibility: hidden; }
.shell.live { visibility: visible; }
.shell.interactive .panel, .shell.interactive .layers button { pointer-events: auto; }
.shell .rail { position: absolute; left: 16px; top: 72px; bottom: 16px; width: 196px; padding: 14px 10px; border: 1px solid var(--border); border-radius: 16px; background: rgba(12, 18, 17, .94); display: grid; align-content: start; gap: 4px; }
.rail a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 12px; font-size: 13.5px; font-weight: 500; color: var(--text-3); }
.rail a.is-active { background: var(--earth-800); color: var(--text); font-weight: 600; }
.rail a i { width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 5px; opacity: .8; }
.rail .org { position: absolute; left: 10px; right: 10px; bottom: 12px; padding: 10px 12px 0; border-top: 1px solid var(--border); font: 500 11.5px/1.5 var(--mono); color: var(--text-3); }
.shell .search { position: absolute; top: 88px; left: 228px; width: min(420px, 34vw); padding: 12px 16px; border: 1px solid var(--border-strong); border-radius: 12px; background: rgba(12, 18, 17, .94); font-size: 14px; color: var(--text-2); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.shell .search b { color: var(--text); font-weight: 600; }
.shell .controls { position: absolute; left: 228px; bottom: 22px; display: flex; gap: 16px; align-items: center; font: 500 11px/1.3 var(--mono); color: var(--text-2); }
.controls .scale { display: inline-flex; align-items: center; gap: 8px; }
.controls .scale i { width: 64px; height: 6px; border: 1.5px solid var(--sage); border-top: 0; }
.controls .attr { padding: 4px 8px; border-radius: 6px; background: rgba(12, 18, 17, .78); color: var(--text-3); }
.shell .panel { position: absolute; right: 16px; top: 72px; bottom: 16px; width: 392px; padding: 20px 20px 16px; border: 1px solid var(--border); border-radius: 16px; background: rgba(12, 18, 17, .95); display: grid; align-content: start; gap: 12px; overflow: auto; transform-origin: right center; }
.panel .eyebrow::before { display: none; }
.panel h3 { margin: 0; font-size: 22px; font-weight: 700; }
.panel .facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--text-2); }
.panel .status { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.panel .status li { display: grid; gap: 2px; padding-left: 16px; position: relative; font-size: 14px; }
.panel .status li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }
.panel .status li[data-state='active']::before { background: var(--accent); animation: breathe 4.8s ease-in-out infinite; }
.panel .status span { color: var(--text-3); font-size: 13px; }
.panel .status a { color: var(--accent); font-size: 13px; font-weight: 600; }
.panel .section-tabs { display: flex; gap: 14px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-3); }
.panel .section-tabs b { color: var(--text); font-weight: 600; }
.panel .layers { display: flex; gap: 8px; }
.panel .layers button { width: 44px; height: 34px; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: transparent; cursor: pointer; transition: box-shadow var(--t-fast), border-color var(--t-fast); }
.panel .layers button:hover { border-color: var(--border-strong); }
.panel .layers button[aria-pressed='true'] { box-shadow: 0 0 0 1.5px var(--accent); }
.panel .layers i { display: block; width: 100%; height: 100%; border-radius: 5px; background: var(--earth-700); }
.panel .layers i.v { background: linear-gradient(135deg, #4b3e2b, #9fc27a); } .panel .layers i.w { background: #1a2b33; box-shadow: inset 0 0 0 5px #1a2b33, inset 0 0 0 7px var(--water); } .panel .layers i.t { background: radial-gradient(circle, var(--thermal) 0 3px, transparent 3.5px), #2a211a; }
.shell .caption { position: absolute; left: calc(50% - 90px); bottom: 12vh; width: min(560px, 44vw); text-align: center; }
.caption h2 { font-size: clamp(26px, 3.2vw, 44px); }
.caption p { margin: 10px 0 0; color: var(--text-2); font-size: 15px; }

/* Continuación hacia la app: ocupa el lugar del panel */
.sheet { position: fixed; right: 16px; top: 72px; bottom: 16px; z-index: 30; width: 392px; padding: 24px 22px; border: 1px solid var(--accent); border-radius: 16px; background: var(--earth-900); display: grid; align-content: start; gap: 14px; transform: translateX(calc(100% + 24px)); transition: transform 460ms var(--ease-out); box-shadow: -20px 0 60px rgba(0, 0, 0, .35); overflow: auto; }
body.sheet-open .sheet { transform: none; }
.sheet .eyebrow::before { display: none; }
.sheet h3 { margin: 0; font-size: 24px; }
.sheet p { margin: 0; color: var(--text-2); font-size: 14.5px; }
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: s; }
.steps li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; color: var(--text-2); }
.steps li::before { counter-increment: s; content: counter(s); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--earth-700); font: 600 12px/1 var(--mono); color: var(--text); flex-shrink: 0; }
.steps li.now { border-color: var(--accent); color: var(--text); }
.steps li.now::before { background: var(--accent); color: var(--on-accent); }
.sheet .url { font: 500 12px/1.5 var(--mono); color: var(--text-3); word-break: break-all; }
.sheet .url b { color: var(--text-2); font-weight: 500; }

.footer { position: relative; z-index: 2; padding: 40px var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; font-size: 13px; color: var(--text-3); background: linear-gradient(180deg, rgba(12, 18, 17, 0), rgba(12, 18, 17, .94) 30%); }
.footer a { color: var(--text-2); }

/* ---- Teléfono: misma historia, menos profundidad, duraciones 25 % menores ------------------ */
@media (max-width: 860px) {
  :root { --t-line: 680ms; --t-copy: 570ms; --t-panel: 290ms; }
  .top { gap: 12px; padding: 12px 16px; }
  .top nav, .top .cta, .progress, .stage-note { display: none; }
  .brand-type span { display: none; }
  .sticky-cta { display: grid; }
  .sticky-cta .cta { box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
  body.in-hero .sticky-cta, body.in-final .sticky-cta, body.sheet-open .sticky-cta { display: none; }
  .ch { min-height: 125vh; }
  .ch.tall { min-height: 155vh; }
  .copy, .copy.right { max-width: none; margin: 0; text-align: left; justify-items: start; align-content: end; padding-bottom: 18vh; }
  .copy.right .eyebrow, .copy.right .ticker { flex-direction: row; }
  .copy.right .actions { justify-content: flex-start; }
  .hero .copy { align-content: center; padding-bottom: 0; }
  .copy.center { text-align: left; justify-items: start; }
  .copy.center .eyebrow::before { display: block; }
  h1 { font-size: clamp(38px, 11vw, 56px); }
  h2 { font-size: clamp(30px, 8.6vw, 44px); }
  .signals { justify-content: flex-start; }
  .cx-count { top: 70px; left: 16px; }
  .groups { top: 84px; left: 16px; right: 16px; transform: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
  .groups::before, .groups li::before { display: none; }
  .anchor.tag { display: none; }
  .groups li { font-size: 11.5px; padding: 6px 10px; }
  .case { grid-template-columns: 1fr; gap: 0; }
  .case .path, .case:nth-of-type(odd) .path { position: static; min-height: 0; order: 1; justify-items: start; padding: 0 0 18vh; }
  .path ol { width: 100%; }
  .path li { opacity: 1; transform: none; }
  .results li { font-size: clamp(20px, 6vw, 30px); }
  .shift-head span:last-child { padding-left: 0; text-align: right; }
  .shift { height: calc(6 * 50px); }
  .card { width: 100%; min-width: 0; }
  .trust { grid-template-columns: 1fr; }
  .trust li { grid-template-columns: 96px 1fr; }
  .ch.product { min-height: 200vh; }
  .shell .rail, .shell .caption { display: none; }
  .shell .search { left: 16px; right: 16px; width: auto; top: 70px; }
  .shell .controls { left: 16px; right: 16px; bottom: auto; top: 128px; flex-wrap: wrap; }
  .shell .panel, .sheet { left: 16px; right: 16px; width: auto; top: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); max-height: 46vh; transform-origin: bottom center; }
  .sheet { bottom: 16px; max-height: 70vh; transform: translateY(calc(100% + 24px)); }
  .final-copy { padding-bottom: 16vh; }
  .anchor.uy span { letter-spacing: .4em; }
}
@media (prefers-reduced-motion: reduce) {
  .ln > span, .intro-a.ln > span, .intro-b.ln > span { transform: none !important; transition: none !important; }
  .reveal, .eyebrow.reveal, .intro-c, .eyebrow.intro-a { opacity: 1 !important; transform: none !important; filter: none !important; letter-spacing: .14em; transition: opacity 180ms linear !important; }
  .copy { transform: none; }
  .hero h1 { transform: none; }
  .scroll-hint i, .pin[data-state='alert']::before, .panel .status li[data-state='active']::before, .pin[data-state='mon']::after { animation: none; }
  .anchor.uy span { transition: none; }
  .range .band, .range .median, .range .now { transition: none !important; }
  .sheet { transition: none; }
}

#vegetacion h2, #agua h2, #termica h2 { font-size: clamp(30px, 3.6vw, 52px); }
.case .copy::before { inset: 12% -6% 8%; background: radial-gradient(closest-side, rgba(8, 12, 11, .78), rgba(8, 12, 11, 0)); }
@media (min-width: 861px) { .final-copy { margin-left: 220px; } }

/* Pasada autónoma: textos secundarios con más cuerpo sobre el territorio */
.benefits, .limit, .trust li, .years li, .path li, .keys, .signals li { text-shadow: 0 1px 2px rgba(5, 8, 7, .5); }
.benefits { color: var(--text-2); }
.years li { color: var(--text-2); }
.years b { color: var(--text); }
.trust li b { color: var(--accent); }
.eyebrow, .cx-count { text-shadow: 0 1px 2px rgba(5, 8, 7, .6); }
.pin.on.dim { opacity: .46; }
.chip.extra { border-style: dashed; }
@media (prefers-reduced-motion: reduce) { .pin.breathe .pin-label > i, .pin.breathe.dot::after, .pin[data-state='new']::before { animation: none; } }