/* =========================================================
   RUTA 12 · base.css
   Tokens de diseño, reset, tipografía y utilidades
   Paleta: Turquoise amber autumn
   ========================================================= */

:root {
  /* Paleta base */
  --navy:   #304C64;
  --teal:   #26788E;
  --mist:   #A4CCD4;
  --signal: #E2480C;
  --rust:   #631B08;

  /* Derivados (misma familia de tono) */
  --ink:     #14222E;
  --ink-2:   #1C3042;
  --teal-d:  #1D5F71;
  --signal-d:#C23D09;
  --paper:   #F2F6F6;
  --paper-2: #E5EEEF;
  --white:   #FFFFFF;

  --text:  #182836;
  --muted: #566A7A;
  --line:  rgba(48, 76, 100, .16);
  --line-light: rgba(255, 255, 255, .16);

  /* Tipografía */
  --f-display: "Protest Guerrilla", "Arial Black", system-ui, sans-serif;
  --f-body:    "Overpass", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "Overpass Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Espaciado y forma */
  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1320px;
  --radius: 24px;
  --radius-sm: 12px;
  --nav-h: 76px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow: 0 30px 60px -30px rgba(20, 34, 46, .35);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none; /* Protest Guerrilla solo tiene peso 400: no simular negritas */
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
figure, blockquote, dl, dd { margin: 0; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--signal); color: var(--white); }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0;
  margin: 0;
}
.h-lg { font-size: clamp(2.1rem, 4.6vw, 4.2rem); }
.h-lg em { font-style: normal; color: var(--signal); }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--muted); max-width: 52ch; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--f-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 1.25rem;
}
.eyebrow--light { color: var(--mist); }

/* Marcador de kilómetro: firma visual del sitio */
.km {
  display: inline-block;
  padding: .3em .6em .2em;
  border-radius: 6px;
  background: var(--signal);
  color: var(--white);
  font-weight: 600;
  letter-spacing: .08em;
}

/* ---------- Utilidades ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.section { padding-block: clamp(88px, 12vw, 168px); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  padding: .6rem 1rem; border-radius: 8px;
  background: var(--signal); color: var(--white);
  transform: translateY(-160%); transition: transform .3s var(--ease);
}
.skip-link:focus { transform: none; }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}