/* Base compartida de carteroapp.com: la portada (index.html, es.html) y las
   páginas legales. Colores, fuentes, cabecera y pie. Todo estático: lo sirve
   nginx aunque la app esté caída. Las fuentes se sirven desde aquí y no desde
   Google Fonts, que recibiría la IP de cada visitante. */

@font-face {
  font-family: "Barlow";
  src: url("/fonts/barlow-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/barlow-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --ink: #10241d;
  --muted: #4b5f57;
  --paper: #f1f5f3;
  --slip: #ffffff;
  --rule: #cfdcd5;
  --green: #0d7a5f;
  --yellow: #ffc24b;
  --stamp-ink: #10241d;

  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter: clamp(1rem, 4vw, 3rem);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e4eee9;
    --muted: #a3b6ad;
    --paper: #0f1a16;
    --slip: #16251f;
    --rule: #2a3c35;
    --green: #4cbf98;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
}

a { color: var(--green); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 var(--gutter); }

/* ── Cabecera ─────────────────────────────────────────────────────────── */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
  font: 600 1.6rem/1 var(--display);
}
.mark svg { width: 2.25rem; height: 2.25rem; flex: none; }

.lang { font-size: 0.95rem; }

/* ── Pie ──────────────────────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--rule);
  padding: 2rem 0 3rem;
  color: var(--muted);
  font-size: 0.95rem;
}
footer nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 1rem; }
footer p { margin: 0 0 0.5rem; max-width: 46rem; }