/* RGGTRN
   Escala de @emilioocelotl/tokens; paleta oscura sin acento. */

:root {
  --font-display: 'Tektur', sans-serif;
  --font-body: 'Inconsolata', ui-monospace, monospace;

  --text-xs:   10.5px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   21px;
  --text-xl:   28px;
  --text-2xl:  37px;
  --text-3xl:  50px;

  --leading-snug: 1.1;
  --leading-body: 1.65;
  --tracking-wider:  0.10em;
  --tracking-widest: 0.14em;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --color-bg:       #000;
  --color-surface:  #0d0d0d;
  --color-text:     #e8e8e8;
  --color-text-mid: rgba(255, 255, 255, 0.55);
  --color-text-dim: rgba(255, 255, 255, 0.32);
  --color-border:   rgba(255, 255, 255, 0.14);

  color-scheme: dark;  /* controles nativos (audio) en oscuro */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Idioma: <html lang="es|en"> esconde el otro */
html[lang="es"] [lang="en"],
html[lang="en"] [lang="es"] { display: none; }

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  background: var(--color-bg);
  color: var(--color-text);
}

a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--color-text-mid); }
img { display: block; max-width: 100%; height: auto; }

/* Barra */

.top-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-3) 5%;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base);
}

/* El wordmark chico reutiliza los trazos de la portada (<use href="#wm-trazos">) */
.top-bar .marca { display: block; color: var(--color-text); }
.top-bar .marca svg { display: block; height: 32px; width: auto; fill: currentColor; }

/* Con JS, el wordmark chico sólo aparece cuando el grande de la portada ya no se ve */
.js .top-bar .marca { opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; }
.js .top-bar.con-marca .marca { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .js .top-bar .marca { transition: none; }
}

.top-bar nav {
  display: flex;
  gap: var(--space-4);
  margin-left: auto;
  overflow-x: auto;
  white-space: nowrap;
}

.top-bar nav a { text-decoration: none; color: var(--color-text-mid); }
.top-bar nav a:hover { color: var(--color-text); }

.language-toggle {
  font: inherit;
  letter-spacing: inherit;
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 2px var(--space-2);
  cursor: pointer;
}

/* Portada */

.portada {
  position: relative;
  min-height: min(78svh, 760px);
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}

.portada img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  filter: grayscale(1) brightness(0.42);
}

.portada .texto { position: relative; padding: var(--space-8) 5%; }

/* Título: el wordmark dibujado a mano, vectorizado; casi todo el ancho */
.portada h1 { line-height: 0; }

.portada .wm {
  display: block;
  width: min(78vw, 1000px);
  height: auto;
  margin: 0 auto;
  fill: currentColor;
}

.portada .lema { font-size: var(--text-lg); margin-top: var(--space-8); }


/* Secciones */

main section {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--space-16) 5% 0;
}

main section.ancha { max-width: 1200px; }

h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-6);
}

h3 {
  font-size: var(--text-md);
  margin: var(--space-8) 0 var(--space-3);
}

p + p { margin-top: var(--space-4); }
.nota { color: var(--color-text-mid); font-size: var(--text-base); }

/* Banda: los nombres como arreglo de SuperCollider; la sintaxis atenuada, los nombres en claro */
.integrantes { margin-bottom: var(--space-6); font-size: var(--text-md); color: var(--color-text-mid); }
.integrantes code { font-family: inherit; }
.integrantes .nombres { color: var(--color-text); }
.integrantes .nombres span { white-space: nowrap; }

/* Fechas */

.fechas { list-style: none; }

.fechas li {
  display: grid;
  grid-template-columns: 11em 1fr auto;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.fechas .cuando { color: var(--color-text-mid); }
.fechas .estado { color: var(--color-text-dim); font-size: var(--text-sm); text-align: right; }
.fechas li.tentativa .que { color: var(--color-text-mid); }

.fechas.archivo li {
  grid-template-columns: 7em 1fr;
  font-size: var(--text-base);
  border-bottom: 0;
  padding: var(--space-1) 0;
}
.fechas.archivo li.nuevo-año { border-top: 1px solid var(--color-border); padding-top: var(--space-3); margin-top: var(--space-2); }
.fechas.archivo li.nuevo-año:first-child { border-top: 0; margin-top: 0; }

/* Escuchar */

.pistas { list-style: none; }

.pistas li {
  display: grid;
  grid-template-columns: 12em 1fr;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-2) 0;
}

.pistas audio { width: 100%; height: 36px; }

.soundcloud { display: block; width: 100%; border: 0; background: var(--color-surface); }

/* Videos */

.videos {
  display: grid;
  gap: var(--space-8);
}

.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.video p { font-size: var(--text-sm); color: var(--color-text-mid); margin-top: var(--space-2); }

/* Fotos */

.fotos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.fotos button {
  display: block;
  border: 0;
  padding: 0;
  background: var(--color-surface);
  cursor: zoom-in;
}

.fotos img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.2s;
}

.fotos button:hover img,
.fotos button:focus-visible img { filter: none; }

/* Sin cursor (pantallas táctiles) no hay hover: a color de una vez */
@media (hover: none) {
  .fotos img { filter: none; }
}

#visor {
  margin: auto;
  max-width: 100vw;
  max-height: 100vh;
  background: none;
  border: 0;
  color: var(--color-text);
}

#visor::backdrop { background: rgba(0, 0, 0, 0.92); }

#visor figure { padding: var(--space-12) var(--space-16) var(--space-4); }

#visor img {
  max-width: calc(100vw - 2 * var(--space-16));
  max-height: calc(100vh - 2 * var(--space-12) - var(--space-8));
  width: auto;
  margin: 0 auto;
}

#visor figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-mid);
  text-align: center;
}

#visor button {
  position: fixed;
  font: inherit;
  font-size: var(--text-xl);
  background: none;
  border: 0;
  color: var(--color-text-mid);
  cursor: pointer;
  padding: var(--space-4);
}

#visor button:hover,
#visor button:focus-visible { color: var(--color-text); outline: none; }
#visor .anterior { left: 0; top: 50%; transform: translateY(-50%); }
#visor .siguiente { right: 0; top: 50%; transform: translateY(-50%); }
#visor .cerrar { right: 0; top: 0; }

/* Flyers */

.flyers {
  columns: 4 200px;
  column-gap: var(--space-4);
}

.flyers img {
  width: 100%;
  margin-bottom: var(--space-4);
  break-inside: avoid;
}

/* Contacto */

.correo {
  display: inline-block;
  font-size: var(--text-xl);
  font-weight: 700;
}

/* Pie */

footer {
  margin-top: var(--space-24);
  padding: var(--space-8) 5%;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: center;
  font-size: var(--text-base);
}

footer a { text-decoration: none; color: var(--color-text-mid); }
footer a:hover { color: var(--color-text); }

@media screen and (max-width: 768px) {
  .top-bar { flex-wrap: wrap; row-gap: var(--space-2); }
  .top-bar .language-toggle { margin-left: auto; }
  .top-bar nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    overflow: visible;
    white-space: normal;
  }
  .fechas li { grid-template-columns: 1fr auto; }
  .fechas .cuando { grid-column: 1 / -1; }
  .pistas li { grid-template-columns: 1fr; gap: var(--space-2); }
}

@media screen and (max-width: 480px) {
  .fotos { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  #visor figure { padding: var(--space-12) var(--space-2) var(--space-4); }
  #visor img { max-width: calc(100vw - 2 * var(--space-2)); }
  #visor .anterior, #visor .siguiente { top: auto; bottom: 0; transform: none; }
  .fechas.archivo li { grid-template-columns: 4em 1fr; gap: var(--space-2); }
}