/* ============================================================
   MR CHOFER — DESIGN TOKENS (shared across variants)
   ============================================================ */
:root{
  /* === Brand (from original mrchofer.com) === */
  --brand:#19b53b;
  --brand-hover:#16a36d;
  --brand-dark:#0E7A26;
  --brand-darker:#094F18;
  --brand-lime:#B5D936;
  --brand-50:#EEFBEF;
  --brand-100:#D6F5D9;

  /* === Ink (tipografía) === */
  --ink:#0F1114;
  --ink-2:#2A2D33;
  --ink-3:#5C6068;
  --ink-4:#9AA0A8;
  --ink-5:#C9CCD1;

  /* === Paper (fondos) === */
  --paper:#FFFFFF;
  --paper-2:#F7F7F5;
  --paper-3:#EEEFEA;
  --paper-4:#E4E5E0;

  /* === Apoyo === */
  --line:#E6E7E9;
  --line-2:#D4D6DA;
  --navy:#0E141B;
  --navy-2:#1A2330;
  --amber:#F5A524;
  --red:#E5484D;

  /* === Radios === */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;
  --r-full:999px;

  /* === Shadows === */
  --sh-sm:0 1px 2px rgba(15,17,20,.05);
  --sh-md:0 4px 12px rgba(15,17,20,.08), 0 1px 2px rgba(15,17,20,.04);
  --sh-lg:0 20px 40px -12px rgba(15,17,20,.14), 0 2px 6px rgba(15,17,20,.04);
  --sh-xl:0 32px 64px -16px rgba(15,17,20,.18);

  /* === Type === */
  --f-display:'Roboto','Helvetica Neue',system-ui,sans-serif;
  --f-body:'Montserrat',system-ui,sans-serif;
  --f-ui:'Poppins',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --f-grotesk:'Space Grotesk',system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* === Placeholder utility === */
.ph{
  position:relative;
  background:
    repeating-linear-gradient(45deg, rgba(15,17,20,.04) 0 10px, rgba(15,17,20,.02) 10px 20px),
    linear-gradient(180deg, #E4E5E0, #D4D6DA);
  color:var(--ink-3);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.5px;text-transform:uppercase;
  text-align:center;padding:20px;
  overflow:hidden;
}
.ph::after{
  content:"";position:absolute;inset:8px;border:1px dashed rgba(15,17,20,.14);border-radius:inherit;pointer-events:none;
}
.ph-dark{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 10px, rgba(255,255,255,.02) 10px 20px),
    linear-gradient(180deg, #1A2330, #0E141B);
  color:rgba(255,255,255,.55);
}
.ph-dark::after{border-color:rgba(255,255,255,.14)}

/* === Buttons === */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-ui);font-weight:600;font-size:14px;
  padding:14px 22px;border-radius:var(--r-full);
  border:0;cursor:pointer;transition:all .18s;
  white-space:nowrap;
}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(25,181,59,.28)}
.btn-primary:hover{background:var(--brand-dark);transform:translateY(-1px);box-shadow:0 6px 16px rgba(25,181,59,.36)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);background:var(--paper-2)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2)}
.btn-sm{padding:10px 16px;font-size:13px}
.btn-lg{padding:18px 28px;font-size:15px}

/* === Chips === */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-ui);font-weight:500;font-size:12px;
  padding:6px 12px;border-radius:var(--r-full);
  background:var(--paper-3);color:var(--ink-2);
}
.chip-brand{background:var(--brand-50);color:var(--brand-dark)}
.chip-dark{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.14)}

/* === Kicker === */
.kicker{
  font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  display:inline-flex;align-items:center;gap:10px;
}
.kicker::before{content:"";width:28px;height:1px;background:var(--brand)}
.kicker-light{color:rgba(255,255,255,.7)}
.kicker-light::before{background:var(--brand)}

/* === Container === */
.container{max-width:1280px;margin:0 auto;padding:0 32px}
.container-sm{max-width:1100px;margin:0 auto;padding:0 32px}

/* Logo MrChofer */
.logo-mr{
  font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;font-size:22px;
  display:inline-flex;align-items:baseline;gap:2px;
  color:var(--ink);
}
.logo-mr .m{color:var(--brand)}
.logo-mr .sub{font-family:var(--f-mono);font-size:9px;color:var(--ink-4);font-weight:400;letter-spacing:.2em;text-transform:uppercase;margin-left:6px;align-self:center}
.logo-mr.on-dark{color:#fff}
.logo-mr.on-dark .sub{color:rgba(255,255,255,.55)}

/* MAP glyph */
.map-placeholder{
  background:linear-gradient(180deg, #E8F0E4 0%, #D4E2C8 100%);
  position:relative;overflow:hidden;
}
.map-placeholder::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(90deg, transparent 49%, rgba(15,17,20,.08) 50%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(15,17,20,.06) 50%, transparent 51%);
  background-size:44px 44px, 44px 44px;
  opacity:.7;
}

/* Focus */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:var(--ink-5);border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-4)}