/* brainsvault · landing v3 (oct-2026)
   Paleta propia: carbón, café, crema, arena, cobre y ámbar (solo LED y una palabra por bloque). */

@property --h { syntax: '<length>'; inherits: true; initial-value: 0px; }

:root {
  --carbon: #1C1A17;
  --cafe: #3A281C;
  --crema: #EDE6DA;
  --arena: #9C8E7C;
  --cobre: #B5703A;
  --ambar: #E8A33D;

  --panel: rgba(58, 40, 28, 0.42);
  --line: rgba(237, 230, 218, 0.08);
  --line-2: rgba(237, 230, 218, 0.14);
  --dim: rgba(237, 230, 218, 0.70);
  --mute: #9C8E7C;
  --radius: 18px;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --wrap: 1180px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--carbon); color: var(--crema);
  font-family: var(--sans); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
svg { display: block; }
::selection { background: var(--ambar); color: var(--carbon); }

/* ---------- capas de fondo ---------- */
#ribbons { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(10, 9, 8, .65) 100%); }
.cursor-light { position: fixed; left: 0; top: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px;
  z-index: 1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 163, 61, .10), rgba(181, 112, 58, .04) 40%, transparent 70%);
  opacity: 0; transition: opacity .6s; will-change: transform; }
body.has-mouse .cursor-light { opacity: 1; }
main, header, footer { position: relative; z-index: 2; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- LED ---------- */
.led { width: 7px; height: 7px; border-radius: 50%; background: var(--ambar); flex: none; display: inline-block;
  box-shadow: 0 0 6px var(--ambar), 0 0 18px rgba(232, 163, 61, .55); animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 3px var(--ambar), 0 0 8px rgba(232, 163, 61, .25); opacity: .75; } }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; transition: background .4s, border-color .4s; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(28, 26, 23, .72); backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); border-bottom-color: var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 24px; letter-spacing: -.01em; line-height: 1; }
.brand .led { width: 8px; height: 8px; }
.brand small { font-family: var(--mono); font-size: 11px; color: var(--mute); letter-spacing: .02em; margin-left: 4px; }
.nav-links { display: flex; gap: 24px; margin-left: 18px; }
.nav-links a { font-size: 13.5px; color: var(--dim); position: relative; transition: color .2s; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--cobre); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.nav-links a:hover { color: var(--crema); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.tag-mono { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11.5px; color: var(--mute); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); white-space: nowrap; }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 42px; padding: 0 20px; border-radius: 999px;
  font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; border: 0; font-family: var(--sans);
  transition: background .25s, color .25s, border-color .25s, box-shadow .3s; will-change: transform; }
.btn-crema { background: var(--crema); color: var(--carbon); }
.btn-crema:hover { box-shadow: 0 0 0 4px rgba(237, 230, 218, .08), 0 10px 40px -10px rgba(232, 163, 61, .55); }
.btn-ghost { color: var(--crema); border: 1px solid var(--line-2); background: rgba(28, 26, 23, .3); }
.btn-ghost:hover { border-color: var(--cobre); }
.btn-sm { height: 34px; padding: 0 15px; font-size: 13px; }
.btn svg { width: 14px; height: 14px; }
.btn .arr { transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- tipografía ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--mute); letter-spacing: .06em; text-transform: uppercase; }
.eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--cobre); }
h1, h2, h3 { margin: 0; font-weight: 400; }
h1, h2 { font-family: var(--serif); letter-spacing: -.02em; line-height: .98; }
h1 { font-size: clamp(44px, 5.8vw, 80px); }
h2 { font-size: clamp(34px, 4vw, 56px); }
h3 { font-size: 17px; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
h1 em, h2 em { font-style: italic; }
.amb { color: var(--ambar); }
.lead { font-size: clamp(16px, 1.45vw, 18px); color: var(--dim); max-width: 540px; margin: 26px 0 0; }
.mute { color: var(--mute); }
.label { font-family: var(--mono); font-size: 11px; color: var(--mute); letter-spacing: .03em; }

/* palabras que suben (titulares) */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .1em 0; margin-bottom: -.1em; }
[data-split] .wi { display: inline-block; transform: translateY(110%) rotate(5deg); filter: blur(10px); opacity: 0;
  transition: transform 1.2s var(--ease), filter 1.2s var(--ease), opacity .9s ease; transition-delay: calc(var(--i) * 60ms); }
[data-split].in .wi { transform: none; filter: blur(0); opacity: 1; }

/* texto que se ilumina con el scroll */
.fill .fw { color: rgba(237, 230, 218, .15); transition: color .35s ease; }
.fill .fw.on { color: var(--crema); }
.fill .amb .fw.on { color: var(--ambar); }

/* aparición */
.rv { opacity: 0; transform: translateY(26px); transition: opacity 1s ease, transform 1.1s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .1s; } .rv.d2 { transition-delay: .2s; } .rv.d3 { transition-delay: .3s; } .rv.d4 { transition-delay: .4s; }
.rise { opacity: 0; transform: perspective(1200px) translateY(70px) rotateX(20deg) scale(.95); transform-origin: 50% 100%;
  transition: opacity 1.1s ease, transform 1.5s var(--ease); }
.rise.in { opacity: 1; transform: none; }

/* ---------- secciones ---------- */
section { padding: 110px 0; position: relative; }
.sec-head { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: end; margin-bottom: 60px; }
.sec-head .eyebrow { margin-bottom: 26px; }
.sec-head p { color: var(--dim); margin: 0; font-size: 15.5px; max-width: 430px; justify-self: end; }

/* ---------- hero ---------- */
.hero { padding: 60px 0 120px; min-height: calc(100vh - 66px); display: flex; align-items: center; }
.scene-hero .pin { padding: 56px 0 110px; min-height: calc(100vh - 66px); display: flex; align-items: center; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; width: 100%; }
.hero h1 { margin-top: 30px; }
.hero-cta { display: flex; gap: 10px; margin-top: 38px; flex-wrap: wrap; }
.hero-note { margin-top: 22px; font-size: 12px; color: var(--mute); font-family: var(--mono); }

/* ---------- paneles ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); position: relative; overflow: hidden;
  backdrop-filter: blur(20px) saturate(110%); -webkit-backdrop-filter: blur(20px) saturate(110%);
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(237, 230, 218, .05); }
.panel-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; color: var(--mute); }
.panel-head b { color: var(--crema); font-weight: 400; }
.panel-head .right { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--crema); }

/* foco que sigue al cursor */
.spot { --mx: 50%; --my: 50%; }
.spot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(232, 163, 61, .10), transparent 45%); z-index: 0; }
.spot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px; opacity: 0; transition: opacity .4s;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(232, 163, 61, .6), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 3; }
.spot:hover::before, .spot:hover::after { opacity: 1; }
.spot > * { position: relative; z-index: 1; }

/* inclinación 3D */
.tilt { will-change: transform; transition: transform .3s ease-out; }
.tilt .glare { position: absolute; inset: 0; pointer-events: none; z-index: 4; border-radius: inherit;
  background: radial-gradient(600px circle at var(--gx, 50%) var(--gy, 0%), rgba(237, 230, 218, .08), transparent 40%); }

/* ---------- flujo con pulsos ---------- */
.flow { position: relative; height: 380px; }
.flow svg.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wires path { fill: none; stroke: rgba(237, 230, 218, .16); stroke-width: 1.2; transition: stroke .6s; }
.wires path.live { stroke: rgba(232, 163, 61, .75); }
.pulse { position: absolute; left: 0; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--ambar);
  box-shadow: 0 0 8px var(--ambar), 0 0 26px 5px rgba(232, 163, 61, .45); pointer-events: none; opacity: 0; z-index: 3; }
.node { position: absolute; min-width: 134px; padding: 10px 13px; border-radius: 11px; background: #2a201a; border: 1px solid var(--line-2);
  font-size: 12.5px; font-weight: 500; line-height: 1.3; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .8);
  transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: transform .8s var(--ease), opacity .5s, border-color .5s, box-shadow .5s; z-index: 2; }
.node.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.node small { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--mute); font-weight: 400; margin-top: 3px; transition: color .5s; }
.node.hit { border-color: rgba(232, 163, 61, .75); box-shadow: 0 0 0 4px rgba(232, 163, 61, .10), 0 0 44px -6px rgba(232, 163, 61, .55); }
.node.hit small { color: var(--ambar); }
.node .tag { position: absolute; top: -9px; right: 10px; font-family: var(--mono); font-size: 9.5px; padding: 1px 7px; border-radius: 999px; background: var(--crema); color: var(--carbon); }
.flow-log { border-top: 1px solid var(--line); padding: 12px 18px; display: grid; gap: 6px; min-height: 88px; align-content: start; }
.flow-log div { display: grid; grid-template-columns: 58px 1fr auto; gap: 10px; font-family: var(--mono); font-size: 11px; color: var(--mute); }
.flow-log b { color: var(--dim); font-weight: 400; }
.flow-log .hot { color: var(--ambar); }
.caret { display: inline-block; width: 6px; height: 12px; background: var(--ambar); vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- cifras ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); position: relative; }
.stats::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--cobre), rgba(181, 112, 58, .1)); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease); }
.stats.in::before { transform: scaleX(1); }
.stat { padding: 34px 26px 30px 0; position: relative; }
.stat + .stat { padding-left: 26px; border-left: 1px solid var(--line); }
.stat .n { font-family: var(--serif); font-size: clamp(44px, 4.6vw, 64px); line-height: .9; letter-spacing: -.02em; white-space: nowrap; }
.stat .n small { font-size: .5em; color: var(--mute); margin-left: 2px; }
.stat p { margin: 14px 0 0; font-size: 13.5px; color: var(--dim); line-height: 1.45; max-width: 220px; }
.stat .label { display: block; margin-top: 18px; }

/* ---------- split ---------- */
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.split.rev { grid-template-columns: 1.1fr .9fr; }
.split.rev > :first-child { order: 2; }
.points { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 20px; }
.points li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; color: var(--dim); font-size: 15px; }
.points li b { color: var(--crema); font-weight: 500; }
.points .k { font-family: var(--mono); font-size: 11px; color: var(--cobre); padding-top: 4px; }

/* ---------- registro de ejecución ---------- */
.runs { padding: 6px 0; }
.run { display: grid; grid-template-columns: 20px 1fr 1fr 64px; gap: 14px; align-items: center; padding: 12px 20px; font-size: 13px; border-bottom: 1px solid rgba(237, 230, 218, .04);
  opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 120ms); }
.in .run { opacity: 1; transform: none; }
.run:last-child { border-bottom: 0; }
.chk { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(181, 112, 58, .6); display: grid; place-items: center; color: var(--cobre); font-size: 9px; font-family: var(--mono); }
.chk.wait { border-color: rgba(232, 163, 61, .7); color: var(--ambar); animation: breathe 2s infinite; }
.run .t { font-family: var(--mono); font-size: 11px; color: var(--mute); text-align: right; }
.run .what small { display: block; color: var(--mute); font-size: 11.5px; }
.bar { height: 4px; border-radius: 99px; background: rgba(237, 230, 218, .06); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--cobre), #d48a48); transition: width 1.8s var(--ease); transition-delay: calc(var(--i, 0) * 120ms + .3s); }
.bar.a > i { background: var(--ambar); box-shadow: 0 0 10px rgba(232, 163, 61, .6); }
.in .bar > i { width: var(--w); }

/* ---------- barras isométricas 3D ---------- */
.iso-wrap { height: 250px; display: grid; place-items: center; perspective: 1400px; }
.iso { display: grid; grid-auto-flow: column; gap: 22px; transform: rotateX(58deg) rotateZ(-42deg) translate(0, 40px); transform-style: preserve-3d; }
.col { --s: 34px; --h: 0px; position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; background: rgba(237, 230, 218, .04); border: 1px solid rgba(237, 230, 218, .07);
  transition: --h 1.8s var(--ease); transition-delay: calc(var(--i) * 100ms); }
.in .col { --h: var(--to); }
.col > i { position: absolute; display: block; }
.col .t { inset: 0; transform: translateZ(var(--h)); background: #6b5442; }
.col .f { left: 0; top: 100%; width: var(--s); height: var(--h); transform-origin: top; transform: rotateX(90deg); background: #43342a; }
.col .sd { left: 100%; top: 0; width: var(--h); height: var(--s); transform-origin: left; transform: rotateY(-90deg); background: #30251d; }
.col.hi .t { background: var(--ambar); box-shadow: 0 0 40px 10px rgba(232, 163, 61, .45); }
.col.hi .f { background: #b97e2c; } .col.hi .sd { background: #8a5d21; }
.iso-legend { display: flex; justify-content: space-between; gap: 6px; margin-top: 4px; }
.iso-legend span { font-family: var(--mono); font-size: 10.5px; color: var(--mute); text-align: center; flex: 1; }

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.cell { padding: 24px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); min-height: 220px; display: flex; flex-direction: column; position: relative; overflow: hidden;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.cell .label { margin-bottom: 16px; }
.cell .foot { margin-top: auto; padding-top: 18px; font-size: 13px; color: var(--dim); }
.cell .big { font-family: var(--serif); font-size: 60px; line-height: .9; letter-spacing: -.02em; }
.cell .big small { font-size: .45em; color: var(--mute); }
.c2 { grid-column: span 2; } .c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c6 { grid-column: span 6; }

/* anillo */
.ring { width: 128px; height: 128px; position: relative; margin: 2px 0; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 6; }
.ring .bg { stroke: rgba(237, 230, 218, .07); }
.ring .fg { stroke: var(--ambar); stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(232, 163, 61, .6)); stroke-dasharray: 302; stroke-dashoffset: 302; transition: stroke-dashoffset 2.2s var(--ease); }
.in .ring .fg { stroke-dashoffset: var(--off); }
.ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 400; font-size: 36px; }

/* onda */
.wave path { stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 2.4s var(--ease); }
.in .wave path { stroke-dashoffset: 0; }
.wave .w2 { transition-delay: .3s; }
.wave circle { opacity: 0; transition: opacity .4s 1.8s; }
.in .wave circle { opacity: 1; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-family: var(--mono); font-size: 11px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--dim); white-space: nowrap; }
.chip.c { border-color: rgba(181, 112, 58, .6); color: var(--crema); background: rgba(181, 112, 58, .12); }
.badge { font-family: var(--mono); font-size: 10px; padding: 2px 8px; border-radius: 999px; }
.b-amb { background: rgba(232, 163, 61, .15); color: var(--ambar); }
.b-cob { background: rgba(181, 112, 58, .2); color: #dd9a5e; }
.b-mute { background: rgba(237, 230, 218, .06); color: var(--mute); }

/* marquesina */
.marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee .track { display: flex; gap: 8px; width: max-content; animation: slide 40s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- carril con progreso de scroll ---------- */
.rail { position: relative; }
.rail .progress { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-2); }
.rail .progress i { position: absolute; left: 0; top: 0; height: 1px; width: var(--p, 0%); background: linear-gradient(90deg, var(--cobre), var(--ambar)); box-shadow: 0 0 12px var(--ambar); }
.rail .progress i::after { content: ''; position: absolute; right: -5px; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 16px 2px var(--ambar); }
.rail-items { display: grid; grid-template-columns: repeat(5, 1fr); }
.ri { padding: 36px 24px 10px 0; position: relative; opacity: .3; transform: translateY(10px); transition: opacity .7s, transform .9s var(--ease); }
.ri.lit { opacity: 1; transform: none; }
.ri::before { content: ''; position: absolute; left: 0; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--carbon); border: 1px solid var(--line-2); transition: background .4s, border-color .4s; }
.ri.lit::before { background: var(--cobre); border-color: var(--cobre); }
.ri .h { font-family: var(--mono); font-size: 12.5px; color: var(--cobre); }
.ri h3 { margin: 14px 0 8px; font-family: var(--serif); font-size: 28px; font-weight: 400; letter-spacing: -.01em; line-height: 1.05; }
.ri p { margin: 0; color: var(--dim); font-size: 13.5px; }
.ri .badge { display: inline-block; margin-top: 14px; }

/* módulos */
.mods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.mod { padding: 0; min-height: 0; }
.mod .mock { padding: 18px 20px; border-bottom: 1px solid var(--line); min-height: 200px; }
.mod .txt { padding: 22px 24px 24px; }
.mod .txt h3 { font-family: var(--serif); font-size: 30px; font-weight: 400; letter-spacing: -.01em; line-height: 1.05; margin-top: 10px; }
.mod .txt p { margin: 10px 0 0; color: var(--dim); font-size: 14px; }
.rows { display: grid; gap: 8px; }
.row { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 10px; background: rgba(28, 26, 23, .45); border: 1px solid rgba(237, 230, 218, .05); font-size: 12.5px;
  transition: transform .5s var(--ease), border-color .3s; }
.row:hover { transform: translateX(5px); border-color: rgba(181, 112, 58, .45); }
.row .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-family: var(--mono); background: var(--cafe); color: var(--crema); }
.row small { display: block; color: var(--mute); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row > div { min-width: 0; }
.msg { max-width: 86%; padding: 9px 13px; border-radius: 12px; font-size: 12.5px; line-height: 1.45; margin-bottom: 8px; }
.msg.me { margin-left: auto; background: var(--crema); color: var(--carbon); border-bottom-right-radius: 4px; }
.msg.ai { background: rgba(28, 26, 23, .6); border: 1px solid var(--line-2); color: var(--dim); border-bottom-left-radius: 4px; }
.msg.ai b { color: var(--crema); font-weight: 500; }

/* estados */
.states { display: flex; align-items: center; flex-wrap: wrap; row-gap: 12px; }
.state { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-family: var(--mono); font-size: 11px; color: var(--dim); background: rgba(28, 26, 23, .6); white-space: nowrap; transition: border-color .5s, color .5s, box-shadow .5s; }
.state.on { border-color: var(--ambar); color: var(--ambar); box-shadow: 0 0 26px -4px rgba(232, 163, 61, .55); }
.state-link { width: 14px; height: 1px; background: var(--line-2); }

/* cita */
.quote { font-family: var(--serif); font-size: clamp(28px, 3vw, 42px); line-height: 1.1; letter-spacing: -.01em; max-width: 1000px; margin: 0; }

/* CTA final */
.cta { position: relative; border-radius: 28px; overflow: hidden; padding: 100px 60px; background: var(--cafe); border: 1px solid rgba(237, 230, 218, .08); text-align: center; }
.cta canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cta > *:not(canvas) { position: relative; z-index: 2; }
.cta h2 { font-size: clamp(36px, 4.6vw, 64px); max-width: 920px; margin: 24px auto 0; }
.cta p { color: var(--dim); max-width: 520px; margin: 24px auto 0; }
.cta .hero-cta { justify-content: center; }
.cta .sig { position: absolute; right: 26px; bottom: 24px; z-index: 2; }

/* footer */
footer { padding: 60px 0 40px; margin-top: 110px; border-top: 1px solid var(--line); overflow: hidden; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot-grid h4 { margin: 0 0 14px; font-size: 11px; font-weight: 400; color: var(--mute); font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.foot-grid a, .foot-grid span { display: block; font-size: 13.5px; color: var(--dim); margin-bottom: 9px; transition: color .2s; }
.foot-grid a:hover { color: var(--crema); }
.foot-grid a.brand { display: flex; color: var(--crema); font-size: 26px; }
.foot-big { font-family: var(--serif); font-size: clamp(56px, 9vw, 130px); line-height: .85; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px rgba(237, 230, 218, .13); margin-top: 60px; white-space: nowrap; user-select: none;
  background: radial-gradient(300px circle at var(--fx, -100px) 50%, rgba(232, 163, 61, .9), transparent 70%); -webkit-background-clip: text; background-clip: text; }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 30px; font-family: var(--mono); font-size: 11.5px; color: var(--mute); flex-wrap: wrap; }
.foot-bottom span { display: inline-flex; align-items: center; gap: 8px; }

/* pantallas, objetivos y checklist (deusto) */
.screens { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.screen { padding: 22px; min-height: 196px; }
.screen .path { font-family: var(--mono); font-size: 11px; color: var(--cobre); }
.screen h3 { margin: 30px 0 8px; font-family: var(--serif); font-size: 30px; font-weight: 400; letter-spacing: -.01em; }
.screen p { margin: 0; color: var(--dim); font-size: 13.5px; }
.oe { display: grid; grid-template-columns: 52px 1fr 70px; gap: 16px; align-items: baseline; padding: 14px 22px; border-bottom: 1px solid rgba(237, 230, 218, .05); font-size: 14px; color: var(--dim); transition: background .3s; }
.oe:hover { background: rgba(181, 112, 58, .08); }
.oe:last-child { border-bottom: 0; }
.oe .k { font-family: var(--mono); font-size: 12px; color: var(--cobre); }
.oe .ph { font-family: var(--mono); font-size: 11px; color: var(--mute); text-align: right; }
.checks { display: grid; gap: 9px; padding: 18px 20px; }
.ck { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; font-size: 13px; color: var(--dim); opacity: 0; transform: translateX(-10px); transition: opacity .5s, transform .6s var(--ease); transition-delay: calc(var(--i) * 110ms + .2s); }
.in .ck { opacity: 1; transform: none; }
.ck .chk.no { border-color: rgba(237, 230, 218, .2); color: var(--mute); }
.cats-legend { display: flex; gap: 16px; padding: 0 20px 18px; }

@media (prefers-reduced-motion: reduce) {
  .rv, .rise, [data-split] .wi, .node, .ck, .run, .ri { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .col { transition: none; } .marquee .track, .led, .caret, .chk.wait { animation: none; }
  .fill .fw { color: var(--crema); }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .hero-grid, .split, .split.rev { grid-template-columns: 1fr; gap: 48px; }
  .split.rev > :first-child { order: 0; }
  .sec-head { grid-template-columns: 1fr; gap: 20px; }
  .sec-head p { justify-self: start; }
  .rail-items { grid-template-columns: repeat(3, 1fr); row-gap: 20px; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .c2, .c3 { grid-column: span 1; } .c4, .c6 { grid-column: span 2; }
  .screens { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .cursor-light { display: none; }
}
@media (max-width: 720px) {
  section { padding: 90px 0; }
  .wrap { padding: 0 16px; }
  .hero { padding: 36px 0 80px; min-height: 0; }
  .nav .tag-mono, .brand small { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .stat .n { font-size: 42px; }
  .rail-items, .mods, .bento, .screens { grid-template-columns: 1fr; }
  .c2, .c3, .c4, .c6 { grid-column: span 1; }
  .flow { height: 340px; }
  .node { min-width: 0; max-width: 128px; font-size: 11px; padding: 7px 9px; }
  .node small { font-size: 9.5px; }
  .panel-head > span:not(.right) { display: none; }
  .flow-log div { grid-template-columns: 50px 1fr auto; font-size: 10.5px; }
  .run { grid-template-columns: 20px 1fr 56px; }
  .run .bar { display: none; }
  .cta { padding: 70px 22px; border-radius: 22px; }
  .foot-grid { grid-template-columns: 1fr; }
  .oe { grid-template-columns: 44px 1fr; } .oe .ph { display: none; }
  .iso { gap: 14px; } .col { --s: 26px; }
  .iso-wrap { height: 210px; }
}

/* que nada estire las columnas (marquesinas) */
.split > *, .hero-grid > *, .bento > *, .sec-head > * { min-width: 0; }

/* =========================================================
   ESCENAS DE SCROLL (v4) · solo con html.fx (GSAP cargado)
   ========================================================= */
.scene { position: relative; padding: 0; }
.pin { position: relative; }
html.fx .scene { height: var(--len, 260vh); }
html.fx .scene > .pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.scene-pad { padding: 130px 0; }
html.fx .scene-pad { padding: 0; }

/* hero con túnel */
.hero-grid { perspective: 1600px; }
.hero-vis { transform-style: preserve-3d; will-change: transform, opacity; }
.hero-copy { will-change: transform, opacity, filter; }
.warp-word { display: none; }
html.fx .warp-word { display: grid; position: absolute; inset: 0; place-items: center; pointer-events: none; z-index: 5; }
.warp-word span { font-family: var(--serif); font-size: clamp(64px, 13vw, 210px); line-height: .86; letter-spacing: -.03em; text-align: center; opacity: 0; display: block; padding: 0 16px; }
.warp-word em { color: var(--ambar); }
.scroll-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10.5px; color: var(--mute); letter-spacing: .1em; text-transform: uppercase; z-index: 6; }
html.fx .scroll-hint { display: flex; }
.scroll-hint i { width: 1px; height: 38px; background: linear-gradient(var(--ambar), transparent); animation: drip 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* frase gigante que se ilumina */
.statement { font-family: var(--serif); font-size: clamp(30px, 3.8vw, 56px); line-height: 1; letter-spacing: -.02em; max-width: 1150px; margin: 0; }

/* pista horizontal */
.hhead { margin-bottom: 40px; }
.htrack { display: flex; gap: 18px; flex-wrap: wrap; }
html.fx .htrack { flex-wrap: nowrap; width: max-content; will-change: transform; padding-right: 10vw; }
.hcard { flex: 1 1 260px; position: relative; padding: 30px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); min-height: 300px; display: flex; flex-direction: column; overflow: hidden;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
html.fx .hcard { flex: none; width: min(380px, 78vw); will-change: transform, opacity; }
.hcard .num { font-family: var(--serif); font-size: clamp(52px, 5vw, 76px); line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(237, 230, 218, .28); letter-spacing: -.04em; }
.hcard.on .num { -webkit-text-stroke-color: var(--ambar); text-shadow: 0 0 40px rgba(232, 163, 61, .25); }
.hcard .k { font-family: var(--mono); font-size: 11.5px; color: var(--cobre); margin-top: auto; padding-top: 30px; }
.hcard h3 { font-family: var(--serif); font-size: 28px; font-weight: 400; letter-spacing: -.01em; line-height: 1.02; margin: 10px 0 10px; }
.hcard p { margin: 0; color: var(--dim); font-size: 14.5px; }
.hbar { height: 1px; background: var(--line-2); margin-top: 34px; position: relative; }
.hbar i { position: absolute; left: 0; top: 0; height: 1px; width: 0; background: linear-gradient(90deg, var(--cobre), var(--ambar)); box-shadow: 0 0 12px var(--ambar); }
.hbar i::after { content: ''; position: absolute; right: -5px; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 16px 3px var(--ambar); }
.hcount { font-family: var(--mono); font-size: 11.5px; color: var(--mute); margin-top: 14px; display: flex; justify-content: space-between; }

/* LED que crece hasta llenar la pantalla */
.morph .pin { display: grid; place-items: center; }
.morph-fill { position: relative; background: var(--ambar); color: var(--carbon); padding: 120px 24px; border-radius: 28px; text-align: center; }
html.fx .morph-fill { position: absolute; inset: 0; border-radius: 0; padding: 0 24px; display: grid; place-items: center; clip-path: circle(5px at 50% 50%); will-change: clip-path; }
.morph-fill::before { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 40%, rgba(255, 240, 200, .5), transparent 70%); pointer-events: none; }
.morph-text { position: relative; max-width: 1150px; margin: 0 auto; }
.morph-text .eyebrow { color: rgba(28, 26, 23, .65); justify-content: center; }
.morph-text .eyebrow::before { background: var(--carbon); }
.morph-text h2 { font-size: clamp(54px, 9.5vw, 160px); color: var(--carbon); margin-top: 20px; }
.morph-text p { font-size: 17px; color: rgba(28, 26, 23, .72); max-width: 560px; margin: 24px auto 0; }
.morph-mark { display: none; }
html.fx .morph-mark { display: block; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--carbon); opacity: 0; box-shadow: 0 0 0 6px rgba(28, 26, 23, .15); }
.morph-cap { display: none; }
html.fx .morph-cap { display: block; position: absolute; left: 0; right: 0; top: calc(50% + 110px); text-align: center; opacity: 0; padding: 0 16px; }
.morph-cap h3 { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 46px); font-weight: 400; letter-spacing: -.01em; }
.morph-cap p { color: var(--dim); margin: 10px auto 0; max-width: 460px; font-size: 14.5px; }
.morph-cap .states { justify-content: center; margin-top: 22px; }
.morph-intro { display: none; }
html.fx .morph-intro { display: block; position: absolute; left: 0; right: 0; top: calc(50% + 40px); text-align: center; font-family: var(--mono); font-size: 11.5px; color: var(--mute); letter-spacing: .1em; text-transform: uppercase; }

/* cilindro 3D */
.cyl-stage { position: relative; }
html.fx .cyl-stage { perspective: 1700px; height: 470px; display: grid; place-items: center; margin-top: 10px; }
.cyl { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
html.fx .cyl { display: block; position: relative; width: 300px; height: 380px; transform-style: preserve-3d; will-change: transform; }
.ccard { position: relative; padding: 26px; border-radius: 20px; background: rgba(42, 31, 23, .92); border: 1px solid var(--line-2); display: flex; flex-direction: column; min-height: 240px; }
html.fx .ccard { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: border-color .4s, box-shadow .4s; }
.ccard.on { border-color: rgba(232, 163, 61, .55); box-shadow: 0 0 60px -10px rgba(232, 163, 61, .35); }
.ccard .path { font-family: var(--mono); font-size: 11px; color: var(--cobre); }
.ccard .ix { font-family: var(--serif); font-size: 80px; line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(237, 230, 218, .22); margin-top: 22px; }
.ccard.on .ix { -webkit-text-stroke-color: var(--ambar); }
.ccard h3 { font-family: var(--serif); font-size: 34px; font-weight: 400; margin: auto 0 8px; letter-spacing: -.01em; }
.ccard p { margin: 0; color: var(--dim); font-size: 13.5px; }
.cyl-floor { display: none; }
html.fx .cyl-floor { display: block; position: absolute; left: 50%; bottom: -10px; width: 760px; height: 160px; margin-left: -380px; border-radius: 50%; background: radial-gradient(closest-side, rgba(232, 163, 61, .16), transparent); filter: blur(10px); }

/* tarjetas apiladas */
.stack { display: grid; gap: 28px; }
.stack-card { position: sticky; top: calc(96px + var(--i) * 16px); transform-origin: 50% 0; will-change: transform, filter; }
.stack-card .mod { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 320px; }
.stack-card .mock { border-bottom: 0; border-right: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; justify-content: center; }
.stack-card .txt { padding: 36px; display: flex; flex-direction: column; justify-content: center; }
.stack-card .txt .ix { font-family: var(--serif); font-size: 56px; line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(232, 163, 61, .6); }
.stack-card .txt h3 { font-size: clamp(26px, 2.6vw, 34px); }

/* órbita de barras */
.orbit-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; width: 100%; }
.orbit-stage { height: 400px; display: grid; place-items: center; perspective: 1400px; }
.orbit-stage .iso { transform: rotateX(58deg) rotateZ(-42deg) translate(0, 40px); }
.orbit-stage .col { --s: 40px; transition: none; }
.orbit-stage .iso { gap: 30px; }
.cat-list { display: grid; gap: 10px; margin-top: 30px; }
.cat-row { display: grid; grid-template-columns: 1fr 40px; gap: 12px; font-size: 14.5px; color: var(--dim); padding: 10px 0; border-bottom: 1px solid var(--line); opacity: .35; transition: opacity .4s, color .4s; }
.cat-row b { font-family: var(--serif); font-size: 12px; font-weight: 400; color: var(--crema); text-align: right; line-height: 1; }
.cat-row.on { opacity: 1; color: var(--crema); }
.cat-row.on b { color: var(--ambar); }
.orbit-total { font-family: var(--serif); font-size: clamp(60px, 6vw, 96px); line-height: .85; letter-spacing: -.03em; }

/* montaje desde el fondo */
.assemble { perspective: 1600px; }

@media (max-width: 1080px) {
  .orbit-grid { grid-template-columns: 1fr; gap: 10px; }
  .orbit-stage { height: 300px; }
  .orbit-stage .col { --s: 36px; } .orbit-stage .iso { gap: 18px; }
  .stack-card .mod { grid-template-columns: 1fr; }
  .stack-card .mock { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 720px) {
  html.fx .cyl { width: 230px; height: 320px; }
  html.fx .cyl-stage { height: 400px; }
  .hcard { min-height: 300px; padding: 24px; }
  .hcard h3 { font-size: 30px; }
  .stack-card .txt { padding: 24px; }
  .stack-card .txt .ix { font-size: 64px; }
  .orbit-stage { height: 240px; }
  .orbit-stage .col { --s: 28px; } .orbit-stage .iso { gap: 14px; }
  .orbit-grid .cat-list { display: none; }
  .morph-cap { top: calc(50% + 90px); }
}



/* =========================================================
   ESCENAS EXTRA (v5): números, profundidad, panel que se aleja, bandas
   ========================================================= */

/* números que corren con el scroll */
.numgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 50px; border-top: 1px solid var(--line); }
.nb { padding: 30px 26px 10px 0; transition: opacity .5s; }
.nb + .nb { padding-left: 26px; border-left: 1px solid var(--line); }
html.fx .nb { opacity: .25; }
html.fx .nb.on { opacity: 1; }
.nb .n { font-family: var(--serif); font-size: clamp(48px, 5vw, 76px); line-height: .85; letter-spacing: -.03em; white-space: nowrap; }
.nb .n small { font-size: .4em; color: var(--mute); }
.nb p { margin: 16px 0 0; color: var(--dim); font-size: 14px; max-width: 220px; }
.nb .line { height: 1px; background: var(--line-2); margin-top: 22px; position: relative; }
.nb .line i { position: absolute; left: 0; top: 0; height: 1px; width: 0; background: linear-gradient(90deg, var(--cobre), var(--ambar)); box-shadow: 0 0 10px var(--ambar); }
html:not(.fx) .nb .line i { width: 100%; }

/* viaje en profundidad */
.depth-static { display: grid; gap: 40px; }
html.fx .depth .pin { perspective: 900px; perspective-origin: 50% 50%; }
html.fx .depth-static { display: block; position: absolute; inset: 0; transform-style: preserve-3d; }
.ditem { text-align: center; }
html.fx .ditem { position: absolute; left: 50%; top: 50%; width: min(900px, 92vw); will-change: transform, opacity, filter; opacity: 0; }
.ditem .yr { font-family: var(--serif); font-size: clamp(120px, 20vw, 300px); line-height: .8; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.2px rgba(232, 163, 61, .8); display: block; }
.ditem h3 { font-family: var(--serif); font-size: clamp(34px, 4vw, 58px); font-weight: 400; letter-spacing: -.01em; margin: 18px 0 12px; }
.ditem p { color: var(--dim); max-width: 520px; margin: 0 auto; font-size: 16px; }
.tunnel { display: none; }
html.fx .tunnel { display: block; position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.tunnel i { position: absolute; left: 50%; top: 50%; width: 86vw; height: 76vh; margin: -38vh 0 0 -43vw; border: 1px solid rgba(232, 163, 61, .35); border-radius: 36px; box-shadow: 0 0 30px -10px rgba(232, 163, 61, .3), inset 0 0 30px -10px rgba(232, 163, 61, .2); will-change: transform, opacity; }
.depth-label { position: absolute; left: 24px; top: 96px; z-index: 3; }
.depth-count { position: absolute; right: 24px; bottom: 30px; font-family: var(--mono); font-size: 11.5px; color: var(--mute); z-index: 3; }
html:not(.fx) .depth-label, html:not(.fx) .depth-count { position: static; }

/* panel que se aleja hasta su sitio */
.zd-title { text-align: center; margin-bottom: 34px; position: relative; z-index: 3; }
.zd-stage { perspective: 1800px; display: grid; place-items: center; }
.zd { width: min(1100px, 100%); border-radius: 18px; background: rgba(28, 26, 23, .94); border: 1px solid var(--line-2); display: grid; grid-template-columns: 180px 1fr; overflow: hidden;
  box-shadow: 0 60px 140px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(232, 163, 61, .05); transform-origin: 50% 20%; will-change: transform, filter; }
.zd-side { padding: 18px 14px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.zd-side .brand { font-size: 19px; margin-bottom: 18px; }
.zd-side a { font-size: 12.5px; color: var(--dim); padding: 8px 10px; border-radius: 8px; display: flex; align-items: center; gap: 8px; }
.zd-side a.on { background: rgba(181, 112, 58, .18); color: var(--crema); }
.zd-side .grp { font-family: var(--mono); font-size: 10px; color: var(--mute); margin: 12px 10px 4px; text-transform: uppercase; letter-spacing: .06em; }
.zd-main { padding: 20px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(120px, auto); gap: 12px; }
.zd-top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; }
.zd-top b { font-family: var(--serif); font-weight: 400; font-size: 30px; }
.zc { border-radius: 14px; border: 1px solid var(--line); background: rgba(58, 40, 28, .35); padding: 14px; will-change: transform, opacity; }
.zc .label { display: block; margin-bottom: 10px; }
.zc.w2 { grid-column: span 2; }
.ev { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid rgba(237, 230, 218, .04); }
.ev:last-child { border-bottom: 0; }
.ev .h { font-family: var(--mono); font-size: 11px; color: var(--cobre); }
.hl { display: grid; grid-template-columns: 1fr auto; font-size: 12.5px; padding: 5px 0; color: var(--dim); }
.hl .led { width: 6px; height: 6px; align-self: center; }
.hl .off { width: 6px; height: 6px; border-radius: 50%; background: var(--cobre); align-self: center; }
.zc .ring { width: 96px; height: 96px; }
.zc .ring b { font-size: 26px; }
.zd-cap { text-align: center; margin-top: 30px; color: var(--dim); font-size: 14.5px; }

/* bandas de texto que reaccionan a la velocidad */
.vband { overflow: hidden; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; z-index: 2; margin: 40px 0; }
.vtrack { display: flex; width: max-content; will-change: transform; }
.vtrack span { font-family: var(--serif); font-size: clamp(64px, 9vw, 150px); line-height: 1; letter-spacing: -.02em; white-space: nowrap; padding-right: .35em; display: inline-flex; align-items: center; gap: .35em; }
.vtrack span.o { color: transparent; -webkit-text-stroke: 1px rgba(237, 230, 218, .35); }
.vtrack span::after { content: ''; width: .14em; height: .14em; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 20px var(--ambar); display: inline-block; }

/* rótulos que se descifran */
.scr-c { color: var(--ambar); }

@media (max-width: 1080px) {
  .numgrid { grid-template-columns: 1fr 1fr; }
  .nb:nth-child(3) { padding-left: 0; border-left: 0; }
  .nb:nth-child(n+3) { border-top: 1px solid var(--line); }
  .zd { grid-template-columns: 1fr; }
  .zd-side { display: none; }
  .zd-main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nb .n { font-size: 46px; }
  .nb { padding-right: 12px !important; }
  .nb + .nb { padding-left: 12px; }
  .zd-main { grid-template-columns: 1fr; padding: 14px; gap: 10px; }
  .zc.w2 { grid-column: auto; }
  .zd-main .zc.hide-m { display: none; }
  .tunnel i { border-radius: 24px; }
  .depth-label { top: 80px; left: 16px; }
}

/* sin desplazamiento lateral por paneles girados al entrar */
main { overflow-x: clip; }
@media (max-width: 720px) { #problemas .run { grid-template-columns: 1fr 40px !important; } }