:root {
  --negro: #000000;
  --blanco: #e9eef3;
  --gris: #7a8290;
  --linea: rgba(233, 238, 243, 0.14);
  --cian: #5cf2ff;
  --magenta: #ff2bd6;
  --rec: #ff3b30;

  --display: "Unbounded", system-ui, sans-serif;
  --texto: "Instrument Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --margen: clamp(20px, 5vw, 72px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--cian); outline-offset: 4px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
::selection { background: var(--magenta); color: #000; }

/* ---------- Capas de cámara ---------- */
.grano {
  position: fixed; inset: -50%; z-index: 60; pointer-events: none; opacity: .09;
  background-image: var(--ruido); background-size: 180px;
  animation: grano .5s steps(4) infinite;
}
@keyframes grano {
  0% { transform: translate(0, 0); } 25% { transform: translate(-6%, 4%); }
  50% { transform: translate(5%, -7%); } 75% { transform: translate(-3%, 6%); }
}
.scan {
  position: fixed; inset: 0; z-index: 59; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 3px);
}
.hud { position: fixed; inset: 0; z-index: 45; pointer-events: none; font-family: var(--mono); font-size: 11px; color: var(--gris); }
.esq { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(233,238,243,.5); }
.esq.tl { top: 12px; left: 12px; border-top-width: 1px; border-left-width: 1px; }
.esq.tr { top: 12px; right: 12px; border-top-width: 1px; border-right-width: 1px; }
.esq.bl { bottom: 12px; left: 12px; border-bottom-width: 1px; border-left-width: 1px; }
.esq.br { bottom: 12px; right: 12px; border-bottom-width: 1px; border-right-width: 1px; }
.hud-lado { position: absolute; left: 20px; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; white-space: nowrap; letter-spacing: .08em; }
.hud-pie { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 32px; white-space: pre; }
#seccion { color: var(--cian); }

/* Mira (cursor) */
.mira { position: fixed; top: 0; left: 0; z-index: 100; pointer-events: none; width: 0; height: 0; }
.mira::before, .mira::after { content: ""; position: absolute; background: var(--cian); }
.mira::before { width: 24px; height: 1px; left: -12px; top: 0; }
.mira::after { width: 1px; height: 24px; left: 0; top: -12px; }
.mira i {
  position: absolute; left: -18px; top: -18px; width: 36px; height: 36px;
  border: 1px solid rgba(92,242,255,.5); border-radius: 50%;
  transition: transform .25s, border-color .25s;
}
.mira.activa i { transform: scale(2); border-color: var(--magenta); }
@media (pointer: fine) { body, a, button { cursor: none; } }
@media (pointer: coarse) { .mira { display: none; } }

/* ---------- Barra ---------- */
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px var(--margen);
  font-size: 14px;
}
.barra::before {
  content: ""; position: absolute; inset: 0 0 -30px; z-index: -1; pointer-events: none;
  background: linear-gradient(#000 0%, rgba(0,0,0,0) 100%); opacity: 0; transition: opacity .3s;
}
body.bajando .barra::before { opacity: .85; }
.logo { font-family: var(--display); font-weight: 900; letter-spacing: 0.08em; }
.logo:hover { text-shadow: -2px 0 var(--cian), 2px 0 var(--magenta); }
.barra nav { display: flex; gap: clamp(16px, 3vw, 40px); }
.barra nav a { position: relative; }
.barra nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1px;
  background: var(--cian); transition: right .3s;
}
.barra nav a:hover::after, .barra nav a.aqui::after { right: 0; }
.rec { font-family: var(--mono); font-size: 12px; display: flex; align-items: center; gap: 8px; color: var(--gris); }
.rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--rec); animation: parpadeo 1s steps(2) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.hero-video { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 2s; }
.hero-video.lista { opacity: .55; }
.hero-video iframe {
  position: absolute; top: 50%; left: 50%; border: 0; pointer-events: none;
  width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh;
  transform: translate(-50%, -50%); filter: saturate(1.2) contrast(1.1);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,.85) 100%),
              linear-gradient(rgba(0,0,0,0) 60%, #000 100%);
}
#lente { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.hero-pie {
  position: absolute; z-index: 2; left: var(--margen); right: var(--margen); bottom: clamp(48px, 8vh, 80px);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
}
.firma { font-family: var(--display); font-size: clamp(18px, 2vw, 26px); line-height: 1.25; }
.firma span { font-family: var(--texto); font-size: 15px; color: #aab2bc; }
.boton {
  display: inline-block; padding: 14px 26px; border: 1px solid var(--blanco); border-radius: 999px;
  font-size: 15px; background: none; color: var(--blanco); font-family: var(--texto);
  position: relative; overflow: hidden; transition: color .3s;
}
.boton::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blanco);
  transform: translateY(101%); transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.boton:hover { color: var(--negro); }
.boton:hover::before { transform: none; }

/* ---------- Banda de marcas ---------- */
.marcas {
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  overflow: hidden; padding: 22px 0; white-space: nowrap;
}
.marcas-pista { display: inline-flex; animation: desfile 60s linear infinite; }
.marcas-pista span {
  font-family: var(--display); font-weight: 400; font-size: clamp(18px, 2.2vw, 28px);
  color: transparent; -webkit-text-stroke: 1px rgba(233,238,243,.55);
  padding: 0 clamp(20px, 3vw, 44px); position: relative;
}
.marcas-pista span::after {
  content: ""; position: absolute; right: -4px; top: 50%; width: 6px; height: 6px;
  background: var(--cian); border-radius: 50%; transform: translateY(-50%);
}
.marcas:hover .marcas-pista { animation-play-state: paused; }
@keyframes desfile { to { transform: translateX(-50%); } }

/* ---------- Secciones ---------- */
section:not(.hero) { padding: clamp(96px, 12vw, 160px) var(--margen) 0; }
.grande {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(48px, 10vw, 156px); line-height: .9; letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1.5px var(--blanco);
  margin-bottom: clamp(32px, 4vw, 56px);
}
.cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 56px); }
.cabeza .grande { margin-bottom: 0; }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.filtros button {
  font: inherit; font-family: var(--mono); font-size: 13px; color: var(--gris);
  background: none; border: 1px solid var(--linea); border-radius: 999px; padding: 8px 16px;
  transition: color .2s, border-color .2s;
}
.filtros button:hover { color: var(--blanco); border-color: rgba(233,238,243,.4); }
.filtros button[aria-pressed="true"] { color: #000; background: var(--cian); border-color: var(--cian); }

/* ---------- Mosaico de trabajos ---------- */
.mosaico { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); }
.pieza { grid-column: span 2; }
.pieza.s3 { grid-column: span 3; }
.pieza.s6 { grid-column: span 6; }
.pieza[hidden] { display: none; }

.pieza button { all: unset; display: block; width: 100%; position: relative; }
.pieza button:focus-visible { outline: 2px solid var(--cian); outline-offset: 4px; }

.cuadro { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #070809; isolation: isolate; }
.pieza.s6 .cuadro { aspect-ratio: 21 / 9; }
/* Aberración cromática: la imagen se divide en canal rojo y canal cian */
.cuadro .capa {
  position: absolute; inset: 0; background-image: var(--img); background-size: cover; background-position: center;
  background-blend-mode: multiply; mix-blend-mode: screen;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.cuadro.con-img .r { background-color: #ff0000; }
.cuadro.con-img .c { background-color: #00ffff; }
.cuadro::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,.85) 100%),
              repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
}
.pieza button:hover .r, .pieza button:focus-visible .r { transform: translate(-6px, 0) scale(1.06); }
.pieza button:hover .c, .pieza button:focus-visible .c { transform: translate(6px, 0) scale(1.06); }

.marco { position: absolute; inset: 12px; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .25s, inset .35s; }
.marco::before, .marco::after { content: ""; position: absolute; width: 18px; height: 18px; border: 0 solid var(--cian); }
.marco::before { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.marco::after { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.pieza button:hover .marco, .pieza button:focus-visible .marco { opacity: 1; inset: 18px; }

.dato {
  position: absolute; z-index: 3; top: 14px; font-family: var(--mono); font-size: 11px; color: rgba(233,238,243,.75);
  display: flex; align-items: center; gap: 6px;
}
.dato.izq { left: 16px; }
.dato.der { right: 16px; }
.dato.izq::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rec); opacity: 0; transition: opacity .2s; }
.pieza button:hover .dato.izq::before { opacity: 1; animation: parpadeo 1s steps(2) infinite; }

.texto-pieza { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 14px; }
.texto-pieza h3 {
  font-family: var(--display); font-weight: 700; font-size: clamp(18px, 1.8vw, 26px); line-height: 1.05;
  transition: text-shadow .2s;
}
.pieza.s6 .texto-pieza h3 { font-size: clamp(28px, 5vw, 72px); }
.pieza.s3 .texto-pieza h3 { font-size: clamp(20px, 2.4vw, 34px); }
.texto-pieza p { font-size: 14px; color: #b8c0c9; margin-top: 4px; }
.pieza button:hover h3 { text-shadow: -2px 0 var(--cian), 2px 0 var(--magenta); }
.pieza.s6 .texto-pieza { left: clamp(16px, 3vw, 40px); bottom: clamp(14px, 3vw, 36px); }

.ver-todos { margin-top: 40px; }
.ver-todos[hidden] { display: none; }

/* ---------- Sobre mí ---------- */
.sobre-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: start; }
.declaracion { font-family: var(--display); font-size: clamp(24px, 3vw, 44px); line-height: 1.18; letter-spacing: -0.01em; max-width: 22ch; }
.sobre-texto { margin-top: 40px; }
.sobre-texto p { color: #b8c0c9; max-width: 46ch; margin-bottom: 1.1em; }
.ficha { border: 1px solid var(--linea); position: relative; }
.ficha::before {
  content: "Ficha técnica"; position: absolute; top: -9px; left: 16px; padding: 0 8px; background: #000;
  font-family: var(--mono); font-size: 11px; color: var(--cian);
}
.ficha div { display: grid; grid-template-columns: 9em 1fr; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--linea); }
.ficha div:last-child { border-bottom: 0; }
.ficha dt { font-family: var(--mono); font-size: 12px; color: var(--gris); padding-top: 3px; }
.ficha dd { font-size: 15px; }
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #34d27b; margin-right: 8px; box-shadow: 0 0 0 0 rgba(52,210,123,.6); animation: latido 2s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 8px rgba(52,210,123,0); } 100% { box-shadow: 0 0 0 0 rgba(52,210,123,0); } }

/* ---------- Contacto ---------- */
.contacto-intro { color: var(--gris); }
.correo {
  display: inline-block; margin-top: 12px;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(26px, 6.4vw, 104px); line-height: 1.05; letter-spacing: -0.03em;
  overflow-wrap: anywhere; transition: text-shadow .2s;
}
.correo:hover { text-shadow: -4px 0 var(--cian), 4px 0 var(--magenta); }
.redes { list-style: none; display: flex; gap: 12px; margin-top: 40px; }
.redes a { display: inline-block; border: 1px solid var(--linea); border-radius: 999px; padding: 10px 22px; transition: border-color .2s, color .2s; }
.redes a:hover { border-color: var(--cian); color: var(--cian); }

.pie {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: clamp(96px, 12vw, 160px); padding: 28px var(--margen) 56px;
  border-top: 1px solid var(--linea); font-size: 14px; color: var(--gris);
}

/* ---------- Reproductor ---------- */
.sala { border: 0; padding: 0; background: transparent; width: 100%; height: 100%; max-width: none; max-height: none; color: var(--blanco); }
.sala::backdrop { background: rgba(0,0,0,.95); }
.sala[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.sala-barra { width: min(92vw, 160vh); display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 13px; color: var(--gris); }
.pantalla { width: min(92vw, 160vh); aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--linea); }
.pantalla iframe { width: 100%; height: 100%; border: 0; display: block; }
.vacio { width: 100%; height: 100%; display: grid; place-items: center; text-align: center; color: var(--gris); padding: 24px; }
.cerrar {
  background: none; border: 1px solid var(--blanco); color: var(--blanco); border-radius: 999px;
  padding: 8px 18px; font: inherit; font-size: 13px;
}
.cerrar:hover { background: var(--blanco); color: var(--negro); }

/* ---------- Móvil ---------- */
@media (max-width: 900px) {
  .pieza, .pieza.s3 { grid-column: span 3; }
  .hud-lado { display: none; }
}
@media (max-width: 600px) {
  .barra nav { display: none; }
  .hero-pie { flex-direction: column; align-items: flex-start; }
  .pieza, .pieza.s3, .pieza.s6 { grid-column: span 6; }
  .pieza.s6 .cuadro { aspect-ratio: 16 / 9; }
  .sobre-grid { grid-template-columns: 1fr; }
  .ficha div { grid-template-columns: 1fr; gap: 2px; }
  .hud-pie { display: none; }
  .grande { -webkit-text-stroke-width: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}