/* ============================================================
   CJ Power · base común a todo el sitio
   Fuentes alojadas en el propio hosting (sin Google Fonts),
   colores de marca y piezas reutilizables (botones, etiquetas).
   ============================================================ */

/* --- Fuentes ------------------------------------------------ */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(../fonts/archivo-latin.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(../fonts/archivo-latin-ext.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/plex-mono-400.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/plex-mono-ext-400.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/plex-mono-500.woff2) format("woff2");
}

/* --- Colores de marca (úsalos con var(--nombre)) ------------- */
:root {
  --negro: #0B0B0C;
  --panel: #151517;
  --linea: #2C2C30;
  --gris: #8E8E93;
  --texto: #EDEBE6;
  --amarillo: #FFD100;
  --ambar: #7A6400;
  --rojo: #FF3B30;
}

/* --- Base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--negro); color: var(--texto); font-family: "Archivo", sans-serif; }
a { color: var(--texto); }
a:hover { color: var(--amarillo); }

/* Texto técnico en mayúsculas (IBM Plex Mono) */
.m { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* Botón principal (amarillo) */
.btn { display: inline-flex; align-items: center; height: 52px; padding: 0 28px; background: var(--amarillo); color: var(--negro); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-radius: 2px; }
.btn:hover { color: var(--negro); box-shadow: 0 0 24px rgba(255,209,0,.35); }

/* Botón secundario (borde) */
.btn2 { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; background: transparent; border: 1px solid var(--linea); color: var(--texto); text-decoration: none; border-radius: 2px; cursor: pointer; }
.btn2:hover { border-color: var(--amarillo); color: var(--texto); }

/* Punto que palpita (estado "en línea") */
@keyframes pulse { 50% { opacity: .3; } }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--amarillo); animation: pulse 2s infinite; }