/* ════════════════════════════════════════════════════════════════════
   FORDRAX DESIGN SYSTEM v1.0
   Drop-in styles · solo pega este archivo + el <link> de fuentes
   Stack: 0 dependencies, sin build tools, CSS vanilla puro
   ════════════════════════════════════════════════════════════════════ */

/* ═══ RESET (scoped — solo aplica a elementos fx-*) ═══════════════ */
[class*="fx-"],[class*="fx-"]::before,[class*="fx-"]::after{margin:0;padding:0;box-sizing:border-box}

/* ═══ CSS TOKENS (variables) ═══════════════════════════════════════ */
:root{
  /* Palette */
  --bg:       #07080F;   /* Background base */
  --bg2:      #0B0C16;   /* Card/section darker */
  --bg3:      #11131F;   /* Hover / elevated */
  --line:     rgba(255,255,255,.07);
  --white:    #F0F4FF;
  --body:     #8A90A8;
  --muted:    #5A607A;

  /* Brand */
  --p:        #6C63FF;   /* Primary morado */
  --pink:     #E84393;   /* Accent rosa */
  --teal:     #00D4AA;   /* Success / accent */
  --purple:   #9B59FF;   /* Secondary morado */

  /* Gradient principal (hero, buttons, headers) */
  --grd: linear-gradient(130deg, #6C63FF 0%, #9B59FF 50%, #E84393 100%);

  /* Radius */
  --rS:   8px;
  --rM:   12px;
  --rL:   16px;
  --rXL:  20px;
  --rFull: 100px;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, monospace;
  --font-script: 'Caveat', 'Brush Script MT', cursive;

  /* Shadow */
  --shadow-glow: 0 0 60px rgba(108,99,255,.18);
  --shadow-pill: 0 4px 24px rgba(108,99,255,.4);
}

/* body/a/button/img resets REMOVIDOS para no romper tailwind/next
   Los fx-* elementos heredan font-family via fx-nav/fx-section/fx-container. */
.fx-section, .fx-nav, .fx-container, .fx-section-narrow,
.fx-hero-bg, .fx-card, .fx-btn-primary, .fx-btn-secondary, .fx-btn-sm,
.fx-modal-box, .fx-modal-overlay, .fx-input, .fx-label, .fx-field,
[class*="fx-h"], .fx-lead, .fx-eyebrow, .fx-sub-mono, .fx-subtitle-fade,
.fx-gradient-text, .fx-pill, .fx-kpi, [class*="fx-signature"],
.fx-logo, .fx-logo-mark, .fx-logo-name, .fx-logo-tag,
.fx-reveal, .fx-fade-in, .fx-slide-up, .fx-scale-in {
  font-family: var(--font-sans);
}

/* ═══ TYPOGRAPHY ═══════════════════════════════════════════════════ */
.fx-h1{font-size:clamp(56px,8vw,116px);font-weight:900;line-height:.9;letter-spacing:-.045em}
.fx-h2{font-size:clamp(40px,5vw,72px);font-weight:800;line-height:1.05;letter-spacing:-.03em}
.fx-h3{font-size:clamp(26px,2.5vw,36px);font-weight:800;letter-spacing:-.02em}

.fx-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(108,99,255,.1);border:1px solid rgba(108,99,255,.25);
  border-radius:var(--rFull);padding:7px 18px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(240,244,255,.7);
}
.fx-eyebrow-dot{
  width:7px;height:7px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 10px var(--teal);animation:fxPulse 2s ease-in-out infinite;
}
@keyframes fxPulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Gradient text (el "construimos la razón" effect) */
.fx-gradient-text{
  background: var(--grd);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  display:inline-block;
}

/* Subtítulo mono teal (hero-sub) */
.fx-sub-mono{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--teal);
  display:inline-flex;align-items:center;gap:14px;
}
.fx-sub-mono::before,.fx-sub-mono::after{
  content:'';display:block;width:28px;height:1px;background:var(--teal);opacity:.5;
}

/* Section title con eyebrow */
.fx-section-title{
  font-size:clamp(40px,5vw,72px);font-weight:800;line-height:1.05;
  letter-spacing:-.03em;color:var(--white);
}

/* Italic fade subtitle */
.fx-subtitle-fade{
  color:rgba(240,244,255,.22);font-style:italic;font-weight:300;
  font-size:.52em;letter-spacing:-.02em;
}

/* Body copy */
.fx-lead{
  font-size:17px;font-weight:300;line-height:1.7;color:rgba(240,244,255,.72);
  max-width:720px;
}

/* ═══ LAYOUT ══════════════════════════════════════════════════════ */
.fx-container{max-width:1280px;margin:0 auto;padding:0 32px}
.fx-section{padding:128px 0;border-bottom:1px solid var(--line);position:relative}
.fx-section-narrow{max-width:820px;margin:0 auto;padding:0 32px}

/* ═══ BUTTONS ══════════════════════════════════════════════════════ */
.fx-btn-primary{
  display:inline-block;padding:14px 32px;background:var(--grd);color:#fff;
  border-radius:var(--rFull);font-weight:700;font-size:14px;letter-spacing:.01em;
  transition:transform .2s,box-shadow .25s,opacity .2s;
  box-shadow:var(--shadow-pill);border:0;cursor:pointer;font-family:inherit;
}
.fx-btn-primary:hover{transform:translateY(-1px);opacity:.92}

.fx-btn-secondary{
  display:inline-block;padding:14px 32px;background:rgba(255,255,255,.04);
  color:var(--white);border:1px solid rgba(255,255,255,.15);border-radius:var(--rFull);
  font-weight:600;font-size:14px;transition:all .2s;cursor:pointer;font-family:inherit;
}
.fx-btn-secondary:hover{background:rgba(255,255,255,.08);border-color:rgba(108,99,255,.45)}

/* Small pill */
.fx-btn-sm{
  display:inline-block;padding:8px 18px;background:rgba(255,255,255,.05);
  color:var(--white);border:1px solid var(--line);border-radius:var(--rFull);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;font-weight:600;
  transition:all .2s;cursor:pointer;
}
.fx-btn-sm:hover{border-color:var(--p);color:var(--p)}

/* ═══ CARDS ═══════════════════════════════════════════════════════ */
.fx-card{
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--rL);
  padding:32px;transition:border-color .3s,transform .25s;
}
.fx-card:hover{border-color:rgba(108,99,255,.3);transform:translateY(-2px)}

/* KPI card */
.fx-kpi{background:var(--bg2);border:1px solid var(--line);border-radius:var(--rM);padding:20px;transition:border-color .2s}
.fx-kpi:hover{border-color:rgba(108,99,255,.3)}
.fx-kpi-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.fx-kpi-value{font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--white)}

/* Pill tag */
.fx-pill{
  display:inline-block;padding:4px 12px;border-radius:var(--rFull);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  font-family:var(--font-mono);
}
.fx-pill-primary{background:rgba(108,99,255,.12);color:var(--p);border:1px solid rgba(108,99,255,.3)}
.fx-pill-success{background:rgba(0,212,170,.12);color:var(--teal);border:1px solid rgba(0,212,170,.3)}
.fx-pill-danger {background:rgba(232,67,147,.12);color:var(--pink);border:1px solid rgba(232,67,147,.3)}

/* ═══ FORM INPUTS ═════════════════════════════════════════════════ */
.fx-input{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--rM);padding:12px 16px;font-size:14px;color:var(--white);
  font-family:inherit;width:100%;outline:none;
  transition:border-color .2s,background .2s;
  -webkit-appearance:none;appearance:none;
}
.fx-input::placeholder{color:var(--muted)}
.fx-input:focus{border-color:rgba(108,99,255,.6);background:rgba(108,99,255,.06)}
.fx-input.fx-error{border-color:rgba(232,67,147,.6)}

.fx-label{
  display:block;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--body);margin-bottom:6px;
  font-family:var(--font-mono);
}

.fx-field{margin-bottom:16px}
.fx-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}

/* ═══ NAV ═══════════════════════════════════════════════════════ */
.fx-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:16px 32px;display:flex;align-items:center;justify-content:space-between;
  background:rgba(7,8,15,.72);backdrop-filter:blur(18px);
  border-bottom:1px solid transparent;transition:all .3s;
}
.fx-nav.solid{
  background:rgba(7,8,15,.96);border-bottom-color:var(--line);
  backdrop-filter:blur(24px);
}
.fx-logo{display:flex;align-items:center;gap:12px}
.fx-logo-mark{
  width:36px;height:36px;background:var(--grd);border-radius:9px;
  display:flex;align-items:center;justify-content:center;
}
.fx-logo-mark svg{width:18px;height:18px;fill:#fff}
.fx-logo-name{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--white)}
.fx-logo-tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);line-height:1;margin-top:3px}

/* ═══ HERO GLOW (fondo cinematográfico) ═══════════════════════════ */
.fx-hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx-hero-glow{position:absolute;border-radius:50%;filter:blur(100px);opacity:.4}
.fx-hero-glow-1{width:540px;height:540px;background:#6C63FF;top:15%;left:-10%}
.fx-hero-glow-2{width:480px;height:480px;background:#E84393;top:40%;right:-8%}
.fx-hero-glow-3{width:380px;height:380px;background:#00D4AA;bottom:10%;left:35%}

/* ═══ REVEAL ON SCROLL (init con IntersectionObserver — ver JS abajo) ═══ */
.fx-reveal{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}
.fx-reveal.visible{opacity:1;transform:translateY(0)}
.fx-reveal.d1{transition-delay:.1s}
.fx-reveal.d2{transition-delay:.2s}
.fx-reveal.d3{transition-delay:.3s}

/* ═══ ANIMATIONS ══════════════════════════════════════════════════ */
@keyframes fxFadeIn{from{opacity:0}to{opacity:1}}
@keyframes fxSlideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fxScaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}

.fx-fade-in{animation:fxFadeIn .6s ease both}
.fx-slide-up{animation:fxSlideUp .8s ease both}
.fx-scale-in{animation:fxScaleIn .4s ease both}

/* Smooth scroll respect motion pref */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ═══ MODAL ═══════════════════════════════════════════════════════ */
.fx-modal-overlay{
  position:fixed;inset:0;z-index:900;
  background:rgba(7,8,15,.88);backdrop-filter:blur(16px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  overflow-y:auto;
}
.fx-modal-overlay[hidden]{display:none}
.fx-modal-box{
  background:#0B0C16;border:1px solid rgba(108,99,255,.3);border-radius:var(--rXL);
  width:100%;max-width:680px;position:relative;overflow:hidden;
  box-shadow:0 0 80px rgba(108,99,255,.15);animation:fxScaleIn .3s ease;
}
.fx-modal-head{
  background:linear-gradient(130deg,rgba(108,99,255,.18),rgba(155,89,255,.1),rgba(232,67,147,.08));
  padding:40px 48px 32px;border-bottom:1px solid rgba(255,255,255,.06);
}
.fx-modal-close{
  position:absolute;top:20px;right:20px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:50%;width:36px;height:36px;color:var(--body);font-size:18px;
  cursor:pointer;z-index:1;display:flex;align-items:center;justify-content:center;
  line-height:1;transition:all .2s;
}
.fx-modal-close:hover{background:rgba(255,255,255,.12);color:var(--white)}

/* ═══ RESPONSIVE ══════════════════════════════════════════════════ */
@media(max-width:900px){
  .fx-nav{padding:12px 20px}
  .fx-section{padding:80px 0}
  .fx-container{padding:0 20px}
  .fx-row{grid-template-columns:1fr}
}
@media(max-width:600px){
  .fx-modal-overlay{align-items:flex-start;padding:12px}
  .fx-modal-head{padding:28px 20px 24px}
  .fx-input{font-size:16px}  /* evita zoom iOS */
}

/* ═══ SCROLLBAR (WebKit, opcional) ═════════════════════════════════ */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(108,99,255,.3);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:rgba(108,99,255,.5)}

/* ═══ UTILITY CLASSES ═════════════════════════════════════════════ */
.fx-text-center{text-align:center}
.fx-text-muted{color:var(--muted)}
.fx-text-body{color:var(--body)}
.fx-text-brand{color:var(--p)}
.fx-text-pink{color:var(--pink)}
.fx-text-teal{color:var(--teal)}
.fx-bg-glow{position:relative;isolation:isolate}
.fx-bg-glow::before{
  content:"";position:absolute;top:-20%;left:50%;transform:translateX(-50%);
  width:900px;height:900px;z-index:-1;
  background:radial-gradient(circle,rgba(108,99,255,.08) 0%,rgba(155,89,255,.03) 40%,transparent 70%);
  filter:blur(60px);pointer-events:none;
}
.fx-border-gradient{
  position:relative;
  background:var(--bg2);border-radius:var(--rL);
}
.fx-border-gradient::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;background:var(--grd);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}

/* ═══ SIGNATURE / FOUNDER NOTE (letter style) ══════════════════════ */
.fx-signature-name{
  font-family:var(--font-script);font-size:52px;line-height:1;color:#fff;font-weight:600;
}
.fx-signature-meta{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:#E8EBF5;font-weight:500;
}
.fx-signature-creds{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;
  color:#C9CEE0;font-weight:500;padding:10px 16px;
  border:1px solid rgba(108,99,255,.35);border-radius:var(--rFull);
  background:rgba(108,99,255,.08);display:inline-block;
}

/* ═══ LANDING NAV ═══════════════════════════════════════════════════════════ */
.fx-landing-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 48px;
  font-family:var(--font-sans);
  background:linear-gradient(180deg, rgba(7,8,15,.78) 0%, rgba(7,8,15,.45) 70%, rgba(7,8,15,0) 100%);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  pointer-events:none;
}
.fx-landing-nav > *{pointer-events:auto}
.fx-landing-nav__brand{
  display:flex;align-items:center;gap:12px;
  color:var(--white);text-decoration:none;
  transition:opacity .2s;
}
.fx-landing-nav__brand:hover{opacity:.85}
.fx-landing-nav__mark{
  width:40px;height:40px;border-radius:12px;
  background:var(--grd);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(155,89,255,.32),inset 0 1px 0 rgba(255,255,255,.18);
  flex-shrink:0;
}
.fx-landing-nav__mark svg{width:22px;height:22px}
.fx-landing-nav__name{
  font-size:20px;font-weight:800;letter-spacing:-.025em;color:var(--white);
}
.fx-landing-nav__dot{color:var(--purple)}
.fx-landing-nav__actions{display:flex;align-items:center;gap:14px}
.fx-landing-nav__login{
  display:inline-flex;align-items:center;
  padding:10px 18px;
  border-radius:var(--rFull);
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:var(--white);
  text-decoration:none;
  font-family:var(--font-sans);font-size:14px;font-weight:500;
  letter-spacing:.005em;
  transition:all .18s ease;
}
.fx-landing-nav__login:hover{
  border-color:rgba(155,89,255,.55);
  background:rgba(155,89,255,.08);
  color:var(--white);
}
.fx-landing-nav__cta{padding:10px 22px;font-size:14px}

@media(max-width:768px){
  .fx-landing-nav{padding:14px 18px}
  .fx-landing-nav__name{font-size:17px}
  .fx-landing-nav__login{padding:8px 14px;font-size:13px}
  .fx-landing-nav__cta{padding:8px 16px;font-size:13px}
}
@media(max-width:480px){
  .fx-landing-nav__cta{display:none}
}