/* ───────────────────────────────────────────────────────────────
   panchomolina-beat.cl

   El sitio es una funda de disco. Impresión a dos tintas sobre
   cartulina: negro cálido y cobalto, sobre papel crema de los años
   sesenta. Las fotos se duotonizan con esas mismas dos tintas, así
   que cualquier archivo entra al sistema sin importar de dónde venga.

   El titular grande lleva el eco cobalto unos píxeles abajo: es el
   desregistro de las prensas baratas de la época, y es el único
   gesto llamativo del sitio. Todo lo demás va quieto.
   ─────────────────────────────────────────────────────────────── */

:root {
  /* Paleta oscura. --papel es el fondo y --tinta es lo que se imprime encima,
     así que invertir el sitio entero es cambiar estos dos valores. La paleta
     clara original queda anotada abajo por si quieren volver. */
  --papel:   #0F0D0C;   /* claro: #E9E3D2 */
  --papel-2: #1A1614;   /* claro: #DED7C2 */
  --tinta:   #EFE9DC;   /* claro: #16120E */
  --tinta-2: #A79E92;   /* claro: #4A443B */
  --acento:  #D9A648;   /* bronce de platillo. claro: #1B4F96 cobalto */
  --linea:   rgba(239, 233, 220, .22);

  --env: 1180px;
  --display: "Archivo", system-ui, sans-serif;
  --texto: "Newsreader", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-optical-sizing: auto;
  font-size: 19px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; display: block; }

a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--tinta); }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--acento); color: var(--papel);
  padding: .7rem 1.1rem; font-family: var(--display); font-weight: 700;
}
.saltar:focus { left: 0; }

.env { width: min(100% - 2.4rem, var(--env)); margin-inline: auto; }

/* Titulares en Archivo condensada y pesada, apretados, como el nombre
   del solista en la tapa. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 78;
  line-height: .96;
  letter-spacing: -.01em;
  margin: 0 0 .5rem;
  text-wrap: balance;
}

p { margin: 0 0 1.05rem; }

/* ─────────────────────────── el pulso (swing a dos tintas) */

.pulso, .pulso-pie { width: 100%; height: 30px; }
.pulso .grave, .pulso-pie .grave { fill: var(--tinta); }
.pulso .agudo, .pulso-pie .agudo { fill: var(--acento); }
.pulso { margin-block: .5rem; }
.pulso-pie { height: 22px; opacity: .5; }

/* ─────────────────────────── cabecera */

.tope {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--papel) 93%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--tinta);
}
.tope-int { display: flex; align-items: center; gap: 1.5rem; min-height: 66px; }

.marca { text-decoration: none; color: var(--tinta); display: flex; align-items: baseline; gap: .55rem; }
.marca-nombre {
  font-family: var(--display); font-weight: 900;
  font-variation-settings: "wdth" 68;
  font-size: 1.4rem; letter-spacing: .01em; text-transform: uppercase;
}
.marca-rol { font-size: .82rem; color: var(--tinta-2); font-style: italic; }
.marca:hover .marca-nombre { color: var(--acento); }

.nav { margin-left: auto; }
.nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.nav a {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "wdth" 88;
  font-size: .88rem; text-decoration: none; color: var(--tinta);
  padding-block: .35rem; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--acento); }
.nav a[aria-current="page"] { border-bottom-color: var(--acento); }

.idiomas { display: flex; }
.idiomas a {
  font-family: var(--display); font-weight: 700; font-size: .74rem;
  text-decoration: none; color: var(--tinta);
  padding: .28rem .5rem; border: 1.5px solid var(--tinta);
}
.idiomas a + a { border-left: 0; }
.idiomas a[aria-current="true"] { background: var(--tinta); color: var(--papel); }

.menu-btn {
  display: none; background: none; border: 1.5px solid var(--tinta);
  padding: .55rem .5rem; cursor: pointer;
}
.menu-btn span { display: block; width: 18px; height: 2px; background: var(--tinta); margin: 3px 0; }

/* ─────────────────────────── botones */

.btn {
  display: inline-block; text-decoration: none;
  font-family: var(--display); font-weight: 700;
  font-variation-settings: "wdth" 88;
  font-size: .93rem; letter-spacing: .01em;
  padding: .68rem 1.4rem;
  background: var(--tinta); color: var(--papel);
  border: 2px solid var(--tinta); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn:hover { background: var(--acento); border-color: var(--acento); color: var(--papel); }
.btn.hueco { background: transparent; color: var(--tinta); }
.btn.hueco:hover { background: var(--tinta); color: var(--papel); }
.btn.grande { padding: .85rem 1.8rem; font-size: 1.02rem; }

/* ─────────────────────────── portada: la tapa del disco */

.portada { padding: clamp(2.5rem, 6vw, 4.5rem) 0 0; }
.portada-int {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 3.5rem); align-items: end;
}
.portada h1 {
  font-size: clamp(3.2rem, 12vw, 8.6rem);
  font-weight: 900;
  font-variation-settings: "wdth" 64;
  letter-spacing: -.012em;
  line-height: .84;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  text-shadow: 3px 3px 0 var(--acento);   /* el desregistro */
}
.frase {
  font-family: var(--texto); font-style: italic; font-weight: 400;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.32;
  color: var(--acento); max-width: 26ch; margin-bottom: 1.2rem;
}
.lead { color: var(--tinta-2); max-width: 48ch; font-size: 1.02rem; }
.cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.7rem; }

/* Las cifras, como los datos técnicos impresos al pie de la contratapa. */
.cifras {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.cifra { padding: 1.2rem 1.1rem 1.2rem 0; }
.cifra + .cifra { border-left: 1px solid var(--linea); padding-left: 1.1rem; }
.cifra strong {
  display: block; font-family: var(--display); font-weight: 900;
  font-variation-settings: "wdth" 70;
  font-size: clamp(1.15rem, 2.1vw, 1.5rem); line-height: 1.12;
  color: var(--acento); font-variant-numeric: lining-nums;
  text-wrap: balance;
}
.cifra span { display: block; margin-top: .3rem; font-size: .84rem; color: var(--tinta-2); }

/* ─────────────────────────── fotos duotonizadas */

.marco { overflow: hidden; background: var(--acento); position: relative; }
.marco img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.22) brightness(1.02);
  mix-blend-mode: screen;
}
.marco::after {
  content: ""; position: absolute; inset: 0;
  background: var(--tinta); mix-blend-mode: multiply;
  opacity: .18; pointer-events: none;
}
.marco-hero { aspect-ratio: 1 / 1; }     /* cuadrada, como la funda */
.marco-retrato { aspect-ratio: 4 / 3; }

/* Hueco mientras no hay archivo. */
.marco-vacio {
  background: var(--papel-2);
  border: 2px solid var(--tinta);
  background-image: repeating-linear-gradient(
    -45deg, rgba(239,233,220,.06) 0 8px, transparent 8px 16px);
}
.marco-vacio::after {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 2px solid var(--acento); border-radius: 50%;
  background: none; mix-blend-mode: normal; opacity: 1;
}

/* ─────────────────────────── secciones */

.seccion { padding: clamp(2.8rem, 6vw, 4.5rem) 0; }
.seccion.oscura { background: var(--tinta); color: var(--papel); }
.seccion.oscura .destacar { color: var(--papel); }
.seccion.oscura .marco-vacio { border-color: var(--papel); }
.seccion.oscura h2, .seccion.oscura h3, .seccion.oscura .destacar { color: var(--papel); }
.seccion.oscura p { color: color-mix(in srgb, var(--papel) 78%, transparent); }
.seccion.oscura .btn { background: var(--papel); border-color: var(--papel); color: var(--tinta); }
.seccion.oscura .btn:hover { background: var(--acento); border-color: var(--acento); color: var(--papel); }

.encabezado { padding: clamp(2.5rem, 7vw, 4rem) 0 clamp(1.2rem, 3vw, 2rem); }
.encabezado h1 {
  font-size: clamp(2.6rem, 8vw, 5.4rem);
  font-weight: 900;
  font-variation-settings: "wdth" 66;
  text-transform: uppercase; line-height: .86;
  text-shadow: 3px 3px 0 var(--acento);
}
.encabezado .lead { max-width: 56ch; margin-top: 1.1rem; }

.tit-seccion { margin-bottom: 2rem; max-width: 52ch; }
.tit-seccion h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); text-transform: uppercase; }
.tit-seccion p { color: var(--tinta-2); margin: 0; }

.dos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); }
.dos-bio { grid-template-columns: .8fr 1.2fr; align-items: start; }
.dos-book { grid-template-columns: 1.05fr .95fr; align-items: start; }

/* La biografía se maqueta como notas de contratapa: serif, medida corta,
   entradilla marcada, y a dos columnas cuando hay ancho. */
.prosa { max-width: 66ch; }
.prosa p { margin-bottom: 1rem; }
.prosa-larga { column-gap: 2.4rem; }
.prosa-larga p { color: var(--tinta); font-size: 1.02rem; }
.destacar {
  font-family: var(--display); font-weight: 700;
  font-variation-settings: "wdth" 86;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem); line-height: 1.18;
  margin-bottom: 1.4rem;
}
.prosa-larga .destacar { border-left: 4px solid var(--acento); padding-left: 1rem; }

.columna { display: grid; gap: 1.4rem; }

.panel { border: 2px solid var(--tinta); padding: 1.5rem; background: var(--papel-2); }
.panel h2 { font-size: 1.1rem; text-transform: uppercase; margin-bottom: .9rem; }

.lista { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.lista li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .5rem 0; border-bottom: 1px solid var(--linea); font-size: .96rem;
}
.lista li:last-child { border-bottom: 0; }
.lista .anos { color: var(--tinta-2); font-size: .86rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lista.simple li { display: list-item; list-style: none; padding-left: 1.2rem; position: relative; }
.lista.simple li::before {
  content: ""; position: absolute; left: 0; top: .8em;
  width: 6px; height: 6px; background: var(--acento);
}

/* ─────────────────────────── tarjetas de proyecto */

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); border-top: 2px solid var(--tinta); }
.tarjeta { padding: 1.5rem 1.4rem 1.5rem 0; }
.tarjeta + .tarjeta { border-left: 1px solid var(--linea); padding-left: 1.4rem; }
.tarjeta h3 { font-size: 1.35rem; text-transform: uppercase; }
.tarjeta-meta { color: var(--acento); font-size: .84rem; margin-bottom: .7rem; font-variant-numeric: tabular-nums; }
.tarjeta p:last-child { margin-bottom: 0; color: var(--tinta-2); font-size: .97rem; }

/* ─────────────────────────── proyectos */

.proyectos { display: grid; }
.proyecto {
  display: grid; grid-template-columns: .75fr 1.25fr; gap: 2rem;
  padding: 1.9rem 0; border-top: 2px solid var(--tinta);
}
.proyecto:last-child { border-bottom: 2px solid var(--tinta); }
.proyecto h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); text-transform: uppercase; }
.proyecto .anos { color: var(--acento); font-size: .92rem; margin: 0; font-variant-numeric: tabular-nums; }
.proyecto .rol { font-style: italic; margin-bottom: .5rem; }
.proyecto-cuerpo p:last-child { color: var(--tinta-2); margin-bottom: 0; }
.integrantes {
  list-style: none; margin: 1rem 0 0; padding: .9rem 0 0;
  border-top: 1px solid var(--linea); display: grid; gap: .3rem;
}
.integrantes li { font-size: .95rem; }
.proyecto.inactivo h2 { color: var(--tinta-2); }
.proyecto.inactivo .anos { color: var(--tinta-2); }

/* ─────────────────────────── discografía: el catálogo del sello */

.grupos { display: grid; gap: 2.8rem; }
.grupo h2 {
  font-size: 1.25rem; text-transform: uppercase;
  padding-bottom: .5rem; border-bottom: 3px solid var(--tinta); margin-bottom: 0;
}
.g-bronce h2 { border-bottom-color: var(--acento); }

.discos { list-style: none; margin: 0; padding: 0; }
.discos li {
  display: grid; grid-template-columns: 5rem minmax(0, 20rem) 1fr;
  gap: 1.2rem; align-items: baseline;
  padding: .78rem 0; border-bottom: 1px solid var(--linea);
}
.discos .ano {
  font-family: var(--display); font-weight: 800;
  font-variation-settings: "wdth" 76;
  font-size: 1.1rem; color: var(--acento);
  font-variant-numeric: tabular-nums lining-nums;
}
.disco-t {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "wdth" 92;
  font-size: 1.06rem;
}
.disco-n { color: var(--tinta-2); font-size: .92rem; font-style: italic; }
.disco-n a { color: var(--tinta-2); text-decoration-color: var(--acento); }
.disco-n a:hover { color: var(--acento); }
.grupo h2 a { color: inherit; text-decoration: none; }
.grupo h2 a:hover { color: var(--acento); }

.rev {
  display: inline-grid; place-items: center;
  width: 1.2em; height: 1.2em; margin-left: .45em;
  border: 1.5px solid var(--acento); border-radius: 50%;
  color: var(--acento); font-size: .64em; font-weight: 800;
  vertical-align: .12em; cursor: help;
}

/* ─────────────────────────── galería */

.rejilla-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4rem; }
.foto { margin: 0; }
/* La miniatura va siempre en 4:5. La foto no se deforma: se encuadra con
   object-fit y el visor muestra el original completo. */
.ampliar {
  display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
  padding: 0; margin: 0; cursor: zoom-in;
  background: var(--papel-2); border: 2px solid var(--tinta);
  transition: border-color .15s ease;
}
.ampliar:hover { border-color: var(--acento); }
.foto img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 32%;
  filter: grayscale(1) contrast(1.2);
}

/* Visor */
.visor {
  border: 0; padding: 0; max-width: min(94vw, 900px); max-height: 94vh;
  background: var(--papel); color: var(--tinta);
  border: 2px solid var(--acento);
}
.visor::backdrop { background: rgba(6, 5, 4, .92); }
.visor img { width: 100%; height: auto; max-height: 80vh; object-fit: contain; filter: grayscale(1) contrast(1.15); }
.visor-pie { margin: 0; padding: .8rem 1rem 1.1rem; font-size: .9rem; color: var(--tinta-2); font-style: italic; }
.visor-cerrar {
  position: absolute; top: .6rem; right: .6rem; z-index: 2;
  font-family: var(--display); font-weight: 700; font-size: .78rem;
  text-transform: uppercase; cursor: pointer;
  background: var(--papel); color: var(--tinta);
  border: 1.5px solid var(--tinta); padding: .4rem .8rem;
}
.visor-cerrar:hover { background: var(--acento); border-color: var(--acento); color: var(--papel); }
.foto figcaption { font-size: .88rem; color: var(--tinta-2); margin-top: .5rem; font-style: italic; }
.foto .credito { display: block; font-style: normal; font-size: .8rem; opacity: .8; }
.creditos-galeria {
  width: min(100% - 2.4rem, var(--env)); margin: 0 auto;
  padding-top: 1.6rem; border-top: 1px solid var(--linea);
  font-size: .92rem; color: var(--tinta-2);
}
.creditos-galeria strong { color: var(--tinta); font-weight: 400; }

.vacio {
  border: 2px dashed var(--linea); padding: 3rem 1.5rem;
  text-align: center; color: var(--tinta-2); max-width: 60ch;
  margin-inline: auto; font-style: italic;
}

/* ─────────────────────────── booking */

.dos-book h2 { font-size: 1.3rem; text-transform: uppercase; margin-top: 2rem; }
.dos-book h2:first-child { margin-top: 0; }

.formatos { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 2px solid var(--tinta); }
.formatos li { padding: 1rem 0; border-bottom: 1px solid var(--linea); }
.formatos h3 { font-size: 1.1rem; text-transform: uppercase; margin-bottom: .25rem; }
.formatos p { margin: 0; color: var(--tinta-2); font-size: .97rem; }

.descargas { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.form { margin-top: 1.5rem; }
.campo { margin-bottom: 1rem; }
.campo label {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: .8rem; text-transform: uppercase; color: var(--tinta-2); margin-bottom: .3rem;
}
.campo input, .campo textarea {
  width: 100%; font-family: var(--texto); font-size: 1rem;
  background: var(--papel); color: var(--tinta);
  border: 1.5px solid var(--tinta); border-radius: 0; padding: .6rem .75rem;
}
.campo input:focus, .campo textarea:focus { border-color: var(--acento); border-width: 2px; outline: none; }
.campo textarea { resize: vertical; }
.tarro { display: none; }
.nota { font-size: .88rem; color: var(--tinta-2); margin: 0; font-style: italic; }

/* ─────────────────────────── pie */

.pie {
  background: var(--papel); color: var(--tinta);
  border-top: 2px solid var(--tinta); margin-top: 3rem;
}
.pie-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem; padding: 2.6rem 0 2rem; }
.pie h2 { font-size: .92rem; text-transform: uppercase; margin-bottom: .7rem; color: var(--tinta); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.pie a { font-size: .95rem; color: var(--tinta-2); text-decoration: none; }
.pie a:hover { color: var(--acento); text-decoration: underline; }
.pie-nombre {
  font-family: var(--display); font-weight: 900;
  font-variation-settings: "wdth" 66;
  font-size: 1.9rem; text-transform: uppercase; margin-bottom: .4rem;
}
.pie-marca p { color: var(--tinta-2); font-size: .95rem; max-width: 34ch; }
.pie-base {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  padding: 1rem 0 2rem; border-top: 1px solid var(--linea);
  font-size: .82rem; color: var(--tinta-2);
}

/* ─────────────────────────── responsive */

@media (min-width: 900px) {
  .prosa-larga { columns: 2; }
  .prosa-larga .destacar { column-span: all; }
}

@media (max-width: 960px) {
  .menu-btn { display: block; order: 3; }
  .idiomas { order: 2; margin-left: auto; }
  .nav { order: 4; flex-basis: 100%; margin-left: 0; display: none; padding-bottom: 1rem; }
  .nav.abierto { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav li { border-top: 1px solid var(--linea); }
  .nav a { display: block; padding: .75rem 0; font-size: 1rem; }
  .tope-int { flex-wrap: wrap; }
  .marca-rol { display: none; }

  .portada-int { grid-template-columns: 1fr; align-items: start; }
  .portada h1 { text-shadow: 3px 3px 0 var(--acento); }
  .marco-hero { aspect-ratio: 4 / 3; }
  .dos, .dos-bio, .dos-book { grid-template-columns: 1fr; }
  .tarjetas { grid-template-columns: 1fr; }
  .tarjeta { padding-right: 0; }
  .tarjeta + .tarjeta { border-left: 0; border-top: 1px solid var(--linea); padding-left: 0; }
  .proyecto { grid-template-columns: 1fr; gap: .7rem; }
  .directos { grid-template-columns: 1fr; }
  .directo { padding-right: 0; }
  .directo + .directo { border-left: 0; border-top: 1px solid var(--linea); padding-left: 0; }
  .pie-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  body { font-size: 18px; }
  .cifras { grid-template-columns: repeat(2, 1fr); }
  .cifra:nth-child(3) { border-left: 0; padding-left: 0; }
  .cifra:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .discos li { grid-template-columns: 4rem 1fr; }
  .discos .disco-n { grid-column: 2; }
  .portada h1 { text-shadow: 2px 2px 0 var(--acento); }
}