/* ══════════════════════════════════════════════════════════════════════════════
   galeria.css — MÓDULO 7 · "Lo que ya está pasando" · Home D
   ──────────────────────────────────────────────────────────────────────────────
   Historia C1 (teaser). La card muestra alias · herramienta · título · badge.

   EL PLACEHOLDER, QUE ES LO INTERESANTE
   Los cuatro casos traen `captura: null`: no hay imágenes y no se van a
   inventar — sería fabricar trabajo de compañeros que no existe (copy.md).
   En su lugar, cada caso lleva un SELLO DE PÍXEL generado a partir del alias:
   una retícula de 5×5 celdas, siempre la misma para el mismo alias, sobre el
   grid de 24px del lienzo hecho visible. Es honesto —nadie confunde un sello
   de 25 celdas con una captura de pantalla— y dice algo cierto del proyecto:
   aquí la identidad ES el alias (regla 1), y esta es la cara que la máquina le
   pone. Cuando lleguen las capturas reales, sustituye a este bloque y ya está.
   ══════════════════════════════════════════════════════════════════════════════ */

.galeria {
  position: relative;
  z-index: 1;
  padding: clamp(120px, 20vh, 224px) var(--margen-hero) clamp(120px, 20vh, 224px);
}

/* Cabecera en dos piezas: textos a la izquierda, CTA sólido a la derecha y a
   la altura de la bajada. Antes el CTA cerraba el módulo con un garabato; en el
   frame ajustado sube y se vuelve botón, como el del hero y el del manifiesto. */
.galeria__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px clamp(24px, 4vw, 64px);
  max-width: 1240px;
  margin: 0 auto clamp(40px, 6.5vh, 72px);
}
.galeria__textos { flex: 1 1 620px; }
.galeria__cta { flex: none; margin-bottom: 6px; }

.galeria__titulo {
  margin: 0 0 14px;
  font-family: var(--tipografia-display);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 72px);
  line-height: .89;
  letter-spacing: -.013em;
  color: var(--texto-principal);
  /* En el frame ajustado TODOS los títulos de módulo van en caja alta:
     es la voz del cartel, y rima con el display del hero. */
  text-transform: uppercase;
}

.galeria__bajada {
  max-width: 46ch;
  margin: 0;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.58;
  color: var(--texto-secundario);
}

/* Mismo raíl que el módulo 5: fila que arranca en el margen de contenido y
   sangra por el borde derecho. Con cuatro casos la cuarta card asoma cortada, y
   eso ya dice que la galería completa tiene más. */
.galeria__lista {
  --tarjeta: 360px;
  --hueco: var(--pixel-paso);       /* el paso de la retícula */
  --sangria: max(var(--margen-hero), calc((100vw - 1240px) / 2));

  display: flex;
  gap: var(--hueco);
  margin: 0 calc(-1 * var(--margen-hero));
  padding: 0 var(--margen-hero) 4px var(--sangria);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--sangria);
  scrollbar-width: none;
}
.galeria__lista::-webkit-scrollbar { display: none; }
.galeria__lista::after {
  content: '';
  flex: none;
  width: calc(var(--sangria) - var(--margen-hero));
}

.galeria__aviso {
  max-width: 1240px;
  margin: 0 auto;
  font-family: var(--tipografia-pixel);
  font-size: clamp(17px, 1.6vw, 21px);
  color: var(--texto-terciario);
}


/* ── La card (componente Tarjeta de caso) ──────────────────────────────────
   4/oct: UNA sola card para la Home, la ficha del reto y la galería (antes la
   galería la sobrescribía). Clara con filete; portada con el sello de píxel
   sobre la retícula congelada, muy tenue y ALINEADA al sello (js/textura.js);
   la píldora de votos arriba a la izquierda; cuerpo blanco con avatar + alias,
   título en Inter y la meta al pie.

   Sigue sin haber capturas de los casos (`captura: null`) y siguen sin
   inventarse. Cuando existan, .caso__sello se sustituye por un <img> con la
   misma proporción y el resto de la card no se toca. */
.caso {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  width: var(--tarjeta);
  border: var(--trazo-filete) solid var(--borde-filete);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie-clara);
  overflow: hidden;
  scroll-snap-align: start;
}

.caso__sello { position: relative; flex: none; aspect-ratio: 5 / 3; overflow: hidden; }
.caso__ruido { position: absolute; inset: 0; width: 100%; height: 100%; }
.caso__rejilla {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, var(--pixel-paso));
  grid-auto-rows: var(--pixel-paso);
  justify-content: center;
  align-content: center;
}
.caso__celda { width: var(--pixel-paso); height: var(--pixel-paso); }
.caso__celda[data-tono="1"] { background: var(--pixel-sello-tinta); }
.caso__celda[data-tono="2"] { background: var(--superficie-pagina); }
.caso__celda[data-tono="3"] { background: var(--acento-base); }

/* Píldora de votos sobre el sello; al lado, "fuera de tiempo" cuando toca (R-014). */
.caso__tags { position: absolute; top: var(--espacio-16); left: var(--espacio-16); z-index: 1; display: flex; gap: var(--espacio-8); margin: 0; }
.caso__votos {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--espacio-12) 0 var(--espacio-8);
  border-radius: var(--radio-pildora);
  background: var(--acento-base);
  color: var(--texto-principal);
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
}
.caso__votos:empty { display: none; }

/* País en la esquina opuesta (weekly 13/oct): tres letras en voz de máquina,
   sobre una píldora blanca con filete para que se lea encima del sello. */
.caso__pais {
  position: absolute;
  top: var(--espacio-16);
  right: var(--espacio-16);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 32px;
  margin: 0;
  padding: 0 var(--espacio-12);
  border: var(--trazo-filete) solid var(--borde-filete);
  border-radius: var(--radio-pildora);
  background: var(--superficie-pagina);
  font-family: var(--tipografia-pixel);
  font-size: 20px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-principal);
}

.caso__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--espacio-12);
  padding: var(--espacio-24) var(--espacio-32);
  background: var(--superficie-pagina);
}

/* Avatar de alias: el mismo sello, en miniatura (5×5 celdas de 4 px). */
.avatar {
  display: inline-grid;
  grid-template-columns: repeat(5, var(--espacio-4));
  grid-auto-rows: var(--espacio-4);
  flex: none;
  background: var(--superficie-clara);
}
.avatar--grande { grid-template-columns: repeat(5, var(--espacio-8)); grid-auto-rows: var(--espacio-8); }
.avatar--xl { grid-template-columns: repeat(5, var(--espacio-16)); grid-auto-rows: var(--espacio-16); }
.avatar--xxl { grid-template-columns: repeat(5, var(--pixel-paso)); grid-auto-rows: var(--pixel-paso); }
.avatar [data-tono="1"] { background: var(--pixel-sello-tinta); }
.avatar [data-tono="2"] { background: var(--superficie-pagina); }
.avatar [data-tono="3"] { background: var(--acento-base); }

/* El alias en VT323: un alias es un identificador, y los identificadores los
   dice la máquina. El nombre real solo llega al cierre (regla 1) y va debajo. */
.caso__autor { display: flex; align-items: center; gap: var(--espacio-8); margin: 0; }
.caso__alias { margin: 0; font-family: var(--tipografia-pixel); font-size: 24px; line-height: 1; letter-spacing: .04em; color: var(--texto-acento-sobre-claro); }
.caso__autor-datos { display: grid; gap: var(--espacio-4); min-width: 0; }
/* El nombre real solo existe al cierre (reveal_final): debajo del alias, en texto. */
.caso__nombre { font-size: .8125rem; line-height: 1.3; color: var(--texto-secundario); overflow-wrap: anywhere; }

.caso__titulo { margin: 0; font-family: var(--tipografia-texto); font-weight: 600; font-size: 1rem; line-height: 1.35; letter-spacing: 0; color: var(--texto-principal); }
.caso__abrir { color: inherit; text-decoration: none; }
.caso__abrir::after { content: ''; position: absolute; inset: 0; }   /* toda la card es el enlace */
.caso:hover .caso__titulo { box-shadow: inset 0 -0.14em 0 0 var(--acento-base); }

.caso__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--espacio-8);
  margin: auto 0 0;
  padding-top: var(--espacio-12);
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--texto-terciario);
}
.caso__sep { opacity: .55; }


/* ── CTA a la galería completa ─────────────────────────────────────────────
   Ya no es un garabato al final del módulo: en el frame ajustado es el mismo
   botón sólido con sombra dura que el hero y el manifiesto, arriba a la
   derecha. Los estilos vienen de .cta (css/hero.css) — aquí solo su sitio. */


@media (max-width: 1100px) {
  .galeria__lista { --tarjeta: 300px; }
}

@media (max-width: 620px) {
  .galeria__lista { --tarjeta: min(80vw, 320px); scroll-snap-type: x mandatory; }
  .caso__cuerpo { padding: var(--espacio-24); }
}

/* Regla 14: sin motion, las cards ya están puestas y rectas. */
@media (prefers-reduced-motion: reduce) {
  .caso { transform: none !important; }
  .galeria__lista { scroll-snap-type: none; }
}

/* ── En la ficha del reto (4/oct): el mismo módulo, con menos aire y el título
   en caja normal, como lo puso Christian en Figma. ───────────────────────── */
.galeria--reto { padding-top: clamp(64px, 10vh, 136px); padding-bottom: clamp(64px, 10vh, 96px); }
.galeria--reto .galeria__titulo { font-size: clamp(2.25rem, 5.2vw, 3.5rem); line-height: .98; text-transform: none; }