/* ==========================================================================
   WorkSet — Design System (single source of truth)
   Identidad PROPIA de WorkSet. apply/base44 = referencia de acabado, no copia.
   Jerarquía de color:
     · Primarios  → azules / negros / grises / neutros
     · Secundarios→ #026262 (verde) y TODAS sus variantes (brillante, opaca, mezclada con azules)
     · Terciario  → naranja (OPCIONAL, solo si no choca con el concepto IT)
   Responsive: fluido con clamp()/min()/max() + unidades de viewport. Mobile-first.
   ========================================================================== */

/* ---- Design tokens · TEMA OSCURO (default) ---------------------------- */
:root,
:root[data-theme="dark"] {
  /* PRIMARIOS — neutros / azules / negros / grises */
  --ws-bg:          #050D1A;   /* fondo más profundo            */
  --ws-bg-2:        #080F20;
  --ws-surface:     #0A1628;   /* tarjetas / paneles            */
  --ws-surface-2:   #0F2040;
  --ws-surface-3:   #162A50;
  --ws-text:        #F0F4F8;   /* texto ultra claro / crisp     */
  --ws-muted:       #8BA3B8;
  --ws-dim:         #4A6070;
  --ws-line:        rgba(0, 229, 255, .12);
  --ws-line-soft:   rgba(255, 255, 255, .07);

  /* SECUNDARIOS — #026262 (verde) y variantes, mezcladas con azules */
  --ws-green-deep:  #026262;   /* verde de marca, ancla         */
  --ws-teal:        #038F8F;   /* variante brillante            */
  --ws-cyan:        #00E5FF;   /* variante mezclada con azul    */
  --ws-mint:        #2FE6A8;   /* estado: resuelto / online     */
  --ws-mint-2:      #34D399;

  /* TERCIARIO — naranja (opcional; comentado hasta validar que no choca) */
  --ws-orange:      #FF8A3D;   /* usar con MUCHA mesura, solo acentos puntuales */

  /* Gradientes (acabado fino) */
  --ws-grad:        linear-gradient(135deg, var(--ws-teal) 0%, var(--ws-cyan) 100%);
  --ws-grad-cta:    linear-gradient(135deg, var(--ws-cyan) 0%, var(--ws-mint) 100%);
  --ws-grad-brand:  linear-gradient(120deg, var(--ws-green-deep) 0%, var(--ws-teal) 45%, var(--ws-cyan) 100%);

  /* Glass / superficies translúcidas */
  --ws-glass:       rgba(255, 255, 255, .05);
  --ws-glass-brd:   rgba(255, 255, 255, .10);

  color-scheme: dark;
}

/* ---- Design tokens · TEMA CLARO --------------------------------------- */
:root[data-theme="light"] {
  --ws-bg:          #F7FAFC;
  --ws-bg-2:        #EEF3F8;
  --ws-surface:     #FFFFFF;
  --ws-surface-2:   #F1F6FB;
  --ws-surface-3:   #E6EEF6;
  --ws-text:        #0A1628;
  --ws-muted:       #4A6070;
  --ws-dim:         #7E93A6;
  --ws-line:        rgba(2, 98, 98, .18);
  --ws-line-soft:   rgba(10, 22, 40, .08);

  --ws-green-deep:  #026262;
  --ws-teal:        #03807F;
  --ws-cyan:        #0098C9;   /* azul-cian más sobrio en claro */
  --ws-mint:        #12B886;
  --ws-mint-2:      #0CA678;

  --ws-glass:       rgba(2, 98, 98, .04);
  --ws-glass-brd:   rgba(10, 22, 40, .10);

  color-scheme: light;
}

/* ---- Escala fluida (clamp) -------------------------------------------- */
:root {
  /* Tipografía fluida: clamp(min, preferido-vw, max) */
  --fs-100: clamp(.72rem, .69rem + .15vw, .80rem);
  --fs-200: clamp(.82rem, .78rem + .20vw, .92rem);
  --fs-300: clamp(.92rem, .87rem + .28vw, 1.05rem);   /* body small  */
  --fs-400: clamp(1.00rem, .94rem + .34vw, 1.18rem);  /* body        */
  --fs-500: clamp(1.20rem, 1.08rem + .65vw, 1.55rem); /* lead / h4   */
  --fs-600: clamp(1.50rem, 1.25rem + 1.25vw, 2.20rem);/* h3          */
  --fs-700: clamp(2.00rem, 1.55rem + 2.30vw, 3.25rem);/* h2          */
  --fs-800: clamp(2.60rem, 1.90rem + 3.60vw, 4.75rem);/* h1 / display*/

  /* Espaciado fluido */
  --space-1: clamp(.25rem, .22rem + .15vw, .40rem);
  --space-2: clamp(.50rem, .44rem + .30vw, .80rem);
  --space-3: clamp(.75rem, .64rem + .55vw, 1.25rem);
  --space-4: clamp(1.00rem, .82rem + .90vw, 1.85rem);
  --space-5: clamp(1.50rem, 1.15rem + 1.75vw, 3.00rem);
  --space-6: clamp(2.25rem, 1.60rem + 3.25vw, 5.00rem); /* gutters de sección */

  --maxw: 1200px;
  --radius: clamp(12px, 10px + .6vw, 20px);
  --shadow: 0 30px 70px -30px rgba(0, 0, 0, .55);
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ---- Reset / base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  line-height: 1.6;
  color: var(--ws-text);
  background: var(--ws-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .3s ease, color .3s ease;
}
h1, h2, h3, h4 { line-height: 1.1; font-weight: 800; letter-spacing: -.02em; margin: 0 0 var(--space-3); }
h1 { font-size: var(--fs-800); }
h2 { font-size: var(--fs-700); }
h3 { font-size: var(--fs-600); }
h4 { font-size: var(--fs-500); }
p  { margin: 0 0 var(--space-3); color: var(--ws-muted); }
a  { color: var(--ws-cyan); text-decoration: none; }
a:hover { color: var(--ws-mint); }
img, svg { max-width: 100%; height: auto; display: block; }

/* ---- Layout primitives ------------------------------------------------- */
.ws-container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.ws-section { padding-block: var(--space-6); }

/* ---- Componentes base -------------------------------------------------- */
.ws-btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 700; font-size: var(--fs-300);
  padding: .75em 1.4em; border-radius: 999px;
  border: 1px solid var(--ws-line); color: var(--ws-text);
  background: transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.ws-btn:hover { transform: translateY(-1px); }
.ws-btn--primary {
  background: var(--ws-grad-cta); color: #02201d; border-color: transparent;
  box-shadow: 0 12px 34px -12px rgba(0, 229, 255, .55);
}
.ws-btn--primary:hover {
  background: linear-gradient(135deg, var(--ws-teal) 0%, var(--ws-green-deep) 100%);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -14px rgba(2, 98, 98, .65);
}
/* Terciario opcional: solo si se valida que el naranja no choca con el concepto IT */
.ws-btn--accent { background: var(--ws-orange); color: #1a0d00; border-color: transparent; }

.ws-card {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--ws-surface) 0%, var(--ws-bg-2) 100%);
  border: 1px solid var(--ws-line);
  border-radius: var(--radius);
  padding: var(--space-4);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.ws-card::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: var(--ws-grad-cta); transition: width .35s ease; }
.ws-card:hover { transform: translateY(-6px); border-color: rgba(0, 229, 255, .4); box-shadow: var(--shadow); }
.ws-card:hover::after { width: 100%; }

/* ---- Hero FX reutilizables (la "vibrancia" del home: glow + grid + partículas + pulso) ---- */
.ws-glow { position: absolute; z-index: 0; pointer-events: none; width: 680px; height: 680px;
  border-radius: 50%; top: -300px; left: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(0, 229, 255, .16), transparent 62%); filter: blur(40px); }
.ws-grid-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(0,229,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,229,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(circle at 50% 25%, #000, transparent 75%);
  mask-image: radial-gradient(circle at 50% 25%, #000, transparent 75%); }
.ws-particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .9; pointer-events: none; }
.ws-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ws-mint);
  box-shadow: 0 0 0 0 rgba(47,230,168,.7); animation: ws-pulse 2s infinite; }
@keyframes ws-pulse { 0% { box-shadow: 0 0 0 0 rgba(47,230,168,.6) } 70% { box-shadow: 0 0 0 10px rgba(47,230,168,0) } 100% { box-shadow: 0 0 0 0 rgba(47,230,168,0) } }

.ws-gradient-text {
  background: var(--ws-grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- Mapa embebido (Google My Maps) con filtro de marca + recorte de controles ---- */
.ws-map { position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--ws-line); background: var(--ws-surface); min-height: 360px; }
.ws-map--sm { min-height: 260px; }
.ws-map iframe { position: absolute; left: 0; top: -78px; width: 100%; height: calc(100% + 112px);
  border: 0; display: block;
  filter: invert(.90) hue-rotate(185deg) saturate(1.18) brightness(1.05) contrast(.9); }
.ws-map::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(140deg, rgba(2,98,98,.16), transparent 45%, rgba(0,229,255,.10));
  box-shadow: inset 0 0 70px 12px rgba(5,13,26,.55); }
:root[data-theme="light"] .ws-map iframe { filter: saturate(1.03); }
:root[data-theme="light"] .ws-map::after { background: linear-gradient(140deg, rgba(2,98,98,.05), transparent 55%); box-shadow: none; }

/* Respeta usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}