/* reparte.co — road-signage design system
   concrete #F4F5F3 | asphalt #1F2421 | amber #FFB400 | señal green #0B6E4F | hazard #C43C12 | line #D4D8D4 */

:root {
  --concrete: #F4F5F3;
  --asphalt: #1F2421;
  --amber: #FFB400;
  --senal: #0B6E4F;
  --hazard: #C43C12;
  --line: #D4D8D4;
  --muted: #5A615C;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--body);
  background: var(--concrete);
  color: var(--asphalt);
  line-height: 1.55;
  font-size: 17px;
}

.wrap { max-width: 680px; margin: 0 auto; padding: 0 20px; }

/* ---- language toggle ---- */
.es, .en { display: none; }
html[data-lang="es"] .es { display: block; }
html[data-lang="en"] .en { display: block; }
html[data-lang="es"] span.es, html[data-lang="es"] a.es { display: inline; }
html[data-lang="en"] span.en, html[data-lang="en"] a.en { display: inline; }

.lang-switch {
  display: flex; gap: 2px;
  border: 2px solid var(--asphalt);
}
.lang-switch button {
  font-family: var(--display);
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  background: transparent; color: var(--asphalt);
  border: none; cursor: pointer;
}
.lang-switch button[aria-pressed="true"] { background: var(--asphalt); color: var(--concrete); }

/* ---- header ---- */
header.site {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 0;
}
.brand {
  font-family: var(--display);
  font-weight: 700; font-size: 26px;
  letter-spacing: 0.02em;
  text-decoration: none; color: var(--asphalt);
}
.brand em { font-style: normal; color: var(--senal); }

/* ---- hero ---- */
.hero { padding: 34px 0 40px; border-bottom: 3px solid var(--asphalt); }
.eyebrow {
  font-family: var(--display);
  font-weight: 600; font-size: 15px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 9vw, 58px);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 16px;
}
.hero p.lead { font-size: 18px; max-width: 54ch; margin-bottom: 26px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  font-family: var(--display);
  font-weight: 600; font-size: 18px;
  letter-spacing: 0.05em; text-transform: uppercase;
  text-decoration: none;
  padding: 12px 22px;
  border: 2px solid var(--asphalt);
  color: var(--asphalt);
  background: transparent;
}
.btn.primary { background: var(--asphalt); color: var(--concrete); }
.btn:focus-visible, .lang-switch button:focus-visible, a:focus-visible {
  outline: 3px solid var(--senal); outline-offset: 2px;
}

/* ---- sections ---- */
section { padding: 36px 0; border-bottom: 1px solid var(--line); }
h2 {
  font-family: var(--display);
  font-weight: 700; font-size: 30px;
  text-transform: uppercase; letter-spacing: 0.02em;
  margin-bottom: 18px;
}
section p + p { margin-top: 12px; }
a { color: var(--senal); }

/* ---- station chips ---- */
.station-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.chip {
  display: inline-flex; align-items: stretch;
  text-decoration: none;
  border: 2px solid var(--asphalt);
  background: #fff;
  color: var(--asphalt);
}
.chip .code {
  font-family: var(--display);
  font-weight: 700; font-size: 20px;
  letter-spacing: 0.04em;
  background: var(--amber);
  padding: 8px 12px;
  border-right: 2px solid var(--asphalt);
  display: flex; align-items: center;
}
.chip .meta {
  padding: 6px 12px;
  font-size: 13px; line-height: 1.3;
  display: flex; flex-direction: column; justify-content: center;
}
.chip .meta b { font-size: 14px; }
.chip.soon { opacity: 0.55; }
.chip.soon .code { background: var(--line); }

/* ---- how it works ---- */
.how { list-style: none; display: grid; gap: 14px; }
.how li { padding-left: 16px; border-left: 4px solid var(--amber); }
.how b { display: block; font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }

/* ---- verified stamp ---- */
.stamp {
  display: inline-block;
  font-family: var(--display);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1.5px dashed var(--muted);
  color: var(--muted);
  padding: 3px 10px;
  transform: rotate(-1deg);
}

/* ---- station page ---- */
.station-head { padding: 28px 0 22px; border-bottom: 3px solid var(--asphalt); }
.station-head .chip { margin-bottom: 14px; }
.station-head h1 { font-size: clamp(30px, 7vw, 44px); margin-bottom: 8px; }
.station-head .byline { font-size: 14px; color: var(--muted); margin-top: 10px; }

article section h2 { font-size: 24px; }
article .ojo { border-left: 5px solid var(--hazard); padding-left: 16px; }
article .ojo h2 { color: var(--hazard); }

.pend {
  background: #fff;
  border: 1.5px dashed var(--line);
  color: var(--muted);
  padding: 10px 14px;
  font-size: 15px;
}

/* ---- footer ---- */
footer { padding: 32px 0 44px; font-size: 14px; color: var(--muted); }
footer p + p { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}