/* ===========================================================================
   audioguía.cl · piel de esta exhibición
   Va en la carpeta de la exhibición, junto a index.html

   Este archivo es el único que cambia de una muestra a otra. El index.html es
   idéntico en todas y se reemplaza cuando el motor se actualiza: si escribes
   aquí y no allá, ninguna corrección futura se lleva tu diseño por delante.

   Abajo está todo lo que se puede cambiar, con su valor por defecto a la vista.
   Descomenta lo que quieras modificar y borra el resto: lo que no aparezca en
   este archivo queda como está en el motor.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1 · Tipografía

   Si el museo usa su propia familia, cárgala aquí arriba y después nómbrala en
   las variables. Cualquier servicio sirve; también un archivo propio con
   @font-face si la institución tiene la licencia.
   --------------------------------------------------------------------------- */

/* @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..700&display=swap'); */

:root{
  /* --tipo-texto:   'Bricolage Grotesque', system-ui, sans-serif; */
  /* --tipo-titulo:  var(--tipo-texto); */
  /* --tipo-mono:    'Space Mono', ui-monospace, monospace; */

  /* --peso-titulo:       700; */
  /* --interletra-titulo: -0.028em; */
}


/* ---------------------------------------------------------------------------
   2 · Color

   Dos paletas, una por modo. El acento se usa en botones, discos numerados,
   la onda del reproductor y el filete de la transcripción en curso, así que
   tiene que leerse bien sobre el fondo y admitir texto encima.

   --acc-txt es el color del texto que va SOBRE el acento. Si cambias el acento
   por uno claro, este tiene que oscurecerse, o el botón queda ilegible.
   --------------------------------------------------------------------------- */

html[data-tema="oscuro"]{
  /* --bg:      #14170F; */   /* fondo */
  /* --fg:      #F4F2EC; */   /* texto */
  /* --acc:     #9FC1A2; */   /* acento */
  /* --acc-txt: #14170F; */   /* texto sobre el acento */
  /* --sup:     #1D2420; */   /* superficie elevada: el reproductor, el video */
}

html[data-tema="claro"]{
  /* --bg:      #F4F2EC; */
  /* --fg:      #14170F; */
  /* --acc:     #B8481F; */
  /* --acc-txt: #F4F2EC; */
  /* --sup:     #EAE5D9; */
}


/* ---------------------------------------------------------------------------
   3 · Forma

   --radio-disco en 50% da los círculos numerados de audioguía.cl. Bajarlo a
   12% los vuelve cuadrados de esquina blanda, que es un cambio de carácter
   bastante mayor de lo que parece: conviene mirarlo en el teléfono.
   --------------------------------------------------------------------------- */

:root{
  /* --radio:        3px;  */   /* botones, tarjetas, recuadros */
  /* --radio-disco:  50%;  */   /* discos numerados y botón de reproducción */
  /* --pin-escala:   1;    */   /* tamaño de los círculos del plano: 0.68 = 32 % más chicos */
  /* --radio-player: 12px; */   /* la caja del reproductor */
  /* --filete:       1px;  */   /* grosor de los bordes finos */
}


/* ---------------------------------------------------------------------------
   4 · Medidas
   --------------------------------------------------------------------------- */

:root{
  /* --gut: clamp(20px, 5.6vw, 30px); */   /* margen lateral de todas las pantallas */
  /* --alto-top: 58px; */                  /* alto de la cabecera */
  /* --alto-pie: 62px; */                  /* alto de la barra de navegación */
}


/* ---------------------------------------------------------------------------
   5 · Lo que necesite esta muestra en particular

   A partir de aquí, CSS libre. Las clases del motor son estables; si algo se
   renombra, se avisa. Un par de ejemplos de lo que suele pedirse:
   --------------------------------------------------------------------------- */

/* El título de la muestra en la portada
.hero{ font-size: clamp(2.2rem, 9vw, 3rem); text-transform: uppercase; }
*/

/* Los números de estación sin el círculo, solo la cifra
.disco{ background: none; border: 0; color: var(--acc); font-size: 1.1rem; }
*/

/* Una imagen de fondo en la portada, discreta y sin estorbar la lectura
#vista.portada{ background: url('img/fondo.jpg') center/cover; }
#vista.portada::before{ content:''; position:fixed; inset:0; background:var(--bg);
  opacity:.86; z-index:-1; }
*/