/* ============================================================
   808CHOA — estética ref. maloothifibar.com: base crema (Varden)
   con bloques de sección en Cosmos/Gochujang/Marble, display
   serif (Instrument Serif ~ Times Now) + Inter Tight para texto.
   Carpetas de works ref. wildyriftian.com/works.
   ============================================================ */

/* ===== Inter Tight (texto/UI) + Instrument Serif (display) ===== */
@font-face {
  font-family: "Inter Tight";
  src: url("fonts/inter-tight-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("fonts/inter-tight-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("fonts/inter-tight-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Mono";
  src: url("fonts/aeonik-mono.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
/* ===== Era PXPUSH: Hanken Grotesk hace de Graphik (de pago) y
   Geist Mono es la misma mono de la referencia ===== */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Paleta (ref. therobot.tv): Beige / Negro / Gris prensa / Blanco.
     Se conservan los nombres de variable de la era anterior para no
     tocar todo el CSS: varden=beige, cosmos=negro, gochujang=negro,
     marble=gris #222, crimson=negro. */
  --gochujang: #000000;
  --crimson: #000000;
  --varden: #e3e4d8;
  --cosmos: #000000;
  --marble: #222222;
  --bg: var(--varden);
  --accent: var(--crimson);
  --white: var(--cosmos);    /* color de texto principal (base clara) */
  --dim: rgba(0, 0, 0, 0.68);
  --faint: rgba(0, 0, 0, 0.4);
  --gray: #66675e;
  --dark-gray: #9a9b90;
  --hairline: rgba(0, 0, 0, 0.18);
  --panel: #d8d9cc;
  --radius-card: 6px;
  --col-w: 1240px;
  --ease-out: cubic-bezier(0.2, 0.65, 0.25, 1);
  /* Era PXPUSH: Graphik para todo (Hanken Grotesk) + Geist Mono para
     etiquetas pequeñas. --font-serif se conserva como alias para no
     tocar cada regla: ahora también apunta a la grotesca. */
  --font-sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", "Aeonik Mono", monospace;
}

/* Bloques de sección oscuros (ref. Maloot): variables locales + full-bleed */
.block-cosmos, .block-gochujang, .block-marble {
  box-shadow: 0 0 0 100vmax var(--block-bg);
  clip-path: inset(0 -100vmax);
  background: var(--block-bg);
}
.block-cosmos {
  --block-bg: var(--cosmos);
  --white: #ffffff;
  --dim: rgba(255, 255, 255, 0.68);
  --faint: rgba(255, 255, 255, 0.4);
  --gray: #8a8b82;
  --hairline: rgba(255, 255, 255, 0.22);
  --panel: #161616;
  color: var(--white);
}
.block-gochujang {
  --block-bg: var(--gochujang);
  --white: #ffffff;
  --dim: rgba(255, 255, 255, 0.72);
  --faint: rgba(255, 255, 255, 0.42);
  --gray: #8a8b82;
  --hairline: rgba(255, 255, 255, 0.24);
  --panel: #161616;
  color: var(--white);
}
.block-marble {
  --block-bg: var(--marble);
  --white: #ffffff;
  --dim: rgba(255, 255, 255, 0.74);
  --faint: rgba(255, 255, 255, 0.45);
  --gray: #9a9b92;
  --hairline: rgba(255, 255, 255, 0.26);
  --panel: #2e2e2e;
  color: var(--white);
}

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

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  font-family: var(--font-sans);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* las tiras full-bleed (sierras, carpetas) usan 100vw */
}

::selection { background: var(--crimson); color: var(--varden); }

/* ===== Fondo plano negro (los pseudo-elementos de la era papel, fuera) ===== */
.bg-video { position: fixed; inset: 0; z-index: 0; background: var(--bg); pointer-events: none; }

.frame { position: relative; z-index: 1; }
.col { max-width: var(--col-w); margin: 0 auto; }
section { position: relative; }

/* ===== Tipografía calcada de Maloot: Times Now w300, line-height 1.0,
   letter-spacing −0.05em (Instrument Serif hace de Times Now, que es
   de pago). El cuerpo de texto también va en serif, como en la ref. ===== */
h1, h2 {
  font-family: var(--font-serif);
  font-weight: 500; /* peso de los titulares Graphik de la ref. */
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--white);
}
h1 { font-size: clamp(40px, 4vw, 56px); }
h2 { font-size: clamp(37px, 3.7vw, 52px); }
.muted { color: var(--faint); }

/* Etiquetas pequeñas de sección (ÜBER UNS / ARBEITEN / WAS WIR TUN) */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 32px;
}
.sec-label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sec-index {
  font-weight: 700;
  font-size: clamp(26px, 2.8vw, 38px);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ===== Avatares (se conservan para el modal) ===== */
.avatar {
  display: inline-block;
  border-radius: 50%;
  background-color: var(--panel);
  background-image: url("img/logo.png"), linear-gradient(135deg, #333333, #000000);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.avatar-xs { width: 24px; height: 24px; }
.avatar-sm { width: 34px; height: 34px; }
.avatar-md { width: 44px; height: 44px; }
.avatar-lg { width: 62px; height: 62px; }

/* ============================================================
   PANTALLA DE CARGA — contador gigante (ref. Kühl&Deng)
   Dígitos enormes blancos anclados a la derecha (el último glifo
   se corta en el borde), "Loading n%" pequeño abajo-izquierda del
   número. Al llegar a 808 el número se apaga a gris carbón y el
   telón se desvanece.
   ============================================================ */
/* `instant`: la pantalla de carga se retira sin fundido. Se usa cuando la
   visita vuelve a la portada desde otra página del sitio y el contador se
   salta: con el fundido normal se colaría un parpadeo negro. */
.loader.instant { transition: none; visibility: hidden; opacity: 0; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #333333; /* gris del preloader de la ref */
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease 0.35s, visibility 0s linear 1.1s;
}
/* Textura de fondo (calcada del loader de cipher.tv): retícula de puntos
   de 12px donde dos campos de ruido fbm dibujan curvas de nivel en
   movimiento con parpadeo de dithering; hueco de exclusión al centro. */
.loader-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.loader-stack {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.loader-num {
  font-weight: 400;
  font-size: min(62vh, 44vw);
  line-height: 0.78;
  letter-spacing: -0.01em;
  color: var(--varden);
  white-space: nowrap;
  transform: translateX(0.06em); /* el borde derecho recorta el último dígito */
  transform-origin: 100% 50%;
  /* 0.45 s: el estirón ARRANCA en el kick (3217 ms) y cabe entero antes de
     que el telón empiece a desvanecerse, que es 0.35 s después de caer. */
  transition: color 0.5s ease, transform 0.45s cubic-bezier(0.7, 0, 0.2, 1);
  font-variant-numeric: tabular-nums;
}
/* Crédito de autoría: centrado al pie de la pantalla de carga, en el mismo
   tono que el contador y un punto por debajo suyo en peso. Entra cuando la
   figura ya se dibujó, para no competir con ella. */
.loader-credit {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 3.2vh, 32px);
  transform: translateX(-50%);
  margin: 0;
  max-width: 88vw;
  text-align: center;
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.05vw, 11px);
  letter-spacing: 0.07em;
  line-height: 1.5;
  color: var(--varden);
  opacity: 0;
  animation: loaderCredit 0.9s ease 1.35s forwards;
}
@keyframes loaderCredit {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 0.7; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .loader-credit { animation: none; opacity: 0.7; }
}

/* Líneas que se van extendiendo con el progreso (ref. Kühl&Deng) */
.loader-line {
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
  will-change: transform;
}
.loader-line-v {
  left: 55%;
  top: 0;
  width: 1px;
  height: 68%;
  transform: scaleY(0);
  transform-origin: top;
}
.loader-line-h {
  left: 6%;
  bottom: 14%;
  width: 40%;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
}
/* Figura de contorno a la izquierda (ref. captura): un blob facetado
   se dibuja solo, dentro emergen los dígitos 8·0·8 y una vela
   triangular; luego toda la figura flota con una inclinación suave */
.loader-fig {
  position: absolute;
  left: 3vw;
  top: 50%;
  width: min(29vw, 56vh);
  transform: translateY(-50%);
  perspective: 900px;
  pointer-events: none;
}
.loader-fig svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  will-change: transform;
  /* vaivén 3D continuo como el logomontage del museo: el bloque
     rota lentamente en perspectiva mientras deriva */
  animation: figMove 9s ease-in-out infinite;
  transform: rotateZ(-4deg) rotateY(-16deg) rotateX(6deg);
}
.loader-fig .fig-ring {
  fill: none;
  stroke: var(--varden);
  stroke-width: 4;
  stroke-linejoin: miter;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: figDraw 1.6s cubic-bezier(0.6, 0, 0.2, 1) 0.15s forwards;
}
.loader-fig .fig-sail {
  fill: none;
  stroke: var(--varden);
  stroke-width: 3;
  stroke-linejoin: miter;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: figDraw 1s cubic-bezier(0.6, 0, 0.2, 1) 0.75s forwards;
}
.loader-fig .fig-sail-2 { animation-delay: 1.05s; }
.loader-fig .fig-digit {
  fill: var(--varden);
  font: 500 172px/1 var(--font-sans, "Inter Tight"), sans-serif;
  text-anchor: middle;
  opacity: 0;
  animation: figDigit 0.55s ease forwards;
}
.loader-fig .fig-digit:nth-of-type(1) { animation-delay: 0.9s; }
.loader-fig .fig-digit:nth-of-type(2) { animation-delay: 1.15s; }
.loader-fig .fig-digit:nth-of-type(3) { animation-delay: 1.4s; }
@keyframes figDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes figDigit {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes figMove {
  0%   { transform: rotateZ(-4deg) rotateY(-16deg) rotateX(6deg) translateY(0); }
  50%  { transform: rotateZ(-1.5deg) rotateY(15deg) rotateX(-6deg) translateY(-14px); }
  100% { transform: rotateZ(-4deg) rotateY(-16deg) rotateX(6deg) translateY(0); }
}
@media (max-width: 760px) {
  .loader-fig {
    left: 6vw;
    top: 6vh;
    width: 56vw;
    transform: none;
  }
}
/* Al llegar a 808: el número se estira (warp a lo alto y ancho) y se apaga */
/* El apagado del número va con `done`, al aparecer el 808; el ESTIRÓN va
   aparte, con `warp`, porque lo dispara el kick del redoble medio segundo
   después. Antes iban juntos y el warp se adelantaba al golpe. */
.loader.done .loader-num { color: #555555; }
.loader.warp .loader-num { transform: translateX(0.06em) scale(1.14, 1.85); }
.loader.done .loader-line { opacity: 0; transition: opacity 0.4s ease; }
.loader.done .loader-fig { opacity: 0; transition: opacity 0.4s ease; }
.loader.hide { opacity: 0; visibility: hidden; }

/* ============================================================
   CURSOR PUNTO BLANCO (ref. Kühl&Deng)
   ============================================================ */
.cursor-dot {
  position: fixed;
  left: 0;
  top: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  z-index: 1200;
  pointer-events: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: width 0.25s ease, height 0.25s ease, opacity 0.3s ease;
  opacity: 0;
}
.cursor-dot.on { opacity: 1; }
.cursor-dot.big { width: 34px; height: 34px; }
@media (pointer: fine) {
  body.dot-cursor, body.dot-cursor a, body.dot-cursor button,
  body.dot-cursor input, body.dot-cursor textarea, body.dot-cursor label { cursor: none; }
}

/* ============================================================
   NAVBAR — barra negra plana con hairline (ref.)
   ============================================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 0 26px;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}
.nav-left { display: flex; align-items: center; gap: 36px; }
.nav-left a {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--white);
  text-decoration: none;
  transition: opacity 0.2s;
}
.nav-left a:hover { opacity: 0.55; }
.nav-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-decoration: none;
  color: var(--white);
}
.nav-name {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
  line-height: 1;
}
.nav-contact {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--white);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.2s;
}
.nav-contact:hover { opacity: 0.55; }
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  color: var(--dark-gray);
}
.lang-toggle button {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: none;
  border: none;
  color: var(--gray);
  cursor: pointer;
  padding: 3px 4px;
  transition: color 0.2s;
}
.lang-toggle button:hover,
.lang-toggle button.active { color: var(--white); }
.lt-sep { user-select: none; }
.nav-dots { display: none; }

/* ============================================================
   HERO — texto izq, display de tarjetas der + coordenadas (ref.)
   ============================================================ */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: 0 40px;
  /* Sección compacta, como las demás: sin 100vh ni aire muerto */
  padding: 86px 44px 40px;
  overflow: hidden;
}
.hero-head {
  grid-column: 1 / -1;
  align-self: start;
  margin-bottom: 40px;
}
.hero-head,
.hero-left,
.hero-right { position: relative; z-index: 1; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 34px;
}
.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2ec06a; /* verde "disponible" */
  box-shadow: 0 0 0 4px rgba(46, 192, 106, 0.3);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(46, 192, 106, 0.35); }
  50% { box-shadow: 0 0 0 7px rgba(46, 192, 106, 0.14); }
}
/* Titular: "Let's set it in motion" a lo ancho (rebasa su columna y pasa
   por encima del vórtice). Revelado por LETRAS enmascaradas con cascada
   (ref. olhalazarieva.com): cada letra sube a su sitio con retardo propio. */
.hero h1 {
  font-size: clamp(52px, 7.8vw, 116px);
  line-height: 1;
  letter-spacing: -0.04em;
  width: 164%;
  max-width: none;
  position: relative;
  z-index: 230;
  transform-origin: 0% 50%; /* el crecimiento 0.4→1 de la ref. ancla a la izq. */
}
.ht-line { display: block; }
.ht-l2, .ht-l3 { margin-left: 0.85em; }
.ht-inner { display: block; white-space: nowrap; will-change: transform, filter; }
/* Oculto hasta que cae el telón; la timeline WAAPI (ref. Maloot) lo trae */
body:not(.loaded) .hero h1 { opacity: 0; }
.ht-punct { font-style: normal; }
.ht-c {
  font-style: normal;
  font-size: 0.32em;
  vertical-align: 1.05em;
  margin-left: 0.22em;
}
.hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  max-width: 470px;
  margin-top: 36px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
}
.hero-quote {
  position: relative;
  max-width: 440px;
  margin-top: 30px;
  padding-left: 0;
}
.hero-intro {
  margin-top: 12px;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--dim);
}
.hero-quote .hero-intro:first-child { margin-top: 0; }
.hero-intro strong { font-weight: 500; color: var(--white); }
/* Botón pill de siempre (avatar + "+You" expandible), en vidrio oscuro
   y tipografía de la casa. El anillo prismático orbita el contorno. */
@property --ring-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.btn-message {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--cosmos);
  background:
    linear-gradient(115deg, transparent 30%, rgba(0, 0, 0, 0.05) 39%, transparent 49%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(239, 240, 230, 0.92));
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: none;
  border-radius: 999px;
  padding: 12px 22px 12px 12px;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -10px 18px rgba(0, 0, 0, 0.05),
    0 12px 30px rgba(0, 0, 0, 0.22);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.btn-message:hover {
  transform: scale(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -10px 18px rgba(0, 0, 0, 0.07),
    0 16px 36px rgba(0, 0, 0, 0.3);
}
.btn-message::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 999px;
  padding: 1.4px;
  pointer-events: none;
  background: conic-gradient(from var(--ring-angle),
    rgba(227, 228, 216, 0.3) 0deg,
    #ffffff 10deg, #9a9b90 16deg, #4a4b44 22deg, #cfd0c4 28deg, #e3e4d8 33deg,
    rgba(227, 228, 216, 0.3) 44deg,
    rgba(227, 228, 216, 0.18) 150deg,
    #ffffff 163deg, #8f9087 171deg, #e3e4d8 179deg,
    rgba(227, 228, 216, 0.3) 192deg,
    rgba(227, 228, 216, 0.2) 296deg,
    #cfd0c4 306deg, #ffffff 315deg,
    rgba(227, 228, 216, 0.3) 328deg,
    rgba(227, 228, 216, 0.3) 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: ring-spin 8s linear infinite;
}
@keyframes ring-spin { to { --ring-angle: 360deg; } }
/* Texto cromado: barrido grafito sobre fondo blanco */
.btn-message span[data-i18n="hero.send"] {
  background: linear-gradient(100deg,
    #1c1d18 0%, #6b6c62 14%, #000000 26%, #75766c 40%,
    #26271f 52%, #8a8b80 66%, #33342c 80%, #1c1d18 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: chrome-sweep 7s linear infinite;
}
@keyframes chrome-sweep { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) {
  .btn-message::before,
  .btn-message span[data-i18n="hero.send"] { animation: none; }
}
/* "+ You" se expande al pasar el cursor */
.btn-you {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--cosmos);
  font-weight: 500;
  transition: max-width 0.45s var(--ease-out), opacity 0.3s ease, margin-right 0.45s var(--ease-out);
}
.btn-you .plus { font-size: 16px; line-height: 1; }
.btn-you i {
  font-style: normal;
  background: var(--cosmos);
  color: var(--varden);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 999px;
}
.btn-message:hover .btn-you {
  max-width: 90px;
  opacity: 1;
}

/* Display derecho: vórtice de tarjetas + coordenadas (ref.) */
.hero-right { position: relative; }
.hero-stack { position: relative; height: 560px; }
.stack-card {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 8px;
  /* recorta el barrido de brillo y el velo del fogonazo a la esquina redonda */
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  transition: opacity 0.9s ease;
  will-change: transform;
  /* capturas de los proyectos (el JS pone la URL); el degradado queda de respaldo */
  background-size: cover;
  background-position: center;
}
.sc-1 { background: linear-gradient(140deg, #3a3a3a, #1c1c1c 55%, #000000); width: 140px; height: 175px; }
.sc-2 { background: linear-gradient(150deg, #ffffff, #eff0e6 60%, #c2c3b4); width: 130px; height: 163px; }
.sc-3 { background: linear-gradient(135deg, #2e2e2e, #161616 45%, #000000); width: 148px; height: 185px; }
.sc-4 { background: linear-gradient(140deg, #d7d8cd, #b9bab0 60%, #8f9087); width: 118px; height: 148px; }
.sc-5 { background: linear-gradient(150deg, #333333, #222222 60%, #0c0c0c); width: 120px; height: 150px; }
.sc-6 { background: linear-gradient(135deg, #55564e, #3a3b34 60%, #1d1e18); width: 114px; height: 143px; }
.sc-7 { background: linear-gradient(145deg, #262626, #101010 60%, #000000); width: 138px; height: 173px; }
.sc-8 { background: linear-gradient(140deg, #eff0e6, #e3e4d8 60%, #b9baac); width: 110px; height: 138px; }
.sc-9 { background: linear-gradient(150deg, #fbfbf4, #e9eadd 60%, #c2c3b4); width: 108px; height: 135px; }
.sc-10 { background: linear-gradient(155deg, #2b2b2b, #1a1a1a 60%, #050505); width: 128px; height: 160px; }
.sc-11 { background: linear-gradient(140deg, #6a6b62, #4a4b44 60%, #26261f); width: 115px; height: 144px; }
body.loaded .stack-card { opacity: 1; }

/* --- La baraja: mientras el vórtice está sin repartir, la pila entera es
   el botón. Se levanta un pelo al pasar el cursor, como una mano que va a
   tomar las cartas. `is-ready` llega cuando ya se abrió el abanico. --- */
/* La pila se pulsa SIEMPRE: cerrada para abrirla, y ya en marcha para
   recogerla de vuelta en baraja. */
.hero-stack { cursor: pointer; }
/* Sombra suave mientras es mazo: apiladas, la sombra de 0.55 de las tarjetas
   sueltas se acumula y el montón se ve muy oscuro. Al repartir vuelve la de
   siempre, que en movimiento está bien. */
.hero-stack.is-deck .stack-card { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); }
.hero-stack.is-deck:focus-visible { outline: 1px solid var(--crimson); outline-offset: 12px; }
/* Al pasar el cursor por el mazo las cartas SÓLO crecen un pelo —no se
   mueven de sitio— y les cruza un brillo. El crecimiento lo aplica el JS
   dentro de la propia pose (ver `hoverK`): con la propiedad `scale` del CSS
   el aumento se comía también los desplazamientos del abanico y las cartas
   se abrían unos pixeles de más. */
.hero-stack.is-ready:hover .stack-card,
.hero-stack.is-ready:focus-visible .stack-card { filter: brightness(1.06); }
/* Barrido de brillo: cruza la carta una vez por cada vez que entra el cursor */
.stack-card::after {
  content: "";
  position: absolute;
  inset: -40% -30%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%,
              rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 58%);
  opacity: 0;
  pointer-events: none;
}
.hero-stack.is-ready:hover .stack-card::after,
.hero-stack.is-ready:focus-visible .stack-card::after {
  animation: card-gloss 0.85s ease forwards;
}
@keyframes card-gloss {
  from { opacity: 0; transform: translateX(-75%); }
  22% { opacity: 1; }
  to { opacity: 0; transform: translateX(75%); }
}
/* Velo del fogonazo: titila mientras la baraja está cerrada en círculo y
   remata con un destello justo cuando las cartas se proyectan a su órbita */
.stack-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.hero-stack.is-charging .stack-card::before {
  animation: card-charge 700ms ease-in-out both;
}
@keyframes card-charge {
  0% { opacity: 0; }
  12% { opacity: 0.28; }
  24% { opacity: 0; }
  40% { opacity: 0.4; }
  52% { opacity: 0; }
  66% { opacity: 0.55; }
  76% { opacity: 0; }
  89% { opacity: 0.88; }   /* el fogonazo, ya con las cartas saliendo */
  100% { opacity: 0; }
}
/* Aviso de que la baraja se pulsa. Se va al abrirla y vuelve al recogerla.
   Va ABSOLUTO dentro de la columna, justo debajo de las cartas: en el flujo
   —aunque fuera con margen negativo— cambiaba el alto de la columna y la
   rejilla del hero recentraba todo, dejando el cúmulo de tarjetas corrido
   hacia abajo. La pila mide 560 px y el mazo va centrado en ella, así que el
   aviso se cuelga del centro + el medio alto de una carta. */
.stack-hint {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + 105px);
  margin: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.hero-stack.is-ready ~ .stack-hint { opacity: 1; }
.stack-hint.gone { opacity: 0; pointer-events: none; }


/* ============================================================
   BANNER MARQUEE (ref. pxpush.com "● PX PUSH ●") — dos reglas
   horizontales que se extienden, el texto gigante entra deslizándose
   desde la derecha y, al dejar la sección atrás, todo el banner se
   desvanece con blur de 20px (effect__fadeout de la referencia).
   ============================================================ */
.giant-marquee {
  padding: 26px 0 0;
  overflow: hidden;
}
.gm-rule {
  height: 2px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
.gm-clip { overflow: hidden; }
.gm-track {
  display: flex;
  align-items: center;
  width: max-content;
  padding: 0.04em 0;
  font-weight: 500;
  font-size: clamp(80px, 10.5vw, 156px);
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-transform: uppercase;
  white-space: nowrap;
  animation: gm-scroll 30s linear infinite;
}
/* El deslizamiento de entrada (JS) se suma al marquee continuo aquí */
.gm-slide {
  display: flex;
  width: max-content;
  transform: translateX(var(--slide, 0px));
  will-change: transform;
}
.gm-track .gm-dot {
  font-size: 0.36em;
  padding: 0 0.55em;
  font-style: normal;
}
@keyframes gm-scroll { to { transform: translateX(-50%); } }
.gm-ticker {
  margin-top: 18px;
  padding: 11px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
/* Ticker a BRINCOS (medido en kuehlunddeng.ch: salta ~56px exactos cada
   ~450ms, sin easing, hacia la derecha). El JS mide el ancho real y fija
   animation: steps(N) reverse para calcar ese tic discreto. */
.gmt-track {
  display: flex;
  gap: 74px;
  width: max-content;
  animation: gm-scroll 38s steps(84) infinite reverse;
}
.gmt-track span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  color: var(--white);
  white-space: nowrap;
}
.gmt-track span:nth-child(even) { color: var(--gray); }
.gmt-track i { font-style: normal; color: var(--gray); }

/* ============================================================
   TRUSTED / LOGO MARQUEE — monocromo sobre negro
   ============================================================ */
.trusted {
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 0;
  padding: 22px 44px 30px;
}
.trusted-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  white-space: nowrap;
}
.trusted-label strong { font-weight: 700; color: var(--white); }
.marquee {
  flex: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  animation: marquee 26s linear infinite;
}
@keyframes marquee { to { transform: translateX(-50%); } }
.brand-logo {
  height: 32px;
  width: auto;
  flex-shrink: 0;
  filter: grayscale(1) invert(1) brightness(1.4);
  opacity: 0.75;
}
.brand-logo.lg { height: 44px; }

/* ============================================================
   PROJECTS
   ============================================================ */
.projects { padding: 52px 44px 36px; }
.projects h2 { position: relative; z-index: 260; }
.projects.work-page { padding-top: 140px; min-height: 70vh; }

/* ===== Página de términos ===== */
.terms-page { padding: 140px 44px 80px; min-height: 70vh; }
.terms-updated { margin-top: 26px; font-size: 13px; letter-spacing: 0.04em; color: var(--gray); }
.terms-body { max-width: 680px; margin-top: 56px; display: flex; flex-direction: column; gap: 38px; }
.terms-block h3 { font-size: 19px; font-weight: 500; letter-spacing: 0; }
.terms-block p { margin-top: 10px; font-family: var(--font-serif); font-size: 16px; line-height: 1.35; letter-spacing: -0.02em; color: var(--dim); }

.project-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 42px;
}
.project-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3.05;
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
}
.pc-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s var(--ease-out);
}
.project-card:hover .pc-img { transform: scale(1.05); }
.project-card::after {
  content: "";
  position: absolute;
  inset: 55% 0 0 0;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
  z-index: 1;
}
.img-a { background: linear-gradient(135deg, #3c3c3c, #1c1c1c 50%, #000000); }
.img-b { background: linear-gradient(140deg, #ffffff, #e9eadd 55%, #b6b7a8); }
.img-c { background: linear-gradient(140deg, #cfd0c4, #a7a89a 55%, #6f7064); }
.img-d { background: linear-gradient(140deg, #2a2a2a, #000000 55%, #444444); }
.img-e { background: linear-gradient(140deg, #4a4a4a, #262626 55%, #666666); }
.img-f { background: linear-gradient(140deg, #b9bab0, #8f9086 55%, #565750); }
.img-g { background: linear-gradient(140deg, #333333, #111111 55%, #000000); }
.img-h { background: linear-gradient(140deg, #f4f5ea, #d9dacb 55%, #97988a); }
.pc-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 6px 13px;
  /* la píldora crece con la etiqueta: "dirección creativa" no debe partirse */
  white-space: nowrap;
}
.pc-title {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 2;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0;
}
.pc-view {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: #ffffff;
  opacity: 0.85;
}
.project-card:hover .pc-view { opacity: 1; }
.project-card.extra { display: none; }
.project-grid.expanded .project-card.extra { display: block; }

.view-all {
  display: flex;
  align-items: center;
  margin: 48px auto 0;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--white);
  background: none;
  border: none;
  border-bottom: 1px solid var(--white);
  padding-bottom: 4px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.view-all:hover { opacity: 0.55; }
.view-all .arr { font-size: 14px; transition: transform 0.3s var(--ease-out); }
.view-all:hover .arr { transform: translate(3px, -3px); }

/* ============================================================
   HILERA DE VINILOS (Latest Projects) — intacta, solo sombras
   más profundas para el fondo negro
   ============================================================ */
.vinyl-crate {
  position: relative;
  margin-top: 34px;
  height: clamp(540px, 82vh, 760px);
}
.crate-stage {
  position: absolute;
  inset: 0;
  perspective: 1500px;
  perspective-origin: 50% 42%;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
.crate-stage.dragging { cursor: grabbing; }
.vinyl-crate .project-card {
  position: absolute;
  left: 50%;
  top: 54%;
  width: min(560px, 62vw);
  aspect-ratio: 1 / 1;
  border-radius: 26px;
  overflow: visible;
  will-change: transform, opacity;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.vinyl-crate .pc-img { border-radius: 26px; }
.vinyl-crate .project-card::after { border-radius: 0 0 26px 26px; }
.vinyl-crate .project-card:hover .pc-img { transform: none; }
.vinyl-crate .project-card.focused { cursor: pointer; }
/* Aviso de arrastre: va AL COSTADO de las fundas y a su misma altura, no
   debajo. El texto queda horizontal —se lee de corrido— y las flechas, una
   encima y otra debajo, son las que indican el eje del gesto. */
.crate-hint {
  position: absolute;
  top: 54%;                         /* el mismo eje que las fundas */
  left: calc(50% + min(560px, 62vw) / 2 + clamp(20px, 3.4vw, 56px));
  transform: translateY(-50%);
  z-index: 300;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 9px;
  width: max-content;
  max-width: 15ch;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
}
.crate-hint .ch-arrow { font-size: 13px; line-height: 1; }
/* En pantallas angostas no queda hueco al costado: pasa DEBAJO de las fundas,
   centrado y con las flechas a los lados. Sigue absoluto —el aviso vive
   dentro del cajón y las fundas no ocupan flujo, así que en estático se le
   subiría hasta arriba del todo. */
@media (max-width: 1100px) {
  .crate-hint {
    /* 0.66 y no la mitad: la funda del frente va ESCALADA por la pose 3D,
       así que su borde de abajo cae más lejos de lo que dice su ancho */
    top: calc(54% + min(560px, 62vw) * 0.66 + 28px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: none;
  }
}

/* ============================================================
   SERVICES — filas numeradas + tarjetas al cursor (ref. WAS WIR TUN)
   ============================================================ */
.services { padding: 52px 44px; }
.services-left { max-width: 620px; margin-bottom: 46px; }
.toolbox-label {
  margin-top: 54px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
}
.toolbox { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tool {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 8px;
}
.tool::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  background: var(--varden);
  color: var(--cosmos);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 6px 11px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s var(--ease-out);
  z-index: 6;
}
.tool:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.tool i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--hairline);
  color: var(--white);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}

.services-rows { position: relative; border-top: 1px solid var(--hairline); }
.svc-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 46px;
  padding: 32px 10px;
  border-bottom: 1px solid var(--hairline);
}
.svc-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gray);
  width: 46px;
  flex-shrink: 0;
}
.svc-name {
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: transform 0.4s var(--ease-out), color 0.3s;
}
.svc-row:hover .svc-name { transform: translateX(14px); }

/* Tarjetas que brotan siguiendo al cursor sobre las filas: cada fila muestra
   el encuadre "Tarjeta" del trabajo que ejemplifica ese servicio */
.trail-card {
  position: fixed;
  z-index: 95;
  width: 150px;
  height: 190px;
  border-radius: 6px;
  background: #1c1c1c center / cover no-repeat;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -55%) scale(0.55) rotate(var(--r, 0deg));
  transition: transform 0.45s var(--ease-out), opacity 0.35s ease;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  will-change: transform, opacity;
}
.trail-card.show {
  opacity: 1;
  transform: translate(-50%, -55%) scale(1) rotate(var(--r, 0deg));
}
.trail-card.die {
  opacity: 0;
  transform: translate(-50%, -40%) scale(0.85) rotate(var(--r, 0deg));
}

/* ============================================================
   ABOUT
   ============================================================ */
.about { padding: 52px 44px; }
.about-cols {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 70px;
  margin-top: 42px;
}
.about-photo {
  position: relative;
  width: 100%;
  max-width: 368px;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  background: url("img/profile.jpg") center / cover no-repeat, linear-gradient(160deg, #2a2a2a, #0c0c0c);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.26);
  /* Sigue apenas al mouse (JS, con lerp propio — sin transition para que fluya) */
  will-change: transform;
}
.about-socials {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  gap: 8px;
}
.about-socials a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  transition: transform 0.25s var(--ease-out);
}
.about-socials a:hover { transform: scale(1.12); }
.about-name {
  margin-top: 26px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.about-role {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray);
}
.about-right { display: flex; flex-direction: column; gap: 26px; padding-top: 6px; }
.about-right .lead { font-family: var(--font-serif); font-size: 20px; font-weight: 400; line-height: 1.2; letter-spacing: -0.03em; color: var(--white); }
.about-right .body-copy { font-family: var(--font-serif); font-size: 17px; line-height: 1.35; letter-spacing: -0.03em; color: var(--dim); }

/* ============================================================
   FAQ — lista con hairlines (sin vidrio)
   ============================================================ */
.faq { padding: 52px 44px; }
.faq-cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 60px;
  margin-top: 42px;
  align-items: start;
}
.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-q {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  font-family: var(--font-serif);
  font-size: 18px;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--white);
  text-align: left;
  background: none;
  border: none;
  padding: 22px 4px;
  cursor: pointer;
}
.faq-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gray);
  width: 36px;
  flex-shrink: 0;
  opacity: 1;
  transition: opacity 0.35s, width 0.35s var(--ease-out);
}
.faq-item.open .faq-num { opacity: 0; width: 0; }
.faq-text { flex: 1; }
.faq-icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  background: var(--white);
  transition: transform 0.35s var(--ease-out), opacity 0.3s;
}
.faq-icon::before { top: 6px; left: 0; width: 14px; height: 1.5px; }
.faq-icon::after { top: 0; left: 6.25px; width: 1.5px; height: 14px; }
.faq-item.open .faq-icon::after { transform: scaleY(0); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease-out);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 4px;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--dim);
  transition: padding 0.4s var(--ease-out);
}
.faq-item.open .faq-a-inner { padding: 2px 4px 34px; }

.faq-card {
  position: sticky;
  top: 100px;
  background: linear-gradient(155deg, #1c1c1c, var(--cosmos) 70%);
  --white: #ffffff;
  --faint: rgba(255, 255, 255, 0.55);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  padding: 30px;
}
.faq-card h3 {
  margin-top: 22px;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.faq-card p { margin-top: 16px; font-family: var(--font-serif); font-size: 15px; line-height: 1.35; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.82); }
.btn-email {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--cosmos);
  background: #ffffff;
  font-family: var(--font-serif);
  border: none;
  border-radius: 999px;
  padding: 13px 22px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.25s, transform 0.3s var(--ease-out);
}
.btn-email:hover { transform: scale(1.04); }

/* ============================================================
   FRASE TECNOLÓGICA (ref.: revelado por letras al scroll)
   ============================================================ */
.tech { padding: 56px 44px 56px; }
.tech-phrase {
  font-weight: 700;
  font-size: clamp(44px, 6vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  max-width: 20ch;
}
.tech-mark {
  margin-top: 40px;
  font-weight: 700;
  font-size: clamp(90px, 14vw, 220px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-align: center;
}

/* ============================================================
   FOOTER (ref.: email gigante, columnas, reloj, wordmark)
   ============================================================ */
/* Footer beige como en la ref (cierra la secuencia beige→negro→gris→beige) */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--hairline);
  overflow: hidden;
}
.footer-inner {
  max-width: var(--col-w);
  margin: 0 auto;
  padding: 52px 44px 0;
  position: relative;
}
.footer h2 { color: var(--white); }
.footer h2 .muted { color: var(--faint); }
.footer-contact {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 42px;
}
.f-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
}
.f-email {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 46px);
  letter-spacing: -0.03em;
  color: var(--white);
  text-decoration: none;
  border-bottom: 2px solid var(--white);
  padding-bottom: 4px;
}
.f-email:hover { opacity: 0.6; }
.f-icons { display: flex; gap: 8px; margin-top: 12px; }
.f-icons a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.3);
  color: var(--white);
  transition: transform 0.25s var(--ease-out), background 0.25s, color 0.25s;
}
.f-icons a:hover { transform: scale(1.12); background: var(--cosmos); color: var(--varden); }
.f-rule { border: none; height: 1px; background: var(--hairline); margin-top: 26px; }
.footer-meta {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 0.03em;
}
.f-muted { color: var(--gray); }
.footer-meta .f-links { display: flex; gap: 22px; flex: 1; }
.footer-meta a { color: var(--white); font-weight: 400; text-decoration: none; }
.footer-meta a:hover { opacity: 0.6; }
.footer-meta .f-muted:last-child { margin-left: auto; }
.footer-credit {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--gray);
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  font-size: 12px;
  letter-spacing: 0.05em;
}
.f-clock { font-family: var(--font-mono); color: var(--white); text-transform: uppercase; }
.f-clock .f-city { color: var(--gray); }
.back-top {
  font-family: inherit;
  font-size: 13px;
  color: var(--white);
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
.back-top:hover { opacity: 0.55; }

/* Rotador del footer (se conserva, tipografía de la casa) */
.rotator {
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  padding: 0 0.06em;
  transition: opacity 0.45s ease, filter 0.45s ease, transform 0.45s var(--ease-out);
}
.rotator.swap {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(12px);
}

/* Wordmark gigante con ECO (ref. pxpush.com): tres copias del nombre
   apiladas hacia arriba, cada una recortada con clip-path (solo asoma
   su franja superior) y con fondo opaco para tapar a la de atrás.
   Suben con el scroll: translateY(progress × index × −22%). */
.giant {
  position: relative;
  /* Letras completas apoyadas en el borde: caja = altura de mayúsculas
     (0.697em en Hanken) con un pelo de aire para el antialias. */
  height: 0.72em;
  font-weight: 700;
  /* El wordmark "808CHOA©" mide 5.03em (medido en la fuente, wght 700,
     tracking −0.035em): el tamaño se deriva del ancho disponible para que
     nunca se corte a los lados (contenedor: 100vw−88px, tope 1152px). */
  font-size: min(calc((100vw - 88px) / 5.1), 225px);
  letter-spacing: -0.035em;
  line-height: 1;
  margin-top: 14px;
  overflow: hidden;
  text-align: center;
}
.giant span {
  position: absolute;
  /* baseline exacta en el borde inferior de la página: el descent completo
     (0.303em) queda fuera; así las mayúsculas se ven ENTERAS apoyadas en el
     borde (antes −0.151em: recortaba 0.15em de la parte alta). */
  bottom: -0.303em;
  left: 50%;
  transform: translateX(-50%);
  color: var(--white);
  white-space: nowrap;
}

/* ============================================================
   RESTOS DE LA ERA ANTERIOR — neutralizados
   ============================================================ */
.bottom-blur { display: none; }

/* ============================================================
   BOTÓN FLOTANTE — círculo blanco minimal
   ============================================================ */
.fab {
  position: fixed;
  right: 26px;
  bottom: 26px;
  transform: translateY(90px);
  z-index: 180;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--crimson);
  color: var(--varden);
  border: none;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.4s;
}
.fab.show { transform: translateY(0); opacity: 1; }
.fab:hover { transform: translateY(0) scale(1.08); }

/* ============================================================
   MODAL DE CONTACTO — oscuro
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.modal-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96) translateY(14px);
  width: min(530px, calc(100vw - 40px));
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  background: var(--varden);
  border-radius: 8px;
  border: 1px solid var(--hairline);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  padding: 34px 36px 30px;
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.55s var(--ease-out);
}
.modal.open { pointer-events: auto; }
.modal.open .modal-backdrop { opacity: 1; }
.modal.open .modal-card {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) translateY(0);
}
.modal-close {
  position: absolute;
  top: 20px;
  right: 22px;
  background: none;
  border: none;
  color: var(--white);
  cursor: pointer;
  padding: 4px;
  transition: transform 0.3s var(--ease-out);
}
.modal-close:hover { transform: rotate(90deg); }
.modal-card h3 { font-size: 26px; font-weight: 400; letter-spacing: 0.01em; }
.modal-sub { margin-top: 6px; font-size: 14px; color: var(--dim); }
.modal-owner { display: flex; align-items: center; gap: 12px; margin: 22px 0 6px; }
.mo-name { font-size: 14px; font-weight: 500; }
.mo-mail { font-size: 12px; color: var(--gray); }
#contactForm label {
  display: block;
  margin-top: 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
}
#contactForm .req { font-weight: 400; color: var(--gray); text-transform: none; letter-spacing: 0; }
#contactForm input,
#contactForm textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  font-family: inherit;
  font-size: 15px;
  color: var(--white);
  background: #ffffff;
  border: 1px solid #c9cabd;
  border-radius: 4px;
  padding: 12px 14px;
  outline: none;
  resize: vertical;
  transition: border-color 0.25s, background 0.25s;
}
#contactForm input:focus,
#contactForm textarea:focus { border-color: var(--cosmos); background: #ffffff; }
#contactForm input::placeholder { color: #9a9b90; }
.btn-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 26px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--varden);
  background: var(--crimson);
  border: none;
  border-radius: 4px;
  padding: 15px;
  cursor: pointer;
  transition: transform 0.3s var(--ease-out), opacity 0.3s;
}
.btn-submit:hover { transform: scale(1.015); }
.btn-submit.sent { background: var(--gochujang); color: var(--varden); }
.btn-submit.sent svg { display: none; }
/* el envío falló: no se finge que salió, se ofrece el correo directo */
.btn-submit.failed { background: #7c2d12; color: var(--varden); font-size: 12px; }
.btn-submit.failed svg { display: none; }
.btn-submit:disabled { opacity: 0.75; cursor: progress; }

/* ============================================================
   ANIMACIONES DE REVELADO
   ============================================================ */
.reveal {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.reveal.in {
  opacity: 1;
  transition-delay: var(--d, 0ms);
}

/* Los textos del hero no se abren hasta que cae el telón de carga */
body:not(.loaded) .hero .reveal { opacity: 0; }

/* Títulos por líneas enmascaradas (calcado de Maloot: SplitText con
   mask:"lines" — y:100% → 0, dur 0.9, expo.out, stagger 0.08/línea).
   Máscaras por PALABRA con padding compensado para no recortar
   ascendentes/descendentes con line-height 1. */
[data-split] .lm {
  display: inline-block;
  /* clip-path en vez de overflow: recorta sin tocar la línea base ni el
     layout; el inset negativo deja respirar ascendentes y descendentes */
  clip-path: inset(-0.14em -0.08em -0.18em);
}
[data-split] .lm-i {
  display: inline-block;
  transform: translateY(140%);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); /* expo.out */
  will-change: transform;
}
[data-split].in .lm-i { transform: translateY(0); }

/* Párrafos por líneas enmascaradas (ref.: y:100% → 0, dur 0.7,
   power4.out, stagger repartido en 0.2s — sin fundido) */
[data-lines] .line { display: block; overflow: clip; }
[data-lines] .line-i {
  display: block;
  transform: translateY(115%);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); /* power4.out */
  will-change: transform;
}
[data-lines].lines-in .line-i { transform: translateY(0); }

/* Párrafos con SCRUB por palabras (ref. pxpush: el texto se va
   "encendiendo" palabra a palabra conforme avanza el scroll, en
   ambas direcciones). El JS reparte la opacidad por índice. */
[data-scrub] .sw {
  opacity: 0.12;
  will-change: opacity;
}

/* Textitos mono que aparecen palabra por palabra en orden ALEATORIO
   (effect__titlerandom de la referencia): sin fundido, a saltos secos. */
.rand-split .rw {
  visibility: hidden;
}
.rand-split .rw.on { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transition: none; }
  [data-split] .lm-i, [data-lines] .line-i { transform: none; transition: none; }
  body:not(.loaded) .hero h1 { opacity: 1; }
  .gm-track, .gmt-track { animation: none; }
  [data-scrub] .sw { opacity: 1; }
  .rand-split .rw { visibility: visible; }
  .gm-rule { transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding-top: 120px; min-height: 0; }
  .hero h1 { width: 100%; font-size: clamp(44px, 9.6vw, 72px); }
  .ht-l2, .ht-l3 { margin-left: 0.4em; }
  .hero-stack { height: 460px; }
  .about-cols, .faq-cols { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: 1fr; }
  .vinyl-crate { height: clamp(440px, 62vh, 600px); }
  .vinyl-crate .project-card { width: min(430px, 80vw); }
  .faq-card { position: static; }
  .trail-card { display: none; }
}
@media (max-width: 600px) {
  .hero, .projects, .services, .about, .faq, .tech { padding-left: 22px; padding-right: 22px; }
  .trusted { padding-left: 22px; padding-right: 22px; }
  .footer-inner { padding-left: 22px; padding-right: 22px; }
  .footer-contact { flex-direction: column; align-items: flex-start; gap: 30px; }
  .footer-meta { flex-wrap: wrap; }
}

/* ============================================================
   MÓVIL — encuadre de portada, intro y banners
   En pantalla estrecha la barra fija tapaba la cabecera de la animación,
   el intro quedaba muy abajo, el vórtice se salía por los lados y los dos
   banners competían por un ancho que no tienen. Se corrige aquí junto.
   ============================================================ */
@media (max-width: 760px) {
  /* La barra se reparte en dos grupos y deja libre el centro para la marca:
     con Inicio, Work y EN/ES juntos a la izquierda se encimaban con ella.
     `display: contents` disuelve el grupo izquierdo para poder reordenar sus
     piezas una por una, y Work se va a la derecha a hacerle compañía a
     Contacto. */
  .navbar { padding: 0 16px; gap: 12px; justify-content: flex-start; }
  .nav-left { display: contents; }
  .nav-left a[href="index.html"] { order: 1; }
  .lang-toggle { order: 2; }
  .nav-left a[href="work.html"] { order: 3; margin-left: auto; }
  .nav-contact { order: 4; }
  .nav-left a { font-size: 14px; }
  .nav-contact { font-size: 14px; }
  .nav-name { font-size: 15px; }

  /* la animación de portada baja para no quedar cortada bajo la barra */
  .front-slide { margin-top: 50px; }

  /* el intro sube: sobraba más de un centímetro de aire muerto */
  .hero { padding-top: 54px; }

  /* el vórtice se despega de "Send me a message" y se encoge para no
     salirse de la pantalla mientras gira */
  .hero-right { margin-top: 48px; }
  /* 0.64 sale de medir el vuelo completo del anillo (441px de punta a punta
     a escala 0.8): es lo que hace falta para que ninguna tarjeta se salga
     de los 375px de pantalla en ningún momento del ciclo. */
  .hero-stack { height: 320px; transform: scale(0.64); transform-origin: center; }

  /* el banner gigante tenía un cuerpo mínimo de 80px que no cabía */
  .gm-track { font-size: clamp(38px, 13vw, 80px); }
  .giant-marquee { padding-top: 18px; }
  .gm-ticker { margin-top: 12px; }

  /* "Trusted by many": rótulo arriba y logos a todo el ancho, en vez de
     los dos apretados en la misma línea */
  .trusted {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 26px 22px 30px;
  }
  .marquee { flex: none; width: 100%; }
  .marquee-track { gap: 46px; }
  .brand-logo { height: 26px; }
}

/* ============================================================
   WORKS — carpetas por categoría (ref. wildyriftian.com/works)
   Las carpetas se apilan de borde a borde SIN separación: cada
   fila toca a la anterior y la pestaña sobresale hacia arriba
   invadiendo el cuerpo de la fila previa (look de archivero).
   Los anchos de columna alternan (50/50, 44/56) como en la ref.
   Las fotos viven DETRÁS de la carpeta y salen por su boca
   superior al hacer hover, ligeramente giradas, sin fundido.
   ============================================================ */
.works-page h2 { position: relative; z-index: 2; margin-bottom: 56px; }

/* La página de works es una PANTALLA completa: las carpetas quedan al ras
   del borde inferior del viewport (ref.) y, al hacer scroll, toda la capa
   crema se desliza hacia arriba revelando el footer fijo detrás (cortina). */
.projects.works-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-bottom: 0;
}

.folder-grid {
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  margin-left: calc((100% - 100vw) / 2);
  margin-top: auto; /* empuja la pila de carpetas hasta la base de la pantalla */
}

/* Cortina de revelado del footer (work.html): el contenido viaja por encima
   (fondo crema extendido a todo lo ancho con el truco del box-shadow) y el
   footer queda fijo al fondo; un espaciador del alto del footer (JS) da el
   recorrido de scroll. */
body.footer-reveal .col {
  position: relative;
  z-index: 2;
  background: var(--bg);
  box-shadow: 0 0 0 100vmax var(--bg);
  clip-path: inset(0 -100vmax);
}
body.footer-reveal .footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

/* Pieles de carpeta (paleta Robot: negro, blanco, beige oscuro, gris) */
.f-crimson { --f-bg: var(--cosmos); --f-ink: var(--varden); }
.f-varden  { --f-bg: #ffffff; --f-ink: var(--cosmos); }
.f-cosmos  { --f-bg: #d2d3c5; --f-ink: var(--cosmos); }
.f-marble  { --f-bg: var(--marble); --f-ink: #ffffff; }

.folder {
  position: relative;
  display: block;
  width: 50%;
  height: clamp(170px, 18vw, 235px);
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.45s var(--ease-out), filter 0.4s ease, opacity 0.4s ease;
}
/* Anchos alternos por fila, como en la referencia */
.folder:nth-child(3) { width: 44%; }
.folder:nth-child(4) { width: 56%; }
/* Hover (ref.): la carpeta señalada se levanta y conserva su color;
   el resto de la pila se apaga a gris pálido. */
.folder:hover, .folder:focus-visible { z-index: 6; transform: translateY(-14px); }
.folder-grid:hover .folder:not(:hover):not(:focus-visible) {
  filter: grayscale(1) brightness(1.12);
  opacity: 0.45;
}

/* Pestaña con muesca diagonal: sobresale POR ENCIMA de la carpeta,
   montándose sobre el cuerpo de la fila anterior */
.folder-tab {
  position: absolute;
  z-index: 3;
  top: -42px;
  left: 0;
  display: flex;
  align-items: center;
  width: min(48%, 300px);
  height: 42px;
  padding: 0 26px;
  background: var(--f-bg);
  border-radius: 8px 0 0 0;
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 100%, 0 100%);
}
.open-tab {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: min(34%, 240px);
  height: 44px;
  padding: 0 20px;
  background: var(--f-bg);
  border-radius: 10px 0 0 0;
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 100%, 0 100%);
}
.folder-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--f-ink);
}
/* Cuerpo plano de borde a borde (tapa a las fotos en reposo) */
.folder-body {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 40px 20px;
  background: var(--f-bg);
  border-radius: 0 8px 0 0;
}
.folder-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(44px, 4.7vw, 72px);
  line-height: 0.95;
  color: var(--f-ink);
  text-transform: none;
}
/* nombres largos ("producción y dirección creativa"): bajan de cuerpo para
   caber dentro de la carpeta sin que la fila de abajo los recorte */
.folder-title.is-long { font-size: clamp(30px, 3.2vw, 46px); }
.folder-count {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--f-ink);
  opacity: 0.65;
  white-space: nowrap;
  padding-top: 10px;
}
.folder-count i { font-style: normal; }

/* Fotos DETRÁS de la carpeta (ref.: z −1, giradas): en reposo quedan
   ocultas tras el cuerpo; al hover se deslizan hacia arriba y asoman
   por la boca de la carpeta sobre la fila anterior. Sin fundido. */
.folder-peek {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Nada puede asomar por DEBAJO de la carpeta (el borde inferior recorta);
     por arriba sí, para que las fotos salgan por la boca al hover. */
  clip-path: inset(-300% 0 0 0);
}
.peek-card {
  position: absolute;
  top: 10px;
  width: min(27%, 190px);
  aspect-ratio: 4 / 4.2;
  border-radius: 5px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3);
  transform: translateY(0) rotate(0deg);
  transition: transform 0.5s var(--ease-out);
}
.peek-card:nth-child(1) { left: 8%; }
.peek-card:nth-child(2) { left: 34%; transition-delay: 0.05s; }
.peek-card:nth-child(3) { left: 61%; transition-delay: 0.1s; }
.folder:hover .peek-card:nth-child(1), .folder:focus-visible .peek-card:nth-child(1) { transform: translateY(-82%) rotate(-14deg); }
.folder:hover .peek-card:nth-child(2), .folder:focus-visible .peek-card:nth-child(2) { transform: translateY(-96%) rotate(5deg); }
.folder:hover .peek-card:nth-child(3), .folder:focus-visible .peek-card:nth-child(3) { transform: translateY(-78%) rotate(12deg); }

/* ===== Carpeta abierta ===== */
.folder-open { margin-top: 40px; margin-bottom: 70px; }
.folder-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: inherit;
  font-size: 16px;              /* era 12: costaba encontrar la salida */
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  background: none;
  border: none;
  border-bottom: 1px solid var(--hairline);
  padding: 4px 2px 8px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.folder-back:hover { opacity: 0.55; }

.open-panel { position: relative; margin-top: 54px; }
.open-tab { width: min(34%, 240px); }
.open-body {
  position: relative;
  background: var(--f-bg);
  border-radius: 0 12px 12px 12px;
  padding: 30px 34px 46px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.16);
}
.open-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 1px dashed color-mix(in srgb, var(--f-ink) 45%, transparent);
}
.open-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(54px, 6.2vw, 92px);
  line-height: 0.85;
  color: var(--f-ink);
  text-transform: none;
}
.open-head .folder-num { opacity: 0.7; }
.open-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 30px;
}
.open-item { display: block; text-decoration: none; }
.open-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  transition: transform 0.45s var(--ease-out);
}
.open-item:hover .open-thumb { transform: translateY(-7px) rotate(-1.2deg); }
.open-cap {
  display: block;
  margin-top: 11px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--f-ink);
  opacity: 0.82;
}

/* Entrada animada al abrir la carpeta */
.folder-open.enter .open-panel { animation: folder-rise 0.6s var(--ease-out) both; }
@keyframes folder-rise {
  from { opacity: 0; transform: translateY(36px); }
}
.folder-open.enter .open-item {
  animation: work-drop 0.55s var(--ease-out) both;
  animation-delay: calc(0.14s + var(--i) * 0.08s);
}
@keyframes work-drop {
  from { opacity: 0; transform: translateY(28px) rotate(1.6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .folder-open.enter .open-panel, .folder-open.enter .open-item { animation: none; }
  .peek-card { transition: none; }
}

@media (max-width: 860px) {
  .works-page h2 { margin-bottom: 70px; }
  .folder, .folder:nth-child(3), .folder:nth-child(4) { width: 100%; height: clamp(160px, 34vw, 220px); }
  .open-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .open-grid { grid-template-columns: 1fr; }
  .open-body { padding: 22px 20px 32px; }
}

/* Las miniaturas usan capturas reales de los videos (JS pone la URL) */
.peek-card.has-shot, .open-thumb, .more-shot {
  background-size: cover;
  background-position: center;
  background-color: #14140f;
}

/* ===== Ficha del proyecto (ref. gakuyen.com/projects/*) =====
   Se pinta desde PROJECTS (script.js §8b): título grande, cliente/año,
   descripción, alcance, reproductor y proyectos relacionados. */
.proj-view { padding-top: 4px; margin-bottom: 90px; }
.proj-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px 40px;
  margin-top: 44px;
}
.proj-title {
  font-weight: 700;
  font-size: clamp(46px, 7.2vw, 112px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--white);
}
.proj-facts { display: flex; gap: 56px; padding-bottom: 10px; }
.proj-facts p {
  margin-top: 9px;
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
}
.proj-desc {
  margin-top: 34px;
  max-width: 660px;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.45;
  color: var(--dim);
}
/* anotación breve bajo la descripción: trabajo del proyecto que no entra
   en el alcance (p. ej. la dirección fotográfica del José Cuervo Express) */
.proj-note {
  margin-top: 16px;
  max-width: 660px;
  padding-left: 15px;
  border-left: 1px solid var(--hairline);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.45;
  color: var(--dim);
}
/* Enlace al trabajo publicado fuera del sitio */
.proj-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  padding-bottom: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.2s;
}
.proj-link:hover { opacity: 0.6; }

/* Temas publicados del proyecto: píldoras chicas con la marca de la
   plataforma, en la misma familia visual que el alcance del trabajo. */
.proj-tracks {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin-top: 24px;
}
.proj-tracks ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; }
.proj-tracks a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 999px;
  transition: opacity 0.2s, transform 0.2s;
}
.proj-tracks a:hover { opacity: 0.65; transform: translateY(-1px); }
.proj-tracks svg { flex: none; }

.proj-scope {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px 44px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}
.proj-scope ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; }
.proj-scope li {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  padding: 8px 15px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 999px;
}
/* Escenario del video: el marco toma la forma EXACTA del archivo (--ar, que
   sale de las medidas reales del mp4) y se centra. Así un reel vertical no
   arrastra barras negras a los lados ni uno horizontal se queda corto. */
.proj-stage {
  margin: 42px auto 0;
  aspect-ratio: var(--ar-w, 9) / var(--ar-h, 16);
  width: min(100%, calc(min(78vh, 760px) * var(--ar-w, 9) / var(--ar-h, 16)));
  background: #0e0e0c;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.18);
}
.proj-video { display: block; width: 100%; height: 100%; object-fit: contain; }

/* `is-pair`: los dos reproductores del proyecto corren a la par, uno al lado
   del otro y del mismo tamaño (Laurent), en vez de apilarse. Se reparte a dos
   columnas y se le quitan los márgenes verticales que traían por separado. */
.proj-videos.is-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
  margin-top: 42px;
}
.proj-videos.is-pair .proj-stage { margin: 0; width: 100%; }
.proj-videos.is-pair .proj-extra { margin-top: 0; grid-template-columns: 1fr; }
.proj-videos.is-pair .proj-video-sm { width: 100%; }
@media (max-width: 720px) {
  .proj-videos.is-pair { grid-template-columns: 1fr; }
}

/* Reels adicionales del mismo proyecto (p. ej. los dos de Tetragrammaton) */
.proj-extra {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  margin-top: 22px;
}
.proj-extra-item {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
}
/* Igual que el escenario principal: el reel toma su forma real y no se queda
   con relleno negro a los lados dentro de la columna de la retícula. */
.proj-video-sm {
  display: block;
  aspect-ratio: var(--ar-w, 9) / var(--ar-h, 16);
  width: min(100%, calc(62vh * var(--ar-w, 9) / var(--ar-h, 16)));
  background: #0e0e0c;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
}

/* `is-grid`: la ficha no tiene pieza principal y sus reproductores van todos
   en la retícula, con la misma medida (Un Motif). */
.proj-videos.is-grid { margin-top: 64px; }
.proj-videos.is-grid .proj-extra { margin-top: 18px; }

/* Alcance: las capturas de lo que hicieron las piezas ya publicadas. Van
   ANTES de los reproductores y se amplían al pulsarlas, como los frames. */
.proj-proof { margin-top: 42px; }
.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  margin-top: 18px;
  justify-items: center;
}
.proof-item { margin: 0; display: grid; justify-items: center; gap: 10px; }
.proof-shot {
  display: block;
  width: min(100%, calc(70vh * 9 / 16));
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
  cursor: zoom-in;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.proof-shot:hover { transform: translateY(-4px); }
.proof-item figcaption { text-align: center; }

/* Frames del proyecto: los stills elegidos en el Canva */
.proj-frames { margin-top: 64px; }
.frames-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}
.frame-shot {
  display: block;
  flex: 0 1 auto;
  height: clamp(240px, 40vh, 430px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
  cursor: zoom-in;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Frames apaisados (Nantes): con la altura de la retícula, un 16:9 se come la
   fila entera; se miden por ANCHO para que entren de tres en tres (dos en
   pantallas chicas). La clase la pone el JS al cargar cada imagen. */
.frame-shot.is-wide {
  width: calc(33.333% - 10px);
  height: auto;
}
@media (max-width: 900px) {
  .frame-shot.is-wide { width: calc(50% - 7px); }
}
.frame-shot:hover { transform: translateY(-4px); }
/* Clips de proceso: el marco los distingue con un punto vivo en la esquina */
.frame-shot.is-clip { background: #0e0e0c; }
.frames-grid { position: relative; }

/* Visor: still o clip ampliado sobre el resto de la ficha */
.lens {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(10, 10, 9, 0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.lens.open { opacity: 1; pointer-events: auto; }
.lens-body { display: grid; place-items: center; max-width: 100%; max-height: 100%; }
.lens-media {
  display: block;
  max-width: 100%;
  max-height: 86vh;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.lens-close {
  position: absolute;
  top: clamp(10px, 2.5vw, 26px);
  right: clamp(10px, 2.5vw, 26px);
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.lens-close:hover { background: rgba(255, 255, 255, 0.12); }

/* Proyectos relacionados (abajo, como en la referencia) */
.proj-more { margin-top: 96px; }
.proj-more-title {
  font-weight: 700;
  font-size: clamp(30px, 3.8vw, 56px);
  letter-spacing: -0.035em;
  color: var(--white);
}
.proj-more-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 32px;
}
.more-card { display: block; text-decoration: none; }
.more-shot {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
  transition: transform 0.45s var(--ease-out);
}
.more-card:hover .more-shot { transform: translateY(-8px); }
.more-cat {
  display: block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gray);
}
.more-name {
  display: block;
  margin-top: 4px;
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--white);
}
.more-cta {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 4px;
  transition: opacity 0.2s;
}
.more-card:hover .more-cta { opacity: 0.55; }
.proj-all {
  display: inline-block;
  margin-top: 56px;
  font-size: 16px;              /* era 12, igual que el de volver */
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 8px;
  transition: opacity 0.2s;
}
.proj-all:hover { opacity: 0.55; }

/* Fantasma FLIP: la miniatura pulsada crece hasta el área del reproductor */
.proj-ghost {
  position: fixed;
  z-index: 400;
  pointer-events: none;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.3);
  transition: left 0.42s var(--ease-out), top 0.42s var(--ease-out),
    width 0.42s var(--ease-out), height 0.42s var(--ease-out),
    border-radius 0.42s var(--ease-out), opacity 0.35s ease;
}
.proj-ghost.go { border-radius: 10px; }
.proj-ghost.out { opacity: 0; }

/* Entrada de la ficha: los bloques suben escalonados */
.proj-view.enter > * { animation: work-drop 0.55s var(--ease-out) both; }
.proj-view.enter > *:nth-child(2) { animation-delay: 0.05s; }
.proj-view.enter > *:nth-child(3) { animation-delay: 0.1s; }
.proj-view.enter > *:nth-child(4) { animation-delay: 0.15s; }
.proj-view.enter > *:nth-child(5) { animation-delay: 0.2s; }
.proj-view.enter > *:nth-child(6) { animation-delay: 0.26s; }
.proj-view.enter > *:nth-child(7) { animation-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  .proj-view.enter > * { animation: none; }
  .proj-ghost { display: none; }
}

@media (max-width: 720px) {
  .proj-facts { gap: 34px; }
  .proj-video { height: auto; width: 100%; max-height: 76vh; object-fit: contain; }
  .proj-more-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FRONT SLIDE (diseño "Front page.psd") — escenario de 1920×1080
   escalado en modo cover (el JS pone la escala en el transform).
   Capas como en el PSD, de abajo hacia arriba: canvas ascii
   animado → panel → bandas marquee → disco girando → olas en
   3 planos → títulos fijos.
   ============================================================ */
.front-slide {
  position: relative;
  width: 100vw;
  margin-left: calc((100% - 100vw) / 2);
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #060606;
}
.fp-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  transform: translate(-50%, -50%);
  will-change: transform;
}
/* Canvas del fondo ascii; la imagen original queda de respaldo estático
   detrás (sin WebGL o con reduced-motion simplemente no se dibuja) */
.fp-ascii {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: url("img/frontpage/fp-ascii.webp?v=2") center / cover no-repeat;
}
.fp-panel {
  position: absolute;
  left: 442px;
  /* 45 y no 46: con 46 el panel acababa en 1081, un pixel FUERA del lienzo,
     y su filo de abajo se cortaba a trozos según la escala */
  top: 45px;
  width: 1036px;
  height: 1035px;
  z-index: 2;
}

/* --- Bandas laterales: marquee vertical en loop. El texto corre en un
   carril horizontal largo rotado ±90°: en la izquierda se lee de abajo
   hacia arriba y en la derecha de arriba hacia abajo (como el PSD), y
   en ambas el contenido SUBE constantemente. Tapan las bandas cocidas
   de la imagen del panel. --- */
.fp-band {
  position: absolute;
  top: 0;
  height: 100%;
  width: 124px;
  overflow: hidden;
  background: #e7e6e1;
  z-index: 3;
}
.fp-band-l { left: 440px; box-shadow: inset -1px 0 0 #17170f; }
.fp-band-r { left: 1356px; box-shadow: inset 1px 0 0 #17170f; }
/* El carril rotado se ancla a una esquina (no centrado): así el tramo
   de carril que cubre la banda es siempre el primero, que está
   garantizado durante todo el loop de −50% del marquee. */
.fp-band-rot {
  position: absolute;
  height: 124px;
  width: max-content;
  display: flex;
  align-items: center;
}
.fp-band-l .fp-band-rot { left: 0; top: 1080px; transform-origin: 0 0; transform: rotate(-90deg); }
.fp-band-r .fp-band-rot { left: 124px; top: 0; transform-origin: 0 0; transform: rotate(90deg); }
.fp-band-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
/* En reposo (antes de la entrada) el carril izquierdo se deja en −50%,
   que es el `from` de su loop: así al arrancar no hay brinco */
.fp-band-l .fp-band-track { transform: translateX(-50%); }
body.loaded .fp-band-l .fp-band-track { animation: fp-band-left 34s linear 2.3s infinite; }
body.loaded .fp-band-r .fp-band-track { animation: fp-band-right 34s linear 2.3s infinite; }
/* la izquierda está rotada −90°: avanzar hacia +x se ve como subir;
   la derecha está rotada +90°: subir es avanzar hacia −x */
@keyframes fp-band-left { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes fp-band-right { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.fp-band-run {
  display: flex;
  align-items: center;
  gap: 78px;
  padding-right: 78px;
  white-space: nowrap;
}
.fp-seg {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 19px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #191913;
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
}
.fp-seg em { font-style: italic; }
.fp-seg i { font-style: normal; letter-spacing: 0; }
.fp-star { font-weight: 400; font-size: 21px; letter-spacing: 0; }

/* --- Disco: gira lento a la derecha (sentido horario); la sombra vive
   en el wrapper para que no dé vueltas con él. El arte se recortó un
   pelo (r 221→218) para eliminar el halo rojo del borde. --- */
.fp-disc-wrap {
  position: absolute;
  left: 738px;
  top: 411px;
  width: 443px;
  height: 443px;
  z-index: 4;
  filter: drop-shadow(0 30px 46px rgba(0, 0, 0, 0.55));
}
.fp-disc {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* En la entrada el disco llega "retrocedido" (−42°) y se endereza
     junto con la subida: lo primero que se ve es el logo a punto de
     centrarse. El easing asienta los últimos grados despacio, así se
     queda "derecho" un buen rato antes de seguir girando. */
  transform: rotate(-42deg);
  transition: transform 1.25s cubic-bezier(0.16, 0.84, 0.26, 1) 0.5s;
  will-change: transform;
}
body.loaded .fp-disc {
  transform: rotate(0deg);
  /* el loop arranca con el flashazo, cuando ya embonó (0.5+1.25s) */
  animation: fp-spin 28s linear 2.3s infinite;
}
@keyframes fp-spin { to { transform: rotate(360deg); } }

/* --- Olas de sonido: tres capas REALES del PSD ('olas atras' /
   'olas en medio' / 'olas en frente'), cada una en su bbox original,
   oleando a destiempo en tres niveles de profundidad. Van DELANTE
   del disco, como en el PSD. --- */
.fp-olas {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.fp-ola {
  position: absolute;
  will-change: transform;
}
/* Las tres capas miden justo hasta el borde del lienzo (1080), así que al
   cabecear HACIA ARRIBA despegaban del piso y se abría una rendija en la
   mera base. Cada una baja su reposo lo que sube en su vaivén (14/20/26 px),
   de modo que en su punto más alto siga tocando el fondo; lo que sobra por
   abajo lo recorta el propio lienzo. */
.fp-ola-back { left: 0; top: 791px; width: 1920px; animation: fp-bob-back 6.8s ease-in-out -2.1s infinite alternate; }
.fp-ola-mid { left: 395px; top: 751px; width: 1132px; animation: fp-bob-mid 5.4s ease-in-out -3.4s infinite alternate; }
.fp-ola-front { left: 395px; top: 728px; width: 848px; animation: fp-bob-front 4.3s ease-in-out -0.9s infinite alternate; }
/* Se hunden y emergen con un cabeceo sutil (rotate) que desfasa los
   tres planos: atrás poco, en medio más, al frente más — con carreras
   contenidas para que las capas no se despeguen entre sí */
@keyframes fp-bob-back { from { transform: translateY(12px) rotate(0.18deg); } to { transform: translateY(-14px) rotate(-0.15deg); } }
@keyframes fp-bob-mid { from { transform: translateY(17px) rotate(-0.24deg); } to { transform: translateY(-20px) rotate(0.21deg); } }
@keyframes fp-bob-front { from { transform: translateY(22px) rotate(0.32deg); } to { transform: translateY(-26px) rotate(-0.28deg); } }

/* --- Títulos: fijos, como el recuadro blanco. Van DEBAJO de las olas
   (z 4 < 5) para que en la entrada emerjan desde atrás de las nubes --- */
.fp-t1 { position: absolute; left: 638px; top: 140px; width: 634px; z-index: 4; }
.fp-t2 { position: absolute; left: 696px; top: 174px; width: 545px; z-index: 4; }

/* --- Entrada EN DOS TIEMPOS (body.loaded llega cuando cae el telón del
   loader).

   1er tiempo — sólo el disco: la pantalla se queda en negro y el disco sube
   desde abajo mientras se endereza de −42° hasta embonar. Nada más está a la
   vista: fondo ascii, bandas, panel, títulos, nubes y la propia barra de
   navegación esperan apagados.
   2º tiempo — el flashazo: en cuanto el disco asienta, el velo blanco pega el
   golpe de luz y el escenario se sobreexpone (fp-burst); detrás de esa luz
   aparece de golpe todo lo demás, ya en su sitio, y arrancan los bucles: el
   giro del disco, las marquesinas y el oleaje.

   Los tiempos, contados desde body.loaded:
     0.50s  el disco arranca             1.75s  embona
     1.12s  flashazo                     1.32s  aparece el resto
     2.30s  arrancan los bucles                                          --- */
.fp-ascii { opacity: 0; transition: opacity 0.85s ease 1.32s; }
.fp-band { opacity: 0; transition: opacity 0.5s ease 1.36s; }
.fp-olas {
  transform: translateY(48px);
  opacity: 0;
  transition: transform 0.85s cubic-bezier(0.16, 0.84, 0.26, 1) 1.32s,
              opacity 0.45s ease 1.32s;
}
.fp-panel {
  opacity: 0;
  transform: translateY(48px);
  transition: transform 0.85s cubic-bezier(0.16, 0.84, 0.26, 1) 1.32s,
              opacity 0.45s ease 1.32s;
}
.fp-t1, .fp-t2 {
  opacity: 0;
  transform: translateY(48px);
  transition: transform 0.85s cubic-bezier(0.16, 0.84, 0.26, 1) 1.4s,
              opacity 0.45s ease 1.4s;
}
.fp-t2 { transition-delay: 1.46s; }
/* El disco es lo único que se mueve en el primer tiempo */
.fp-disc-wrap { transform: translateY(800px); transition: transform 1.25s cubic-bezier(0.16, 0.84, 0.26, 1) 0.5s; }
body.loaded .fp-ascii,
body.loaded .fp-band { opacity: 1; }
body.loaded .fp-olas,
body.loaded .fp-panel,
body.loaded .fp-t1,
body.loaded .fp-t2 { transform: translateY(0); opacity: 1; }
body.loaded .fp-disc-wrap { transform: translateY(0); }

/* La barra de navegación entra con el resto, no antes: en el primer tiempo
   delataría el sitio detrás del negro. Sólo en la portada — las demás
   páginas no tienen esta entrada y su barra debe estar desde el principio. */
body.home .navbar { opacity: 0; transition: opacity 0.5s ease 1.32s; }
body.home.loaded .navbar { opacity: 1; }

/* Velo del flashazo: un golpe de luz corto que tapa el cambio. Va por debajo
   del telón del loader (z 1000) y por encima de todo lo demás. */
.fp-flash {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
body.loaded .fp-flash { animation: fp-flash 0.75s cubic-bezier(0.2, 0, 0.3, 1) 1.12s both; }
@keyframes fp-flash {
  0% { opacity: 0; }
  16% { opacity: 0.88; }   /* el golpe */
  100% { opacity: 0; }
}
/* …y el escenario sale sobreexpuesto de ese golpe, en vez de aparecer plano.
   `forwards` y no `both`: con relleno hacia atrás el disco subiría quemado
   durante todo el primer tiempo, y ahí tiene que verse normal. */
body.loaded .fp-stage { animation: fp-burst 1s ease 1.16s forwards; }
@keyframes fp-burst {
  0% { filter: brightness(2.6) contrast(0.55); }
  40% { filter: brightness(1.5) contrast(0.88); }
  100% { filter: brightness(1) contrast(1); }
}

/* En pantallas angostas el cover recortaría el panel: se pasa a un
   lienzo 16:9 ajustado al ancho (la escala del JS da fit exacto). */
@media (max-width: 960px) {
  .front-slide { height: auto; aspect-ratio: 1920 / 1080; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-band-track, .fp-disc, .fp-ola { animation: none; }
  .fp-ascii, .fp-band, .fp-olas, .fp-panel, .fp-t1, .fp-t2, .fp-disc-wrap, .fp-disc,
  body.home .navbar { transition: none; }
  /* sin flashazo ni sobreexposición: la portada aparece de una vez */
  .fp-flash, body.loaded .fp-flash { animation: none; opacity: 0; }
  body.loaded .fp-stage { animation: none; }
}


/* ============================================================
   AVISO DE DESLIZAR — al pie y al centro de la portada
   Aparece a los 6 s, sólo para quien se quedó parado en la animación
   creyendo que era lo único que había. Va DENTRO de la sección, no fijo al
   viewport: al deslizar se va hacia arriba con la propia portada y no
   persigue a nadie por el resto del sitio. Y se puede pulsar: baja al intro.
   ============================================================ */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 2.4vw, 34px);
  z-index: 10;                     /* sobre las capas del escenario */
  border: none;
  cursor: pointer;
  font: inherit;
  /* la palabra arriba y la flecha centrada debajo */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 13px 22px 11px;
  border-radius: 22px;
  background: rgba(10, 10, 9, 0.72);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  color: var(--varden);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity 0.6s ease, transform 0.6s var(--ease-out),
              background-color 0.3s ease;
}
.scroll-cue.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.scroll-cue:hover { background: rgba(10, 10, 9, 0.88); }
/* la flecha cae y vuelve, como marcando el gesto */
.scroll-cue svg { animation: cue-drop 1.9s ease-in-out infinite; }
@keyframes cue-drop {
  0%, 100% { transform: translateY(-2px); opacity: 0.65; }
  50% { transform: translateY(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg { animation: none; }
}