/* =====================================================
   MotoDistrict — Tokens de diseño (colores y variables)
   Tema claro con zonas oscuras (grafito) para hero,
   header, banner CTA y footer.
   ===================================================== */
:root{
  /* Marca */
  --naranja:#F1500A;
  --naranja-vivo:#FF4900;

  /* Fondos y superficies (zonas claras) */
  --fondo:#f4f3f1;          /* fondo general */
  --fondo-alt:#faf9f7;      /* secciones alternas (nosotros, contacto) */
  --fondo-galeria:#eeede9;  /* galería */
  --fondo-trust:#ecebe8;    /* barra de confianza */
  --superficie:#ffffff;     /* tarjetas */

  /* Bordes (zonas claras) */
  --borde-claro:#e6e3dd;
  --borde-claro-2:#d6d2ca;  /* hover / borde de botón fantasma */
  --borde-trust:#dcdad5;
  --borde-suave:#edeae4;    /* separadores sutiles */

  /* Texto (sobre fondos claros) */
  --texto:#1a1a1a;
  --texto-2:#5f5e59;
  --texto-3:#8a8883;

  /* Zonas oscuras (grafito): hero, header, CTA, footer */
  --grafito:#22252b;
  --grafito-2:#2b2f37;
  --grafito-panel:#191c22;  /* tarjetas sobre grafito */
  --grafito-borde:#343841;

  /* Texto sobre grafito */
  --texto-claro:#ffffff;
  --texto-claro-2:#b3b3b3;
  --texto-claro-3:#8a8a8a;

  /* Layout */
  --radio:14px;
  --max:1200px;
  --sombra:0 18px 44px rgba(20,20,20,.14);
  --trans:.25s cubic-bezier(.4,0,.2,1);
  font-synthesis:none;
}