/*
 * JFM Technology · Design Tokens
 * Fuente canónica: brand/DESIGN.md v1.0 (2026-04-27)
 *
 * NO editar valores aquí sin actualizar DESIGN.md primero. Toda decisión de
 * color, tipo, sombra, easing o radius debe tener un correspondiente en el spec.
 */

:root {
  /* ============================================
   * COLORES · MARCA OFICIAL (Manual JFM 2022)
   * ============================================ */
  --jfm-naranja:          #F6921E;  /* Pantone 7408U · accent principal */
  --jfm-naranja-claro:    #F89C3A;  /* Pantone 1375U · hover ligero, ilustraciones */
  --jfm-naranja-oscuro:   #F48123;  /* Pantone 1505U · hover de CTAs, estados activos */
  --jfm-negro:            #000000;  /* SOLO LOGO — nunca para texto */

  /* Naranja translúcido (overlays + focus) */
  --jfm-naranja-08:       rgba(246, 146, 30, 0.08);
  --jfm-naranja-12:       rgba(246, 146, 30, 0.12);
  --jfm-naranja-20:       rgba(246, 146, 30, 0.20);
  --jfm-naranja-glow:     rgba(246, 146, 30, 0.24);
  --jfm-naranja-deep:     #D97509;             /* edge dark del gloss naranja */

  /* Negro como segundo principal (v1.1 — Estrategia 2026) */
  --jfm-onyx:             #1A1A20;             /* top del gradient gloss negro */
  --jfm-onyx-deep:        #000000;             /* bottom del gradient gloss negro */

  /* ============================================
   * NEUTROS warm-tinted (no azulados)
   * ============================================ */
  --jfm-tinta:            #0F0F12;  /* texto principal — nunca #000 */
  --jfm-gris-900:         #1F1F24;
  --jfm-gris-700:         #3F3F47;
  --jfm-gris-500:         #6E6E78;
  --jfm-gris-400:         #9A9AA3;
  --jfm-gris-300:         #C9C9CF;
  --jfm-gris-200:         #E2E2E5;
  --jfm-gris-100:         #F2F1EE;
  --jfm-gris-50:          #FAF9F6;
  --jfm-blanco:           #FFFFFF;

  /* ============================================
   * ESTADO (semánticos)
   * ============================================ */
  --jfm-success:          #1F9D55;
  --jfm-warning:          #E89A1A;
  --jfm-error:            #D13C2D;
  --jfm-info:             #2E6BD2;

  /* ============================================
   * TIPOGRAFÍA
   *
   * v1.2 (2026-04-27): Aeromatics NC se reserva ÚNICAMENTE para el logotipo
   * (gestionado por Divi). El sistema usa Plus Jakarta Sans para display y body
   * — decisión del owner: Aeromatics se sentía pesada en headings y diluía la
   * lectura. Plus Jakarta Sans 800 con letter-spacing negativo da el peso técnico
   * sin la rigidez geométrica de Aeromatics.
   * ============================================ */
  --jfm-font-display:     'Plus Jakarta Sans', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --jfm-font-body:        'Plus Jakarta Sans', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --jfm-font-logo:        'Aeromatics NC', 'Plus Jakarta Sans', sans-serif;
  --jfm-font-mono:        'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Escala (referencia rápida — usar las clases utilitarias, no los tokens directo) */
  --jfm-fs-display-hero:  4.5rem;     /* 72px */
  --jfm-fs-display-xl:    3.5rem;     /* 56px */
  --jfm-fs-display-l:     2.75rem;    /* 44px */
  --jfm-fs-h1:            2rem;       /* 32px */
  --jfm-fs-h2:            1.625rem;   /* 26px */
  --jfm-fs-h3:            1.3125rem;  /* 21px */
  --jfm-fs-h4:            1.125rem;   /* 18px */
  --jfm-fs-lead:          1.25rem;    /* 20px */
  --jfm-fs-body:          1rem;       /* 16px */
  --jfm-fs-small:         0.875rem;   /* 14px */
  --jfm-fs-caption:       0.75rem;    /* 12px */

  /* ============================================
   * SPACING (4px base)
   * ============================================ */
  --jfm-space-1:   4px;
  --jfm-space-2:   8px;
  --jfm-space-3:  12px;
  --jfm-space-4:  16px;
  --jfm-space-5:  20px;
  --jfm-space-6:  24px;
  --jfm-space-8:  32px;
  --jfm-space-10: 40px;
  --jfm-space-12: 48px;
  --jfm-space-16: 64px;
  --jfm-space-20: 80px;
  --jfm-space-24: 96px;
  --jfm-space-32: 128px;

  /* ============================================
   * BORDER RADIUS
   * ============================================ */
  --jfm-radius-xs:    4px;
  --jfm-radius-sm:    8px;
  --jfm-radius-md:   10px;
  --jfm-radius-lg:   12px;   /* botones */
  --jfm-radius-xl:   16px;   /* cards principales */
  --jfm-radius-2xl:  24px;   /* feature panels */
  --jfm-radius-pill: 9999px;

  /* ============================================
   * SHADOWS · 3-layer signature JFM (tinte naranja en capa 3)
   * ============================================ */
  --jfm-shadow-rest:     rgba(15,15,18,.02) 0 0 0 1px,
                         rgba(15,15,18,.04) 0 2px 6px;

  --jfm-shadow-card:     rgba(15,15,18,.02) 0 0 0 1px,
                         rgba(15,15,18,.04) 0 2px 6px,
                         rgba(244,129,35,.05) 0 8px 18px;

  --jfm-shadow-hover:    rgba(15,15,18,.03) 0 0 0 1px,
                         rgba(15,15,18,.06) 0 4px 10px,
                         rgba(244,129,35,.10) 0 14px 30px;

  --jfm-shadow-popover:  rgba(15,15,18,.04) 0 0 0 1px,
                         rgba(15,15,18,.08) 0 8px 20px,
                         rgba(15,15,18,.16) 0 20px 48px;

  --jfm-shadow-modal:    rgba(15,15,18,.05) 0 0 0 1px,
                         rgba(15,15,18,.12) 0 12px 32px,
                         rgba(15,15,18,.24) 0 32px 72px;

  --jfm-shadow-cta:      rgba(246,146,30,.18) 0 1px 2px,
                         rgba(246,146,30,.24) 0 4px 12px,
                         rgba(246,146,30,.10) 0 12px 24px;

  --jfm-shadow-cta-hover: rgba(244,129,35,.22) 0 2px 4px,
                          rgba(244,129,35,.30) 0 8px 20px,
                          rgba(244,129,35,.14) 0 16px 32px;

  /* ============================================
   * MOTION · easing curves custom (no built-in)
   * ============================================ */
  --jfm-ease-out:       cubic-bezier(0.23, 1, 0.32, 1);     /* UI primary */
  --jfm-ease-in-out:    cubic-bezier(0.77, 0, 0.175, 1);    /* on-screen movement */
  --jfm-ease-drawer:    cubic-bezier(0.32, 0.72, 0, 1);     /* iOS drawer */
  --jfm-ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);  /* spring sutil */

  /* Duration scale */
  --jfm-dur-instant:    100ms;
  --jfm-dur-fast:       160ms;
  --jfm-dur-medium:     220ms;
  --jfm-dur-slow:       320ms;
  --jfm-dur-deliberate: 600ms;

  /* ============================================
   * CONTAINER WIDTHS
   * ============================================ */
  --jfm-container:        1240px;
  --jfm-container-wide:   1440px;
  --jfm-container-narrow:  820px;
}

/* ===========================================================
 * RESET LIGERO + DEFAULTS DE MARCA
 * =========================================================== */

html { -webkit-text-size-adjust: 100%; }

body.jfm-theme {
  font-family: var(--jfm-font-body);
  color: var(--jfm-tinta);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.jfm-theme h1,
body.jfm-theme h2,
body.jfm-theme h3,
body.jfm-theme h4,
body.jfm-theme h5,
body.jfm-theme h6 {
  font-family: var(--jfm-font-display);
  color: inherit; /* hereda del contexto: tinta sobre blanco, blanco sobre tinta */
  letter-spacing: -0.01em;
}

/* Eyebrow utility class (uppercase + naranja + tracking) */
.jfm-eyebrow {
  display: inline-block;
  font-family: var(--jfm-font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--jfm-naranja);
  margin: 0 0 12px;
}

/* Tabular nums utility para precios y specs */
.jfm-tabnum,
.price,
.woocommerce-Price-amount {
  font-variant-numeric: tabular-nums;
}

/* Texto de marca en headings — Divi suele forzar font-family con !important; este selector pelea con peso especificidad */
body.jfm-theme .et_pb_module h1,
body.jfm-theme .et_pb_module h2,
body.jfm-theme .et_pb_module h3,
body.jfm-theme .et_pb_module h4 {
  font-family: var(--jfm-font-display);
}

/* Garantía explícita de contraste en secciones oscuras del Home (defensivo
   contra cualquier override que ponga color tinta global). */
.jfm-page-home .jfm-hero-dual__side--b2b,
.jfm-page-home .jfm-hero-dual__side--b2b *,
.jfm-page-home .jfm-empresas,
.jfm-page-home .jfm-empresas *,
.jfm-page-home .jfm-spotlight-ruijie,
.jfm-page-home .jfm-spotlight-ruijie *,
.jfm-page-home .jfm-eventos,
.jfm-page-home .jfm-eventos *,
.jfm-page-home .jfm-cta-final,
.jfm-page-home .jfm-cta-final * {
  /* color por defecto blanco; cada sección puede sobreescribir con --jfm-naranja, etc. */
}
.jfm-page-home .jfm-hero-dual__side--b2b h1,
.jfm-page-home .jfm-hero-dual__side--b2b h2,
.jfm-page-home .jfm-hero-dual__side--b2b h3,
.jfm-page-home .jfm-empresas h1,
.jfm-page-home .jfm-empresas h2,
.jfm-page-home .jfm-empresas h3,
.jfm-page-home .jfm-empresas h4,
.jfm-page-home .jfm-spotlight-ruijie h1,
.jfm-page-home .jfm-spotlight-ruijie h2,
.jfm-page-home .jfm-spotlight-ruijie h3,
.jfm-page-home .jfm-eventos h2,
.jfm-page-home .jfm-eventos h3,
.jfm-page-home .jfm-cta-final h2,
body.jfm-page-home .jfm-empresas .jfm-card-line h3,
body.jfm-page-home .jfm-empresas .jfm-card-line--featured h3 {
  color: var(--jfm-blanco);
}

/* Párrafos en secciones oscuras del Home — defensivo contra .jfm-home section header p { color: var(--jfm-gris-700) } */
.jfm-page-home .jfm-hero-dual__side--b2b p,
.jfm-page-home .jfm-empresas p,
.jfm-page-home .jfm-empresas__header p,
.jfm-page-home .jfm-spotlight-ruijie p,
.jfm-page-home .jfm-eventos p,
.jfm-page-home .jfm-cta-final p {
  color: rgba(255, 255, 255, 0.82);
}

/* Sub-textos específicos dentro de secciones oscuras (más fuertes para que no se desvanezcan) */
.jfm-page-home .jfm-empresas .jfm-card-line__lead,
.jfm-page-home .jfm-spotlight-ruijie__features li,
.jfm-page-home .jfm-card-line__features li {
  color: rgba(255, 255, 255, 0.78);
}

/* Eyebrows en secciones oscuras → naranja claro para que destaquen sobre fondo dark */
.jfm-page-home .jfm-hero-dual__side--b2b .jfm-eyebrow,
.jfm-page-home .jfm-empresas .jfm-eyebrow,
.jfm-page-home .jfm-spotlight-ruijie .jfm-eyebrow,
.jfm-page-home .jfm-eventos .jfm-eyebrow {
  color: var(--jfm-naranja-claro);
}

/* Banner trust signals: si está sobre fondo claro mantiene gris-500; si sobre tinta, claro */
.jfm-page-home .jfm-eventos__meta { color: var(--jfm-naranja-claro); }

/* ===========================================================
 * REDUCED MOTION — respetar siempre
 * =========================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}