/* ==========================================================
   VÏZMA — Maite Vizcarra
   Concepto: mirar, desarmar, alterar, reconstruir.
   Layout: grilla de 12 columnas sobre crema; los proyectos
   protagonistas rompen la grilla, el archivo la respeta.
   ========================================================== */

:root {
  /* Paleta Vïzma */
  --negro: #000000;
  --violeta: #593189;
  --verde: #019b7d;
  --amarillo: #ffec30;
  --crema: #fafae9;
  --tinta: #141414;          /* texto corrido sobre crema */
  --gris: #6d6c63;           /* texto secundario, gris con sesgo cálido */
  --linea: rgba(20, 20, 20, .16);

  /* Tipografía de la identidad: Neue Haas Grotesk Display (Adobe Fonts).
     Mientras no esté cargada, usa Helvetica Neue (Mac) y después Archivo. */
  --display: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Display", "Helvetica Neue", Helvetica, "Archivo", Arial, sans-serif;
  --texto: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, "Archivo", Arial, sans-serif;
  /* Mono solo dentro de Homogénesis, que es la tipografía propia del libro */
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(16px, 3vw, 40px);
  --header-h: 56px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--violeta); outline-offset: 3px; }
::selection { background: var(--amarillo); color: var(--negro); }

.wrap { padding-inline: var(--gutter); }

/* Etiquetas entre corchetes: el sistema de "fichas" del archivo */
.tag {
  font-family: var(--display);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0;
}
.tag a { text-decoration: none; }
.tag a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  mix-blend-mode: difference; color: #fff;
  pointer-events: none;
}
.header__in {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-inline: var(--gutter);
}
.header a, .header button { pointer-events: auto; }
.header__logo { width: 34px; color: #fff; display: block; }
.header__logo svg { width: 100%; height: auto; display: block; }
.nav { display: flex; gap: clamp(10px, 2.2vw, 28px); }
.nav a { text-decoration: none; white-space: nowrap; }
.nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Capítulos (proyectos protagonistas) ---------- */
.cap { position: relative; padding-block: clamp(56px, 9vw, 120px); }
.cap__head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px;
  align-items: end; margin-bottom: clamp(24px, 4vw, 48px);
}
.cap__num { grid-column: 1 / span 2; }
.cap__titulo {
  grid-column: 3 / span 7;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(52px, 11vw, 184px); line-height: .86; letter-spacing: -.035em;
  margin: 0; text-wrap: balance;
}
.cap__data { grid-column: 10 / span 3; display: grid; gap: 4px; }
.cap__bajada {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(18px, 1.8vw, 24px); line-height: 1.2; max-width: 30ch; margin: 0;
}
.btn-ver {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 500; font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.btn-ver:hover { gap: 16px; }
.btn-ver { transition: gap .25s ease; }

/* Libro — Homogénesis */
.cap--libro { background: #efefe6; }
.cap--libro .cap__titulo { font-size: clamp(40px, 6.4vw, 104px); }
.cap--libro .cap__titulo { font-family: var(--mono); font-weight: 400; letter-spacing: -.06em; }
.libro {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px;
}
.libro__visor { grid-column: 1 / -1; }
.visor { position: relative; user-select: none; }
.visor__frame { position: relative; max-width: 100%; display: flex; justify-content: center; padding-block: 12px; overflow: hidden; }
.visor__libro { margin: 0 auto; }
.hojap { background-color: #fff; }
.hojap__img { position: absolute; inset: 0; background-repeat: no-repeat; }
.visor__libro--simple .hojap { position: relative; }
.visor__libro--simple { display: grid; gap: 12px; width: 100%; }
.visor__ayuda { color: var(--gris); margin-left: auto; }
@media (hover: none) { .visor__ayuda::after { content: ""; } }
.visor__bar {
  display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap;
}
.visor__btn {
  font-family: var(--display); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  border: 1px solid var(--tinta); padding: 8px 12px; min-width: 44px; min-height: 36px;
}
.visor__btn:hover { background: var(--tinta); color: var(--crema); }
.visor__count { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.visor__ticks { flex: 1 1 200px; display: flex; gap: 2px; height: 22px; align-items: stretch; min-width: 0; }
.visor__ticks button { flex: 1; background: var(--linea); }
.visor__ticks button[aria-current="true"] { background: var(--violeta); }
.visor__ticks button:hover { background: var(--tinta); }

.libro__texto { grid-column: 1 / span 5; margin-top: clamp(32px, 5vw, 64px); }
.libro__texto p { max-width: 52ch; margin: 0 0 1em; }
.libro__fotos {
  grid-column: 7 / span 6; margin-top: clamp(32px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.libro__fotos a, .film__fotos a { display: block; min-width: 0; }
.libro__fotos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.libro__fotos a:first-child { grid-column: 1 / -1; }
.libro__fotos a:first-child img { aspect-ratio: 16 / 9; }
.libro__cierre {
  grid-column: 1 / -1; margin: clamp(48px, 7vw, 96px) 0 0;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: -.02em;
  font-size: clamp(18px, 2.6vw, 36px); line-height: 1.15; color: var(--violeta);
  text-wrap: balance;
}

/* Fashion film */
.cap--film { background: var(--negro); color: var(--crema); }
.cap--film .cap__titulo { font-weight: 900; color: var(--amarillo); font-size: clamp(56px, 12vw, 200px); }
.cap--film .cap__bajada { color: var(--crema); }
.film { position: relative; }
.film__frame {
  position: relative; aspect-ratio: 16 / 9; background: #111; overflow: hidden;
}
.film__frame video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.film__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: transparent; z-index: 2;
}
.film__play span {
  font-family: var(--display); font-weight: 900; color: var(--crema);
  font-size: clamp(36px, 8vw, 120px); letter-spacing: -.04em; line-height: 1;
  mix-blend-mode: difference;
  transition: letter-spacing .4s ease;
}
.film__play:hover span { letter-spacing: .04em; }
.film__play[hidden] { display: none !important; }
.film__bar { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.film__fotos {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-items: start;
  margin: clamp(32px, 5vw, 64px) 0 16px;
}
.film__fotos img { width: 100%; aspect-ratio: 2 / 3; height: auto; object-fit: cover; }
.film__fotos a:nth-child(even) { margin-top: 12%; }
.film__fotos a.is-h { grid-column: span 2; }
.film__fotos a.is-h img { aspect-ratio: 3 / 2; }
.p-creditos { margin-top: clamp(48px, 7vw, 96px); border-top: 1px solid var(--tinta); padding-top: 12px; display: grid; gap: 12px; }
.p-creditos dl { margin: 0; display: grid; grid-template-columns: minmax(0, 16em) minmax(0, 1fr); gap: 6px 16px; }
.p-creditos dt { color: var(--gris); }
.p-creditos dd { margin: 0; }
.film__pendiente {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px;
  border: 1px dashed rgba(250,250,233,.35);
}

/* Producción fotográfica — Protesta inmóvil */
.cap--foto { background: var(--crema); }
.cap--foto .cap__titulo span { display: block; }
.cap--foto .cap__titulo span:last-child { padding-left: .9em; }
.foto {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px;
  align-items: start;
}
.foto__a { grid-column: 1 / span 7; }
.foto__b { grid-column: 9 / span 4; margin-top: 22%; }
.foto__c { grid-column: 3 / span 4; margin-top: -8%; }
.foto__reel { grid-column: 8 / span 3; margin-top: 10%; }
.foto__d { grid-column: 1 / span 12; margin-top: clamp(24px, 4vw, 48px); }
.foto__frase {
  grid-column: 1 / span 6; align-self: center;
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(28px, 4.6vw, 68px); line-height: .9; letter-spacing: -.03em; margin: 0;
}
.foto__frase mark { background: var(--amarillo); color: var(--negro); padding: 0 .08em; }
.foto figure { margin: 0; }
.foto figcaption { margin-top: 6px; }
.reel video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #000; }
.vgrande { display: inline-block; margin-top: 8px; margin-left: 12px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.vgrande:hover { color: var(--violeta); }
.vlb { position: fixed; inset: 0; z-index: 200; background: #000; display: grid; place-items: center; }
.vlb video { width: 100vw; height: 100svh; height: 100dvh; object-fit: contain; background: #000; }
.vlb__x { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 16px; color: var(--crema); background: none; border: 0; cursor: pointer; }

/* Fragmentos: la imagen llega desarmada y se reconstruye */
.frag { position: relative; overflow: hidden; display: block; }
.frag > img:first-child { visibility: hidden; width: 100%; height: auto; }
.frag__s {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s cubic-bezier(.16,.84,.2,1);
}
.frag__s:nth-of-type(2) { clip-path: inset(0 66.66% 0 0); }
.frag__s:nth-of-type(3) { clip-path: inset(0 33.33% 0 33.33%); }
.frag__s:nth-of-type(4) { clip-path: inset(0 0 0 66.66%); }
.frag.is-done > img:first-child { visibility: visible; }
.frag.is-done .frag__s { display: none; }
.js .frag:not(.is-in) .frag__s:nth-of-type(2) { transform: translateY(-7%); }
.js .frag:not(.is-in) .frag__s:nth-of-type(3) { transform: translateY(5%); }
.js .frag:not(.is-in) .frag__s:nth-of-type(4) { transform: translateY(-3%); }

/* ---------- Archivo ---------- */
.archivo { padding-block: clamp(56px, 9vw, 120px); }
.archivo__head {
  display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap;
  margin-bottom: clamp(20px, 3vw, 36px);
}
.archivo__titulo {
  font-family: var(--display); font-weight: 900; margin: 0;
  font-size: clamp(40px, 7vw, 104px); line-height: .9; letter-spacing: -.035em;
}
.grupo + .grupo { margin-top: clamp(32px, 5vw, 64px); }
.grupo__t { display: flex; justify-content: space-between; padding-bottom: 8px; color: var(--violeta); }
.lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tinta); }
.fila { border-bottom: 1px solid var(--tinta); }
.fila a {
  position: relative;
  display: grid; grid-template-columns: 3.2em minmax(0, 1fr) minmax(0, 10em) 7em 4em;
  gap: 12px; align-items: center;
  padding-block: clamp(10px, 1.4vw, 16px);
  text-decoration: none;
}
.fila__n { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.fila__t {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(24px, 3.6vw, 52px); line-height: 1; letter-spacing: -.02em;
  position: relative; z-index: 1;
  overflow-wrap: anywhere;
}
.fila__recorte { height: clamp(28px, 3.2vw, 48px); overflow: hidden; background: #e9e8d6; }
.fila__recorte img { width: 100%; height: 100%; object-fit: cover; }
.fila a:hover .fila__recorte img { filter: none; }
.fila__tipo { text-align: right; }
.fila__anio { text-align: right; font-variant-numeric: tabular-nums; }
/* La imagen tapa parte del título al pasar el mouse */
.fila__flota {
  position: absolute; z-index: 2; pointer-events: none;
  width: clamp(140px, 16vw, 240px); left: 0; top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0; transition: opacity .18s ease;
}
.fila__flota img { width: 100%; height: auto; }
/* Filas jerarquizadas: más altas, recorte ancho y título grande */
.fila--top a {
  grid-template-columns: 3.2em minmax(0, 1fr) minmax(0, 26em) 7em 4em;
  padding-block: clamp(14px, 2vw, 26px);
}
.fila--top .fila__t { font-weight: 700; font-size: clamp(32px, 5.6vw, 88px); line-height: .92; letter-spacing: -.03em; }
.fila--top .fila__recorte { height: clamp(72px, 9vw, 140px); }
.fila--top .fila__n { color: var(--violeta); }

@media (hover: hover) {
  .fila a:hover .fila__flota { opacity: 1; }
  .fila a:hover .fila__t { color: var(--violeta); }
}

/* ---------- Sobre mí (página) ---------- */
.sobre { padding-block: clamp(24px, 4vw, 48px) clamp(56px, 9vw, 120px); }
.sobre__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.sobre__txt { grid-column: 4 / span 7; margin-top: clamp(20px, 3vw, 40px); display: grid; gap: 1em; }
.sobre__txt p { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(19px, 1.9vw, 27px); line-height: 1.22; max-width: 44ch; }
.sobre__intro {
  grid-column: 1 / span 10;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(28px, 4.2vw, 66px); line-height: 1; letter-spacing: -.025em;
}
.sobre__intro p { margin: 0; text-wrap: balance; }
.sobre__cols {
  grid-column: 1 / -1; margin-top: clamp(28px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  border-top: 1px solid var(--tinta); padding-top: 12px;
}
.sobre__cols .tag { color: var(--violeta); margin-bottom: 8px; }
.sobre__cols p { margin: 0; max-width: 40ch; }

.retrato {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; align-items: start;
  padding-block: clamp(24px, 4vw, 56px);
}
.retrato__img { grid-column: 3 / span 5; margin: 0; }
.retrato__img img { width: 100%; height: auto; display: block; }
.retrato__txt { grid-column: 9 / span 4; display: grid; gap: 14px; align-content: start; border-top: 1px solid var(--tinta); padding-top: 12px; margin-top: clamp(16px, 4vw, 64px); }
.retrato__txt p { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(19px, 1.9vw, 27px); line-height: 1.18; }

.vizma { padding-block: clamp(72px, 12vw, 160px); background: var(--violeta); color: var(--crema); display: grid; gap: 20px; }
.vizma__grande {
  margin: 0; max-width: 22ch;
  font-family: var(--display); font-weight: 900; font-size: clamp(36px, 6.4vw, 104px); line-height: .94; letter-spacing: -.03em;
  text-wrap: balance;
}
.vizma__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 980px; margin-top: 12px; }
.vizma__cols p { margin: 0; }

/* Manifiesto repartido: frases sueltas a lo largo de toda la web */
.mf {
  margin: 0; padding-block: clamp(12px, 2vw, 32px);
  font-family: var(--display); font-weight: 500;
  font-size: clamp(26px, 3.4vw, 50px); line-height: 1.02; letter-spacing: -.025em;
  text-wrap: balance;
}
.mf--der { padding-left: calc(var(--gutter, 16px) + 42%); }
.mf--izq { padding-right: 30%; }
.mf--centro { padding-left: calc(var(--gutter, 16px) + 18%); padding-right: 18%; font-weight: 400; }
.mf--verde { color: var(--verde); }
/* la sección anterior a una frase no deja tanto aire */
.vista > section:has(+ .mf), #capitulos:has(+ .mf) { padding-bottom: clamp(16px, 3vw, 40px); }
.mf + section { padding-top: clamp(16px, 3vw, 40px); }
.mf + .vizma { padding-top: clamp(48px, 7vw, 100px); }
#capitulos:has(+ .mf) > .cap:last-child { padding-bottom: clamp(16px, 3vw, 40px); }
.vista .mf + .archivo { padding-top: clamp(16px, 3vw, 40px); }
.mf--grande { font-weight: 900; font-size: clamp(36px, 6.4vw, 104px); line-height: .92; letter-spacing: -.035em; }
.mf--cierre { padding-block: clamp(24px, 4vw, 64px); font-weight: 900; font-size: clamp(34px, 6vw, 96px); line-height: .94; letter-spacing: -.035em; }
.manif { padding-block: clamp(56px, 9vw, 120px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.manif .tag { grid-column: 1 / span 3; }
.manif__txt { grid-column: 4 / span 8; }
.manif__txt p { margin: 0 0 1em; font-family: var(--display); font-weight: 400; font-size: clamp(19px, 1.9vw, 27px); line-height: 1.22; max-width: 44ch; }
.manif__txt .manif__cierre { font-weight: 900; color: var(--verde); letter-spacing: -.015em; margin-top: 1.4em; }

.hago { padding-block: 0 clamp(56px, 9vw, 120px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.hago .tag { grid-column: 1 / span 3; }
.hago ul { grid-column: 4 / span 9; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; }
.hago li { font-family: var(--display); font-weight: 500; font-size: clamp(22px, 2.6vw, 40px); letter-spacing: -.02em; }
.hago li:not(:last-child)::after { content: "/"; color: var(--violeta); margin: 0 .35em; font-weight: 400; }

/* ---------- Contacto ---------- */
.contacto { background: var(--violeta); color: var(--crema); padding-block: clamp(56px, 9vw, 120px) 24px; }
.contacto__mail {
  display: block; font-family: var(--display); font-weight: 900; text-decoration: none;
  font-size: clamp(28px, 7.6vw, 120px); line-height: .9; letter-spacing: -.035em;
  overflow-wrap: anywhere; margin: 16px 0 20px;
}
.contacto__mail:hover { color: var(--amarillo); }
.contacto__acciones { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; }
.copiar { border: 1px solid currentColor; padding: 8px 12px; }
.copiar:hover { background: var(--crema); color: var(--violeta); }
.redes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin-top: clamp(48px, 7vw, 96px); border-top: 1px solid rgba(250,250,233,.4); padding-top: 12px;
}
.redes a { text-decoration: none; display: grid; gap: 4px; }
.redes a:hover .redes__u { color: var(--amarillo); }
.redes__u { font-family: var(--display); font-weight: 500; font-size: clamp(16px, 1.8vw, 24px); overflow-wrap: anywhere; }
.pie {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: end;
  margin-top: clamp(64px, 10vw, 140px);
}
.pie__logo { width: clamp(80px, 12vw, 160px); color: var(--crema); }
.pie__logo svg { width: 100%; height: auto; display: block; }

/* ---------- Vista de proyecto ---------- */
.proyecto { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 24px); padding-bottom: 80px; }
.proyecto[hidden] { display: none !important; }
.p-volver { display: inline-block; margin-bottom: 24px; }
.p-head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; align-items: end;
  padding-bottom: 20px; border-bottom: 1px solid var(--tinta); margin-bottom: clamp(24px, 4vw, 48px);
}
.p-titulo {
  grid-column: 1 / span 8; margin: 0;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(44px, 8.4vw, 136px); line-height: .88; letter-spacing: -.035em; text-wrap: balance;
  overflow-wrap: anywhere;
}
.p-ficha { grid-column: 9 / span 4; display: grid; gap: 8px; }
.p-ficha dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; }
.p-ficha dt { color: var(--gris); }
.p-ficha dd { margin: 0; }
.p-bajada {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(20px, 2.2vw, 30px); line-height: 1.15; max-width: 36ch; margin: 0 0 clamp(24px, 4vw, 48px);
  text-wrap: balance;
}
.p-texto { max-width: 60ch; margin: 0 0 clamp(24px, 4vw, 48px); }
.p-flujo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.p-flujo figure { margin: 0; }
.p-flujo img { width: 100%; height: auto; background: #e9e8d6; }
.p-flujo .full { grid-column: 1 / -1; }
.p-flujo .left { grid-column: 1 / span 6; }
.p-flujo .right { grid-column: 7 / span 6; }
.p-flujo .solo-a { grid-column: 2 / span 5; }
.p-flujo .solo-b { grid-column: 7 / span 5; }
.p-flujo .off { grid-column: 4 / span 6; }
.p-flujo .vid { grid-column: 1 / -1; }
.p-flujo .vid--v { grid-column: 4 / span 6; }
.p-flujo video { width: 100%; background: #000; }
.p-sep { grid-column: 1 / -1; height: clamp(16px, 4vw, 48px); }
.p-fila { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; }
.p-fila figure { flex: 1 1 0; min-width: 0; }
.p-fila__esp { flex: 1 1 0; }
.p-sig {
  margin-top: clamp(56px, 8vw, 110px); border-top: 1px solid var(--tinta); padding-top: 12px;
  display: block; text-decoration: none;
}
.p-sig__t {
  display: block; font-family: var(--display); font-weight: 900;
  font-size: clamp(36px, 6vw, 96px); line-height: .9; letter-spacing: -.035em; margin-top: 8px;
}
.p-sig:hover .p-sig__t { color: var(--violeta); }

.vista[hidden] { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .cap__head { grid-template-columns: 1fr; }
  .cap__num, .cap__titulo, .cap__data { grid-column: 1 / -1; }
  .libro__texto, .libro__fotos { grid-column: 1 / -1; }
  .p-titulo, .p-ficha { grid-column: 1 / -1; }
  .fila a { grid-template-columns: 2.4em minmax(0, 1fr) 6em; }
  .fila__tipo, .fila__anio { display: none; }
  .fila--top a { grid-template-columns: 2.4em minmax(0, 1fr) minmax(0, 14em); }
}
@media (max-width: 640px) {
  :root { --header-h: 52px; }
  .nav { gap: 12px; }
  .foto__a, .foto__b, .foto__c, .foto__reel, .foto__frase, .foto__d { grid-column: 1 / -1; margin-top: 0; }
  .foto__b { grid-column: 4 / -1; }
  .foto__c { grid-column: 1 / span 9; }
  .foto__reel { grid-column: 3 / span 8; }
  .p-flujo .left, .p-flujo .right, .p-flujo .solo-a, .p-flujo .solo-b, .p-flujo .off, .p-flujo .vid--v { grid-column: 1 / -1; }
  .fila a { grid-template-columns: 2em minmax(0, 1fr) 4.5em; gap: 8px; }
  .fila--top a { grid-template-columns: 1fr 1fr; row-gap: 10px; }
  .fila--top .fila__n { grid-column: 1 / -1; }
  .fila--top .fila__t { grid-column: 1 / -1; font-size: clamp(32px, 10vw, 48px); }
  .fila--top .fila__recorte { grid-column: 1 / -1; height: 120px; }
  .redes { grid-template-columns: 1fr; }
  .film__fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .film__fotos a.is-h { grid-column: 1 / -1; margin-top: 0; }
  .p-creditos dl { grid-template-columns: 1fr; gap: 0; }
  .p-creditos dd { margin-bottom: 8px; }
  .visor__btn { padding: 8px 10px; }
}

@media (min-width: 641px) and (max-width: 900px) {
  .redes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .js .frag .frag__s, .v .ch { transform: none !important; }
}

/* ==========================================================
   Inicio: video recopilación visto a través del logo.
   Al bajar, el logo se abre y deja ver el video entero.
   ========================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.intro { --p: 0; position: relative; height: 210vh; height: 210svh; background: var(--amarillo); }
.intro__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.intro__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--amarillo); }
.intro__tapa {
  --ms: calc(90vw * (1 + var(--p) * var(--p) * 16));
  position: absolute; inset: -2px; background: var(--amarillo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2918 1165' fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M2560.0,1083.5L2560.0,1002.0L2646.0,1002.0L2732.0,1002.0L2732.0,1083.5L2732.0,1165.0L2646.0,1165.0L2560.0,1165.0L2560.0,1083.5ZM228.7,918.8C227.9,916.4 176.3,772.1 114.0,598.0C51.7,423.9 0.5,280.7 0.3,279.7L-0.2,278.0L95.5,278.2L191.2,278.5L257.8,488.7C294.5,604.4 324.7,699.0 325.0,699.0C325.3,699.0 353.4,611.8 387.5,505.2C421.6,398.7 451.9,304.0 454.8,294.7L460.2,278.0L550.7,278.0L641.1,278.0L640.6,279.8C640.2,280.7 588.1,425.7 524.7,602.0L409.4,922.5L319.8,922.8L230.2,923.0L228.7,918.8ZM742.0,600.0L742.0,277.0L828.0,277.0L914.0,277.0L914.0,600.0L914.0,923.0L828.0,923.0L742.0,923.0L742.0,600.0ZM1020.0,856.2L1020.1,789.5L1183.4,601.5L1346.7,413.5L1316.1,412.9C1299.3,412.5 1230.7,412.2 1163.8,412.1L1042.0,412.0L1042.0,345.0L1042.0,278.0L1304.5,278.0L1567.0,278.0L1567.0,346.8L1567.0,415.5L1403.6,598.5L1240.2,781.5L1408.1,781.8L1576.0,782.0L1576.0,852.5L1576.0,923.0L1298.0,923.0L1020.0,923.0L1020.0,856.2ZM1668.0,816.7L1668.0,710.4L1868.8,650.1C1979.2,616.9 2069.8,589.5 2070.2,589.1C2070.6,588.8 1980.4,561.3 1869.7,527.9L1668.5,467.4L1668.2,363.7L1668.0,260.0L1955.0,260.0L2242.0,260.0L2242.0,328.0L2242.0,396.0L2080.8,396.1C1992.1,396.2 1905.0,396.6 1887.2,396.9L1855.0,397.5L2048.5,458.0L2242.0,518.4L2242.0,591.7L2242.0,664.9L2229.2,668.9C2222.2,671.1 2136.2,697.9 2038.0,728.4C1939.8,759.0 1858.6,784.4 1857.5,784.9L1855.5,785.9L1908.5,785.9C1937.7,786.0 2024.6,786.3 2101.8,786.7L2242.0,787.3L2242.0,855.2L2242.0,923.0L1955.0,923.0L1668.0,923.0L1668.0,816.7ZM2527.1,911.8C2492.2,909.2 2451.5,899.2 2427.6,887.5C2384.0,866.2 2353.7,827.5 2344.0,780.8C2340.8,765.3 2339.6,750.5 2339.6,728.5L2339.7,707.5L2341.4,694.5C2344.6,669.9 2351.6,644.3 2360.0,626.3C2368.1,608.9 2382.5,590.0 2397.6,576.8C2421.5,555.9 2462.8,536.2 2503.4,526.4C2509.0,525.1 2548.2,518.4 2590.5,511.5C2632.9,504.6 2671.8,498.1 2677.0,496.9C2689.7,494.0 2704.7,488.7 2714.5,483.7L2722.5,479.6L2729.1,473.0L2735.7,466.5L2738.4,460.7C2741.5,454.0 2744.0,442.3 2744.0,434.2C2744.0,409.6 2733.1,392.5 2710.0,380.6C2693.9,372.3 2676.1,367.8 2651.8,365.9L2637.7,364.8L2623.1,365.9C2591.7,368.3 2574.1,374.3 2556.1,388.6C2538.4,402.7 2523.8,430.1 2521.4,453.5L2520.7,460.0L2440.7,460.0L2360.7,460.0L2361.3,444.2C2362.8,408.9 2370.2,379.0 2384.5,350.5C2393.8,332.1 2402.3,319.9 2416.0,305.7C2444.2,276.3 2479.3,257.6 2528.3,245.6C2575.2,234.1 2635.1,230.5 2695.0,235.5C2784.6,243.1 2844.2,272.3 2880.5,326.5C2897.7,352.1 2908.2,381.9 2915.2,424.5L2917.5,438.5L2917.7,666.1L2918.0,893.7L2878.3,894.3C2856.4,894.7 2820.5,895.0 2798.5,895.0L2758.5,895.0L2753.6,868.2C2750.9,853.5 2748.5,841.3 2748.3,841.1C2748.1,840.8 2745.4,843.1 2742.2,846.2C2693.3,893.6 2612.2,918.3 2527.1,911.8ZM2608.1,789.0C2644.2,785.5 2678.1,770.3 2703.0,746.4C2727.7,722.7 2741.7,691.8 2745.9,652.0C2746.4,646.8 2747.2,629.0 2747.6,612.5L2748.3,582.6L2745.9,584.1C2734.7,591.3 2722.3,597.6 2712.1,601.1C2709.1,602.2 2686.8,607.3 2662.6,612.6C2610.2,623.9 2594.2,627.9 2579.5,633.2C2557.2,641.4 2542.6,650.3 2530.5,663.2L2523.0,671.1L2519.0,679.3C2516.8,683.8 2514.0,691.1 2512.9,695.5L2510.8,703.5L2510.8,717.0L2510.8,730.5L2512.9,738.5C2514.1,742.9 2516.6,749.9 2518.7,754.0L2522.3,761.5L2529.9,769.0L2537.5,776.6L2545.0,780.2C2560.5,787.9 2585.0,791.3 2608.1,789.0ZM620.0,82.5L620.0,0.0L706.0,0.0L792.0,0.0L792.0,82.5L792.0,165.0L706.0,165.0L620.0,165.0L620.0,82.5ZM881.0,82.5L881.0,0.0L967.5,0.0L1054.0,0.0L1054.0,82.5L1054.0,165.0L967.5,165.0L881.0,165.0L881.0,82.5Z'/%3E%3C/svg%3E") center / var(--ms) auto no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2918 1165' fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M2560.0,1083.5L2560.0,1002.0L2646.0,1002.0L2732.0,1002.0L2732.0,1083.5L2732.0,1165.0L2646.0,1165.0L2560.0,1165.0L2560.0,1083.5ZM228.7,918.8C227.9,916.4 176.3,772.1 114.0,598.0C51.7,423.9 0.5,280.7 0.3,279.7L-0.2,278.0L95.5,278.2L191.2,278.5L257.8,488.7C294.5,604.4 324.7,699.0 325.0,699.0C325.3,699.0 353.4,611.8 387.5,505.2C421.6,398.7 451.9,304.0 454.8,294.7L460.2,278.0L550.7,278.0L641.1,278.0L640.6,279.8C640.2,280.7 588.1,425.7 524.7,602.0L409.4,922.5L319.8,922.8L230.2,923.0L228.7,918.8ZM742.0,600.0L742.0,277.0L828.0,277.0L914.0,277.0L914.0,600.0L914.0,923.0L828.0,923.0L742.0,923.0L742.0,600.0ZM1020.0,856.2L1020.1,789.5L1183.4,601.5L1346.7,413.5L1316.1,412.9C1299.3,412.5 1230.7,412.2 1163.8,412.1L1042.0,412.0L1042.0,345.0L1042.0,278.0L1304.5,278.0L1567.0,278.0L1567.0,346.8L1567.0,415.5L1403.6,598.5L1240.2,781.5L1408.1,781.8L1576.0,782.0L1576.0,852.5L1576.0,923.0L1298.0,923.0L1020.0,923.0L1020.0,856.2ZM1668.0,816.7L1668.0,710.4L1868.8,650.1C1979.2,616.9 2069.8,589.5 2070.2,589.1C2070.6,588.8 1980.4,561.3 1869.7,527.9L1668.5,467.4L1668.2,363.7L1668.0,260.0L1955.0,260.0L2242.0,260.0L2242.0,328.0L2242.0,396.0L2080.8,396.1C1992.1,396.2 1905.0,396.6 1887.2,396.9L1855.0,397.5L2048.5,458.0L2242.0,518.4L2242.0,591.7L2242.0,664.9L2229.2,668.9C2222.2,671.1 2136.2,697.9 2038.0,728.4C1939.8,759.0 1858.6,784.4 1857.5,784.9L1855.5,785.9L1908.5,785.9C1937.7,786.0 2024.6,786.3 2101.8,786.7L2242.0,787.3L2242.0,855.2L2242.0,923.0L1955.0,923.0L1668.0,923.0L1668.0,816.7ZM2527.1,911.8C2492.2,909.2 2451.5,899.2 2427.6,887.5C2384.0,866.2 2353.7,827.5 2344.0,780.8C2340.8,765.3 2339.6,750.5 2339.6,728.5L2339.7,707.5L2341.4,694.5C2344.6,669.9 2351.6,644.3 2360.0,626.3C2368.1,608.9 2382.5,590.0 2397.6,576.8C2421.5,555.9 2462.8,536.2 2503.4,526.4C2509.0,525.1 2548.2,518.4 2590.5,511.5C2632.9,504.6 2671.8,498.1 2677.0,496.9C2689.7,494.0 2704.7,488.7 2714.5,483.7L2722.5,479.6L2729.1,473.0L2735.7,466.5L2738.4,460.7C2741.5,454.0 2744.0,442.3 2744.0,434.2C2744.0,409.6 2733.1,392.5 2710.0,380.6C2693.9,372.3 2676.1,367.8 2651.8,365.9L2637.7,364.8L2623.1,365.9C2591.7,368.3 2574.1,374.3 2556.1,388.6C2538.4,402.7 2523.8,430.1 2521.4,453.5L2520.7,460.0L2440.7,460.0L2360.7,460.0L2361.3,444.2C2362.8,408.9 2370.2,379.0 2384.5,350.5C2393.8,332.1 2402.3,319.9 2416.0,305.7C2444.2,276.3 2479.3,257.6 2528.3,245.6C2575.2,234.1 2635.1,230.5 2695.0,235.5C2784.6,243.1 2844.2,272.3 2880.5,326.5C2897.7,352.1 2908.2,381.9 2915.2,424.5L2917.5,438.5L2917.7,666.1L2918.0,893.7L2878.3,894.3C2856.4,894.7 2820.5,895.0 2798.5,895.0L2758.5,895.0L2753.6,868.2C2750.9,853.5 2748.5,841.3 2748.3,841.1C2748.1,840.8 2745.4,843.1 2742.2,846.2C2693.3,893.6 2612.2,918.3 2527.1,911.8ZM2608.1,789.0C2644.2,785.5 2678.1,770.3 2703.0,746.4C2727.7,722.7 2741.7,691.8 2745.9,652.0C2746.4,646.8 2747.2,629.0 2747.6,612.5L2748.3,582.6L2745.9,584.1C2734.7,591.3 2722.3,597.6 2712.1,601.1C2709.1,602.2 2686.8,607.3 2662.6,612.6C2610.2,623.9 2594.2,627.9 2579.5,633.2C2557.2,641.4 2542.6,650.3 2530.5,663.2L2523.0,671.1L2519.0,679.3C2516.8,683.8 2514.0,691.1 2512.9,695.5L2510.8,703.5L2510.8,717.0L2510.8,730.5L2512.9,738.5C2514.1,742.9 2516.6,749.9 2518.7,754.0L2522.3,761.5L2529.9,769.0L2537.5,776.6L2545.0,780.2C2560.5,787.9 2585.0,791.3 2608.1,789.0ZM620.0,82.5L620.0,0.0L706.0,0.0L792.0,0.0L792.0,82.5L792.0,165.0L706.0,165.0L620.0,165.0L620.0,82.5ZM881.0,82.5L881.0,0.0L967.5,0.0L1054.0,0.0L1054.0,82.5L1054.0,165.0L967.5,165.0L881.0,165.0L881.0,82.5Z'/%3E%3C/svg%3E") center / var(--ms) auto no-repeat exclude, linear-gradient(#000 0 0);
  opacity: calc(.78 - var(--p) * 1.8);
}
.intro.is-vertical .intro__tapa { --ms: calc(96vw * (1 + var(--p) * var(--p) * 16)); }
.intro__meta {
  position: absolute; left: 0; right: 0; top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding-inline: var(--gutter);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; color: var(--negro);
  opacity: calc(1 - var(--p) * 2.5);
}
.intro__centro { text-align: center; }
.intro__meta > :last-child { text-align: right; }
.intro__scroll {
  position: absolute; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%);
  color: var(--negro); opacity: calc(1 - var(--p) * 3);
}
body[data-vista="inicio"] .header { color: #fff; }

/* ---------- Inicio: presentación corta + verbos ---------- */
.home-yo { padding-block: clamp(56px, 9vw, 120px); }
.home-yo__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; align-items: start; margin-bottom: clamp(32px, 6vw, 80px); }
.home-yo__grid .tag { grid-column: 1 / span 2; }
.home-yo__txt {
  grid-column: 3 / span 8; margin: 0;
  font-family: var(--display); font-weight: 500; font-size: clamp(24px, 3vw, 46px); line-height: 1.05; letter-spacing: -.02em; text-wrap: pretty;
}
.home-yo__grid .btn-ver { grid-column: 11 / span 2; justify-self: end; }

.verbos-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tinta); }
.verbos-lista li {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; align-items: center;
  border-bottom: 1px solid var(--tinta); padding-block: clamp(10px, 1.6vw, 22px);
}
.verbos-lista p { grid-column: 9 / span 4; margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.35; color: var(--gris); }
.v {
  grid-column: 1 / span 8; display: block;
  font-family: var(--display); font-size: clamp(46px, 9vw, 150px); line-height: .9; letter-spacing: -.035em;
}
.v .w { display: inline-block; white-space: nowrap; }
.v .ch { display: inline-block; transition: transform .7s cubic-bezier(.2,.7,.1,1), color .3s; }

/* Mirar: la mirada se abre */
.v--mirar { font-weight: 400; transition: letter-spacing .6s cubic-bezier(.2,.7,.1,1); }
.verbos-lista li:hover .v--mirar, .verbos-lista li.is-on .v--mirar { letter-spacing: .04em; }
/* Desarmar: las letras se sueltan, y al pasar se desarman más */
.v--desarmar { font-weight: 500; color: var(--violeta); }
.v--desarmar { letter-spacing: -.01em; }
.v--desarmar .ch { margin-right: .015em; transform: translateY(calc(var(--dy) * .06em)) rotate(calc(var(--r) * 3deg)); }
.v--desarmar .ch { transition: transform .7s cubic-bezier(.2,.7,.1,1), margin .7s cubic-bezier(.2,.7,.1,1); }
.verbos-lista li:hover .v--desarmar .ch, .verbos-lista li.is-on .v--desarmar .ch {
  margin-right: .16em;
  transform: translate(calc(var(--dx) * .06em), calc(var(--dy) * .42em)) rotate(calc(var(--r) * 38deg));
}
/* Alterar: la orientación dada vuelta */
.v--alterar { font-weight: 500; }
.v--alterar > span { display: inline-block; transform: scaleX(-1); color: var(--verde); transition: transform .7s cubic-bezier(.2,.7,.1,1); }
.verbos-lista li:hover .v--alterar > span, .verbos-lista li.is-on .v--alterar > span { transform: scaleX(1); }
/* Reconstruir: separado, se une al pasar */
.v--construir { font-weight: 900; letter-spacing: -.045em; }
.v--construir .ch { transform: translate(calc(var(--dx) * .45em), calc(var(--dy) * .4em)) rotate(calc(var(--r) * 22deg)); }
.verbos-lista li:hover .v--construir .ch, .verbos-lista li.is-on .v--construir .ch { transform: none; }

/* ---------- Inicio: destacados ---------- */
.destacados { padding-block: 0 clamp(56px, 9vw, 120px); }
.destacados__head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 14px; }
.dcard {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; align-items: end;
  text-decoration: none; margin-bottom: 12px;
}
.dcard__info { display: grid; gap: 10px; align-content: end; min-width: 0; }
.dcard__t {
  font-family: var(--display); font-weight: 900; font-size: clamp(44px, 7.4vw, 124px); line-height: .86; letter-spacing: -.04em;
  text-wrap: balance; overflow-wrap: anywhere;
}
.dcard__b { font-family: var(--display); font-weight: 500; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.2; max-width: 30ch; }
.dcard .btn-ver { justify-self: start; }
.dcard--film { background: var(--negro); color: var(--crema); padding: clamp(14px, 2vw, 24px); }
.dcard--film .dcard__t { color: var(--amarillo); }
.dcard__media { grid-column: 1 / span 8; position: relative; aspect-ratio: 16 / 9; overflow: hidden; display: block; background: #111; }
.dcard__media img, .dcard__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dcard__media video { opacity: 0; transition: opacity .4s; }
.dcard.is-play .dcard__media video { opacity: 1; }
.dcard--film .dcard__info { grid-column: 9 / span 4; }
.dcard--foto { padding-block: clamp(20px, 3vw, 40px); border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--tinta); }
.dcard--foto .dcard__info { grid-column: 1 / span 4; grid-row: 1; }
.dcard__fotos { grid-column: 5 / span 8; grid-row: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; align-items: start; }
.df { display: block; min-width: 0; }
.df--1 { grid-column: 1 / span 3; }
.df--2 { grid-column: 4 / span 2; margin-top: 40%; }
.df--3 { grid-column: 6 / span 3; margin-top: 14%; }
.dcard:hover .dcard__t { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .08em; }

/* ---------- Páginas internas ---------- */
.pagina-head {
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(24px, 4vw, 56px));
  display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap;
}
.pagina-titulo {
  margin: 0; font-family: var(--display); font-weight: 900;
  font-size: clamp(56px, 13vw, 220px); line-height: .82; letter-spacing: -.05em;
}
.nav a.is-on { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }

/* ---------- Archivo: modos ---------- */
.modo { display: flex; gap: 6px; }
.modo button { padding: 6px 4px; color: var(--gris); }
.modo button[aria-pressed="true"] { color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; }
.mesa {
  position: relative; height: 82vh; min-height: 560px; overflow: hidden;
  border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--tinta); background: #efefe6;
}
.mesa[hidden] { display: none !important; }
.mesa__ayuda { position: absolute; left: 0; bottom: 10px; color: var(--gris); }
.pieza {
  position: absolute; width: clamp(104px, 13vw, 190px); display: grid; gap: 6px;
  text-decoration: none; transform: rotate(var(--rot)); cursor: grab; touch-action: none; user-select: none;
  transition: transform .25s ease;
}
.pieza img { width: 100%; height: auto; pointer-events: none; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.pieza--dest { width: clamp(140px, 18vw, 260px); }
.pieza:hover { transform: rotate(0deg) scale(1.04); }
.pieza.is-drag { cursor: grabbing; transform: rotate(0deg) scale(1.06); transition: none; }

@media (max-width: 900px) {
  .home-yo__grid .tag, .home-yo__txt { grid-column: 1 / -1; }
  .home-yo__grid .btn-ver { grid-column: 1 / -1; justify-self: start; }
  .v, .verbos-lista p { grid-column: 1 / -1; }
  .dcard__media, .dcard--film .dcard__info, .dcard--foto .dcard__info, .dcard__fotos { grid-column: 1 / -1; grid-row: auto; }
  .retrato__img, .retrato__txt { grid-column: 1 / -1; }
  .vizma__cols { grid-template-columns: 1fr; }
  .mf--der { padding-left: calc(var(--gutter, 16px) + 16%); }
  .mf--izq, .mf--centro { padding-right: 8%; }
  .mf--centro { padding-left: var(--gutter, 16px); }
  .retrato__txt { margin-top: 8px; }
  .manif .tag, .manif__txt, .hago .tag, .hago ul { grid-column: 1 / -1; }
  .sobre__intro, .sobre__txt { grid-column: 1 / -1; }
  .sobre__cols { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
  .intro { height: 160vh; height: 160svh; }
  .intro__meta { grid-template-columns: 1fr 1fr; }
  .intro__centro { display: none; }
  .mesa { height: 120vh; }
}

/* ---------- Buscador ---------- */
.nav__buscar { text-transform: inherit; letter-spacing: inherit; font-weight: inherit; white-space: nowrap; }
.nav__buscar:hover { text-decoration: underline; text-underline-offset: 4px; }
.buscador {
  position: fixed; inset: 0; z-index: 80; background: rgba(20,20,20,.55);
  display: flex; align-items: flex-start; justify-content: center; overflow-y: auto;
  padding-top: env(safe-area-inset-top, 0px);
}
.buscador[hidden] { display: none !important; }
.buscador__in {
  width: 100%; max-width: 920px; background: var(--crema); color: var(--tinta);
  padding-block: 18px 24px; margin-top: clamp(0px, 6vh, 64px); border-top: 6px solid var(--violeta);
}
.buscador__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.buscador__cerrar:hover { color: var(--violeta); }
.buscador__q {
  width: 100%; margin: 14px 0 6px; padding: 6px 0; border: 0; border-bottom: 2px solid var(--tinta);
  background: transparent; color: var(--tinta); outline: none; border-radius: 0;
  font-family: var(--display); font-weight: 900; font-size: clamp(28px, 5vw, 56px); letter-spacing: -.03em;
}
.buscador__q::placeholder { color: rgba(20,20,20,.28); }
.buscador__q:focus { border-bottom-color: var(--violeta); }
.buscador__lista { list-style: none; margin: 0; padding: 0; max-height: 62vh; overflow-y: auto; }
.buscador__lista a {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--linea); text-decoration: none;
}
.buscador__lista a:hover, .buscador__lista a:focus-visible { color: var(--violeta); }
.bz__img { width: 56px; height: 36px; overflow: hidden; background: #e9e8d6; display: block; }
.bz__img img { width: 100%; height: 100%; object-fit: cover; }
.bz__img--sec { background: var(--violeta); color: var(--crema); display: grid; place-items: center; font-family: var(--display); font-weight: 500; font-size: 18px; }
.bz__t { font-family: var(--display); font-weight: 500; font-size: clamp(18px, 2.2vw, 26px); letter-spacing: -.015em; overflow-wrap: anywhere; }
.bz__d { color: var(--gris); text-align: right; }
.bz__vacio { padding: 16px 0; color: var(--gris); }
body.con-buscador { overflow: hidden; }
@media (max-width: 640px) {
  .nav { gap: 9px; font-size: 10.5px; letter-spacing: .04em; }
  .nav__inicio { display: none; }
  .bz__d { display: none; }
  .buscador__lista a { grid-template-columns: 48px minmax(0, 1fr); }
  .buscador__in { margin-top: 0; min-height: 100%; }
}
.p-fila img { display: block; width: 100%; height: auto; }

/* ---------- Filas prolijas (misma altura, sin recortes) ---------- */
.jfila { display: flex; gap: 12px; align-items: flex-start; }
.jfila__c { flex: 1 1 0; min-width: 0; display: block; }
.jfila__c a, .jfila__c figure { display: block; margin: 0; }
.jfila__c img, .jfila__c video { display: block; width: 100%; height: auto; }
.jfila__c .reel video { aspect-ratio: 9 / 16; }
.foto { display: grid !important; grid-template-columns: 1fr !important; gap: 12px; }
.foto .jfila + .jfila { margin-top: 0; }
.foto .foto__frase { grid-column: 1 / -1 !important; }
.film__fotos { display: block !important; }
.film__fotos img { aspect-ratio: auto !important; }
.dcard__fotos { display: block !important; }
.dcard__fotos .jfila { gap: 10px; }
.film__bar .vgrande { margin: 0; color: inherit; }
@media (max-width: 640px) {
  .jfila--top { flex-wrap: wrap; }
  .jfila--top > :first-child { flex-basis: 100% !important; }
  .jfila { gap: 8px; }
}
.reel .vgrande, .vid .vgrande { margin-left: 0; display: block; white-space: nowrap; margin-top: 4px; }

/* ---------- Sobre mí: moodboard ---------- */
.mood { padding-block: clamp(8px, 2vw, 24px); }
.mood__head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--tinta); margin-bottom: 12px; }
.mood__head .tag:first-child { color: var(--violeta); }
.mood__img { margin: 0; }
.mood__img img { display: block; width: 100%; height: auto; }
.vista > section:has(+ .mood) { padding-bottom: clamp(16px, 3vw, 40px); }

/* ---------- Verbos: la explicación aparece al pasar ---------- */
.verbos-lista p { opacity: 0; transform: translateX(-10px); transition: opacity .35s ease, transform .5s cubic-bezier(.2,.7,.1,1); }
.verbos-lista li:hover p, .verbos-lista li.is-on p, .verbos-lista li:focus-within p { opacity: 1; transform: none; }

/* ---------- Sobre mí: el nombre se desarma ---------- */
.nombre-wrap { margin-top: clamp(16px, 3vw, 40px); }
.nombre__intro { color: var(--amarillo); margin: 0 0 8px; }
.nombre { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(250,250,233,.5); }
.nombre li {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; align-items: center;
  border-bottom: 1px solid rgba(250,250,233,.5); padding-block: clamp(6px, 1vw, 14px); cursor: default;
}
.nombre__w {
  grid-column: 1 / span 7; display: block;
  font-family: var(--display); font-weight: 500; font-size: clamp(40px, 7vw, 112px); line-height: .95; letter-spacing: -.03em;
}
.nombre__w .w { display: inline-block; white-space: nowrap; }
.nombre__w .ch { display: inline-block; transition: transform .7s cubic-bezier(.2,.7,.1,1), margin .7s cubic-bezier(.2,.7,.1,1), font-weight .4s, color .3s; }
.nombre__s {
  grid-column: 8 / span 5; font-family: var(--display); font-size: clamp(18px, 1.8vw, 26px); line-height: 1.15; color: var(--amarillo);
  opacity: 0; transform: translateX(-10px); transition: opacity .35s ease, transform .5s cubic-bezier(.2,.7,.1,1);
}
.nombre li:hover .nombre__s, .nombre li.is-on .nombre__s { opacity: 1; transform: none; }
/* Maite: las letras se levantan en ola */
.nombre--maite .ch { transition-delay: calc(var(--i, 0) * 40ms); }
.nombre--maite:hover .ch, .nombre--maite.is-on .ch { transform: translateY(calc(var(--dy) * .25em - .12em)); color: var(--amarillo); }
/* Vizcarra: crece y mira más allá */
.nombre--vizcarra:hover .ch, .nombre--vizcarra.is-on .ch { margin-right: .09em; }
/* Vis: fuerza */
.nombre--vis .nombre__w { font-weight: 300; transition: font-weight .5s; }
.nombre--vis:hover .nombre__w, .nombre--vis.is-on .nombre__w { font-weight: 900; }
.nombre--vis:hover .ch, .nombre--vis.is-on .ch { transform: scaleY(1.25); }
/* -isma: una forma propia */
.nombre--isma:hover .ch, .nombre--isma.is-on .ch { transform: translate(calc(var(--dx) * .18em), calc(var(--dy) * .22em)) rotate(calc(var(--r) * 18deg)); }
@media (max-width: 640px) {
  .nombre__w, .nombre__s { grid-column: 1 / -1; }
}

/* ---------- Índice: la foto aparece casi a pantalla completa ---------- */
.fila__flota {
  position: fixed !important; left: 50% !important; top: 50% !important; width: auto !important;
  transform: translate(-50%, -50%) scale(.94) !important; z-index: 40;
  transition: opacity .25s ease, transform .6s cubic-bezier(.2,.7,.1,1) !important;
}
.fila__flota img { height: 86vh; width: auto; max-width: 94vw; object-fit: contain; }
@media (hover: hover) {
  .fila a:hover .fila__flota { opacity: 0; }
  .fila a .fila__recorte:hover ~ .fila__flota { opacity: 1; transform: translate(-50%, -50%) scale(1) !important; }
  .fila a:has(.fila__recorte:hover) .fila__t { z-index: 41; color: #fff !important; mix-blend-mode: difference; }
  .fila__recorte { cursor: zoom-in; }
}

/* ---------- Desarrollo de cada trabajo ---------- */
.p-bleed { grid-column: 1 / -1; margin: clamp(12px, 3vw, 40px) calc(50% - 50vw) !important; width: 100vw; }
.p-bleed img { width: 100%; height: auto; max-height: 100svh; object-fit: cover; display: block; }
.p-grupo { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; }
.p-grupo--der { flex-direction: row-reverse; }
.p-grupo__alto { flex: none; margin: 0; position: sticky; top: var(--header-h, 64px); height: calc(100svh - var(--header-h, 64px) - 12px); }
.p-grupo__alto img { height: 100%; width: auto; max-width: none; display: block; }
.p-grupo--solo { justify-content: center; }
.p-grupo__resto { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.p-grupo__resto figure { margin: 0; }
.p-grupo__resto img { width: 100%; height: auto; display: block; }
.p-grupo__resto figure:nth-child(even) { margin-top: 28%; }
.p-grupo__resto--1 { grid-template-columns: minmax(0, .7fr); align-self: flex-end; justify-content: center; }
.p-grupo__resto--1 figure:nth-child(even) { margin-top: 0; }
@media (max-width: 640px) {
  .p-grupo, .p-grupo--der { flex-direction: column; }
  .p-grupo__alto { position: static; height: auto; width: 100%; }
  .p-grupo__alto img { width: 100%; height: auto; max-width: 100%; }
  .p-grupo__resto { width: 100%; flex: none; }
  .p-grupo__resto--1 { grid-template-columns: minmax(0, .7fr); justify-content: end; }
}
.p-grupo__resto figure.es-h { grid-column: 1 / -1; margin-top: 0 !important; }
.p-grupo__resto figure.es-h + figure:not(.es-h) { margin-top: 0; }

/* ---------- Índice: los importantes mucho más grandes ---------- */
.fila--top a { grid-template-columns: 3.2em minmax(0, 1fr) minmax(0, 40%) 7em 4em !important; padding-block: clamp(18px, 2.6vw, 36px) !important; }
.fila--top .fila__t { font-weight: 900 !important; font-size: clamp(44px, 7.4vw, 128px) !important; line-height: .88 !important; letter-spacing: -.04em !important; }
.fila--top .fila__recorte { height: clamp(120px, 15vw, 240px) !important; }
.lista .fila--top:first-child { border-top: 0; }
@media (max-width: 900px) {
  .fila--top a { grid-template-columns: 2.4em minmax(0, 1fr) minmax(0, 40%) !important; }
}
@media (max-width: 640px) {
  .fila--top a { grid-template-columns: 1fr 1fr !important; }
  .fila--top .fila__t { font-size: clamp(40px, 13vw, 64px) !important; }
  .fila--top .fila__recorte { height: 200px !important; }
}
.fila--top a { grid-template-columns: 3.2em minmax(0, 1fr) minmax(0, 32%) 7em 4em !important; }
.fila--top .fila__t { font-size: clamp(44px, 6vw, 112px) !important; overflow-wrap: normal !important; }
.vista > .mf:last-child { padding-bottom: clamp(40px, 6vw, 80px); }
@media (max-width: 900px) { .fila--top a { grid-template-columns: 2.4em minmax(0, 1fr) minmax(0, 36%) !important; } }
@media (max-width: 640px) { .fila--top a { grid-template-columns: 1fr 1fr !important; } }

/* destacados del índice: otro color y todavía más grandes */
.fila--top a { grid-template-columns: 3.2em minmax(0, 1fr) minmax(0, 28%) 7em 4em !important; }
.fila--top .fila__t { color: var(--violeta); font-size: clamp(56px, 8.2vw, 156px) !important; line-height: .86 !important; }
.fila--top .fila__n { color: var(--violeta); }
@media (max-width: 900px) { .fila--top a { grid-template-columns: 2.4em minmax(0, 1fr) minmax(0, 32%) !important; } }
@media (max-width: 640px) {
  .fila--top a { grid-template-columns: 1fr 1fr !important; }
  .fila--top .fila__t { font-size: clamp(48px, 15vw, 76px) !important; }
}
@media (hover: hover) { .fila--top a:hover .fila__t { color: var(--verde); } }
.fila--top .fila__t { font-size: clamp(52px, 7vw, 136px) !important; }
@media (max-width: 640px) { .fila--top .fila__t { font-size: clamp(44px, 14vw, 72px) !important; } }

/* ---------- Libro que se pasa hacia arriba ---------- */
.vflip { outline: none; }
.vflip__box { position: relative; margin: 0 auto; cursor: pointer; }
.vflip__rot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); }
.vflip__libro { width: 100%; height: 100%; }
.hojav { background: #fff; overflow: hidden; }
.hojav__img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); background: #fff center / cover no-repeat; }
.vflip__bar { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 14px; }
.vflip__bar button:hover { color: var(--violeta); }
.vflip__num { font-variant-numeric: tabular-nums; }

/* ---------- Plegable ---------- */
.pleg { --w: min(52vh, 34vw); }
.pleg__scroll { overflow-x: auto; overflow-y: hidden; padding-block: 40px; scrollbar-width: thin; }
.pleg__sizer { position: relative; height: calc(var(--w) * var(--r, 1)); margin: 0 auto; min-width: var(--w); perspective: none; }
.pleg__giro { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .38s cubic-bezier(.5,0,.5,1); }
.pleg__giro.is-girando { transform: rotateY(90deg); }
.pleg__cara { position: absolute; top: 0; left: 0; transform-style: preserve-3d; }
.pleg__cara[hidden] { display: none; }
.pleg__p { position: absolute; left: 0; top: 0; width: var(--w); height: calc(var(--w) * var(--r, 1)); transform-origin: 0 50%; transform-style: preserve-3d; background: #f4f3ec; }
.pleg__p .pleg__p { left: 100%; }
.pleg__p > img { display: block; width: 100%; height: 100%; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); backface-visibility: hidden; }
.pleg__cara > .pleg__p { box-shadow: 0 18px 40px -24px rgba(0,0,0,.35); }
.pleg__bar { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.pleg__bar button:hover { color: var(--violeta); }
.pleg__rango { width: min(320px, 50vw); accent-color: var(--violeta); }
.pleg__voltear { border: 1px solid currentColor; padding: 6px 10px; }
@media (max-width: 640px) {
  .pleg { --w: 60vw; }
}


/* Sobre mí: retrato al lado de lo que hago */
.sobre__foto { grid-column: 1 / span 4; grid-row: 2; margin: clamp(20px, 3vw, 40px) 0 0; }
.sobre__foto img { display: block; width: 100%; height: auto; }
.sobre__txt { grid-column: 6 / span 7 !important; grid-row: 2; align-self: center; }
@media (max-width: 640px) {
  .sobre__foto { grid-column: 1 / span 7; grid-row: auto; }
  .sobre__txt { grid-column: 1 / -1 !important; grid-row: auto; }
}

/* texto superpuesto al retrato */
.sobre__foto { grid-column: 1 / span 6 !important; grid-row: 2 !important; }
.sobre__txt { grid-column: 4 / span 8 !important; grid-row: 2 !important; align-self: center; position: relative; z-index: 2; }
.sobre__txt p { font-weight: 500 !important; font-size: clamp(22px, 2.6vw, 40px) !important; line-height: 1.12 !important; max-width: 26ch !important; }
.sobre__txt p:nth-child(2) { margin-left: 18% !important; }
@media (max-width: 640px) {
  .sobre__foto { grid-column: 1 / span 9 !important; }
  .sobre__txt { grid-column: 2 / -1 !important; align-self: end; margin-bottom: 8%; }
  .sobre__txt p:nth-child(2) { margin-left: 10% !important; }
}
@media (max-width: 640px) { .sobre__txt p { font-size: 20px !important; } }
/* texto arriba y abajo del retrato, sin tapar la cara */
.sobre__txt { align-self: stretch !important; display: flex !important; flex-direction: column; justify-content: space-between; margin-top: clamp(20px, 3vw, 40px) !important; padding-block: 2% 4%; }
.sobre__txt p:first-child { margin-left: 8% !important; }
.sobre__txt p:nth-child(2) { margin-left: 22% !important; }
@media (max-width: 640px) {
  .sobre__txt { grid-column: 1 / -1 !important; padding-block: 0 2%; }
  .sobre__txt p { font-size: 17px !important; }
  .sobre__txt p:first-child { margin-left: 30% !important; }
  .sobre__txt p:nth-child(2) { margin-left: 30% !important; }
}
/* retrato entra entero en la pantalla */
.sobre__foto img { height: calc(100svh - var(--header-h, 56px) - 48px); width: auto; max-width: 100%; object-fit: cover; }
.sobre__foto { grid-column: 1 / span 5 !important; }
.sobre__txt { grid-column: 3 / span 8 !important; }
.sobre__txt p { font-size: clamp(20px, 2.1vw, 32px) !important; }
@media (max-width: 640px) {
  .sobre__foto { grid-column: 1 / span 9 !important; }
  .sobre__foto img { height: calc(100svh - var(--header-h, 52px) - 40px); width: 100%; }
  .sobre__txt { grid-column: 1 / -1 !important; }
}
@media (max-width: 640px) {
  .sobre__foto { grid-column: 1 / -1 !important; }
  .sobre__foto img { width: auto !important; max-width: 100%; height: calc(100svh - var(--header-h, 52px) - 40px) !important; object-fit: contain; }
  .sobre__txt { padding-block: 1% 2%; }
  .sobre__txt p { font-size: 14px !important; line-height: 1.15 !important; max-width: 24ch !important; }
  .sobre__txt p:first-child, .sobre__txt p:nth-child(2) { margin-left: 44% !important; }
}
/* texto de Vïzma en menos renglones */
.vizma__cols { grid-template-columns: 1fr !important; max-width: none !important; }
.vizma__cols p { max-width: none !important; }

/* ---------- Relato de cada trabajo, entre las imágenes ---------- */
.p-relato {
  grid-column: 1 / -1; margin: clamp(22px, 4vw, 56px) 0; max-width: 34ch;
  font-family: var(--display); font-weight: 500; font-size: clamp(20px, 2.3vw, 34px); line-height: 1.16; letter-spacing: -.012em;
  text-wrap: pretty;
}
.p-relato--der { justify-self: end; margin-right: 6%; }
.p-relato p { margin: 0; }
.p-relato p + p { margin-top: .7em; }
.p-relato--anim { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.1,1); }
.p-relato--anim.is-in { opacity: 1; transform: none; }
@media (max-width: 640px) { .p-relato { font-size: 19px; max-width: none; } .p-relato--der { margin-right: 0; margin-left: 12%; } }
.p-pagina img { box-shadow: 0 0 0 1px rgba(0,0,0,.06); }

.fila__fmt { display: block; margin-top: 4px; color: var(--violeta); white-space: nowrap; }

/* ---------- CV en Contacto ---------- */
.cvbox { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(16px, 3vw, 40px); align-items: end;
  margin-top: clamp(40px, 6vw, 80px); text-decoration: none; color: inherit; max-width: 760px; }
.cvbox[hidden] { display: none; }
.cvbox__img { position: relative; display: block; transform: rotate(-4deg); transition: transform .6s cubic-bezier(.2,.7,.1,1); box-shadow: 0 18px 40px -20px rgba(0,0,0,.6); }
.cvbox__img img { display: block; width: 100%; height: auto; }
.cvbox__alt { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.cvbox:hover .cvbox__img, .cvbox:focus-visible .cvbox__img { transform: rotate(3deg) scale(1.03); }
.cvbox:hover .cvbox__alt, .cvbox:focus-visible .cvbox__alt { opacity: 1; }
.cvbox__txt { display: grid; gap: 10px; }
.cvbox__t { font-family: var(--display); font-weight: 900; font-size: clamp(28px, 4vw, 56px); line-height: .95; letter-spacing: -.03em; }
.cvbox__b { justify-self: start; border: 1px solid currentColor; padding: 8px 12px; transition: background .2s, color .2s; }
.cvbox:hover .cvbox__b { background: var(--amarillo); color: var(--negro); border-color: var(--amarillo); }
@media (max-width: 640px) { .cvbox { grid-template-columns: 40% 1fr; } }

.pleg--alto { --w: min(calc(74vh / var(--r)), 24vw); }
@media (max-width: 640px) { .pleg--alto { --w: min(calc(66vh / var(--r)), 46vw); } }

/* ---------- Libro cerrado ---------- */
.lc__cerrado { display: grid; justify-items: center; gap: 14px; padding-block: 12px 4px; perspective: 2200px; }
.lc__cerrado[hidden], .lc__abierto[hidden], .pleg__libro[hidden], .pleg__scroll[hidden], .pleg__bar > [hidden] { display: none !important; }
.lc__obj { padding: 0; border: 0; background: none; cursor: pointer; transition: transform .5s cubic-bezier(.2,.7,.1,1); }
.lc__obj:hover { transform: translateY(-6px) rotate(-1.2deg); }
.lc__giro { display: block; transform-style: preserve-3d; transition: transform .38s cubic-bezier(.5,0,.5,1); }
.lc__giro.is-girando { transform: rotateY(90deg); }
.lc__lado { display: block; }
.lc__lado[hidden] { display: none; }
.lc__cara { display: block; height: min(72vh, 760px); max-width: 88vw; background-color: #fff; background-size: cover; background-position: center;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 22px 44px -26px rgba(0,0,0,.45), inset 4px 0 0 rgba(0,0,0,.06); }
.lc__bar { display: flex; justify-content: center; gap: 18px; margin-top: 10px; }
.lc__bar button { border: 1px solid currentColor; padding: 6px 10px; }
.lc__bar button:hover { color: var(--violeta); }
.pleg__modo { border: 1px solid currentColor; padding: 6px 10px; }
@media (max-width: 640px) { .lc__cara { height: min(60vh, 520px); } }

/* ---------- Retrato más chico ---------- */
.sobre__foto { grid-column: 1 / span 4 !important; position: relative; }
.sobre__foto img { height: min(62vh, 620px) !important; width: auto !important; max-width: 100%; position: relative; z-index: 1; }
.sobre__txt { grid-column: 3 / span 7 !important; }
@media (max-width: 640px) {
  .sobre__foto { grid-column: 1 / span 9 !important; }
  .sobre__foto img { height: min(56vh, 460px) !important; }
}

/* ---------- Más verde de la paleta (#019b7d), con medida ---------- */
/* bloque verde corrido detrás del retrato */
.sobre__foto::before { content: ""; position: absolute; left: 14px; top: 14px; width: calc(min(62vh, 620px) * .667); height: min(62vh, 620px); max-width: 100%; background: var(--verde); z-index: 0; }
@media (max-width: 640px) { .sobre__foto::before { width: calc(min(56vh, 460px) * .667); height: min(56vh, 460px); left: 10px; top: 10px; } }
/* categorías del índice y "volver" */
.grupo__t { color: var(--verde); }
.p-volver:hover { color: var(--verde); }
/* links "Ver…" al pasar el mouse */
.btn-ver:hover { color: var(--verde); }
/* datos de cada trabajo */
.p-ficha dt { color: var(--verde); }
/* selección de texto */
::selection { background: var(--verde); color: var(--crema); }
@media (max-width: 640px) {
  .sobre__txt { grid-row: auto !important; grid-column: 1 / -1 !important; padding: 0 !important; margin-top: 18px !important; gap: 12px; }
  .sobre__txt p { font-size: 18px !important; max-width: none !important; }
  .sobre__txt p:first-child, .sobre__txt p:nth-child(2) { margin-left: 0 !important; }
}

/* ---------- Sobre mí: título, saludo y foto entera en una sola pantalla ---------- */
.sobre__foto::before { display: none !important; }
#vista-sobre .pagina-head { padding-bottom: 0; }
.sobre { padding-top: clamp(8px, 1.5vw, 20px) !important; }
.sobre__intro { font-size: clamp(26px, 3.2vw, 52px) !important; }
.sobre__foto { margin-top: clamp(12px, 1.6vw, 24px) !important; }
.sobre__foto img { height: clamp(260px, calc(100svh - 430px), 600px) !important; }
@media (max-width: 640px) { .sobre__foto img { height: clamp(260px, calc(100svh - 330px), 520px) !important; } }

/* ---------- Bandas verdes: una por página ---------- */
.mf--grande, .mf--cierre, #vista-trabajos > .mf {
  background: var(--verde); color: var(--crema) !important;
  padding-top: clamp(40px, 6vw, 88px) !important; padding-bottom: clamp(40px, 6vw, 88px) !important;
}
.mf--grande ::selection, .mf--cierre ::selection { background: var(--crema); color: var(--verde); }


/* ============================================================
   AJUSTES (devolución del profe)
   ============================================================ */
/* 1. Interlineado 1,5 en todo el texto corrido */
p, li, .home-yo__txt, .verbos-lista p, .sobre__txt p, .manif__txt p, .retrato__txt p,
.vizma__cols p, .dcard__b, .nombre__s, .cap__bajada, .proyecto p { line-height: 1.5 !important; }
/* los títulos grandes mantienen su interlineado */
.v, .nombre__w { line-height: .95 !important; }
.mf { line-height: 1.05 !important; }
.vizma__grande, .sobre__intro p { line-height: 1.1 !important; }
.tag { line-height: 1.4 !important; }
.intro__meta > :last-child { text-align: right; }

/* 2. La frase del inicio baja, para no competir con el menú */
.intro__frase {
  position: absolute; left: 0; right: 0; text-align: center; color: var(--negro);
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  opacity: calc(1 - var(--p) * 2.5);
}

/* 3. Verbos y nombre: quietos. Al pasar, la palabra cambia a un color de la paleta */
.v, .v *, .nombre__w, .nombre__w * { transform: none !important; margin-right: 0 !important; transition: color .35s ease !important; }
.v { color: var(--tinta) !important; letter-spacing: -.035em !important; }
.verbos-lista li { cursor: default; }
.verbos-lista li:hover .v--mirar, .verbos-lista li.is-on .v--mirar { color: var(--violeta) !important; }
.verbos-lista li:hover .v--desarmar, .verbos-lista li.is-on .v--desarmar { color: var(--verde) !important; }
.verbos-lista li:hover .v--alterar, .verbos-lista li.is-on .v--alterar { color: var(--violeta) !important; }
.verbos-lista li:hover .v--construir, .verbos-lista li.is-on .v--construir { color: var(--verde) !important; }
.verbos-lista p { transition: color .35s ease; }
.verbos-lista li:hover p, .verbos-lista li.is-on p { color: var(--tinta); }
.nombre__w { font-weight: 500 !important; color: var(--crema); }
.nombre li:hover .nombre__w, .nombre li.is-on .nombre__w { color: var(--amarillo); }
.nombre--vizcarra:hover .nombre__w, .nombre--vizcarra.is-on .nombre__w,
.nombre--isma:hover .nombre__w, .nombre--isma.is-on .nombre__w { color: var(--verde); }


/* ============================================================
   AJUSTES 2 (devolución del profe)
   ============================================================ */
/* Interlineado 1,5 en absolutamente todo el texto */
html body, html body *:not(#_n1):not(#_n2) { line-height: 1.5 !important; }

/* Trabajos: parte visual */
.galeria { padding-block: clamp(24px, 4vw, 56px) clamp(56px, 8vw, 110px); }
.galeria__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px) 16px; }
.gcard { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--tinta); }
.gcard__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #e9e8d6; }
.gcard__img img { width: 100%; height: 100%; object-fit: cover; }
.gcard__t { font-family: var(--display); font-weight: 500; font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -.01em; transition: color .3s; }
.gcard__m { color: var(--gris); }
@media (hover: hover) { .gcard:hover .gcard__t { color: var(--violeta); } }
@media (max-width: 1000px) { .galeria__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .galeria__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Índice: todas las filas iguales; los destacados solo se marcan en violeta */
.archivo { padding-top: clamp(24px, 4vw, 56px); }
.fila a, .fila--top a {
  grid-template-columns: 3.2em minmax(0, 1fr) minmax(0, 26%) 9em 4em !important;
  padding-block: clamp(10px, 1.2vw, 16px) !important;
}
.fila__t, .fila--top .fila__t {
  font-weight: 500 !important; font-size: clamp(24px, 3vw, 44px) !important; letter-spacing: -.02em !important;
  color: var(--tinta) !important; overflow-wrap: normal !important;
}
.fila--top .fila__t { color: var(--violeta) !important; }
.fila--top .fila__n { color: var(--violeta); }
.fila__recorte, .fila__flota { display: none !important; }
/* La foto aparece siempre en el mismo lugar: a la derecha del título, sin taparlo */
.fila__hueco { position: relative; align-self: stretch; }
.fila__ver {
  position: absolute; left: 0; top: 50%; width: min(100%, 300px); aspect-ratio: 4 / 5;
  transform: translateY(-50%); opacity: 0; pointer-events: none; z-index: 5; overflow: hidden;
  transition: opacity .25s ease;
}
.fila__ver img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) {
  .fila a:hover .fila__ver { opacity: 1; }
  .fila a:hover .fila__t, .fila--top a:hover .fila__t { color: var(--verde) !important; }
}
@media (max-width: 900px) {
  .fila a, .fila--top a { grid-template-columns: 2.4em minmax(0, 1fr) 4em !important; }
  .fila__hueco, .fila__tipo { display: none !important; }
  .fila__anio { display: block !important; }
}
@media (max-width: 640px) {
  .fila a, .fila--top a { grid-template-columns: 2em minmax(0, 1fr) 3.5em !important; gap: 8px !important; }
  .fila--top .fila__n, .fila--top .fila__t { grid-column: auto !important; }
  .fila__t, .fila--top .fila__t { font-size: clamp(22px, 6.4vw, 30px) !important; }
}


/* ============================================================
   AJUSTES 3: destacados, fotos que crecen, apertura
   ============================================================ */
/* Índice: miniatura al costado del título que crece al pasar */
.fila__hueco { display: flex; align-items: center; }
.fila__ver {
  opacity: 1 !important; left: 0; top: 50%; transform: translateY(-50%);
  width: 64px; height: 44px; aspect-ratio: auto; overflow: hidden; background: #e9e8d6;
  transition: width .45s cubic-bezier(.2,.7,.1,1), height .45s cubic-bezier(.2,.7,.1,1), box-shadow .3s;
}
.fila__ver img { object-position: var(--pos, 50% 50%); }
.fila--top .fila__ver { width: 120px; height: 80px; }
@media (hover: hover) {
  .fila a:hover .fila__ver { width: 300px; height: 375px; z-index: 6; box-shadow: 0 18px 40px -20px rgba(0,0,0,.45); }
}
/* Destacados: un poco más grandes y en violeta, sin exagerar */
.fila--top .fila__t { font-size: clamp(30px, 4.2vw, 62px) !important; font-weight: 500 !important; }
.fila--top a { padding-block: clamp(14px, 1.8vw, 24px) !important; }

/* Grilla visual: destacados ocupan dos columnas; al pasar, la foto crece en su lugar */
.galeria__grid { grid-auto-flow: dense; }
.gcard--top { grid-column: span 2; }
.gcard--top .gcard__img { aspect-ratio: 8 / 5; }
.gcard--top .gcard__t { color: var(--violeta); font-size: clamp(22px, 2.2vw, 32px); }
.gcard { position: relative; }
.gcard__img { position: relative; z-index: 1; transition: transform .5s cubic-bezier(.2,.7,.1,1), box-shadow .3s; transform-origin: center; }
.galeria__grid > .gcard:nth-child(4n+1) .gcard__img { transform-origin: left center; }
@media (hover: hover) {
  .gcard:hover { z-index: 5; }
  .gcard:hover .gcard__img { transform: scale(1.22); box-shadow: 0 24px 50px -24px rgba(0,0,0,.5); }
}
@media (max-width: 640px) { .gcard--top { grid-column: 1 / -1; } }

/* Dentro de cada trabajo: la primera imagen, grande */
.p-apertura { margin: 0 calc(var(--gutter) * -1) clamp(28px, 4vw, 56px); height: min(88vh, 62vw); overflow: hidden; background: #e9e8d6; }
.p-apertura img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.p-apertura--v { height: min(92vh, 120vw); }
.p-apertura--v img { object-fit: contain; background: var(--crema); }
@media (max-width: 640px) { .p-apertura { height: auto; } .p-apertura img { height: auto; } }


/* ============================================================
   AJUSTES 4: sin recortes, orden de destacados
   ============================================================ */
/* Grilla visual en filas: cada foto con su formato, sin recortar */
.galeria__grid { display: block; }
.gfila { gap: 16px !important; margin-bottom: clamp(28px, 3.4vw, 48px); align-items: flex-start; }
.gcard__img, .gcard--top .gcard__img { aspect-ratio: auto !important; background: none; }
.gcard__img img { width: 100%; height: auto !important; object-fit: contain !important; }
.gcard--top { grid-column: auto; }
.gcard__img { transform-origin: center top; }
.gfila > .jfila__c:first-child .gcard__img { transform-origin: left top; }
.gfila > .jfila__c:last-child .gcard__img { transform-origin: right top; }
@media (hover: hover) { .gcard:hover .gcard__img { transform: scale(1.12); } }
@media (max-width: 640px) {
  .gfila { flex-wrap: wrap; }
  .gfila > .jfila__c { flex-basis: 100% !important; }
}
/* Índice: miniatura con su formato; al pasar crece manteniendo el formato */
.fila__ver { height: 44px; width: calc(44px * var(--ar, .8)); background: none; }
.fila__ver img { object-fit: contain !important; }
.fila--top .fila__ver { height: 72px; width: calc(72px * var(--ar, .8)); }
@media (hover: hover) {
  .fila a:hover .fila__ver { height: 320px; width: calc(320px * var(--ar, .8)); }
}
.jfila__c a.gcard { display: flex !important; flex-direction: column; gap: 6px; }
.gcard__m { display: block; }


/* ============================================================
   Dentro de cada trabajo: una foto fija a un costado, las otras pasan
   ============================================================ */
.p-par { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; margin-block: 16px; }
.p-par--izq { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.p-par--izq .p-par__fijo { order: 2; }
.p-par__fijo { margin: 0; position: sticky; top: calc(var(--header-h, 64px) + 12px); }
.p-par__fijo img { width: 100%; height: auto; max-height: calc(100svh - var(--header-h, 64px) - 28px); object-fit: contain; object-position: top; display: block; }
.p-par__mov { display: flex; flex-direction: column; gap: 16px; }
.p-par__mov figure { margin: 0; }
.p-par__mov img { width: 100%; height: auto; display: block; }
.p-solo { grid-column: 1 / -1; margin: 16px auto; max-width: 50%; }
.p-solo img { width: 100%; height: auto; }
@media (max-width: 640px) {
  .p-par, .p-par--izq { grid-template-columns: 1fr; }
  .p-par__fijo { position: static; order: 0 !important; }
  .p-solo { max-width: 100%; }
}

.p-fila { display: block; }
.p-fila figure { margin: 0; }
.p-fila--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.p-fila--1v { width: 66%; }
.p-par--der .p-fila--1v { margin-left: auto; }

/* Índice en celu/tablet: también con la foto en mini */
@media (max-width: 900px) {
  .fila a, .fila--top a { grid-template-columns: 2.4em minmax(0, 1fr) 56px 4em !important; }
  .fila__hueco { display: flex !important; align-self: center; height: 40px; }
  .fila__ver, .fila--top .fila__ver { position: relative; transform: none; top: auto; width: 56px !important; height: 40px !important; box-shadow: none !important; }
  .fila__tipo { display: none !important; }
}
@media (max-width: 640px) {
  .fila a, .fila--top a { grid-template-columns: 2em minmax(0, 1fr) 48px 3.2em !important; }
  .fila__hueco { height: 36px; }
  .fila__ver, .fila--top .fila__ver { width: 48px !important; height: 36px !important; }
}
@media (max-width: 900px) {
  .fila__ver img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; }
  .fila__ver picture { display: block; width: 100%; height: 100%; }
}