/* ==========================================================
   JHISUS · Tokens de marca para la web
   Importa este archivo antes de tus estilos.
   Fuentes (pega en el <head>):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
   ========================================================== */

:root {
  /* ---- Colores de marca ---- */
  --azul:          #1F66F2;  /* Azul Jhisus · el punto del logo, botones, enlaces */
  --azul-hover:    #0D47C9;  /* Azul Profundo · hover y presionado */
  --azul-claro:    #5B93FF;  /* Azul sobre fondos oscuros (texto/acentos) */
  --azul-bruma:    #E7EEFF;  /* fondos suaves, etiquetas */
  --celeste:       #56E0FF;  /* solo en degradados y luces */
  --negro:         #111114;  /* Negro Código · logo, textos */
  --negro-fondo:   #0B0B10;  /* fondos oscuros (hero, footer) */
  --blanco:        #FFFFFF;
  --niebla:        #F3F4F6;  /* fondo de secciones alternas */
  --verde-senal:   #18C79A;  /* solo éxito (formularios enviados) y código */
  --rojo-error:    #E5484D;  /* solo errores de formulario */

  /* ---- Neutros para texto y bordes ---- */
  --texto:         #111114;
  --texto-suave:   #5A6072;
  --texto-claro:   #9AA3BD;  /* sobre fondo oscuro */
  --borde:         #E1E5EE;
  --borde-oscuro:  #262A36;

  /* ---- Degradado y luces (usar con moderación) ---- */
  --degradado:     linear-gradient(90deg, #1F66F2 0%, #3FA2FF 45%, #56E0FF 100%);
  --luz-azul:      radial-gradient(60% 60% at 50% 50%, rgba(31,102,242,.45), rgba(31,102,242,0) 70%);
  --cuadricula:    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  --cuadricula-tam: 32px 32px;

  /* ---- Tipografía ---- */
  --f-titulo: "Poppins", "Segoe UI", system-ui, sans-serif;     /* logo y títulos · 700 */
  --f-texto:  "Manrope", "Segoe UI", system-ui, sans-serif;     /* párrafos · 400-600 */
  --f-mono:   "JetBrains Mono", ui-monospace, Consolas, monospace; /* etiquetas, datos, código · 500 */

  --t-hero:   clamp(2.6rem, 7vw, 5.5rem);   /* titular principal */
  --t-h2:     clamp(1.8rem, 4vw, 3rem);
  --t-h3:     clamp(1.2rem, 2vw, 1.5rem);
  --t-texto:  1.0625rem;                     /* 17px */
  --t-chico:  .875rem;
  --t-etiqueta: .78rem;                      /* mono, MAYÚSCULAS, espaciado .08em */

  --tracking-titulo: -.04em;
  --tracking-logo:   -.05em;

  /* ---- Espacios, bordes y sombras ---- */
  --r-boton: 12px;
  --r-tarjeta: 16px;
  --r-grande: 24px;
  --sombra: 0 20px 50px rgba(17,17,20,.10);
  --sombra-fuerte: 0 30px 80px rgba(10,20,60,.25);
  --ancho-max: 1180px;
  --sec-pad: clamp(64px, 10vw, 120px);
}

/* ---- Logotipo: siempre texto en Poppins 700 con el punto azul ---- */
.jh-logo { font: 700 1.6rem/1 var(--f-titulo); letter-spacing: var(--tracking-logo); color: var(--texto); text-decoration: none; white-space: nowrap; }
.jh-logo i { font-style: normal; color: var(--azul); }
.on-dark .jh-logo, .jh-logo.claro { color: var(--blanco); }
.on-blue .jh-logo i { color: var(--negro); }   /* sobre azul, el punto va en negro */

/* ---- Botones ---- */
.jh-btn { display: inline-flex; align-items: center; gap: .5em; font: 600 1rem var(--f-titulo); letter-spacing: -.01em;
  padding: 14px 22px; border-radius: var(--r-boton); border: 0; cursor: pointer; text-decoration: none; transition: background .2s, transform .2s; }
.jh-btn--pri { background: var(--azul); color: #fff; }
.jh-btn--pri:hover { background: var(--azul-hover); transform: translateY(-1px); }
.jh-btn--sec { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px var(--borde); }
.jh-btn--sec:hover { box-shadow: inset 0 0 0 1.5px var(--azul); color: var(--azul); }
.jh-btn:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }

/* ---- Etiqueta mono ---- */
.jh-tag { font: 500 var(--t-etiqueta)/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--azul); }
.jh-chip { font: 500 .8rem/1 var(--f-mono); padding: 8px 12px; border-radius: 999px; background: var(--azul-bruma); color: var(--texto); }