/* ============================================================
   FORGE.ARK — TOKENS DE DISEÑO
   ------------------------------------------------------------
   ESTE ES EL ÚNICO ARCHIVO QUE DEBES TOCAR PARA CAMBIAR
   LA FUENTE, LOS COLORES O EL LOGO DE TODA LA WEB.

   Cambias un valor aquí -> cambia en las 19 páginas a la vez.
   No escribas nunca un color ni una fuente a mano en otro sitio.
   ============================================================ */


/* ------------------------------------------------------------
   1. LA FUENTE
   ------------------------------------------------------------
   Para cambiar la fuente de TODA la web, cambia estas DOS líneas:
     a) la URL del @import  (de dónde se descarga)
     b) el valor de --fuente (cómo se llama)

   Alternativas ya preparadas (descomenta la que quieras probar
   y comenta la de Inter):
------------------------------------------------------------ */

/* --- Inter (ORIGINAL — descomenta esto para revertir) ---
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
*/

/* --- Archivo (más industrial, encaja con "forja") ---
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600&display=swap');
*/

/* --- Geist (casi idéntica a Inter, algo más geométrica) ---
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&display=swap');
*/

/* --- IBM Plex Sans (técnica, de ingeniería) ---
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');
*/

/* --- ACTIVA: Space Grotesk (PRUEBA) --- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&display=swap');


:root {

  /* ==========================================================
     FUENTE  ->  cambia SOLO esta línea (y el @import de arriba)
     ========================================================== */
  --fuente: 'Space Grotesk', sans-serif;

  /* PARA REVERTIR A INTER:
     1) pon aquí        -> --fuente: 'Inter', sans-serif;
     2) arriba, cambia el @import activo a Inter

     Otras alternativas:
     --fuente: 'Archivo', sans-serif;
     --fuente: 'Geist', sans-serif;
     --fuente: 'IBM Plex Sans', sans-serif;
  */


  /* ==========================================================
     SUPERFICIES  (de más oscuro a menos)
     ========================================================== */
  --negro:        #0a0a0a;   /* fondo principal de la web    */
  --negro-2:      #0e0e0e;   /* hover de tarjetas            */
  --superficie:   #1a1a1a;   /* tarjetas, cajas, separadores */
  --superficie-2: #1e1e1e;   /* borde del nav                */
  --linea:        #222222;   /* bordes de campos             */
  --linea-2:      #2a2a2a;   /* bordes activos               */
  --linea-3:      #2e2e2e;   /* bordes destacados            */
  --tinta:        #111111;   /* fondos de input              */
  --tinta-2:      #161616;   /* fondos alternos              */


  /* ==========================================================
     TEXTO  (de más claro a menos)
     ========================================================== */
  --blanco:       #ffffff;   /* logotipo, máximo contraste   */
  --titulo:       #eaeef4;   /* TÍTULOS. Ojo: tira a azul.
                                Para unificar con la marca,
                                pon aquí #ffffff              */
  --texto:        #ededed;   /* cuerpo de lectura            */
  --texto-suave:  #cdcdcd;   /* párrafos secundarios         */
  --texto-claro:  #d2d2d2;   /* variante                     */
  --texto-tenue:  #aaaaaa;   /* apoyos                       */
  --gris:         #888888;   /* texto desactivado            */
  --gris-2:       #777777;   /* etiquetas de sección         */
  --gris-3:       #666666;   /* enlaces del nav              */
  --gris-4:       #555555;   /* muy secundario               */
  --gris-5:       #444444;   /* bordes suaves                */
  --gris-6:       #333333;   /* numeración, detalles         */
  --gris-7:       #3a3a3a;   /* casi invisible               */
  --plata:        #cccccc;   /* hover de enlaces             */
  --plata-2:      #dddddd;   /* hover de botones             */


  /* ==========================================================
     ORO  (el acento de la marca)
     ========================================================== */
  --oro-brillo:   #fff3c4;   /* punto de luz del degradado   */
  --oro-suave:    #fbe9a8;   /* cierre claro del degradado   */
  --oro-claro:    #f6d56b;   /* alto del degradado           */
  --oro:          #e8c558;   /* EL ACENTO. Fuego/Acero/Trueno */
  --oro-hondo:    #c9962f;   /* sombra del metal             */

  /* Degradado metálico estándar (badges, coronas, insignias) */
  --oro-metal: linear-gradient(180deg, var(--oro-claro), var(--oro-hondo));


  /* ==========================================================
     ACERO  (degradado de la espada del hero, en SVG)
     ========================================================== */
  --acero-luz:    #f4f6f9;
  --acero:        #aeb4bd;
  --acero-hondo:  #7f868f;
  --acero-suave:  #d6dae0;
  --acero-linea:  #6b7178;
  --acero-texto:  #c6cbd2;   /* texto sobre acero        */
  --acero-g1:     #dfe4ea;   /* degradado metálico: alto */
  --acero-g2:     #b6bcc6;   /* degradado metálico: bajo */
  --acero-g3:     #f3f5f8;   /* degradado metálico: luz  */


  /* ==========================================================
     ESTADOS  (mensajes de error y de éxito)
     ========================================================== */
  --error:        #c0392b;
  --error-texto:  #ff9d9d;
  --error-fondo:  #2a1010;
  --error-borde:  #5c2222;

  --exito:        #245c33;
  --exito-texto:  #9dffb0;
  --exito-fondo:  #0f2a15;

  --telegram:     #229ed9;


  /* ==========================================================
     LOGO
     ----------------------------------------------------------
     El archivo se llama SIEMPRE logo.png.
     Para cambiar el logo: sube el nuevo con ese mismo nombre,
     sobrescribiendo el anterior. No renombres nunca el archivo,
     o tendrás que ir página por página otra vez.
     ========================================================== */
  --logo: url('logo.png');
  --logo-alto: 34px;         /* altura del logo en el nav     */

}


/* ------------------------------------------------------------
   BASE: se aplica a todas las páginas que carguen este archivo
------------------------------------------------------------ */
body {
  font-family: var(--fuente);
}

/* Clase de utilidad para el logo en imagen, cuando lo uses */
.logo-img {
  height: var(--logo-alto);
  width: auto;
  display: block;
}