/* Creative Media Hub — la galería pública de formatos.
 *
 * Aparte de landing.css por la misma razón que esa está aparte de app.css: es
 * una página que se toca seguido —cada formato nuevo entra acá— y conviene poder
 * retocarla sin riesgo de romper nada más. Las clases empiezan con gal-.
 *
 * Reusa las variables de color del sistema: quien mira la galería y después
 * entra a la herramienta tiene que reconocerla.
 */

.gal-pagina { padding-block: 44px 76px; }

/* ─────────────────────────────────────────────────────────── encabezado ── */

.gal-encabezado { max-width: 62ch; }
.gal-encabezado h1 {
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.05; letter-spacing: -.035em;
  margin: 12px 0 0;
}
.gal-bajada {
  margin-top: 16px;
  font-size: clamp(15px, 2vw, 17px); line-height: 1.6;
  color: var(--ink-dim);
}

/* ────────────────────────────────────────────────────────────── filtros ── */

.gal-filtros {
  margin-top: 34px;
  display: flex; flex-direction: column; gap: 18px;
  padding: 20px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius);
}

.gal-fila { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.gal-campo { display: flex; flex-direction: column; gap: 6px; flex: 1 1 190px; min-width: 0; }

.gal-label {
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint);
}

.gal-campo input,
.gal-campo select {
  width: 100%;
  padding: 9px 11px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: inherit; font-size: 13.5px;
}
.gal-campo input:focus-visible,
.gal-campo select:focus-visible,
.gal-chip:focus-visible,
.gal-medida:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}

.gal-grupo { display: flex; flex-direction: column; gap: 9px; }
.gal-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.gal-chip {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent; color: var(--ink-dim);
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.gal-chip:hover { border-color: var(--brand); color: var(--ink); }
.gal-chip.is-on {
  background: var(--brand); border-color: var(--brand); color: #fff;
}

/* La explicación de la familia elegida. Ocupa lugar fijo aunque esté vacía para
   que la grilla no salte cada vez que se cambia de filtro. */
.gal-resumen {
  min-height: 1.4em;
  font-size: 12.8px; color: var(--ink-faint); margin: 0;
}

.gal-cuenta {
  margin: 22px 0 14px;
  font-size: 13px; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────── grilla ── */

.gal-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px;
  align-items: start;
}

.gal-tarjeta {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

/* La caja de la pieza. El alto lo pone el script según la escala de cada
   tamaño, porque un 970x90 y un 300x1050 no pueden ocupar lo mismo. */
.gal-vista {
  /* Centrada en los dos ejes. El alto de la caja lo fija el script a la medida
     de la pieza, así que centrar y apoyar arriba dan lo mismo —salvo en los
     banners bajos, donde manda el min-height y con `start` quedaba pegada
     arriba con setenta píxeles de aire abajo. */
  display: grid; place-items: center;
  min-height: 150px;
  padding: 14px;
  background:
    linear-gradient(150deg, var(--panel-2), var(--bg-soft));
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
/* El soporte ocupa el tamaño YA ESCALADO, que es lo que el grid tiene que
   centrar. El iframe de adentro sigue midiendo lo real y se achica con una
   escala, que no ocupa lugar. */
.gal-soporte { position: relative; }
.gal-marco {
  border: 0; display: block;
  /* Desde la esquina y no desde el centro: con el origen en el centro, un
     iframe más ancho que la caja quedaba anclado a la mitad de SUS píxeles
     —485 de 970— y la pieza se iba a la derecha. */
  transform-origin: top left;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,.38);
}

.gal-cuerpo { padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 10px; }
.gal-cuerpo h3 {
  font-size: 16px; display: flex; align-items: center; gap: 8px;
  margin: 0;
}
.gal-code {
  flex: none;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--brand); background: var(--brand-soft);
  border-radius: 5px; padding: 2px 6px;
}
.gal-tagline { margin: 0; font-size: 13.2px; line-height: 1.45; color: var(--ink-dim); }

/* Los tamaños. Es la lista completa y no un resumen: quien planifica busca la
   medida exacta que tiene en el plan, no "varios tamaños". */
.gal-medidas { display: flex; flex-wrap: wrap; gap: 5px; }
.gal-medida {
  padding: 3px 7px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: transparent; color: var(--ink-faint);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px; font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.gal-medida:hover { color: var(--ink); border-color: var(--brand); }
.gal-medida.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--ink); }

.gal-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.gal-etiqueta {
  font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
}
.gal-etiqueta-tenue {
  background: var(--panel-2); color: var(--ink-faint);
  font-weight: 600;
}

.gal-vacio, .gal-error {
  margin: 30px 0; font-size: 14.5px; color: var(--ink-dim);
}

/* ─────────────────────────────────────────────────────────────── cierre ── */

.gal-cierre {
  margin-top: 64px; padding-top: 34px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.gal-cierre h2 { font-size: clamp(22px, 3.4vw, 32px); }
.gal-cierre p {
  max-width: 52ch; margin: 14px auto 20px;
  color: var(--ink-dim); font-size: 15.5px;
}

@media (max-width: 640px) {
  .gal-filtros { padding: 15px; }
  .gal-grilla { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .gal-chip, .gal-medida { transition: none; }
}