/* ══════════════════════════════════════════════════════════════════
   about.css — sobre nosotros

   Es una plantilla: el texto y las fotos son marcadores. Se marcan con
   .todo, la misma convención que MBAE usa para sus bios pendientes, para
   que nadie confunda relleno con copy de verdad. Lo que SÍ es cierto —los
   nombres de los cuatro, el origen, el año, el correo— va sin marcar.

   Para llenarla:
     · cambia el texto de cada .todo por el real y quítale la clase
     · en un retrato o en un cuadro de la tira, mete un <img> dentro del
       marco y borra el <span> de "sin imagen"

   Casi nada de aquí es nuevo: la pasarela, el numeral fantasma, el riel y
   el ticker son los patrones de la tienda, que estaban desaprovechados
   fuera de ella.
   ══════════════════════════════════════════════════════════════════ */

/* alto real de la barra; va a mano y está acoplado al nav de styles.css */
.site { --barra-h: 56px; }
@media (max-width: 640px) { .site { --barra-h: 88px; } }
@media (max-width: 420px) { .site { --barra-h: 112px; } }

/* ── Manifiesto ──────────────────────────────────────────────────── */
.manifiesto {
  width: 100%; max-width: var(--maxw);
  margin: 0 auto clamp(28px, 5vh, 56px);
  padding: 0 var(--pad-x);
}
.manifiesto p {
  max-width: 20ch;
  margin: 0 0 clamp(18px, 3vh, 30px);
  font-family: var(--t-display); font-weight: 400;
  font-size: clamp(28px, 4.6vw, 62px);
  line-height: 1.06; letter-spacing: 0.01em;
  text-wrap: balance;
  color: var(--text);
  text-transform: lowercase;
  text-shadow: var(--glow-medium);
}
.manifiesto p + p {
  max-width: 46ch;
  font-family: var(--t-body);
  font-size: 15px; line-height: 1.8;
  letter-spacing: 0; text-transform: none;
  color: var(--text-mute);
  text-shadow: var(--glow-micro);
}

/* ── Riel de integrantes ──────────────────────────────────────────
   Fijo a la izquierda, aparece sólo mientras la pasarela está en
   pantalla. Debajo de 1100px no hay sitio y se esconde: los paneles se
   recorren con scroll normal. */
.rail {
  position: fixed;
  left: clamp(16px, 2.4vw, 34px);
  top: 50%; transform: translateY(-50%);
  z-index: 40;
  display: none; flex-direction: column; gap: 2px;
  opacity: 0; pointer-events: none;
  transition: opacity 340ms ease;
}
.rail.is-visible { opacity: 1; pointer-events: auto; }
@media (min-width: 1100px) { .rail { display: flex; } }

.rail-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  font-family: var(--t-mono);
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--text-dim);
  transition: color 200ms ease, text-shadow 200ms ease;
}
.rail-item .rail-n { font-variant-numeric: tabular-nums; opacity: 0.7; }
.rail-item .rail-nombre {
  /* el guion que crece: en reposo mide cero y se estira al activarse */
  position: relative;
}
.rail-item .rail-nombre::before {
  content: ""; position: absolute; left: -10px; top: 50%;
  width: 0; height: 1px; background: var(--green-2);
  transform-origin: left center;
  transition: width 240ms ease;
}
.rail-item:hover { color: var(--text-mute); }
.rail-item.is-active {
  color: var(--text);
  text-shadow: var(--glow-soft);
}
.rail-item.is-active .rail-nombre::before { width: 6px; }

/* ── Pasarela ─────────────────────────────────────────────────────
   Un panel por integrante, a pantalla completa. svh y no vh: con vh la
   barra del navegador móvil hace saltar la maqueta al aparecer. */
.pasarela {
  width: 100%; max-width: var(--maxw);
  margin: 0 auto clamp(30px, 6vh, 70px);
  padding: 0 var(--pad-x);
}
/* Cuando el riel aparece hay que cederle el carril: es fixed, así que no
   empuja nada y se encimaba sobre el retrato. */
@media (min-width: 1100px) {
  .pasarela { padding-left: calc(var(--pad-x) + 150px); }
}
.quien {
  position: relative;
  min-height: 78vh; min-height: 78svh;
  scroll-snap-align: start;
  scroll-margin-top: var(--barra-h);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: clamp(22px, 4vw, 64px);
  padding: clamp(36px, 7vh, 80px) 0;
  border-top: 1px solid var(--line);
}
.quien:first-child { border-top: 0; }

/* El numeral gigante detrás, sangrando por la izquierda. Decorativo:
   aria-hidden en el HTML y sin selección. */
.quien-ghost {
  position: absolute; left: -0.08em; top: 50%;
  transform: translateY(-50%);
  z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--t-display); font-weight: 400;
  font-size: clamp(170px, 30vw, 420px);
  line-height: 0.8; letter-spacing: -0.04em;
  color: var(--text);
  /* 0.045 no se veía: a este tamaño el trazo de la display es finísimo y
     el numeral desaparecía del todo. */
  opacity: 0.10;
}
.quien-media, .quien-datos { position: relative; z-index: 1; }

.quien-media { max-width: 400px; }
.quien-marco {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line-2);
  background: var(--bg-card);
  overflow: hidden;
  display: grid; place-items: center;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(220,240,225,0.06);
}
.quien-marco img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  transition: filter 420ms ease;
}
.quien:hover .quien-marco img { filter: grayscale(0.1) contrast(1); }
/* rayas sobre el hueco, para que se lea como estado y no como error */
.quien-marco::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom,
    rgba(255,255,255,0.022) 0px, rgba(255,255,255,0.022) 1px,
    transparent 1px, transparent 3px);
}
.quien-vacio, .tira-vacio {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--t-mono);
  font-size: 9.5px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--text-dim);
}
.quien-vacio::before, .tira-vacio::before {
  content: ""; width: 26px; height: 26px;
  border: 1px solid var(--line-control);
  /* cruz de encuadre, como la mira de un visor */
  background:
    linear-gradient(var(--line-control), var(--line-control)) center/1px 10px no-repeat,
    linear-gradient(var(--line-control), var(--line-control)) center/10px 1px no-repeat;
}

.quien-datos { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.quien-idx {
  font-family: var(--t-mono);
  font-size: 9.5px; letter-spacing: 0.32em;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.quien h2 {
  margin: 0;
  font-family: var(--t-display); font-weight: 400;
  font-size: clamp(42px, 7.6vw, 104px);
  line-height: 0.94; letter-spacing: 0.01em;
  color: var(--text);
  text-transform: lowercase;
  text-shadow: var(--glow-strong);
  overflow-wrap: anywhere;
}
.quien-rol {
  margin: 0;
  font-family: var(--t-mono);
  font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--green-2);
}
.quien-bio {
  margin: 0; max-width: 44ch;
  font-size: 15px; line-height: 1.8;
  color: var(--text-mute);
  text-shadow: var(--glow-micro);
}
.quien-red {
  margin-top: 4px;
  display: inline-block; padding: 12px 18px;
  border: 1px solid var(--line-control);
  font-family: var(--t-mono);
  font-size: 10.5px; letter-spacing: 0.24em;
  color: var(--text);
  text-shadow: var(--glow-micro);
  transition: background 200ms, border-color 200ms;
}
.quien-red:hover { background: rgba(255,255,255,0.05); border-color: var(--text-dim); }

/* ── Tira de película ─────────────────────────────────────────────
   Rollo horizontal con scroll-snap y perforaciones dibujadas arriba y
   abajo con un degradado que se repite. */
.tira {
  width: 100%; max-width: var(--maxw);
  margin: 0 auto clamp(40px, 7vh, 80px);
  padding: 16px 0;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  background: var(--bg-2);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  /* las perforaciones */
  background-image:
    repeating-linear-gradient(to right,
      rgba(190,215,195,0.22) 0 10px, transparent 10px 26px),
    repeating-linear-gradient(to right,
      rgba(190,215,195,0.22) 0 10px, transparent 10px 26px);
  background-size: 100% 5px, 100% 5px;
  background-position: 0 5px, 0 calc(100% - 5px);
  background-repeat: repeat-x;
  scrollbar-width: thin;
}
.tira:focus-visible { outline: 2px solid rgba(200,245,215,0.9); outline-offset: -2px; }
.tira-rollo {
  display: flex; gap: var(--gap);
  padding: 18px var(--pad-x);
  width: max-content;
}
.tira-cuadro { margin: 0; scroll-snap-align: center; }
.tira-marco {
  position: relative;
  width: clamp(230px, 30vw, 330px);
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line-2);
  background: var(--bg-card);
  overflow: hidden;
  display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(220,240,225,0.06);
}
.tira-marco img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.tira-marco::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom,
    rgba(255,255,255,0.022) 0px, rgba(255,255,255,0.022) 1px,
    transparent 1px, transparent 3px);
}
.tira-pie { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; }
.tira-n {
  font-family: var(--t-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.tira-cap {
  font-family: var(--t-mono); font-size: 9.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--text-dim); text-align: right;
}

/* ── El catálogo en collage ───────────────────────────────────────
   Portadas encimadas y ladeadas. La rotación es el único sitio del
   sitio donde algo va torcido, y por eso funciona: marca que esto es el
   cierre y no otra rejilla. */
.zine {
  position: relative;
  width: 100%; max-width: var(--maxw);
  margin: 0 auto clamp(50px, 9vh, 110px);
  padding: clamp(20px, 5vh, 50px) var(--pad-x);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.6vw, 24px);
  align-items: center;
}
.zine-pieza {
  position: relative;
  display: block;
  transition: transform 340ms ease, filter 340ms ease;
}
.zine-pieza img {
  width: 100%; height: auto;
  border: 1px solid var(--line-2);
  filter: grayscale(0.85) contrast(1.05);
  box-shadow: 0 18px 44px rgba(0,0,0,0.6);
  transition: filter 420ms ease;
}
/* los desfases: cada pieza cae distinto, como pegada a mano */
.zine-pieza--1 { transform: rotate(-3.2deg) translateY(14px); z-index: 2; }
.zine-pieza--2 { transform: rotate(1.8deg)  translateY(-22px); z-index: 4; }
.zine-pieza--3 { transform: rotate(-1.2deg) translateY(28px); z-index: 3; }
.zine-pieza--4 { transform: rotate(3.4deg)  translateY(-10px); z-index: 1; }
.zine-pieza:hover { z-index: 6; }
.zine-pieza--1:hover { transform: rotate(-1.4deg) translateY(4px)  scale(1.045); }
.zine-pieza--2:hover { transform: rotate(0.6deg)  translateY(-30px) scale(1.045); }
.zine-pieza--3:hover { transform: rotate(-0.4deg) translateY(18px) scale(1.045); }
.zine-pieza--4:hover { transform: rotate(1.6deg)  translateY(-20px) scale(1.045); }
.zine-pieza:hover img { filter: grayscale(0) contrast(1); }

/* la cinta de etiqueta, como una tira de rotulador pegada encima */
.zine-cinta {
  position: absolute; top: -10px; left: 8px;
  padding: 5px 9px;
  background: var(--bg-2);
  border: 1px solid var(--line-control);
  font-family: var(--t-mono);
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-mute);
  white-space: nowrap;
}
.zine-tit {
  display: block; margin-top: 10px;
  font-family: var(--t-display); font-weight: 400;
  font-size: clamp(15px, 1.5vw, 21px);
  line-height: 1.1;
  color: var(--text);
  text-transform: lowercase;
  text-shadow: var(--glow-micro);
  overflow-wrap: anywhere;
}

/* ── Contacto ─────────────────────────────────────────────────────── */
.contacto {
  width: 100%; max-width: var(--maxw);
  margin: 0 auto clamp(40px, 7vh, 80px);
  padding: 0 var(--pad-x);
}
.contacto-caja {
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  padding: clamp(24px, 4vw, 40px);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 20px;
}
.contacto-txt { max-width: 44ch; }
.contacto-txt h2 {
  margin: 0 0 8px;
  font-family: var(--t-display); font-weight: 400;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.04;
  color: var(--text);
  text-transform: lowercase;
  text-shadow: var(--glow-medium);
}
.contacto-txt p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-mute); }
.contacto-caja a {
  display: inline-block; padding: 16px 24px;
  border: 1px solid var(--line-control);
  font-family: var(--t-mono); font-weight: 700;
  font-size: 11px; letter-spacing: 0.26em;
  color: var(--text);
  background: rgba(255,255,255,0.02);
  text-shadow: var(--glow-soft);
  transition: background 200ms, border-color 200ms, text-shadow 200ms;
  word-break: break-all;
}
.contacto-caja a:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--text-dim);
  text-shadow: var(--glow-medium);
}

/* ── El marcador de pendiente ─────────────────────────────────────
   Tiene que verse que es un hueco, no copy. */
.todo {
  color: var(--text-dim);
  border-bottom: 1px dashed var(--line-control);
  font-style: normal;
}
.manifiesto .todo { border-bottom-width: 2px; }

/* ── El snap, sólo aquí ───────────────────────────────────────────
   proximity y no mandatory, por lo mismo que en la tienda: el
   obligatorio secuestra la rueda y pelea con el ticker de arriba y la
   tira de abajo. La clase la pone site.js y sólo si nadie pidió menos
   movimiento. */
html.about-snap { scroll-snap-type: y proximity; }
@media (prefers-reduced-motion: reduce) { html.about-snap { scroll-snap-type: none; } }

@media (max-width: 1000px) {
  .quien {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: clamp(18px, 4vh, 30px);
    padding: clamp(32px, 6vh, 56px) 0;
  }
  .quien-media { max-width: min(100%, 420px); }
  .quien-ghost { font-size: clamp(150px, 44vw, 300px); }
  .quien h2 { font-size: clamp(38px, 11vw, 72px); }
  /* sin alto de pantalla completa el snap estorba más de lo que suma */
  html.about-snap { scroll-snap-type: none; }
  .zine { grid-template-columns: repeat(2, 1fr); row-gap: clamp(26px, 5vh, 48px); }
}
@media (max-width: 560px) {
  .zine { grid-template-columns: 1fr; }
  /* torcidas y encimadas en una sola columna se estorban: se enderezan */
  .zine-pieza,
  .zine-pieza:hover { transform: none; }
  .contacto-caja a { width: 100%; text-align: center; }
  .tira-marco { width: clamp(200px, 72vw, 280px); }
}

/* Con movimiento reducido no hay marquesina ni desplazamientos: el
   ticker ya se apaga en shop.css, aquí van los del collage. */
@media (prefers-reduced-motion: reduce) {
  .zine-pieza, .zine-pieza:hover { transition: none; }
  .quien-marco img, .zine-pieza img { transition: none; }
}