/* =========================================================
   1. TIPOGRAFÍA — Helvetica Neue (sacada de tu carpeta)
   ========================================================= */
@font-face { font-family: "HN"; src: url("../fonts/HelveticaNeue-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "HN"; src: url("../fonts/HelveticaNeue-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "HN"; src: url("../fonts/HelveticaNeue-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "HN"; src: url("../fonts/HelveticaNeue-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* =========================================================
   2. VARIABLES — cambia aquí colores y medidas de toda la web
   ========================================================= */
:root {
  --bg: #f4f4f2;          /* fondo */
  --ink: #111;            /* texto */
  --mute: #8c8c8a;        /* texto secundario */
  --line: #cfcfcc;        /* líneas finas */
  --ph: #e2e2df;          /* cajas de imagen provisionales */

  --m: 24px;              /* margen lateral */
  --g: 16px;              /* separación entre columnas */
  --cols: 12;             /* columnas de la retícula */

  --fs-s: 11px;           /* pies de foto, etiquetas */
  --fs: 13px;             /* texto normal */
  --fs-l: clamp(18px, 1.8vw, 26px);
  --fs-xl: clamp(72px, 15vw, 240px);  /* títulos gigantes */
}
@media (max-width: 760px) {
  :root { --m: 16px; --g: 12px; --cols: 4; }
}

/* =========================================================
   3. BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "HN", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--fs); line-height: 1.35; font-weight: 400;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover, a[aria-current] { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
img { display: block; width: 100%; height: auto; }
ul { list-style: none; }
.mute { color: var(--mute); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* La retícula: todo se coloca en 12 columnas (4 en móvil) */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--g);
  padding-inline: var(--m);
}

/* Caja gris que sustituye a una imagen mientras no haya fotos */
.ph { background: var(--ph); display: grid; place-items: center; color: var(--mute); font-size: var(--fs-s); }

/* =========================================================
   4. CABECERA (igual en todas las páginas)
   ========================================================= */
/* cabecera transparente: no tapa nada y se desplaza con la página */
.site-header { position: relative; z-index: 10; padding-block: 18px; }
.site-header .name { grid-column: 1 / 4; align-self: center; }
.site-header .name img { height: 12px; width: auto; filter: invert(1); }

/* Texto fijo en modo de fusión "Diferencia": sobre el fondo se ve igual que siempre
   y sobre las portadas que pasan por detrás se invierte. Los colores son el "negativo"
   del fondo (#f4f4f2) para que el resultado sobre él sea el negro y el gris de siempre. */
.site-header, .home-intro { mix-blend-mode: difference; color: #e3e3e1; }
.site-header .mute, .home-intro .mute { color: #686868; }
.site-header .role { grid-column: 4 / 8; }
.site-header nav   { grid-column: 9 / -1; justify-self: end; display: flex; gap: 24px; }
@media (max-width: 760px) {
  .site-header .name { grid-column: 1 / 3; }
  .site-header .role { display: none; }
  .site-header nav   { grid-column: 3 / -1; }
}

/* Título gigante (Works / About) */
.display {
  grid-column: 1 / -1;
  font-size: var(--fs-xl); font-weight: 500; letter-spacing: -0.055em; line-height: .82;
  margin: 6vh 0 8vh -0.04em;
}

/* =========================================================
   5. HOME — constelación de proyectos unidos por líneas
   ========================================================= */
.home-intro { grid-column: 1 / 4; padding-top: 24px; position: relative; z-index: 2; }
.home-intro p + p { margin-top: 1em; }
@media (min-width: 761px) { .home-intro p { width: 30em; } } /* ancho fijo: la primera línea corta justo después de "nacen" */
.legend { margin-top: 2em; font-size: var(--fs-s); }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend li { cursor: default; padding-block: 3px; width: fit-content; padding-right: 12px; } /* el resaltado solo actúa sobre el texto y un poco alrededor */
/* trazo corto en diagonal, como en la referencia */
.legend i { width: 18px; border-top: 2px solid; transform: rotate(-30deg); }

/* --H: alto de referencia para colocar las portadas; el alto real del área lo ajusta main.js hasta la portada más baja */
.map { --H: max(760px, 64vw); isolation: isolate; position: relative; background: var(--bg); /* fondo propio: lo necesita el modo Diferencia de los nombres */ margin: -200px var(--m) 48px; height: var(--H); }
.map svg.sub { z-index: 999; } /* hilos finos: encima de los materiales, debajo de las portadas */
.map svg { position: absolute; inset: 0; z-index: 999999; width: 100%; height: 100%; overflow: visible; pointer-events: none; } /* líneas por encima de las portadas */
.map polyline { fill: none; stroke-linejoin: round; stroke-linecap: round; stroke-width: 1.5; transition: opacity .2s; }
.map polyline.sub { stroke-width: 0.6; } /* hilos de los materiales, más finos que los de las portadas */
.map.focus polyline:not(.on), .map.focus .node:not(.on) { opacity: .1; }

.node { position: absolute; user-select: none; -webkit-user-drag: none; left: var(--x); top: calc(var(--yn) * var(--H)); width: var(--w); transition: opacity .25s, filter .25s; }
.node { text-decoration: none !important; }
.node { z-index: 1000; } /* portadas siempre en las capas de arriba */
.node.mat { z-index: 1; } /* materiales por debajo de las portadas */
.node img, .node video { pointer-events: none; display: block; width: 100%; }
@media (min-width: 761px) { .node { cursor: grab; touch-action: none; } .node.dragging { cursor: grabbing; } }
/* nombre de cada portada: suelto, por encima de las piezas y en modo "Diferencia"
   (#e3e3e1 es el negativo del fondo: sobre él se ve negro y sobre una imagen se invierte) */
.map .cap { position: absolute; z-index: 999998; pointer-events: none; white-space: nowrap; font-size: var(--fs-s); color: #e3e3e1; mix-blend-mode: difference; }
/* al pasar por una portada, el resto se desenfoca */
/* Al pasar el ratón por una pieza, el resto se desenfoca un poco y se cubre de grano fino
   monocromático. El desenfoque va en la imagen y el grano en una capa encima (::after),
   así el grano no se desenfoca y se ve nítido. */
.node > img, .node > video, .node > .ph { transition: filter .25s, opacity .25s; }
.map:has(.node:hover) .node:not(:hover) > :is(img, video, .ph) { filter: blur(2.5px); opacity: .9; }
.node::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: 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='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat; background-size: 140px; mix-blend-mode: overlay;
}
.map:has(.node:hover) .node:not(:hover)::after { opacity: .5; }
.map polyline.blur { filter: url(#blur); opacity: .9; } /* líneas que no tocan la pieza bajo el ratón: como las imágenes */

@media (max-width: 760px) {
  .home-intro { grid-column: 1 / -1; }
  .map { height: auto; margin-top: 48px; display: flex; flex-direction: column; gap: 40px; }
  .node { position: relative; left: 0; top: 0; width: 58%; }
  .node.mat { display: none; } /* en móvil, solo las portadas */
  .node:nth-child(even) { margin-left: 42%; }
}

/* =========================================================
   6. WORKS — índice en tabla
   ========================================================= */
.index { grid-column: 1 / -1; margin-bottom: 120px; }
.row { display: grid; grid-template-columns: 4ch 3fr 2fr 2fr 1fr; gap: var(--g); padding-block: 6px; border-bottom: 1px solid var(--line); }
.row > :last-child { text-align: right; }
.row.head { color: var(--mute); font-size: var(--fs-s); border-color: var(--ink); }
a.row:hover { text-decoration: none; background: var(--ink); color: var(--bg); }
a.row:hover .mute { color: inherit; }
.preview { position: fixed; z-index: 20; width: 220px; pointer-events: none; opacity: 0; transition: opacity .15s; }
.preview.on { opacity: 1; }
.preview video { display: block; width: 100%; }
@media (max-width: 760px) {
  .row { grid-template-columns: 3ch 1fr auto; }
  .row .client, .row .cat { display: none; }
}
@media (hover: none) { .preview { display: none; } }

/* =========================================================
   7. PROJECT — ficha a la izquierda, imágenes a la derecha
   ========================================================= */
.p-head { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; padding: 10vh 0 32px; border-bottom: 1px solid var(--ink); }
.p-head .num   { grid-column: 1 / 4; }
.p-head h1     { grid-column: 4 / 11; font-size: var(--fs-l); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.p-head .year  { grid-column: 11 / -1; justify-self: end; }

.p-info { grid-column: 1 / 4; align-self: start; position: sticky; top: 0; padding-top: 24px; }
.p-info .desc p + p { margin-top: 1em; }
.specs { margin-top: 32px; font-size: var(--fs-s); }
.specs div { display: flex; justify-content: space-between; gap: 12px; padding-block: 4px; border-bottom: 1px dotted var(--mute); }
.specs dt { color: var(--mute); }
.specs dd { text-align: right; max-width: 70%; }

.p-media { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--g); padding-top: 24px; /* mismo espacio en vertical y en horizontal */ }
.p-media figure { grid-column: span 6; }
.p-media figure.half  { grid-column: span 3; }
.p-media figure.third { grid-column: span 2; }
.p-media figure.two-thirds { grid-column: span 4; }
.p-media figure.center { grid-column: 3 / 5; } /* pieza destacada, centrada */
/* si una imagen tiene otra proporción que la indicada, se recorta centrada para llenar su hueco */
.p-media img, .p-media video { object-fit: cover; }
/* "fill": la pieza se estira al alto de su fila para quedar igual que la de al lado */
.p-media figure.fill { align-self: stretch; }
.p-media figure.fill > img, .p-media figure.fill > video,
.p-media figure.fill > .media-link, .p-media figure.fill > .media-link > img, .p-media figure.fill > .media-link > video { height: 100%; }

/* pieza enlazada a su vídeo completo */
.media-link { position: relative; display: block; }
.media-link .ext { position: absolute; left: 8px; bottom: 8px; padding: 3px 7px; font-size: var(--fs-s); background: var(--bg); color: var(--ink); }
.media-link:hover { text-decoration: none; }
.media-link:hover .ext { background: var(--ink); color: var(--bg); }
.p-media video, .p-media iframe, .reel video { display: block; width: 100%; height: auto; border: 0; background: var(--ph); }

/* Premio: insignia circular que gira despacio */
.award { margin-top: 32px; display: flex; align-items: center; gap: 16px; font-size: var(--fs-s); }
.badge { position: relative; width: 96px; flex: none; aspect-ratio: 1; }
.badge .ring { animation: spin 24s linear infinite; }
.badge .icon { position: absolute; top: 50%; left: 50%; max-width: 58%; max-height: 52%; width: auto; transform: translate(-50%, -50%); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .badge .ring { animation: none; } }

/* Videocases: la ficha arriba y cada vídeo a todo el ancho con su fila de título */
.is-reel .p-info { grid-column: 1 / 5; position: static; }
.reel { grid-column: 1 / -1; margin-top: 96px; }
.reel-item + .reel-item { margin-top: 96px; }
.reel-row { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--g); align-items: baseline; border-top: 1px solid var(--ink); padding: 10px 0 20px; }
.reel-row > :first-child { grid-column: 1 / 4; }
.reel-row h2 { grid-column: 4 / 11; font-size: var(--fs-l); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.reel-row > :last-child { grid-column: 11 / -1; justify-self: end; }
@media (max-width: 760px) {
  .is-reel .p-info { grid-column: 1 / -1; }
  .reel { margin-top: 56px; }
  .reel-item + .reel-item { margin-top: 56px; }
  .reel-row > :first-child { grid-column: 1 / 2; }
  .reel-row h2 { grid-column: 2 / 4; }
  .reel-row > :last-child { grid-column: 4 / -1; }
}
.p-media figcaption { margin-top: 6px; font-size: var(--fs-s); }

.p-nav { grid-column: 1 / -1; display: flex; justify-content: space-between; margin: 120px 0 24px; padding-top: 12px; border-top: 1px solid var(--ink); }

@media (max-width: 760px) {
  .p-head .num { grid-column: 1 / 2; }
  .p-head h1   { grid-column: 2 / 4; }
  .p-head .year { grid-column: 4 / -1; }
  .p-info, .p-media { grid-column: 1 / -1; position: static; }
  .p-media { gap: var(--g); padding-top: 40px; }
  .p-media figure.half { grid-column: span 3; }
  .p-media figure.third { grid-column: span 2; }
  .p-media figure.center { grid-column: 2 / 6; }
}

/* =========================================================
   8. ABOUT — CV
   ========================================================= */
.cv-left  { grid-column: 1 / 5; }
.cv-right { grid-column: 7 / -1; }
.cv-photo { width: 160px; margin: 0 0 48px auto; }
.cv-block { margin-bottom: 40px; }
.cv-block h2 { font-size: var(--fs-s); font-weight: 400; color: var(--mute); padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.cv-lead { font-size: var(--fs-l); letter-spacing: -0.015em; line-height: 1.2; margin-bottom: 40px; }
/* la columna de fechas/etiquetas se ajusta al texto más largo de cada lista */
.cv-list { display: grid; grid-template-columns: auto 1fr; column-gap: calc(var(--g) * 2); }
.cv-right .cv-list { grid-template-columns: minmax(18ch, auto) 1fr; } /* fechas alineadas entre bloques */
.cv-list li { display: contents; }
.cv-list li > span { padding-block: 5px; }
.cv-list li > span:first-child { color: var(--mute); white-space: nowrap; }
.cv-cols { columns: 2; column-gap: var(--g); }
@media (max-width: 760px) {
  .cv-left, .cv-right { grid-column: 1 / -1; }
  .cv-right .cv-list { grid-template-columns: 1fr; }
  .cv-right .cv-list li > span:first-child { padding-bottom: 0; }}