/* =============================================================
   AGROVALOR · Sitio Pro · Design Tokens
   "La mejor página de metalúrgica del mundo"
   =============================================================
   Sistema de tokens base: paleta, tipografía, espaciado,
   easings, radios. Todo lo demás referencia estos tokens.
   ============================================================= */

:root {
  /* === Paleta · Brand DNA Agrovalor === */
  --navy-900: #0a1326;
  --navy-800: #0f1a30;
  --navy-700: #14213d;   /* Navy primario */
  --navy-600: #1c2c52;
  --navy-500: #243870;

  --orange-700: #d9531f;
  --orange-600: #e55a1f;
  --orange-500: #ff6e2a;   /* Naranja primario */
  --orange-400: #ff8a52;
  --orange-300: #ffa97d;
  --orange-100: #ffe0cf;

  --paper-100: #f8f5ee;   /* Paper primario */
  --paper-200: #efeae0;
  --paper-300: #e3dccf;

  --ink-900: #0a0f1f;
  --ink-700: #2c3242;
  --ink-500: #6b7280;
  --ink-300: #9ca3af;
  --ink-100: #d1d5db;

  --white: #ffffff;
  --black: #000000;

  /* Overlays / lineas */
  --line-on-light: rgba(20, 33, 61, 0.08);
  --line-on-light-mid: rgba(20, 33, 61, 0.16);
  --line-on-dark: rgba(255, 255, 255, 0.10);
  --line-on-dark-mid: rgba(255, 255, 255, 0.18);
  --shadow-sm: 0 1px 2px rgba(10, 15, 31, 0.04);
  --shadow-md: 0 8px 24px rgba(10, 15, 31, 0.08);
  --shadow-lg: 0 24px 64px rgba(10, 15, 31, 0.14);
  --shadow-xl: 0 48px 128px rgba(10, 15, 31, 0.18);
  --glow-orange: 0 0 64px rgba(255, 110, 42, 0.32);

  /* === Tipografía === */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* Type scale - mobile first, fluid */
  --text-mono-xs: clamp(0.625rem, 0.6rem + 0.1vw, 0.6875rem);   /* 10-11px */
  --text-mono-sm: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);  /* 11-12px */
  --text-mono: clamp(0.8125rem, 0.75rem + 0.25vw, 0.875rem);    /* 13-14px */
  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.825rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --text-xl: clamp(1.375rem, 1.25rem + 0.5vw, 1.5625rem);
  --text-2xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --text-3xl: clamp(2.25rem, 1.85rem + 1.6vw, 3rem);
  --text-4xl: clamp(2.75rem, 2.2rem + 2.2vw, 4rem);
  --text-5xl: clamp(3.5rem, 2.6rem + 3.6vw, 5.5rem);
  --text-6xl: clamp(4.5rem, 3rem + 6vw, 7.5rem);
  --text-7xl: clamp(5.5rem, 3.5rem + 8vw, 9.5rem);

  --leading-tight: 1.04;
  --leading-snug: 1.18;
  --leading-normal: 1.45;
  --leading-relaxed: 1.65;

  --tracking-tightest: -0.04em;
  --tracking-tighter: -0.025em;
  --tracking-tight: -0.012em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;
  --tracking-widest: 0.22em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semi: 600;
  --weight-bold: 700;

  /* === 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;
  --space-40: 10rem;
  --space-48: 12rem;
  --space-64: 16rem;

  /* Layout */
  --container-narrow: 56rem;   /* ~900px contenido lectura */
  --container: 72rem;          /* ~1152px contenido estándar */
  --container-wide: 90rem;     /* ~1440px contenido amplio */
  --container-full: 120rem;    /* máximo */

  --gutter-mobile: 1.25rem;
  --gutter-tablet: 2rem;
  --gutter-desktop: 3rem;

  /* === Radius === */
  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 999rem;

  /* === Z-index === */
  --z-base: 0;
  --z-content: 10;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-navbar: 1000;
  --z-modal: 2000;
  --z-loader: 9000;

  /* === Animation timing === */
  --duration-fast: 180ms;
  --duration: 320ms;
  --duration-slow: 560ms;
  --duration-cinematic: 1200ms;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snap: cubic-bezier(0.83, 0, 0.17, 1);
}

/* === Reset === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ink-900);
  background: var(--paper-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* NO overflow-x acá: cualquier overflow en body/html crea un containing block
     que rompe el position:sticky de las secciones cinematográficas. */
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
button { background: none; border: none; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* === Focus visible accesible === */
:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 4px;
}

/* === Selection === */
::selection {
  background: var(--orange-500);
  color: var(--white);
}

/* === Scrollbar minimal === */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper-200); }
::-webkit-scrollbar-thumb {
  background: var(--ink-300);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-500); }

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}