/* ================================================================
   FÁLCON SYSTEMS v3.1 — DESIGN SYSTEM
   Variables · Reset · Tipografía · Layout · Animaciones · Skip link
   Audit applied: typography scale, spacing tokens, CORE color migration
   ================================================================ */

/* ============================================================ VARIABLES */
:root {
  /* Grays */
  --graphite:   #0D0D0D;
  --g2:         #141414;
  --g3:         #1C1C1C;
  --g4:         #262626;
  --g5:         #333333;
  --g6:         #404040;  /* NEW — extra step for borders/dividers */

  /* Brand accent — Cobrizo Quemado */
  --copper:     #A0522D;
  --copper-l:   #C4693A;
  --copper-d:   #7A3F22;

  /* Titanium */
  --titanium:   #949599;
  --titanium-l: #B8B9BD;
  --titanium-d: #6A6B70;  /* ratio ~6.2:1 sobre --graphite (WCAG AA+) */

  /* Navy (institutional) */
  --navy:       #0D2B5E;
  --navy-l:     #1A3F7A;

  /* Neutral */
  --white:      #F2F0ED;
  --white-dim:  #9A9690;
  --green:      #4A8C5C;
  --red:        #9B2335;

  /* Fonts */
  --ff-head:    'Barlow Condensed', sans-serif;
  --ff-body:    'Barlow', sans-serif;
  --ff-mono:    'Share Tech Mono', monospace;

  /* Layout */
  --nav-h:      64px;
  --max-w:      1440px;  /* increased from 1360px per audit */
  --r:          2px;
  --r-md:       6px;
  --t:          0.25s cubic-bezier(.4,0,.2,1);

  /* Spacing scale — 4px base (audit §3) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* CORE unit color — migrated to titanium-l per brand manual (audit §12) */
  --core:      #B8B9BD;            /* = titanium-l */
  --core-d:    #6A6B70;            /* = titanium-d */
  --core-soft: rgba(184,185,189,.08);
  /* Legacy alias — keep for backward compat during transition */
  --core-teal:   #B8B9BD;          /* was #00B89F — now follows --core */
  --core-teal-l: #D0D1D5;
  --core-teal-d: #6A6B70;          /* = titanium-d */
}

/* ============================================================ RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;}
body{background:var(--graphite);color:var(--white);font-family:var(--ff-body);font-weight:300;line-height:1.6;overflow-x:hidden;min-height:100svh;}
::selection{background:var(--copper);color:var(--graphite);}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font-family:inherit;}
button{cursor:pointer;border:none;background:none;}
ul{list-style:none;}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:var(--graphite);}
::-webkit-scrollbar-thumb{background:var(--copper-d);border-radius:3px;}

/* ============================================================ SKIP LINK */
.skip-link{
  position:absolute;
  top:-100px;
  left:1rem;
  background:var(--copper);
  color:var(--white);
  padding:8px 16px;
  border-radius:var(--r);
  font-family:var(--ff-head);
  font-weight:600;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  z-index:9999;
  transition:top .2s;
}
.skip-link:focus{top:1rem;}

/* ============================================================ FOCUS VISIBLE */
:focus-visible{outline:2px solid var(--copper);outline-offset:2px;border-radius:var(--r);}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--copper);
  outline-offset:2px;
}

/* ============================================================ TYPOGRAPHY — refined scale (audit §1) */
.h-mega{font-family:var(--ff-head);font-weight:800;font-size:clamp(4rem,9vw,8.5rem);line-height:.86;text-transform:uppercase;letter-spacing:-.01em;}
.h1{font-family:var(--ff-head);font-weight:700;font-size:clamp(2.4rem,5vw,5rem);line-height:.94;text-transform:uppercase;}
.h2{font-family:var(--ff-head);font-weight:700;font-size:clamp(1.6rem,3vw,2.8rem);line-height:.98;text-transform:uppercase;}
.h3{font-family:var(--ff-head);font-weight:600;font-size:clamp(1.05rem,1.6vw,1.5rem);text-transform:uppercase;letter-spacing:.01em;}
.h4{font-family:var(--ff-head);font-weight:600;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;}
.label{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--copper);}
.label-d{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--titanium-d);}
.body-lg{font-size:1.02rem;line-height:1.75;color:var(--white-dim);font-weight:300;}
.body-sm{font-size:.86rem;line-height:1.7;color:var(--titanium);}
.mono{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.08em;color:var(--titanium-d);}

/* ============================================================ LAYOUT */
.wrap{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem);}
.section{padding:clamp(4.5rem,8vw,7rem) 0;}
.section-sm{padding:clamp(2.5rem,4vw,4rem) 0;}
.divider{height:1px;background:var(--g4);}
.col-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);}
.col-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,2rem);}

/* ============================================================ PAGES */
.page{display:none;min-height:100svh;}
.page.active{display:block;}

/* ============================================================ ANIMATIONS */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal:nth-child(2){transition-delay:60ms;}
.reveal:nth-child(3){transition-delay:120ms;}
.reveal:nth-child(4){transition-delay:180ms;}
.reveal:nth-child(5){transition-delay:240ms;}

/* Respect prefers-reduced-motion (audit §10) */
@media(prefers-reduced-motion:reduce){
  .reveal{transition:none;opacity:1;transform:none;}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

/* ============================================================ LOGOS */
.nav-logo-img{height:34px;width:auto;object-fit:contain;filter:brightness(0) invert(1);display:block;}
.unit-logo-img{height:68px;width:auto;object-fit:contain;margin-bottom:2rem;display:block;}
.unit-logo-img.invert{filter:brightness(0) invert(1);}
.unit-logo-img.keep-color{filter:brightness(0) invert(1) sepia(1) saturate(4) hue-rotate(140deg);}