/* jeffzambrano.com · v4 · la identidad de la web anterior de Jeff
   Paleta de su web anterior (oscuro #0a0a0f + lima #c4e54a + aguamarina #7edcd0; claro #f7f7f2 +
   naranja #d94515 + cian #0891b2), esquinas redondeadas, Figtree, nada en blanco y negro por defecto,
   sin cursivas. Oscuro por defecto, como su web anterior. */

:root {
  --bg: #0a0a0f;
  --fg: #e8e8e0;
  --card: #141418;
  --muted: #1a1a20;
  --mute: #8a8a94;
  --line: rgba(232, 232, 224, .1);
  --pri: #c4e54a;
  --pri-ink: #0a0a0f;
  --acc: #7edcd0;
  --grad: linear-gradient(90deg, #c4e54a, #7edcd0);
  --glass: rgba(20, 20, 24, .62);
  --shadow: 0 30px 80px rgba(0, 0, 0, .45);
  --r: 14px;
  --R: 26px;
  --g: clamp(16px, 4vw, 64px);
  --f: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(.22, .8, .2, 1);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f7f7f2;
  --fg: #141416;
  --card: #ffffff;
  --muted: #eeeee8;
  --mute: #52525b;
  --line: rgba(20, 20, 22, .1);
  --pri: #c73f12;
  --pri-ink: #ffffff;
  --acc: #0891b2;
  --grad: linear-gradient(90deg, #d94515, #0891b2);
  --glass: rgba(255, 255, 255, .7);
  --shadow: 0 30px 70px rgba(20, 20, 22, .12);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 450 16px/1.6 var(--f); -webkit-font-smoothing: antialiased; transition: background .5s var(--ease), color .5s var(--ease); }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; font-weight: 600; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--pri); color: var(--pri-ink); }
main, .foot { overflow-x: clip; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--g); }
em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mark { font-weight: 400; letter-spacing: -.03em; }
.mark i { font-style: normal; color: var(--pri); }

/* ---------- títulos ---------- */
strong, b { font-weight: 600; }

.h-xl { font-weight: 600; font-size: clamp(44px, 8.6vw, 150px); line-height: .88; letter-spacing: -.045em; margin: 0; }
.h-l { font-weight: 600; font-size: clamp(34px, 4.6vw, 72px); line-height: .98; letter-spacing: -.035em; margin: 0; }
h1.h-l, h2, h2.h-l { font-weight: 450; }
.h-m { font-weight: 600; font-size: clamp(22px, 2vw, 30px); line-height: 1.12; letter-spacing: -.02em; margin: 0; }
.lead { font-size: clamp(17px, 1.35vw, 20px); color: var(--mute); max-width: 60ch; margin: 18px 0 0; line-height: 1.55; }
.secthead { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: clamp(30px, 4vw, 56px); }
.secthead .lead { margin: 0; max-width: 46ch; }
.sec { padding: clamp(90px, 11vw, 170px) 0; }

/* ---------- pastillas y botones ---------- */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill .dot, .dotc { width: 7px; height: 7px; border-radius: 50%; background: var(--pri); flex: none; }
.pill .dot2 { background: var(--acc); }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font-weight: 600; font-size: 15px; transition: transform .35s var(--ease), background .3s, color .3s, box-shadow .35s; will-change: transform; }
.btn svg { width: 16px; height: 16px; }
.btn-p { background: var(--pri); color: var(--pri-ink); box-shadow: 0 10px 30px color-mix(in srgb, var(--pri) 30%, transparent); }
.btn-p:hover { transform: translateY(-2px); box-shadow: 0 16px 40px color-mix(in srgb, var(--pri) 45%, transparent); }
.btn-g { border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn-g:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--fg) 30%, transparent); }
.icob { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 12px; font-weight: 600; transition: transform .3s var(--ease), border-color .3s; }
.icob:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--fg) 30%, transparent); }
.icob svg { width: 18px; height: 18px; }
.icob .moon { display: none; }
:root[data-theme="light"] .icob .sun { display: none; }
:root[data-theme="light"] .icob .moon { display: block; }

/* ---------- cabecera ---------- */
.head { position: fixed; inset: 16px 0 auto 0; z-index: 60; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 var(--g); pointer-events: none; transition: color .4s var(--ease); }
.head > * { pointer-events: auto; }
.head .logo { font-size: 24px; justify-self: start; }
.nav { display: flex; gap: 2px; padding: 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.nav a, .nav button { padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: color-mix(in srgb, var(--fg) 78%, transparent); transition: background .25s, color .25s; }
.nav a:hover, .nav button:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 7%, transparent); }
.nav a[aria-current="page"] { color: var(--fg); background: color-mix(in srgb, var(--fg) 11%, transparent); }
.tools { display: flex; align-items: center; gap: 10px; justify-self: end; }
.burger { display: none; }
.head.onpaper { color: #141416; }
.head.onpaper .nav, .head.onpaper .icob { background: rgba(255, 255, 255, .6); border-color: rgba(20, 20, 22, .12); }
.head.onpaper .nav a, .head.onpaper .nav button { color: rgba(20, 20, 22, .78); }
.head.onpaper .mark i { color: #7aa312; }
.sheet { position: fixed; inset: 0; z-index: 70; background: var(--bg); display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 var(--g); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
.sheet.open { opacity: 1; visibility: visible; }
.sheet a, .sheet button.big { font-weight: 600; font-size: clamp(40px, 12vw, 80px); letter-spacing: -.04em; text-align: left; line-height: 1.05; }
.sheet .x { position: absolute; top: 22px; right: var(--g); }

/* ---------- cabecera de tinta ---------- */
.ink { position: relative; height: 380vh; }
.ink .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #f7f7f2; }
.ink canvas, .ink .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ink .fill { position: absolute; inset: 0; background: var(--bg); opacity: 0; pointer-events: none; }
.ink .hero { position: absolute; left: var(--g); bottom: clamp(40px, 9vh, 110px); will-change: transform, opacity; }
/* cada letra mide su propio fondo y cambia de oscuro a claro cuando la tinta le pasa por detrás: nunca un gris a medias */
.ink .hero [data-tono] { color: #141416; transition: color .35s var(--ease); }
.ink .hero .w { display: inline-block; }
.ink .hero [data-tono].claro { color: #e8e8e0; }
.ink .hero h1 { font-weight: 450; font-size: clamp(46px, 9.6vw, 184px); line-height: .84; }
.ink .hero h1 i { font-style: normal; color: #9bc21a; }
.ink .hero .row { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.ink .hero .sub { font-weight: 600; font-size: clamp(12px, 1vw, 15px); letter-spacing: .3em; text-transform: uppercase; opacity: .78; }
.ink .iris { position: absolute; left: 36%; top: 52%; width: 42vmin; height: 42vmin; margin: -21vmin 0 0 -21vmin; border-radius: 50%; background: radial-gradient(circle, transparent 63%, #c4e54a 64.5%, rgba(126, 220, 208, .5) 66%, transparent 69%); box-shadow: 0 0 80px rgba(196, 229, 74, .25); opacity: 0; transform: scale(0); pointer-events: none; will-change: transform, opacity; }
.ink .side { position: absolute; top: 58%; display: grid; gap: 10px; font-size: 14px; font-weight: 600; color: #2a2a30; }
.ink .side.l { left: var(--g); }
.ink .side.r { right: var(--g); text-align: right; }
.ink .side span { display: inline-flex; align-items: center; gap: 10px; }
.ink .side.r span { justify-content: flex-end; }
.ink .side .dotc { background: #0891b2; }
.ink .hint { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #3a3a40; }
.ink .hint i { width: 1px; height: 46px; background: linear-gradient(#141416, transparent); animation: drip 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.ink .end { position: absolute; left: 50%; top: 42%; width: min(90vw, 1100px); transform: translate(-50%, -50%); text-align: center; opacity: 0; pointer-events: none; }
.ink .end p { margin: 0; font-weight: 450; font-size: clamp(30px, 4.4vw, 68px); line-height: 1.02; letter-spacing: -.035em; color: var(--fg); }
.ink .loader { position: absolute; right: var(--g); bottom: 34px; width: 120px; height: 3px; border-radius: 3px; background: rgba(20, 20, 22, .12); overflow: hidden; }
.ink .loader i { display: block; height: 100%; width: 0; background: #0891b2; transition: width .2s; }
.ink .loader.done { opacity: 0; transition: opacity .6s .3s; }

/* ---------- obra: recorrido horizontal con tarjetas iguales ---------- */
.hz { position: relative; }
.hz .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.hz .trackwrap { position: relative; }
.hz .secthead { padding: 0 var(--g); max-width: 1440px; width: 100%; margin: 0 auto clamp(26px, 3.4vw, 44px); }
.hz .count { font-weight: 600; font-size: 14px; color: var(--mute); font-variant-numeric: tabular-nums; }
.hz .count b { color: var(--fg); }
.track { display: flex; gap: 26px; padding: 0 var(--g); will-change: transform; }
.wcard { position: relative; flex: 0 0 auto; width: min(42vw, 720px); aspect-ratio: 2 / 1; transition: transform .6s var(--ease), opacity .6s var(--ease); }
.wcard::before { content: ""; position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--pri) 34%, transparent), color-mix(in srgb, var(--acc) 12%, transparent) 60%, transparent); filter: blur(30px); opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; z-index: -1; }
.wcard::before { display: none; }
.wcard.is-lit { opacity: 1; transform: translateY(-16px); }
.wcard .face { position: absolute; inset: 0; border-radius: var(--R); overflow: hidden; background: var(--card); box-shadow: var(--shadow); isolation: isolate; }
.wcard .sheetdata { display: none; }
.wcard.arch .face { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; background: var(--muted); }
.wcard.arch .face img { width: 100%; height: 100%; object-fit: cover; }
.wcard.arch .face .over { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 10, 15, .55); color: #e8e8e0; font-weight: 600; font-size: clamp(22px, 2.2vw, 32px); letter-spacing: -.02em; }
.hz .ring { position: absolute; left: 36%; width: calc(min(42vw, 720px) * .62); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 4; background: radial-gradient(circle, transparent 66%, var(--pri) 67.5%, color-mix(in srgb, var(--acc) 50%, transparent) 69%, transparent 72%); box-shadow: 0 0 70px color-mix(in srgb, var(--pri) 22%, transparent); }
.hz .tsheet { position: relative; margin: clamp(22px, 3vw, 36px) 0 0; padding: 0 var(--g); min-height: 112px; }
.hz .tsheet .in { position: absolute; left: calc(36% - min(42vw, 720px) / 2); right: var(--g); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; }
.hz .tsheet .kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 46px; padding: 0 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); overflow: hidden; font-size: 13.5px; min-width: 0; }
.hz .tsheet .kv span { color: var(--mute); font-weight: 600; white-space: nowrap; }
.hz .tsheet .kv b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; animation: subir .45s var(--ease) both; }
@keyframes subir { from { transform: translateY(110%); opacity: 0; } to { transform: none; opacity: 1; } }
.wcard .media { position: absolute; inset: -4% -8%; transition: transform .9s var(--ease); }
.wcard .media video, .wcard .media img { width: 100%; height: 100%; object-fit: cover; }
.wcard .face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 15, .86), rgba(10, 10, 15, 0) 52%); pointer-events: none; }
.wcard .info { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; color: #e8e8e0; display: grid; gap: 10px; }
.wcard .info h3 { margin: 0; font-weight: 600; font-size: clamp(22px, 2.1vw, 32px); line-height: 1.02; letter-spacing: -.025em; }
.wcard .info .pills { display: flex; flex-wrap: wrap; gap: 8px; }
.wcard .info .pill { background: rgba(232, 232, 224, .12); border-color: rgba(232, 232, 224, .16); color: #e8e8e0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12px; padding: 7px 12px; }
.wcard .info .pill .dot { background: #c4e54a; }
.wcard .play { position: absolute; top: 18px; right: 18px; z-index: 2; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(232, 232, 224, .14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #e8e8e0; transition: transform .35s var(--ease), background .3s, color .3s; }
.wcard .play svg { width: 18px; height: 18px; }
.wcard .hit { position: absolute; inset: 0; z-index: 3; }
.wcard:hover { transform: translateY(-6px); }
.wcard:not(.is-lit) { opacity: .36; }
.wcard:not(.is-lit):hover { opacity: .7; }
.wcard:hover .media { transform: scale(1.04); }
.wcard.is-lit:hover { transform: translateY(-20px); }
.wcard:hover .play { background: #c4e54a; color: #0a0a0f; transform: scale(1.08); }
.kb { position: absolute; inset: 0; }
.kb img { position: absolute; inset: 0; opacity: 0; animation: kb 16s linear infinite; }
.kb img:nth-child(1) { animation-delay: 0s; } .kb img:nth-child(2) { animation-delay: 4s; } .kb img:nth-child(3) { animation-delay: 8s; } .kb img:nth-child(4) { animation-delay: 12s; }
@keyframes kb { 0% { opacity: 0; transform: scale(1.02); } 6% { opacity: 1; } 25% { opacity: 1; } 31% { opacity: 0; transform: scale(1.08); } 100% { opacity: 0; } }
.still { animation: push 18s ease-in-out infinite alternate; }
@keyframes push { from { transform: scale(1); } to { transform: scale(1.07); } }
.hz .bar { margin: clamp(26px, 3.4vw, 44px) auto 0; width: calc(100% - 2 * var(--g)); max-width: calc(1440px - 2 * var(--g)); height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.hz .bar i { display: block; height: 100%; width: 0; background: var(--grad); }
.hz .all { display: flex; justify-content: center; margin-top: 28px; }

/* ---------- cifras que cuentan ---------- */
.stats4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.rcard { border-radius: var(--R); background: var(--card); border: 1px solid var(--line); padding: 26px; display: grid; justify-items: center; text-align: center; gap: 6px; transition: transform .5s var(--ease), border-color .4s; }
.rcard:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--pri) 40%, transparent); }
.rcard .rg { position: relative; width: 168px; height: 168px; margin-bottom: 12px; }
.rcard svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rcard svg circle { fill: none; stroke-width: 7; }
.rcard .trk { stroke: var(--muted); }
.rcard .arc { stroke: var(--pri); stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 1.4s var(--ease); }
.rcard .tic { stroke: color-mix(in srgb, var(--acc) 70%, transparent); stroke-width: 7; opacity: 0; transition: opacity 1s var(--ease) .4s; }
.rcard.in .arc { stroke-dasharray: var(--v) 100; }
.rcard.in .tic { opacity: 1; }
.rcard .num { position: absolute; inset: 0; display: grid; place-content: center; gap: 2px; }
.rcard .num b { font-weight: 600; font-size: 32px; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.rcard .num small { font-size: 11px; color: var(--mute); font-weight: 600; max-width: 120px; line-height: 1.25; }
.rcard h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.25; }
.rcard p { margin: 0; color: var(--mute); font-size: 14px; line-height: 1.45; }
.scard { position: relative; border-radius: var(--R); background: var(--card); border: 1px solid var(--line); padding: 26px 26px 24px; min-height: 236px; display: flex; flex-direction: column; overflow: hidden; transition: transform .5s var(--ease), border-color .4s; }
.scard:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--pri) 40%, transparent); }
.scard .n { font-weight: 600; font-size: clamp(44px, 4.4vw, 68px); line-height: .95; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.scard .n .u { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.scard h3 { margin: 14px 0 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.scard p { margin: 6px 0 0; color: var(--mute); font-size: 14px; line-height: 1.45; }
.scard .meter { margin-top: auto; padding-top: 18px; }
.scard .meter span { display: block; height: 6px; border-radius: 6px; background: var(--muted); overflow: hidden; }
.scard .meter i { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--grad); transition: width 1.6s var(--ease); }
.scard .src { margin-top: 10px; font-size: 11.5px; color: var(--mute); }
.scard.in .meter i { width: var(--w, 60%); }

/* ---------- método: seis pasos iguales ---------- */
.steps6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.step { position: relative; border-radius: var(--R); overflow: hidden; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform .5s var(--ease); }
.step:hover { transform: translateY(-4px); }
.step .im { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.step .im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s var(--ease), transform .9s var(--ease); }
.step .im img + img { opacity: 0; }
.step:hover .im img { transform: scale(1.04); }
.step:hover .im img + img { opacity: 1; }
.step .tx { padding: 22px 24px 26px; display: grid; gap: 8px; }
.step .k { font-weight: 600; font-size: 13px; color: var(--pri); font-variant-numeric: tabular-nums; }
.step h3 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.015em; }
.step p { margin: 0; color: var(--mute); font-size: 15px; }

/* ---------- marquesina de herramientas ---------- */
.marq { overflow: hidden; padding: 6px 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marq .row { display: flex; gap: 14px; width: max-content; animation: marq 38s linear infinite; }
.marq .row.rev { animation-direction: reverse; animation-duration: 46s; margin-top: 14px; }
.marq .pill { font-size: 17px; padding: 13px 22px; font-weight: 600; background: var(--card); }
@keyframes marq { to { transform: translateX(-50%); } }
.marq:hover .row { animation-play-state: paused; }

/* ---------- sobre mí en la portada ---------- */
.meet { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.halo { position: relative; }
.halo::before { content: ""; position: absolute; inset: -18% -22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(196, 229, 74, .3), rgba(126, 220, 208, .1) 55%, transparent); filter: blur(40px); pointer-events: none; z-index: -1; }
:root[data-theme="light"] .halo::before { background: radial-gradient(closest-side, rgba(217, 69, 21, .26), rgba(8, 145, 178, .08) 55%, transparent); }
.portrait { position: relative; border-radius: var(--R); overflow: hidden; aspect-ratio: 4 / 5; background: var(--card); box-shadow: var(--shadow); }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: filter .6s var(--ease), transform 1s var(--ease), opacity .5s; }
.portrait img.pl { opacity: 0; }
:root[data-theme="light"] .portrait img.pd { opacity: 0; }
:root[data-theme="light"] .portrait img.pl { opacity: 1; }
.portrait:hover img { filter: grayscale(1); transform: scale(1.03); }
.portrait .badge { position: absolute; left: 18px; bottom: 18px; z-index: 2; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.meet .btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ---------- llamada final y redes ---------- */
.cta { position: relative; border-radius: calc(var(--R) + 8px); background: var(--card); border: 1px solid var(--line); padding: clamp(36px, 6vw, 90px); overflow: hidden; }
.cta::before { content: ""; position: absolute; width: 60vw; height: 60vw; right: -20vw; top: -30vw; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--pri) 22%, transparent), transparent 62%); pointer-events: none; }
.cta .routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 36px; position: relative; }
.route { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; border-radius: var(--r); background: var(--muted); border: 1px solid var(--line); font-weight: 600; transition: transform .35s var(--ease), border-color .3s; }
.route svg { width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease); }
.route:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--pri) 45%, transparent); }
.route:hover svg { transform: translateX(4px); }
.cta .mailrow { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.soc { display: flex; flex-wrap: wrap; gap: 10px; }
.soc a { transition: transform .3s var(--ease), border-color .3s, color .3s; }
.soc a:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--pri) 50%, transparent); }
.soc a svg { width: 12px; height: 12px; opacity: .7; }

/* ---------- pie ---------- */
.foot { border-top: 1px solid var(--line); margin-top: clamp(60px, 8vw, 110px); }
.foot .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; padding-top: 50px; padding-bottom: 40px; }
.foot .mark { font-size: clamp(56px, 8vw, 120px); line-height: .9; }
.foot .fl { color: var(--mute); font-size: 14px; margin-top: 18px; }
.foot .fl a { color: var(--fg); }
.foot .fr { display: grid; gap: 22px; align-content: start; }
.foot .fnav { display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 600; }
.foot .fnav a:hover { color: var(--pri); }
.foot .legal { grid-column: 1 / -1; display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 10px 24px; color: var(--mute); font-size: 13px; padding-top: 24px; border-top: 1px solid var(--line); }
.foot .legal a { text-decoration: underline; text-underline-offset: 3px; }
.wa { position: fixed; right: 22px; bottom: 22px; z-index: 55; }

/* ---------- páginas interiores ---------- */
main.page { padding-top: 140px; }
.ptop { padding-bottom: clamp(40px, 6vw, 80px); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.tab { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; font-size: 14px; color: var(--mute); transition: background .25s, color .25s, border-color .25s; }
.tab:hover { color: var(--fg); }
.tab[aria-pressed="true"] { background: var(--pri); color: var(--pri-ink); border-color: var(--pri); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.acard { position: relative; display: block; border-radius: var(--R); overflow: hidden; background: var(--card); border: 1px solid var(--line); transition: transform .5s var(--ease); text-align: left; width: 100%; }
.acard:hover { transform: translateY(-5px); }
.acard .im { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--muted); }
.acard .im img, .acard .im video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.acard:hover .im img, .acard:hover .im video { transform: scale(1.05); }
.acard .tx { padding: 18px 20px 22px; display: grid; gap: 8px; }
.acard h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.acard .pills { display: flex; flex-wrap: wrap; gap: 6px; }
.acard .pill { font-size: 12px; padding: 6px 11px; }
.acard[hidden] { display: none; }

/* sobre mí */
.ahero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.typed { margin-top: 30px; font: 400 15.5px/1.75 var(--mono); color: color-mix(in srgb, var(--fg) 88%, transparent); max-width: 58ch; }
.typed p { margin: 0 0 1em; }
.typed .noise { color: var(--pri); }
.typed .caret { display: inline-block; width: 8px; height: 1.1em; background: var(--pri); vertical-align: -3px; margin-left: 2px; border-radius: 2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.grid5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.bcard { border-radius: var(--R); background: var(--card); border: 1px solid var(--line); padding: 24px; display: grid; gap: 10px; align-content: start; min-height: 220px; }
.bcard .k { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--pri) 14%, transparent); color: var(--pri); font-weight: 600; font-size: 14px; }
.bcard h3 { margin: 6px 0 0; font-size: 18px; font-weight: 600; line-height: 1.2; }
.bcard p { margin: 0; color: var(--mute); font-size: 14.5px; }
.tl { position: relative; display: flex; gap: 18px; overflow-x: auto; padding: 30px var(--g) 20px; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g); scrollbar-width: thin; }
.tl::before { content: ""; position: absolute; left: var(--g); right: var(--g); top: 38px; height: 2px; background: var(--line); }
.tlc { position: relative; flex: 0 0 min(80vw, 340px); scroll-snap-align: start; padding-top: 28px; }
.tlc::before { content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 3px solid var(--pri); }
.tlc .box { border-radius: var(--R); background: var(--card); border: 1px solid var(--line); padding: 22px; min-height: 230px; display: grid; gap: 8px; align-content: start; }
.tlc .y { font-weight: 600; color: var(--pri); font-size: 14px; }
.tlc h3 { margin: 0; font-size: 18px; font-weight: 600; }
.tlc .o { color: var(--fg); opacity: .7; font-size: 14px; font-weight: 600; }
.tlc p { margin: 0; color: var(--mute); font-size: 14.5px; }
.edu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ecard { border-radius: var(--r); background: var(--card); border: 1px solid var(--line); padding: 18px 20px; display: grid; gap: 6px; min-height: 120px; align-content: start; }
.ecard .y { font-size: 12.5px; font-weight: 600; color: var(--acc); }
.ecard h3 { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.ecard .o { color: var(--mute); font-size: 13.5px; }
.plan { position: relative; display: grid; grid-template-columns: 40px repeat(3, minmax(0, 1fr)); gap: 0 22px; }
.plan .line { grid-row: 1 / span 2; position: relative; }
.plan .line svg { position: sticky; top: 18vh; width: 40px; height: 64vh; overflow: visible; }
.plan .line path { fill: none; stroke: var(--line); stroke-width: 2; }
.plan .line path.on { stroke: var(--pri); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
.plan .line circle { fill: var(--bg); stroke: var(--pri); stroke-width: 3; }
.plan h3.lane { margin: 0 0 16px; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.plan h3.lane .dotc { background: var(--acc); }
.plan .col:nth-of-type(3) h3.lane .dotc { background: var(--fg); }
.plan .col:nth-of-type(4) h3.lane .dotc { background: var(--pri); }
.plan .col { display: grid; gap: 12px; align-content: start; }
.plan .it { border-radius: var(--r); background: var(--card); border: 1px solid var(--line); padding: 16px 18px; display: grid; gap: 4px; }
.plan .it .y { font-size: 12.5px; font-weight: 600; color: var(--acc); }
.plan .col:nth-of-type(4) .it .y { color: var(--pri); }
.plan .it h4 { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.plan .it span.o { color: var(--mute); font-size: 13.5px; }
.plan .it p { margin: 4px 0 0; color: var(--mute); font-size: 13.5px; }
.bio p { margin: 0 0 1em; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.65; color: color-mix(in srgb, var(--fg) 86%, transparent); }
.langs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lang { border-radius: var(--r); background: var(--card); border: 1px solid var(--line); padding: 18px 20px; }
.lang b { display: block; font-weight: 600; }
.lang span { display: block; margin-top: 12px; height: 6px; border-radius: 6px; background: var(--muted); overflow: hidden; }
.lang i { display: block; height: 100%; width: 0; background: var(--grad); border-radius: 6px; transition: width 1.4s var(--ease); }
.lang.in i { width: var(--w); }

/* contacto */
.cgrid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 22px; align-items: start; }
.fcard { border-radius: calc(var(--R) + 4px); background: var(--card); border: 1px solid var(--line); padding: clamp(24px, 3.4vw, 44px); }
.reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.reasons label { cursor: pointer; }
.reasons input { position: absolute; opacity: 0; pointer-events: none; }
.reasons span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; font-size: 14px; color: var(--mute); transition: background .25s, color .25s, border-color .25s; }
.reasons input:checked + span { background: var(--pri); color: var(--pri-ink); border-color: var(--pri); }
.reasons input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
.form .full { grid-column: 1 / -1; }
.f { display: grid; gap: 8px; }
.f > span { font-size: 13px; font-weight: 600; color: var(--mute); }
.f input, .f textarea { width: 100%; border-radius: var(--r); border: 1px solid var(--line); background: var(--muted); color: var(--fg); font: 500 16px/1.4 var(--f); padding: 15px 16px; outline: none; transition: border-color .25s, background .25s; }
.f input:focus, .f textarea:focus { border-color: color-mix(in srgb, var(--pri) 60%, transparent); background: var(--bg); }
.f textarea { min-height: 150px; resize: vertical; }
.help { margin: 14px 0 0; color: var(--mute); font-size: 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sendrow { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }
.status { color: var(--mute); font-size: 15px; margin: 0; }
.note { color: var(--mute); font-size: 13px; margin: 18px 0 0; }
.note a { text-decoration: underline; text-underline-offset: 3px; }
.side { display: grid; gap: 14px; }
.side .box { border-radius: var(--R); background: var(--card); border: 1px solid var(--line); padding: 24px; display: grid; gap: 12px; }
.side .box h2 { margin: 0; font-size: 18px; font-weight: 450; }
.side .box a.big { font-weight: 600; font-size: 18px; overflow-wrap: anywhere; }
.side .box a.big:hover { color: var(--pri); }
.side .box p { margin: 0; color: var(--mute); font-size: 14px; }

/* ficha de obra */
.whero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #0a0a0f; }
.whero .m { position: absolute; inset: 0; }
.whero .m video, .whero .m img { width: 100%; height: 100%; object-fit: cover; }
.whero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 15, .9), rgba(10, 10, 15, 0) 55%), linear-gradient(to bottom, rgba(10, 10, 15, .55), rgba(10, 10, 15, 0) 30%); pointer-events: none; }
.whero .b { position: absolute; left: var(--g); right: var(--g); bottom: clamp(36px, 7vh, 80px); z-index: 2; color: #e8e8e0; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.whero h1 { font-size: clamp(44px, 8vw, 140px); }
.whero .b .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.whero .b .pill { background: rgba(232, 232, 224, .12); border-color: rgba(232, 232, 224, .16); color: #e8e8e0; }
.whero.gr { cursor: crosshair; }
.whero.gr::after { background: linear-gradient(to right, rgba(10, 10, 15, .78), rgba(10, 10, 15, 0) 58%), linear-gradient(to top, rgba(10, 10, 15, .6), rgba(10, 10, 15, 0) 35%); }
.whero.gr .base, .whero.gr canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.grtop { position: absolute; left: var(--g); top: 150px; z-index: 3; max-width: 48vw; color: #e8e8e0; pointer-events: none; }
.grtop h1 { font-size: clamp(48px, 7.6vw, 132px); }
.grtop p { margin: 18px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(232, 232, 224, .8); }
.grtop .btn { margin-top: 24px; pointer-events: auto; }
.grcard { position: absolute; right: var(--g); top: 150px; z-index: 3; width: min(270px, 22vw); padding: 12px; border-radius: 22px; background: rgba(20, 20, 24, .5); border: 1px solid rgba(232, 232, 224, .16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #e8e8e0; }
.grcard img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; }
.grcard b { display: block; margin-top: 12px; font-size: 26px; font-weight: 600; letter-spacing: -.03em; color: #c4e54a; }
.grcard strong { display: block; font-size: 15px; font-weight: 600; }
.grcard span { display: block; margin-top: 6px; font-size: 12px; color: rgba(232, 232, 224, .7); line-height: 1.4; }
.grfoot { position: absolute; z-index: 3; bottom: 26px; font-size: 12px; font-weight: 600; color: rgba(232, 232, 224, .75); pointer-events: none; }
.grfoot.l { left: var(--g); } .grfoot.r { right: var(--g); }
.logline { margin: 0; max-width: 28ch; font-weight: 600; font-size: clamp(28px, 3.4vw, 54px); line-height: 1.04; letter-spacing: -.03em; }
.spec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(40px, 5vw, 70px); }
.spec div { border-radius: var(--r); background: var(--card); border: 1px solid var(--line); padding: 18px 20px; min-height: 108px; }
.spec .k { display: block; font-size: 12.5px; font-weight: 600; color: var(--acc); margin-bottom: 8px; }
.spec .v { font-weight: 600; font-size: 15px; }
.prose { max-width: 70ch; }
.prose p { margin: 0 0 1.2em; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.7; }
.ttl2 { margin: 0 0 clamp(26px, 3.4vw, 48px); }
.gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gal button { position: relative; display: block; overflow: hidden; border-radius: var(--R); background: var(--card); aspect-ratio: 16 / 9; }
.gal.v916 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gal.v916 button { aspect-ratio: 9 / 16; }
.gal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease), filter .5s; }
.gal button:hover img { transform: scale(1.04); }
.gal figcaption { position: absolute; left: 14px; bottom: 12px; color: #e8e8e0; font-size: 12px; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.rules, .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.rules div, .stat { border-radius: var(--R); background: var(--card); border: 1px solid var(--line); padding: 22px 24px; }
.rules h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.rules p { margin: 0; color: var(--mute); font-size: 15px; }
.stat .n { margin: 0; font-weight: 600; font-size: clamp(36px, 3.6vw, 56px); letter-spacing: -.04em; }
.stat p { margin: 6px 0 0; color: var(--mute); font-size: 14.5px; }
.stat p strong { color: var(--fg); }
.stat .d { display: block; margin-top: 10px; font-size: 12px; color: var(--mute); }
.credits2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.credits2 div { border-radius: var(--r); background: var(--card); border: 1px solid var(--line); padding: 18px 20px; }
.credits2 .k { display: block; font-size: 12.5px; font-weight: 600; color: var(--acc); margin-bottom: 6px; }
.links2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tool { display: grid; gap: 8px; border-radius: var(--R); background: var(--card); border: 1px solid var(--line); padding: 22px 24px; transition: transform .4s var(--ease); }
.tool:hover { transform: translateY(-3px); }
.tool h3 { margin: 0; font-size: 18px; font-weight: 600; }
.tool p { margin: 0; color: var(--mute); font-size: 14.5px; }
.tool .go { color: var(--pri); font-weight: 600; font-size: 14px; }
/* Fila de reels de la portada: se queda quieta en pantalla y avanza de lado al bajar, como «Selected work», sin más efectos */
.hzs { position: relative; }
.hzs .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.hzs .shorts { overflow: visible; scroll-snap-type: none; will-change: transform; }
.hzs .short { flex-basis: min(250px, calc((100svh - 330px) * 9 / 16)); }
.shorts { display: flex; gap: 16px; overflow-x: auto; padding: 0 var(--g) 10px; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g); scrollbar-width: thin; }
.short { flex: 0 0 min(62vw, 250px); scroll-snap-align: start; }
.short .v { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--R); background: var(--card); }
.short video, .short img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.short .play { position: absolute; inset: 0; display: grid; place-items: center; }
.short .play i { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(232, 232, 224, .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #e8e8e0; transition: transform .3s var(--ease), background .3s, color .3s; }
.short .play svg { width: 18px; height: 18px; }
.short:hover .play i { background: #c4e54a; color: #0a0a0f; transform: scale(1.08); }
.short h3 { margin: 12px 0 0; font-size: 15px; font-weight: 600; }
.short p { margin: 4px 0 0; color: var(--mute); font-size: 13.5px; }
.nextw { position: relative; display: block; height: 66vh; min-height: 420px; overflow: hidden; border-radius: calc(var(--R) + 6px); margin: 0 var(--g); background: #0a0a0f; color: #e8e8e0; }
.nextw picture { display: block; width: 100%; height: 100%; }
.nextw img { width: 100%; height: 100%; object-fit: cover; opacity: .7; transition: opacity .6s, transform 1.2s var(--ease); }
.nextw:hover img { opacity: .9; transform: scale(1.03); }
.nextw .t { position: absolute; left: 32px; bottom: 30px; }
.nextw .t span { display: block; font-size: 14px; font-weight: 600; color: #c4e54a; }
.nextw .t b { display: block; margin-top: 8px; font-weight: 600; font-size: clamp(40px, 6vw, 100px); letter-spacing: -.045em; line-height: .9; }

/* sala de vídeo */
.room { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(5, 5, 8, .78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
.room.open { opacity: 1; visibility: visible; }
.room .panel { width: min(1200px, 94vw); border-radius: calc(var(--R) + 4px); background: #141418; border: 1px solid rgba(232, 232, 224, .1); padding: 14px; transform: translateY(16px) scale(.98); transition: transform .45s var(--ease); color: #e8e8e0; }
.room.open .panel { transform: none; }
.room .rbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 4px 6px 14px; }
.room .ttl { font-weight: 600; font-size: 18px; }
.room .rmeta { color: rgba(232, 232, 224, .6); font-size: 13px; margin-left: 10px; font-weight: 600; }
.room .x { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(232, 232, 224, .1); transition: background .25s, color .25s; }
.room .x:hover { background: #c4e54a; color: #0a0a0f; }
.room .x svg { width: 16px; height: 16px; }
.room .frame { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #000; }
.room .frame.v { width: auto; height: min(74vh, 900px); aspect-ratio: 9 / 16; margin: 0 auto; }
.room .frame.img { aspect-ratio: auto; background: none; display: grid; place-items: center; }
.room .frame.img img { max-height: 78vh; border-radius: var(--r); }
.room iframe, .room video { width: 100%; height: 100%; border: 0; }
.room .rfoot { display: flex; justify-content: flex-end; padding: 14px 6px 4px; }
.room .rfoot .more[hidden] { display: none; }

/* revelar */
.reveal canvas { pointer-events: none; }

/* cursor que acompaña sobre las obras */
.chip-cursor { position: fixed; left: 0; top: 0; z-index: 80; width: 86px; height: 86px; margin: -43px 0 0 -43px; border-radius: 50%; display: grid; place-items: center; background: var(--pri); color: var(--pri-ink); font-weight: 600; font-size: 13px; pointer-events: none; transform: translate3d(-200px, -200px, 0) scale(0); transition: transform .28s var(--ease); }

/* aparición suave */
.rv { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.words .w { display: inline-block; opacity: .16; transition: opacity .4s var(--ease); }
.words .w.on { opacity: 1; }

/* ---------- móvil ---------- */
@media (max-width: 1100px) {
  .stats4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .head { grid-template-columns: 1fr auto; inset: 12px 0 auto 0; }
  .nav, .tools .btn-p { display: none; }
  .burger { display: inline-grid; }
  .ink { height: 330vh; }
  .ink .hero h1 { font-size: 11.6vw; }
  .ink .side { display: none; }
  .hz { height: auto !important; }
  .hzs { height: auto !important; padding: 0 0 clamp(90px, 11vw, 170px); }
  .hzs .stage { position: static; height: auto; overflow: visible; display: block; }
  .hzs .shorts { overflow-x: auto; scroll-snap-type: x mandatory; transform: none !important; }
  .hzs .short { flex-basis: min(62vw, 250px); }
  .hz .stage { position: static; height: auto; padding: 90px 0 30px; }
  .track { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g); transform: none !important; padding: 24px var(--g) 30px; scrollbar-width: none; }
  .track::-webkit-scrollbar { display: none; }
  .wcard { width: 82vw; scroll-snap-align: start; }
  .hz .bar { display: none; }
  .secthead { flex-direction: column; align-items: flex-start; gap: 14px; }
  .stats4, .steps6, .grid3, .meet, .ahero, .cgrid, .cta .routes, .foot .wrap, .langs, .spec, .credits2, .links2 { grid-template-columns: 1fr; }
  .grid5, .edu { grid-template-columns: 1fr; }
  .gal { grid-template-columns: 1fr; }
  .gal.v916 { grid-template-columns: 1fr 1fr; }
  .grtop { top: 110px; max-width: none; right: var(--g); }
  .grtop h1 { font-size: 14vw; }
  .grcard { display: none; }
  .whero .b { flex-direction: column; align-items: flex-start; }
  .wa { right: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .kb img, .still, .marq .row, .ink .hint i { animation: none; }
  .kb img:first-child { opacity: 1; }
  .rv { opacity: 1; transform: none; transition: none; }
  .words .w { opacity: 1; }
}

/* el tema cambia abriéndose en círculo desde el botón */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

@media (max-width: 860px) {
  .wcard { width: 84vw; }
  .hz .ring { display: none; }
  .hz .tsheet .in { position: static; width: auto; grid-template-columns: 1fr 1fr; }
  .rcard .rg { width: 140px; height: 140px; }
  .plan { grid-template-columns: 1fr; }
  .plan .line { display: none; }
  .ink .hero { bottom: 14vh; }
  .ink .hero h1 { font-size: 15vw; }
  .ink .iris { left: 50%; }
}

/* aviso de propiedad de las obras (Jeff, 2026-10-20) */
.legal { border-radius: var(--R); background: var(--card); border: 1px solid var(--line); padding: clamp(22px, 3vw, 34px); display: grid; gap: 10px; max-width: 900px; }
.legal h2 { margin: 0; font-size: 18px; }
.legal p { margin: 0; color: var(--mute); font-size: 15px; line-height: 1.6; }

/* Obra por categorías (2026-10-22): índice de cinco tarjetas, migas y baldosas de los cuentos de Dog Tales */
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; font-size: 14px; font-weight: 600; color: var(--mute); }
.crumbs a { color: var(--mute); }
.crumbs a:hover { color: var(--fg); }
.crumbs b { font-weight: 600; color: var(--fg); }
.cgrid3 .ccard .im { aspect-ratio: 16 / 9; }
.ccard h2 { margin: 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.02em; }
.ccard p { margin: 0; color: var(--mute); font-size: 15px; line-height: 1.55; }
.ccard .tx { gap: 12px; padding-bottom: 24px; }
.tabs a.tab { display: inline-block; }
.tabs a.tab[aria-current="page"] { background: var(--pri); color: var(--pri-ink); border-color: var(--pri); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tile .im { aspect-ratio: 3 / 4; }
.tile p { margin: 0; color: var(--mute); font-size: 14px; line-height: 1.5; }
.tile h3 { font-size: 17px; }
.tile.cast .im img { object-position: center 22%; }
.tile.cast .pills { margin-top: -2px; }
/* el papel del personaje no cabía en una línea en las tarjetas de móvil (dos columnas de 163 px) y se salía por el lado */
.tile.cast .pill { white-space: normal; line-height: 1.35; }
@media (max-width: 980px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- cinco idiomas (2026-10-25) ---------- */
/* selector: el botón redondo de siempre con el idioma actual; la lista se abre debajo, cada idioma en su lengua */
.lsel { position: relative; }
.lmenu { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 75; min-width: 190px; padding: 6px; display: grid; gap: 2px; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); color: var(--fg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; }
.lsel.open .lmenu { opacity: 1; visibility: visible; transform: none; }
.lmenu a { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 12px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--fg); transition: background .2s; }
.lmenu a b { font-weight: 600; }
.lmenu a span { font-size: 11px; letter-spacing: .08em; color: var(--mute); }
.lmenu a:hover { background: var(--muted); }
.lmenu a[aria-current] b { color: var(--pri); }
.sheet .slangs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.sheet .slangs a { padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--muted); font-size: 14px; letter-spacing: 0; line-height: 1.2; }
.sheet .slangs a[aria-current] { background: var(--pri); color: var(--pri-ink); border-color: var(--pri); }

/* la letra de cada escritura: Figtree para lo latino (nombres, títulos, cifras) y su Noto para el resto */
html:lang(ar) { --f: "Figtree", "Noto Sans Arabic", system-ui, sans-serif; }
html:lang(ko) { --f: "Figtree", "Noto Sans KR", system-ui, sans-serif; }
html:lang(zh) { --f: "Figtree", "Noto Sans SC", system-ui, sans-serif; }
/* el árabe va enlazado: el espaciado entre letras lo rompe; y sus trazos piden más interlínea */
html:lang(ar) *, html:lang(ar) *::before, html:lang(ar) *::after { letter-spacing: 0 !important; }
html:is(:lang(ar), :lang(ko), :lang(zh)) :is(.h-xl, .h-l, .h-m, .logline, .ink .end p, .sheet a, .sheet button.big, .nextw .t b, .wcard .info h3, .ccard h2) { line-height: 1.2; }
html:lang(ar) :is(.h-xl, .h-l, .h-m, .logline, .ink .end p, .sheet a, .sheet button.big, .nextw .t b, .wcard .info h3, .ccard h2) { line-height: 1.45; }
html:lang(ar) body { line-height: 1.8; }
html:is(:lang(ko), :lang(zh)) :is(.h-xl, .h-l, .h-m, .logline, .ink .end p, .nextw .t b) { letter-spacing: -.01em; }
html:is(:lang(ko), :lang(zh)) :is(.ink .hero .sub, .grtop p, .ink .hint) { letter-spacing: .12em; }
/* el coreano no se parte a media palabra */
html:lang(ko) body { word-break: keep-all; overflow-wrap: anywhere; }

/* árabe de derecha a izquierda: lo que va colocado a un lado pasa al otro */
[dir="rtl"] svg.fl { transform: scaleX(-1); }
[dir="rtl"] .route:hover svg { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .sheet a, [dir="rtl"] .sheet button.big { text-align: right; }
[dir="rtl"] .sheet .x { right: auto; left: var(--g); }
[dir="rtl"] .ink .hero { left: auto; right: var(--g); }
[dir="rtl"] .ink .loader { right: auto; left: var(--g); }
[dir="rtl"] .wcard .play { right: auto; left: 18px; }
[dir="rtl"] .portrait .badge { left: auto; right: 18px; }
[dir="rtl"] .cta::before { right: auto; left: -20vw; }
[dir="rtl"] .wa { right: auto; left: 22px; }
[dir="rtl"] .acard { text-align: right; }
[dir="rtl"] .typed .caret { margin-left: 0; margin-right: 2px; }
[dir="rtl"] .tlc::before { left: auto; right: 0; }
[dir="rtl"] .whero.gr::after { background: linear-gradient(to left, rgba(10, 10, 15, .78), rgba(10, 10, 15, 0) 58%), linear-gradient(to top, rgba(10, 10, 15, .6), rgba(10, 10, 15, 0) 35%); }
[dir="rtl"] .grtop { left: auto; right: var(--g); }
[dir="rtl"] .grcard { right: auto; left: var(--g); }
[dir="rtl"] .grfoot.l { left: auto; right: var(--g); }
[dir="rtl"] .grfoot.r { right: auto; left: var(--g); }
[dir="rtl"] .gal figcaption { left: auto; right: 14px; }
[dir="rtl"] .nextw .t { left: auto; right: 32px; }
[dir="rtl"] .room .rmeta { margin-left: 0; margin-right: 10px; }
[dir="rtl"] .hz .tsheet .kv b { text-align: left; }
/* el campo trampa del formulario se esconde a la izquierda; en árabe ese lado se puede desplazar y la página
   medía 11.424 px de ancho y se veía en negro (2026-10-25): se esconde a la derecha */
[dir="rtl"] .hp { left: auto; right: -9999px; }
/* el nombre en letras latinas se escribe de izquierda a derecha también en árabe: sin esto el punto final
   saltaba delante («.Jeff», «.Zambrano Jeff») */
[dir="rtl"] :is(.mark, .ink .hero h1, .ahero h1) { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] :is(.ahero h1, div.mark) { text-align: right; }
/* las tiras que mueve el guion (obras, reels, herramientas) calculan su recorrido de izquierda a derecha:
   la tira se queda así y lo que va escrito dentro se lee en árabe */
[dir="rtl"] .hz .stage, [dir="rtl"] .hzs .shorts, [dir="rtl"] .marq { direction: ltr; }
[dir="rtl"] :is(.hz .secthead, .hz .tsheet .in, .wcard .info, .hzs .short h3, .hzs .short p) { direction: rtl; }
@media (max-width: 860px) {
  [dir="rtl"] .wa { right: auto; left: 14px; }
  [dir="rtl"] .grtop { left: var(--g); }
}


/* CURSOR GRANDE · fragmento canonico de la casa
   ---------------------------------------------------------------------------
   Dictado por el CEO el 2026-09-03: «en todo lo que se monte en labs, aumenta
   el tamano del cursor, se me pierde siempre».

   QUE HACE. Sustituye la flecha del sistema (unos 20 px de dibujo dentro de un
   cuadro de 32) por una de 44 px con contorno oscuro, y la mano de los
   elementos que se pulsan por otra del mismo tamano. El contorno es lo que
   hace que se vea igual sobre fondo claro y sobre fondo oscuro, que es donde
   se perdia.

   COMO SE USA. Se pega tal cual al final de la hoja de estilos de la pieza, o
   se enlaza si la pieza carga estilos de una direccion compartida. No depende
   de ninguna variable de marca, asi que funciona en cualquier tablero.

   POR QUE LLEVA `auto` Y `pointer` DETRAS DE LA COMA. Es la red de seguridad
   del navegador: si por lo que sea no puede cargar el dibujo, usa el cursor
   normal en vez de dejar la pagina sin cursor ninguno.

   LO QUE NO SE TOCA. El cursor de escribir dentro de un campo de texto, que
   sigue siendo el del sistema: ahi el tamano no estorba y cambiarlo despista.

   Los dos dibujos van dentro de la propia hoja (no son archivos aparte) para
   que la pieza siga funcionando aunque se copie a otro servidor.            */

:root {
  --cursor-flecha:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.2 19.3 13.1l-6.5.4 3.4 6.7-3.1 1.6-3.4-6.7-4.7 4.4z' fill='%23ffffff' stroke='%23141414' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2;
  --cursor-mano:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 2.2c.9 0 1.6.7 1.6 1.6v6.1h.6V5.1c0-.9.7-1.6 1.6-1.6s1.6.7 1.6 1.6v4.8h.6V6.7c0-.9.7-1.6 1.6-1.6s1.6.7 1.6 1.6v7.6c0 3.9-2.4 6.6-6.1 6.6-2.4 0-4.1-1-5.3-3L4.4 13c-.5-.8-.2-1.8.6-2.3.8-.5 1.8-.2 2.3.6l1.6 2.4V3.8c0-.9.7-1.6 1.6-1.6z' fill='%23ffffff' stroke='%23141414' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 12 3;
}

/* Los dos van marcados como obligatorios A PROPOSITO. Casi todas las piezas
   ya traen su propio `cursor: pointer` escrito con mas peso (por ejemplo
   `.barra button`), y sin la marca esas reglas ganarian y el cursor volveria
   al pequeno justo encima de los botones, que es donde mas se busca. */
html, body { cursor: var(--cursor-flecha), auto !important; }

a, button, summary, label[for], select, [role="button"], [role="tab"], [role="link"],
[data-ir], [data-paso], [data-video], [onclick], .clic, .cta, .btn,
input[type="button"], input[type="submit"], input[type="checkbox"], input[type="radio"] {
  cursor: var(--cursor-mano), pointer !important;
}

/* En papel no hay cursor: se apaga para que ningun motor de impresion intente
   resolver las imagenes al generar el PDF. */
@media print {
  html, body, a, button { cursor: auto; }
}