/* ============================================================
   GLOBAL.CSS — Variables + resets de performance
   Importa este archivo PRIMERO en cada HTML de tu proyecto
   ============================================================ */

:root {

  --font-logo:  700;
  --font-title: 400;

  /* ─── FONDOS ─────────────────────────────────────────── */
  --bg-dark:          #050505;
  --bg-main-light:    #ffffff;
  --bg-nav-border:    #111111;

  /* ─── TEXTOS ─────────────────────────────────────────── */
  --color-logo:     hsl(54, 100%, 53%);
  --text-primary:     #ffffff;
  --text-dark:        #000000;
  --text-body:        #222222;
  --text-muted-1:     #888888;
  --text-muted-2:     #777777;
  --text-muted-3:     #666666;
  --text-muted-4:     #aaaaaa;

  /* ─── BORDES / LÍNEAS ─────────────────────────────────── */
  --border-subtle:    #111111;
  --border-field:     #1a1a1a;
  --border-btn:       #222222;

  /* ─── LABELS / ÍCONOS ────────────────────────────────── */
  --label-inactive:   #444444;

  /* ─── SCROLLBAR ──────────────────────────────────────── */
  --scrollbar-thumb:          rgba(255, 255, 255, 0.10);
  --scrollbar-thumb-hover:    rgba(255, 255, 255, 0.25);

  /* ─── OVERLAYS / TRANSPARENCIAS ──────────────────────── */
  --overlay-gradient:         rgba(0, 0, 0, 0.60);
  --overlay-zoom-bg:          rgba(0, 0, 0, 0.92);
  --overlay-viewer-btn-bg:    rgba(255, 255, 255, 0.06);
  --overlay-viewer-btn-hover: rgba(255, 255, 255, 0.12);
  --overlay-btn-hover-bg:     rgba(255, 255, 255, 0.04);

  /* ─── ESTADO DE FORMULARIO ───────────────────────────── */
  --form-success:     #aaaaaa;
  --form-error:       #c0392b;

  /* ─── GRILLA DE FONDO (hero grid) ───────────────────── */
  --hero-grid-color:  #111111;
}

/* ============================================================
   PERFORMANCE — scroll suave nativo, sin janks
   ============================================================ */
html {
  scroll-behavior: smooth;
  /* Evita reflow al mostrar/ocultar scrollbar en algunos OS */
  scrollbar-gutter: stable;
}

/* Mejora rendering de imágenes */
img {
  /* Evita que imágenes sin dimensiones explícitas causen layout shift */
  max-width: 100%;
  height: auto;
  /* Renderizado de alta calidad sin sacrificar performance */
  image-rendering: auto;
}