/* ============================================================
   Geely Landings — Base tokens
   Fuente de verdad: /app/globals.css (proyecto Next.js principal)
   No editar sin sincronizar con ese archivo.
   ============================================================ */

@font-face {
  font-family: "Geely Bold";
  src: url("../fonts/GEELYBold20250530.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable-italic.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Colores base ─────────────────────────────────────────────── */
  --color-geely-white:     #FFFFFF;
  --color-geely-black:     #000000;
  --color-geely-near:      #0D0D0D;
  --color-geely-dark:      #111111;
  --color-geely-light:     #F5F5F5;
  --color-geely-light-alt: #EBEBEB;

  /* ── Active Blue — CTA principal y estado activo de marca ────────── */
  --color-geely-active-blue:    #3A7FF8;
  --color-geely-active-blue-75: #5B9BF8;
  --color-geely-active-blue-50: #85B4F8;
  --color-geely-active-blue-25: #C3D8FA;

  /* ── Escala de neutros oficial ────────────────────────────────── */
  --color-geely-neutral-80: #5A5A5A;
  --color-geely-neutral-60: #828282;
  --color-geely-neutral-40: #AAAAAA;
  --color-geely-neutral-20: #D2D2D2;
  --color-geely-neutral-10: #E6E6E6;
  --color-geely-neutral-05: #F0F0F0;

  /* ── Neutros cálidos/fríos ─────────────────────────────────────── */
  --color-geely-warm-neutral:      #E6E0DB;
  --color-geely-cool-neutral:      #E8E7E7;
  --color-geely-soft-neutral:      #F7F4F5;
  --color-geely-cool-blue-neutral: #D0D7EB;

  /* ── Colores extendidos de marca ──────────────────────────────── */
  --color-geely-indigo:    #A1B0F6;
  --color-geely-purple:    #945CDB;
  --color-geely-green:     #17CDA7;
  --color-geely-turquoise: #52E1E3;
  --color-geely-lime:      #C4EF80;
  --color-geely-red:       #F6292E; /* solo acento visual puntual, NUNCA CTA */
  --color-geely-yellow:    #FFDC81;
  --color-geely-orange:    #F3A067;

  /* ── Movento (branding del distribuidor) ──────────────────────── */
  --color-movento-charcoal: #212322;
  --color-movento-cta:      #004680; /* solo botón de teléfono / branding Movento */
  --color-movento-cta-dark: #003260;

  /* ── Tipografía ─────────────────────────────────────────────────── */
  --font-display: "Geely Bold", "Arial Black", sans-serif;
  --font-sans:    "Inter", sans-serif;

  /* ── Border radius ────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius:    8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* ── Letter spacing ───────────────────────────────────────────── */
  --tracking-display: 0.08em;
  --tracking-tech:    0.14em;
  --tracking-wide:    0.22em;
  --tracking-nav:     0.10em;
  --tracking-caption: 0.20em;

  /* ── Sombras ──────────────────────────────────────────────────── */
  --shadow-card:       0 1px 3px rgba(0,0,0,0.05), 0 4px 20px rgba(0,0,0,0.07);
  --shadow-card-hover: 0 4px 8px rgba(0,0,0,0.08), 0 16px 40px rgba(0,0,0,0.12);

  /* ── Gradientes oficiales ─────────────────────────────────────── */
  --geely-gradient-blue:    linear-gradient(135deg, #3A7FF8 0%, #945CDB 100%);
  --geely-gradient-green:   linear-gradient(135deg, #17CDA7 0%, #52E1E3 100%);
  --geely-gradient-red:     linear-gradient(135deg, #F6292E 0%, #F3A067 100%);
  --geely-gradient-neutral: linear-gradient(135deg, #F7F4F5 0%, #E8E7E7 50%, #D0D7EB 100%);
  --geely-gradient-master:  linear-gradient(135deg, #3A7FF8 0%, #945CDB 30%, #17CDA7 60%, #F3A067 100%);

  /* ── Motion ───────────────────────────────────────────────────── */
  --geely-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --geely-ease-premium:  cubic-bezier(0.22, 1, 0.36, 1);
  --geely-duration-fast:     180ms;
  --geely-duration-standard: 360ms;
  --geely-duration-slow:     700ms;
}

/* ── Reset base ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--color-geely-white);
  color: var(--color-geely-near);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

::placeholder {
  color: rgba(0, 0, 0, 0.35);
}

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