/* ============================================================================
   NEGINCO · neginco-tokens.css  (Avada child theme)
   ----------------------------------------------------------------------------
   Capa de identidad para WordPress + Avada. Tres bloques:
     A · @font-face (fuentes self-hosted, fonts/)
     B · :root  — design tokens (color, tipografía, espaciado, grid, radios,
                  elevación, motion). Espejo de colors_and_type.css del DS.
     C · Utilidades de marca .ng-*  — para pegar en el campo "CSS Class" /
                  "CSS Classes" de cualquier elemento de Avada Builder.

   Fuente de verdad de los tokens: el design system NEGINCO (colors_and_type.css).
   Si un valor cambia ahí, refléjalo aquí.

   El diseño NO se programa en este archivo: layouts y páginas se construyen con
   Avada (Global Options + Builder + Layouts). Esto solo da tokens + utilidades.
   ========================================================================== */

/* ===========================================================================
   A · FONTS — self-hosted (fonts/), woff2 + woff. Mismas familias que el DS,
   así Global Typography de Avada puede referenciar "Rubik" / "IBM Plex Mono".
   (Para que aparezcan en los desplegables de Avada, regístralas también en
    Avada → Options → Custom Fonts; comparten nombre, no hay conflicto.)
   =========================================================================== */
@font-face{font-family:'Rubik';src:url('fonts/Rubik-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Rubik';src:url('fonts/Rubik-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Rubik';src:url('fonts/Rubik-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Rubik';src:url('fonts/Rubik-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Rubik';src:url('fonts/Rubik-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Rubik';src:url('fonts/Rubik-800-italic.woff2') format('woff2');font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* ===========================================================================
   B · DESIGN TOKENS
   =========================================================================== */
:root{
  /* --- Primitivas: naranja de marca (manual core #E15637) ----------------- */
  --c-orange-50:#FDF1EC; --c-orange-100:#FBDED4; --c-orange-200:#F6BBA6;
  --c-orange-300:#EF9573; --c-orange-400:#E97251; --c-orange-500:#E15637;
  --c-orange-600:#C8451F; --c-orange-700:#A3371A; --c-orange-800:#7C2C16;
  --c-orange-900:#561F11;

  /* --- Primitivas: carbón / neutrales (manual core #232828) --------------- */
  --c-neutral-0:#FFFFFF; --c-neutral-50:#F6F7F7; --c-neutral-100:#ECEEEE;
  --c-neutral-200:#DADDDD; --c-neutral-300:#BFC3C3; --c-neutral-400:#989D9D;
  --c-neutral-500:#6E7474; --c-neutral-600:#515757; --c-neutral-700:#3A3F3F;
  --c-neutral-800:#2B3030; --c-neutral-900:#232828; --c-neutral-950:#161919;

  /* --- Primitivas: acento técnico (azul acero) [EXT] ---------------------- */
  --c-tech-50:#EAF1F6; --c-tech-100:#CBDDEA; --c-tech-300:#6FA1C4;
  --c-tech-500:#2C6E9C; --c-tech-600:#225777; --c-tech-700:#1A4459;

  /* --- Primitivas: estados [EXT] ------------------------------------------ */
  --c-success-100:#D8EEE0; --c-success-500:#1F8A5B; --c-success-700:#14603F;
  --c-warning-100:#FBEBC9; --c-warning-500:#E0A11A; --c-warning-700:#946207;
  --c-danger-100:#F6D9D5;  --c-danger-500:#C0392B;  --c-danger-700:#7E241A;

  /* --- Roles semánticos de color ------------------------------------------ */
  --color-primary:var(--c-orange-500);
  --color-primary-hover:var(--c-orange-600);
  --color-primary-pressed:var(--c-orange-700);
  --color-primary-subtle:var(--c-orange-50);
  --color-on-primary:var(--c-neutral-0);

  --color-accent:var(--c-tech-500);
  --color-accent-hover:var(--c-tech-600);
  --color-accent-subtle:var(--c-tech-50);
  --color-on-accent:var(--c-neutral-0);

  --color-surface:var(--c-neutral-0);
  --color-surface-subtle:var(--c-neutral-50);
  --color-surface-muted:var(--c-neutral-100);
  --color-surface-inverse:var(--c-neutral-900);
  --color-surface-inverse-2:var(--c-neutral-800);

  --color-fg:var(--c-neutral-900);
  --color-fg-muted:var(--c-neutral-600);
  --color-fg-subtle:var(--c-neutral-500);
  --color-fg-on-inverse:var(--c-neutral-0);
  --color-fg-on-inverse-muted:var(--c-neutral-300);

  --color-border:var(--c-neutral-200);
  --color-border-strong:var(--c-neutral-300);
  --color-border-inverse:rgba(255,255,255,0.14);

  --color-success:var(--c-success-500);
  --color-warning:var(--c-warning-500);
  --color-danger:var(--c-danger-500);
  --color-info:var(--c-tech-500);
  --color-focus:var(--c-tech-500);

  /* --- Tipografía --------------------------------------------------------- */
  --font-heading:'Rubik',system-ui,'Segoe UI',sans-serif;
  --font-body:'Rubik',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',ui-monospace,monospace;

  --fw-regular:400; /* @kind font */ --fw-medium:500; /* @kind font */ --fw-semibold:600; /* @kind font */ --fw-bold:700; /* @kind font */ --fw-black:800; /* @kind font */

  --fs-display:4.209rem; --fs-h1:3.052rem; --fs-h2:2.441rem; --fs-h3:1.953rem;
  --fs-h4:1.563rem; --fs-h5:1.25rem; --fs-body-lg:1.125rem; --fs-body:1rem;
  --fs-body-sm:0.875rem; --fs-caption:0.75rem; --fs-overline:0.6875rem;

  --lh-tight:1.05; /* @kind font */ --lh-heading:1.15; /* @kind font */ --lh-snug:1.35; /* @kind font */ --lh-body:1.65; /* @kind font */
  --measure:68ch; /* @kind font */

  --ls-tight:-0.02em; /* @kind font */ --ls-normal:0; /* @kind font */ --ls-label:0.04em; /* @kind font */ --ls-wide:0.18em; /* @kind font */

  /* --- Espaciado (base 4px) ----------------------------------------------- */
  --space-0:0; --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem;
  --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem;
  --space-10:2.5rem; --space-12:3rem; --space-16:4rem; --space-20:5rem;
  --space-24:6rem; --space-32:8rem;

  /* --- Grid & layout ------------------------------------------------------ */
  --container-max:1280px;
  --container-pad:var(--space-6);
  --container-pad-lg:var(--space-16);
  --grid-gutter:var(--space-6);

  /* --- Radios (casi rectos) ----------------------------------------------- */
  --radius-none:0; --radius-sm:2px; --radius-md:4px; --radius-lg:8px; --radius-pill:999px;

  /* --- Elevación (flat-first) --------------------------------------------- */
  --shadow-none:none;
  --shadow-sm:0 1px 2px rgba(22,25,25,0.06),0 1px 1px rgba(22,25,25,0.04);
  --shadow-md:0 4px 12px rgba(22,25,25,0.08),0 1px 3px rgba(22,25,25,0.06);
  --shadow-lg:0 16px 40px rgba(22,25,25,0.14);
  --overlay-photo:linear-gradient(180deg,rgba(22,25,25,0.05) 0%,rgba(22,25,25,0.55) 60%,rgba(22,25,25,0.85) 100%);
  --overlay-photo-side:linear-gradient(90deg,rgba(22,25,25,0.82) 0%,rgba(22,25,25,0.45) 45%,rgba(22,25,25,0) 80%);

  /* --- Motion (sin bounce) ------------------------------------------------ */
  --ease-standard:cubic-bezier(0.2,0,0.2,1); /* @kind other */
  --ease-out:cubic-bezier(0.16,1,0.3,1); /* @kind other */
  --dur-fast:120ms; /* @kind other */ --dur-base:200ms; /* @kind other */ --dur-slow:360ms; /* @kind other */
}

/* ===========================================================================
   C · UTILIDADES DE MARCA  .ng-*
   Pega el nombre de la clase (sin punto) en el campo "CSS Class" del elemento
   en Avada Builder. Cada bloque indica DÓNDE se usa.
   =========================================================================== */

/* --- C.1 · Barras "//" de identidad ------------------------------------------
   El elemento gráfico firma de NEGINCO: dos barras naranjas inclinadas, caps
   cuadrados (planos). Escala con el font-size del contenedor (em).
   Uso: en un elemento Text/Title vacío, o como kicker (ver .ng-kicker).
   --------------------------------------------------------------------------- */
.ng-bars{
  display:inline-block;width:1.15em;height:.86em;vertical-align:middle;
  background:
    linear-gradient(var(--color-primary),var(--color-primary)) .04em 0/.27em 100% no-repeat,
    linear-gradient(var(--color-primary),var(--color-primary)) .54em 0/.27em 100% no-repeat;
  transform:skewX(-16deg);
}

/* Kicker: barras // + etiqueta overline. Úsalo sobre títulos de sección.
   Aplica .ng-kicker a un elemento Text que contenga SOLO la etiqueta. */
.ng-kicker{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-heading);font-weight:var(--fw-semibold);
  font-size:var(--fs-overline);line-height:1;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--color-fg-muted);
}
.ng-kicker::before{
  content:"";flex:none;width:1.6em;height:1.05em;
  background:
    linear-gradient(var(--color-primary),var(--color-primary)) 0 0/.36em 100% no-repeat,
    linear-gradient(var(--color-primary),var(--color-primary)) .62em 0/.36em 100% no-repeat;
  transform:skewX(-16deg);
}

/* --- C.2 · Palabra-acento naranja en titulares -------------------------------
   Regla de marca: UNA sola palabra naranja por titular. Envuelve esa palabra
   en un <span class="ng-accent"> dentro del Title/Heading de Avada.
   --------------------------------------------------------------------------- */
.ng-accent{color:var(--color-primary)!important;}
.ng-accent--ink{color:var(--color-fg)!important;}        /* invertir: resto naranja, esta carbón */

/* --- C.3 · Gradiente de protección sobre fotografía --------------------------
   Para Containers/Columns con imagen de fondo + texto encima. Oscurece la
   parte baja (o el lado) para que el blanco y el naranja sigan legibles.
   Aplica al CONTENEDOR con bg image; su contenido debe ir por encima.
   --------------------------------------------------------------------------- */
.ng-photo-overlay{position:relative;}
.ng-photo-overlay::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--overlay-photo);
}
.ng-photo-overlay-side::before{background:var(--overlay-photo-side);}
/* Asegura que las columnas/contenido queden sobre el gradiente. */
.ng-photo-overlay > .fusion-row,
.ng-photo-overlay > .fusion-column-wrapper,
.ng-photo-overlay .fusion-column{position:relative;z-index:2;}

/* --- C.4 · Tarjeta plana NEGINCO --------------------------------------------
   Hairline 1px + radio 4px + sin sombra. Para Columns/Containers tipo card.
   .ng-card-lift añade el hover mecánico (sube 2px, borde naranja, sin bounce).
   --------------------------------------------------------------------------- */
.ng-card{
  background:var(--color-surface)!important;
  border:1px solid var(--color-border)!important;
  border-radius:var(--radius-md)!important;
  box-shadow:none!important;
}
.ng-card-lift{transition:border-color var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);}
.ng-card-lift:hover{border-color:var(--color-primary)!important;transform:translateY(-2px);}

/* --- C.5 · Radios near-sharp (anula el redondeo por defecto de Avada) -------- */
.ng-sharp{border-radius:0!important;}
.ng-radius-sm{border-radius:var(--radius-sm)!important;}
.ng-radius-md{border-radius:var(--radius-md)!important;}
.ng-pill{border-radius:var(--radius-pill)!important;}

/* --- C.6 · Secciones carbón -------------------------------------------------- */
.ng-on-carbon{background:var(--color-surface-inverse)!important;color:var(--color-fg-on-inverse);}
.ng-on-carbon .ng-hairline,
.ng-on-carbon.ng-card{border-color:var(--color-border-inverse)!important;}

/* --- C.7 · Texto utilitario -------------------------------------------------- */
.ng-overline{
  font-family:var(--font-heading);font-weight:var(--fw-semibold);
  font-size:var(--fs-overline);line-height:1;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--color-fg-muted);
}
.ng-tagline{
  font-family:var(--font-body);font-weight:var(--fw-medium);
  font-size:var(--fs-caption);letter-spacing:var(--ls-wide);text-transform:uppercase;
  color:var(--color-primary);
}
.ng-mono{font-family:var(--font-mono);font-weight:var(--fw-medium);letter-spacing:0;}
.ng-mono-accent{font-family:var(--font-mono);font-weight:var(--fw-medium);color:var(--color-accent);}

/* --- C.8 · Stat (número + etiqueta) — +500 / 15+ / 30% ----------------------
   Estructura sugerida en Avada: una Column con dos Text:
     Text 1 (número) → clase ng-stat-num
     Text 2 (etiqueta) → clase ng-stat-label
   --------------------------------------------------------------------------- */
.ng-stat-num{
  font-family:var(--font-heading);font-weight:var(--fw-black);
  font-size:var(--fs-display);line-height:1;letter-spacing:var(--ls-tight);
  color:var(--color-fg);
}
.ng-stat-num .ng-accent{color:var(--color-primary)!important;}
.ng-stat-label{
  font-family:var(--font-heading);font-weight:var(--fw-semibold);
  font-size:var(--fs-overline);line-height:1.3;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--color-fg-muted);
}

/* --- C.9 · Botón mecánico (sin bounce) --------------------------------------
   Avada ya estiliza los botones desde Global Options. Usa estas clases solo si
   necesitas forzar el comportamiento de marca en un botón concreto.
   --------------------------------------------------------------------------- */
.ng-btn{
  transition:background-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)!important;
  border-radius:var(--radius-md)!important;
}
.ng-btn:active{transform:translateY(1px);}

/* --- C.10 · Accesibilidad: respeta reduce-motion ---------------------------- */
@media (prefers-reduced-motion: reduce){
  .ng-card-lift,.ng-btn{transition:none!important;}
  .ng-card-lift:hover{transform:none;}
}