/* ============================================================
   MADDNEXSTUDIO — piezas del estudio en nubes de partículas
   Deep Space Ink · gradiente Nexus (iris → violeta → cian)
   Paleta y tipo tomadas del brand kit oficial.
   ============================================================ */

:root {
  --ink:        #0B0B14;   /* Deep Space Ink — fondo */
  --ink-2:      #14141F;   /* panel */
  --card-bg:    rgba(17,16,29,0.62);
  --line:       #2A2A3A;

  --violet:     #6D28F0;   /* Nexus Violet */
  --iris:       #8B5CF6;   /* Iris */
  --cyan:       #22D3EE;   /* Signal Cyan */
  --white:      #F5F4FA;   /* Nebula White */
  --fg:         #ECECF4;
  --muted:      #9A9AB0;
  --faint:      #6A6A80;

  --grad:       linear-gradient(120deg, var(--iris), var(--violet) 48%, var(--cyan));
  --maxw:       1440px;
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink);
  color: var(--muted);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: rgba(139,92,246,0.35); color: var(--white); }
a { color: inherit; text-decoration: none; }

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: #07070E; }
::-webkit-scrollbar-thumb { background: #24243a; border-radius: 9px; border: 2px solid #07070E; }
::-webkit-scrollbar-thumb:hover { background: var(--violet); }

/* ---------- atmósfera fija ---------- */
.grain {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  opacity: 0.045; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette {
  position: fixed; inset: 0; z-index: 39; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 45%, rgba(109,40,240,0.10), transparent 60%),
    radial-gradient(ellipse 120% 90% at 50% 42%, transparent 0%, transparent 40%, rgba(0,0,0,0.62) 100%);
}

#scene {
  position: fixed; inset: 0; z-index: 1;
  width: 100vw; height: 100vh; display: block;
  opacity: 0; transition: opacity 1.2s var(--ease);
}
#scene.listo { opacity: 1; }

/* foco visible coherente en toda la página (teclado) */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* enlace para saltar directo al contenido con teclado */
.saltar {
  position: fixed; top: -100px; left: 1rem; z-index: 100;
  padding: 0.7rem 1.2rem; border-radius: 0 0 10px 10px;
  background: var(--violet); color: #fff;
  font-family: "JetBrains Mono", monospace; font-size: 0.66rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  transition: top 0.3s var(--ease);
}
.saltar:focus-visible { top: 0; }

.webgl-fallback {
  position: fixed; inset: 0; z-index: 2; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 40%, var(--ink-2), var(--ink) 70%);
  text-align: center; padding: 2rem;
}
.webgl-fallback p { color: var(--muted); font-size: clamp(1rem, 2.4vw, 1.35rem); line-height: 1.7; }

/* halo del cursor al mantener pulsado */
.focus-ring {
  position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  transition: opacity 0.6s var(--ease);
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%),
    rgba(34,211,238,0.13) 0%, rgba(139,92,246,0.07) 14%, transparent 28%);
  mix-blend-mode: screen;
}
body.focusing .focus-ring { opacity: 1; }

.focus-hud {
  position: fixed; left: 50%; bottom: clamp(1.4rem, 5vh, 3rem); z-index: 31;
  transform: translate(-50%, 8px); opacity: 0;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 1rem; border: 1px solid rgba(139,92,246,0.35);
  border-radius: 999px; background: rgba(11,11,20,0.72);
  backdrop-filter: blur(6px);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}
body.focusing .focus-hud { opacity: 1; transform: translate(-50%, 0); }
.fh-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 10px 2px rgba(34,211,238,0.75); animation: fhPulse 1.1s ease-in-out infinite;
}
@keyframes fhPulse { 0%,100% { transform: scale(0.7); opacity: 0.6; } 50% { transform: scale(1.2); opacity: 1; } }
.fh-label { font-size: 0.82rem; color: var(--white); letter-spacing: 0.04em; }
.fh-sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint);
}

/* ---------- chrome ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.2rem);
  padding: clamp(1.3rem, 2.4vw, 2.1rem) clamp(1.3rem, 3.5vw, 3rem);
  pointer-events: none;
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
/* al hacer scroll gana fondo: legible sobre las partículas más brillantes.
   Sin filo de 1px: la línea se marcaba como una cicatriz sobre los fondos
   oscuros (se veía sobre todo en contacto). El volumen lo da la sombra. */
.topbar.solida {
  background: rgba(11, 11, 20, 0.78);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 22px 48px -28px rgba(0, 0, 0, 0.9);
}
.topbar > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 0.8rem; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 11px; display: block;
  box-shadow: 0 0 26px -4px rgba(109,40,240,0.9);
}
.brand-word {
  font-weight: 600; font-size: 1.2rem; letter-spacing: -0.015em; color: var(--white);
}
.brand-word .thin { font-weight: 300; color: var(--iris); }
.topbar-nav {
  margin-left: auto; display: flex; align-items: center; gap: clamp(1rem, 2.1vw, 2.1rem);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
}

/* botón de demo: la acción principal de toda la web, siempre arriba a la derecha */
.topbar-demo {
  flex: none; cursor: pointer; border: 0;
  font-family: "JetBrains Mono", monospace; font-size: 0.66rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: #fff;
  padding: 0.78rem 1.35rem; border-radius: 999px;
  background: var(--grad); background-size: 190% 100%;
  box-shadow: 0 10px 30px -14px rgba(109,40,240,0.95);
  transition: background-position 0.7s var(--ease), transform 0.4s var(--ease),
              box-shadow 0.5s var(--ease);
}
.topbar-demo:hover {
  background-position: 100% 0; transform: translateY(-2px);
  box-shadow: 0 16px 38px -14px rgba(34,211,238,0.6);
}
/* nowrap obligatorio: la fila del menú desplaza en horizontal, y sin esto
   «Realidad virtual» se partía en dos líneas y estiraba la barra entera */
.topbar-nav a {
  color: var(--faint); transition: color 0.3s var(--ease);
  position: relative; white-space: nowrap;
}
.topbar-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: linear-gradient(90deg, var(--iris), var(--cyan));
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease);
}
.topbar-nav a:hover { color: var(--fg); }
.topbar-nav a:hover::after { transform: scaleX(1); }
.topbar-nav a.on { color: var(--white); }
.topbar-nav a.on::after { transform: scaleX(1); }
.topbar-idx {
  font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums;
  font-size: 0.82rem; color: var(--cyan); letter-spacing: 0.1em;
  min-width: 5ch; text-align: right;
}

/* pista de scroll */
.scroll-cue {
  position: fixed; left: 50%; bottom: clamp(1.4rem, 4vh, 2.6rem); z-index: 30;
  transform: translateX(-50%); display: flex; flex-direction: column;
  align-items: center; gap: 0.7rem; transition: opacity 0.7s var(--ease);
}
.scroll-cue.hidden { opacity: 0; pointer-events: none; }
.cue-word {
  font-family: "JetBrains Mono", monospace; font-size: 0.66rem;
  color: var(--faint); letter-spacing: 0.28em; text-transform: uppercase;
}
.cue-line {
  width: 1px; height: 42px;
  background: linear-gradient(var(--cyan), transparent);
  animation: cueDrift 2.6s var(--ease) infinite;
}
@keyframes cueDrift {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: scaleY(1); transform-origin: top; opacity: 0; }
}

/* ---------- secciones ---------- */
main { position: relative; z-index: 10; }

.panel {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  /* el mínimo superior deja libre la barra fija incluso en pantallas bajas */
  padding: max(9.5rem, 12vh) clamp(1.4rem, 6vw, 6rem) clamp(4rem, 10vh, 8rem);
}

/* en pantallas bajas el contenido se ancla arriba: nunca bajo la barra fija */
@media (max-height: 760px) { .panel { align-items: flex-start; } }

/* intro */
.intro-inner { max-width: 42rem; }
.kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 1.6rem;
}
.intro-title {
  font-weight: 600; font-size: clamp(2.3rem, 6.6vw, 4.6rem); line-height: 1.02;
  color: var(--white); letter-spacing: -0.035em; margin-bottom: 1.8rem;
}
.intro-title .line { display: block; }
.intro-title .grad {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.intro-lede {
  font-size: clamp(1rem, 1.4vw, 1.1rem); color: var(--muted);
  max-width: 36rem; margin-bottom: 1.4rem;
}
.intro-note {
  font-size: clamp(0.9rem, 1.3vw, 1rem); color: var(--faint); max-width: 32rem;
}
.intro-note em { color: var(--iris); font-style: normal; font-weight: 500; }
.np-touch { display: none; }

/* ---------- apartado Realidad Virtual (bloque encapsulado) ---------- */
.capitulo-rv { position: relative; }
/* raíl luminoso que recorre el lateral de todo el apartado */
.capitulo-rv::before {
  content: ""; position: absolute; z-index: 11;
  left: clamp(0.9rem, 2.4vw, 2rem); top: 4vh; bottom: 4vh; width: 1px;
  background: linear-gradient(180deg,
    transparent, var(--iris) 12%, var(--violet) 50%, var(--cyan) 88%, transparent);
  opacity: 0.55;
}
.capitulo-rail {
  position: sticky; top: 50vh; z-index: 11;
  display: block; height: 0;
  margin-left: clamp(0.9rem, 2.4vw, 2rem);
  pointer-events: none;
}
.capitulo-rail i {
  position: absolute; left: 0.55rem; top: 0;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: "JetBrains Mono", monospace; font-style: normal;
  font-size: 0.58rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--iris); opacity: 0.75; white-space: nowrap;
}
/* dentro del bloque, el contenido se separa del raíl */
.capitulo-rv .panel { padding-left: clamp(3rem, 7vw, 6rem); }

/* cabecera del apartado */
.capitulo-inner { max-width: 40rem; }
.capitulo-title {
  font-weight: 600; font-size: clamp(2.3rem, 6.4vw, 4.4rem); line-height: 1.0;
  color: var(--white); letter-spacing: -0.035em; margin-bottom: 1.4rem;
}
.capitulo-title .grad {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.capitulo-lede {
  font-size: clamp(0.98rem, 1.4vw, 1.1rem); color: var(--muted);
  max-width: 36rem; margin-bottom: 1.2rem;
}
.capitulo-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cyan);
}
.capitulo-inner { opacity: 0; transform: translateY(26px);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.panel.in-view .capitulo-inner { opacity: 1; transform: none; }

@media (max-width: 720px) {
  .capitulo-rv::before, .capitulo-rail { display: none; }
  .capitulo-rv .panel { padding-left: 1.3rem; }
}

/* fichas de servicio */
.card {
  position: relative; max-width: 31rem;
  background: var(--card-bg);
  backdrop-filter: blur(9px) saturate(1.2);
  -webkit-backdrop-filter: blur(9px) saturate(1.2);
  border: 1px solid rgba(139,92,246,0.16);
  border-left: none;
  border-radius: 0 16px 16px 0;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.95);
}
/* filo con el gradiente Nexus que se "dibuja" al entrar */
.card::before {
  content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(var(--iris), var(--violet) 50%, var(--cyan));
  transform: scaleY(0); transform-origin: top;
  transition: transform 1.1s var(--ease) 0.15s;
  box-shadow: 0 0 18px -2px rgba(139,92,246,0.8);
}
.panel.in-view .card::before { transform: scaleY(1); }
.card::after {
  content: "REF. " attr(data-ref);
  position: absolute; top: clamp(1.6rem,3vw,2.4rem); right: clamp(1.6rem,3vw,2.4rem);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem; letter-spacing: 0.16em; color: var(--faint); opacity: 0.6;
}
.card-left  { margin-right: auto; }
.card-right { margin-left: auto; }

.card-num {
  font-family: "JetBrains Mono", monospace;
  max-width: calc(100% - 6rem);   /* nunca por debajo del sello REF. */
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--iris); margin-bottom: 0.7rem;
}
.card-title {
  font-weight: 600; font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.08;
  color: var(--white); letter-spacing: -0.03em; margin-bottom: 1rem;
}
.card-meta {
  display: flex; flex-direction: column; gap: 0.18rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem; letter-spacing: 0.05em; color: var(--faint);
  text-transform: uppercase; margin-bottom: 1.1rem;
}
.card-rule {
  height: 1px; width: 100%; margin-bottom: 1.1rem;
  background: linear-gradient(90deg, var(--iris), var(--cyan) 40%, transparent);
  opacity: 0.55;
}
/* el último párrafo de la ficha ya no lleva el rótulo técnico debajo */
.card-body { font-size: 0.95rem; color: var(--muted); line-height: 1.75; margin-bottom: 0; }

/* ---------- página de proyectos (sin WebGL: atmósfera en CSS) ---------- */
/* columna en toda la altura: así el pie se queda pegado al fondo de la página
   aunque haya un solo proyecto y el contenido no llegue a llenar la pantalla */
.pagina-proyectos {
  background:
    radial-gradient(ellipse 70% 45% at 75% -5%, rgba(109,40,240,0.16), transparent 60%),
    radial-gradient(ellipse 55% 40% at 15% 110%, rgba(34,211,238,0.07), transparent 60%),
    var(--ink);
  min-height: 100vh;
  display: flex; flex-direction: column;
}
.pagina-proyectos > main { flex: 1 0 auto; }
.pagina-proyectos > .credit { margin-top: auto; }
.pagina-inner {
  width: 100%; max-width: 76rem; margin: 0 auto;
  padding: clamp(9.5rem, 17vh, 12rem) clamp(1.4rem, 4vw, 3rem) clamp(4rem, 9vh, 7rem);
}
.pagina-proyectos .proyectos-head h1 { margin-top: 0; }

/* teaser en la portada */
.proyectos-cta { margin-top: clamp(1.6rem, 3vw, 2.4rem); text-align: center; }
.ver-todos {
  display: inline-block;
  font-family: "JetBrains Mono", monospace; font-size: 0.68rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--white);
  padding: 0.85rem 1.7rem; border: 1px solid rgba(139,92,246,0.45);
  border-radius: 999px; transition: all 0.45s var(--ease);
}
.ver-todos:hover {
  border-color: var(--cyan); color: var(--cyan);
  box-shadow: 0 0 30px -8px rgba(34,211,238,0.6);
  transform: translateY(-2px);
}

/* ---------- proyectos ---------- */
/* la rejilla suele ser más alta que la pantalla: se ancla arriba para que no
   se recorte por el centro cuando crece la lista de proyectos */
.panel-proyectos { align-items: flex-start; isolation: isolate; }
.proyectos-inner { position: relative; z-index: 1; width: 100%; max-width: 76rem; margin: 0 auto; }

/* Aquí empieza otro capítulo, no otro módulo: la sección trae su propia
   atmósfera (luz violeta desde arriba, como si se entrara en otra sala) y se
   abre con un umbral a todo lo ancho. El bloque de RV se distingue con su raíl
   vertical; éste, con una línea horizontal — no compiten. */
.panel-proyectos::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 95% 40% at 50% 0%, rgba(109,40,240,0.22), transparent 62%),
    radial-gradient(ellipse 60% 42% at 84% 98%, rgba(34,211,238,0.09), transparent 62%);
  opacity: 0.45; transition: opacity 1.4s var(--ease);
}
.panel-proyectos.in-view::before { opacity: 1; }

.umbral {
  /* a todo lo ancho de la pantalla, se salga de donde se salga */
  position: relative; left: 50%; transform: translateX(-50%);
  width: 100vw; max-width: none;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.4rem);
  padding: 0 clamp(1.4rem, 6vw, 6rem);
  margin-bottom: clamp(2.6rem, 6vw, 4.6rem);
}
/* El estado de reposo ya es visible (líneas cortas y apagadas): al entrar en
   vista se estiran y encienden. Así, si el observador de scroll no llega a
   dispararse —vive dentro de boot(), que sólo corre si hay WebGL—, el umbral
   sigue estando ahí en vez de dejar un hueco en blanco. */
.umbral-linea {
  flex: 1; height: 1px; min-width: 0;
  background: linear-gradient(90deg, transparent, var(--iris) 55%, var(--cyan));
  transform: scaleX(0.32); transform-origin: right; opacity: 0.45;
  transition: transform 1.3s var(--ease) 0.15s, opacity 1.1s var(--ease) 0.15s;
}
.umbral-linea:last-child {
  background: linear-gradient(90deg, var(--cyan), var(--iris) 45%, transparent);
  transform-origin: left;
}
.panel.in-view .umbral-linea { transform: scaleX(1); opacity: 1; }

.umbral-sello {
  flex: none; display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 1.1rem 0.5rem 0.6rem; border-radius: 999px;
  border: 1px solid rgba(139,92,246,0.35); background: rgba(11,11,20,0.7);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 34px -10px rgba(109,40,240,0.9);
  opacity: 0.6; transform: translateY(6px);
  transition: opacity 0.9s var(--ease) 0.25s, transform 1s var(--ease) 0.25s;
}
.panel.in-view .umbral-sello { opacity: 1; transform: none; }
.umbral-sello svg {
  width: 26px; height: 26px; flex: none; border-radius: 7px; display: block;
  color: #fff; background: var(--grad); padding: 3px;
}
.umbral-sello i {
  font-family: "JetBrains Mono", monospace; font-style: normal;
  font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--white); white-space: nowrap;
}

@media (max-width: 560px) {
  .umbral { gap: 0.8rem; padding: 0 1.3rem; }
  .umbral-sello { padding: 0.42rem 0.8rem 0.42rem 0.45rem; gap: 0.5rem; }
  .umbral-sello svg { width: 22px; height: 22px; }
  .umbral-sello i { font-size: 0.55rem; letter-spacing: 0.2em; }
}
.proyectos-head { max-width: 46rem; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.proyectos-title {
  font-weight: 600; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.04;
  color: var(--white); letter-spacing: -0.035em; margin-bottom: 1rem;
}
.proyectos-lede { color: var(--muted); font-size: clamp(0.98rem, 1.4vw, 1.08rem); max-width: 38rem; }

.proyectos-barra {
  display: flex; align-items: center; gap: 1rem 1.4rem; flex-wrap: wrap;
  margin-top: 1.6rem;
}
.filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  font-family: "JetBrains Mono", monospace; font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  background: rgba(139,92,246,0.07); border: 1px solid rgba(139,92,246,0.22);
  border-radius: 999px; padding: 0.45rem 0.9rem; cursor: pointer;
  transition: all 0.35s var(--ease);
}
.chip:hover { color: var(--fg); border-color: rgba(34,211,238,0.5); }
.chip.on {
  color: var(--ink); border-color: transparent;
  background: linear-gradient(120deg, var(--iris), var(--cyan));
  font-weight: 500;
}
.proyectos-grid {
  display: grid; gap: clamp(1rem, 1.8vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.proyecto {
  display: flex; flex-direction: column; text-align: left; cursor: pointer;
  background: var(--card-bg); color: inherit; font: inherit;
  border: 1px solid rgba(139,92,246,0.16); border-radius: 16px; overflow: hidden;
  backdrop-filter: blur(9px) saturate(1.2);
  -webkit-backdrop-filter: blur(9px) saturate(1.2);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.proyecto:hover, .proyecto:focus-visible {
  transform: translateY(-4px); border-color: rgba(34,211,238,0.42);
  box-shadow: 0 26px 60px -28px rgba(109,40,240,0.9);
}
.proyecto.destacado { border-color: rgba(139,92,246,0.38); }
.proyecto-media {
  display: block; aspect-ratio: 16 / 10; overflow: hidden; position: relative;
  background: linear-gradient(140deg, rgba(139,92,246,0.22), rgba(34,211,238,0.12));
}
.proyecto-media img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.9s var(--ease); }
.proyecto:hover .proyecto-media img { transform: scale(1.045); }
.proyecto-sinimg {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 3rem; font-weight: 600; color: rgba(245,244,250,0.30);
}
.proyecto-cuerpo { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.15rem 1.25rem 1.35rem; }
.proyecto-alto {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: "JetBrains Mono", monospace; font-size: 0.56rem;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.proyecto-cat { color: var(--cyan); }
.proyecto-anio { color: var(--faint); margin-left: auto; }
.proyecto-titulo {
  font-size: 1.12rem; font-weight: 600; color: var(--white);
  letter-spacing: -0.02em; line-height: 1.22;
}
.proyecto-cliente {
  font-family: "JetBrains Mono", monospace; font-size: 0.6rem;
  letter-spacing: 0.1em; color: var(--iris);
}
.proyecto-resumen { font-size: 0.88rem; color: var(--muted); line-height: 1.6; }
.proyecto-tec { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
.proyecto-tec span {
  font-family: "JetBrains Mono", monospace; font-size: 0.54rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem 0.55rem;
}
.proyectos-vacio {
  border: 1px dashed rgba(139,92,246,0.3); border-radius: 16px;
  padding: clamp(2rem, 5vw, 3.4rem); text-align: center; color: var(--muted);
  background: rgba(20,20,31,0.42);
}
.proyectos-vacio a { color: var(--cyan); border-bottom: 1px solid rgba(34,211,238,0.4); }

/* ---------- ficha ampliada ---------- */
.modal {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(5,5,11,0.82); backdrop-filter: blur(10px);
  animation: modalIn 0.35s var(--ease);
}
@keyframes modalIn { from { opacity: 0; } to { opacity: 1; } }
body.modal-abierto { overflow: hidden; }
.modal-caja {
  position: relative; width: min(52rem, 100%); max-height: 88vh; overflow-y: auto;
  background: #12111d; border: 1px solid rgba(139,92,246,0.28); border-radius: 20px;
  box-shadow: 0 40px 110px -40px rgba(0,0,0,1);
}
.modal-cerrar {
  position: absolute; top: 0.8rem; right: 0.9rem; z-index: 2;
  width: 2.2rem; height: 2.2rem; border-radius: 50%; cursor: pointer;
  background: rgba(11,11,20,0.72); border: 1px solid rgba(139,92,246,0.3);
  color: var(--fg); font-size: 1.3rem; line-height: 1;
  transition: all 0.3s var(--ease);
}
.modal-cerrar:hover { background: var(--violet); border-color: var(--violet); }
.modal-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-2); }
.modal-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal-texto { padding: clamp(1.4rem, 3vw, 2.2rem); }
.modal-meta {
  font-family: "JetBrains Mono", monospace; font-size: 0.6rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan);
  margin-bottom: 0.6rem;
}
.modal-titulo {
  font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600; color: var(--white);
  letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 0.9rem;
}
.modal-resumen { color: var(--fg); font-size: 1rem; margin-bottom: 1rem; }
.modal-desc p { color: var(--muted); font-size: 0.94rem; line-height: 1.75; margin-bottom: 0.9rem; }
.modal-tec { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.2rem 0; }
.modal-tec span {
  font-family: "JetBrains Mono", monospace; font-size: 0.56rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.25rem 0.65rem;
}
.modal-enlace {
  display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 0.66rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--white);
  padding: 0.75rem 1.4rem; border-radius: 999px;
  background: var(--grad); background-size: 180% 100%;
  transition: background-position 0.7s var(--ease), transform 0.4s var(--ease);
}
.modal-enlace:hover { background-position: 100% 0; transform: translateY(-2px); }

/* pestañas de ejemplos dentro del apartado RV */
.card-tabs .tabs { display: flex; gap: 0.5rem; margin-bottom: 1.3rem; }
.tab {
  font-family: "JetBrains Mono", monospace; font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  background: rgba(139,92,246,0.07); border: 1px solid rgba(139,92,246,0.25);
  border-radius: 999px; padding: 0.5rem 1.1rem; cursor: pointer;
  transition: all 0.35s var(--ease);
}
.tab:hover { color: var(--fg); border-color: rgba(34,211,238,0.5); }
.tab.on {
  color: var(--ink); border-color: transparent; font-weight: 500;
  background: linear-gradient(120deg, var(--iris), var(--cyan));
}
.tab-panel { animation: tabIn 0.55s var(--ease); }
@keyframes tabIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tab-panel { animation: none; } }

/* ---------- contacto ---------- */
/* El sobre de partículas ocupa la franja de arriba: el texto arranca por
   debajo, con aire de sobra, para que nunca se pisen. Anclado arriba (y no
   centrado) para que la distancia al icono sea la misma siempre. */
.panel-outro {
  align-items: flex-start;
  padding-top: clamp(17rem, 46vh, 30rem);
}
.outro-inner { max-width: 42rem; margin: 0 auto; text-align: center; }
.outro-title {
  font-weight: 600; font-size: clamp(1.9rem, 5.2vw, 3.4rem); line-height: 1.06;
  color: var(--white); margin-bottom: 1.4rem; letter-spacing: -0.035em;
}
.outro-body { font-size: clamp(0.98rem, 1.4vw, 1.1rem); color: var(--muted); max-width: 36rem; margin: 0 auto 2.2rem; }
.outro-acciones {
  display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; align-items: center;
}
.outro-cta2 {
  display: inline-block; cursor: pointer;
  font-family: "JetBrains Mono", monospace; font-size: 0.7rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--white);
  padding: 0.95rem 2rem; border-radius: 999px;
  background: transparent; border: 1px solid rgba(139,92,246,0.45);
  transition: border-color 0.45s var(--ease), color 0.45s var(--ease),
              box-shadow 0.5s var(--ease), transform 0.4s var(--ease);
}
.outro-cta2:hover {
  border-color: var(--cyan); color: var(--cyan); transform: translateY(-2px);
  box-shadow: 0 0 30px -8px rgba(34,211,238,0.6);
}
.outro-cta {
  display: inline-block; position: relative;
  font-family: "JetBrains Mono", monospace; font-size: 0.7rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--white);
  padding: 0.95rem 2rem; border-radius: 999px;
  background: var(--grad); background-size: 180% 100%;
  transition: background-position 0.7s var(--ease), box-shadow 0.5s var(--ease), transform 0.4s var(--ease);
  box-shadow: 0 12px 40px -14px rgba(109,40,240,0.9);
}
.outro-cta:hover {
  background-position: 100% 0; transform: translateY(-2px);
  box-shadow: 0 18px 50px -12px rgba(34,211,238,0.55);
}
.outro-email {
  margin-top: 1.3rem;
  font-family: "JetBrains Mono", monospace; font-size: 0.64rem;
  letter-spacing: 0.08em; color: var(--faint);
}
.outro-email a { color: var(--cyan); border-bottom: 1px solid rgba(34,211,238,0.35); }
.outro-email a:hover { border-bottom-color: var(--cyan); }

/* ---------- entradas ---------- */
.card, .intro-inner, .outro-inner {
  opacity: 0; transform: translateY(26px);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}
.panel.in-view .card,
.panel.in-view .intro-inner,
.panel.in-view .outro-inner { opacity: 1; transform: none; }

/* el titular del hero entra línea a línea, en cascada */
.intro-title .line { opacity: 0; transform: translateY(26px); }
.panel.in-view .intro-title .line { animation: lineIn 0.9s var(--ease) both; }
.panel.in-view .intro-title .line:nth-child(1) { animation-delay: 0.10s; }
.panel.in-view .intro-title .line:nth-child(2) { animation-delay: 0.22s; }
.panel.in-view .intro-title .line:nth-child(3) { animation-delay: 0.34s; }
.panel.in-view .intro-title .line:nth-child(4) { animation-delay: 0.46s; }
@keyframes lineIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.intro-lede, .intro-note { opacity: 0; transition: opacity 1s var(--ease) 0.65s; }
.panel.in-view .intro-lede, .panel.in-view .intro-note { opacity: 1; }

.panel.in-view .card-meta span { animation: metaIn 0.8s var(--ease) both; }
.panel.in-view .card-meta span:nth-child(2) { animation-delay: 0.08s; }
.panel.in-view .card-meta span:nth-child(3) { animation-delay: 0.16s; }
@keyframes metaIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* ---------- pie ---------- */
.credit {
  position: relative; z-index: 10;
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1.4rem, 6vw, 6rem) clamp(2rem, 4vw, 3rem);
  color: var(--faint);
  border-top: 1px solid rgba(139,92,246,0.14);
  background: linear-gradient(transparent, rgba(6,6,12,0.92));
}
.credit-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; gap: clamp(2.2rem, 5vw, 4rem);
  grid-template-columns: minmax(16rem, 1.6fr) repeat(2, minmax(8rem, 0.8fr)) minmax(14rem, 1.1fr);
}
.credit-brand { display: inline-flex; align-items: center; gap: 0.8rem; margin-bottom: 1.1rem; }
.credit-claim {
  font-size: 0.94rem; line-height: 1.7; color: var(--muted);
  max-width: 24rem; margin-bottom: 1.1rem;
}
.credit-mail {
  font-family: "JetBrains Mono", monospace; font-size: 0.72rem;
  letter-spacing: 0.08em; color: var(--cyan);
  border-bottom: 1px solid rgba(34,211,238,0.35); padding-bottom: 2px;
}
.credit-col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.credit-tit {
  font-family: "JetBrains Mono", monospace; font-weight: 400;
  font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--iris); margin-bottom: 0.3rem;
}
.credit-col a { font-size: 0.92rem; color: var(--muted); }
.credit-cta-txt { font-size: 0.9rem; line-height: 1.65; color: var(--muted); }
.credit-demo {
  margin-top: 0.4rem; cursor: pointer; border: 0;
  font-family: "JetBrains Mono", monospace; font-size: 0.64rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: #fff;
  padding: 0.8rem 1.5rem; border-radius: 999px;
  background: var(--grad); background-size: 190% 100%;
  box-shadow: 0 12px 32px -16px rgba(109,40,240,0.95);
  transition: background-position 0.7s var(--ease), transform 0.4s var(--ease);
}
.credit-demo:hover { background-position: 100% 0; transform: translateY(-2px); }

.credit-base {
  max-width: var(--maxw); margin: clamp(2.6rem, 5vw, 4rem) auto 0;
  padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid rgba(139,92,246,0.10);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.6rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem; letter-spacing: 0.1em;
}
.credit a { transition: color 0.3s; }
.credit a:hover { color: var(--cyan); }
.credit-build { color: var(--iris) !important; margin-left: auto; }

@media (max-width: 900px) {
  .credit-inner { grid-template-columns: 1fr 1fr; }
  .credit-marca, .credit-col-cta { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .credit-inner { grid-template-columns: 1fr; }
  .credit-build { margin-left: 0; }
}

.live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- responsive ---------- */
/* Entre tableta y portátil pequeño la fila entera (marca + menú + demo +
   índice) ya no cabe: el menú baja a su propia línea y el índice se retira,
   que es lo primero que sobra. */
@media (min-width: 721px) and (max-width: 1120px) {
  .topbar { flex-wrap: wrap; row-gap: 0.6rem; }
  .topbar-nav { order: 3; width: 100%; margin-left: 0; justify-content: flex-start; }
  .topbar-demo { margin-left: auto; }
  .topbar-idx { display: none; }
}

@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 0.45rem 0.9rem; padding: 0.8rem 1.2rem; }
  .brand-mark { width: 32px; height: 32px; border-radius: 9px; }
  .brand-word { font-size: 0.92rem; }
  .topbar-nav {
    margin-left: 0; width: 100%; order: 3; gap: 1.05rem;
    font-size: 0.68rem; letter-spacing: 0.12em;
    overflow-x: auto; scrollbar-width: none;
  }
  .topbar-nav::-webkit-scrollbar { display: none; }
  /* el enlace es sólo texto: se le da alto de dedo sin mover la maquetación */
  .topbar-nav a { padding: 0.5rem 0; }
  .topbar-nav a::after { bottom: 1px; }
  .topbar-demo {
    margin-left: auto; order: 2;
    font-size: 0.66rem; letter-spacing: 0.12em; padding: 0.82rem 1.15rem;
  }
  /* con el botón de demo delante, el índice de sección sobra en móvil */
  .topbar-idx { display: none; }
  /* Sólo por debajo de 360px la marca escrita y el botón dejan de caber en la
     misma fila (y la barra pasaba a tres alturas: 140px, un quinto de un
     iPhone SE). Ahí se queda el isotipo, que es lo que identifica. De 361px
     para arriba —o sea, en casi cualquier móvil de hoy— el nombre se lee. */
  @media (max-width: 360px) {
    .brand-word { display: none; }
  }
  /* controles táctiles: nada por debajo de ~40px de alto */
  .tab { font-size: 0.68rem; padding: 0.75rem 1.2rem; }
  .capitulo-meta { font-size: 0.7rem; letter-spacing: 0.1em; }
  /* etiquetas mono que llevan información, no adorno: suelo de legibilidad */
  .proyecto-alto, .modal-meta { font-size: 0.66rem; }
  .proyecto-tec span, .modal-tec span { font-size: 0.66rem; }
  .credit-tit { font-size: 0.68rem; }
  .proyecto-cliente { font-size: 0.66rem; }
  .umbral-sello i { font-size: 0.66rem; }
  .card::after { font-size: 0.62rem; }
  /* dvh en vez de vh: descuenta la barra del navegador, así el diálogo no se
     va por debajo del borde cuando sale el teclado. Si no hay soporte, se
     queda con el 88vh de la regla base. */
  .modal-caja { max-height: 88dvh; }
  .modal-cerrar { width: 2.6rem; height: 2.6rem; }
  /* OJO: los ajustes móviles de la lista de proyectos, la página de proyecto
     y el formulario de demo NO van aquí: esos componentes se declaran más
     abajo en el archivo y ganarían por orden. Están al final del todo. */
  .card {
    max-width: 100%; margin: 0; border-radius: 14px;
    border-left: 1px solid rgba(139,92,246,0.16);
    background: rgba(13,12,22,0.86); backdrop-filter: blur(12px) saturate(1.2);
  }
  .card::before { left: 0; border-radius: 14px 0 0 14px; }
  .card-left, .card-right { margin: 0; }
  .card-body { font-size: 0.9rem; line-height: 1.68; }
  .np-pointer { display: none; }
  .np-touch { display: inline; }
  /* la barra de dos filas ocupa ~107px: el contenido la despeja con holgura,
     no la roza. OJO: esta abreviada pisa cualquier padding-top que se declare
     antes en este mismo bloque — si hay que cambiarlo, se cambia aquí. */
  .panel { padding: 9.5rem 1.3rem 3.5rem; }
  /* en móvil el sobre se queda casi en polvo (data-assemble-narrow): no hace
     falta reservarle media pantalla, pero sí un respiro claro */
  .panel-outro { padding-top: clamp(11rem, 30vh, 16rem); }
  .outro-acciones { flex-direction: column; }
  .outro-cta, .outro-cta2 { width: 100%; }
  /* la banda superior es para la pieza 3D; la ficha va debajo aunque la
     sección crezca por encima de 100vh */
  .panel-service { align-items: flex-end; padding-top: 40vh; }
}

/* ============================================================
   LISTA DE PROYECTOS — filas grandes apiladas
   Cada proyecto ocupa su propia banda: imagen a un lado, lo que
   es y para quién al otro, y la entrada a su página.
   ============================================================ */
.proyectos-lista {
  display: flex; flex-direction: column;
  gap: clamp(3rem, 7vw, 6rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.proyecto-fila {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3.6rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
  border-bottom: 1px solid rgba(139,92,246,0.13);
}
.proyectos-lista .proyecto-fila:last-child { border-bottom: none; padding-bottom: 0; }
/* en zigzag: la imagen alterna de lado, como en una revista */
.proyecto-fila:nth-child(even) .proyecto-fila-media { order: 2; }

.proyecto-fila-media {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 16 / 10; border-radius: 18px;
  border: 1px solid rgba(139,92,246,0.18);
  background: linear-gradient(140deg, rgba(139,92,246,0.22), rgba(34,211,238,0.12));
  box-shadow: 0 34px 80px -44px rgba(0,0,0,0.95);
  transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease),
              transform 0.6s var(--ease);
}
.proyecto-fila-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1s var(--ease);
}
.proyecto-fila:hover .proyecto-fila-media {
  border-color: rgba(34,211,238,0.42); transform: translateY(-4px);
  box-shadow: 0 40px 90px -40px rgba(109,40,240,0.85);
}
.proyecto-fila:hover .proyecto-fila-media img { transform: scale(1.045); }
.proyecto-fila.destacado .proyecto-fila-media { border-color: rgba(139,92,246,0.4); }

.proyecto-fila-txt { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.proyecto-fila-alto {
  display: flex; align-items: center; gap: 0.9rem;
  font-family: "JetBrains Mono", monospace; font-size: 0.6rem;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.proyecto-fila-tit {
  font-size: clamp(1.5rem, 3.2vw, 2.5rem); font-weight: 600; color: var(--white);
  letter-spacing: -0.03em; line-height: 1.1;
}
.proyecto-fila-tit a { transition: color 0.35s var(--ease); }
.proyecto-fila:hover .proyecto-fila-tit a { color: var(--cyan); }
.proyecto-fila-cli {
  font-family: "JetBrains Mono", monospace; font-size: 0.66rem;
  letter-spacing: 0.1em; color: var(--iris);
}
.proyecto-fila-res {
  font-size: clamp(0.95rem, 1.3vw, 1.04rem); color: var(--muted);
  line-height: 1.7; max-width: 34rem;
}
.proyecto-fila-cta { margin-top: 0.5rem; }
.ver-proyecto {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: "JetBrains Mono", monospace; font-size: 0.66rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--white);
  padding: 0.8rem 1.6rem; border-radius: 999px;
  border: 1px solid rgba(139,92,246,0.45);
  transition: all 0.45s var(--ease);
}
.ver-proyecto:hover {
  border-color: var(--cyan); color: var(--cyan); transform: translateY(-2px);
  box-shadow: 0 0 30px -8px rgba(34,211,238,0.6);
}

@media (max-width: 820px) {
  .proyecto-fila { grid-template-columns: 1fr; gap: 1.4rem; }
  .proyecto-fila:nth-child(even) .proyecto-fila-media { order: 0; }
}

/* tarjeta del final de la ficha: entrada a la página del proyecto */
.modal-pagina {
  display: flex; align-items: center; gap: 1.2rem;
  margin: 1.6rem 0 0.4rem; padding: 1.1rem 1.3rem;
  border: 1px solid rgba(139,92,246,0.3); border-radius: 16px;
  background: linear-gradient(120deg, rgba(139,92,246,0.12), rgba(34,211,238,0.07));
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease),
              box-shadow 0.5s var(--ease);
}
.modal-pagina:hover {
  border-color: rgba(34,211,238,0.55); transform: translateY(-2px);
  box-shadow: 0 24px 50px -30px rgba(34,211,238,0.7);
}
.modal-pagina-txt { display: flex; flex-direction: column; gap: 0.25rem; }
.modal-pagina-kicker {
  font-family: "JetBrains Mono", monospace; font-size: 0.56rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan);
}
.modal-pagina-tit { font-size: 1.02rem; font-weight: 600; color: var(--white); letter-spacing: -0.02em; }
.modal-pagina-sub { font-size: 0.86rem; color: var(--muted); }
.modal-pagina-flecha {
  margin-left: auto; flex: none; font-size: 1.25rem; color: var(--cyan);
  transition: transform 0.4s var(--ease);
}
.modal-pagina:hover .modal-pagina-flecha { transform: translateX(4px); }

/* ============================================================
   PÁGINA DE UN PROYECTO  (proyecto.html)
   ============================================================ */
.landing {
  width: 100%; max-width: 76rem; margin: 0 auto;
  padding: clamp(8.5rem, 15vh, 11rem) clamp(1.4rem, 4vw, 3rem) clamp(4rem, 9vh, 7rem);
}
.landing-cargando {
  font-family: "JetBrains Mono", monospace; font-size: 0.66rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint);
  padding: 6rem 0;
}
.landing-migas {
  display: inline-block; margin-bottom: 2rem;
  font-family: "JetBrains Mono", monospace; font-size: 0.64rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--iris);
}
.landing-migas:hover { color: var(--cyan); }
.landing-titulo {
  font-weight: 600; font-size: clamp(2.2rem, 6.4vw, 4.4rem); line-height: 1.02;
  color: var(--white); letter-spacing: -0.04em; margin-bottom: 1.2rem;
  max-width: 22ch;
}
.landing-sub {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.6;
  color: var(--fg); max-width: 44rem; margin-bottom: 1.4rem;
}
.landing-cliente {
  display: inline-flex; align-items: baseline; gap: 0.6rem;
  font-family: "JetBrains Mono", monospace; font-size: 0.72rem;
  letter-spacing: 0.08em; color: var(--white); margin-bottom: clamp(2rem, 4vw, 3rem);
}
.landing-cliente span {
  font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint);
}

.landing-media {
  position: relative; overflow: hidden; border-radius: 20px;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(139,92,246,0.2);
  background: linear-gradient(140deg, rgba(139,92,246,0.22), rgba(34,211,238,0.12));
  box-shadow: 0 46px 110px -50px rgba(0,0,0,1);
}
.landing-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.landing-sinimg {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: clamp(4rem, 14vw, 9rem); font-weight: 600; color: rgba(245,244,250,0.22);
}
.landing-play {
  position: absolute; inset: 0; margin: auto; width: max-content; height: max-content;
  display: inline-flex; align-items: center; gap: 0.8rem; cursor: pointer;
  padding: 1rem 1.9rem; border-radius: 999px; border: 1px solid rgba(245,244,250,0.35);
  background: rgba(11,11,20,0.62); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: "JetBrains Mono", monospace; font-size: 0.68rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--white);
  transition: all 0.45s var(--ease);
}
.landing-play:hover {
  border-color: var(--cyan); color: var(--cyan); transform: scale(1.04);
  box-shadow: 0 0 40px -10px rgba(34,211,238,0.8);
}
.landing-play-icono { font-size: 0.8rem; }

.landing-seccion {
  margin-top: clamp(3.5rem, 8vw, 6.5rem);
  padding-top: clamp(2.4rem, 5vw, 4rem);
  border-top: 1px solid rgba(139,92,246,0.14);
}
.landing-h2 {
  font-family: "JetBrains Mono", monospace; font-weight: 400;
  font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.landing-h3 {
  font-family: "JetBrains Mono", monospace; font-weight: 400;
  font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--iris); margin-bottom: 0.9rem;
}

/* ficha técnica: los datos duros, en rejilla */
.ficha-rejilla {
  display: grid; gap: clamp(1.2rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}
.ficha-dato { border-left: 2px solid rgba(139,92,246,0.4); padding-left: 1rem; }
.ficha-dato dt {
  font-family: "JetBrains Mono", monospace; font-size: 0.56rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint);
  margin-bottom: 0.4rem;
}
.ficha-dato dd {
  font-size: 1.05rem; font-weight: 500; color: var(--white); line-height: 1.35;
  letter-spacing: -0.01em;
}

.landing-texto { max-width: 44rem; }
.landing-texto p { font-size: 1.02rem; color: var(--muted); line-height: 1.8; margin-bottom: 1.2rem; }
.landing-tec { margin-top: clamp(2rem, 4vw, 3rem); }

/* galería */
.galeria-rejilla {
  display: grid; gap: clamp(0.7rem, 1.5vw, 1.1rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.galeria-foto {
  display: block; padding: 0; cursor: zoom-in; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: 14px;
  border: 1px solid rgba(139,92,246,0.18); background: var(--ink-2);
  transition: border-color 0.45s var(--ease), transform 0.5s var(--ease);
}
.galeria-foto img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.9s var(--ease); }
.galeria-foto:hover { border-color: rgba(34,211,238,0.45); transform: translateY(-3px); }
.galeria-foto:hover img { transform: scale(1.05); }

/* créditos */
.creditos-lista {
  display: grid; gap: 0.9rem clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
.credito {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.9rem;
  padding-bottom: 0.7rem; border-bottom: 1px dotted rgba(139,92,246,0.2);
}
.credito dt {
  flex: none; min-width: 9rem;
  font-family: "JetBrains Mono", monospace; font-size: 0.56rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint);
}
.credito dd { color: var(--fg); font-size: 0.95rem; }

/* llamada a la acción de la página del proyecto */
.landing-cta { text-align: center; }
.landing-cta-tit {
  font-weight: 600; font-size: clamp(1.7rem, 4vw, 2.8rem); line-height: 1.08;
  color: var(--white); letter-spacing: -0.035em; margin-bottom: 1rem;
}
.landing-cta-txt {
  font-size: clamp(0.98rem, 1.4vw, 1.1rem); color: var(--muted);
  max-width: 36rem; margin: 0 auto 2rem;
}
.landing-cta-botones {
  display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center;
}
.landing-otros .proyectos-grid { margin-top: 0; }
.landing-otros .proyecto { cursor: pointer; }
.landing-404 { border-top: none; text-align: center; padding-top: clamp(3rem, 10vh, 7rem); }

/* ============================================================
   VENTANA DE «RESERVA UNA DEMO»
   ============================================================ */
.demo-caja { width: min(46rem, 100%); }
.demo-texto { padding: clamp(1.6rem, 3.4vw, 2.6rem); }
.demo-titulo {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 600; color: var(--white);
  letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 0.9rem;
}
.demo-lede { font-size: 0.96rem; color: var(--muted); line-height: 1.7; margin-bottom: 0.9rem; }
.demo-contexto {
  display: inline-block; margin-bottom: 1.2rem;
  font-family: "JetBrains Mono", monospace; font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan);
  border: 1px solid rgba(34,211,238,0.3); border-radius: 999px; padding: 0.35rem 0.8rem;
}
.demo-form { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 1rem; }
.demo-fila { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.demo-campo { display: flex; flex-direction: column; gap: 0.4rem; }
.demo-campo label {
  font-family: "JetBrains Mono", monospace; font-size: 0.58rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint);
}
.demo-campo .req { color: var(--cyan); }
.demo-campo .opt { color: #4d4d63; letter-spacing: 0.08em; }
.demo-campo input, .demo-campo select, .demo-campo textarea {
  font-family: inherit; font-size: 0.95rem; font-weight: 300; color: var(--fg);
  background: rgba(11,11,20,0.6); border: 1px solid var(--line);
  border-radius: 10px; padding: 0.72rem 0.85rem; width: 100%;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.demo-campo textarea { resize: vertical; line-height: 1.6; min-height: 6rem; }
.demo-campo input:focus, .demo-campo select:focus, .demo-campo textarea:focus {
  outline: none; border-color: var(--iris); background: rgba(11,11,20,0.85);
}
.demo-campo input:focus-visible, .demo-campo select:focus-visible, .demo-campo textarea:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px;
}
.demo-campo select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--iris) 50%),
                    linear-gradient(135deg, var(--iris) 50%, transparent 50%);
  background-position: right 1.05rem center, right 0.8rem center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.demo-consent { font-size: 0.84rem; color: var(--muted); line-height: 1.6; }
.demo-consent label { display: flex; gap: 0.65rem; align-items: flex-start; cursor: pointer; }
.demo-consent input { margin-top: 0.28rem; accent-color: var(--violet); flex: none; }
.demo-consent a { color: var(--cyan); border-bottom: 1px solid rgba(34,211,238,0.4); }
.demo-trampa {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.demo-error {
  font-size: 0.88rem; color: #FCA5A5;
  background: rgba(251,113,133,0.08); border: 1px solid rgba(251,113,133,0.3);
  border-radius: 10px; padding: 0.7rem 0.9rem;
}
.demo-acciones {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem;
  margin-top: 0.4rem;
}
.demo-enviar {
  cursor: pointer; border: 0;
  font-family: "JetBrains Mono", monospace; font-size: 0.68rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: #fff;
  padding: 0.95rem 1.9rem; border-radius: 999px;
  background: var(--grad); background-size: 190% 100%;
  box-shadow: 0 14px 40px -18px rgba(109,40,240,0.95);
  transition: background-position 0.7s var(--ease), transform 0.4s var(--ease);
}
.demo-enviar:hover:not(:disabled) { background-position: 100% 0; transform: translateY(-2px); }
.demo-enviar:disabled { opacity: 0.55; cursor: progress; }
.demo-alt {
  font-family: "JetBrains Mono", monospace; font-size: 0.62rem;
  letter-spacing: 0.06em; color: var(--faint);
}
.demo-alt a { color: var(--cyan); }
.demo-ok { text-align: center; padding: 2rem 0 0.6rem; }
.demo-ok-icono {
  width: 3.2rem; height: 3.2rem; margin: 0 auto 1.2rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.4rem; color: var(--ink);
  background: linear-gradient(120deg, var(--iris), var(--cyan));
}
.demo-ok h3 { font-size: 1.4rem; font-weight: 600; color: var(--white); margin-bottom: 0.7rem; }
.demo-ok-txt { color: var(--muted); font-size: 0.95rem; margin-bottom: 1.6rem; }

@media (max-width: 560px) {
  .demo-fila { grid-template-columns: 1fr; }
}

/* ---------- visor de vídeo y de fotos ---------- */
.video-caja { width: min(64rem, 100%); background: #0b0b14; border-color: rgba(139,92,246,0.22); }
.video-hueco { aspect-ratio: 16 / 9; background: #000; border-radius: 20px; overflow: hidden; }
.video-hueco iframe, .video-hueco video {
  width: 100%; height: 100%; display: block; border: 0;
}
.video-hueco .video-foto { width: 100%; height: 100%; object-fit: contain; display: block; }
.modal-video .modal-cerrar { top: -0.6rem; right: -0.6rem; background: var(--ink-2); }

/* ============================================================
   MÓVIL — ajustes de los componentes declarados arriba
   Tienen que ir AQUÍ, al final: los media query no suman
   especificidad, así que una regla igual de específica escrita
   más abajo gana. Puestos junto al resto de móvil, no aplicaban.
   ============================================================ */
@media (max-width: 720px) {
  /* etiquetas que llevan el dato, no adorno: fuera los 9px */
  .proyecto-fila-alto { font-size: 0.66rem; }
  .proyecto-fila-cli  { font-size: 0.7rem; }
  .ficha-dato dt, .credito dt, .landing-cliente span, .landing-h3 { font-size: 0.66rem; }
  .credito dt { min-width: 7.5rem; }
  .landing-h2 { font-size: 0.7rem; }

  /* 16px CLAVADOS, y en px a propósito: Safari de iOS amplía la página al
     enfocar cualquier campo que baje de 16px, y el visitante se queda con
     todo ampliado teniendo que volver a pellizcar para salir. */
  .demo-campo input, .demo-campo select, .demo-campo textarea { font-size: 16px; }
  .demo-campo label { font-size: 0.68rem; letter-spacing: 0.1em; }
  .demo-consent { font-size: 0.9rem; }
  .demo-alt { font-size: 0.7rem; }
  .demo-enviar { width: 100%; }
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cue-line { animation: none; }
  .card, .intro-inner, .outro-inner { transition: opacity 0.4s ease; transform: none; }
  .card-meta span { animation: none !important; }
  .fh-dot { animation: none; }
  .intro-title .line { opacity: 1; transform: none; animation: none !important; }
  .intro-lede, .intro-note { opacity: 1; transition: none; }
  .proyecto, .proyecto-media img, .ver-todos, .outro-cta { transition: none; }
  .umbral-linea { transform: scaleX(1); transition: none; }
  .umbral-sello { opacity: 1; transform: none; transition: none; }
  .panel-proyectos::before { opacity: 1; transition: none; }
  .proyecto-fila-media, .proyecto-fila-media img, .ver-proyecto,
  .modal-pagina, .galeria-foto, .galeria-foto img,
  .topbar-demo, .credit-demo, .demo-enviar, .landing-play { transition: none; }
}