/* ============================================================
   POTENZA TRANSPORTE — Colors & Type Foundations
   "Movemos lo que importa, con confianza y compromiso."
   ------------------------------------------------------------
   Fonts: League Gothic (display, condensed) + League Spartan
   (body, geometric). Both available on Google Fonts:
   @import url('https://fonts.googleapis.com/css2?family=League+Gothic&family=League+Spartan:wght@400;500;600;700;800&display=swap');
   ============================================================ */

:root {
  /* ---------- BRAND CORE (from brand guide) ---------- */
  --potenza-green:  #0e8764; /* Color principal de marca — "el camino que nunca se detiene" */
  --potenza-black:  #000000; /* "el asfalto que sostiene cada kilómetro" */
  --potenza-gray:   #9b9b9b; /* "el motor que no descansa" */
  --potenza-white:  #ffffff; /* base neutra, limpieza, legibilidad */

  /* ---------- GREEN SCALE (oklch-harmonized around #0e8764) ---------- */
  --green-50:  oklch(0.97 0.03 165);
  --green-100: oklch(0.93 0.06 165);
  --green-200: oklch(0.86 0.10 165);
  --green-300: oklch(0.76 0.12 165);
  --green-400: oklch(0.64 0.13 165);
  --green-500: #0e8764;              /* brand green */
  --green-600: oklch(0.49 0.105 165);
  --green-700: oklch(0.41 0.088 165);
  --green-800: oklch(0.33 0.068 166);
  --green-900: oklch(0.26 0.05 167);

  /* ---------- NEUTRAL / ASPHALT SCALE ---------- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f6f6f5;
  --neutral-100: #ececeb;
  --neutral-200: #d9d9d7;
  --neutral-300: #bcbcba;
  --neutral-400: #9b9b9b;            /* brand gray */
  --neutral-500: #7a7a79;
  --neutral-600: #585857;
  --neutral-700: #3d3d3c;
  --neutral-800: #232322;
  --neutral-900: #141413;
  --neutral-950: #000000;            /* brand black */

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg:          var(--neutral-0);   /* page background */
  --bg-subtle:   var(--neutral-50);  /* alternating section */
  --bg-asphalt:  var(--neutral-900); /* dark inverse sections / footer */
  --surface:     var(--neutral-0);   /* card surface */
  --surface-2:   var(--neutral-50);

  /* ---------- SEMANTIC TEXT ---------- */
  --fg:          var(--neutral-900); /* primary text on light */
  --fg-2:        var(--neutral-600); /* secondary / body muted */
  --fg-3:        var(--neutral-400); /* tertiary / captions */
  --fg-on-green: #ffffff;            /* text on brand green */
  --fg-on-dark:  #ffffff;            /* text on asphalt */
  --fg-on-dark-2:rgba(255,255,255,0.66);

  /* ---------- BRAND ACTIONS ---------- */
  --accent:        var(--green-500);
  --accent-hover:  var(--green-600); /* hover = darker green */
  --accent-press:  var(--green-700); /* press = darkest */
  --accent-soft:   var(--green-50);  /* tint background */
  --whatsapp:      #25d366;          /* WhatsApp brand (conversion CTA) */
  --whatsapp-dark: #1da851;

  /* ---------- BORDERS / LINES ---------- */
  --line:        var(--neutral-200);
  --line-strong: var(--neutral-300);
  --line-on-dark:rgba(255,255,255,0.14);
  --focus-ring:  oklch(0.64 0.13 165 / 0.55);

  /* ---------- STATUS ---------- */
  --success: #0e8764;
  --warning: #c47a16;
  --danger:  #c0392b;

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display: "League Gothic", "Arial Narrow", sans-serif; /* condensed titles */
  --font-body:    "League Spartan", "Helvetica Neue", Arial, sans-serif; /* geometric body */

  /* Type scale (fluid-ready px values) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  84px;
  --text-7xl:  112px;

  --leading-tight: 0.95;  /* display headlines (condensed) */
  --leading-snug:  1.12;
  --leading-body:  1.6;

  --tracking-display: 0.005em;
  --tracking-eyebrow: 0.18em; /* uppercase labels */
  --tracking-body:    0.005em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-extra:   800;

  /* ---------- RADII ---------- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---------- SHADOWS / ELEVATION ---------- */
  --shadow-sm: 0 1px 2px rgba(20,20,19,0.06), 0 1px 3px rgba(20,20,19,0.08);
  --shadow-md: 0 4px 10px rgba(20,20,19,0.07), 0 2px 4px rgba(20,20,19,0.06);
  --shadow-lg: 0 14px 32px rgba(20,20,19,0.12), 0 4px 10px rgba(20,20,19,0.08);
  --shadow-green: 0 8px 22px rgba(14,135,100,0.28);

  /* ---------- SPACING (8px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 420ms;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headlines — League Gothic, condensed, UPPERCASE for impact */
.h-display,
h1.display {
  font-family: var(--font-display);
  font-weight: 400; /* League Gothic ships single weight */
  font-size: clamp(48px, 7vw, var(--text-7xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, var(--text-6xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, var(--text-4xl));
  line-height: 1.0;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

/* Eyebrow / kicker — uppercase Spartan, tracked, often green */
.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

/* Body */
p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg-2);
  text-wrap: pretty;
}
.lead {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--fg-2);
}
small, .caption {
  font-size: var(--text-sm);
  color: var(--fg-3);
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { color: var(--accent-hover); }

::selection { background: var(--green-200); color: var(--neutral-900); }