:root {
      /* =======================================================================
         1. DISEÑO DE MAQUETACIÓN (Layouts)
         ======================================================================= */
      /* --- HGS:LAYOUTS:START --- */
      --hg-layout-max: 63.75rem;
      --hg-layout-narrow: 31.25rem;
      --hg-layout-wide: 90rem;
      --hg-layout-full: 100%;
      /* --- HGS:LAYOUTS:END --- */

      /* =======================================================================
         2. DISTANCIAS Y ESPACIADO (HG Spacing)
         ======================================================================= */
      /* --- HGS:SPACING:START --- */
      --hg-spacing-50: clamp(0.125rem, 0.0833rem + 0.2083vw, 0.25rem); /* 2px -> 4px */
      --hg-spacing-100: clamp(0.25rem, 0.1667rem + 0.4167vw, 0.5rem); /* 4px -> 8px */
      --hg-spacing-200: clamp(0.5rem, 0.4167rem + 0.4167vw, 0.75rem); /* 8px -> 12px */
      --hg-spacing-300: clamp(0.75rem, 0.6667rem + 0.4167vw, 1rem); /* 12px -> 16px */
      --hg-spacing-400: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem); /* 16px -> 24px */
      --hg-spacing-500: clamp(1.5rem, 1.3333rem + 0.8333vw, 2rem); /* 24px -> 32px */
      --hg-spacing-700: clamp(3rem, 2.6667rem + 1.6667vw, 4rem); /* 48px -> 64px */
      --hg-spacing-800: clamp(4rem, 3.3333rem + 3.3333vw, 6rem); /* 64px -> 96px */
      --hg-spacing-900: clamp(6rem, 5.3333rem + 3.3333vw, 8rem); /* 96px -> 128px */

      --hg-gap-icon: var(--hg-spacing-200);
      --hg-gap-item: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem); /* 16px -> 24px Awwwards Gutter */
      --hg-gap-card: var(--hg-spacing-500);
      --hg-padding-section: var(--hg-spacing-900);
      --hg-padding-layout: clamp(1.25rem, 4vw, 3.25rem); /* 52px Awwwards pad-inner */
      /* --- HGS:SPACING:END --- */

      /* =======================================================================
         3. TIPOGRAFÍA Y FUENTES (HG Fonts)
         ======================================================================= */
      /* --- HGS:FONTS:START --- */
      --hg-font-family-body: "Inter Tight", sans-serif;
      --hg-font-family-heading: "Inter Tight", sans-serif;
      --hg-font-xs: 0.875rem;
      --hg-font-s: clamp(0.7500rem, 0.6591rem + 0.4545vw, 1.0000rem);
      --hg-font-m: clamp(1.0000rem, 0.9318rem + 0.3409vw, 1.1875rem);
      --hg-font-l: clamp(1.2500rem, 1.1136rem + 0.6818vw, 1.6250rem);
      --hg-font-xl: clamp(1.5000rem, 1.3864rem + 0.5682vw, 1.8125rem);
      --hg-font-2xl: clamp(1.7500rem, 1.5455rem + 1.0227vw, 2.3125rem);
      /* --- HGS:FONTS:END --- */

      /* =======================================================================
         4. COLORES DEL TEMA CLARO (HG Colors - Light Mode)
         ======================================================================= */
      /* --- HGS:COLORS:LIGHT:START --- */
      --hg-brand: oklch(0.25 0 0); /* #222 Awwwards Primary */
      --hg-brand-soft: color-mix(in oklch, var(--hg-brand) 8%, transparent); /* #ededed aprox */
      --hg-brand-soft-on: var(--hg-brand);
      --hg-accent: oklch(0.40 0 0); /* Gris Oscuro Wireframe (No más naranja) */
      --hg-accent-soft: color-mix(in oklch, var(--hg-accent) 10%, transparent);
      --hg-accent-soft-on: var(--hg-accent);

      --hg-text-main: oklch(0.25 0 0); /* #222 */
      --hg-text-muted: color-mix(in oklch, var(--hg-text-main) 50%, transparent); /* #a7a7a7 */
      --hg-text-inv: oklch(0.98 0 0);

      --hg-brand-on: oklch(1.00 0 0); /* #fff */
      --hg-accent-on: oklch(1.00 0 0); /* #fff */

      --hg-canvas: oklch(0.97 0 0); /* #F8F8F8 */
      --hg-surface: oklch(1.00 0 0); /* #FFFFFF */
      --hg-surface-alt: oklch(0.97 0 0); /* #F8F8F8 */
      --hg-surface-muted: oklch(0.94 0 0); /* #ededed */

      --hg-border: oklch(0.94 0 0); /* #ededed */
      --hg-border-s: 1px;
      --hg-border-m: 2px;
      --hg-border-l: 4px;
      /* --- HGS:COLORS:LIGHT:END --- */

      /* =======================================================================
         5. BORDES, SOMBRAS Y MOVIMIENTO (HG Effects)
         ======================================================================= */
      --hg-radius-xs: 0.25rem; /* 4px Awwwards rounded-small */
      --hg-radius-s: 0.5rem; /* 8px Awwwards rounded-normal */
      --hg-radius-m: 1rem; /* 16px Awwwards rounded-large */
      --hg-radius-l: 1.5rem;
      --hg-radius-pill: 9999px;

      --hg-radius-brand: var(--hg-radius-m);
      --hg-radius-none: 0;

      --hg-motion-snappy: cubic-bezier(0.25, 1, 0.5, 1);
      --hg-duration-fast: 200ms;
      --hg-duration-flow: 400ms;

      --hg-shadow-ink: 0.15 0 0; /* Sombra neutral pura para Wireframe */
      --hg-glass-edge: inset 0 1px 0 0 oklch(1 0 0 / 0.4);
      --hg-glass-edge-strong: inset 0 1px 0 0 oklch(1 0 0 / 0.8);

      /* Sombras Premium Multi-capa */
      --hg-depth-idle:
         0 1px 2px 0 oklch(var(--hg-shadow-ink) / 0.05),
         0 1px 3px 0 oklch(var(--hg-shadow-ink) / 0.1),
         var(--hg-glass-edge);

      --hg-depth-hover:
         0 4px 6px -1px oklch(var(--hg-shadow-ink) / 0.08),
         0 2px 4px -2px oklch(var(--hg-shadow-ink) / 0.12),
         var(--hg-glass-edge-strong);

      --hg-depth-overlay:
         0 20px 25px -5px oklch(var(--hg-shadow-ink) / 0.12),
         0 8px 10px -6px oklch(var(--hg-shadow-ink) / 0.08),
         0 0 0 1px var(--hg-border);

      --hg-depth-float:
         0 25px 50px -12px oklch(var(--hg-shadow-ink) / 0.25),
         0 0 0 1px var(--hg-border);

      --hg-motion-composite:
         transform var(--hg-duration-fast) var(--hg-motion-snappy),
         box-shadow var(--hg-duration-fast) var(--hg-motion-snappy),
         filter var(--hg-duration-fast) var(--hg-motion-snappy);

      --hg-action-hover: color-mix(in oklch, currentColor 8%, transparent);

      /* =======================================================================
         6. VARIABLES CONTEXTUALES DE LA MARCA (Layer 3)
         ======================================================================= */
      /* --- 1. COLORES DE FONDO --- */
      --hg-bg-low: var(--hg-surface);
      --hg-bg-std: var(--hg-surface-muted);
      --hg-bg-high: var(--hg-brand);
      --hg-bg-full: var(--hg-accent);

      /* --- 2. COLORES DE TEXTO --- */
      --hg-color-low: var(--hg-text-muted);
      --hg-color-std: var(--hg-text-main);
      --hg-color-high: var(--hg-text-inv);

      /* --- 3. COLORES DE BORDE --- */
      --hg-border-low: color-mix(in oklch, var(--hg-border), transparent 50%);
      --hg-border-std: var(--hg-border);
      --hg-border-high: var(--hg-brand);
      --hg-border-full: var(--hg-text-main);

      /* --- 4. TIPOGRAFÍA: TAMAÑOS --- */
      --hg-size-low: var(--hg-font-m);
      --hg-size-std: var(--hg-font-l);
      --hg-size-high: var(--hg-font-xl);
      --hg-size-full: var(--hg-font-2xl);

      /* --- 5. FORMA (Radius) --- */
      --hg-rad-low: var(--hg-radius-s);
      --hg-rad-std: var(--hg-radius-m);
      --hg-rad-high: var(--hg-radius-l);
      --hg-rad-full: var(--hg-radius-pill);

      /* --- 6. ELEVACIÓN (Depth) --- */
      --hg-depth-low: var(--hg-depth-idle);
      --hg-depth-std: var(--hg-depth-hover);
      --hg-depth-high: var(--hg-depth-overlay);
      --hg-depth-full: var(--hg-depth-float);

      /* --- 7. DENSIDAD (Padding) --- */
      --hg-pad-low: var(--hg-spacing-300);
      --hg-pad-std: var(--hg-spacing-500);
      --hg-pad-high: var(--hg-spacing-700);
      --hg-pad-full: var(--hg-spacing-900);

      /* --- 8. GROSOR DE LÍNEAS --- */
      --hg-stroke-low: var(--hg-border-s);
      --hg-stroke-std: var(--hg-border-m);
      --hg-stroke-high: var(--hg-border-l);
      --hg-stroke-full: var(--hg-border-l);


      /* --- 9. MATRIZ DE COLOR CONTEXTUAL (Capa 3 - Intents) --- */

      /* LOW: Superficies y neutrales */
      --hg-color-low: var(--hg-surface-alt);
      --hg-color-low-on: var(--hg-text-main);

      /* STD: Identidad principal (Brand) */
      --hg-color-std: var(--hg-brand);
      --hg-color-std-on: var(--hg-brand-on);

      /* HIGH: Destacado (Accent) */
      --hg-color-high: var(--hg-accent);
      --hg-color-high-on: var(--hg-accent-on);

      /* FULL: Máximo peso (Dark) */
      --hg-color-full: var(--hg-text-main);
      --hg-color-full-on: var(--hg-canvas);
      /* --- 10. ELEVACIÓN Z-INDEX --- */
      --hg-z-low: 10;
      --hg-z-std: 50;
      --hg-z-high: 100;
      --hg-z-full: 9999;

   }

   /* =======================================================================
      7. COLORES DEL TEMA OSCURO (HG Colors - Dark Mode / Black Theme)
      ======================================================================= */
   [data-theme="dark"] {
      /* --- HGS:COLORS:DARK:START --- */
      --hg-brand: oklch(0.85 0 0); /* Wireframe Gris Claro */
      --hg-brand-soft: color-mix(in oklch, var(--hg-brand) 15%, transparent);
      --hg-accent: oklch(0.70 0 0); /* Wireframe Gris Medio */
      --hg-accent-soft: color-mix(in oklch, var(--hg-accent) 15%, transparent);

      --hg-text-main: oklch(0.95 0 0);
      --hg-text-muted: color-mix(in oklch, var(--hg-text-main) 60%, transparent);
      --hg-text-inv: oklch(0.15 0 0);

      --hg-brand-on: oklch(0.15 0 0);
      --hg-accent-on: oklch(0.98 0 0);

      --hg-canvas: oklch(0.20 0 0);
      --hg-surface: oklch(0.15 0 0);
      --hg-surface-alt: color-mix(in oklch, var(--hg-surface), white 3%);

      --hg-border: oklch(0.28 0 0);
      --hg-border-s: 1px;
      --hg-border-m: 2px;
      --hg-border-l: 4px;

      /* Sombras para Dark Mode (Más oscuras y sin reflejo blanco brillante) */
      --hg-shadow-ink: 0 0 0; /* Sombras puramente negras en Dark Mode */
      --hg-glass-edge: inset 0 1px 0 0 oklch(1 0 0 / 0.05);
      --hg-glass-edge-strong: inset 0 1px 0 0 oklch(1 0 0 / 0.1);
      /* --- HGS:COLORS:DARK:END --- */
   }