/* =========================================================
   ANDES · base.css
   Variables de tema, reset y tipografía
   ========================================================= */

:root {
  --font-head: "Montserrat", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* Paleta del logo ANDES */
  --gold: #f2c12e;          /* trayectoria y estrella */
  --gold-hover: #ffd451;
  --bo-red: #c8322b;        /* franja tricolor */
  --bo-yellow: #f2c12e;
  --bo-green: #2f9e4f;
  --snow: #ffffff;          /* cara iluminada de las montañas */
  --snow-shade: #cfdcec;    /* cara en sombra (azul hielo) */
  --ink: #000000;           /* fondo de marca */

  --accent: var(--gold);
  --accent-hover: var(--gold-hover);
  --accent-soft: rgba(242, 193, 46, .14);
  --on-accent: #000000;

  --success: #2f9e4f;
  --danger: #d63c3c;

  /* Colores por categoría */
  --cat-inicial: #2f9e4f;
  --cat-intermedia: #4a86e8;
  --cat-avanzada: #e0453c;
  --cat-especial: #d9a91a;

  --radius: 8px;
  --radius-sm: 6px;
  --header-h: 68px;
  --max: 1200px;
}

/* ---------- Tema claro ---------- */
:root,
:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-alt: #f5f5f4;
  --surface: #ffffff;
  --surface-2: #f2f2f1;
  --text: #0b0b0b;
  --text-soft: #2a2a2a;
  --muted: #5f5f5f;
  --border: #e3e3e1;
  --border-strong: #cfcfcc;
  --accent-text: #9a7300;   /* dorado legible sobre fondo claro */
  --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .06);
}

/* ---------- Tema oscuro (negro) ---------- */
:root[data-theme="dark"] {
  --bg: #000000;
  --bg-alt: #080808;
  --surface: #0c0c0c;
  --surface-2: #141414;
  --text: #f4f4f4;
  --text-soft: #d6d6d6;
  --muted: #8c8c8c;
  --border: #1e1e1e;
  --border-strong: #2c2c2c;
  --accent-text: var(--gold);
  --shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  transition: background-color .3s, color .3s;
}
img, video, iframe, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--text);
}
h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); text-transform: uppercase; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); margin-bottom: .75rem; text-transform: uppercase; }
h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: .5rem; }
h4 { font-size: 1.02rem; font-weight: 700; margin-bottom: .35rem; }
p { color: var(--muted); }
strong { color: var(--text); font-weight: 600; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-head); font-weight: 600; font-size: .78rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent-text);
  margin-bottom: .9rem;
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: currentColor; }

/* Franja tricolor (como bajo "ANDES" en el logo) */
.tricolor { display: flex; gap: 6px; width: 168px; height: 4px; margin: 18px 0 22px; }
.tricolor::before, .tricolor::after, .tricolor span { content: ""; flex: 1; border-radius: 2px; }
.tricolor::before { background: var(--bo-red); }
.tricolor span { background: var(--bo-yellow); }
.tricolor::after { background: var(--bo-green); }

/* Zonas de marca: siempre negras, en ambos temas */
.brand-zone {
  --bg: #000; --bg-alt: #050505; --surface: #0c0c0c; --surface-2: #141414;
  --text: #f4f4f4; --text-soft: #d6d6d6; --muted: #9a9a9a;
  --border: #1e1e1e; --border-strong: #2e2e2e; --accent-text: var(--gold);
  background: var(--ink); color: var(--text);
}

.lead { font-size: 1.1rem; color: var(--muted); max-width: 640px; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-head); letter-spacing: .04em; }

/* Iconos Lucide */
svg.lucide { width: 1.1em; height: 1.1em; stroke-width: 1.75; flex-shrink: 0; }

::selection { background: var(--accent); color: #000; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Animación de aparición (sutil) */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}