/* =============================================================================
   Danelec (www.danelec.com) — design system destilado
   Fuente: raw.json v3 (capturado 2026-05-12)

   Estructura:
     1. PRIMITIVES — valores reales del kit, sin opinar sobre rol.
     2. SEMANTICS  — referencias a primitives, una por uso distinto.
     3. KEYFRAMES  — animaciones declaradas en el sitio.
     Notas finales: decisiones de naming y descartes.

   NOTA DE UNIDADES (importante)
   -----------------------------
   El kit usa una **escala fluida en rem**: la raíz cambia por breakpoint
   (≈ 19.40px en desktop-2848, ≈ 14.77px en laptop 1215, ≈ 14.42px en tablet,
   ≈ 7.33px en mobile-320). Los valores `rem` se mantienen constantes entre
   breakpoints — solo el root escala. Para que el destilado sea legible,
   los valores se expresan en **rem** (la unidad del autor) con su
   equivalente px **al breakpoint laptop (1215px)** en el comentario.
   Esa es la referencia "desktop canónica" del sitio.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1) PRIMITIVES
   -----------------------------------------------------------------------------
   El kit usa vars semánticas del estilo Webflow Client-First
   (--text-color--text-primary, --base-color-orange--danelec-orange,
   --background-color--background-secondary). Para colores se respetan los
   nombres descriptivos del autor; para spacing/radii/font-sizes el kit no
   expone vars en el raw (vars[] vacíos), así que se nombran por valor.
   ----------------------------------------------------------------------------- */

:root {
  /* ---- Spacing (escala rem, base de incrementos: 0.25rem) -------------- */
  /* Todos los valores son múltiplos limpios de rem. px de referencia @ laptop. */
  --space-0_25: 0.25rem; /*  3.69px @laptop — gap puntual columnGap/rowGap (.use-cases_block-cta-text, .blog-feed_item-author) */
  --space-0_4: 0.4rem; /*  5.91px @laptop — paddingTop/gap (.navbar_dropdown-toggle, .heading_text-wrapper, .blog-feed_item-top) */
  --space-0_5: 0.5rem; /*  7.38px @laptop — gaps/insets base (.navbar_menu-content, .button, .hero_link-*, .padding-section, .home-blog_item-content, .heading_caption-wrapper) — count 121 */
  --space-0_8: 0.8rem; /* 11.81px @laptop — paddingX/Y de control (.button paddingY, .global_blog-tag paddingX) — count 80 */
  --space-1: 1rem; /* 14.77px @laptop — paddingY de pílulas (.footer_link 32 + .button) — count 64 + 102 paddingY/gap general */
  --space-1_5: 1.5rem; /* 22.15px @laptop — gap/padding (.navbar_component, .home-intro_*, .quote_component, .cta-split_item) — count 34 */
  --space-2: 2rem; /* 29.53px @laptop — gap entre rows internas (.hero_content, .stats_*, .solutions_content-bottom, .home-blog_collection-list) — count 33 */
  --space-3: 3rem; /* 44.30px @laptop — gap puntual de columnas (.hero_content, .w-layout-grid) — count 5 + section paddings (count 10) */
  --space-4: 4rem; /* 59.06px @laptop — paddingY de section/margin-bottom (.margin-bottom, .padding-section) — count 10 */
  --space-5_33: 5.33rem; /* 78.74px @laptop — paddingX de section_hero-landingpage / .padding-global — count 20 */
  --space-8: 8rem; /* 118.13px @laptop — paddingY de .padding-section grande — count 10 */
  --space-32_5: 32.5rem; /* 480px @laptop — margen lateral de .container-large (count 16) */
  --space-35: 35rem; /* ~516.85px @laptop — margen lateral mayor de .container-large (count 8) */

  /* spacing negativos (offsets de hovers/dividers) */
  --space-neg-0_4: -0.4rem; /* -5.91px @laptop — marginTop/marginLeft de .solutions_product-item-hover (count 16) */
  --space-neg-0_5: -0.5rem; /* -7.38px @laptop — pares marginTop con --space-0_5 */
  --space-neg-1: -1rem; /* -14.77px @laptop — marginTop puntual (.global_blog-tag) */
  --space-neg-divider: -52.27rem; /* -727.49px @laptop — marginLeft de .hero_link-divider (línea decorativa que recorta el hero) */

  /* ---- Container max-width --------------------------------------------- */
  --container-large: 131.43rem; /* 1940px @laptop — .container-large (count 14, único container del kit) */

  /* ---- Color palette ---------------------------------------------------- */
  /* base-color-red (centroid del cluster "orange family" range 27-33) */
  --color-danelec-red: rgb(
    51,
    23,
    20
  ); /* kit: --text-color--text-primary / --base-color-red--danelec-red — areaPct 19.58% (texto y borders dominantes) */
  --color-danelec-orange: rgb(
    255,
    78,
    42
  ); /* kit: --base-color-orange--danelec-orange / --link-color--link-primary / --background-color--background-alternate — acento único */

  /* neutrals */
  --color-white: rgb(
    255,
    255,
    255
  ); /* kit: --background-color--background-primary / --base-color-neutral--white — areaPct 50.57% */
  --color-neutral-100: rgb(
    241,
    238,
    236
  ); /* kit: --background-color--background-secondary / --base-color-neutral--neutral-light-100 — areaPct 4.39% (.stats_component, .split-box_component) */
  --color-grey-32: rgb(
    51,
    51,
    51
  ); /* kit: sin var — neutral oscuro puntual (.renew_path, .page-wrapper, .navbar_*, .footer) — usado en stroke/border de iconos */
  --color-grey-warm: rgb(
    153,
    139,
    137
  ); /* kit: sin var — gris tibio aislado de .footer_link-list-external-arrow (stroke/border) */
  --color-black: rgb(
    0,
    0,
    0
  ); /* kit: sin var — fondo de .global_media-overlay (areaPct 4.57%) */

  /* alphas (overlays del raw) */
  --color-danelec-red-20: rgba(
    51,
    23,
    20,
    0.2
  ); /* 21 borders (.global_divider, .global_arrow-circle, .solutions_product-heading, .button-text, .footer_bottom-wrapper) */
  --color-danelec-red-10: rgba(
    51,
    23,
    20,
    0.1
  ); /* 7 borders (.use-cases_block-cta, .blog-feed_divider, .footer_top-wrapper) */
  --color-danelec-orange-10: rgba(
    255,
    78,
    42,
    0.1
  ); /* 6 backgrounds (.global_blog-tag) */
  --color-white-50: rgba(
    255,
    255,
    255,
    0.5
  ); /* 2 borders sobre dark (.button hover state border) */
  --color-white-20: rgba(255, 255, 255, 0.2); /* 5 borders (.hero_link-block) */
  --color-white-00: rgba(
    255,
    255,
    255,
    0
  ); /* fondo idle de .button (transparente, pareja con border) */
  --color-black-35: rgba(
    0,
    0,
    0,
    0.35
  ); /* fondo de .navbar_background — usar SIEMPRE en par con --scrim-nav-filter */
  --color-black-70: rgba(
    0,
    0,
    0,
    0.7
  ); /* backdrop del cookie-information overlay (.go1632949049) — areaPct 5.98% */
  --color-warm-grey-00: rgba(
    207,
    201,
    196,
    0
  ); /* 3 borders transparentes idle (.button) — pareja con hover-border visible */

  /* ---- Gradients (declarados) ----------------------------------------- */
  --gradient-radial-orange: radial-gradient(
    circle,
    rgb(255, 78, 42) 10%,
    rgba(255, 78, 42, 0) 58%
  );
  /* .button_radial-gradient / .global_radial-hover (count 10) */
  --gradient-fade-orange: linear-gradient(
    90deg,
    rgba(255, 78, 42, 0.25),
    rgba(255, 255, 255, 0)
  );
  /* .home-intro_bottom-line — fade horizontal (count 8) */
  --gradient-dark-to-red: linear-gradient(
    180deg,
    rgba(51, 23, 20, 0),
    var(--color-danelec-red)
  );
  /* kit: usa --base-color-red--danelec-red — overlay decorativo (count 1) */

  /* ---- Typography: family ----------------------------------------------- */
  --font-sans: "General Sans", Arial, sans-serif; /* kit Webflow original pedía "Aeonik"; usamos General Sans (familia hermana, OFL, self-hosted) */

  /* ---- Typography: size scale (rem, ratio ~1.284) ---------------------- */
  --font-size-0_69: 0.69rem; /* 10.15px @laptop — caption uppercase (.global_blog-tag, .text-style-caption) — count 42 */
  --font-size-0_7: 0.7rem; /* 10.34px @laptop — texto pequeño puntual (.footer_small-text, .footer_small-link) — count 8 (isolated) */
  --font-size-0_875: 0.875rem; /* 12.92px @laptop — body sm (.text-size-small, .footer_link) — count 46 */
  --font-size-1: 1rem; /* 14.77px @laptop — text base (.navbar_dropdown-text, .button_text) — count 13 */
  --font-size-1_06: 1.06rem; /* 15.69px @laptop — body regular (.text-size-regular, .hero_link-text) — count 14 */
  --font-size-1_25: 1.25rem; /* 18.46px @laptop — body medium (.text-size-medium, .text-weight-medium, .footer_tagline) — count 9 (isolated) */
  --font-size-1_3: 1.3rem; /* 19.20px @laptop — heading small (.solutions_product-item-heading-text, .text-color-primary) — count 9 (isolated) */
  --font-size-1_5: 1.5rem; /* 22.15px @laptop — h6 (.heading-style-h6) — count 31 */
  --font-size-2: 2rem; /* 29.53px @laptop — h5 (.heading-style-h5) — count 266 */
  --font-size-2_625: 2.625rem; /* 38.76px @laptop — h4 — count 230 */
  --font-size-3: 3rem; /* 44.30px @laptop — h3 (titular principal recurrente .split-chars) — count 432 (DOMINANTE) */
  --font-size-5_125: 5.125rem; /* 75.68px @laptop — h2 (display lg) — count 31 */
  --font-size-6: 6rem; /* 88.60px @laptop — h1 (display xl) — count 31 */

  /* ---- Typography: line heights ---------------------------------------- */
  /* Patrón: line-height ≈ 1.1× font-size en displays, 1.5× en body/captions. */
  --line-height-0_756: 0.756rem; /* 11.17px @laptop — caption uppercase (default) */
  --line-height-1_03: 1.031rem; /* 15.23px @laptop — caption two-line (.text-style-caption variante) */
  --line-height-1_182: 1.182rem; /* 17.44px @laptop — body sm tight */
  --line-height-1_312: 1.312rem; /* 19.38px @laptop — body sm/footer-link */
  --line-height-1_381: 1.381rem; /* 20.40px @laptop — body regular (.hero_link-text) */
  --line-height-1_5: 1.5rem; /* 22.15px @laptop — text base */
  --line-height-1_8: 1.8rem; /* 26.58px @laptop — h6 */
  --line-height-2_2: 2.2rem; /* 32.48px @laptop — h5 (1.1×) */
  --line-height-2_625: 2.625rem; /* 38.76px @laptop — h4 (1×, tight) */
  --line-height-3: 3rem; /* 44.30px @laptop — h3 (1×, tight) */
  --line-height-5_38: 5.38rem; /* 79.46px @laptop — h2 display (1.05×) */
  --line-height-5_7: 5.7rem; /* 84.17px @laptop — h1 display (0.95×) */

  /* ---- Typography: tracking (letter-spacing) --------------------------- */
  --tracking-caption: 0.035rem; /*  +0.52px @laptop — uppercase caption (.global_blog-tag) */
  --tracking-h6: -0.025rem; /*  -0.37px @laptop — h6 / h4 .split-chars */
  --tracking-tight: -0.04rem; /*  -0.59px @laptop — h5/h3 dominante (-0.59 px) */
  --tracking-h4-loose: -0.02rem; /*  -0.30px @laptop — variante h4 (count 150) */
  --tracking-display: -0.05rem; /*  -0.74px @laptop — h1/h2 display 75-88px */

  /* ---- Typography: weights --------------------------------------------- */
  --weight-light: 300; /* h1/h2 display (.split-chars) */
  --weight-regular: 400; /* fontFace Aeonik-Regular (no es la dominante en body) */
  --weight-medium: 500; /* dominante en captions, body base y headings (.heading-style-*) */

  /* ---- Radii (rem; px @laptop) ----------------------------------------- */
  --radius-0_15: 0.15rem; /*  2.21px @laptop — .global_blog-tag (chip) — count 44 */
  --radius-0_25: 0.25rem; /*  3.69px @laptop — botones e imágenes (.button, .hero_link-image-wrapper, .stats_component, .home-intro_*, .global_media, .split-box_block, .use-cases_*, .home-blog_*) — count 176 (DOMINANTE) */
  --radius-0_3: 0.3rem; /*  4.43px @laptop — .navbar_background (isolated, count 8) */
  --radius-0_35: 0.35rem; /*  5.17px @laptop — .navbar_menu-center/-content/-hover — count 24 */
  --radius-0_5: 0.5rem; /*  7.38px @laptop — .container-huge, .solutions_media, .split-box_component — count 36 */
  --radius-0_8: 0.8rem; /* 11.81px @laptop — .solutions_product-item-hover — count 32 */
  --radius-5: 5rem; /* 73.83px @laptop — .global_arrow-circle (pill/círculo) — count 24 */
  --radius-10: 10rem; /* 147.66px @laptop — .blog-feed_item-author-avatar (full-circle de imagen) — count 12 */
  --radius-25: 25rem; /* 369.15px @laptop — .global_dotted-circle (círculo grande decorativo) — count 12 */

  /* ---- Borders --------------------------------------------------------- */
  --border-width-1: 1px;
  --border-width-1_5: 1.5px;
  --border-style-solid: solid;
  --border-style-dashed: dashed;

  /* ---- Motion ---------------------------------------------------------- */
  --duration-150: 150ms;
  --duration-200: 200ms; /* dominante (count 72) */
  --duration-250: 250ms;
  --duration-300: 300ms;
  --easing-default: ease; /* dominante (count 114) */
  --easing-emphasized: cubic-bezier(
    0.19,
    1,
    0.22,
    1
  ); /* "easeOutExpo" (count 32) — el parser del raw lo partió en 4 strings; aquí se reconstruye */

  /* ---- Effects --------------------------------------------------------- */
  --blur-nav: blur(
    15px
  ); /* backdrop del .navbar_background — pareja con --color-black-35 */
  --blur-button-hover: blur(
    10px
  ); /* backdrop del .button (hover orange) — pareja con bg orange */
  --blur-image-idle: blur(
    0px
  ); /* filter inicial de .global_gradient-image (estado idle de animación) */
  --filter-grayscale: grayscale(
    1
  ); /* footer arrow neutralizado (.footer_arrow) — animación grayscale→color */
  --filter-invert: invert(
    1
  ); /* .navbar_logo, .loader_lottie (logo blanco sobre dark) */

  /* ---- Icons (font-size de íconos) ------------------------------------- */
  --icon-size-21: 21px; /* tamaño dominante de icons (count 6) */
  --icon-size-28: 28px; /* count 1 — uso puntual */
  --icon-size-300: 300px; /* count 1 — ícono grande decorativo */
  --icon-size-11: 11px; /* count 1 — ícono mini */

  /* ---- Aspect ratios --------------------------------------------------- */
  --ratio-1: 1 / 1; /* count 11 — media cuadrada */
  --ratio-3-2: 3 / 2; /* count 7 — media wide */
  --ratio-5-6: 1 / 1.2; /* count 3 — portrait suave */
  --ratio-16-9: 16 / 9; /* count 3 — video */
  --ratio-2-3: 2 / 3; /* count 1 — portrait */
}

/* -----------------------------------------------------------------------------
   2) SEMANTICS
   -----------------------------------------------------------------------------
   Cada semantic apunta a una primitive y describe una INTENCIÓN. Varios
   semantics pueden compartir primitive cuando el propósito difiere (p.ej.
   inset de un control vs stack entre líneas, ambos = 1rem).
   ----------------------------------------------------------------------------- */

:root {
  /* ---- Color: rol semántico -------------------------------------------- */
  --color-bg-page: var(
    --color-white
  ); /* superficie clara base (areaPct 50.57%) */
  --color-bg-section-alt: var(
    --color-neutral-100
  ); /* superficie secundaria suave (.stats_component, .split-box_component) */
  --color-bg-media-overlay: var(
    --color-black
  ); /* fondo sólido del .global_media-overlay */
  --color-bg-tag-accent: var(
    --color-danelec-orange-10
  ); /* fondo de .global_blog-tag (chip orange suave) */
  --color-bg-button-idle: var(
    --color-white-00
  ); /* fondo idle de .button (transparente, pareja con border 0%) */
  --color-bg-overlay-cookie: var(
    --color-black-70
  ); /* backdrop del banner cookies (.go1632949049) */
  --color-bg-scrim-nav: var(
    --color-black-35
  ); /* fondo de .navbar_background — usar SIEMPRE en par con --scrim-nav-filter */

  --color-text-primary: var(
    --color-danelec-red
  ); /* texto base del kit (.text-color-primary, headings, body) — kit: --text-color--text-primary */
  --color-text-on-dark: var(
    --color-white
  ); /* texto sobre fondos oscuros (.button_text, .hero_content sobre dark) */
  --color-text-accent: var(
    --color-danelec-orange
  ); /* texto de link y acentos (.text-color-orange, .link-color--link-primary) */
  --color-text-neutral-mute: var(
    --color-grey-32
  ); /* texto/iconos neutros oscuros puntuales (.renew_path, .navbar_logo path) */

  --color-border-soft: var(
    --color-danelec-red-10
  ); /* divisores sutiles (.use-cases_block-cta, .blog-feed_divider, .footer_top-wrapper) */
  --color-border-mid: var(
    --color-danelec-red-20
  ); /* divisores medios (.global_divider, .global_arrow-circle, .solutions_product-heading, .button-text, .footer_bottom-wrapper) */
  --color-border-accent: var(
    --color-danelec-orange
  ); /* borders acento (.home-intro_bottom-line, .use-cases_hover-divider) — kit: --border-color--border-alternate */
  --color-border-on-dark-strong: var(
    --color-white-50
  ); /* border de .button sobre dark (hover/elevated) */
  --color-border-on-dark-soft: var(
    --color-white-20
  ); /* border sutil sobre dark (.hero_link-block) */
  --color-border-button-idle: var(
    --color-warm-grey-00
  ); /* border idle del .button (transparente, pareja con bg 0% — fade-in hover) */
  --color-border-arrow-mute: var(
    --color-grey-warm
  ); /* stroke gris tibio de .footer_link-list-external-arrow */

  --color-accent: var(--color-danelec-orange); /* acento único del sistema */

  /* ---- Spacing: rol semántico ------------------------------------------ */
  /* Convención: inset = padding interior de elemento, stack = gap entre hijos. */

  /* inset (paddingY/X de componentes) — asProperty dominante: padding* */
  --inset-control-y: var(--space-0_5); /*  0.5rem — .button paddingY base */
  --inset-control-x: var(
    --space-0_8
  ); /*  0.8rem — .button paddingX (.global_blog-tag paddingX) */
  --inset-chip-y: var(
    --space-0_25
  ); /*  0.25rem — .global_blog-tag paddingY tight */
  --inset-link-y: var(--space-1); /*  1rem — .footer_link paddingY (count 64) */
  --inset-section-x: var(
    --space-5_33
  ); /*  5.33rem — .padding-global / .section_hero-landingpage paddingX (count 20) */
  --inset-section-y-sm: var(
    --space-3
  ); /*  3rem — section paddingY pequeño (.padding-section variante) */
  --inset-section-y-md: var(
    --space-4
  ); /*  4rem — section paddingY medio (.padding-section default, count 10) */
  --inset-section-y-lg: var(
    --space-8
  ); /*  8rem — section paddingY grande (count 10) */

  /* stack (rowGap/columnGap entre hijos) */
  --stack-2xs: var(
    --space-0_25
  ); /*  0.25rem — gap nano (.use-cases_block-cta-text, .blog-feed_item-author) */
  --stack-xs: var(
    --space-0_4
  ); /*  0.4rem — gap diminuto (.navbar_dropdown-toggle, .blog-feed_item-top) */
  --stack-sm: var(
    --space-0_5
  ); /*  0.5rem — gap base recurrente (.navbar_menu-content, .hero_link-*, .padding-section) — DOMINANTE (count 121) */
  --stack-md: var(
    --space-1
  ); /*  1rem — gap general (.navbar_component, .hero_text-wrapper, .container-huge, .home-intro_bottom, .w-layout-grid, .solutions_product-list) — count 102 */
  --stack-lg: var(
    --space-1_5
  ); /*  1.5rem — gap de columnas medias (.navbar_component, .hero_text-lower, .home-intro_component, .split-box_block, .quote_component, .cta-split_item) */
  --stack-xl: var(
    --space-2
  ); /*  2rem — gap entre bloques (.hero_content, .stats_*, .solutions_content-bottom, .home-blog_collection-list, .use-cases_block-content) */
  --stack-2xl: var(
    --space-3
  ); /*  3rem — gap mayor (.hero_content columnGap, .w-layout-grid wide) */

  /* offsets puntuales (margins negativos del kit) */
  --offset-hover-tile: var(
    --space-neg-0_4
  ); /* -0.4rem — desplazamiento de .solutions_product-item-hover (marginTop/Left para tile elevado) */
  --offset-blog-tag: var(
    --space-neg-1
  ); /* -1rem — marginTop puntual de .global_blog-tag (count 11) */
  --offset-hero-divider: var(
    --space-neg-divider
  ); /* -52.27rem — .hero_link-divider (línea decorativa que sale del hero) */

  /* container lateral (margins horizontales del .container-large) */
  --inset-page-x-mid: var(
    --space-32_5
  ); /* 32.5rem — marginX de .container-large recurrente (count 16) */
  --inset-page-x-lg: var(
    --space-35
  ); /*  35rem — marginX de .container-large secundario (count 8) */

  /* ---- Typography: rol semántico (combinaciones canónicas) ------------- */
  /* sans (Aeonik) — única familia */
  --type-caption: var(--weight-medium) var(--font-size-0_69) /
    var(--line-height-0_756) var(--font-sans); /* .global_blog-tag, .text-style-caption — uppercase, letter-spacing +0.035rem */
  --type-footer-small: var(--weight-medium) var(--font-size-0_7) /
    var(--line-height-1_312) var(--font-sans); /* .footer_small-text, .footer_small-link */
  --type-body-sm: var(--weight-regular) var(--font-size-0_875) /
    var(--line-height-1_312) var(--font-sans); /* .text-size-small, .footer_link */
  --type-body-base: var(--weight-medium) var(--font-size-1) /
    var(--line-height-1_5) var(--font-sans); /* .navbar_dropdown-text, .button_text */
  --type-body-md: var(--weight-regular) var(--font-size-1_06) /
    var(--line-height-1_381) var(--font-sans); /* .text-size-regular, .hero_link-text */
  --type-body-lg: var(--weight-medium) var(--font-size-1_25) /
    var(--line-height-1_5) var(--font-sans); /* .text-size-medium, .text-weight-medium, .footer_tagline */
  --type-h6: var(--weight-medium) var(--font-size-1_5) / var(--line-height-1_8)
    var(--font-sans); /* .heading-style-h6 — letter-spacing -0.025rem */
  --type-h5: var(--weight-medium) var(--font-size-2) / var(--line-height-2_2)
    var(--font-sans); /* .heading-style-h5 — letter-spacing -0.040rem */
  --type-h4: var(--weight-medium) var(--font-size-2_625) /
    var(--line-height-2_625) var(--font-sans); /* h4 split-chars — letter-spacing -0.020rem (variante loose, dominante) */
  --type-h3: var(--weight-medium) var(--font-size-3) / var(--line-height-3)
    var(--font-sans); /* h3 split-chars — letter-spacing -0.040rem — DOMINANTE en pantallas (count 432) */
  --type-h2-display: var(--weight-light) var(--font-size-5_125) /
    var(--line-height-5_38) var(--font-sans); /* h2 display .split-chars — peso 300, letter-spacing -0.050rem */
  --type-h1-display: var(--weight-light) var(--font-size-6) /
    var(--line-height-5_7) var(--font-sans); /* h1 display .split-chars — peso 300, letter-spacing -0.050rem */

  /* ---- Radii: rol semántico -------------------------------------------- */
  --radius-chip: var(
    --radius-0_15
  ); /* .global_blog-tag — tags/chips pequeños */
  --radius-control: var(
    --radius-0_25
  ); /* .button + imágenes media (count 176 dominante) — controles e imágenes */
  --radius-surface-mute: var(--radius-0_3); /* .navbar_background */
  --radius-control-soft: var(
    --radius-0_35
  ); /* .navbar_menu-center/-content/-hover */
  --radius-surface: var(
    --radius-0_5
  ); /* .container-huge, .solutions_media, .split-box_component */
  --radius-card-hover: var(
    --radius-0_8
  ); /* .solutions_product-item-hover (variante elevada) */
  --radius-pill: var(
    --radius-5
  ); /* .global_arrow-circle (botón circular / flecha) */
  --radius-avatar: var(
    --radius-10
  ); /* .blog-feed_item-author-avatar (full-circle imagen) */
  --radius-circle-deco: var(
    --radius-25
  ); /* .global_dotted-circle (gran circular decorativo) */

  /* ---- Borders: shorthands semánticos ---------------------------------- */
  --border-divider-soft: var(--border-width-1) var(--border-style-solid)
    var(--color-border-soft); /* 1px solid alpha-red-10 (count 7) */
  --border-divider-mid: var(--border-width-1) var(--border-style-solid)
    var(--color-border-mid); /* 1px solid alpha-red-20 (count 26 dominante) */
  --border-divider-dashed: var(--border-width-1) var(--border-style-dashed)
    var(--color-border-mid); /* 1px dashed alpha-red-20 (count 14) */
  --border-on-dark-strong: var(--border-width-1) var(--border-style-solid)
    var(--color-border-on-dark-strong); /* 1px solid white-50 (count 8 — .button hover-ready) */
  --border-on-dark-soft: var(--border-width-1) var(--border-style-solid)
    var(--color-border-on-dark-soft); /* 1px solid white-20 (count 5 — .hero_link-block) */
  --border-accent-solid: var(--border-width-1) var(--border-style-solid)
    var(--color-border-accent); /* 1px solid orange (count 7 — .home-intro_bottom-line, .use-cases_hover-divider) */
  --border-dotted-circle: var(--border-width-1_5) var(--border-style-dashed)
    var(--color-border-accent); /* 1.5px dashed orange — específico .global_dotted-circle (count 12, decorativo) */
  --border-button-idle: var(--border-width-1) var(--border-style-solid)
    var(--color-border-button-idle); /* 1px solid warm-grey-00 — pareja idle con --color-bg-button-idle (button transparente) */

  /* ---- Container ------------------------------------------------------- */
  --container-page: var(
    --container-large
  ); /* 131.43rem ≈ 1940px @laptop — único container del kit */

  /* ---- Motion: rol semántico ------------------------------------------- */
  --transition-quick: var(--duration-150) var(--easing-default); /* hover ligero */
  --transition-base: var(--duration-200) var(--easing-default); /* DOMINANTE (count 72) — hovers de controles, links, iconos */
  --transition-soft: var(--duration-250) var(--easing-default); /* variante levemente más lenta */
  --transition-slow: var(--duration-300) var(--easing-default); /* paneles, dropdowns */
  --transition-emphasized: var(--duration-200) var(--easing-emphasized); /* expressive (cubic-bezier easeOutExpo, count 32) */

  /* ---- Effects: pareos atómicos ---------------------------------------- */
  /* Nav scrim (.navbar_background): el blur sólo es visible sobre una capa
     semi-transparente. El raw declara backdrop-filter: blur(15px) +
     background: rgba(0,0,0,0.35) sobre el mismo elemento. Aplicar SIEMPRE
     juntos para que el efecto sea visible:
        background:        var(--scrim-nav-bg);
        backdrop-filter:   var(--scrim-nav-filter); */
  --scrim-nav-bg: var(--color-black-35);
  --scrim-nav-filter: var(--blur-nav);

  /* Button hover orange-blur (.button hover state): blur(10px) sobre fondo
     orange sólido. El blur se nota porque el bg orange tiene textura/halo
     detrás (radial-gradient con .button_radial-gradient). Aplicar juntos:
        background:        var(--scrim-button-bg);
        backdrop-filter:   var(--scrim-button-filter); */
  --scrim-button-bg: var(--color-danelec-orange);
  --scrim-button-filter: var(--blur-button-hover);

  /* Button idle (atómico bg+border 0% alpha): el .button tiene bg
     rgba(255,255,255,0) + border rgba(207,201,196,0). Ambos hacen
     fade-in juntos en hover. Si se aplica solo uno, el botón se ve
     "saltado" entre estados. */
  --button-idle-bg: var(--color-bg-button-idle);
  --button-idle-border: var(--border-button-idle);

  /* Filtros independientes (no pareos) */
  --filter-image-base: var(
    --blur-image-idle
  ); /* estado inicial de filtro animable sobre imágenes */
  --filter-arrow-mono: var(
    --filter-grayscale
  ); /* .footer_arrow neutralizado (estado idle de animación grayscale→color) */
  --filter-logo-invert: var(
    --filter-invert
  ); /* .navbar_logo, .loader_lottie (logo blanco sobre dark) */
}

/* -----------------------------------------------------------------------------
   3) KEYFRAMES (declarados en el sitio)
   ----------------------------------------------------------------------------- */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes noiseAnimation {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 100% 100%;
  }
}

@keyframes ci-bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-20px);
  }
}

@keyframes fadeInOut {
  0% {
    opacity: 0.1;
    filter: grayscale(100%);
  }
  20% {
    opacity: 1;
    filter: grayscale(0%);
  }
  90% {
    opacity: 0.1;
    filter: grayscale(100%);
  }
  100% {
    opacity: 0.1;
    filter: grayscale(100%);
  }
}

/* =============================================================================
   NOTAS DE DESTILACIÓN
   =============================================================================

   ── DECISIONES DE NAMING ──────────────────────────────────────────────────────
   • Unidades: el kit usa rem fluido (root cambia por breakpoint vía clamp).
     Los valores se emiten en rem (la forma fuente) y el comentario indica
     el equivalente en px AL BREAKPOINT LAPTOP (1215px viewport ≈ root 14.77px).
     Para reproducir el sitio fielmente se debe replicar el root fluido
     (typical Webflow Client-First: root font-size: clamp(...vw...)).
   • Colors: el kit nombra colores con un esquema doble — capa "base" descriptiva
     (--base-color-orange--danelec-orange, --base-color-neutral--neutral-light-100)
     y capa semántica (--text-color--text-primary, --background-color--background-secondary).
     En el destilado se conservan los nombres "base" del autor (--color-danelec-red,
     --color-danelec-orange, --color-neutral-100) en primitives, y se reexponen
     las semánticas (--color-text-primary, --color-bg-section-alt, etc.).
   • Spacing: el kit NO expone vars para spacing en el raw (vars[] vacíos en
     todos los isolated). Se nombran por valor rem (--space-0_5, --space-1,
     --space-2, etc.). Los puntos con decimales irregulares (0.4, 0.8, 5.33)
     se conservan porque son los valores reales del autor.
   • Typography: única familia Aeonik con escala 0.69 → 0.875 → 1 → 1.06 →
     1.25 → 1.3 → 1.5 → 2 → 2.625 → 3 → 5.125 → 6 rem (ratio ~1.284). Los
     pesos disponibles son 300 (display), 400 (regular) y 500 (medium). El
     peso dominante en headings es 500 (no 700), lo que da el look "fino"
     característico del sitio. Letter-spacing es negativo y proporcional al
     tamaño (≈ -2.5% del font-size), positivo solo en el caption uppercase.
   • Radii: nombres por valor rem. La unidad recurrente es 0.25rem (count 176,
     botones e imágenes) — es el "radius-control" canónico. 5/10/25rem son
     valores grandes para círculos (pill / avatar / dotted-circle decorativo);
     se conservan tal cual porque cada uno tiene un uso específico.
   • Motion: easing dominante es `ease` (count 114). Hay un segundo easing
     emphasizado tipo "easeOutExpo" (cubic-bezier(0.19, 1, 0.22, 1)) que
     el rasterizador del raw partió en 4 piezas separadas — se reconstruye
     en --easing-emphasized.
   • Effects: el navbar usa scrim (bg semi-transparente + backdrop-blur)
     atómico — se emite como par --scrim-nav-bg / --scrim-nav-filter. El
     mismo patrón se aplica al hover del .button (orange + blur(10px)) y
     se documenta como par --scrim-button-*. Además el .button tiene un
     estado idle con bg+border ambos a alpha 0 que también forman pareo
     (se documenta en --button-idle-bg / --button-idle-border).

   ── DESCARTES (ruido del raw) ────────────────────────────────────────────────
   • Colors descartados:
       - rgb(51, 51, 51) (palette[3]): areaPct 0, sin var, 309 borders pero
         todos en path/svg/g/img/video (strokes interiores de iconos SVG y
         <video>) — NO es un color de sistema, es default de elementos
         media. CONSERVADO como primitive --color-grey-32 por uso bajo
         pero presente, sin exponerlo en semantics.
       - rgb(153, 139, 137) (palette[4]): areaPct 0, count total ~6, sólo
         en .footer_link-list-external-arrow (un único ícono). Se conserva
         como primitive --color-grey-warm + semantic --color-border-arrow-mute
         por trazabilidad pero su rol en el sistema es marginal.
       - Browser default rgb(0, 0, 238) (azul de <a> sin estilar): NO aparece
         en el raw — el kit estila todos los links, no hay ruido de defaults.
   • Spacing descartado (outliers con count <= 5 sin recurrencia, todos
     vars[] vacíos y sin sampleSelectors significativos): 0.97px, 0.78px,
     -1.94px, 0.74px, 0.59px, -1.48px, 1.94px, -640.2px (.use-cases_hover-divider
     offset puntual), 4.85px, 6.79px (paddingY de .button/.global_blog-tag
     ya cubierto por --space-0_5 + --space-0_8), 11.64px (footer_bottom-wrapper
     padding asimétrico), 17.46px, 393.31px / 432.1px / 403px (variantes de
     marginX de .container-large — se conserva sólo el centroide 480px),
     -48.5px (heading_component negativo puntual), 194px (.section_blog-feed
     paddingBottom único). Mantengo --space-neg-divider (-727.49px) por
     ser un offset visualmente significativo (línea que invade el hero).
   • Containers: sólo 1940px entra al sistema (count 14, .container-large).
     Los demás max-widths son anchos calculados de párrafos/headings con
     count <= 5 (504, 543, 670, 722, 776, 837, 981, 1436, etc.) — son
     resultado de `max-width: 50ch` o similar aplicado a texto renderizado,
     no tokens del DS. Descartados.
   • Shadows: el array `shadows` está vacío en el raw. El sitio NO usa
     box-shadow en componentes editoriales — la elevación se logra con
     borders y backdrop-blur.
   • Effects.filter.grayscale: 50+ valores intermedios entre grayscale(0)
     y grayscale(1) en .footer_arrow (count 1 cada uno) — son frames
     interpolados de una animación grayscale→color del cursor sobre el
     enlace del footer. Se conserva sólo el extremo grayscale(1) como
     primitive (--filter-grayscale) y el resto se descarta.
   • Motion: duración 7350ms (count 62) corresponde al ciclo de
     `noiseAnimation` (keyframe declarado) — no es una duración
     reutilizable, es la duración fija de un loop visual de ruido en
     background. Conservada SOLO como parte del keyframe; no se promueve
     a primitive de transición.
   • Typography.isolated:
       - 18.46px (.text-size-medium) y 19.20px (.solutions_product-item-heading-text):
         conservados como --font-size-1_25 y --font-size-1_3 por contar 9
         usos cada uno con selectors propios del sitio. No son ruido.
       - 10.34px (.footer_small-text): conservado como --font-size-0_7
         (count 8, selector específico de footer).
   • States: el bloque `states` (focus/focus-visible/hover) es un DIFF de
     290+ propiedades cambiadas — útil para reconstruir interacciones
     concretas pero NO genera tokens nuevos (todas las propiedades reusan
     primitives ya emitidas: white-50 border en hover de .button, orange
     gradient en .button hover, etc.). Se omite del destilado por diseño.
   • Aspect ratios: emitidas todas (5 valores) por ser pocas y todas con
     uso real. La isolated 2/3 (count 1) se conserva porque es un ratio
     de portrait que aparece en un <img> con selector identificable.
   • Icons: sólo 4 sizes (21, 28, 11, 300). Emitidas todas como primitives
     pero sin semantics (no hay agrupación clara — el 300 es decorativo,
     el 11 es mini, el 21/28 son icon-default/icon-medium).
   • Lato (fontFace): cargada en el sitio (4 weights: 300/300/400/400/700/700
     con unicode-range latin-ext) pero typography.families sólo lista Aeonik
     (count 1162). Lato no aparece en ningún selector relevante — es
     probablemente un fallback de fonts.gstatic.com cargado por defecto
     del template. DESCARTADA.
   • webflow-icons (fontFace embed base64): conservada implícitamente —
     no se expone como token porque es un icon-font interno del template
     Webflow para flechas de slider/dropdown nativas, no parte del DS
     editorial.

   ── PAREOS ATÓMICOS EMITIDOS ─────────────────────────────────────────────────
   • --scrim-nav-bg + --scrim-nav-filter → .navbar_background
     (backdrop-filter blur(15px) sólo es visible sobre alpha < 1).
   • --scrim-button-bg + --scrim-button-filter → .button hover state
     (blur(10px) sobre fondo orange con halo radial).
   • --button-idle-bg + --button-idle-border → .button idle state
     (bg blanco-00 + border warm-grey-00, ambos a alpha 0 — fade-in en hover).

   ── BREAKPOINTS (resumen) ────────────────────────────────────────────────────
   Capturado en 8 viewports: desktop-2848, desktop-1920, laptop-1215 (referencia
   px de este destilado), tablet-879, mobile-l-671, mobile-l-527, mobile-414,
   mobile-320. Los overrides observados son SOLO escalado fluido del root
   (rem → px). No hay cambios estructurales de tokens entre breakpoints en
   el raw (overrides incluyen typography/spacing/radii/effects/states pero
   son recomputaciones de los mismos valores rem, no tokens nuevos).
   ============================================================================= */