/*
 * Movvi — tokens
 * Variables extraídas 1:1 de los estilos inline de "Movvi Landing.dc.html".
 * Ningún componente debe llevar un #hex suelto: todo sale de aquí.
 */
:root{
  /* --- Marca -------------------------------------------------------- */
  --mv-green-300:#5FD3A6;   /* verde claro: kicker y checks sobre oscuro */
  --mv-green-500:#08B074;   /* verde Movvi, acento primario            */
  --mv-green-700:#0B6446;   /* verde medio: enlaces y gradientes       */
  --mv-green-900:#08352A;   /* verde profundo: texto base y superficie  */
  --mv-green-950:#062A21;   /* cierre de gradientes                    */
  --mv-amber-500:#F5B14B;   /* acento ámbar                            */
  --mv-amber-900:#4A3208;   /* texto sobre ámbar                       */

  /* --- Texto -------------------------------------------------------- */
  --mv-ink:#08352A;
  --mv-ink-600:#4B5F58;
  --mv-ink-500:#6B7280;

  /* --- Superficies -------------------------------------------------- */
  --mv-surface:#F6F9F7;
  --mv-surface-2:#ffffff;
  --mv-tint:#EAF6F0;        /* relleno de icono en features */
  --mv-map:#E7EFEA;         /* fondo del mapa               */
  --mv-device:#0C0C0C;      /* marco del teléfono           */

  /* --- Líneas ------------------------------------------------------- */
  --mv-line:#E4ECE8;
  --mv-line-soft:#EEF2F0;
  --mv-line-2:#DDE6E1;

  /* --- Trama de "fotografía" ---------------------------------------- */
  --mv-hatch-a:#DDEEE7;
  --mv-hatch-b:#E9F4EF;

  /* --- Sobre superficie oscura -------------------------------------- */
  --mv-on-dark:#ffffff;
  --mv-on-dark-88:rgba(255,255,255,.88);
  --mv-on-dark-82:rgba(255,255,255,.82);
  --mv-on-dark-80:rgba(255,255,255,.8);
  --mv-on-dark-70:rgba(255,255,255,.7);
  --mv-on-dark-60:rgba(255,255,255,.6);
  --mv-on-dark-50:rgba(255,255,255,.5);
  --mv-on-dark-45:rgba(255,255,255,.45);
  --mv-on-dark-30:rgba(255,255,255,.3);
  --mv-on-dark-22:rgba(255,255,255,.22);
  --mv-on-dark-18:rgba(255,255,255,.18);
  --mv-on-dark-16:rgba(255,255,255,.16);
  --mv-on-dark-14:rgba(255,255,255,.14);
  --mv-on-dark-09:rgba(255,255,255,.09);
  --mv-on-dark-07:rgba(255,255,255,.07);
  --mv-on-dark-06:rgba(255,255,255,.06);
  --mv-on-dark-05:rgba(255,255,255,.05);

  /* --- Gradientes --------------------------------------------------- */
  --mv-grad-hero:linear-gradient(150deg,var(--mv-green-500) 0%,var(--mv-green-700) 52%,var(--mv-green-950) 100%);
  --mv-grad-cta:linear-gradient(130deg,var(--mv-green-500) 0%,var(--mv-green-700) 55%,var(--mv-green-950) 100%);
  --mv-grad-phone-top:linear-gradient(150deg,var(--mv-green-500),var(--mv-green-700) 65%,var(--mv-green-900));
  --mv-grad-screen-top:linear-gradient(150deg,var(--mv-green-500),var(--mv-green-700) 70%,var(--mv-green-900));
  --mv-grad-tile:linear-gradient(120deg,var(--mv-green-500),var(--mv-green-700));
  --mv-grad-promo:linear-gradient(120deg,var(--mv-green-500),var(--mv-green-900));
  --mv-grad-done:linear-gradient(160deg,var(--mv-green-500),var(--mv-green-700) 60%,var(--mv-green-900));
  --mv-hatch:repeating-linear-gradient(135deg,var(--mv-hatch-a),var(--mv-hatch-a) 11px,var(--mv-hatch-b) 11px,var(--mv-hatch-b) 22px);
  --mv-hatch-sm:repeating-linear-gradient(135deg,var(--mv-hatch-a),var(--mv-hatch-a) 8px,var(--mv-hatch-b) 8px,var(--mv-hatch-b) 16px);
  --mv-map-grid:
    repeating-linear-gradient(0deg,rgba(8,53,42,.06),rgba(8,53,42,.06) 1px,transparent 1px,transparent 46px),
    repeating-linear-gradient(90deg,rgba(8,53,42,.06),rgba(8,53,42,.06) 1px,transparent 1px,transparent 46px);

  /* --- Sombras ------------------------------------------------------ */
  --mv-sh-nav:0 8px 28px rgba(8,53,42,.09);
  --mv-sh-nav-cta:0 10px 22px rgba(8,176,116,.32);
  --mv-sh-btn-light:0 14px 34px rgba(0,0,0,.24);
  --mv-sh-phone-hero:0 50px 100px rgba(3,20,15,.55);
  --mv-sh-phone-seq:0 46px 90px rgba(8,53,42,.28);
  --mv-sh-search:0 8px 18px rgba(3,20,15,.22);
  --mv-sh-card:0 8px 20px rgba(8,53,42,.05);
  --mv-sh-chip:0 8px 20px rgba(8,53,42,.06);
  --mv-sh-screen-cta:0 12px 26px rgba(8,176,116,.3);
  --mv-sh-pay:0 0 0 4px rgba(8,176,116,.12);
  --mv-sh-sheet:0 -12px 30px rgba(8,53,42,.1);
  --mv-sh-store:0 14px 30px rgba(0,0,0,.2);
  --mv-sh-cta-card:0 34px 80px rgba(8,53,42,.28);
  --mv-sh-logo:0 30px 60px rgba(0,0,0,.34);

  /* --- Tipografía por roles ----------------------------------------- */
  --mv-font:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --mv-fw-reg:400;
  --mv-fw-med:500;
  --mv-fw-semi:600;
  --mv-fw-bold:700;
  --mv-fw-black:800;
  --mv-fs-display:88px;     /* h1 del hero                 */
  --mv-fs-h2:64px;          /* "Todo el barrio"            */
  --mv-fs-h2-sm:62px;       /* pasos y CTA de descarga     */
  --mv-fs-h2-xs:60px;       /* aliados                     */
  --mv-fs-h3:30px;          /* título de tarjeta de aliado */
  --mv-fs-h4:22px;          /* título de feature           */
  --mv-fs-stat:34px;        /* cifra de stat               */
  --mv-fs-lead:20px;
  --mv-fs-lead-sm:19px;
  --mv-fs-body:16px;
  --mv-fs-body-sm:15px;
  --mv-fs-meta:14px;
  --mv-fs-label:13px;
  --mv-fs-micro:12px;
  --mv-fs-nano:11px;

  /* --- Radios ------------------------------------------------------- */
  --mv-r-pill:999px;
  --mv-r-sm:14px;
  --mv-r-md:16px;
  --mv-r-lg:18px;
  --mv-r-xl:20px;
  --mv-r-2xl:24px;
  --mv-r-3xl:32px;
  --mv-r-phone:46px;
  --mv-r-screen:36px;

  /* --- Layout ------------------------------------------------------- */
  --mv-gutter:48px;         /* gutter lateral, constante por breakpoint */
  --mv-maxw:1280px;
  --mv-phone-k:1;           /* factor de escala de los mockups (ver responsive) */

  /* --- Movimiento --------------------------------------------------- */
  --mv-ease:cubic-bezier(.2,.7,.2,1);
}