:root {
  --fondo: #0d0d0d;
  --fondo-2: #161616;
  --texto: #f2efe9;
  --suave: #9a968f;
  --linea: #2a2a2a;
  --ancho: 1200px;
  --margen: clamp(16px, 4vw, 48px);
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--fondo);
  color: var(--texto);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; }
:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; }

/* ── Navegación ── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px var(--margen);
  transition: background .3s, backdrop-filter .3s;
}
.nav.con-fondo { background: rgba(13,13,13,.78); backdrop-filter: blur(12px); }
.nav__logo { font-weight: 600; letter-spacing: -.01em; }
.nav__links { display: flex; gap: 28px; align-items: center; font-size: 15px; }
.nav__links a { color: var(--suave); transition: color .2s; }
.nav__links a:hover { color: var(--texto); }
.nav__links .nav__cta { color: var(--texto); border: 1px solid var(--linea); padding: 7px 16px; border-radius: 99px; }
@media (max-width: 720px) {
  .nav__links a:not(.nav__cta) { display: none; }
}

/* ── Elementos comunes ── */
.etiqueta {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--suave);
  margin-bottom: 18px;
}
h1, h2 { font-weight: 500; letter-spacing: -.035em; line-height: .95; }
h2 { font-size: clamp(40px, 6vw, 76px); margin-bottom: 22px; }
h2 em, h1 em { letter-spacing: -.01em; }

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px; border-radius: 99px;
  background: var(--texto); color: var(--fondo); font-weight: 500; font-size: 16px;
  border: 1px solid var(--texto);
  transition: transform .2s, background .2s, color .2s;
}
.boton:hover { transform: translateY(-2px); }
.boton--linea { background: transparent; color: var(--texto); border-color: rgba(242,239,233,.35); }
.boton--linea:hover { border-color: var(--texto); }


/* ── Inicio ── */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: 120px var(--margen) clamp(56px, 9vh, 96px);
  overflow: hidden;
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .4; filter: saturate(.75); }
.hero__velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(13,13,13,.55) 0%, rgba(13,13,13,.1) 35%, rgba(13,13,13,.85) 80%, var(--fondo) 100%),
    linear-gradient(90deg, rgba(13,13,13,.85) 0%, rgba(13,13,13,.35) 60%, transparent 100%);
}
.hero__contenido { position: relative; max-width: var(--ancho); width: 100%; margin: 0 auto; }
.hero h1 { font-size: clamp(64px, 13vw, 184px); margin-bottom: 40px; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__lugar { position: absolute; right: var(--margen); bottom: 28px; font-size: 13px; color: var(--suave); letter-spacing: .08em; }
@media (max-width: 720px) { .hero__lugar { display: none; } }

/* ── Secciones ── */
.seccion { max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; padding: clamp(80px, 12vw, 150px) var(--margen) 0; }
.encabezado { max-width: 680px; margin-bottom: 56px; }
.seccion--pegada { padding-top: 40px; }
.encabezado__texto { color: var(--suave); font-size: 19px; }

/* ── Filas de piezas: misma altura, ancho según formato ── */
.fila {
  --alto: 460px; --gap: 14px;
  display: flex; gap: var(--gap);
  max-width: calc(var(--suma) * var(--alto) + (var(--n) - 1) * var(--gap));
}
.fila--destacada { --alto: 500px; margin: 0 auto; }
.pieza { flex: var(--r) 1 0; min-width: 0; cursor: pointer; text-align: left; background: none; border: 0; color: inherit; font: inherit; }
.pieza__marco {
  position: relative; display: block; aspect-ratio: var(--r); overflow: hidden;
  border-radius: 10px; background: var(--fondo-2);
  transform: scale(var(--esc, 1)); opacity: var(--opa, 1);
  will-change: transform;
}
.pieza__marco::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.pieza__marco img, .pieza__marco video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .3s;
}
.pieza__marco video { opacity: 0; }
.pieza.reproduciendo .pieza__marco video { opacity: 1; }
.pieza:hover .pieza__marco img, .pieza:hover .pieza__marco video { transform: scale(1.03); }
.pieza__play {
  position: absolute; left: 12px; bottom: 12px;
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; padding: 6px 12px 6px 10px; border-radius: 99px;
  background: rgba(13,13,13,.6); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s;
}
.pieza:hover .pieza__play, .pieza:focus-visible .pieza__play { opacity: 1; transform: none; }
.pieza__play::before { content: ""; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }

/* ── Categorías de agencia ── */
.categoria {
  display: grid; grid-template-columns: 260px 1fr; gap: 40px;
  padding: 44px 0; border-top: 1px solid var(--linea);
}
.categoria__num { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--suave); }
.categoria__nombre { font-size: 30px; font-weight: 500; letter-spacing: -.02em; margin: 4px 0 10px; }
.categoria__texto { color: var(--suave); font-size: 16px; }
.categoria .fila { --alto: 400px; }
.filas { display: flex; flex-direction: column; gap: 30px; min-width: 0; }

/* ── Sobre mí ── */
.sobre { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.sobre__foto { max-width: 400px; position: sticky; top: 100px; }
.sobre__foto img { width: 100%; border-radius: 10px; aspect-ratio: 4/5; object-fit: cover; }
.sobre__texto > p:not(.etiqueta) { color: #cfcac2; margin-bottom: 16px; max-width: 560px; }
.datos { margin-top: 40px; border-top: 1px solid var(--linea); }
.datos > div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.datos dt { color: var(--suave); font-size: 14px; padding-top: 2px; }
.datos dd { grid-column: 2; font-size: 16px; }
.datos dd + dd { margin-top: -10px; }
.datos dd strong { font-weight: 500; }
.datos dd span { color: var(--suave); font-size: 14px; margin-left: 6px; }

/* ── Contacto ── */
.contacto { text-align: center; padding-bottom: clamp(80px, 12vw, 140px); }
.contacto h2 { font-size: clamp(44px, 8vw, 108px); }
.contacto__links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; }

.pie {
  display: flex; justify-content: space-between; gap: 16px;
  width: min(var(--ancho), calc(100% - 2 * var(--margen))); margin: 0 auto;
  padding: 26px 0; border-top: 1px solid var(--linea);
  font-size: 14px; color: var(--suave);
}

/* ── Visor ── */
.visor {
  margin: auto; border: 0; padding: 0; background: transparent; color: var(--texto);
  max-width: min(92vw, 1200px); max-height: 92svh; overflow: visible;
}
.visor::backdrop { background: rgba(0,0,0,.88); backdrop-filter: blur(6px); }
.visor__video, .visor__img { max-width: min(92vw, 1200px); max-height: 80svh; border-radius: 10px; background: #000; margin: 0 auto; }
.visor [hidden] { display: none; }
.visor__titulo { text-align: center; margin-top: 14px; font-size: 17px; font-weight: 500; }
.visor__titulo:empty { display: none; }
.visor__cerrar {
  position: fixed; top: 16px; right: 16px; width: 44px; height: 44px;
  border-radius: 99px; border: 1px solid var(--linea); background: var(--fondo-2);
  color: var(--texto); font-size: 18px; cursor: pointer;
}

/* ── Aparición al hacer scroll ── */
.aparece { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.aparece.visible { opacity: 1; transform: none; }

/* ═════════════ MOVIMIENTO ═════════════ */

/* Fondo: manchas de luz que flotan + grano de película */
.fondo { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.mancha {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5;
  translate: var(--mx, 0) var(--my, 0);
  transition: translate 1.2s cubic-bezier(.2,.7,.2,1);
}
.mancha--1 { width: 46vw; height: 46vw; left: -12vw; top: 10vh; background: radial-gradient(circle, #6b3a1f 0%, transparent 65%); animation: flotar1 28s ease-in-out infinite alternate; }
.mancha--2 { width: 40vw; height: 40vw; right: -10vw; top: 45vh; background: radial-gradient(circle, #1f2f6b 0%, transparent 65%); animation: flotar2 34s ease-in-out infinite alternate; }
.mancha--3 { width: 34vw; height: 34vw; left: 30vw; bottom: -14vw; background: radial-gradient(circle, #4a2160 0%, transparent 65%); animation: flotar3 40s ease-in-out infinite alternate; }
@keyframes flotar1 { to { transform: translate(18vw, 22vh) scale(1.2); } }
@keyframes flotar2 { to { transform: translate(-22vw, -18vh) scale(.85); } }
@keyframes flotar3 { to { transform: translate(-14vw, -40vh) scale(1.15); } }
.grano {
  position: absolute; inset: -50%; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grano 1s steps(4) infinite;
}
@keyframes grano {
  0% { transform: translate(0, 0); } 25% { transform: translate(-5%, 3%); }
  50% { transform: translate(4%, -4%); } 75% { transform: translate(-3%, -2%); } 100% { transform: translate(2%, 5%); }
}

/* Barra de progreso de lectura */
.progreso {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 30;
  background: var(--texto); transform-origin: 0 50%; transform: scaleX(var(--prog, 0));
}

/* Cursor que acompaña y se agranda sobre los videos */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none;
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--texto); mix-blend-mode: difference;
  display: grid; place-items: center;
  transition: width .35s cubic-bezier(.2,.7,.2,1), height .35s cubic-bezier(.2,.7,.2,1), margin .35s cubic-bezier(.2,.7,.2,1), opacity .3s;
  opacity: 0;
}
.cursor span { font-size: 13px; font-weight: 600; color: #000; opacity: 0; transition: opacity .2s; }
.cursor.activo { opacity: 1; }
.cursor.grande { width: 84px; height: 84px; margin: -42px 0 0 -42px; mix-blend-mode: normal; }
.cursor.grande span { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* Nombre que entra letra por letra */
.hero h1 .linea { display: block; overflow: hidden; padding: 0 .1em .2em; margin: 0 -.1em -.2em; }
.hero h1 .letra { display: inline-block; transform: translateY(105%); animation: subir .9s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i) * 45ms + 150ms); }
@keyframes subir { to { transform: none; } }
.hero__contenido > :not(h1) { animation: entrar 1s cubic-bezier(.2,.7,.2,1) both; animation-delay: .9s; }
@keyframes entrar { from { opacity: 0; transform: translateY(18px); } }
.hero__contenido { transform: translateY(var(--hy, 0)); opacity: var(--ho, 1); }
.hero__video { transform: scale(var(--hs, 1)); }

.hero__scroll {
  position: absolute; left: 50%; bottom: 26px; width: 1px; height: 52px;
  background: rgba(242,239,233,.2); overflow: hidden;
}
.hero__scroll span { position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--texto); animation: gotear 1.8s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes gotear { to { top: 100%; } }

/* Títulos que suben palabra por palabra */
.palabra { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .22em; margin: 0 -.08em -.22em; }
.palabra > span { display: inline-block; transform: translateY(105%); transition: transform 1s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 70ms); }
.visible .palabra > span, .palabra.visible > span { transform: none; }

/* Capturas de pantallas en el mundo */
.capturas { grid-column: 1 / -1; margin-top: 46px; overflow: hidden; }
.capturas__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 40px; margin-bottom: 26px; }
.capturas__head h4 { font-size: clamp(30px, 4vw, 52px); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.capturas__head p { color: var(--suave); max-width: 380px; font-size: 16px; margin-top: 10px; }
.capturas__pista {
  display: flex; gap: 14px; overflow-x: auto;
  scrollbar-width: none; cursor: grab; padding-bottom: 4px;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
          mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.capturas__pista::-webkit-scrollbar { display: none; }
.capturas__pista.arrastrando { cursor: grabbing; scroll-snap-type: none; }
.capturas__pista.arrastrando .captura { pointer-events: none; }
.capturas__pista.al-final { -webkit-mask-image: none; mask-image: none; }
.capturas__flechas { display: flex; gap: 8px; }
.capturas__flechas button {
  width: 46px; height: 46px; border-radius: 99px; border: 1px solid var(--linea);
  background: transparent; color: var(--texto); font-size: 18px; cursor: pointer;
  transition: background .2s, border-color .2s, opacity .2s;
}
.capturas__flechas button:hover { background: var(--fondo-2); border-color: var(--texto); }
.capturas__flechas button:disabled { opacity: .3; cursor: default; }
.captura { position: relative; height: clamp(320px, 42vw, 520px); aspect-ratio: 9/16; border-radius: 10px; overflow: hidden; cursor: zoom-in; border: 0; padding: 0; background: var(--fondo-2); flex: none; }
.captura img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.captura:hover img { transform: scale(1.05); }
.captura span {
  position: absolute; left: 10px; top: 10px; font-size: 12px; letter-spacing: .04em;
  padding: 5px 10px; border-radius: 99px; background: rgba(13,13,13,.6); backdrop-filter: blur(8px); color: var(--texto);
}

/* Frase que se pinta al bajar */
.manifiesto { height: 150vh; position: relative; }
.manifiesto p {
  position: sticky; top: 15svh; height: 70svh;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; align-content: center;
  max-width: 1100px; margin: 0 auto; padding: 0 var(--margen);
  text-align: center; font-size: clamp(34px, 5.6vw, 80px); font-weight: 500; letter-spacing: -.03em; line-height: 1.08;
}
.manifiesto .pinta { opacity: .14; transition: opacity .25s linear; white-space: pre; }
.manifiesto .pinta.on { opacity: 1; }
.manifiesto .pinta em { font-weight: 400; }

/* Ver más (dentro de una categoría) */
.mas { margin-top: 30px; grid-column: 2; min-width: 0; }
.mas__contenido { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s cubic-bezier(.2,.7,.2,1); }
.mas.abierto .mas__contenido { grid-template-rows: 1fr; }
.mas__interior { overflow: hidden; min-height: 0; }
.mas__grupo { padding-top: 40px; }
.mas__grupo .filas { margin-top: 20px; }
.mas__nombre { font-size: 20px; font-weight: 500; letter-spacing: -.01em; margin-bottom: 4px; }
.mas__boton span { color: var(--suave); margin-left: 4px; }
.pieza--imagen { cursor: zoom-in; }
@media (max-width: 720px) { .pieza--ancha .pieza__play { display: none; } }

/* Versiones dentro del visor */
.visor__versiones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.visor__versiones:empty { display: none; }
.visor__versiones button {
  font: inherit; font-size: 14px; color: var(--suave); background: transparent;
  border: 1px solid var(--linea); padding: 7px 16px; border-radius: 99px; cursor: pointer;
}
.visor__versiones button[aria-pressed="true"] { color: var(--fondo); background: var(--texto); border-color: var(--texto); }


/* Foto con leve parallax */
.sobre__foto { overflow: hidden; border-radius: 10px; }
.sobre__foto img { transform: scale(1.12) translateY(var(--fy, 0px)); }

/* ── Diseño ── */
.tarjetas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tarjeta { text-align: left; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.tarjeta__img { display: block; position: relative; aspect-ratio: 4/5; border-radius: 10px; overflow: hidden; background: var(--fondo-2); transform: scale(var(--esc, 1)); opacity: var(--opa, 1); }
.tarjeta__img img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.tarjeta:hover .tarjeta__img img { transform: scale(1.05); }
.tarjeta__cant { position: absolute; right: 10px; bottom: 10px; font-size: 12px; padding: 5px 10px; border-radius: 99px; background: rgba(13,13,13,.6); backdrop-filter: blur(8px); }
.tarjeta__tipo { display: block; margin-top: 10px; font-size: 13px; color: var(--suave); }
.tarjeta__tipo::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 8px; vertical-align: middle; border: 1px solid var(--suave); }
.tarjeta--pro .tarjeta__tipo::before { background: var(--texto); border-color: var(--texto); }

/* ── Fotografía ── */
.fotografia { margin-top: 70px; padding-top: 44px; border-top: 1px solid var(--linea); }
.fotografia__head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.fotografia__fila { display: flex; gap: 14px; }
.foto { flex: var(--r) 1 0; min-width: 0; border: 0; padding: 0; background: var(--fondo-2); border-radius: 10px; overflow: hidden; cursor: zoom-in; aspect-ratio: var(--r); transform: scale(var(--esc, 1)); opacity: var(--opa, 1); }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.foto:hover img { transform: scale(1.04); }

/* Flechas de la galería */
.visor__flecha {
  position: fixed; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border-radius: 99px;
  border: 1px solid var(--linea); background: var(--fondo-2); color: var(--texto); font-size: 18px; cursor: pointer;
}
.visor__flecha--ant { left: 16px; }
.visor__flecha--sig { right: 16px; }

/* ── Tablet ── */
@media (max-width: 960px) {
  .categoria { grid-template-columns: 1fr; gap: 24px; }
  .mas { grid-column: 1; }
  .sobre { grid-template-columns: 1fr; }
  .sobre__foto { max-width: 420px; position: static; }
  .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Celular: las filas pasan a carrusel horizontal ── */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .filas { gap: 24px; }
  .fila--destacada, .filas .fila {
    --alto: 420px; --gap: 14px;
    display: flex; flex-direction: row; align-items: flex-start; gap: var(--gap);
    max-width: none;
    margin: 0 calc(-1 * var(--margen));
    padding: 0 var(--margen) 6px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .fila--destacada::-webkit-scrollbar, .filas .fila::-webkit-scrollbar { display: none; }
  .pieza { flex: 0 0 auto; width: min(calc(var(--r) * var(--alto)), 84vw); scroll-snap-align: center; }
  .pieza__play { opacity: 1; transform: none; }
  .datos > div { grid-template-columns: 1fr; gap: 4px; }
  .datos dd { grid-column: 1; }
  .sobre__foto { max-width: 72%; }
  .datos dd + dd { margin-top: 2px; }
  .pie { flex-direction: column; }
  .fotografia__fila { flex-direction: column; }
  .mas__interior { margin: 0 calc(-1 * var(--margen)); padding: 0 var(--margen); }
  .foto { flex: none; width: 100%; }
  .visor__flecha { top: auto; bottom: 16px; translate: none; }
  .mancha { filter: blur(60px); }
  .mancha--1 { width: 90vw; height: 90vw; }
  .mancha--2 { width: 80vw; height: 80vw; }
  .mancha--3 { width: 70vw; height: 70vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aparece { opacity: 1; transform: none; transition: none; }
  .mancha, .grano, .hero__scroll span { animation: none; }
  .hero h1 .letra, .palabra > span { transform: none; animation: none; transition: none; }
  .hero__contenido > :not(h1) { animation: none; }
  .manifiesto { height: auto; padding: 120px 0; }
  .manifiesto p { position: static; height: auto; }
  .manifiesto .pinta { opacity: 1; }
  .hero__video { display: none; }
  .hero { background: url(media/hero.jpg) center/cover; }
}