/* Boket Motor — shared design tokens
   ------------------------------------------------------------------
   Vertical: talleres de carros/motos + CDA.
   Paleta industrial: grafito + acero + azul motor + citron.
   Tipografía heredada de Boket Style (Source Serif 4 / Geist / Geist Mono).
*/

:root {
  /* Type */
  --ff-serif: "Source Serif 4", Georgia, serif;
  --ff-sans:  "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Boket signature */
  --citron:   #dcff4d;

  /* Boket Motor — cool industrial paper */
  --bg:       #ecebe6;     /* cool paper, slightly cooler than Style cream */
  --bg-soft:  #f2f1ec;
  --card:     #f6f5f0;
  --card-2:   #e6e5e0;

  /* Ink (cooler graphite vs Style's warm ink) */
  --ink:      #14181c;
  --ink-2:    rgba(20,24,28,0.66);
  --ink-3:    rgba(20,24,28,0.42);
  --ink-4:    rgba(20,24,28,0.16);
  --line:     rgba(20,24,28,0.10);
  --line-2:   rgba(20,24,28,0.18);

  /* Steel — the silver workshop tone */
  --steel:    #5a6470;
  --steel-2:  #3a4150;
  --steel-3:  #8a949f;
  --steel-soft: #d6dade;

  /* Motor blue — the accent */
  --motor:        #2d5fb8;
  --motor-2:      #1f4a99;
  --motor-3:      #4f7fd4;
  --motor-soft:   #d6e0f0;
  --motor-glow:   #b9cdec;

  /* Status colors (kanban del carro) */
  --st-received:  #5a6470;   /* recibido */
  --st-diag:      #d4a017;   /* en diagnóstico */
  --st-quote:     #2d5fb8;   /* cotización enviada */
  --st-repair:    #c75a3d;   /* en reparación */
  --st-qa:        #7a3dc7;   /* control calidad */
  --st-ready:     #2f6b3a;   /* listo */
  --st-delivered: #14181c;   /* entregado */
  --st-cda-ok:    #2f6b3a;
  --st-cda-fail:  #c75a3d;

  /* External brands — used only when integrating with a third-party UI */
  --whatsapp:     #25d366;
  --whatsapp-2:   #1ebe5a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--ff-sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: transparent; }

.mono  { font-family: var(--ff-mono); }
.serif { font-family: var(--ff-serif); font-optical-sizing: auto; }

/* ===== Logo mark — same Boket monogram but with motor blue + citron dot ===== */
.bm-mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; flex-shrink: 0;
}
.bm-mark::before {
  content: ""; position: absolute;
  width: 6px; height: 6px;
  left: 5px; top: 5px;
  border-radius: 50%;
  background: var(--motor);
}
.bm-mark::after {
  content: ""; position: absolute;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--citron);
  right: 4px; bottom: 4px;
}
.bm-mark.dark { background: #f4f3ef; }
.bm-mark.dark::before { background: var(--motor); }
.bm-mark.dark.invert::after { background: var(--citron); }

/* ===== Mono eyebrow ===== */
.eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow .live {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--citron);
  outline: 1px solid var(--ink); outline-offset: 1px;
}
.eyebrow::before {
  content: ""; width: 24px; height: 0.5px; background: var(--ink-3); display: inline-block;
}
.eyebrow.no-rule::before { display: none; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 14px; font-weight: 500;
  background: var(--ink); color: #f4f3ef;
  transition: transform .12s ease, background .12s ease, color .12s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); background: #000; }
.btn.ghost { background: transparent; color: var(--ink); border: 0.5px solid var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #f4f3ef; }
.btn.motor { background: var(--motor); color: #fff; }
.btn.motor:hover { background: var(--motor-2); }
.btn.citron { background: var(--citron); color: var(--ink); }
.btn.citron:hover { background: #c8ee2e; }
.btn.steel { background: var(--steel-soft); color: var(--ink); }
.btn.steel:hover { background: #c4cad0; }
.btn.whatsapp { background: var(--whatsapp); color: #fff; }
.btn.whatsapp:hover { background: var(--whatsapp-2); }
.btn:focus-visible { outline: 2px solid var(--motor); outline-offset: 2px; }
.btn .arrow { font-family: var(--ff-mono); font-size: 12px; }

/* ===== Lang switch ===== */
.lang {
  display: inline-flex; align-items: center;
  padding: 3px;
  border: 0.5px solid var(--line-2);
  border-radius: 999px;
  background: var(--card);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}
.lang button {
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--ink-3);
  transition: color .12s, background .12s;
}
.lang button.active { background: var(--ink); color: #f4f3ef; }

/* ===== Status chips (state of vehicle in workshop) ===== */
.st-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--card);
  border: 0.5px solid var(--line-2);
}
.st-chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--steel);
}
.st-chip.received .dot   { background: var(--st-received); }
.st-chip.diag .dot       { background: var(--st-diag); }
.st-chip.quote .dot      { background: var(--st-quote); }
.st-chip.repair .dot     { background: var(--st-repair); }
.st-chip.qa .dot         { background: var(--st-qa); }
.st-chip.ready .dot      { background: var(--st-ready); }
.st-chip.delivered .dot  { background: var(--st-delivered); }

/* ===== Plate (placa) — Colombian plate style ===== */
.plate {
  display: inline-flex; align-items: center;
  font-family: var(--ff-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  background: #f7c948;
  color: var(--ink);
  padding: 4px 8px;
  border-radius: 4px;
  border: 0.5px solid #b8920a;
  box-shadow: inset 0 0 0 1.5px #f7c948, inset 0 0 0 2px #14181c;
}
.plate.moto { background: #fff; }
.plate.electric { background: #b8ddff; }

/* ===== Generic ===== */
.dot-citron { width: 7px; height: 7px; background: var(--citron); border-radius: 50%; outline: 1px solid var(--ink); outline-offset: 1px; }
.divider { height: 0.5px; background: var(--line); }
.hairline { border: 0.5px solid var(--line); }

/* Subtle striped image placeholder */
.img-slot {
  background:
    repeating-linear-gradient(
      135deg,
      var(--card-2) 0px, var(--card-2) 12px,
      var(--card) 12px, var(--card) 24px
    );
  border: 0.5px solid var(--line-2);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.img-slot .lb {
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: 0.08em; color: var(--ink-3);
  background: var(--card); padding: 4px 8px; border-radius: 4px;
  border: 0.5px solid var(--line);
}

/* Fade-in on scroll */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }