/* =============================================================================
   PartituraLibre — direccion visual "Nocturna Dorada".
   Familia con PianoLibre: el oro sobre tinta ES la marca (viene del tema por
   defecto de la app, documentado alli como identidad). Acá se le suma el papel
   calido de la partitura, que es lo unico que brilla de verdad en la pagina.

   Reglas del sistema, para que no se desarme al crecer:
     - TODO color, medida y tipografia sale de una variable de este bloque.
     - un solo acento (el oro). Lo demas son neutros casi-negros y el papel.
     - a mas grande el texto, mas apretado (interlineado y tracking bajan).
     - profundidad por CAPAS de fondo, no por sombras.
     - una sola animacion de firma (el cursor); el resto es respuesta al gesto.
   ============================================================================= */

/* --- tipografias propias (autoalojadas: nada se pide a terceros) --- */
@font-face { font-family: 'EB Garamond'; src: url('../tipos/eb-garamond.woff2') format('woff2');
  font-weight: 400 700; font-display: swap; font-style: normal; }
@font-face { font-family: 'EB Garamond'; src: url('../tipos/eb-garamond-italic.woff2') format('woff2');
  font-weight: 400 700; font-display: swap; font-style: italic; }
@font-face { font-family: 'Inter var'; src: url('../tipos/inter.woff2') format('woff2');
  font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../tipos/jetbrains-mono.woff2') format('woff2');
  font-weight: 400 700; font-display: swap; }

:root {
  /* fondos por capas: cada paso es minimo, la profundidad se lee igual */
  --tinta-900: #121417;      /* fondo de la pagina */
  --tinta-800: #171A1F;      /* seccion alterna */
  --tinta-700: #1B1F24;      /* tarjeta */
  --tinta-600: #222831;      /* tarjeta elevada / borde suave */
  --tinta-500: #2A2F38;      /* borde */

  /* contraste MEDIDO contra --tinta-900 (y verificado tambien sobre --tinta-700,
     que es el fondo de las tarjetas): todos por encima de 4.5:1, porque estos
     tonos llevan texto chico de verdad (fechas, etiquetas, el pie, la promesa
     de privacidad), no adornos. */
  --texto: #C5CAD3;          /* 11.2:1 */
  --texto-2: #9EA3B0;        /*  7.3:1 */
  --texto-3: #949AA6;        /*  6.5:1 — antes #6E7480 (3.9:1), por debajo del minimo */
  --titulo: #EDE7D8;         /* marfil: los titulos no son blanco puro */

  --oro: #D4AF37;            /* EL acento: marca y accion */
  --oro-vivo: #E8C84B;
  --oro-hondo: #B08A22;    /* 5.0:1 sobre las tarjetas: lleva texto (etiqueta «Lección») */
  --oro-tenue: rgba(212, 175, 55, 0.12);

  --papel: #FFFDF5;          /* la partitura */
  --papel-linea: #8B7E60;
  --noche: #16102E;          /* indigo del icono de PianoLibre */

  --ok: #5FBF90;
  --aviso: #D9A441;
  --falla: #E07A5C;

  --serif: 'EB Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Inter var', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --medida: 66ch;            /* el texto corrido nunca es mas ancho */
  --ancho: 1080px;           /* la pagina entera */
  --u: 4px;                  /* toda distancia es multiplo de esto */
  --radio: 10px;
  --borde: 1px solid var(--tinta-500);
  --transicion: 160ms cubic-bezier(.2, .8, .3, 1);
}

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

html { -webkit-text-size-adjust: 100%; 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(--tinta-900);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------ tipografia ------------------------------ */
h1, h2, h3, h4 { font-family: var(--serif); color: var(--titulo); margin: 0; font-weight: 600;
  text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); line-height: 1.06; letter-spacing: -.015em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); line-height: 1.12; letter-spacing: -.01em; }
h3 { font-size: 1.3rem; line-height: 1.2; }
h4 { font-size: 1.02rem; line-height: 1.3; }
p { margin: 0 0 calc(var(--u) * 4); max-width: var(--medida); }
a { color: var(--oro); text-decoration-color: color-mix(in srgb, var(--oro) 40%, transparent);
  text-underline-offset: 3px; transition: color var(--transicion); }
a:hover { color: var(--oro-vivo); }
strong { color: var(--titulo); font-weight: 600; }
code, .mono { font-family: var(--mono); font-size: .92em; }
small { font-size: .82rem; }

.lede { font-size: 1.12rem; color: var(--texto-2); max-width: 58ch; }
.etiqueta { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texto-3); }
.fecha { font-family: var(--mono); font-size: .78rem; color: var(--texto-3); }
.vacio { color: var(--texto-3); font-style: italic; }
.lista-limpia { list-style: none; padding: 0; margin: 0; }
.lista-limpia li { padding-left: calc(var(--u) * 5); position: relative; margin-bottom: calc(var(--u) * 2); }
/* la vineta usaba un glifo de Bravura, que en esta pagina no esta cargada: salian
   cuadraditos. Un caracter de la monoespaciada no depende de ninguna fuente extra. */
.lista-limpia li::before { content: "›"; font-family: var(--mono); color: var(--oro-hondo);
  position: absolute; left: 0; top: 0; font-size: 1em; line-height: 1.55; }

/* ------------------------------ estructura ------------------------------ */
.envoltorio { width: min(100% - calc(var(--u) * 10), var(--ancho)); margin-inline: auto; }
.seccion { padding-block: calc(var(--u) * 18); }
.seccion + .seccion { border-top: 1px solid color-mix(in srgb, var(--tinta-500) 55%, transparent); }
.seccion-alterna { background: var(--tinta-800); }
.cab-seccion { margin-bottom: calc(var(--u) * 8); }
.cab-seccion .etiqueta { display: block; margin-bottom: calc(var(--u) * 2); }

.rejilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 4); }
.rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 4); }
@media (max-width: 800px) { .rejilla-3, .rejilla-2 { grid-template-columns: minmax(0, 1fr); } }

/* nombres de archivo y rutas largas (vienen de los docs) no deben ensanchar la caja */
.tarjeta, .bug, .sesion-cuerpo, .ahora, .teaser { overflow-wrap: anywhere; }

.tarjeta { background: var(--tinta-700); border: var(--borde); border-radius: var(--radio);
  padding: calc(var(--u) * 5); min-width: 0; }
.tarjeta h4 { margin-bottom: calc(var(--u) * 2); }
.tarjeta p:last-child, .tarjeta ul:last-child { margin-bottom: 0; }
.tarjeta ul { margin: 0; padding-left: calc(var(--u) * 4); color: var(--texto-2); }
.tarjeta li { margin-bottom: calc(var(--u) * 1.5); }

/* ------------------------------ navegacion ------------------------------ */
.cabecera { position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--tinta-900) 88%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid color-mix(in srgb, var(--tinta-500) 60%, transparent); }
.cabecera .envoltorio { display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--u) * 4); padding-block: calc(var(--u) * 3); }
.marca { display: flex; align-items: center; gap: calc(var(--u) * 2.5); text-decoration: none; }
.marca span { font-family: var(--serif); font-size: 1.16rem; color: var(--titulo); font-weight: 600; }
.marca:hover span { color: var(--oro-vivo); }
.nav { display: flex; gap: calc(var(--u) * 6); }
.nav a { color: var(--texto-2); text-decoration: none; font-size: .94rem; padding-block: var(--u); }
.nav a:hover { color: var(--titulo); }
.nav a[aria-current="page"] { color: var(--oro); border-bottom: 2px solid var(--oro); }
@media (max-width: 560px) { .nav { gap: calc(var(--u) * 4); font-size: .88rem; } .marca span { display: none; } }

/* ------------------------------ botones ------------------------------ */
.boton { display: inline-flex; align-items: center; gap: calc(var(--u) * 2);
  font: inherit; font-size: .95rem; font-weight: 500; padding: calc(var(--u) * 2.5) calc(var(--u) * 5);
  border-radius: 8px; border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion); }
.boton-oro { background: var(--oro); color: #16130A; font-weight: 600; }
.boton-oro:hover { background: var(--oro-vivo); color: #16130A; }
.boton-linea { background: transparent; border-color: var(--tinta-500); color: var(--texto); }
.boton-linea:hover { border-color: var(--oro); color: var(--oro); }
.boton:disabled { opacity: .4; cursor: not-allowed; }
.boton:focus-visible, a:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--oro); outline-offset: 2px; }

/* ------------------------------ pie ------------------------------ */
.pie { border-top: 1px solid var(--tinta-500); padding-block: calc(var(--u) * 10);
  color: var(--texto-3); font-size: .88rem; background: var(--tinta-800); }
.pie .envoltorio { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 3) calc(var(--u) * 6);
  justify-content: space-between; align-items: center; }
.pie a { color: var(--texto-2); text-decoration: none; }
.pie a:hover { color: var(--oro); }
.pie-legal { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 4); }