/* ==========================================================================
   Manel Vila — Portfolio
   Sistema: azul #0600FF · papel #EDECEC · KMR Waldenburg
   ========================================================================== */

@font-face {
  font-family: 'Waldenburg';
  src: url('../../content/src/font/KMR-Waldenburg-Buch.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Waldenburg';
  src: url('../../content/src/font/KMR-Waldenburg-Normal.woff2') format('woff2'),
       url('../../content/src/font/KMR-Waldenburg-Normal.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --blue: #0600FF;
  --paper: #EDECEC;
  --paper-2: #E4E3E3;
  --white: #FFFFFF;
  --glass: rgba(234, 233, 233, 0.55);
  --gut: 0.5rem;
  --pill: 55px;
  --bar-h: 38px;
  --ease: cubic-bezier(.65, 0, .35, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --fs-s: 11pt;
  --fs-nav: 18pt;
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--blue);
  font-family: 'Waldenburg', Arial, Helvetica, sans-serif;
  font-size: var(--fs-s);
  line-height: 1.15;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
img, video { display: block; }
/* <picture> solo elige formato (AVIF/JPG): no debe crear caja propia */
picture { display: contents; }
::selection { background: var(--blue); color: var(--white); }
:focus-visible { outline: 1.5px solid var(--blue); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: var(--ease); }

/* --------------------------------------------------------------------------
   Intro — el monograma se construye y la cortina sube
   -------------------------------------------------------------------------- */
.intro {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--blue);
  transition: transform .85s var(--ease);
}
.intro svg { width: min(28vw, 180px); fill: var(--white); overflow: visible; }
.intro rect { transform-box: fill-box; transform-origin: 50% 100%; animation: bar-in .7s var(--ease-out) both; }
.intro g:nth-child(2) rect { animation-delay: .12s; }
.intro g:nth-child(3) rect { animation-delay: .24s; }
.intro g:nth-child(4) rect { animation-delay: .36s; }
.intro.is-out { transform: translateY(-100%); }
@keyframes bar-in { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

/* --------------------------------------------------------------------------
   La franja — píldora con el monograma que se despliega en barra centrada
   -------------------------------------------------------------------------- */
.franja {
  position: fixed;
  top: var(--gut);
  left: var(--gut);
  z-index: 60;
  width: var(--pill);
  height: var(--pill);
  display: flex;
  align-items: center;
  border-radius: 50px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--fs-nav);
  line-height: 1;
  transition: left .6s var(--ease), width .6s var(--ease), height .6s var(--ease);
}
.franja__mark {
  flex: 0 0 var(--pill);
  width: var(--pill);
  height: 100%;
  display: grid;
  place-items: center;
  transition: flex-basis .6s var(--ease), width .6s var(--ease);
}
.franja__mark svg { width: 32px; height: auto; fill: currentColor; overflow: visible; transition: width .6s var(--ease); }
.franja__items {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding-right: .9rem;
  min-width: 0;
}
.franja__item {
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .35s ease, transform .5s var(--ease);
  pointer-events: none;
}
.franja__name { margin-right: auto; }
.franja__item.is-active,
.franja a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
@media (hover: hover) { .franja__item:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; } }

.is-nav-open .franja {
  left: 25%;
  width: calc(50% - var(--bar-h) - var(--gut));
  height: var(--bar-h);
}
.is-nav-open .franja__mark { flex-basis: 44px; width: 44px; }
.is-nav-open .franja__mark svg { width: 22px; }
.is-nav-open .franja__item { opacity: 1; transform: none; pointer-events: auto; }
.is-nav-open .franja__item:nth-child(1) { transition-delay: .18s; }
.is-nav-open .franja__item:nth-child(2) { transition-delay: .24s; }
.is-nav-open .franja__item:nth-child(3) { transition-delay: .30s; }
.is-nav-open .franja__item:nth-child(4) { transition-delay: .36s; }

/* Botón grid ▢▢/▢▢ ↔ ▢ — se acopla a la barra cuando el menú está abierto */
.grid-btn {
  position: fixed;
  top: var(--gut);
  right: var(--gut);
  z-index: 60;
  height: var(--pill);
  min-width: var(--pill);
  padding: 0 1.05rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  border-radius: 50px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: var(--fs-s);
  letter-spacing: .02em;
  transition: right .6s var(--ease), height .6s var(--ease), min-width .6s var(--ease), padding .6s var(--ease);
}
.grid-btn__icon { position: relative; width: 16px; height: 16px; flex: 0 0 16px; }
.grid-btn__icon i {
  position: absolute; width: 7px; height: 7px;
  border: 1.2px solid currentColor;
  transition: all .5s var(--ease);
}
.grid-btn__icon i:nth-child(1) { left: 0; top: 0; }
.grid-btn__icon i:nth-child(2) { right: 0; top: 0; }
.grid-btn__icon i:nth-child(3) { left: 0; bottom: 0; }
.grid-btn__icon i:nth-child(4) { right: 0; bottom: 0; }
.is-grid .grid-btn__icon i { left: 1px; top: 1px; width: 14px; height: 14px; right: auto; bottom: auto; }
.is-grid .grid-btn__icon i:nth-child(n+2) { opacity: 0; }
.grid-btn__count { overflow: hidden; max-width: 6em; transition: max-width .5s var(--ease), opacity .3s ease; }
.is-nav-open .grid-btn { right: calc(25% - var(--bar-h)); height: var(--bar-h); min-width: var(--bar-h); padding: 0 11px; gap: 0; }
.is-nav-open .grid-btn__count { max-width: 0; opacity: 0; }

/* --------------------------------------------------------------------------
   Paneles de cristal (Proyectos / About / Contacto)
   -------------------------------------------------------------------------- */
.panel {
  position: fixed;
  top: calc(var(--gut) * 2 + var(--bar-h));
  left: 25%;
  width: 50%;
  z-index: 55;
  display: grid;
  grid-template-rows: 0fr;
  border-radius: 15px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-size: var(--fs-nav);
  line-height: 1.12;
  transition: grid-template-rows .55s var(--ease), opacity .3s ease;
  opacity: 0;
}
.panel.is-open { grid-template-rows: 1fr; opacity: 1; }
.panel__inner { min-height: 0; overflow: hidden; }
.panel.is-open .panel__inner { overflow-y: auto; max-height: 70vh; overscroll-behavior: contain; }
.panel__pad { padding: .5rem; }
.panel__inner::-webkit-scrollbar { width: 8px; }
.panel__inner::-webkit-scrollbar-thumb { background: #bbb; border-radius: 10px; }
.panel__foot { display: flex; justify-content: space-between; align-items: center; margin-top: .6rem; font-size: var(--fs-s); }
.panel__close { margin-left: auto; font-size: var(--fs-nav); }
.panel p { margin: 0 0 .8em; }
.panel__link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.panel .contact-list { display: flex; flex-direction: column; gap: .2rem; }
.panel .contact-list a { width: fit-content; }
@media (hover: hover) { .panel .contact-list a:hover { text-decoration: underline; text-underline-offset: 4px; } }

.plist { display: flex; flex-direction: column; }
.plist__row {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  gap: 1rem;
  padding: .25rem 0;
  border-bottom: 1pt solid var(--blue);
  margin-bottom: .2rem;
}
.plist__num { font-size: var(--fs-s); padding-top: .3em; }
.plist__name { transition: transform .4s var(--ease); }
.plist__tag { text-align: right; }
@media (hover: hover) { .plist__row:hover .plist__name { transform: translateX(.5rem); } }

.peek {
  position: fixed; left: 0; top: 0; z-index: 70;
  width: 220px; aspect-ratio: 4 / 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  overflow: hidden;
  border-radius: 6px;
}
.peek img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform .6s var(--ease-out); }
.peek.is-on { opacity: 1; }
.peek.is-on img { transform: scale(1); }

/* --------------------------------------------------------------------------
   HOME — carrusel
   -------------------------------------------------------------------------- */
.home { overflow: hidden; height: 100vh; height: 100svh; }

.track {
  position: fixed; inset: 0;
  display: flex;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  cursor: none;
}
@media (hover: none), (pointer: coarse) { .track { cursor: auto; } }
.track::-webkit-scrollbar { display: none; }
.track.is-dragging, .track.is-jumping { scroll-snap-type: none; }
.track.is-dragging { cursor: grabbing; }
.is-holding .slide__media { transform: scale(.985); }

.slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%; height: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  overflow: hidden;
  background: #000;
  user-select: none;
  -webkit-user-select: none;
}
.slide__media {
  width: 100%; height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  transition: transform .5s var(--ease);
}
/* Portada de vídeo que no encaja con la pantalla: entera, centrada, sobre el fondo del propio vídeo */
.slide.is-contain { background: var(--bg, #000); }
.slide.is-contain .slide__media {
  object-fit: contain;
  padding: calc(var(--pill) + var(--gut) * 3) var(--gut) calc(var(--bar-h) + 3.4rem);
}

/* Portada tipográfica (proyectos sin material) */
.cover {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--pill) + 2rem) 1.25rem 9rem;
  background: var(--paper);
  color: var(--blue);
}
.cover__title {
  margin: 0; font-weight: 400;
  font-size: clamp(56px, 11vw, 220px);
  line-height: .9; letter-spacing: -.035em;
  text-wrap: balance;
}
.cover__lead {
  max-width: 60ch; margin: 2rem 0 0; padding-bottom: .9rem;
  border-bottom: 1px solid currentColor;
  font-size: clamp(12px, 1.05vw, 16px); line-height: 1.25;
  text-transform: uppercase; letter-spacing: .01em;
}
.cover .chips { position: absolute; top: calc(var(--pill) + 1.6rem); left: 1.25rem; }

/* Etiquetas tipo deck: (03) [PROYECTO] (NOMBRE) */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.chip {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 .55rem;
  border: 1.2px solid currentColor;
  font-size: 9.5pt; text-transform: uppercase; letter-spacing: .02em; line-height: 1;
}
.chip--round { border-radius: 999px; }
.chip--num { width: 22px; padding: 0; justify-content: center; border-radius: 50%; font-size: 8.5pt; }

/* Cursor "Ver proyecto" */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 45;
  pointer-events: none;
  margin: -14px 0 0 -14px;
  opacity: 0;
  transition: opacity .2s ease;
}
.cursor span {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 28px; padding: 0 .8rem 0 .55rem;
  border-radius: 999px;
  background: var(--blue); color: var(--white);
  font-size: 10pt; letter-spacing: .02em; white-space: nowrap;
  transform: scale(.6);
  transition: transform .35s var(--ease-out);
}
.cursor span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cursor.is-on { opacity: 1; }
.cursor.is-on span { transform: scale(1); }
.is-holding .cursor span::after { content: ' · pausa'; }
.is-grid .cursor, .is-sheet .cursor, .is-panel .cursor { opacity: 0; }

/* --------------------------------------------------------------------------
   Caja inferior — +info · tiempos · franja-info
   -------------------------------------------------------------------------- */
.info {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: flex-end;
  pointer-events: none;
  transition: transform .6s var(--ease), opacity .4s ease;
}
.info > * { pointer-events: auto; }
.is-grid .info, .is-sheet .info { transform: translateY(110%); opacity: 0; }

.more {
  width: 50%;
  display: grid; grid-template-rows: 0fr;
  background: var(--blue); color: var(--white);
  transition: grid-template-rows .7s var(--ease);
}
.more.is-open { grid-template-rows: 1fr; }
.more > .more__inner { min-height: 0; overflow: hidden; }
.more.is-open > .more__inner { overflow-y: auto; max-height: 62vh; }
.more__inner { display: grid; gap: 1rem; padding: 0 var(--gut); }
.more__inner > :first-child { margin-top: .6rem; }
.more__inner > :last-child { margin-bottom: 1rem; }
.more__long { margin: 0; font-size: 13pt; line-height: 1.2; font-family: Arial, Helvetica, sans-serif; font-weight: 500; }
.more__row {
  display: grid; grid-template-columns: 7rem 1fr; gap: 1rem;
  padding-top: .5rem; border-top: 1px solid rgba(255, 255, 255, .45);
}
.more__label { text-transform: uppercase; letter-spacing: .02em; font-size: 9.5pt; opacity: .8; }
.more__open { justify-self: start; text-decoration: underline; text-underline-offset: 3px; }

.tiempos { width: 100%; display: flex; align-items: center; gap: .5rem; padding: 0 var(--gut) .3rem; }
.play {
  flex: 0 0 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.play::before, .play::after { content: ''; grid-area: 1 / 1; transition: opacity .2s; }
.play::before { width: 7px; height: 8px; border-left: 2px solid var(--blue); border-right: 2px solid var(--blue); }
.play::after { width: 0; height: 0; margin-left: 2px; border-left: 7px solid var(--blue); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; opacity: 0; }
.is-paused .play::before { opacity: 0; }
.is-paused .play::after { opacity: 1; }
.progress { flex: 1; display: flex; gap: .2rem; }
.progress button { flex: 1; height: 15px; display: flex; align-items: center; }
.progress i {
  display: block; width: 100%; height: 5px;
  border-radius: 10px;
  background: rgba(210, 210, 210, .8);
  overflow: hidden;
  position: relative;
}
.progress i::after {
  content: ''; position: absolute; inset: 0;
  background: var(--blue);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.progress .is-active i::after { transform: scaleX(var(--p, 0)); }
@media (hover: hover) { .progress button:hover i { background: rgba(210, 210, 210, 1); } }

.bar {
  width: 100%;
  display: grid;
  grid-template-columns: 2.2rem 1fr 1fr 2fr auto;
  gap: 1rem; align-items: baseline;
  padding: .3rem var(--gut) .35rem;
  background: var(--blue); color: var(--white);
}
.roll { display: inline-grid; overflow: hidden; vertical-align: bottom; }
.roll > span { grid-area: 1 / 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.bar__num { opacity: .75; }
.bar__name { text-transform: uppercase; letter-spacing: .02em; }
.bar__more { white-space: nowrap; }
@media (hover: hover) { .bar__more:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* --------------------------------------------------------------------------
   Vista GRID — índice editorial con ritmo asimétrico
   -------------------------------------------------------------------------- */
.grid {
  position: fixed; inset: 0; z-index: 30;
  overflow-y: auto; overscroll-behavior: contain;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.25rem; row-gap: 5.5rem;
  align-items: end; align-content: start;
  padding: calc(var(--pill) + 2.4rem) 1.25rem 9rem;
  background: var(--paper);
  visibility: hidden; opacity: 0;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.is-grid .grid { visibility: visible; opacity: 1; transition: opacity .45s ease; }
.grid__head {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
  padding-bottom: 1rem; margin-bottom: -2rem;
  border-bottom: 1px solid currentColor;
}
.grid__title { margin: 0; font-weight: 400; font-size: clamp(52px, 10vw, 200px); line-height: .9; letter-spacing: -.035em; }
.grid__meta {
  margin: 0 0 .5rem; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem;
  font-size: 10pt; text-transform: uppercase; letter-spacing: .02em; text-align: right;
}
.tile {
  display: flex; flex-direction: column; gap: .5rem; min-width: 0;
  opacity: 0; transform: translateY(32px);
  transition: opacity .7s var(--ease-out), transform .9s var(--ease-out);
}
.is-grid .tile { opacity: 1; transform: none; transition-delay: calc(var(--i) * 50ms + 120ms); }
.tile__media { position: relative; display: block; overflow: hidden; aspect-ratio: var(--tar, 4 / 3); background: var(--bg, #dcdbdb); }
.tile__media picture, .tile__media img, .tile__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile__media img, .tile__video { transition: transform 1.2s var(--ease), opacity .4s ease; }
.tile__video { opacity: 0; }
.tile__video.is-on { opacity: 1; }
.tile__cap {
  display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .8rem; align-items: baseline;
  padding-top: .45rem; border-top: 1px solid currentColor;
}
.tile__num, .tile__tag { font-size: 9.5pt; letter-spacing: .02em; }
.tile__tag { text-transform: uppercase; text-align: right; }
.tile__name { font-size: clamp(15px, 1.35vw, 22px); line-height: 1.1; transition: transform .5s var(--ease); }
@media (hover: hover) {
  .tile:hover .tile__media img, .tile:hover .tile__video { transform: scale(1.035); }
  .tile:hover .tile__name { transform: translateX(.4rem); }
}
/* Ritmo: tamaños y proporciones alternos en un patrón de seis */
.tile:nth-of-type(6n+1) { grid-column: 1 / span 7; --tar: 4 / 3; }
.tile:nth-of-type(6n+2) { grid-column: 9 / span 4; --tar: 4 / 5; }
.tile:nth-of-type(6n+3) { grid-column: 2 / span 4; --tar: 1 / 1; }
.tile:nth-of-type(6n+4) { grid-column: 7 / span 6; --tar: 3 / 2; }
.tile:nth-of-type(6n+5) { grid-column: 1 / span 5; --tar: 4 / 5; }
.tile:nth-of-type(6n+6) { grid-column: 6 / span 7; --tar: 16 / 10; }
.tile .cover { padding: 1rem; }
.tile .cover__title { font-size: clamp(28px, 4.4vw, 84px); margin-top: auto; }
.bar__cta { display: none; }

/* --------------------------------------------------------------------------
   PÁGINA DE PROYECTO
   -------------------------------------------------------------------------- */
.readbar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 80;
  height: 2px; background: var(--blue);
  transform: scaleX(0); transform-origin: 0 50%;
}
.pj__head { padding: calc(var(--pill) + 2.4rem) 1.25rem 2.6rem; }
.pj__head .chips { margin-bottom: 2.4rem; }
.pj__title {
  margin: 0; font-weight: 400;
  font-size: clamp(52px, 10vw, 200px);
  line-height: .9; letter-spacing: -.035em; text-wrap: balance;
}
.pj__title .mask { padding-bottom: .06em; }
.pj__title .mask > span { transform: none; animation: rise 1.1s var(--ease-out) .05s both; }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }

.pj__hero {
  margin: 0;
  background: var(--bg, #000);
  view-transition-name: hero;
}
.pj__hero video, .pj__hero img {
  display: block; width: 100%; height: auto;
  aspect-ratio: var(--ar);
  max-height: 92svh; object-fit: contain; margin: 0 auto;
}
.pj__hero.is-tall { padding: 5svh 0; }
.pj__hero.is-tall video, .pj__hero.is-tall img { width: auto; max-width: 100%; height: 82svh; max-height: none; }

.pj__intro {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 2.5rem 1.25rem;
  padding: 4.5rem 1.25rem 5.5rem;
}
.pj__lead {
  grid-column: 1 / span 7; margin: 0;
  font-size: clamp(22px, 2.45vw, 40px); line-height: 1.1; letter-spacing: -.012em;
  text-indent: 2.2em; text-wrap: pretty;
}
.pj__meta { grid-column: 9 / -1; margin: 0; border-top: 1px solid currentColor; align-self: start; }
.pj__meta > div {
  display: grid; grid-template-columns: 7.2rem 1fr; gap: 1rem;
  padding: .62rem 0 .72rem; border-bottom: 1px solid currentColor;
}
.pj__meta dt { text-transform: uppercase; letter-spacing: .02em; font-size: 9.5pt; padding-top: .18em; }
.pj__meta dd { margin: 0; font-size: 12pt; line-height: 1.25; }

.pj__gallery {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2.2rem var(--gut); padding: 0 var(--gut);
  align-items: end;
}
.g, .g[data-reveal] { margin: 0; min-width: 0; opacity: 1; transform: none; }
/* Revelado tipo cortina: la imagen se descubre de arriba abajo mientras se asienta */
.g .g__open { clip-path: inset(0 0 100% 0); transition: clip-path 1.15s var(--ease-out); }
.g.is-in .g__open { clip-path: inset(0 0 0 0); }
.g .g__open img, .g .g__open video { transform: scale(1.07); transition: transform 1.7s var(--ease-out); }
.g.is-in .g__open img, .g.is-in .g__open video { transform: none; }
.g figcaption { opacity: 0; transition: opacity .6s ease .5s; }
.g.is-in figcaption { opacity: .65; }
.g--full, .g--solo { grid-column: 1 / -1; }
.g__open { display: block; width: 100%; cursor: zoom-in; }
.g img, .g video { display: block; width: 100%; height: auto; }
.g--full video { max-height: 92vh; object-fit: contain; background: #000; }
.g--half .g__open, .g--solo .g__open { display: grid; place-items: center; }
.g--half img, .g--half video, .g--solo img, .g--solo video { width: auto; max-width: 100%; max-height: 92vh; }
.g.g--small video { width: min(100%, 980px); margin: 0 auto; background: transparent; }
.g figcaption { padding-top: .5rem; font-size: 9.5pt; letter-spacing: .03em; }
.g--solo figcaption { text-align: center; }

.pj__nav { margin-top: 9rem; border-top: 1px solid currentColor; }
.pj__next { position: relative; display: block; padding: 1.25rem 1.25rem 3.4rem; overflow: hidden; isolation: isolate; }
.pj__next-label { display: block; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 1.6rem; }
.pj__next-title {
  position: relative; z-index: 2; display: block;
  font-size: clamp(52px, 10vw, 200px); line-height: .9; letter-spacing: -.035em; text-wrap: balance;
  transition: transform .7s var(--ease);
}
.pj__next-img {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: clamp(200px, 26vw, 420px); aspect-ratio: 4 / 3; overflow: hidden;
  pointer-events: none; opacity: 0;
  transform: translate(calc(var(--x, 70vw) - 50%), calc(var(--y, 50%) - 50%)) scale(.92);
  transition: opacity .35s ease, transform .6s var(--ease-out);
}
.pj__next-img img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .pj__next:hover .pj__next-title { transform: translateX(1.25rem); }
  .pj__next:hover .pj__next-img { opacity: 1; transform: translate(calc(var(--x, 70vw) - 50%), calc(var(--y, 50%) - 50%)) scale(1); }
}
@media (hover: none), (pointer: coarse) {
  .pj__next-img { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin-top: 1.6rem; opacity: 1; transform: none; }
}
.pj__pn {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.25rem; border-top: 1px solid currentColor;
  text-transform: uppercase; letter-spacing: .02em;
}
@media (hover: hover) { .pj__pn a:hover { text-decoration: underline; text-underline-offset: 3px; } }

.site-foot {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .6rem 2rem;
  padding: .9rem 1.25rem 1.1rem;
  background: var(--blue); color: var(--white);
  text-transform: uppercase; letter-spacing: .02em;
}
.site-foot__links { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; align-items: baseline; }
@media (hover: hover) { .site-foot a:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* Pista de uso en móvil (solo la primera visita) */
.hint {
  position: fixed; left: var(--gut); right: var(--gut); top: 46%; z-index: 45;
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  pointer-events: none; opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease, transform .6s var(--ease-out);
}
.hint span {
  padding: .5rem .8rem; border-radius: 999px;
  background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 10pt; text-transform: uppercase; letter-spacing: .02em;
}
.hint span:nth-child(2) { background: var(--blue); color: var(--white); }
.hint.is-on { opacity: 1; transform: none; }

/* Título compacto que aparece al pasar el título grande */
.pj__sticky {
  position: fixed; top: var(--gut); left: 50%; z-index: 59;
  height: var(--pill); max-width: calc(100vw - var(--pill) * 2 - var(--gut) * 6);
  display: flex; align-items: center; padding: 0 1.15rem;
  border-radius: 999px; background: var(--glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-50%, -140%);
  transition: transform .6s var(--ease), opacity .3s ease;
}
.pj__sticky span { overflow: hidden; text-overflow: ellipsis; }
.is-past-title .pj__sticky { opacity: 1; transform: translate(-50%, 0); }
.is-nav-open .pj__sticky, .is-lightbox .pj__sticky { opacity: 0; }

/* Cinta que corre */
.marquee {
  overflow: hidden; white-space: nowrap;
  padding: .8rem 0 .9rem;
  border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;
}
.marquee__track { display: inline-flex; animation: marquee 42s linear infinite; will-change: transform; }
.marquee__track span { padding-right: .35em; font-size: clamp(30px, 4.4vw, 72px); line-height: 1; letter-spacing: -.025em; }
@keyframes marquee { to { transform: translateX(-50%); } }
.about .marquee { margin-top: 6rem; }
.about .contact { margin-top: 0; }
.project .marquee { margin-top: 0; border-bottom: 0; }

/* Visor a pantalla completa */
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(12, 12, 12, .97); color: var(--white);
}
.lightbox::backdrop { background: rgba(0, 0, 0, .5); }
.lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.lightbox__stage { display: grid; place-items: center; min-height: 0; padding: 2.5vh 3vw 0; }
.lightbox__stage picture { display: contents; }
.lightbox__stage img, .lightbox__stage video { max-width: 100%; max-height: calc(100dvh - 5rem); width: auto; height: auto; object-fit: contain; user-select: none; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1.25rem 1rem; font-size: var(--fs-nav); }
.lightbox__nav { display: flex; gap: 2rem; }
.lightbox :focus-visible { outline-color: var(--white); }
html.is-lightbox { overflow: hidden; }

::view-transition-group(hero) { animation-duration: .7s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }

/* Accesos y pequeños detalles */
.skip {
  position: fixed; left: var(--gut); top: -100px; z-index: 300;
  padding: .55rem 1rem; border-radius: 999px;
  background: var(--blue); color: var(--white);
}
.skip:focus { top: var(--gut); }
.copyable { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .2em .6em; }
.copy {
  font-size: 9pt; line-height: 1; letter-spacing: .03em; text-transform: uppercase;
  padding: .35em .7em .3em; border: 1.2px solid currentColor; border-radius: 999px;
  letter-spacing: .02em; white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.copy.is-done { background: var(--blue); border-color: var(--blue); color: var(--white); }
.contact .copy, .site-foot .copy { color: var(--white); }
.contact .copy.is-done, .site-foot .copy.is-done { background: var(--white); border-color: var(--white); color: var(--blue); }
.contact__big .copyable { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: .9rem; }
.contact__big .copy { font-size: 10pt; letter-spacing: .02em; }
.tile .cover__title { display: block; }

/* Filas con punto (deck) — compartidas por ficha y about */
.rows { margin-top: 2.5rem; border-top: 1px solid currentColor; }
.row {
  display: grid; grid-template-columns: 18px 14rem 1fr;
  gap: 1rem 2.5rem; padding: 1.1rem 0 1.3rem;
  border-bottom: 1px solid currentColor;
}
.row::before { content: ''; width: 16px; height: 16px; margin-top: .05em; border-radius: 50%; background: currentColor; }
.row__label { margin: 0; font-size: inherit; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; }
.row__body { max-width: 72ch; font-size: 13pt; line-height: 1.25; }
.row__body p { margin: 0 0 .8em; }
.row__body p:last-child { margin: 0; }
.list-inline { margin: 0; padding: 0; list-style: none; }
.list-inline li { display: inline; }
.list-inline li:not(:last-child)::after { content: ' · '; }

/* --------------------------------------------------------------------------
   ABOUT + CONTACTO
   -------------------------------------------------------------------------- */
.page { padding: calc(var(--pill) + 2.2rem) 1.25rem 0; }
.page .chips { margin-bottom: 3rem; }
.display { margin: 0; font-weight: 400; font-size: clamp(56px, 11vw, 220px); line-height: .9; letter-spacing: -.035em; }
.lead {
  max-width: 34ch; margin: 3rem 0 0;
  font-size: clamp(22px, 3.1vw, 50px); line-height: 1.07; letter-spacing: -.012em;
  text-indent: 2.2em;
}
.page .rows { margin-top: 5rem; }

.contact {
  margin-top: 6rem;
  padding: 1.25rem 1.25rem 0;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--blue); color: var(--white);
}
.contact .chips { margin-top: calc(var(--pill) + 1rem); }
.contact__title { margin: 3rem 0 0; max-width: 16ch; font-weight: 400; font-size: clamp(28px, 3.6vw, 60px); line-height: 1.04; letter-spacing: -.015em; }
.contact__big {
  margin: auto 0 0; display: flex; flex-direction: column;
  font-size: clamp(34px, 7.4vw, 150px); line-height: .95; letter-spacing: -.03em;
}
.contact__big a {
  width: fit-content;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px; background-position: 0 92%; background-repeat: no-repeat;
  transition: background-size .6s var(--ease);
  overflow-wrap: anywhere;
}
@media (hover: hover) { .contact__big a:hover { background-size: 100% 2px; } }
.foot {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem;
  margin-top: 4rem; padding: .9rem 0 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .6);
  text-transform: uppercase; letter-spacing: .02em;
}
.foot > :nth-child(2) { text-align: center; }
.foot > :last-child { text-align: right; }

/* Revelados (about) */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
.mask { display: block; overflow: hidden; }
.mask > span { display: block; transform: translateY(105%); transition: transform 1.1s var(--ease-out); }
.is-in .mask > span, .mask.is-in > span { transform: none; }
.rows[data-reveal] { opacity: 1; transform: none; }
.rows[data-reveal] .row { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
.rows[data-reveal].is-in .row { opacity: 1; transform: none; }
.rows[data-reveal].is-in .row:nth-child(2) { transition-delay: .08s; }
.rows[data-reveal].is-in .row:nth-child(3) { transition-delay: .16s; }
.rows[data-reveal].is-in .row:nth-child(4) { transition-delay: .24s; }
.rows[data-reveal].is-in .row:nth-child(5) { transition-delay: .32s; }

/* --------------------------------------------------------------------------
   Responsive (punto de corte de la web original: 923px)
   -------------------------------------------------------------------------- */
@media (max-width: 923px) {
  :root { --fs-nav: 13pt; }
  .is-nav-open .franja { left: var(--gut); width: calc(100% - var(--gut) * 3 - var(--bar-h)); }
  .is-nav-open .grid-btn { right: var(--gut); }
  .franja__items { gap: .85rem; padding-right: .75rem; }
  .grid-btn__count { display: none; }
  .grid-btn { padding: 0; justify-content: center; }
  .panel { left: var(--gut); width: calc(100% - var(--gut) * 2); }
  .plist__row { grid-template-columns: 2rem 1fr; gap: 0 .6rem; }
  .plist__tag { grid-column: 2; text-align: left; font-size: 9.5pt; opacity: .75; padding-bottom: .15rem; }

  .bar { grid-template-columns: 2rem 1fr auto; row-gap: .1rem; }
  .bar__tag { grid-column: 2; grid-row: 2; opacity: .75; }
  .bar__short { display: none; }
  .bar__more { grid-column: 3; grid-row: 1; }
  .more { width: 100%; }
  .more__row { grid-template-columns: 6rem 1fr; }

  .cover { padding: calc(var(--pill) + 4rem) var(--gut) 8rem; }
  .cover .chips { left: var(--gut); }
  .cover__title { font-size: clamp(48px, 15vw, 120px); line-height: .98; }

  /* Índice: una pieza grande y dos pequeñas, en bucle */
  .grid { grid-template-columns: 1fr 1fr; column-gap: .5rem; row-gap: 2.4rem; padding: calc(var(--pill) + 2.2rem) var(--gut) 7rem; }
  .grid__head { flex-direction: column; align-items: flex-start; gap: .8rem; margin-bottom: -.6rem; }
  .grid__title { font-size: clamp(56px, 17vw, 96px); }
  .grid__meta { align-items: flex-start; text-align: left; font-size: 9pt; }
  .tile:nth-of-type(n) { grid-column: auto; --tar: 3 / 4; }
  .tile:nth-of-type(3n+1) { grid-column: 1 / -1; --tar: 4 / 3; }
  .tile__cap { grid-template-columns: 1.7rem 1fr; gap: .1rem .4rem; }
  .tile__tag { grid-column: 2; text-align: left; font-size: 8.5pt; opacity: .7; }
  .tile__num { font-size: 8.5pt; padding-top: .15em; }
  .tile__name { font-size: 15px; }
  .tile:nth-of-type(3n+1) .tile__name { font-size: 22px; letter-spacing: -.01em; }

  /* Home en móvil: formato stories */
  .home .tiempos {
    position: fixed; top: 0; left: 0; right: 0; z-index: 62;
    padding: calc(env(safe-area-inset-top, 0px) + 6px) var(--gut) 3.2rem;
    background: linear-gradient(rgba(0, 0, 0, .26), rgba(0, 0, 0, 0));
    pointer-events: none;
  }
  .home .tiempos .progress { pointer-events: auto; }
  .home .play { display: none; }
  .home .progress { gap: 3px; }
  .home .progress button { height: 12px; }
  .home .progress i { height: 2.5px; background: rgba(237, 236, 236, .75); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08); }
  .home .franja, .home .grid-btn { top: calc(env(safe-area-inset-top, 0px) + var(--gut) + 14px); }
  .home.is-grid .franja, .home.is-grid .grid-btn { top: var(--gut); }
  .bar {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "num tag more" "name name name" "cta cta cta";
    gap: .35rem .7rem; align-items: center;
    padding: .75rem var(--gut) calc(.9rem + env(safe-area-inset-bottom, 0px));
  }
  .bar__num { grid-area: num; font-size: 10pt; opacity: .8; }
  .bar__tag { grid-area: tag; grid-column: auto; grid-row: auto; font-size: 9.5pt; text-transform: uppercase; letter-spacing: .02em; opacity: .8; }
  .bar__more { grid-area: more; grid-column: auto; grid-row: auto; font-size: 10pt; }
  .bar__name { grid-area: name; font-size: clamp(30px, 9.2vw, 44px); line-height: .98; letter-spacing: -.025em; text-transform: none; }
  .bar__name.roll > span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding-bottom: .06em; }
  .bar__cta {
    grid-area: cta; justify-self: start; margin-top: .35rem;
    display: inline-flex; align-items: center; gap: .55rem;
    height: 36px; padding: 0 1.05rem;
    border: 1.2px solid currentColor; border-radius: 999px;
    font-size: 10pt; text-transform: uppercase; letter-spacing: .03em;
  }
  .bar__cta:active { background: var(--white); color: var(--blue); }

  .pj__head { padding-left: var(--gut); padding-right: var(--gut); }
  .pj__hero video, .pj__hero img { aspect-ratio: var(--ar-m, var(--ar)); }
  .pj__hero.is-tall { padding: 0; }
  .pj__hero.is-tall video, .pj__hero.is-tall img { width: 100%; height: auto; }
  .pj__intro { grid-template-columns: 1fr; gap: 2rem; padding: 2.6rem var(--gut) 3.4rem; }
  .pj__lead, .pj__meta { grid-column: 1; }
  .pj__lead { text-indent: 1.4em; }
  .pj__gallery { grid-template-columns: 1fr 1fr; gap: 1.6rem .4rem; }
  .g--half figcaption { font-size: 8.5pt; }
  .pj__sticky { font-size: 10pt; }
  .marquee__track span { font-size: 34px; }
  .pj__nav { margin-top: 5rem; }
  .pj__next, .pj__pn { padding-left: var(--gut); padding-right: var(--gut); }
  .pj__pn { font-size: 9.5pt; }
  .site-foot { padding-left: var(--gut); padding-right: var(--gut); flex-direction: column; }
  .lightbox__stage { padding: 1rem 0 0; }

  .page { padding-left: var(--gut); padding-right: var(--gut); }
  .row { grid-template-columns: 14px 1fr; gap: .5rem 1rem; }
  .row::before { width: 12px; height: 12px; }
  .row__body { grid-column: 2; }
  .lead { text-indent: 1.4em; }
  .contact { padding-left: var(--gut); padding-right: var(--gut); }
  .contact__big { font-size: 7.3vw; line-height: 1.05; }
  .foot { grid-template-columns: 1fr; gap: .3rem; }
  .foot > * { text-align: left !important; }
}
@media (max-width: 420px) {
  .franja__name { display: none; }
  .franja__items { justify-content: space-between; }
}

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