/* ==========================================================================
   AJUSTES DE DISEÑO — colores, tipografías, tamaños, pesos y espaciados
   --------------------------------------------------------------------------
   Cámbialos a mano aquí o con el editor: abre la web con ?editar al final
   de la dirección (http://localhost:4321/?editar), mueve los controles y
   pulsa «Guardar». El editor solo cambia los valores de este archivo.

   · Medidas en rem: crecen con la ventana (1rem ≈ 0,9 % del ancho).
   · Helvetica Neue LT Std (como tus presupuestos) se ve si está instalada;
     si no, Helvetica Neue (Mac, iPhone) o Heros Latin (el resto).
     Para incrustar la LT Std en la web haría falta su licencia web.
   · La portada (diseño «cartel», referencia de Timberland): «IVÁN CRESPO» es un
     logotipo SVG dibujado con Franklin Gothic Extra Condensed (titular-svg.py);
     el texto y las fechas, en la letra de los encabezados (Helvetica Neue Bold).
   ========================================================================== */

/* FUENTES DE GOOGLE (las reescribe el editor al guardar) */
/* FIN FUENTES */

:root {
  /* Colores (paletas para elegir: estilos.css o el editor)
     La portada va al revés: fondo del color principal y letras del color de fondo;
     al bajar, la web pasa al color de fondo (como loveandmoney.com, pero a negro) */
  --color-fondo: #000000;
  --color-principal: #ff2f05;                     /* el naranja de la referencia de Timberland: portada, titulares y enlaces de los lados */
  --color-texto: #ebeae3;                         /* títulos de proyecto, roles, textos */
  --color-secundario: rgba(235, 234, 227, 0.5);   /* descripciones y notas (gris) */

  /* Titulares grandes («IVÁN CRESPO» y los títulos de los trabajos) */
  --fuente-titulares: "Helvetica Neue Estrecha", sans-serif; /* Helvetica Neue Bold */
  --titulares-ancho: 46.05vw;       /* ancho de la portada: el titular, el vídeo y el texto (como el diseño: 782 de 1698) */
  --titulares-interlineado: 0.9;
  --titulares-espaciado: -0.065em;  /* espacio entre letras (medido en MOONLIGHT) */
  --titulares-estrechar: 0.78;      /* ancho de las letras del titular de la portada MOONLIGHT: 1 = normal */
  --titulares-adelgazar: 0.006;     /* cuánto se adelgaza ese titular, en em (0 = Bold tal cual; 0,006 = el grosor de MOONLIGHT) */
  --titulares-estilo: normal;       /* italic = cursiva · normal = redonda */
  --titulares-peso: 700;            /* 400 = normal · 700 = negrita */
  --titulares-separacion: 0rem;     /* hueco entre bloques de titulares */

  /* Portada «cartel»: el texto y las fechas, en la letra de los encabezados */
  --cartel-texto: 2.065vw;          /* la primera línea ocupa el 80 % del ancho, como la referencia */

  /* Portada MOONLIGHT (diseño «columna»): texto bajo el vídeo, y carrusel de trabajos */
  --fuente-portada: "Arial", sans-serif;
  --portada-texto: 4.73cqw;
  --portada-interlineado: 0.67;     /* muy junto, como MOONLIGHT */
  --portada-espaciado: -0.055em;
  --tira-ancho: 24vw;               /* ancho de cada trabajo en el carrusel */

  /* Portada anterior (firma y vídeo de fondo): solo si se vuelven a poner en contenido.js */
  --logo-escala: 5.83;
  --logo-ancho: 58vw;
  --logo-separacion: 0.18;
  --fondo-oscurecer: 0;

  /* Bordes: esquinas, laterales, títulos de sección y "Arriba" */
  --fuente-bordes: "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, "Heros Latin", Arial, sans-serif;
  --bordes-tamano: 12px;            /* como davidheofs.com */
  --bordes-peso: 400;
  --bordes-mayusculas: uppercase;   /* none = como esté escrito · uppercase = todo en mayúsculas */
  --bordes-espaciado: 0em;

  /* Resto de textos: fichas de proyecto, servicios, sobre mí */
  --fuente-texto: "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, "Heros Latin", Arial, sans-serif;
  --texto-tamano: 12px;             /* igual que los bordes */
  --texto-peso: 400;
  --texto-mayusculas: uppercase;    /* none = como esté escrito · uppercase = todo en mayúsculas */
  --ancho-columna: 50%;             /* ancho de la columna central en ordenador */
}
