/* =========================================================
   Proyectos — lienzo, hilo conductor, composición
   ========================================================= */

.canvas { position: relative; }

/* ---------- Hilo conductor (SVG dibujado por js/modules/thread.js) ---------- */
.thread {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
  /* blanco en "diferencia": oscuro sobre papel, claro sobre la sala oscura */
  mix-blend-mode: difference;
}
.thread__ghost,
.thread__line { fill: none; stroke: var(--white); }
.thread__ghost { stroke-width: 1; stroke-dasharray: 2 7; opacity: .35; }
.thread__line { stroke-width: 1.5; }
/* La señal vive en su propia capa, sin mezcla, para conservar su color */
.thread--signal { mix-blend-mode: normal; z-index: 5; }
.thread__signal { fill: var(--orange); }

/* ---------- Grupos ---------- */
.group {
  padding: clamp(56px, 10vh, 120px) var(--gutter) clamp(96px, 18vh, 200px);
  /* Las imágenes pueden salir del borde: se recortan aquí, sin scroll horizontal */
  overflow-x: hidden;
  overflow-x: clip;
}
.group--av {
  background: var(--room);
  color: var(--white);
}
.group--av :focus-visible { outline-color: var(--sky); }

/* ---------- Trama (ajuste 3): territorio digital ----------
   Retícula de puntos casi imperceptible bajo el lienzo. Solo fondo: queda
   detrás del hilo, los nodos, las imágenes y los textos. Estática.
   Para desactivarla, quitar la clase `trama` de #lienzo en index.html.
   Intensidad: --trama-ink (claro) y --trama-ink-dark (sala oscura).
   Separación: --trama-gap. Tamaño del punto: --trama-dot. */
.trama {
  --trama-gap: 32px;
  --trama-dot: 1px;
  --trama-ink: rgba(20, 20, 20, .12);
  --trama-ink-dark: rgba(255, 255, 255, .10);
}
.trama > .group {
  background-image: radial-gradient(circle,
    var(--trama-ink) var(--trama-dot), transparent calc(var(--trama-dot) + .5px));
  background-size: var(--trama-gap) var(--trama-gap);
  background-position: 50% 0;
}
.trama > .group--av { --trama-ink: var(--trama-ink-dark); }
@media (max-width: 720px) {
  .trama { --trama-gap: 24px; }
}

.group__head {
  display: flex; align-items: baseline; gap: 24px;
  margin-bottom: clamp(48px, 10vh, 120px);
  position: relative; z-index: 3;
}
.group__count { opacity: .6; }
.group__title {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: clamp(2rem, 6vw, 5.6rem);
  letter-spacing: -.045em;
  line-height: .95;
}

/* ---------- Retícula asimétrica ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: clamp(96px, 18vh, 220px);
  align-items: start;
}

/* ---------- Composición del lienzo (ajuste 1) ----------
   Superficies grandes que salen del borde y presencias pequeñas rodeadas de vacío.
   Sólo la imagen sale de la pantalla; textos y botones quedan dentro de la retícula.
   --over: cuánto sobrepasa la imagen el borde de la pantalla (se recorta en .group). */

/* AudioRelatos — llega hasta el borde izquierdo */
.p1 { grid-column: 1 / span 4;  --ratio: 4 / 5; --ox: 100%; }
/* Mapa — gran superficie que continúa más allá del borde derecho */
.p2 { grid-column: 6 / span 7;  --ratio: 2 / 1; --ox: 0%;   --over: 14vw; margin-top: clamp(140px, 30vh, 320px); }
/* Paulonio — pequeño, aislado en el vacío; el nodo corona el círculo */
.p3 { grid-column: 3 / span 2;  --ratio: 1;     --ox: 50%;  margin-top: clamp(40px, 8vh, 100px); }
/* Luchas por el arte — escala intermedia, apoyada a la derecha */
.p4 { grid-column: 7 / span 5;  --ratio: 4 / 3; --ox: 100%; margin-top: clamp(200px, 36vh, 400px); }
/* Luis Vargas Rosas — pantalla de cine que se prolonga hacia la derecha */
.p5 { grid-column: 1 / span 10; --ratio: 2 / 1; --ox: 0%;   --over: 16vw; }
/* Monvoisin y Valentina Cruz — proyecciones secundarias, desfasadas */
.p6 { grid-column: 2 / span 4;  --ratio: 16 / 9; --ox: 0%;  margin-top: clamp(40px, 6vh, 80px); }
.p7 { grid-column: 8 / span 4;  --ratio: 16 / 9; --ox: 100%; margin-top: clamp(220px, 40vh, 440px); }

/* Origen del nodo y de la aparición */
.project { --oy: 0%; }

/* Sangrados: la imagen se extiende hasta (o más allá de) el borde de la pantalla */
.p1 .project__media { margin-left: calc(-1 * var(--gutter)); }
.p2 .project__media,
.p5 .project__media { margin-right: calc(-1 * (var(--gutter) + var(--over))); }
/* Marcos y etiquetas se retiran del área recortada para seguir visibles */
.p1 .ph__label { left: calc(var(--gutter) + 14px); }
.p5 .av-frame { right: calc(var(--over) + 14px); }

@media (max-width: 900px) {
  .grid { row-gap: 88px; }
  .project { margin-top: 0 !important; }
  .p1, .p3, .p5, .p6 { grid-column: 1 / span 11; }
  .p2, .p4, .p7     { grid-column: 2 / span 11; }
  .p3 { grid-column: 3 / span 6; }
  /* En móvil los sangrados llegan justo al borde, sin recortar contenido */
  .p2, .p5 { --over: 0px; }
  .p2, .p5 { grid-column-end: -1; }
}

/* Cuerpo de texto alineado al lado del nodo */
.p4 .project__body,
.p7 .project__body { margin-left: auto; text-align: right; justify-items: end; }
.p3 .project__body { justify-items: center; text-align: center; }
@media (max-width: 900px) {
  /* Paulonio: el texto se ensancha por igual a ambos lados (de 6 a 10 columnas)
     sin mover el círculo ni su eje */
  .p3 .project__body { margin-inline: calc(-1 * (100% + var(--gap)) / 3); }
}

/* ---------- Proyecto ---------- */
.project {
  position: relative;
  z-index: 3;
}

.project__node {
  position: absolute; z-index: 4;
  top: -8px; left: calc(var(--ox) - 8px);
  width: 16px; height: 16px; border-radius: 50%;
  transition: transform .5s var(--ease-out);
}
.project--interactive .project__node { background: var(--ink); }
.project--av .project__node { border: 2px solid var(--white); background: var(--room); }
.project:hover .project__node,
.project:focus-within .project__node { transform: scale(1.7); }

.project__media {
  position: relative;
  display: block;
  aspect-ratio: var(--ratio);
  overflow: hidden;
  background: var(--accent, #1d1d1d);
}
.project__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: scale 1.2s var(--ease-out), filter .6s;
}
.project--interactive .project__media img { filter: saturate(.85); }
.project:hover .project__media img { filter: none; }

/* Profundidad (ajuste 2, js/modules/depth.js): la imagen se desliza dentro de su
   marco con `translate`; el zoom al pasar el cursor usa `scale`, por separado.
   Sin JS o con movimiento reducido, --py = 0 y --ds = 1: imagen quieta. */
.project__media img,
.project__media .ph {
  translate: 0 var(--py, 0px);
  scale: var(--ds, 1);
}
.project:hover .project__media img,
.project:hover .project__media .ph { scale: calc(var(--ds, 1) * 1.04); }
.p5 .project__media img { object-position: 0% 22%; }
.p4 .project__media img { object-position: 50% 15%; } /* logotipo y grafo dentro del marco 4:3 */

.project__media--round { border-radius: 50%; }

.project__body {
  padding-top: 20px;
  display: grid; gap: 8px;
  max-width: 40ch;
}
.project__meta { display: flex; gap: 12px; align-items: center; opacity: .7; }
.tag {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 2px 8px 1px;
}
.project--av .tag { border-style: dashed; }

.project__title {
  font-size: clamp(1.8rem, 3.4vw, 3.2rem);
  line-height: .98;
  letter-spacing: -.035em;
  font-weight: 700;
}
/* Audiovisuales: el título pasa a la serif — cambio de registro */
.project--av .project__title {
  font-family: var(--f-serif);
  font-weight: 400;
  letter-spacing: -.02em;
  font-size: clamp(2.2rem, 4.4vw, 4.4rem);
}
.project--av .project__title .serif-i { font-style: italic; }

.project__kind {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  line-height: 1.1;
  text-wrap: balance;
}
.project--av .project__kind { font-family: var(--f-sans); font-style: normal; font-weight: 500; font-size: 1rem; }

.project__desc { font-size: .95rem; line-height: 1.45; color: var(--ink-soft); max-width: 36ch; }
.project--av .project__desc { color: rgba(255,255,255,.75); }
/* Sobre naranja y celeste, el texto blanco no alcanza contraste suficiente: tinta oscura */
.p1 .project__link,
.p4 .project__link { color: var(--ink); }
.p1 .project__link:hover,
.p1 .project__link:focus-visible,
.p4 .project__link:hover,
.p4 .project__link:focus-visible { color: var(--white); }
/* Luchas por el arte: el botón acompaña el texto alineado a la derecha */
.p4 .project__link { justify-self: end; }

.project__pending { opacity: .5; }
.project__pending::before { content: "— "; }
.project__credit { opacity: .45; font-size: .62rem; }

.project__link {
  justify-self: start;
  display: inline-flex; gap: 8px; align-items: center;
  margin-top: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  transition: transform .4s var(--ease-out), background .3s;
}
.project__link:hover,
.project__link:focus-visible { background: var(--ink); transform: translateX(-4px); }

/* ---------- Marcos audiovisuales ---------- */
.av-frame {
  position: absolute; inset: 14px;
  pointer-events: none;
  --c: rgba(255,255,255,.75);
  background:
    linear-gradient(var(--c), var(--c)) top left / 22px 1.5px,
    linear-gradient(var(--c), var(--c)) top left / 1.5px 22px,
    linear-gradient(var(--c), var(--c)) top right / 22px 1.5px,
    linear-gradient(var(--c), var(--c)) top right / 1.5px 22px,
    linear-gradient(var(--c), var(--c)) bottom left / 22px 1.5px,
    linear-gradient(var(--c), var(--c)) bottom left / 1.5px 22px,
    linear-gradient(var(--c), var(--c)) bottom right / 22px 1.5px,
    linear-gradient(var(--c), var(--c)) bottom right / 1.5px 22px;
  background-repeat: no-repeat;
}
.av-frame__rec {
  position: absolute; top: 10px; right: 12px;
  color: var(--white);
  display: flex; align-items: center; gap: 6px;
  font-size: .62rem;
}
.av-frame__rec::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange);
  animation: blink 1.6s steps(2, jump-none) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Placeholders generativos (sin imagen real todavía) ---------- */
.project__media--placeholder { display: grid; place-items: center; }
.project--av .project__media--placeholder { background: #1f1f1f; }

.ph { position: absolute; inset: 0; transition: scale 1.2s var(--ease-out); }
.ph::after {                     /* el punto que habita cada proyecto */
  content: ""; position: absolute;
  left: 50%; top: 50%;
  width: 14%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--white);
  transition: width .8s var(--ease-out);
}
.project:hover .ph::after { width: 22%; }

.ph--waves {
  background: repeating-radial-gradient(circle at 50% 50%,
    transparent 0 18px, rgba(255,255,255,.55) 18px 19.5px);
}
.ph--voice {
  background: radial-gradient(circle at 50% 50%, transparent 0 30%, rgba(255,255,255,.25) 30% 31%, transparent 31% 44%, rgba(255,255,255,.2) 44% 45%, transparent 45%);
}
.ph--voice::after { animation: breathe 3.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: translate(-50%, -50%) scale(1.25); } }

.ph--grid {
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(20,20,20,.25) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(20,20,20,.25) 39px 40px);
}
.ph--grid::after { left: 32%; top: 62%; background: var(--ink); }

.ph--scan {
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.04) 3px 4px),
    radial-gradient(ellipse at 30% 50%, rgba(244,123,32,.35), transparent 60%);
}
.ph--scan::after { background: transparent; border: 1.5px solid var(--white); width: 10%; }

.ph--story {
  background: radial-gradient(circle at 70% 40%, rgba(110,198,242,.35), transparent 55%);
}
.ph--story::after { left: 70%; top: 40%; width: 12%; background: var(--sky); }

/* Cuentos de Valentina Cruz: gráfica tipográfica de presentación (no es un
   fotograma ni una obra): los títulos de los cuatro cuentos como secuencia */
.ph--series {
  container-type: inline-size;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 15% 7% 14%;
  background: radial-gradient(circle at 78% 30%, rgba(110,198,242,.22), transparent 55%);
}
.ph--series::after { display: none; }
.ph__story {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 0 4cqi 0 2.4cqi;
  border-left: 1px solid rgba(255,255,255,.28);
  color: var(--white);
}
.ph__story .mono { font-size: max(.55rem, 2.2cqi); color: var(--sky); }
.ph__story .serif-i { font-family: var(--f-serif); font-style: italic; font-size: max(.8rem, 4.6cqi); line-height: 1.05; }
.ph__caption {
  position: absolute; left: 7%; bottom: 24px;
  font-size: max(.5rem, 1.7cqi);
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.ph__label {
  position: absolute; left: 14px; bottom: 12px;
  color: rgba(255,255,255,.85);
  font-size: .6rem;
}
.p4 .ph__label { color: rgba(20,20,20,.7); }
.project__media--round .ph__label { left: 50%; transform: translateX(-50%); bottom: 18%; }

/* ---------- Aparición desde el punto (sólo con JS y movimiento permitido) ---------- */
.motion .project__media {
  clip-path: circle(0% at var(--ox) var(--oy));
  transition: clip-path var(--t-slow) var(--ease-out);
}
.motion .project__body > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.motion .project.is-visible .project__media { clip-path: circle(150% at var(--ox) var(--oy)); }
.motion .project.is-visible .project__body > * { opacity: 1; transform: none; }
.motion .project.is-visible .project__body > *:nth-child(2) { transition-delay: .35s; }
.motion .project.is-visible .project__body > *:nth-child(3) { transition-delay: .45s; }
.motion .project.is-visible .project__body > *:nth-child(n+4) { transition-delay: .55s; }
.motion .project.is-visible .project__body > *:first-child { transition-delay: .25s; }

/* ---------- Escala editorial (diseño aprobado) ----------
   Proporciones más contenidas para que los proyectos convivan en pantalla.
   Para volver a la escala anterior, quitar la clase `escala-editorial`
   de #lienzo en index.html. No toca portada, cierre, colores, trama,
   hilo, parallax ni animaciones. */
.escala-editorial .group {
  padding-top: clamp(48px, 8vh, 96px);
  padding-bottom: clamp(72px, 12vh, 140px);
}
.escala-editorial .group__head { margin-bottom: clamp(40px, 7vh, 80px); }
.escala-editorial .group__title { font-size: clamp(2rem, 4.6vw, 4.4rem); }
.escala-editorial .grid { row-gap: clamp(72px, 11vh, 140px); }

.escala-editorial .project__title { font-size: clamp(1.8rem, 2.8vw, 2.6rem); text-wrap: balance; }
.escala-editorial .project--av .project__title { font-size: clamp(2.2rem, 3.6vw, 3.6rem); }

@media (min-width: 901px) {
  /* Grandes: siguen saliendo del borde, con menos desborde */
  .escala-editorial .p1 { grid-column: 1 / span 3; }
  .escala-editorial .p2 { grid-column: 7 / span 6; --over: 6vw; margin-top: clamp(120px, 20vh, 220px); }
  .escala-editorial .p5 { grid-column: 4 / span 9; --over: 6vw; }
  /* Medianos y pequeños: misma posición relativa, desfases más cortos */
  .escala-editorial .p3 { margin-top: clamp(32px, 6vh, 72px); }
  .escala-editorial .p4 { grid-column: 8 / span 4; margin-top: clamp(140px, 22vh, 240px); }
  .escala-editorial .p6 { margin-top: clamp(32px, 5vh, 64px); }
  .escala-editorial .p7 { margin-top: clamp(140px, 24vh, 260px); }
}
@media (max-width: 900px) {
  .escala-editorial .grid { row-gap: 72px; }
  .escala-editorial .p1 { grid-column: 1 / span 9; }
}

/* ---------- Anchos mixtos (diseño aprobado) ----------
   Referencia: mnba.gob.cl organiza su contenido en una columna de 1140 px y
   sólo deja a todo el ancho la imagen principal. Aquí: portada y cierre siguen
   a todo el ancho; manifiesto y territorio de proyectos se ordenan en una
   columna de 1140 px. Los fondos (papel / sala oscura) siguen de borde a borde.
   Rompen el margen sólo el Mapa (el territorio continúa fuera del marco) y
   Luis Vargas Rosas (pantalla de cine, como en el sitio institucional).
   Para desactivarla, quitar la clase `anchos-mixtos` de <body> en index.html. */
.anchos-mixtos {
  --contenido: 1140px;
  /* distancia del borde de pantalla al borde del contenido (para los sangrados;
     el exceso por la barra de desplazamiento queda recortado por .group) */
  --margen: max(var(--gutter), calc((100vw - var(--contenido)) / 2));
}
.anchos-mixtos .statement,
.anchos-mixtos .group {
  padding-inline: max(var(--gutter), calc((100% - var(--contenido)) / 2));
}

/* Sangrados: sólo Mapa y Vargas Rosas, hasta el borde de la pantalla */
.anchos-mixtos .p2 .project__media,
.anchos-mixtos .p5 .project__media { margin-right: calc(-1 * var(--margen)); }
.anchos-mixtos .p5 .av-frame { right: 22px; }
.anchos-mixtos .p3 .project__media { max-width: 200px; margin-inline: auto; }

@media (min-width: 901px) {
  /* AudioRelatos queda dentro del margen (en móvil conserva su sangrado) */
  .anchos-mixtos .p1 .project__media { margin-left: 0; }
  .anchos-mixtos .p1 .ph__label { left: 14px; }
  /* Interactivos */
  .anchos-mixtos .p1 { grid-column: 1 / span 4; }
  .anchos-mixtos .p2 { grid-column: 6 / span 7; }
  .anchos-mixtos .p3 { grid-column: 2 / span 3; }
  .anchos-mixtos .p4 { grid-column: 8 / span 5; }
  /* Audiovisuales */
  .anchos-mixtos .p5 { grid-column: 4 / span 9; }
  .anchos-mixtos .p6 { grid-column: 1 / span 5; }
  .anchos-mixtos .p7 { grid-column: 8 / span 5; }
}