/* ============================================================
   SCADION — main.css
   Variables · Reset · Tipografía · Layout base
   ============================================================ */

/* ---------- Variables ---------- */
:root {
  /* Paleta (no modificar) */
  --navy:   #0B1E2D;
  --navy2:  #091827;
  --cyan:   #0EA5E9;
  --ocean:  #0284C7;
  --sky:    #38BDF8;
  --skylt:  #7DD3FC;
  --slate:  #64748B;
  --muted:  #94A3B8;
  --ice:    #F0F9FF;
  --ok:     #10B981;
  --warn:   #F59E0B;
  --fault:  #EF4444;
  --bg-light:  #F8FAFC;
  --bg-darker: #060F18;

  /* Fuentes */
  --font-main: 'Inter', Arial, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Escala 12/14/16/18/20/24/30/36/48 */
  --fs-12: .75rem;
  --fs-14: .875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;

  /* Espaciado */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Layout */
  --container: 1200px;
  --container-wide: 1400px;
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(11,30,45,.08);
  --shadow:    0 4px 16px rgba(11,30,45,.10);
  --shadow-lg: 0 12px 32px rgba(11,30,45,.18);
  --shadow-cyan: 0 8px 24px rgba(14,165,233,.25);

  /* Transiciones */
  --t-fast: 150ms ease;
  --t:      250ms ease;
  --t-slow: 450ms cubic-bezier(.2,.7,.2,1);

  /* Nav */
  --nav-h: 72px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-main);
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--ice);
  background: var(--navy);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
input, textarea, select { background: none; border: 0; outline: 0; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  top: -100px; left: 0;
  background: var(--cyan);
  color: var(--navy);
  padding: var(--sp-3) var(--sp-5);
  font-weight: 600;
  z-index: 9999;
  transition: top var(--t);
}
.skip-link:focus { top: 0; }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-main);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ice);
  letter-spacing: -.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4.5vw + 1rem, var(--fs-60)); letter-spacing: -.02em; }
h2 { font-size: clamp(1.75rem, 2.8vw + .8rem, var(--fs-48)); letter-spacing: -.02em; }
h3 { font-size: clamp(1.25rem, 1.4vw + .8rem, var(--fs-30)); }
h4 { font-size: var(--fs-20); }
p  { text-wrap: pretty; }
.text-mono { font-family: var(--font-mono); letter-spacing: .02em; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
@media (min-width: 768px) { .container { padding: 0 var(--sp-8); } }
@media (min-width: 1280px){ .container { padding: 0 var(--sp-10); } }

main { display: block; }

section {
  padding: clamp(var(--sp-16), 10vw, var(--sp-24)) 0;
  position: relative;
}
.section-light { background: var(--bg-light); color: var(--navy); }
.section-light h1, .section-light h2, .section-light h3, .section-light h4 { color: var(--navy); }
.section-darker { background: var(--bg-darker); }

/* Section header */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-12);
  max-width: 760px;
}
.section-head .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--cyan);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
}
.section-head p {
  color: var(--muted);
  font-size: var(--fs-18);
}
.section-light .section-head p { color: var(--slate); }

/* ---------- Focus visible ---------- */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------- Utilidades ---------- */
.text-cyan { color: var(--cyan); }
.text-sky  { color: var(--sky); }
.text-muted{ color: var(--muted); }
.bg-navy   { background: var(--navy); }
.bg-navy2  { background: var(--navy2); }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Grid genérico ---------- */
.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 640px)  { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px)  { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Background patterns ---------- */
.bg-grid {
  background-image:
    linear-gradient(rgba(14,165,233,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,165,233,.06) 1px, transparent 1px);
  background-size: 48px 48px;
}
.bg-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 80% 0%, rgba(14,165,233,.18), transparent 60%),
    radial-gradient(50% 50% at 10% 100%, rgba(2,132,199,.12), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.bg-glow > * { position: relative; z-index: 1; }