/* =========================================================
   LIONPIX STUDIO — estilos
   ========================================================= */

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
}

/* Logo: instancias fijas de Archivo (Safari no aplica bien el ancho variable) */
@font-face {
  font-family: "LionPix Wordmark";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/archivo-logo-wide-500.woff2") format("woff2");
}
@font-face {
  font-family: "LionPix Studio";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/archivo-logo-600.woff2") format("woff2");
}

:root {
  --ink: #0B0B0C;
  --ink-2: #141416;
  --ink-3: #18181B;   /* fondo de la sección del formulario */
  --paper: #F4F2EC;
  --red: #FF2E3E;
  --mute: rgba(244, 242, 236, .64);
  --faint: rgba(244, 242, 236, .38);
  --line: rgba(244, 242, 236, .14);
  --glass: rgba(244, 242, 236, .07);
  --glass-strong: rgba(28, 28, 31, .55);

  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --logo: "Archivo", "Hanken Grotesk", sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --radius: 22px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --vh: 100svh;
}

@supports not (height: 100svh) { :root { --vh: 100vh; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; border-radius: 999px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--paper); color: var(--ink); padding: 10px 16px; border-radius: 999px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Tipografía ---------- */
.display {
  margin: 0;
  font-size: clamp(2.5rem, 6.4vw, 6.25rem);
  line-height: .94;
  letter-spacing: -.035em;
  font-weight: 400;
}
.display > span { display: block; }
.w-light { font-weight: 200; }
.w-black { font-weight: 850; letter-spacing: -.045em; }
/* Comienzo de la bajada del hero: la idea de los mundos, en blanco y bold.
   Un brillo suave la recorre cada vez que cambia el mundo. */
.lede-lead {
  font-weight: 600; color: var(--paper);
  background: linear-gradient(100deg, var(--paper) 0 42%, rgba(244, 242, 236, .32) 50%, var(--paper) 58% 100%);
  background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lede-lead.is-shine { animation: lede-shine 1.1s var(--ease) 1; }
@keyframes lede-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .lede-lead.is-shine { animation: none; } }
.lede {
  margin: 0;
  color: var(--mute);
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.5;
  max-width: 36ch;
}

/* ---------- Logo (versión horizontal tipográfica) ----------
   LIONPIX: Archivo Expanded (wdth 125), medium, tracking 200 (0.2em).
   STUDIO: Archivo (ancho normal), semibold, tracking 500 (0.5em). */
.logo {
  display: inline-flex; align-items: flex-end; gap: .9em;
  text-decoration: none; white-space: nowrap; color: var(--paper);
}
/* El logo va en SVG (vectores del sello): se ve igual en todos los navegadores */
.logo-word {
  display: block; height: calc(1.05rem * .712); width: auto;
  fill: currentColor; overflow: visible;
}
.logo-studio {
  display: block; height: calc(.62rem * .686); width: auto;
  fill: var(--mute); overflow: visible;
}

/* ---------- Vidrio y botones ---------- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid transparent;
}
/* El vidrio no lleva borde (idioma, píldoras y bloques de los trabajos).
   Solo lo conservan la tarjeta destacada del hero y el recuadro del formulario. */
.card-latest.glass { border-color: var(--line); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-strong); }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  height: 50px; padding: 0 24px;
  border-radius: 999px; border: 1px solid transparent;
  font-size: .95rem; font-weight: 600; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .25s var(--ease), background-color .25s, color .25s, border-color .25s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-sm { height: 40px; padding: 0 18px; font-size: .875rem; }
.btn-icon { width: 40px; padding: 0; }
.btn-red { background: var(--red); color: var(--ink); }
.btn-red:hover { background: #ff4552; }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-dark { background: var(--ink); color: var(--paper); border-color: var(--line); }
.btn-glass {
  background: var(--glass); border-color: var(--line); color: var(--paper);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.btn-glass:hover { background: rgba(244, 242, 236, .14); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px var(--gutter);
  transition: opacity .8s var(--ease), transform .8s var(--ease), background-color .4s;
}
.nav.is-scrolled {
  background: rgba(11, 11, 12, .55);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(244, 242, 236, .06);
}
.nav-links { display: flex; gap: 30px; }
.nav-links a {
  text-decoration: none; font-size: .875rem; color: var(--mute); transition: color .2s;
}
.nav-links a:hover { color: var(--paper); }
.nav-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.lang { display: inline-flex; padding: 4px; border-radius: 999px; }
.lang button {
  border: 0; background: transparent; cursor: pointer;
  height: 32px; min-width: 38px; padding: 0 10px; border-radius: 999px;
  font-size: .75rem; font-weight: 600; letter-spacing: .04em; color: var(--mute);
}
.lang button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }

/* ---------- Capas de video ---------- */
.stage, .worlds, .world { position: absolute; inset: 0; overflow: hidden; }
.media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity .9s var(--ease);
}
.media.is-on { opacity: 1; }
/* El mundo entra y sale con el glitch (ya viene en el video): sin fundido */
.hero .hero-world { transition: none; }
.placeholder {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 55% at 62% 42%, rgba(244, 242, 236, .09), transparent 70%),
    radial-gradient(40% 40% at 20% 80%, rgba(244, 242, 236, .04), transparent 70%),
    var(--ink);
}
.placeholder::after {
  content: ""; position: absolute; inset: -50%;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .07; mix-blend-mode: overlay;
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}
.hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(11, 11, 12, .85) 0%, rgba(11, 11, 12, .2) 38%, rgba(11, 11, 12, 0) 60%),
    linear-gradient(to bottom, rgba(11, 11, 12, .55) 0%, rgba(11, 11, 12, 0) 18%);
}

/* ---------- Hero ---------- */
.hero {
  position: relative; height: var(--vh); min-height: 560px; overflow: hidden;
  isolation: isolate;
}
.stage { z-index: -2; }
/* El león vive a la derecha (16:9) o arriba (9:16): si la pantalla tiene otra
   proporción, el recorte se come el negro de la izquierda / de abajo, nunca al león. */
.hero .media { object-position: 100% 50%; }
@media (max-aspect-ratio: 1/1) { .hero .media { object-position: 75% 0%; } }
/* Durante el vuelo el león va al centro del cuadro: ahí el recorte se centra.
   Cambia en el negro entre el vuelo y la entrada, así no se nota. */
@media (max-aspect-ratio: 1/1) { .hero .hero-intro.is-flight { object-position: 50% 0%; } }
/* Los comerciales del fondo van centrados */
.hero .hero-idle { object-position: 50% 50%; }

/* Capa negra sobre los comerciales (no sobre la intro del león) y sombra detrás del texto */
.hero-dim {
  position: absolute; inset: 0; pointer-events: none; z-index: -1;
  opacity: 0; transition: opacity 1.2s var(--ease);
  background:
    radial-gradient(75% 70% at 0% 100%, rgba(11, 11, 12, var(--hero-text-shade, .55)) 0%, rgba(11, 11, 12, 0) 100%),
    rgba(11, 11, 12, var(--hero-dim, .35));
}
.is-idle .hero-dim { opacity: 1; }
@media (max-aspect-ratio: 1/1) {
  .hero-dim {
    background:
      linear-gradient(to top, rgba(11, 11, 12, var(--hero-text-shade, .55)) 0%, rgba(11, 11, 12, 0) 60%),
      rgba(11, 11, 12, var(--hero-dim, .35));
  }
}
.hero-content {
  position: absolute; left: var(--gutter); bottom: clamp(28px, 7vh, 72px);
  display: grid; gap: 22px;
}
/* El titular del hero siempre en dos renglones: cada renglón no se corta
   y el tamaño escala con el ancho de la pantalla. */
.hero .display { font-size: clamp(2.5rem, 4.6vw, 6.75rem); }
.hero .display > span { white-space: nowrap; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }

.hero-cards {
  position: absolute; right: var(--gutter); bottom: clamp(28px, 7vh, 72px);
  display: flex; gap: 12px; align-items: stretch;
}
.card { border-radius: var(--radius); }
.card-latest {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px 10px 10px; text-decoration: none; min-width: 270px;
  transition: background-color .25s;
}
.card-latest:hover { background: rgba(244, 242, 236, .12); }
.card-thumb {
  position: relative; width: 56px; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden;
  background: linear-gradient(160deg, #2a2a2e, #161618);
  flex: none;
}
.card-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-text { display: grid; gap: 1px; }
.card-k { font-size: .72rem; color: var(--faint); }
.card-t { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.card-s { font-size: .8rem; color: var(--mute); }
.play-dot {
  margin-left: auto; width: 36px; height: 36px; border-radius: 50%;
  background: var(--paper); position: relative; flex: none;
}
.play-dot::after {
  content: ""; position: absolute; left: 14px; top: 11px;
  border-left: 10px solid var(--ink); border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.card-craft {
  display: grid; align-content: center; gap: 4px; padding: 18px 22px; min-width: 210px;
}
.card-big { font-size: 1.6rem; font-weight: 200; letter-spacing: -.03em; line-height: 1; }

.hero-tools {
  position: absolute; top: 84px; right: var(--gutter);
  display: flex; gap: 8px;
}
#soundToggle .snd-on { display: none; }
#soundToggle[aria-pressed="true"] .snd-on { display: inline; }
#soundToggle[aria-pressed="true"] .snd-off { display: none; }

/* ---------- Pantalla de entrada ---------- */
.gate {
  position: fixed; inset: 0; z-index: 100; background: var(--ink);
  display: grid; place-content: center; justify-items: center; gap: clamp(32px, 6vh, 64px);
  padding: 0 var(--gutter);
  transition: opacity 1.2s var(--ease), visibility 0s linear 1.2s;
}
.gate[hidden] { display: none; }
.gate.is-off { opacity: 0; visibility: hidden; pointer-events: none; }
body.is-gate { overflow: hidden; }
/* LIONPIX gigante: Archivo Expanded (wdth 125), medium, tracking 200 (0.2em).
   El margen negativo compensa el espacio que deja la última letra, para que quede centrado. */
/* El sello LIONPIX (canvas con el glitch de los reels) */
.gate-mark {
  display: block; width: min(64vw, 760px); aspect-ratio: 342 / 48; max-width: 100%;
}
/* Escritorio y tablet: 560 px de ancho */
@media (min-width: 761px) { .gate-mark { width: 560px; } }
.gate-actions {
  display: grid; justify-items: center; gap: 12px;
  animation: gate-up 1s var(--ease) .75s both;
}
@keyframes gate-up { from { opacity: 0; transform: translateY(10px); } }
.gate-actions .btn { min-width: 150px; justify-content: center; }
/* "Entrar": botón de vidrio como el secundario, con la luz que recorre el borde
   (la misma de la tarjeta de Cortico). Al pasar el mouse se pinta de rojo. */
#gateEnter { transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
#gateEnter:hover, #gateEnter:focus-visible { background: var(--red); border-color: var(--red); color: var(--ink); }
#gateEnter:hover::before, #gateEnter:focus-visible::before { opacity: 0; }
.gate-hint { font-size: .78rem; color: var(--faint); letter-spacing: .06em; }
.gate-mark { transition: filter 1s, transform 1.2s var(--ease); }
.gate.is-off .gate-mark { filter: blur(6px); transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .gate-actions { animation: none; } }

/* El botón de sonido solo tiene sentido durante la intro */
#soundToggle { transition: opacity .6s; }
.is-idle #soundToggle { opacity: 0; pointer-events: none; }

/* Secuencia de entrada */
/* Como en la referencia: cada bloque entra deslizándose desde su borde de pantalla.
   Texto y botones desde la izquierda (primero los botones), tarjetas desde abajo,
   la barra desde arriba. El hero recorta lo que queda afuera. */
.is-intro .nav { opacity: 0; transform: translateY(-120%); pointer-events: none; }
.reveal { transition: transform 1.3s cubic-bezier(.16, 1, .3, 1), opacity .5s linear; }
.is-intro .reveal { pointer-events: none; }
.is-intro .hero-content .reveal { transform: translateX(calc(-100% - var(--gutter) - 8vw)); }
.is-intro .hero-cards .reveal { transform: translateY(calc(100% + 14vh)); }
.is-ready .hero-content .cta-row { transition-delay: 0s; }
.is-ready .hero-content .eyebrow { transition-delay: .08s; }
.is-ready .hero-content .w-light { transition-delay: .14s; }
.is-ready .hero-content .w-black { transition-delay: .22s; }
.is-ready .hero-content .lede { transition-delay: .32s; }
.is-ready .hero-cards .reveal:nth-child(1) { transition-delay: .4s; }
.is-ready .hero-cards .reveal:nth-child(2) { transition-delay: .52s; }
.is-ready .nav { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .is-intro .hero-content .reveal, .is-intro .hero-cards .reveal { transform: none; opacity: 0; }
}
#skipIntro { transition: opacity .5s; }
.is-ready #skipIntro { opacity: 0; pointer-events: none; }

/* ---------- Mundos ---------- */
.range { position: relative; height: calc(var(--n, 3) * var(--vh) + var(--vh)); }
.range-stage {
  position: sticky; top: 0; height: var(--vh); overflow: hidden; isolation: isolate;
}
.worlds { z-index: -2; }
.world { opacity: 0; transition: opacity 1s var(--ease); }
.world.is-active { opacity: 1; }
.world .placeholder { z-index: 0; }
.world .media { z-index: 1; }
.world .media.is-in { z-index: 2; }
/* Al bajar a un estilo nuevo entra con el glitch (ya viene en el clip): corte, sin fundido */
.world .media.is-in, .world.is-cut { transition: none; }
.world[data-tone="1"] .placeholder { background: radial-gradient(70% 60% at 70% 35%, rgba(200, 205, 212, .14), transparent 70%), #0d0e10; }
.world[data-tone="2"] .placeholder { background: radial-gradient(70% 60% at 30% 40%, rgba(236, 222, 205, .13), transparent 70%), #100f0e; }
.world[data-tone="3"] .placeholder { background: radial-gradient(60% 70% at 55% 60%, rgba(244, 242, 236, .1), transparent 70%), #0b0b0c; }

.world-copy {
  position: absolute; left: var(--gutter); bottom: clamp(32px, 9vh, 96px);
  max-width: min(900px, 80vw);
}
.world-count {
  display: flex; gap: 14px; align-items: center;
  margin: 0 0 18px; font-size: .875rem; color: var(--mute);
}
.world-num {
  display: inline-flex; gap: 2px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--line); font-variant-numeric: tabular-nums; color: var(--paper);
}
#worldTitle span { transition: opacity .6s var(--ease), transform .6s var(--ease); }
#worldTitle.is-swapping span { opacity: 0; transform: translateY(18px); }
#worldTitle.is-swapping .w-black { transition-delay: .05s; }

.world-dots {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
  list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
}
.world-dots li {
  width: 6px; height: 6px; border-radius: 999px; background: var(--faint);
  transition: height .5s var(--ease), background-color .5s;
}
.world-dots li.is-active { height: 28px; background: var(--red); }

/* ---------- Secciones de contenido ---------- */
.work, .about, .contact { position: relative; padding: clamp(96px, 14vh, 160px) var(--gutter); }

.section-head {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px;
  margin-bottom: clamp(40px, 6vh, 72px);
}

/* Trabajos */
/* Cada tarjeta entra entera en la pantalla: su alto no pasa del alto visible
   menos la barra y un margen, y el ancho sale de ahí (9:16). */
.work-grid {
  display: grid; gap: clamp(12px, 1.6vw, 24px); justify-content: center;
  grid-template-columns: repeat(3, minmax(0, calc((100svh - 180px) * 9 / 16)));
}
.work-card {
  position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(165deg, #222225, #121214);
  border: 1px solid var(--line);
  cursor: pointer; text-align: left; padding: 0; display: block; width: 100%;
  isolation: isolate;
}
.work-card img, .work-card video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;
  transition: transform 1.2s var(--ease);
}
.work-card:hover img, .work-card:hover video { transform: scale(1.03); }
.work-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(11, 11, 12, .75), rgba(11, 11, 12, 0) 45%);
}
.work-info {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px 14px 18px; border-radius: 16px;
}
.work-meta { display: grid; gap: 2px; min-width: 0; }
.work-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.work-client { font-size: .82rem; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.work-kind {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  font-size: .75rem; padding: 6px 12px; border-radius: 999px;
}
.work-play { margin-left: auto; flex: none; }
.work-nav { display: flex; gap: 8px; }
.work-nav[hidden] { display: none; }
.work-nav .btn:disabled { opacity: .35; cursor: default; }

/* Escritorio: el título a la izquierda y las tarjetas en el mismo bloque, pegadas
   al margen derecho. Las tarjetas se achican para que entren las tres; si la pantalla
   es muy angosta, quedan en 240 px y se desplazan en horizontal con las flechas. */
@media (min-width: 1081px) {
  .work {
    --head-w: clamp(260px, 24vw, 400px);
    --col-gap: clamp(32px, 4vw, 72px);
    --card-gap: clamp(12px, 1.4vw, 22px);
    --card-w: max(240px, min(
      calc((100svh - 200px) * 9 / 16),
      calc((100vw - 16px - 2 * var(--gutter) - var(--head-w) - var(--col-gap) - 2 * var(--card-gap)) / 3)
    ));
    display: grid; grid-template-columns: var(--head-w) minmax(0, 1fr);
    gap: var(--col-gap); align-items: stretch;
  }
  .work .section-head {
    grid-template-columns: 1fr; grid-template-rows: auto auto 1fr;
    align-content: start; margin: 0; gap: 22px;
  }
  .work .section-head .work-nav { align-self: end; }
  .work .display { font-size: clamp(2.6rem, 4vw, 5.4rem); }
  .work .lede { max-width: 30ch; }
  .work-grid {
    display: flex; gap: var(--card-gap); justify-content: flex-start;
    overflow-x: auto; scrollbar-width: none;
  }
  .work-grid::-webkit-scrollbar { display: none; }
  .work-card { flex: 0 0 var(--card-w); }
  .work-card:first-child { margin-left: auto; }
}
.work-card.is-soon { cursor: default; }
/* Tarjetas angostas: título arriba y botón abajo, para que nada se corte */
.work-card { container-type: inline-size; }
@container (max-width: 300px) {
  .work-info { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; }
  .work-play { margin-left: 0; width: 100%; }
  .work-title { font-size: 1.2rem; }
}
.work-card.is-soon .work-play { background: transparent; color: var(--mute); border-color: var(--line); }

/* Quién */
.about { border-top: 1px solid var(--line); }
.about-inner {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start;
  max-width: 1400px;
}
.about .display { font-size: clamp(2.2rem, 3.6vw, 4.25rem); }
.about-body { display: grid; gap: 18px; max-width: 46ch; }
.about-body p { margin: 0; font-size: clamp(1.05rem, 1.3vw, 1.3rem); line-height: 1.5; color: var(--mute); font-weight: 300; }
.about-body p:first-child { color: var(--paper); }

/* ---------- Formulario + clips flotantes ---------- */
.contact { overflow: hidden; overflow: clip; isolation: isolate; min-height: var(--vh); background: var(--ink-3); }
.reel {
  position: absolute; inset: -10% -5%; z-index: -2;
  display: flex; gap: 2.2vw; justify-content: center;
  transform: rotate(-6deg);
}
.reel-col { display: grid; gap: 2.2vw; align-content: start; width: 15vw; min-width: 120px; flex: none; animation: drift var(--dur, 60s) linear infinite; }
.reel-col.rev { animation-direction: reverse; }
.reel-col.d1 { opacity: .55; }
.reel-col.d2 { opacity: .32; filter: blur(2px); transform: scale(.85); }
.reel-col.d3 { opacity: .2; filter: blur(5px); transform: scale(.7); }
.reel-tile {
  position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden;
  background: linear-gradient(170deg, #26262a, #141416);
}
.reel-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@keyframes drift { from { translate: 0 0; } to { translate: 0 -50%; } }
.reel.is-paused .reel-col { animation-play-state: paused; }
.reel-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 60% at 50% 55%, rgba(11, 11, 12, .55), rgba(11, 11, 12, .2) 80%),
    linear-gradient(to bottom, var(--ink), rgba(11, 11, 12, 0) 18%, rgba(11, 11, 12, 0) 82%, var(--ink));
}

.contact-inner {
  display: grid; grid-template-columns: 1fr minmax(0, 720px); gap: clamp(32px, 5vw, 80px);
  align-items: start; max-width: 1400px; margin: 0 auto;
}
.contact-head { display: grid; gap: 22px; align-content: start; }   /* arriba, en línea con el comienzo del formulario */

.brief { display: grid; gap: 26px; }
.brief .row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > span, .field > legend { font-size: .875rem; color: var(--mute); padding: 0; }
/* el <legend> de los grupos de pastillas no toma el gap del grid: mismo espacio que el resto */
fieldset.field > legend { margin-bottom: 10px; }
.field input[type="text"], .field input[type="email"], .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--paper);
  background: rgba(244, 242, 236, .05); border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 16px; transition: border-color .2s, background-color .2s;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field textarea:focus { outline: none; border-color: rgba(244, 242, 236, .6); background: rgba(244, 242, 236, .08); }
.field.is-invalid input { border-color: var(--paper); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line); font-size: .875rem; color: var(--paper);
  transition: background-color .2s, color .2s, border-color .2s;
}
.chip:hover span { border-color: rgba(244, 242, 236, .4); }
.chip input:checked + span { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.chip input:focus-visible + span { outline: 2px solid var(--paper); outline-offset: 3px; }
.form-foot { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding-top: 4px; }
.form-foot .btn[hidden] { display: none; }

/* Pasos del formulario: los tres a la vista, solo el actual abierto */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.steps li { display: grid; gap: 8px; color: var(--faint); font-size: .8rem; letter-spacing: .02em; }
.steps li::before { content: ""; height: 2px; border-radius: 2px; background: var(--line); transition: background-color .3s; }
.steps li span { display: none; }
.steps li b { font-weight: 500; }
.steps li.is-done { color: var(--mute); }
.steps li.is-done::before { background: rgba(244, 242, 236, .45); }
.steps li.is-on { color: var(--paper); }
.steps li.is-on::before { background: var(--red); }
.step { display: none; gap: 22px; }
.step.is-on { display: grid; animation: step-in .45s var(--ease); }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.field-hint { font-size: .8rem; color: var(--faint); }
.brief.is-sent .steps, .brief.is-sent .step { display: none; }
.form-status { margin: 0; font-size: .9rem; color: var(--mute); }
.brief.is-sent .field, .brief.is-sent .row { display: none; }
.brief.is-sent .form-foot .btn { display: none; }
.brief.is-sent .form-status { display: none; }
.brief.is-sent { align-content: center; width: 100%; justify-self: stretch; }

/* ---------- Brief enviado: hoja → sobre → lacre con el león → vuela → check ---------- */
.sent { display: none; }
.brief.is-sent .sent { width: 100%; display: grid; place-items: center; text-align: center; min-height: 380px; }
/* sobre y mensaje ocupan la misma celda: lo que queda al final aparece donde estaba el sobre */
.sent-env, .sent-msg { grid-area: 1 / 1; }
.sent-env { position: relative; width: 180px; height: 150px; perspective: 600px; }
.sheet-clip { position: absolute; inset: 0; overflow: hidden; }
.sheet { position: absolute; left: 30px; right: 30px; top: 0; height: 120px; background: var(--paper); border-radius: 6px; padding: 14px 12px; display: grid; gap: 8px; align-content: start; }
.sheet i { display: block; height: 5px; border-radius: 3px; background: rgba(11, 11, 12, .18); }
.sheet i:first-child { height: 3px; margin-bottom: 4px; background: linear-gradient(90deg, var(--red) 0 33%, rgba(11, 11, 12, .15) 33%); }
.sheet i:nth-child(3) { width: 70%; } .sheet i:nth-child(5) { width: 50%; }
.env-back, .env-front, .env-flap { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; border-radius: 8px; }
.env-back { background: #2A2A2E; }
.env-front { background: linear-gradient(to top right, #333338 50%, transparent 50.5%) left / 50% 100% no-repeat, linear-gradient(to top left, #333338 50%, transparent 50.5%) right / 50% 100% no-repeat; }
.env-flap { top: 54px; bottom: auto; height: 60px; border-radius: 0; background: #3A3A40; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; transform: rotateX(180deg); z-index: 3; }
.env-seal { position: absolute; left: 50%; top: 98px; width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; background: var(--red); display: grid; place-items: center; transform: scale(0); z-index: 4; }
.env-seal svg { width: 22px; height: 22px; }
.sent-msg { display: grid; justify-items: center; gap: 10px; }
.sent-check { width: 64px; height: 64px; color: var(--red); margin-bottom: 4px; opacity: 0; }
.sent-title { margin: 0; font-size: clamp(2rem, 3.6vw, 3rem); line-height: .95; letter-spacing: -.035em; font-weight: 400; }
.sent-msg p { margin: 0; color: var(--mute); }
.sent-title, .sent-msg p { opacity: 0; transform: translateY(10px); }
.brief.is-sent .sheet { animation: sent-tuck .7s var(--ease) .15s forwards; }
.brief.is-sent .env-flap { animation: sent-flap .45s var(--ease) .75s forwards; }
.brief.is-sent .env-seal { animation: sent-seal .5s cubic-bezier(.3, 1.6, .5, 1) 1.15s forwards; }
.brief.is-sent .sent-env { animation: sent-fly .55s cubic-bezier(.6, 0, .4, 1) 1.9s forwards; }
.brief.is-sent .sent-check { animation: sent-pop .5s cubic-bezier(.3, 1.6, .5, 1) 2.45s forwards; }
.brief.is-sent .sent-title { animation: sent-rise .6s var(--ease) 2.6s forwards; }
.brief.is-sent .sent-msg p { animation: sent-rise .6s var(--ease) 2.75s forwards; }
@keyframes sent-tuck { 60% { transform: translateY(36px) scaleY(.9); } 100% { transform: translateY(54px) scaleY(.7); opacity: 0; } }
@keyframes sent-flap { to { transform: rotateX(0); } }
@keyframes sent-seal { to { transform: scale(1); } }
@keyframes sent-fly { 25% { transform: translateY(6px) rotate(-3deg); } 100% { transform: translate(120px, -40px) rotate(-12deg) scale(.6); opacity: 0; } }
@keyframes sent-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes sent-rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .brief.is-sent .sent-env { display: none; }
  .brief.is-sent .sent-check, .brief.is-sent .sent-title, .brief.is-sent .sent-msg p { animation: none; opacity: 1; transform: none; }
}
.hp { position: absolute; left: -9999px; }

/* ---------- Pie ---------- */
.footer {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 28px;
  padding: 32px var(--gutter) calc(32px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); font-size: .875rem;
  background: var(--ink-3);   /* mismo gris que la sección del formulario */
}
.footer-tag { margin: 0; color: var(--mute); font-weight: 300; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { text-decoration: none; color: var(--mute); transition: color .2s; }
.footer-links a:hover { color: var(--paper); }
.footer-copy { margin: 0; color: var(--faint); }

/* ---------- Reproductor ---------- */
.player {
  padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh;
  width: 100vw; height: 100vh; margin: 0;
}
.player::backdrop { background: rgba(11, 11, 12, .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.player[open] { display: grid; place-items: center; }
.player video[hidden] { display: none; }
.player video {
  max-height: 92vh; max-width: 94vw; width: auto; height: auto; border-radius: 18px; background: #000;
}
.player-close { position: fixed; top: 18px; right: 18px; z-index: 2; }
.player-yt {
  display: block; height: min(92vh, 94vw * 16 / 9); aspect-ratio: 9 / 16; max-width: 94vw;
  border: 0; border-radius: 18px; background: #000;
}
.player-yt.is-wide { height: auto; width: min(94vw, 92vh * 16 / 9); aspect-ratio: 16 / 9; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero-cards .card-craft { display: none; }
  .contact-inner { grid-template-columns: 1fr; }
  .contact-head { position: static; }
}

@media (max-width: 760px) {
  .nav { grid-template-columns: 1fr auto; padding: 14px var(--gutter); }
  .nav-links { display: none; }
  .nav-actions .btn { display: none; }

  .hero-content { right: var(--gutter); max-width: none; bottom: 28px; gap: 18px; }
  .hero .display { font-size: clamp(2.3rem, 10vw, 3.6rem); }
  .hero .display > span { white-space: normal; text-wrap: balance; }
  .hero-cards { display: none; }
  .hero-tools { top: 70px; }
  .cta-row .btn { flex: 1 1 auto; }
  .display { font-size: clamp(2.4rem, 11vw, 3.6rem); }

  .world-copy { right: var(--gutter); max-width: none; }
  .world-dots { right: 14px; }

  .section-head { grid-template-columns: 1fr; }
  .work-grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px;
    scrollbar-width: none;
  }
  .work-grid::-webkit-scrollbar { display: none; }
  .work-grid { justify-content: flex-start; }
  .work-card { flex: 0 0 72vw; scroll-snap-align: center; }

  .about-inner { grid-template-columns: 1fr; }
  .brief .row.two { grid-template-columns: 1fr; }
  .reel-col { width: 34vw; }

  .footer { grid-template-columns: 1fr; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ---------- Banda inferior del hero ----------
   Tres capas de desenfoque cada vez más fuerte hacia abajo (desenfoque progresivo)
   y un oscurecido encima. Aparece junto con la interfaz. */
.hero-veil {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease);
}
.is-ready .hero-veil { opacity: 1; }
.hero-veil i { position: absolute; inset: 0; }
.hero-veil i:nth-child(1) {
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(to top, #000 45%, transparent 100%);
          mask-image: linear-gradient(to top, #000 45%, transparent 100%);
}
.hero-veil i:nth-child(2) {
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to top, #000 25%, transparent 70%);
          mask-image: linear-gradient(to top, #000 25%, transparent 70%);
}
.hero-veil i:nth-child(3) {
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 45%);
          mask-image: linear-gradient(to top, #000 0%, transparent 45%);
  background: linear-gradient(to top, rgba(11, 11, 12, .72) 0%, rgba(11, 11, 12, .45) 40%, rgba(11, 11, 12, 0) 100%);
}
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .hero-veil { height: 52%; }
}

/* ---------- Indicador de scroll ----------
   Una línea fina con un punto que baja. Entra último, después de la interfaz,
   y se va en cuanto la persona empieza a bajar. */
.scroll-cue {
  position: absolute; left: 50%; bottom: clamp(28px, 7vh, 72px);
  display: grid; justify-items: center; gap: 12px;
  color: var(--mute); text-decoration: none; font-size: .72rem; letter-spacing: .08em;
  transform: translateX(-50%); transition: opacity .8s var(--ease), transform .8s var(--ease), color .2s;
}
.scroll-cue:hover, .scroll-cue:focus-visible { color: var(--paper); }
.cue-track { position: relative; width: 1px; height: 46px; background: rgba(244, 242, 236, .18); overflow: hidden; }
.cue-track i {
  position: absolute; left: -2px; top: 0; width: 5px; height: 5px; border-radius: 50%;
  background: var(--paper); animation: cue-drop 2.2s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes cue-drop {
  0% { transform: translateY(-6px); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(46px); opacity: 0; }
}
.is-intro .scroll-cue { opacity: 0; transform: translate(-50%, 16px); pointer-events: none; }
.is-ready .scroll-cue { transition-delay: 1.1s, 1.1s, 0s; }
.scroll-cue.is-gone { opacity: 0; pointer-events: none; transition-delay: 0s; }
@media (max-width: 760px) {
  .scroll-cue { bottom: 14px; gap: 0; }
  .cue-label { display: none; }
  .cue-track { height: 30px; }
  @keyframes cue-drop { 0% { transform: translateY(-6px); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }
  .hero-content { bottom: 58px; }
}

/* ---------- Brillo en la tarjeta del último trabajo ----------
   Una luz fina que recorre el borde de vidrio, una vuelta cada 7 s. */
@property --glow-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.card-latest, .glow { position: relative; }
.card-latest::before, .glow::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--glow-a), transparent 0 64%, rgba(244, 242, 236, .12) 74%, rgba(244, 242, 236, .9) 82%, rgba(244, 242, 236, .12) 88%, transparent 94% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: glow-spin 7s linear infinite; transition: opacity .35s;
}
@keyframes glow-spin { to { --glow-a: 360deg; } }


/* Escritorio: el desenfoque y el oscurecido de abajo quedan solo debajo del texto
   (izquierda) y se desvanecen antes del león, así se ven su cuerpo y sus patas.
   Las tarjetas de la derecha ya tienen su propio vidrio. */
@media (min-width: 761px) and (min-aspect-ratio: 1/1) {
  .hero-veil i:nth-child(1) {
    -webkit-mask-image: linear-gradient(to top, #000 45%, transparent 100%), linear-gradient(to right, #000 0 34%, transparent 58%);
            mask-image: linear-gradient(to top, #000 45%, transparent 100%), linear-gradient(to right, #000 0 34%, transparent 58%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .hero-veil i:nth-child(2) {
    -webkit-mask-image: linear-gradient(to top, #000 25%, transparent 70%), linear-gradient(to right, #000 0 34%, transparent 58%);
            mask-image: linear-gradient(to top, #000 25%, transparent 70%), linear-gradient(to right, #000 0 34%, transparent 58%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .hero-veil i:nth-child(3) {
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 45%), linear-gradient(to right, #000 0 34%, transparent 58%);
            mask-image: linear-gradient(to top, #000 0%, transparent 45%), linear-gradient(to right, #000 0 34%, transparent 58%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .hero .hero-shade {
    background:
      linear-gradient(to top, rgba(11, 11, 12, .55) 0%, rgba(11, 11, 12, 0) 22%),
      linear-gradient(to bottom, rgba(11, 11, 12, .55) 0%, rgba(11, 11, 12, 0) 18%);
  }
}

/* Bajada sobre el titular del hero: "Sin cámara. Sin actores. Sin set." */
.hero .eyebrow {
  margin: 0 0 -6px; font-size: .78rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute);
}