/* ==========================================================
   MATIZ — Mati, dirección creativa de proyectos surrealistas
   Layout: páginas (Inicio, Archivo, About) de secciones apiladas a pantalla completa
   que entran con corte diagonal; entre páginas cruzan bandas inclinadas con el logo.
   Colores: todo sale de las variables de :root. Las paletas alternativas (provisorias)
   están en themes.css y se eligen con el botón del menú.
   ========================================================== */

:root {
  color-scheme: dark;
  /* paleta A · MATIZ (la de siempre). Canales RGB para usarlos con transparencia */
  --base-rgb: 10, 10, 12;       /* fondo principal */
  --cream-rgb: 230, 221, 206;   /* texto y botones sobre oscuro: el mismo blanco cálido de la barra (= --paper) */
  --accent-rgb: 254, 133, 0;    /* acento */
  --glow-rgb: 255, 190, 100;    /* brillo claro del acento */
  --deep-rgb: 130, 50, 4;       /* sombra del acento */
  --charcoal: #21232E;          /* superficie oscura secundaria */
  --orange-soft: #FFB566;       /* acento secundario */
  --orange-ink: #B35A00;        /* acento sobre fondo claro */
  --paper: #E6DDCE;             /* paneles claros */
  --black: rgb(var(--base-rgb));
  --cream: rgb(var(--cream-rgb));
  --orange: rgb(var(--accent-rgb));
  --line: rgba(var(--cream-rgb), .14);

  --rail: 64px;
  --rail-r: 44px;
  --pad-l: calc(var(--rail) + 2.6vw);
  --pad-r: calc(var(--rail-r) + 2vw);
  --vh: 100vh;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-io: cubic-bezier(.83, 0, .17, 1);

  --display: "Geist", "Helvetica Neue", Arial, sans-serif;
  --serif: var(--display);
  --sans: var(--display);
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --wordmark: "Archivo", "Arial Black", sans-serif;

  /* cresta irregular (como el loader), oculta / visible */
  --m-hide: polygon(0% 108%, 18% 102%, 38% 112%, 60% 103%, 80% 110%, 100% 104%, 100% 100%, 0% 100%);
  --m-show: polygon(0% -8%, 18% -14%, 38% -4%, 60% -13%, 80% -6%, 100% -12%, 100% 100%, 0% 100%);

  /* líneas claras sobre el acento: mismo tono pálido que las del hero */
  --zig-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='180'%3E%3Cpath d='M23 0 L35 90 L23 180' fill='none' stroke='%23E6DDCE' stroke-opacity='.08' stroke-width='1'/%3E%3C/svg%3E");
}

/* ---------- Paletas alternativas (PROVISORIO) ----------
   Se eligen con el selector del menú mientras se decide la paleta final.
   Para producción: dejar en :root los valores de la elegida y borrar estos bloques,
   el selector [data-palette] del HTML y el bloque "Paletas" de main.js. */
/* Todas comparten el negro, la superficie, el papel y la crema de A; solo cambia el par de acentos. */
/* B · Azul: celeste + azul */
:root[data-theme="b"] {
  --accent-rgb: 46, 139, 239;  --glow-rgb: 170, 212, 255;  --deep-rgb: 8, 38, 105;
  --orange-soft: #5C86FF;  --orange-ink: #1254F1;
}
/* C · Rosa: rojo + rosado */
:root[data-theme="c"] {
  --accent-rgb: 225, 37, 27;  --glow-rgb: 255, 172, 190;  --deep-rgb: 100, 8, 10;
  --orange-soft: #FF9EB5;  --orange-ink: #B3150E;
}
/* D · Celeste: celeste + rojo */
:root[data-theme="d"] {
  --accent-rgb: 111, 178, 240;  --glow-rgb: 205, 230, 255;  --deep-rgb: 14, 52, 100;
  --orange-soft: #F2412F;  --orange-ink: #C21A10;
}
/* selector de paleta */
.palette { display: flex; align-items: center; gap: 6px; }
.palette__label { margin-right: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.palette button {
  display: flex; gap: 2px; padding: 5px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(var(--base-rgb), .25);
  transition: box-shadow .3s, transform .4s var(--spring);
}
.palette button:hover { transform: translateY(-2px); }
.palette button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px currentColor; }
.palette i { display: block; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); }
.menu .palette { color: var(--black); margin: 0 0 3vh; }
.topbar .palette { display: none; }
@supports (height: 100svh) { :root { --vh: 100svh; } }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { background: var(--black); -webkit-text-size-adjust: 100%; }
body {
  background: var(--black);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
ul, ol { list-style: none; }
svg, video, img { display: block; max-width: 100%; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }
.strings { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; pointer-events: none; }
html.js.is-loading { overflow: hidden; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
::selection { background: var(--orange); color: var(--black); }
:focus-visible { outline: 2px solid var(--orange-soft); outline-offset: 3px; }
.select { user-select: all; }

/* ---------- Tipografía ---------- */
.d {
  font-family: var(--display);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -.045em;
}
.serif { font-family: var(--display); font-weight: 300; line-height: 1.18; letter-spacing: -.025em; }
.mono { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.lede { font-size: clamp(20px, 2.15vw, 38px); }

.rec {
  display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%;
  background: var(--orange);
  animation: blink 1.2s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* texto que rueda al hacer hover */
.roll { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .08em; margin-block: -.08em; }
.roll__in { display: block; position: relative; transition: transform .7s var(--ease); }
.roll__in::after { content: attr(data-t); position: absolute; left: 0; top: 100%; padding-top: .16em; }
.roll:hover .roll__in,
a:hover .roll__in, button:hover .roll__in,
.card:hover .roll__in { transform: translateY(calc(-100% - .16em)); }

/* ---------- Logo (stencil) ---------- */
.logo {
  --lc: var(--cream);
  display: inline-flex; flex-direction: column;
  font-family: var(--wordmark); font-weight: 900; font-stretch: 125%;
  line-height: .8; letter-spacing: -.03em; text-transform: uppercase;
  background: linear-gradient(116deg,
    var(--lc) 0 40%, transparent 40% 42.5%,
    var(--lc) 42.5% 68%, transparent 68% 70.5%,
    var(--lc) 70.5%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.logo > span { display: block; text-align: justify; text-align-last: justify; }
a.logo:hover { --lc: var(--orange); }


/* ---------- Logo: cubo original que gira sobre su eje (lo dibuja main.js) ---------- */
.logo3d { display: inline-block; flex: none; line-height: 0; color: inherit; }
.logo3d svg { display: block; width: 100%; height: auto; overflow: visible; }
.logo3d path { fill: currentColor; transition: fill-opacity .2s; }
/* reverso de un panel: el mismo arte espejado, más apagado */
.logo3d path.is-back { fill-opacity: .42; }
/* el cubo del hero, un poco transparente: deja ver el fondo y los cruces entre paneles */
.hero__logo path { fill-opacity: .78; }
.hero__logo path.is-back { fill-opacity: .3; }
/* PRUEBA: un poco de desenfoque en lo que se ve a través del cubo (main.js lo recorta con su forma) */
.hero__logo { position: relative; }
.logo3d__frost { position: absolute; inset: 0; pointer-events: none; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); }

/* ---------- Botones (un solo estilo): píldora con insignia de flecha ----------
   El relleno crece en círculo desde la insignia; la flecha gira de ↗ a →. */
.btn {
  --bg: var(--orange); --fg: var(--black);
  --fill: var(--black); --fg-hover: var(--cream);
  --badge: var(--black); --badge-fg: var(--orange);
  --badge-hover: var(--orange); --badge-fg-hover: var(--black);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 52px;
  padding: 6px 6px 6px 24px;
  border-radius: 999px;
  background: var(--bg); color: var(--fg);
  font-family: var(--display); font-weight: 500;
  font-size: clamp(15px, 1.05vw, 17px);
  letter-spacing: -.01em; line-height: 1;
  transition: color .5s var(--ease), transform .6s var(--spring);
}
.btn:not(:has(> svg)) { padding-right: 24px; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fill);
  clip-path: circle(0% at calc(100% - 26px) 50%);
  transition: clip-path .8s var(--ease);
}
.btn:not(:has(> svg))::before { clip-path: circle(0% at 50% 120%); }
.btn:hover, .btn:focus-visible { color: var(--fg-hover); }
.btn:hover::before, .btn:focus-visible::before { clip-path: circle(150% at calc(100% - 26px) 50%); }
.btn:active { transform: scale(.97); }
.btn > svg {
  box-sizing: content-box; flex: none;
  width: 14px; height: 14px; padding: 13px;
  border-radius: 50%;
  background: var(--badge); color: var(--badge-fg);
  transform: rotate(-45deg);
  transition: transform .7s var(--spring), background-color .5s var(--ease), color .5s var(--ease);
}
.btn:hover > svg, .btn:focus-visible > svg { transform: rotate(0deg) scale(1.06); background: var(--badge-hover); color: var(--badge-fg-hover); }
.btn > svg[data-icon="play"], .btn:hover > svg[data-icon="play"] { transform: none; }
.btn--dark { --bg: var(--black); --fg: var(--cream); --fill: var(--orange-soft); --fg-hover: var(--black); --badge: var(--orange); --badge-fg: var(--black); --badge-hover: var(--black); --badge-fg-hover: var(--orange); }
.btn--ghost { --bg: transparent; --fg: var(--cream); --fill: var(--orange); --fg-hover: var(--black); box-shadow: inset 0 0 0 1px rgba(var(--cream-rgb), .22); }
.btn:disabled { opacity: .55; pointer-events: none; }

/* ---------- Doble cortina (loader, cambio de página y menú) ----------
   Sube desde abajo un panel de color y, pegado atrás, uno oscuro que lo tapa. La página vieja se corre
   un poco hacia arriba mientras se cubre. Después el panel oscuro sigue subiendo y la página nueva
   aparece desde abajo, entrando con un leve desfase. Solo se animan transform (sin repintar). */
:root { --dw-in: cubic-bezier(.76, 0, .24, 1); --dw-out: cubic-bezier(.22, 1, .36, 1); }
.pt-leave main { transform: translate3d(0, -6vh, 0); transition: transform .75s var(--dw-in); }
.pt-from main { transform: translate3d(0, 16vh, 0); transition: none; }
.pt-enter main { transform: none; transition: transform .9s var(--dw-out); }

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--black);
  display: grid; place-items: center;
}
html:not(.js) .loader { display: none; }
.loader.is-out { transform: translate3d(0, -100%, 0); transition: transform .9s var(--dw-out); }
.loader__panel { position: absolute; inset: 0; z-index: 2; transform: translate3d(0, 100%, 0); }
.loader__panel--1 { background: var(--orange); }
.loader__panel--2 { background: var(--charcoal); }
.loader.is-wave .loader__panel { transform: none; transition: transform .7s var(--dw-in); }
.loader.is-wave .loader__panel--2 { transition-delay: .16s; }
.loader.is-out .loader__panel--1 { visibility: hidden; }
.loader__logo { position: relative; width: clamp(110px, 11vw, 190px); color: var(--cream); }
.loader__meta { position: absolute; left: calc(var(--rail) + 1vw); top: 50%; color: var(--cream); opacity: .75; }
.loader__meta--r { left: auto; right: var(--pad-r); font-variant-numeric: tabular-nums; }

/* ---------- Transición de página ---------- */
.wipe { position: fixed; inset: 0; z-index: 98; overflow: hidden; pointer-events: none; }
.wipe.is-active { pointer-events: auto; }
.wipe__panel { position: absolute; inset: 0; transform: translate3d(0, 100%, 0); }
.wipe__panel--1 { background: var(--orange); }
.wipe__panel--2 { background: var(--charcoal); }
.wipe.is-in .wipe__panel { transform: none; transition: transform .7s var(--dw-in); }
.wipe.is-in .wipe__panel--2 { transition-delay: .16s; }
.wipe.is-out .wipe__panel { transform: translate3d(0, -100%, 0); }
.wipe.is-out .wipe__panel--1 { visibility: hidden; }
.wipe.is-out .wipe__panel--2 { transition: transform .9s var(--dw-out); }

/* ---------- Rails ---------- */
.rail {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 60;
  width: var(--rail);
  padding: 12px 0 12px 12px;
  pointer-events: none;
}
.rail__inner {
  position: relative; height: 100%;
  background: var(--black);
  box-shadow: inset 0 0 0 1px var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 14px 0 16px;
  overflow: hidden;
  pointer-events: auto;
  transition: background-color .4s;
}
.menu-open .rail__inner { background: var(--charcoal); }
.rail__progress {
  position: absolute; left: 0; top: 0; width: 3px;
  height: calc(var(--p, 0) * 100%);
  background: var(--orange-soft);
  box-shadow: 0 0 12px var(--orange-soft);
}
.rail__logo { position: relative; display: grid; place-items: center; color: var(--cream); transition: color .3s; }
.rail__mark { width: 38px; }
.rail__logo:hover { color: var(--orange); }
.burger { position: relative; display: grid; gap: 5px; padding: 10px 8px; }
.burger span { display: block; width: 18px; height: 3px; background: var(--orange); transition: transform .35s, width .35s var(--ease); }
.burger:hover span:last-child { width: 10px; }
.menu-open .burger span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-open .burger span:last-child { transform: translateY(-4px) rotate(-45deg); width: 18px; }
/* selector de idioma */
.lang {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em;
  color: rgba(var(--cream-rgb), .45);
}
.lang span { transition: color .3s; }
.lang span:hover { color: var(--cream); }
.lang span.is-on { color: var(--orange); }
/* barra superior: copia de la barra del footer, fija arriba */
.topbar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 62;
  background: var(--paper); color: var(--black);
  box-shadow: 0 1px 0 rgba(var(--base-rgb), .12);
  transform: translate3d(0, -110%, 0); visibility: hidden;
  transition: transform .7s var(--ease), visibility 0s .7s;
}
.has-topbar .topbar { transform: none; visibility: visible; transition: transform .7s var(--ease), visibility 0s; }
.topbar .ft__nav { padding-right: 18px; }
.topbar .lang { flex-direction: row; gap: 10px; margin-left: auto; padding: 8px 0 8px 10px; color: rgba(var(--base-rgb), .42); }
.topbar .lang span:hover { color: var(--black); }
.topbar .lang span.is-on { color: var(--orange-ink); }
/* en escritorio, cuando baja la barra se van los rieles */
.rail, .rail-r { transition: transform .7s var(--ease); }
.has-topbar .rail { transform: translate3d(-110%, 0, 0); }
.has-topbar .rail-r { transform: translate3d(110%, 0, 0); }
main, .rail-r, .menu__panel { transition: opacity .22s var(--ease); }
.is-switching main, .is-switching .rail-r, .is-switching .menu__panel { opacity: .12; }

.rail-r {
  position: fixed; right: 0; top: 0; bottom: 0; z-index: 60;
  width: var(--rail-r);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 18px 0;
  color: rgba(var(--cream-rgb), .75);
  text-shadow: 0 1px 6px rgba(var(--base-rgb), .6);
  pointer-events: none;
  font-family: var(--serif); font-size: 13px; line-height: 1.05;
}
.rail-r span { writing-mode: vertical-rl; }
.rail-r__clock { font-variant-numeric: tabular-nums; }
.rail-r__tag { transform: rotate(180deg); }

/* ---------- Menú: panel naranja + video ----------
   Entra con la doble cortina: primero sube un panel crema y sobre él sube el menú.
   Al cerrarse, el menú sigue hacia arriba y descubre la página desde abajo. */
.menu-wipe, .menu {
  position: fixed; inset: 0;
  transform: translate3d(0, 100%, 0);
  visibility: hidden;
}
.menu-wipe { z-index: 54; background: var(--paper); }
.menu {
  z-index: 55;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  background: var(--black);
}
.menu-open .menu-wipe, .menu-open .menu { transform: none; visibility: visible; transition: transform .7s var(--dw-in); }
.menu-open .menu { transition-delay: .14s; }
.menu-closing .menu { transform: translate3d(0, -100%, 0); visibility: visible; transition: transform .85s var(--dw-out); }
.menu__panel {
  background: var(--orange); position: relative; isolation: isolate;
  padding: 6vh 4vw 5vh calc(var(--pad-l) + 1.4vw);
  display: flex; flex-direction: column; justify-content: space-between; gap: 4vh;
}
.menu__list li { overflow: hidden; }
.menu__list a {
  display: flex; align-items: center;
  font-size: min(13vh, 8.6vw);
  line-height: .9;
  color: var(--cream);
  transform: translateY(105%);
  transition: color .2s, transform .7s var(--ease);
}
.menu-open .menu__list a { transform: none; transition-delay: 0s, .42s; }
.menu-open .menu__list li:nth-child(2) a { transition-delay: 0s, .47s; }
.menu-open .menu__list li:nth-child(3) a { transition-delay: 0s, .52s; }
.menu-open .menu__list li:nth-child(4) a { transition-delay: 0s, .57s; }
.menu-open .menu__list li:nth-child(5) a { transition-delay: 0s, .62s; }
.menu__list a svg { width: 0; height: .58em; flex: none; transition: width .45s var(--ease), margin .45s var(--ease); }
.menu__list a:hover, .menu__list a:focus-visible, .menu__list a.is-current { color: var(--black); }
.menu__list a:hover svg, .menu__list a:focus-visible svg { width: .9em; margin-right: .15em; }
.menu__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.menu__logo { --lc: var(--black); font-size: clamp(44px, 5vw, 76px); }
.menu__social { display: grid; gap: 2px; font-size: 15px; color: var(--cream); text-align: right; }
.menu__social a:hover { color: var(--black); }
.menu__media { position: relative; overflow: hidden; background: var(--black); border-left: 10px solid var(--black); }
.menu__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: var(--m-hide); transition: clip-path .7s var(--ease); }
.menu__media video.is-on { clip-path: var(--m-show); }

/* ---------- Páginas y paneles apilados ---------- */
main { position: relative; }
.anchor { height: 0; }
.spacer { height: 40vh; }
.spacer--hero { height: 190vh; }
.spacer--sm { height: 15vh; }
.panel { position: sticky; top: 0; min-height: var(--vh); overflow: hidden; }
.track { position: relative; }
.track__sticky { position: sticky; top: 0; height: var(--vh); overflow: hidden; }
.shade { position: absolute; inset: 0; z-index: 40; background: #000; opacity: var(--dim, 0); pointer-events: none; }

/* ---------- HERO ----------
   Tres capas (negro con brillo, franja de video, naranja con degradado) cortadas por la cuña,
   con el mismo contenido clonado en cada una para que el texto cambie de color al cruzarlas. */
.hero {
  --a: 31%; --b: 64%; --c: 83%; --d: 50%; --e: 0;
  --hx: calc(var(--pad-l) + 6vw);
  --hero-dark:
    radial-gradient(110% 75% at -8% 112%, rgba(var(--accent-rgb), .20) 0%, rgba(var(--accent-rgb), .11) 22%, rgba(var(--deep-rgb), .05) 42%, rgba(var(--deep-rgb), .015) 60%, transparent 78%),
    radial-gradient(60% 55% at 46% 96%, rgba(var(--accent-rgb), .07) 0%, rgba(var(--accent-rgb), .025) 45%, transparent 75%),
    radial-gradient(70% 60% at 22% 18%, rgba(var(--cream-rgb), .035) 0%, transparent 70%),
    linear-gradient(118deg, color-mix(in srgb, var(--black) 55%, #000) 0%, var(--black) 48%, color-mix(in srgb, var(--black) 95%, #fff) 100%);
       /* columna del contenido */
  position: sticky; top: 0;
  height: var(--vh);
  overflow: hidden;
  background: var(--black);
}
.hero__layer { position: absolute; inset: 0; }
.hero__layer--l {
  /* negro con luz: brillo cálido muy tenue abajo y un reflejo suave hacia la franja */
  background: var(--hero-dark);
  color: var(--orange);
  clip-path: polygon(0 0, var(--a) 0, var(--d) 100%, 0 100%);
}
.hero__layer--w { background: var(--charcoal); color: var(--cream); clip-path: polygon(var(--a) 0, var(--b) 0, var(--c) 100%, var(--d) 100%); }
.hero__layer--r {
  /* naranja más profundo; la luz la ponen el borde y la lámpara de lava */
  background:
    radial-gradient(36% 62% at 66% 44%, rgba(var(--glow-rgb), .32) 0%, rgba(var(--glow-rgb), .12) 45%, transparent 78%),
    linear-gradient(162deg, color-mix(in srgb, var(--orange) 95%, #fff) 0%, color-mix(in srgb, var(--orange) 90%, #000) 52%, color-mix(in srgb, var(--orange) 78%, #000) 100%);
  isolation: isolate; color: var(--black);
  clip-path: polygon(var(--b) 0, 100% 0, 100% 100%, var(--c) 100%);
}
.hero__layer--r .strings { opacity: .9; }
/* lámpara de lava: manchas suaves que se desplazan muy lento (solo transform, va por GPU) */
.lava { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.lava i {
  position: absolute; display: block; border-radius: 50%;
  width: 22vw; height: 22vw; transform-origin: 0 0;
  will-change: transform;
  animation: lava 28s ease-in-out infinite alternate;
}
.lava i:nth-child(odd) { background: radial-gradient(circle, rgba(var(--deep-rgb), .55) 0%, rgba(var(--deep-rgb), .24) 36%, transparent 68%); }
.lava i:nth-child(even) { background: radial-gradient(circle, rgba(var(--glow-rgb), .42) 0%, rgba(var(--glow-rgb), .16) 38%, transparent 68%); }
.lava i:nth-child(1) { left: 60%; top: -14%; animation-duration: 26s; }
.lava i:nth-child(2) { left: 78%; top: 34%; animation-duration: 33s; animation-delay: -9s; }
.lava i:nth-child(3) { left: 70%; top: 58%; width: 19vw; height: 19vw; animation-duration: 29s; animation-delay: -17s; }
.lava i:nth-child(4) { left: 90%; top: -8%; width: 15vw; height: 15vw; animation-duration: 37s; animation-delay: -5s; }
.lava i:nth-child(5) { left: 84%; top: 70%; width: 17vw; height: 17vw; animation-duration: 24s; animation-delay: -12s; }
@keyframes lava {
  0% { transform: translate(0, 0) scale(2); }
  35% { transform: translate(-10vw, 5vh) scale(2.44); }
  70% { transform: translate(5vw, -7vh) scale(1.76); }
  100% { transform: translate(-4vw, 2vh) scale(2.16); }
}
.hero__reel { position: absolute; inset: 0; }
.hero__reel::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(var(--base-rgb), calc(.55 - var(--e) * .55)) 0%, transparent 18%, transparent 82%, rgba(var(--accent-rgb), calc(.25 - var(--e) * .25)) 100%),
    rgba(var(--base-rgb), calc(.18 - var(--e) * .18));
}
.hero__reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; }
.hero__reel video.is-on { opacity: 1; }

/* bordes de la franja: izquierda oscura con destellos pálidos que se funde con el negro;
   derecha con halo naranja (el blur se aplica en pantalla, no estirado) */
.hero__edges {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
  opacity: calc(1 - var(--e) * 1.4);
}
.hero__edges line { vector-effect: non-scaling-stroke; }
/* borde izquierdo: una sombra ancha y desenfocada dentro de la franja, sin línea */
/* borde izquierdo: corte nítido, una línea muy tenue y destellos que viajan por ella.
   Solo transform y opacity (los mueve la GPU); cada destello tiene su propio ciclo,
   con duraciones que no coinciden, así aparecen y se van de forma impredecible. */
.hero__spark {
  position: absolute; left: 0; top: 0; z-index: 3; width: 0; height: var(--len, 100vh);
  transform-origin: 0 0; pointer-events: none;
  opacity: calc(1 - var(--e) * 1.6);
}
.hero__spark::before {
  content: ""; position: absolute; left: -.5px; top: 0; width: 1px; height: 100%;
  background: linear-gradient(180deg, rgba(var(--deep-rgb), .1), rgba(var(--deep-rgb), .3) 38%, rgba(var(--deep-rgb), .18) 70%, rgba(var(--deep-rgb), .06));
}
.hero__spark i {
  position: absolute; left: -1px; top: 0; display: block;
  width: 2px; height: var(--h, 110px); border-radius: 2px;
  background: linear-gradient(180deg, transparent, rgba(var(--deep-rgb), var(--o, .95)) 50%, transparent);
  opacity: 0; will-change: transform, opacity;
  animation: spark var(--d, 9s) linear var(--w, 0s) infinite;
}
.hero__spark i::after {
  content: ""; position: absolute; left: -7px; top: 15%; width: 16px; height: 70%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--deep-rgb), .4), transparent 75%);
}
.hero__spark i:nth-child(1) { --d: 7.3s;  --w: -1.2s; --h: 120px; --a: -.1; --b: .62; }
.hero__spark i:nth-child(2) { --d: 11.9s; --w: -6.5s; --h: 70px;  --a: .3;  --b: 1.05; --o: .7; }
.hero__spark i:nth-child(3) { --d: 9.1s;  --w: -3.1s; --h: 150px; --a: .95; --b: .2; }
.hero__spark i:nth-child(4) { --d: 13.7s; --w: -9.4s; --h: 90px;  --a: .5;  --b: .9;  --o: .6; }
.hero__spark i:nth-child(5) { --d: 5.9s;  --w: -2.2s; --h: 60px;  --a: .7;  --b: .35; --o: .8; }
.hero__spark i:nth-child(6) { --d: 16.3s; --w: -12s;  --h: 130px; --a: 0;   --b: 1.1; }
/* cada destello recorre un tramo (de --a a --b, en fracciones del largo) durante el 40% de su ciclo y luego descansa */
@keyframes spark {
  0%   { transform: translate3d(0, calc(var(--len, 100vh) * var(--a)), 0); opacity: 0; }
  8%   { opacity: 1; }
  30%  { opacity: .85; }
  40%  { transform: translate3d(0, calc(var(--len, 100vh) * var(--b)), 0); opacity: 0; }
  100% { transform: translate3d(0, calc(var(--len, 100vh) * var(--b)), 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero__spark i { animation: none; } }
/* fuera de pantalla o con el menú abierto, las animaciones del hero se detienen */
.hero:not([data-live="1"]) .lava i, .hero:not([data-live="1"]) .hero__spark i, .hero:not([data-live="1"]) .hero__arrow,
.menu-open .hero .lava i, .menu-open .hero .hero__spark i, .menu-open .hero .hero__arrow { animation-play-state: paused; }
.hero__edges .edge-r { stroke: color-mix(in srgb, rgb(var(--glow-rgb)) 45%, #fff); stroke-width: 1.1; stroke-opacity: .75; }
.hero__glow {
  position: absolute; left: 0; top: 0; z-index: 3; width: 0; height: var(--len, 100vh);
  transform-origin: 0 0; pointer-events: none;
  opacity: calc(.8 - var(--e) * 1.2);
}
.hero__glow::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40px; width: 80px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .12) 28%, rgba(var(--accent-rgb), .5) 46%, rgba(var(--accent-rgb), .62) 50%, rgba(var(--accent-rgb), .5) 54%, rgba(var(--accent-rgb), .12) 72%, transparent);
}
/* grano fino de película sobre el hero: suaviza los degradados y evita escalones */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .05;
}

.hero__content {
  position: absolute; inset: 0; z-index: 2;
  transform: translateY(calc(var(--e) * -18vh));
  opacity: calc(1 - var(--e) * 1.6);
}
.hero__title { position: absolute; left: calc(var(--hx) - 1.5vw); top: 9vh; margin: 0; line-height: 0; }
.hero__logo { width: min(19vw, 32vh); opacity: 0; transform: scale(.82) rotate(-8deg); transition: opacity .9s var(--ease), transform 1.4s var(--ease); }
.is-ready .hero__logo { opacity: 1; transform: none; }
/* titular: misma letra que los titulares (Geist en peso fuerte, interletrado cerrado) */
.hero__sub {
  position: absolute; left: var(--hx); top: 47vh;
  max-width: 15.5ch;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(30px, 3.55vw, 68px); line-height: .96; letter-spacing: -.045em;
  opacity: 0; transform: translateY(16px);
  transition: opacity .8s .5s, transform 1s .5s var(--ease);
}
.is-ready .hero__sub { opacity: 1; transform: none; }
.hero__layer--l .hero__sub {
  color: var(--cream);
  background: var(--cream);   /* mismo blanco que la barra de arriba */
  -webkit-background-clip: text; background-clip: text;
}
.hero__layer--l .hero__sub > span:not(.hero__brand):not(.hero__dash):not(.hero__dot) { -webkit-text-fill-color: transparent; }
/* la palabra que se escribe va siempre en su propia línea y sin cortes: al borrar y escribir el bloque no salta */
.hero__line { display: block; white-space: nowrap; }
.hero__brand { font-weight: 700; }
.hero__layer--l .hero__brand, .hero__layer--l .hero__dash, .hero__layer--l .hero__dot { color: var(--orange); -webkit-text-fill-color: var(--orange); }
.hero__dash { font-weight: 300; }
.type { white-space: nowrap; }
.type__caret {
  display: inline-block; width: .07em; height: .82em; margin-left: .05em;
  background: currentColor; vertical-align: -.06em;
  animation: caret 1.05s steps(2, start) infinite;
}
.hero__layer--l .type__caret { background: var(--orange); }
.type.is-typing .type__caret { animation: none; }
@keyframes caret { to { visibility: hidden; } }

/* flecha grande hacia abajo, sobre el naranja */
.hero__arrow { position: absolute; left: 79%; top: 52%; width: 6.2vw; height: 6.2vw; min-width: 48px; min-height: 48px; transform: rotate(90deg); animation: nudge 2.2s var(--ease) infinite; }
@keyframes nudge { 0%, 55%, 100% { transform: rotate(90deg) translateX(0); } 25% { transform: rotate(90deg) translateX(16px); } }

/* controles del hero */
.hero__ui {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  opacity: calc(1 - var(--e) * 2);
}
.hero__ui > * { pointer-events: auto; }
.hero__more {
  position: absolute; left: var(--hx); top: 72vh;
  display: inline-flex; align-items: center; gap: 14px;
  color: var(--cream); font-size: 12px; letter-spacing: .22em;
  opacity: 0; transition: opacity .8s .9s, color .3s;
}
.is-ready .hero__more { opacity: 1; }
.hero__sep { width: 1px; height: 14px; background: rgba(var(--cream-rgb), .4); }
.hero__frame, .hero__crt, .hero__crt-dot, .mview, .hero__ascii { display: none; }
.hero__deco { display: none; }
.hero__line-arrow { width: 66px; height: 10px; fill: none; stroke: var(--orange); stroke-width: 1.2; transition: transform .6s var(--spring); }
.hero__more:hover { color: var(--orange); }
.hero__more:hover .hero__line-arrow { transform: translateX(10px); }

.hud {
  position: absolute; inset: 0; z-index: 5;
  padding: 3vh var(--pad-r) 3.5vh var(--pad-l);
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--cream);
  opacity: clamp(0, calc((var(--e) - .7) * 3.4), 1);
  pointer-events: none;
}
.hud__top, .hud__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 2vw; }
.hud__top { font-variant-numeric: tabular-nums; }
.hud__name { font-size: clamp(54px, 9vw, 170px); }
.hud__bottom b { color: var(--orange); font-weight: 500; }
.hud__corner { position: absolute; width: 26px; height: 26px; border: 0 solid var(--orange); }
.hud__corner--tl { left: calc(var(--pad-l) - 14px); top: 1.4vh; border-width: 2px 0 0 2px; }
.hud__corner--tr { right: calc(var(--pad-r) - 14px); top: 1.4vh; border-width: 2px 2px 0 0; }
.hud__corner--bl { left: calc(var(--pad-l) - 14px); bottom: 1.4vh; border-width: 0 0 2px 2px; }
.hud__corner--br { right: calc(var(--pad-r) - 14px); bottom: 1.4vh; border-width: 0 2px 2px 0; }

/* ---------- TRABAJO: lista + pantalla ---------- */
.work {
  background: var(--black);
  padding: 4vh var(--pad-r) 4vh var(--pad-l);
  display: flex; flex-direction: column; gap: 3vh;
}
.work__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 4vw; flex-wrap: wrap; }
.work__title, .archive__title { font-size: clamp(64px, 11vw, 230px); color: var(--orange); }
.work__title sup, .archive__title sup { font-size: 14px; vertical-align: top; margin-left: .6em; color: var(--orange-soft); position: relative; top: 1.2em; }
.work__more {
  position: relative; align-self: center;
  display: inline-flex; align-items: center; gap: .3em;
  padding-bottom: .1em;
  font-size: clamp(30px, 3.6vw, 64px);
  color: var(--orange);
  transition: color .3s, gap .5s var(--ease);
}
.work__more::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--orange-soft);
  transform: scaleX(0); transform-origin: right;
  transition: transform .6s var(--ease);
}
.work__more:hover, .work__more:focus-visible { color: var(--orange-soft); gap: .55em; }
.work__more:hover::after, .work__more:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.work__more svg { width: .9em; height: .62em; flex: none; }

/* carrusel táctil: se desliza con el dedo, el video activo se reproduce */
.swipe { display: grid; gap: 14px; margin-inline: calc(-1 * var(--pad-l)) calc(-1 * var(--pad-r)); }
.swipe__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 460px); gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad-l);
  padding-inline: var(--pad-l) var(--pad-r);
  scrollbar-width: none;
}
.swipe__track::-webkit-scrollbar { display: none; }
.slide {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5; max-width: 100%;
  background: var(--charcoal);
  scroll-snap-align: start;
  transition: transform .5s var(--ease);
}
.slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.45) grayscale(.7); transition: filter .5s; }
.slide.is-on video { filter: none; }
.slide:active { transform: scale(.98); }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(var(--base-rgb), .9)); pointer-events: none; }
.slide__n { position: absolute; z-index: 1; left: 14px; top: 14px; color: var(--orange-soft); }
.slide__play {
  position: absolute; z-index: 1; right: 14px; top: 14px;
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--orange); color: var(--black);
  transform: scale(.7); opacity: .6; transition: transform .45s var(--ease), opacity .3s;
}
.slide.is-on .slide__play { transform: none; opacity: 1; }
.slide__play svg { width: 18px; height: 18px; }
.slide__info { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 16px; display: grid; gap: 8px; }
.slide__title { font-size: clamp(44px, 13vw, 80px); color: var(--cream); }
.slide.is-on .slide__title { color: var(--orange); }
.slide__meta { opacity: .75; }
.swipe__bar { display: flex; align-items: center; gap: 12px; padding-inline: var(--pad-l) var(--pad-r); font-variant-numeric: tabular-nums; }
.swipe__line { flex: 1; height: 2px; background: var(--line); }
.swipe__line i { display: block; height: 100%; width: 0; background: var(--orange); transition: width .45s var(--ease); }
.touch .work { justify-content: center; }
.work__body { flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2.4vw; min-height: 0; }
.work__list { border-top: 1px solid var(--line); align-self: start; }
.row {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 3.4vw minmax(0, 1fr) auto; align-items: center; gap: 1.4vw;
  width: 100%;
  padding: 1.1vh .6vw 1.1vh 0;
  border-bottom: 1px solid var(--line);
  transition: color .25s;
}
.row::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--orange);
  clip-path: var(--m-hide);
  transition: clip-path .55s var(--ease);
}
.row__n { color: var(--orange-soft); padding-left: .4vw; }
.row__title { display: flex; align-items: center; font-size: min(4.8vw, 7.4vh); transition: transform .5s var(--ease); }
.row__title svg { width: 0; height: .58em; flex: none; transition: width .45s var(--ease), margin .45s var(--ease); }
.row__meta { opacity: .55; text-align: right; }
.row.is-on { color: var(--black); }
.row.is-on::before { clip-path: var(--m-show); }
.row.is-on .row__n { color: var(--black); }
.row.is-on .row__meta { opacity: .85; }
.row.is-on .row__title svg { width: .85em; margin-right: .15em; }
.work__screen { position: relative; overflow: hidden; background: var(--charcoal); min-height: 0; max-height: 64vh; align-self: stretch; }
.work__screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: var(--m-hide); transition: clip-path .7s var(--ease); }
.work__screen video.is-on { clip-path: var(--m-show); }
.work__screen-tag, .work__screen-tc { position: absolute; z-index: 2; color: var(--cream); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.work__screen-tag { left: 12px; top: 10px; display: flex; align-items: center; }
.work__screen-tag b { font-weight: 500; }
.work__screen-tc { right: 12px; bottom: 10px; font-variant-numeric: tabular-nums; }

/* ---------- VIDEO A PANTALLA COMPLETA ---------- */
.fullvid { --k: 1; height: var(--vh); background: var(--black); cursor: pointer; }
.fullvid__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.2 - var(--k) * .2)); transition: filter .5s; will-change: transform; }
.fullvid::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--base-rgb), .55) 0%, transparent 22%, transparent 55%, rgba(var(--base-rgb), .85) 100%);
}
.fullvid__ui { position: absolute; inset: 0; z-index: 2; padding: 3vh var(--pad-r) 4vh var(--pad-l); display: grid; grid-template-rows: auto 1fr auto; align-items: end; }
.fullvid__top { display: flex; justify-content: space-between; align-self: start; }
.fullvid__text { font-size: clamp(56px, 11.5vw, 240px); line-height: .84; color: var(--cream); }
.fullvid__text em { font-style: normal; color: var(--orange); }
.fullvid--alt .fullvid__text { text-align: right; justify-self: end; }
.fullvid__btn { margin-top: 3vh; justify-self: start; }
.fullvid--alt .fullvid__btn { justify-self: end; }
.fullvid--center .fullvid__ui { align-items: center; justify-items: center; text-align: center; }
.fullvid--center .fullvid__top { justify-self: stretch; }
.fullvid--center .fullvid__btn { justify-self: center; }
.fullvid:hover .fullvid__video { filter: saturate(1.25) contrast(1.05); }

/* ---------- ARCHIVO ---------- */
.archive {
  background: var(--black); isolation: isolate;
  padding: 4vh var(--pad-r) 6vh var(--pad-l);
  display: flex; flex-direction: column; gap: 3.5vh;
}
.archive__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 3vw; flex-wrap: wrap; }
.archive__kicker { opacity: .6; margin-bottom: 1vh; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px 8px;
  border: 1px solid var(--line);
  color: var(--cream);
  transition: color .3s, border-color .3s;
}
.chip::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--charcoal); clip-path: var(--m-hide); transition: clip-path .45s var(--ease); }
.chip:hover::before { clip-path: var(--m-show); }
.chip sup { font-size: 9px; color: var(--orange-soft); }
.chip[aria-pressed="true"] { color: var(--black); border-color: var(--orange); }
.chip[aria-pressed="true"]::before { background: var(--orange); clip-path: var(--m-show); }
.chip[aria-pressed="true"] sup { color: var(--black); }

.archive__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.2vh 1.6vw; }
.card { display: grid; gap: 12px; transition: opacity .3s, transform .45s var(--ease); }
.card.is-out { opacity: 0; transform: translateY(24px) scale(.97); }
.card__media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: var(--charcoal); }
.card__media img, .card__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__media img { filter: grayscale(1) brightness(.55) contrast(1.15); transition: transform .8s var(--ease), filter .5s; }
.card__media video { clip-path: var(--m-hide); transition: clip-path .7s var(--ease); }
.card__tag { position: absolute; left: 10px; top: 10px; z-index: 2; background: var(--black); color: var(--cream); padding: 5px 8px 4px; }
.card__tc { position: absolute; right: 10px; bottom: 8px; z-index: 2; color: var(--cream); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .3s; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.card:hover .card__media img { transform: scale(1.08); }
.card:hover .card__media video, .card.is-live .card__media video { clip-path: var(--m-show); }
.card:hover .card__tc, .card.is-live .card__tc { opacity: 1; }
.card__info { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 12px; }
.card__n { color: var(--orange-soft); }
.card__title { font-size: clamp(22px, 2vw, 34px); }
.card__meta { opacity: .55; }
.card__sub { opacity: .55; grid-column: 2 / -1; }

/* ---------- CONTACTO ---------- */
.contact { display: flex; flex-direction: column; height: var(--vh); }
.band {
  position: relative; flex: 1 1 0;
  display: flex; flex-direction: column;
  padding: 0 var(--pad-r) 0 var(--pad-l);
  overflow: hidden; outline: none;
  transition: flex-grow .7s var(--ease-io);
}
.band--1 { background: var(--black); color: var(--orange); }
.band--2 { background: var(--charcoal); color: var(--cream); }
.band--2 .band__arrow { color: var(--orange-soft); }
.band--3 { background: var(--orange); color: var(--black); }
.contact.has-active .band { flex-grow: .62; }
.contact .band.is-active { flex-grow: 2.6; }
.band__row { display: flex; align-items: center; gap: 2vw; min-height: 22vh; padding-top: 1vh; }
.band__title { font-size: min(9vw, 15vh); white-space: nowrap; transition: transform .6s var(--ease-io); }
.band__arrow { width: min(9vw, 13vh); height: min(6.4vw, 9vh); flex: none; transition: transform .6s var(--ease-io), opacity .4s; }
.band__arrow--l { position: absolute; left: calc(var(--pad-l) - 1vw); transform: translateX(-140%); opacity: 0; }
.band__arrow--r { margin-left: auto; }
.band.is-active .band__arrow--l { transform: none; opacity: 1; }
.band.is-active .band__arrow--r { transform: translateX(140%); opacity: 0; }
.band.is-active .band__title { transform: translateX(min(11vw, 16vh)); }
.band__more {
  display: grid; justify-items: start; gap: 4vh;
  padding: 0 0 5vh min(11vw, 16vh);
  opacity: 0; transform: translateY(30px);
  transition: opacity .35s, transform .6s var(--ease);
}
.band.is-active .band__more { opacity: 1; transform: none; transition-delay: .25s; }
.band__big { font-size: min(7vw, 11vh); text-transform: none; }
.band__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- CONTACTO: formulario (vive en el footer, sobre papel) ---------- */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.talk__mail { display: grid; justify-items: start; gap: 8px; padding-top: 2.4vh; border-top: 1px solid rgba(var(--base-rgb), .14); }
.talk__mail .mono { opacity: .55; }
.talk__mail .d { font-size: clamp(26px, 2.4vw, 42px); }
.talk__form { display: grid; gap: 18px; max-width: 760px; }
.talk__lead { font-size: clamp(18px, 1.5vw, 24px); font-weight: 400; letter-spacing: -.02em; line-height: 1.3; color: rgba(var(--base-rgb), .75); margin-bottom: 6px; }
.talk__group { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.talk__label { color: rgba(var(--base-rgb), .55); }
.talk__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px 11px 14px; border-radius: 999px;
  font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  color: var(--black);
  background: rgba(255, 255, 255, .3);
  box-shadow: inset 0 0 0 1px rgba(var(--base-rgb), .16);
  transition: background-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease), transform .6s var(--spring);
}
/* puntito que se llena al elegir */
.pick span::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px currentColor;
  transition: background-color .45s var(--ease), box-shadow .45s var(--ease);
}
.pick:hover span { box-shadow: inset 0 0 0 1px var(--black); transform: translateY(-2px); }
.pick input:checked + span { background: var(--black); color: var(--paper); box-shadow: none; }
.pick input:checked + span::before { background: var(--orange); box-shadow: none; }
.pick input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 3px; }
.talk__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* campos con etiqueta que sube al escribir */
.fl { position: relative; }
.fl input, .fl textarea {
  display: block; width: 100%;
  padding: 28px 18px 12px;
  border: 0; border-radius: 16px;
  background: rgba(255, 255, 255, .42);
  box-shadow: inset 0 0 0 1px rgba(var(--base-rgb), .12);
  font-family: var(--display); font-size: 18px; font-weight: 400; letter-spacing: -.01em; color: var(--black);
  outline: none;
  transition: box-shadow .4s var(--ease), background-color .4s var(--ease);
}
.fl textarea { min-height: 160px; resize: vertical; line-height: 1.45; }
.fl label {
  position: absolute; left: 18px; top: 19px;
  font-size: 17px; color: rgba(var(--base-rgb), .5);
  transform-origin: left top;
  pointer-events: none;
  transition: transform .45s var(--ease), color .3s;
}
.fl input:focus, .fl textarea:focus { background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1.5px var(--black), 0 0 0 4px rgba(var(--accent-rgb), .22); }
.fl input:focus + label, .fl textarea:focus + label,
.fl input:not(:placeholder-shown) + label, .fl textarea:not(:placeholder-shown) + label { transform: translateY(-11px) scale(.72); color: var(--orange-ink); }
.fl [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--orange), 0 0 0 4px rgba(var(--accent-rgb), .18); }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.talk__send { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding-top: 4px; }
.talk__note { color: rgba(var(--base-rgb), .5); }
.talk__status { flex-basis: 100%; max-width: 56ch; font-size: 15px; line-height: 1.5; color: var(--black); }
.talk__status:not(:empty) { padding: 12px 16px; border-radius: 12px; background: rgba(var(--accent-rgb), .14); }
.ft .btn--ghost { --fg: var(--black); box-shadow: inset 0 0 0 1px rgba(var(--base-rgb), .25); }

/* ---------- FOOTER: mosaico + título grande ---------- */
.footer { background: var(--black) var(--zig-light); padding: 12px var(--pad-r) 12px var(--pad-l); display: flex; }
.ft {
  flex: 1;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  background: var(--paper); color: var(--black);
  min-height: calc(var(--vh) - 24px);
}
.ft__bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; min-height: 56px; }
.ft__logo { display: flex; align-items: center; padding: 0 18px; background: var(--black); }
.ft__mark { width: 40px; color: var(--cream); transition: color .3s; }
.ft__logo:hover .ft__mark { color: var(--orange); }
.ft__cta {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 0 22px; background: var(--orange); color: var(--black);
  font-family: var(--sans); font-weight: 500; font-size: 17px;
  transition: background-color .5s var(--ease);
}
.ft__cta:hover { background: var(--orange-soft); }
.ft__plus { font-size: 1.4em; line-height: 1; transition: transform .7s var(--spring); }
.ft__cta:hover .ft__plus, .ft__nav a:hover .ft__plus { transform: rotate(90deg); }
.ft__nav { display: flex; align-items: center; gap: 3vw; padding: 0 22px 0 4vw; font-family: var(--sans); font-weight: 500; font-size: 17px; }
.ft__nav a { display: flex; align-items: center; gap: 8px; }
.ft__mosaic {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));
  min-height: 40vh;
}
.ft__tile { position: relative; overflow: hidden; background: var(--charcoal); }
.ft__tile img, .ft__tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s var(--ease); }
.ft__tile img { filter: saturate(.85) contrast(1.05); }
.ft__tile::after { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(var(--cream-rgb), .14) 1px, transparent 1.4px) 0 0 / 4px 4px; opacity: .5; pointer-events: none; }
.ft__tile:hover img, .ft__tile:hover video { transform: scale(1.06); filter: saturate(1.2); }
.ft__label { position: absolute; left: 0; bottom: 0; z-index: 1; background: var(--paper); color: var(--black); padding: 6px 8px 5px; }
.ft__tile--a { grid-column: 1 / 4; grid-row: 1 / 3; }
.ft__tile--b { grid-column: 4 / 6; grid-row: 1 / 2; box-shadow: inset 0 0 0 1px var(--paper); }
.ft__tile--c { grid-column: 6 / 8; grid-row: 1 / 2; }
.ft__tile--d { grid-column: 8 / 10; grid-row: 1 / 3; }
.ft__tile--e { grid-column: 10 / 13; grid-row: 1 / 2; }
.ft__tile--f { grid-column: 4 / 5; grid-row: 2 / 3; }
.ft__tile--g { grid-column: 5 / 8; grid-row: 2 / 3; }
.ft__tile--h { grid-column: 10 / 12; grid-row: 2 / 3; }
.ft__tile--i { grid-column: 12 / 13; grid-row: 2 / 3; }
.ft__body { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 5vw; padding: 4vh 20px 2vh; align-items: start; }
.ft__aside { display: grid; gap: 4vh; align-content: space-between; height: 100%; }
.ft__cube { width: clamp(120px, 11vw, 190px); color: var(--black); margin: 1vh 0 0 -1vw; }
.ft__talk { display: grid; gap: 2.4vh; }
.ft__title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(64px, 8.4vw, 170px); line-height: .9; letter-spacing: -.05em;
}
.ft__title span:last-child { color: var(--orange); }
.ft__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr) auto; align-items: end; gap: 4vw; padding: 3vh 20px 18px; }
.ft__credit { line-height: 1.5; }
.ft__top { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font-family: var(--sans); font-weight: 500; font-size: 17px; }
.ft__top span:last-child { transition: transform .7s var(--spring); }
.ft__top:hover span:last-child { transform: translateY(-5px); }
.ft__social { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: flex-end; }
.ft__social a:hover, .ft__social button:hover { color: var(--orange); }

/* ==================== ABOUT ==================== */
.ab-hero {
  background: var(--black) var(--zig-light);
  color: var(--orange);
  padding: 3vh var(--pad-r) 5vh var(--pad-l);
  display: flex; flex-direction: column; justify-content: space-between; gap: 6vh;
}
.ab-hero__title { display: grid; font-size: clamp(56px, 8.6vw, 190px); line-height: .92; }
.ab-hero__title .r { justify-self: end; padding-right: 3vw; }
.ab-hero__title > span:last-child { display: flex; align-items: center; gap: .2em; white-space: nowrap; }
.ab-hero__arrow { width: .62em; height: .5em; transform: rotate(90deg); animation: drop 2.4s var(--ease) infinite; }
@keyframes drop { 0%, 60%, 100% { transform: rotate(90deg); } 30% { transform: rotate(90deg) translateX(14px); } }
.ab-hero__cube { position: absolute; right: calc(var(--pad-r) + 4vw); top: 50%; width: clamp(140px, 15vw, 280px); color: var(--cream); }
.ab-hero__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6vw; align-items: end; }
.ab-hero__foot .lede { max-width: 24ch; }
.ab-hero__small { max-width: 44ch; font-size: clamp(13px, 1vw, 16px); justify-self: end; opacity: .9; }

/* deriva: video completo con texto vertical que cruza */
.track--drift { height: 240vh; }
.drift { background: var(--black); }
.drift__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.drift::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, rgba(var(--base-rgb), .6) 100%); pointer-events: none; }
.drift__caption {
  position: absolute; z-index: 2; left: 50%; top: 9vh;
  width: min(30ch, 80vw); transform: translateX(-50%);
  text-align: center; font-size: clamp(20px, 1.9vw, 32px);
  text-shadow: 0 2px 20px rgba(var(--base-rgb), .8);
}
.drift__mover { position: absolute; z-index: 2; inset: 0; transform: translateX(var(--dx, 0)); will-change: transform; }
.drift__text {
  position: absolute; top: 6vh; bottom: 6vh; left: 0;
  display: flex; flex-direction: column;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: min(17vh, 15vw); line-height: .86; white-space: nowrap;
  color: var(--cream);
  text-shadow: 0 4px 30px rgba(var(--base-rgb), .45);
}

/* capítulos: tres columnas que se mueven a distinto ritmo */
.track--chap { height: 400vh; }
.chap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr) minmax(0, .62fr); background: var(--black); }
.chap__col { position: relative; overflow: hidden; background: var(--black) var(--zig-light); }
.chap__stack { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.chap__block { height: var(--vh); display: flex; flex-direction: column; justify-content: space-between; }
.chap__col--l .chap__block { padding: 9vh 2.6vw 5vh var(--pad-l); }
.chap__title { font-size: clamp(44px, 5.8vw, 120px); color: var(--cream); line-height: .88; }
.chap__text { max-width: 30ch; padding-top: 2vh; border-top: 1px solid var(--line); font-size: clamp(13px, 1vw, 16px); opacity: .8; }
.chap__media { position: relative; overflow: hidden; background: var(--charcoal); }
.chap__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chap__col--r .chap__block { padding: 5vh var(--pad-r) 5vh 1.6vw; align-items: flex-start; }
.chap__label { font-size: clamp(18px, 1.6vw, 28px); }
.chap__num { writing-mode: vertical-rl; font-size: min(16vw, 34vh); line-height: .8; color: var(--cream); align-self: flex-end; }

/* cómplices */
.crew {
  background: var(--charcoal);
  padding: 4vh var(--pad-r) 5vh var(--pad-l);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; gap: 3vh 5vw;
  align-content: start;
}
.crew__head { grid-row: 1 / 3; display: grid; gap: 3vh; align-content: space-between; color: var(--orange); }
.crew__title { font-size: clamp(52px, 7vw, 150px); line-height: .84; white-space: nowrap; }
.copy { display: inline-block; vertical-align: top; width: .6em; height: .6em; margin-left: .04em; animation: spin 22s linear infinite; }
.crew__head .lede { color: var(--cream); max-width: 18ch; }
.crew__list { border-top: 1px solid var(--line); align-self: start; }
.crew__list li {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 1.6vw;
  padding: 1.5vh .6vw;
  border-bottom: 1px solid var(--line);
  transition: color .3s;
}
.crew__list li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--black); clip-path: var(--m-hide); transition: clip-path .5s var(--ease); }
.crew__list li:hover::before { clip-path: var(--m-show); }
.crew__list li:hover { color: var(--orange); }
.crew__name { font-size: clamp(22px, 2.2vw, 40px); }
.crew__list .mono { opacity: .6; }
.crew__tools { align-self: end; display: grid; gap: 12px; }
.crew__tools h3 { color: var(--orange-soft); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { border: 1px solid var(--line); padding: 7px 10px 6px; transition: border-color .25s, color .25s; }
.tags li:hover { border-color: var(--orange); color: var(--orange); }

/* ---------- Reproductor ---------- */
.player {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(var(--base-rgb), .97);
  display: grid; grid-template-rows: auto 1fr auto; gap: 2vh;
  padding: 3vh var(--pad-r) 3vh var(--pad-l);
}
.player__bar { display: flex; align-items: center; gap: 2vw; }
.player__bar > span:first-child { color: var(--orange-soft); }
.player__title { font-size: clamp(32px, 4vw, 70px); color: var(--orange); }
#player-meta { opacity: .6; }
.player__close { margin-left: auto; padding: 10px 14px; border: 1px solid var(--line); }
.player__close:hover { border-color: var(--orange); color: var(--orange); }
.player__video { width: 100%; height: 100%; min-height: 0; object-fit: contain; background: #000; }
.player__foot { display: flex; justify-content: space-between; opacity: .7; font-variant-numeric: tabular-nums; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 96;
  transform: translate(-50%, 20px); opacity: 0;
  background: var(--orange); color: var(--black); padding: 10px 14px;
  transition: opacity .25s, transform .35s var(--ease);
  pointer-events: none;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1100px) {
  .archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
}

@media (max-width: 900px) {
  :root { --rail: 0px; --rail-r: 0px; --pad-l: max(18px, env(safe-area-inset-left, 0px)); --pad-r: max(18px, env(safe-area-inset-right, 0px)); --top-h: calc(100px + env(safe-area-inset-top, 0px)); }
  /* en celular la barra del footer es el header: siempre fija; el riel no se usa */
  .rail { display: none; }
  .topbar { transform: none; visibility: visible; padding-top: env(safe-area-inset-top, 0px); }
  .topbar .ft__logo { padding: 0 16px; }
  .topbar .ft__mark { width: 34px; }
  .topbar .ft__nav { padding: 0 16px; min-height: 44px; border-bottom: 0; }
  .topbar .palette { display: flex; gap: 2px; color: var(--black); }
  .topbar .palette__label { display: none; }
  .topbar .palette button { padding: 4px; }
  .topbar .palette i { width: 10px; height: 10px; }
  .topbar .palette i:not(:first-child) { display: none; }   /* en celular: un punto con el acento de cada paleta */
  .topbar .ft__nav { gap: 16px; }

  .rail { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: calc(56px + env(safe-area-inset-top, 0px)); padding: 0; }
  .rail__inner {
    flex-direction: row;
    padding: env(safe-area-inset-top, 0px) var(--pad-r) 0 var(--pad-l);
    background: rgba(var(--base-rgb), .94);
    box-shadow: inset 0 -1px 0 var(--line);
  }
  .rail__progress { top: auto; bottom: 0; left: 0; width: calc(var(--p, 0) * 100%); height: 2px; }
  .rail__mark { width: 30px; }
  .lang { order: 1; flex-direction: row; gap: 10px; margin-left: auto; margin-right: 4px; padding: 10px 6px; }
  .burger { order: 2; }
  .burger { padding: 14px 6px; }
  .burger span { width: 22px; }
  .rail-r { display: none; }

  .menu { grid-template-columns: 1fr; }
  .menu__panel { padding: calc(84px + env(safe-area-inset-top, 0px)) var(--pad-r) calc(28px + env(safe-area-inset-bottom, 0px)) var(--pad-l); }
  .menu__list a { font-size: 16vw; }
  .menu__media { display: none; }

  .loader__meta { left: var(--pad-l); top: auto; bottom: 28px; }
  .loader__meta--r { right: var(--pad-r); left: auto; }

  /* ---- Hero en celular: marco fino, cubo arriba, texto grande a la izquierda.
     La banda de video empieza cerrada entre el cubo y el texto y, al bajar, se abre
     desde ahí hasta ocupar toda la pantalla, tapando el contenido (sigue a --e). */
  .hero {
    --mid: 38.5%;
    /* encendido de TV de tubo: primero un punto en el centro que se estira en una línea (--w),
       después la línea se abre hacia arriba y abajo (--v) hasta llenar la pantalla */
    /* muy rápido al tacto y sin superposiciones: punto (0–6px) → línea (6–15px) → la línea se apaga
       (15–20px) → recién ahí se abre el video hasta llenar la pantalla */
    --w: clamp(0, (var(--s, 0) - .0055) / .008, 1);   /* la línea arranca cuando el punto ya se apagó */
    --v: clamp(0, (var(--s, 0) - .0185) / .55, 1);    /* el video recién empieza cuando la línea ya se apagó */
    --half: calc(var(--v) * 76vh);
  }
  .hero__layer--l { clip-path: none; }
  /* banda recta: se abre en horizontal, sin inclinación */
  /* sin scroll el ancho es 0 y el alto también (+1px por lado: ni una línea por redondeo) */
  .hero__layer--w { clip-path: inset(calc(var(--mid) - var(--half) + 1px) calc(50% - 50% * var(--w)) calc(100% - var(--mid) - var(--half) + 1px) calc(50% - 50% * var(--w))); }
  /* brillo de la línea (como el fósforo de la pantalla): aparece con el punto y se apaga al abrirse */
  .hero__crt {
    display: block; position: absolute; z-index: 5; left: 0; right: 0; top: var(--mid); height: 2px; margin-top: -1px;
    background: #fff; box-shadow: 0 0 6px 1px rgba(255, 255, 255, .9), 0 0 22px 4px rgba(var(--glow-rgb), .55);
    transform: scaleX(var(--w)); pointer-events: none;
    /* el brillo se va apagando de a poco desde que la línea se está estirando */
    opacity: calc(min(1, var(--w) * 4) * (1 - clamp(0, (var(--s, 0) - .0135) / .005, 1)));
  }
  /* punto redondo siempre encendido entre el cubo y el texto; al bajar se apaga antes de que nazca la línea */
  .hero__crt-dot {
    display: block; position: absolute; z-index: 5; left: 50%; top: var(--mid);
    /* tono suave: gris claro con un halo tenue, como un fósforo que recién se enciende */
    width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
    background: rgba(235, 235, 235, .62); box-shadow: 0 0 6px 2px rgba(255, 255, 255, .28), 0 0 16px 5px rgba(255, 255, 255, .1);
    pointer-events: none;
    transform: scale(calc(1 - .5 * clamp(0, var(--s, 0) / .0055, 1)));
    opacity: calc(1 - clamp(0, (var(--s, 0) - .003) / .0025, 1));   /* siempre encendido en reposo; se apaga al empezar el scroll */
  }
  .hero__layer--r, .hero__edges, .hero__spark, .hero__glow, .hero__arrow, .hero__sep { display: none; }
  /* la banda tapa el texto al abrirse: sin copia clara encima del video y sin desvanecer */
  .hero__layer--w { z-index: 4; }
  .hero__layer--w .hero__content { display: none; }
  .hero__content { transform: none; opacity: 1; }
  /* ---- PRUEBA: el video empuja el texto hacia afuera, como créditos de Star Wars invertidos ----
     El borde de arriba del texto queda pegado al borde inferior del video (nunca se superponen);
     mientras lo empuja, el texto se inclina hacia la pantalla: las líneas de abajo se acercan y crecen.
     La posición y la inclinación las calcula main.js. */
  .hero__layer--l .hero__content { z-index: auto; }
  /* debajo de la capa del video (z 4): lo que crece hacia arriba pasa por detrás del borde, nunca encima */
  .hero__layer--l .hero__sub { z-index: 3; transform-origin: 50% 0; transition: opacity .8s .5s; }   /* sin transición de transform: sigue al scroll al instante, también al volver */
  .hero.is-push .hero__layer--l .hero__sub { transition: none; }   /* sigue al scroll sin retraso */
  /* el texto baja por encima de "Ver más" y la flecha: se apagan apenas empieza a empujar */
  .hero__more, .hero__arrow { transition: opacity .35s var(--ease); }
  .hero.is-push .hero__more, .hero.is-push .hero__arrow { opacity: 0; }
  .hero__ui { z-index: 3; opacity: 1; }
  .hero__frame {
    display: block; position: absolute; z-index: 5; inset: 8px;
    border: 1px solid rgba(var(--cream-rgb), .16); border-radius: 8px;
    pointer-events: none;
  }
  .hero__title { left: calc(50% - 23.25vw); top: 14%; }   /* cubo centrado (la caja mide 46.5vw) */
  /* ---- Vista B (provisoria): cubo gigante cortado por el borde, texto más liviano y una flecha chica ---- */
  /* el dibujo del cubo ocupa ~65% del ancho de su caja: la caja es enorme para que el cubo llene 2/3 de la pantalla y se corte en el borde */
  :root[data-mhero="b"] .hero { --cw: min(114vw, 52.74vh); --mid: calc(40.75% + var(--cw) * .3379); }   /* cubo 20% más chico; la banda se abre en el medio entre el cubo y el texto */
  /* centrado: el dibujo va de 16.6% a 81.3% del ancho de su caja, su centro queda en el 48.9% */
  :root[data-mhero="b"] .hero__title { left: calc(50% - var(--cw) * .489); top: calc(15.5% - var(--cw) * .168); }
  :root[data-mhero="b"] .hero__logo { width: var(--cw); }
  :root[data-mhero="b"] .hero__sub { top: 66%; right: 4%; font-size: min(8.256vw, 4.8vh); font-weight: 500; line-height: 1.04; letter-spacing: -.035em; }
  :root[data-mhero="b"] .hero__sub::after, :root[data-mhero="b"] .hero__more { display: none; }
  :root[data-mhero="b"] .hero__arrow {
    display: block; left: calc(50% - 13px); top: auto; bottom: calc(4.5% + env(safe-area-inset-bottom, 0px));
    width: 26px; height: 26px; min-width: 0; min-height: 0;
  }
  /* grilla de videos ASCII de fondo (provisoria): un canvas que dibuja main.js */
  .ascii-on .hero__ascii { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; clip-path: inset(9px round 7px); }   /* solo adentro del marco */
  .mview.mview--ascii { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }   /* encima del de la vista, sin pisarse */
  .mview.mview--ascii[aria-pressed="true"] { color: var(--black); background: var(--cream); box-shadow: none; }
  /* vista B: detalles de interfaz a la izquierda del cubo (arriba y abajo) */
  :root[data-mhero="b"] .hero__deco {
    display: grid; gap: 7px; position: absolute; left: 6%;
    font-size: 9.5px; letter-spacing: .2em; color: rgba(var(--cream-rgb), .72);
    transition: opacity .35s var(--ease);
  }
  .hero__deco--top { top: 15.5%; gap: 5px; }
  .deco__row { display: block; white-space: nowrap; }
  .deco__sub { color: rgba(var(--cream-rgb), .45); }
  .hero.is-push .hero__deco { opacity: 0; }
  /* botón provisorio para comparar las dos vistas */
  .mview {
    display: block; position: absolute; z-index: 6; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    padding: 7px 11px 6px; border-radius: 999px;
    font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream);
    background: rgba(var(--base-rgb), .6); box-shadow: inset 0 0 0 1px rgba(var(--cream-rgb), .28);
  }
  .hero__logo { width: 46.5vw; }
  .hero__sub {
    left: 11%; right: 7%; top: 42.5%; bottom: auto; max-width: none;
    font-size: min(8.6vw, 5vh); font-weight: 500; line-height: 1.04; letter-spacing: -.035em;   /* mismo tamaño y grosor que la vista B */
  }
  /* MATIZ — en su propia línea; en inglés "projects." baja a la línea siguiente (sin saltos al escribir) */
  .hero__dash::after { content: "\A"; white-space: pre; }
  .hero__line [data-i18n="hero.sub.post"]:not(:empty)::before { content: "\A"; white-space: pre; }
  .hero__sub::after {
    content: ""; display: block; width: 72%; height: 1px; margin-top: 4.5vh;
    background: rgba(var(--accent-rgb), .7);
  }
  .hero__more { left: 11%; top: auto; bottom: calc(6% + env(safe-area-inset-bottom, 0px)); gap: 22px; font-size: 13px; letter-spacing: .3em; white-space: nowrap; }
  .hero__line-arrow { width: 84px; }
  /* barra de arriba despegada de los bordes, alineada con el marco */
  .topbar { left: 8px; right: 8px; top: 8px; border-radius: 8px 8px 0 0; overflow: hidden; }
  .hud { padding: 76px var(--pad-r) calc(24px + env(safe-area-inset-bottom, 0px)) var(--pad-l); }
  .hud__top span:last-child { display: none; }
  .hud__bottom { flex-wrap: wrap; }
  .hud__name { order: -1; width: 100%; font-size: 17vw; }
  .hud__corner { display: none; }

  .work, .archive { padding: 80px var(--pad-r) 32px var(--pad-l); gap: 18px; }
  .work__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .work__title, .archive__title { font-size: 22vw; }
  .work__body { grid-template-columns: 1fr; }
  .work__screen { display: none; }
  .work__more { font-size: 7vw; margin-top: 8px; white-space: nowrap; }
  .row { grid-template-columns: 1fr; grid-template-rows: auto auto auto; column-gap: 14px; row-gap: 4px; padding: 14px 0; }
  .row__n { grid-column: 1; grid-row: 1; padding-left: 0; }
  .row__title { grid-column: 1; grid-row: 2; font-size: 8.4vw; }
  .row__meta { grid-column: 1; grid-row: 3; text-align: left; }
  .row.is-on { color: inherit; }
  .row.is-on::before { clip-path: var(--m-hide); }
  .row.is-on .row__n { color: var(--orange-soft); }
  .row.is-on .row__title svg { width: 0; margin: 0; }

  .fullvid__ui { padding: 76px var(--pad-r) calc(28px + env(safe-area-inset-bottom, 0px)) var(--pad-l); }
  .fullvid__top { flex-direction: column; gap: 6px; }
  .fullvid__text { font-size: 17vw; }

  .card__media img { filter: none; }
  .card__media video { clip-path: var(--m-show); }

  .contact { height: auto; min-height: var(--vh); padding-top: var(--top-h); background: var(--black); }
  .band, .contact.has-active .band, .contact .band.is-active { flex: none; padding: 24px var(--pad-r) 28px var(--pad-l); }
  .band__row { min-height: 0; padding: 0; gap: 12px; }
  .band__title { font-size: 14vw; white-space: normal; transform: none !important; }
  .band__arrow { width: 44px; height: 32px; }
  .band__arrow--l { display: none; }
  .band__arrow--r { opacity: 1 !important; transform: none !important; }
  .band__more { opacity: 1; transform: none; padding: 16px 0 0; gap: 18px; }
  .band__big { font-size: 9.5vw; }

  .footer { padding: calc(var(--top-h) + 10px) 10px 10px; }
  /* la barra del footer ya está fija arriba como header: no se repite */
  .footer .ft__bar { display: none; }
  .ft { min-height: 0; }
  .ft__bar { grid-template-columns: auto minmax(0, 1fr); }
  .ft__nav { grid-column: 1 / -1; padding: 14px 16px; gap: 22px; border-bottom: 1px solid rgba(var(--base-rgb), .12); }
  .ft__cta { padding: 0 16px; }
  .ft__mosaic { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(3, 22vw); min-height: 0; }
  .ft__tile--a { grid-column: 1 / 4; grid-row: 1 / 3; }
  .ft__tile--b { grid-column: 4 / 7; grid-row: 1 / 2; }
  .ft__tile--c { grid-column: 4 / 5; grid-row: 2 / 3; }
  .ft__tile--d { grid-column: 5 / 7; grid-row: 2 / 4; }
  .ft__tile--e { grid-column: 1 / 3; grid-row: 3 / 4; }
  .ft__tile--f { display: none; }
  .ft__tile--g { grid-column: 3 / 5; grid-row: 3 / 4; }
  .ft__tile--h, .ft__tile--i { display: none; }
  .ft__body { grid-template-columns: 1fr; gap: 28px; padding: 24px 16px 0; }
  .ft__aside { height: auto; order: 2; }
  .ft__title { font-size: 17vw; }
  /* formulario en celular: opciones más chicas, campos compactos (16px evita el zoom de iOS) */
  .talk__form { gap: 14px; }
  .talk__lead { font-size: 16px; margin-bottom: 2px; }
  .talk__group { gap: 9px; }
  .talk__chips { gap: 6px; }
  .pick span { gap: 6px; padding: 7px 12px 7px 10px; font-size: 13px; }
  .pick span::before { width: 7px; height: 7px; }
  .talk__row { grid-template-columns: 1fr; gap: 10px; }
  .fl input, .fl textarea { padding: 23px 14px 9px; border-radius: 12px; font-size: 16px; }
  .fl textarea { min-height: 120px; }
  .fl label { left: 14px; top: 16px; font-size: 15px; }
  .talk__send { flex-direction: column; align-items: flex-start; gap: 10px; }
  .talk__send .btn { min-height: 48px; }
  .talk__status { font-size: 14px; }
  .ft__foot { grid-template-columns: 1fr; gap: 18px; padding: 26px 16px 16px; }
  .ft__social { justify-content: flex-start; }

  .ab-hero { padding: 80px var(--pad-r) calc(32px + env(safe-area-inset-bottom, 0px)) var(--pad-l); gap: 36px; }
  .ab-hero__title { font-size: 14vw; }
  .ab-hero__title .r { padding-right: 0; }
  .ab-hero__foot { grid-template-columns: 1fr; gap: 18px; }
  .ab-hero__cube { width: 130px; top: auto; bottom: 30%; right: var(--pad-r); }
  .ft__cube { width: 110px; margin: 0; }
  .ab-hero__small { justify-self: start; }

  .drift__caption { top: calc(var(--top-h) + 20px); }
  .drift__text { font-size: 24vw; }

  .chap { grid-template-columns: 1fr; }
  .chap__media { position: absolute; inset: 0; }
  .chap__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--base-rgb), .2), rgba(var(--base-rgb), .85)); }
  .chap__col--l { background: transparent; z-index: 1; }
  .chap__col--l .chap__block { padding: 76px var(--pad-r) calc(32px + env(safe-area-inset-bottom, 0px)) var(--pad-l); justify-content: flex-end; gap: 20px; }
  .chap__title { font-size: 15vw; }
  .chap__col--r { position: absolute; top: 0; right: 0; bottom: 0; width: 36vw; background: transparent; z-index: 1; }
  .chap__col--r .chap__block { padding: 70px var(--pad-r) 0 0; align-items: flex-end; justify-content: flex-start; gap: 8px; }
  .chap__label { font-size: 18px; }
  .chap__num { font-size: 26vw; }

  .crew { grid-template-columns: 1fr; padding: 80px var(--pad-r) 32px var(--pad-l); gap: 24px; }
  .crew__head { grid-row: auto; }
  .crew__title { font-size: 14.5vw; }
  .crew__list li { grid-template-columns: minmax(0, 1fr) auto; }
  .crew__list li .crew__year { display: none; }
  .crew__name { font-size: 7.5vw; }

  .player { padding: 18px var(--pad-r) calc(18px + env(safe-area-inset-bottom, 0px)) var(--pad-l); align-content: center; grid-template-rows: auto auto auto; }
  .player__bar { flex-wrap: wrap; row-gap: 6px; }
  .player__title { order: 3; width: 100%; font-size: 13vw; }
  .player__video { height: auto; }
}

@media (max-width: 600px) {
  .archive__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}