/* ============================================================================
   NORMA GRAFICA  ·  Pinto + Pizarro Arquitectos
   ============================================================================
   Este archivo es la unica fuente de la tipografia y los colores del sitio.
   Todo lo demas (menu, carrusel, tarjetas, fichas, footer, nosotros) usa las
   variables de aca. Si el cliente cambia un color de marca, se cambia UNA vez
   en este archivo y se actualiza el sitio completo.

   COMO USARLO
     color:var(--texto);
     font-family:var(--fuente);

   REGLA: no escribir colores ni fuentes "a mano" en los otros CSS. Si hace
   falta un tono nuevo, se agrega aca con nombre y se usa por variable.

   Se carga PRIMERO en todas las paginas, antes que el resto de los CSS.
   ============================================================================ */

:root{

  /* ---------- TIPOGRAFIA ----------
     Una sola familia en todo el sitio. En Windows resuelve a Segoe UI; en
     Mac y Android, system-ui toma la fuente del sistema (San Francisco y
     Roboto), que son las que mejor acompanan a Segoe UI. */
  --fuente:'Segoe UI', system-ui, sans-serif;

  /* ---------- COLORES DE MARCA ---------- */
  --naranja:#F96611;        /* acento: borde del desplegable, detalles      */
  --naranja-osc:#D8530A;    /* variante oscura del acento                   */

  /* ---------- COLORES DE TEXTO ---------- */
  --negro:#14100C;          /* titulos de seccion y de proyecto             */
  --texto:#404040;          /* texto corrido, datos de ficha, listados      */
  --gris-suave:#868686;     /* subtitulos bajo los titulos de seccion       */
  --blanco:#FFFFFF;         /* texto sobre fotos                            */

  /* ---------- COLORES DE FONDO ---------- */
  --fondo:#FFFFFF;          /* fondo de todas las secciones                 */
  --fondo-mapa:#F2F1EF;     /* el mar y los vacios del mapa interactivo     */

  /* ---------- OTROS ---------- */
  --iconos-footer:#7B2D8E;  /* color de los iconos de redes del footer      */
  --linea:#E8E5E1;          /* separadores finos                            */
  --fondo-suave:#F7F6F4;    /* burbujas de los iconos del footer            */

  /* ---------- FOOTER ----------
     Gris RAL 7012 (Basaltgrau), pedido por el cliente.

     >>> PARA CAMBIAR EL GRIS DEL FOOTER, SE EDITA LA LINEA DE ABAJO. <<<
     Es el unico lugar: el footer, sus separadores y la barra de derechos
     salen todos de aca, y se actualizan las 37 paginas de una vez.

     OJO CON EL RAL: es un estandar de pintura fisica, no un color de
     pantalla, asi que la conversion a HEX es aproximada y cada tabla da un
     valor algo distinto. Se uso el mas citado:
        #575D5E  <- el actual
        #4E5754     variante, un poco mas verdosa
        #51565C     variante, un poco mas azulada
     Si el cliente tiene el color en un manual de marca, conviene usar el
     HEX que diga ese manual antes que cualquiera de estos.

     Contraste del texto blanco encima (la norma pide 4,5:1 para texto
     chico como el de este footer):
        #575D5E  6,70:1  cumple de sobra   <- el actual
        #767676  4,54:1  cumple justo
        #868686  3,64:1  no cumple                                */
  --footer-fondo:#575D5E;   /* fondo del footer                             */
  --footer-texto:#FFFFFF;   /* todas las letras del footer                  */
  --footer-linea:rgba(255,255,255,.30);  /* separadores sobre el gris       */
  --footer-legal:rgba(0,0,0,.10);        /* barra de derechos, un tono mas oscuro */

  /* ---------- MEDIDAS DE REFERENCIA ----------
     Los tamanos de letra se calculan sobre una pantalla de 1920x1080, que es
     el lienzo del diseno en Figma. La formula para llevar un tamano de Figma
     a la web es:   px / 1920 = vw
     Ejemplos ya usados en el sitio:
        25px -> 1.3021vw      45px -> 2.34375vw
        48px -> 2.5vw         80px -> 4.1667vw
     y siempre dentro de un clamp(minimo, vw, maximo) para que no se
     desarme en pantallas chicas. */
}