/* ═══════════════════════════════════════════════════
   reset.css — Reset + Custom Properties
   ═══════════════════════════════════════════════════ */

/* Metric-matched fallback for Satoshi: while the web font loads, text is drawn in Arial
   resized to Satoshi's width and line height, so the swap does not reflow the page (CLS).
   Values measured against Satoshi 400/700/900 (ascent 1.01em, descent 0.24em). */
@font-face {
  font-family: 'Satoshi Fallback';
  src: local('Arial'), local('ArialMT');
  font-weight: 100 599;
  size-adjust: 98.5%;
  ascent-override: 102.5%;
  descent-override: 24.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Satoshi Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 600 799;
  size-adjust: 98.5%;
  ascent-override: 102.5%;
  descent-override: 24.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Satoshi Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 800 1000;
  size-adjust: 101.9%;
  ascent-override: 99.1%;
  descent-override: 23.6%;
  line-gap-override: 0%;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ── Paleta principal ── */
  --deep-bg:        #050507;
  --bg-secondary:   #080809;
  --bg-tertiary:    #0C0C0F;
  --bg-surface:     rgba(255, 255, 255, 0.05);
  --bg-surface-alt: #0F0F13;

  /* ── Texto ── */
  --text-primary:   #F5F7FA;
  --text-secondary: #E8ECF2;
  --text-muted:     #C8D0DC;

  /* ── Acento lima tecnológico ── */
  --accent:         #D6FF00;
  --accent-dark:    #ABCC00;
  --accent-glow:    rgba(214, 255, 0, 0.18);
  --accent-glow-sm: rgba(214, 255, 0, 0.10);

  /* ── Éxito / ahorro ── */
  --success:        #3DDC97;
  --success-bg:     rgba(61, 220, 151, 0.10);

  /* ── Bordes ── */
  --border:         rgba(255, 255, 255, 0.08);
  --border-light:   rgba(255, 255, 255, 0.14);

  /* ── Tipografía ── */
  --font-sans:  'Satoshi', 'Satoshi Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'Satoshi', 'Satoshi Fallback', system-ui, -apple-system, sans-serif;

  /* ── Escala tipográfica fluida ── */
  --text-xs:    clamp(0.65rem,  1vw,   0.75rem);
  --text-sm:    clamp(0.78rem,  1.2vw, 0.875rem);
  --text-base:  clamp(0.9rem,   1.5vw, 1rem);
  --text-md:    clamp(1rem,     1.8vw, 1.125rem);
  --text-lg:    clamp(1.1rem,   2vw,   1.25rem);
  --text-xl:    clamp(1.25rem,  2.5vw, 1.5rem);
  --text-2xl:   clamp(1.5rem,   3vw,   2rem);
  --text-3xl:   clamp(2rem,     4vw,   2.75rem);
  --text-4xl:   clamp(2.5rem,   5vw,   3.75rem);
  --text-hero:  clamp(2.75rem,  6.5vw, 5rem);

  /* ── Espaciado ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Radios ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;

  /* ── Sombras ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.6);
  --shadow-brand-ambient: 0 0 20px var(--accent-glow), 0 0 60px rgba(214,255,0,0.06);

  /* ── Transiciones ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --transition-fast: 160ms var(--ease-out);
  --transition-base: 280ms var(--ease-out);
  --transition-slow: 500ms var(--ease-out);

  /* Springs sampled from damping 0.8 / 0.65, response 0.4s */
  --spring-dur: 550ms;
  --spring: cubic-bezier(0.2, 0.9, 0.3, 1.02);
  --spring-bouncy: cubic-bezier(0.3, 1.3, 0.5, 1);

  /* ── Nav ── */
  --nav-h: 68px;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  /* Nothing may push the page sideways on phones (cards that slide in from the sides, orbs, marquees).
     clip, unlike hidden, does not create a scroll container, so position: sticky keeps working */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-primary);
  background-color: var(--deep-bg);
  background-image:
    radial-gradient(ellipse 160% 50% at 50% -8%, rgba(214,255,0,0.055) 0%, transparent 58%),
    radial-gradient(ellipse 55% 40% at 92% 85%,  rgba(214,255,0,0.025) 0%, transparent 55%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

ul, ol {
  list-style: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

@media (pointer: coarse) {
  input, textarea, select {
    font-size: 16px;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-wrap: balance; /* when a title must wrap, lines come out even instead of leaving one word alone */
}

p {
  color: var(--text-secondary);
  line-height: 1.7;
  text-wrap: pretty; /* no single orphan word on the last line */
}

cite {
  font-style: normal;
}

blockquote {
  quotes: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--accent-glow);
  color: var(--text-primary);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.accent {
  color: var(--accent);
}

.success {
  color: var(--success);
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, 0.062, 0.202, 0.366, 0.526, 0.664, 0.776, 0.861, 0.922, 0.964, 0.99, 1.005, 1.012, 1.015, 1.015, 1.013, 1.01, 1.008, 1.006, 1.004, 1.002, 1.001, 1);
    --spring-bouncy: linear(0, 0.065, 0.215, 0.399, 0.581, 0.74, 0.867, 0.959, 1.019, 1.052, 1.066, 1.067, 1.059, 1.048, 1.035, 1.023, 1.013, 1.006, 1.001, 0.997, 0.996, 0.995, 1);
  }
}