/* ============================================================
   Skyline Dataforce — shared design system
   Used by: Skyline Dataforce.html, Mantenimiento Predictivo.html,
            Analítica Avanzada.html
   ============================================================ */
:root{
  --ink:#0B0F14;
  --hero-bg:#E7E0D0;
  --hero-bg-rgb:231,224,208;
  --paper:#F3EEE3;        /* editorial light body bg */
  --paper-rgb:243,238,227;
  --paper-2:#ECE5D6;      /* alt light band */
  --cyan:#4FD8FF;
  --cyan-rgb:79,216,255;
  --red:#FF3B30;
  --dark-a:#050A12;
  --dark-b:#0A1626;
  --light-text:#EAF0F8;
  /* tweakable feel */
  --g1:0.86;
  --g2:0.35;
  --vig:0.55;
  --bfu-blur:20px;
  --bfu-y:40px;
  --bfu-dur:1s;
  --hero-shift:6vh;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  margin:0;
  background:var(--dark-a);
  color:var(--light-text);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(79,216,255,0.25);}
.font-grotesk{font-family:'Space Grotesk',sans-serif;}
.font-400{font-weight:400;}
.font-500{font-weight:500;}
.font-600{font-weight:600;}
.font-700{font-weight:700;}

/* ---- blur-fade-up (reveal driven by ancestor .reveal.in) ---- */
.bfu{opacity:0;filter:blur(var(--bfu-blur));transform:translateY(var(--bfu-y));
  transition:opacity var(--bfu-dur) cubic-bezier(.16,1,.3,1),filter var(--bfu-dur) cubic-bezier(.16,1,.3,1),transform var(--bfu-dur) cubic-bezier(.16,1,.3,1);}
.bfu.in,.reveal.in .bfu{opacity:1;filter:blur(0);transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .bfu{opacity:1;filter:none;transform:none;transition:none;}
}

/* ---- liquid glass: dark tint (for light bg) ---- */
.glass-dark{
  position:relative;
  background:rgba(0,0,0,0.03);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  border:1px solid rgba(0,0,0,0.08);
  overflow:hidden;
}
.glass-dark::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(0,0,0,0.18),rgba(0,0,0,0) 40%,rgba(0,0,0,0) 60%,rgba(0,0,0,0.10));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}

/* ---- liquid glass: light tint (for dark bg) ---- */
.glass-light{
  position:relative;
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.12);
  overflow:hidden;
}
.glass-light::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(255,255,255,0.5),rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,0.22));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.glass-light:hover{background:rgba(255,255,255,0.09);border-color:rgba(255,255,255,0.2);}
.glass-dark:hover{background:rgba(0,0,0,0.05);border-color:rgba(0,0,0,0.14);}

/* ---- explore box ---- */
.explore-box{
  border:1px solid rgba(255,255,255,0.16);
  border-radius:14px;
  background:rgba(255,255,255,0.015);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  transition:border-color .5s ease,box-shadow .5s ease,background .5s ease,transform .5s ease;
}
.explore-box:hover{
  border-color:rgba(var(--cyan-rgb),0.55);
  box-shadow:0 0 0 1px rgba(var(--cyan-rgb),0.25),0 10px 50px -12px rgba(var(--cyan-rgb),0.35),inset 0 0 30px rgba(var(--cyan-rgb),0.06);
  background:rgba(var(--cyan-rgb),0.03);
  transform:translateY(-2px);
}
.explore-box .arrow{transition:transform .45s cubic-bezier(.16,1,.3,1);}
.explore-box:hover .arrow{transform:translate(4px,-4px);}

/* ---- nav ---- */
.nav-root{transition:opacity .5s ease,transform .5s ease;}
.nav-hidden{opacity:0;transform:translateY(-22px);pointer-events:none;}

.navlink{position:relative;text-decoration:none;font-size:14px;letter-spacing:.01em;transition:color .3s ease;}
.navlink::after{content:"";position:absolute;left:0;bottom:-5px;height:1px;width:0;transition:width .35s cubic-bezier(.16,1,.3,1);}
.navlink:hover::after{width:100%;}
/* dark-text nav (over light hero) */
.nav-dark .navlink{color:rgba(11,15,20,0.62);}
.nav-dark .navlink:hover{color:var(--ink);}
.nav-dark .navlink::after{background:var(--ink);}
/* light-text nav (over dark hero) */
.nav-light .navlink{color:rgba(234,240,248,0.66);}
.nav-light .navlink:hover{color:var(--light-text);}
.nav-light .navlink::after{background:var(--light-text);}

.cta-solid{background:var(--ink);color:var(--light-text);transition:transform .3s ease,box-shadow .3s ease,background .3s ease;}
.cta-solid:hover{transform:translateY(-2px);box-shadow:0 14px 40px -14px rgba(11,15,20,0.55);}
.cta-solid .arrow{transition:transform .4s cubic-bezier(.16,1,.3,1);}
.cta-solid:hover .arrow{transform:translateX(4px);}
.glass-dark .arrow,.glass-light .arrow{transition:transform .4s cubic-bezier(.16,1,.3,1);}
.glass-dark:hover .arrow,.glass-light:hover .arrow{transform:translateX(3px);}

/* cyan accent CTA */
.cta-cyan{background:var(--cyan);color:var(--dark-a);transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 18px 60px -18px rgba(var(--cyan-rgb),0.6);}
.cta-cyan:hover{transform:translateY(-2px);box-shadow:0 22px 70px -16px rgba(var(--cyan-rgb),0.8);}
.cta-cyan .arrow{transition:transform .4s cubic-bezier(.16,1,.3,1);}
.cta-cyan:hover .arrow{transform:translateX(4px);}

.vignette{background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(5,10,18,var(--vig)) 100%);}

/* hero video drop (landing only) */
.hero-video{transform:translateY(var(--hero-shift));}
.hero-warm{background:#E9D9B5;mix-blend-mode:multiply;opacity:.5;}
.seam-down{background:linear-gradient(to bottom,rgba(231,224,208,0) 0%,rgba(20,28,40,0.0) 40%,var(--dark-a) 100%);}

.mobile-link{text-decoration:none;font-size:22px;letter-spacing:-0.01em;padding:6px 0;}

/* ============ editorial (light body) helpers ============ */
.paper{background:var(--paper);color:var(--ink);}
.eyebrow{font-family:'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.28em;font-size:11px;}
.rule{height:1px;background:rgba(11,15,20,0.14);}
.ink-60{color:rgba(11,15,20,0.6);}
.ink-45{color:rgba(11,15,20,0.45);}
.ink-72{color:rgba(11,15,20,0.72);}

/* stat figure */
.stat-fig{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-0.03em;line-height:0.9;font-variant-numeric:tabular-nums;}

/* stat: hover lift + accent bar that draws in when the section reveals */
.stat-item{transition:transform .4s cubic-bezier(.16,1,.3,1);}
.stat-item:hover{transform:translateY(-3px);}
.stat-item:hover .stat-bar{width:64px;}
.stat-bar{height:2px;width:44px;margin-top:16px;border-radius:2px;background:var(--cyan);
  transform:scaleX(0);transform-origin:left;
  transition:transform .85s cubic-bezier(.16,1,.3,1),width .4s ease;}
.reveal.in .stat-bar{transform:scaleX(1);}
@media (prefers-reduced-motion: reduce){.stat-bar{transition:none;transform:scaleX(1);}}

/* hairline card for editorial sections */
.card-line{
  border:1px solid rgba(11,15,20,0.12);
  border-radius:16px;
  background:rgba(255,255,255,0.4);
  transition:border-color .45s ease,box-shadow .45s ease,transform .45s ease,background .45s ease;
}
.card-line:hover{
  border-color:rgba(11,15,20,0.22);
  box-shadow:0 18px 50px -28px rgba(11,15,20,0.4);
  transform:translateY(-2px);
}

/* integration / tech chip */
.tech-chip{
  border:1px solid rgba(11,15,20,0.14);
  border-radius:999px;
  background:rgba(255,255,255,0.35);
  transition:border-color .35s ease,background .35s ease,color .35s ease;
}
.tech-chip:hover{border-color:rgba(var(--cyan-rgb),0.6);background:rgba(var(--cyan-rgb),0.05);}

/* footnote / reference superscript */
.ref-sup{font-size:0.55em;vertical-align:super;color:rgba(11,15,20,0.4);font-family:'Space Grotesk',sans-serif;padding-left:1px;}
.ref-sup.on-dark{color:rgba(234,240,248,0.5);}
a.ref-link{color:inherit;text-decoration:none;}
a.ref-link:hover{color:var(--ink);}

/* live digital-twin figure (clickable screenshot → external app) */
.twin-figure .arrow{transition:transform .4s cubic-bezier(.16,1,.3,1);}
.twin-figure:hover .arrow{transform:translate(3px,-3px);}
.twin-figure .twin-veil{transition:opacity .45s ease;}
.twin-figure:hover .twin-veil{opacity:.7;}