/* Run&Gui, pagina de comunidad (P2 "Pista"). Va DESPUES de site.css y usa sus tokens, cabecera, botones y pie.
   La genera _herramientas/web/generar.mjs; ver _herramientas/web/FOTOS.md.
   Contrastes (medidos): on-ink sobre tinta 12,93:1; on-ink-2 sobre tinta 8,38:1; eyebrow accent-hi sobre tinta 6,82:1;
   ink sobre paper 15,5:1; ink-2 sobre paper 9,7:1; muted sobre paper 5,9:1 y sobre arena 5,13:1;
   borde de la casilla (on-ink) 12,93:1 y anillo de foco (accent) 5,10:1 sobre tinta. */

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.comunidad { overflow-x: hidden; }
.comunidad :focus-visible { outline-color: var(--ink); }
.com-intro :focus-visible, .com-final :focus-visible, .top :focus-visible { outline-color: var(--accent); }

/* Entrada: banda de tinta con el carrusel dentro */
.com-intro { background: var(--ink); color: var(--on-ink); padding: var(--s-7) 0 var(--s-7); }
.com-intro h1 { font-size: var(--t-h1); line-height: .95; letter-spacing: .005em; }
.com-intro .sub { font-size: var(--t-lg); color: var(--on-ink-2); margin: var(--s-5) 0 0; max-width: 28em; }
.com-intro .btn-ghost { color: var(--on-ink); border-color: var(--on-ink); }
.com-intro .btn-ghost:hover { background: rgba(245, 236, 220, .1); }

/* ---------- Carrusel (sin JS) ----------
   Por defecto (prefers-reduced-motion: reduce, o navegador sin la media query): reticula estatica, sin control.
   Con prefers-reduced-motion: no-preference: una o dos filas en bucle; cada fila lleva su serie dos veces y se
   desplaza -50%, asi el salto es invisible. La separacion va en margin-right de cada foto para que -50% sea exacto. */
.com { --w: 150px; --g: 10px; margin-top: var(--s-7); }
/* Estatica: una sola reticula con todas las fotos (las filas y series desaparecen como cajas), sin huerfanas por fila */
.car { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; }
.fila, .set { display: contents; }
.set + .set { display: none; }
.car picture { display: contents; }
.car-foto {
  display: block; flex: none; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: #3a3430; border-radius: 4px;
  width: min(var(--w), calc((100vw - 16px) / 3 - var(--g)));  /* estatica: 3 columnas en movil */
  margin: 0 calc(var(--g) / 2) var(--g);
}
/* Fundador con etiqueta (config fundadorEnCarrusel.presentacion = primera-con-etiqueta): etiqueta de tinta sobre la foto */
.car-fund { position: relative; display: block; flex: none; }
.car-fund .car-foto { margin: 0 calc(var(--g) / 2) var(--g); }
.car-etq {
  position: absolute; left: calc(var(--g) / 2 + 6px); right: calc(var(--g) / 2 + 6px); bottom: calc(var(--g) + 6px);
  background: var(--ink); color: var(--on-ink); border: 1px solid var(--on-ink-2); border-radius: 3px;
  font: 700 var(--t-xs)/1.2 var(--f-display); letter-spacing: .08em; text-transform: uppercase; padding: 5px 7px; text-align: center;
}

/* Control de pausa: casilla nativa (Tab y Espacio; el lector dice "Pausar movimiento, casilla"). Va antes del
   carrusel en el DOM: ~ alcanza al carrusel y el control es el primero en el orden de foco. */
.pausa-in { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pausa-lb, .pausa-in { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .car { display: block; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
  .fila { display: flex; flex-wrap: nowrap; justify-content: flex-start; width: max-content; margin-bottom: var(--g);
    animation: izq var(--t, 90s) linear infinite; }
  .fila-b { animation-name: der; }
  .set { display: flex; flex-wrap: nowrap; }
  .set + .set { display: flex; }
  .car-foto, .car-fund .car-foto { width: var(--w); margin: 0 var(--g) 0 0; }
  .car-etq { left: 6px; right: calc(var(--g) + 6px); bottom: 6px; }

  /* Pausa: control persistente (WCAG 2.2.2) y, como comodidad, hover y foco dentro del carrusel. */
  .pausa-in:checked ~ .car .fila,
  .car:hover .fila,
  .car:focus-within .fila { animation-play-state: paused; }

  .pausa-in { display: block; }
  .pausa-lb {
    display: flex; align-items: center; gap: 10px; width: max-content; margin: 0 var(--gutter) var(--s-4) auto;
    min-height: 44px; padding: 8px 14px; border-radius: 4px; cursor: pointer;
    font: 700 var(--t-sm)/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--on-ink);
    -webkit-user-select: none; user-select: none;
  }
  .pausa-lb::before {
    content: ""; width: 18px; height: 18px; flex: none; border: 2px solid var(--on-ink); border-radius: 3px;
    background: var(--ink) no-repeat center / 12px 12px;
  }
  .pausa-in:checked ~ .pausa-lb::before {
    background-color: var(--on-ink);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='%232a2521' stroke-width='2'/%3E%3C/svg%3E");
  }
  .pausa-lb:hover { background: rgba(245, 236, 220, .1); }
  .pausa-in:focus-visible ~ .pausa-lb { outline: 2px solid var(--accent); outline-offset: 2px; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1312px) {
  .pausa-lb { margin-right: calc((100% - 1280px) / 2 + var(--gutter)); }
}
@keyframes izq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes der { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ---------- Galeria 3: foto, nombre de pila, objetivo y frase ---------- */
.gal { padding: var(--section) 0 var(--s-7); }
.gal h2 { font-size: var(--t-h2); line-height: .95; margin-bottom: var(--s-7); }
.pup-gal { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.pup-card { background: var(--paper); border-radius: 4px; overflow: hidden; box-shadow: 0 1px 0 rgba(42, 37, 33, .12); }
.pup-foto { position: relative; aspect-ratio: 4 / 5; background: #e6dccb; overflow: hidden; }
.pup-foto picture { display: contents; }
.pup-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pup-etq { position: absolute; left: 10px; top: 10px; background: var(--ink); color: var(--on-ink); font: 700 var(--t-xs)/1 var(--f-display); letter-spacing: .12em; padding: 6px 8px; border-radius: 3px; }
.pup-body { padding: var(--s-5) var(--s-5) var(--s-6); }
.pup-card h3 { font-size: var(--t-h3); line-height: 1; letter-spacing: .01em; margin: 0 0 var(--s-2); }
.pup-meta { color: var(--muted); font-size: var(--t-sm); margin: 0 0 var(--s-4); }
.pup-quote { margin: 0; }
.pup-quote p { margin: 0; font-size: var(--t-md); color: var(--ink-2); }
.pup-tr { display: block; margin-top: var(--s-2); font-size: var(--t-xs); color: var(--muted); }

/* Cierre */
.com-final { background: var(--ink); color: var(--on-ink); padding: var(--section) 0; }
.com-final h2 { font-size: var(--t-h2); line-height: .95; }
.com-final p { color: var(--on-ink-2); font-size: var(--t-lg); margin: var(--s-4) 0 0; max-width: 26em; }
.com-final .btn-ghost { color: var(--on-ink); border-color: var(--on-ink); }
.com-final .btn-ghost:hover { background: rgba(245, 236, 220, .1); }

/* Banda de vista previa (solo vistas previas, nunca en la pagina publicada) */
.vp { background: var(--ink); color: var(--on-ink); font-size: 13px; text-align: center; padding: 8px 16px; border-bottom: 1px solid #4a4236; }

@media (min-width: 760px) {
  .com { --w: 240px; --g: 16px; }
  .com-intro { padding: var(--s-9) 0 var(--s-8); }
  .pup-gal[data-n="1"] { max-width: 760px; }
  .pup-gal[data-n="1"] .pup-card { display: grid; grid-template-columns: 300px 1fr; align-items: center; }
  .pup-gal[data-n="1"] .pup-body { padding: var(--s-6) var(--s-7); }
  .pup-gal[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 360px)); }
  .pup-gal[data-n="3"], .pup-gal[data-n="many"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Notas: bajo el carrusel (sobre tinta) y bajo las fichas (sobre arena) */
.car-nota { margin: var(--s-5) 0 0; font-size: var(--t-sm); color: var(--on-ink-2); max-width: 44em; }
.car-nota a { color: var(--on-ink); }
.gal-sub { margin: calc(-1 * var(--s-5)) 0 var(--s-6); font-size: var(--t-lg); color: var(--ink-2); max-width: 30em; }
.gal-nota { margin: var(--s-6) 0 0; font-size: var(--t-sm); color: var(--muted); max-width: 44em; }
.gal-nota a { color: var(--ink); }
.gal { padding-bottom: var(--section); }