/*
 * La paleta y el armazón tipográfico. Lo que comparten la portada y las legales.
 *
 * Los colores son los de `apps/mobile/lib/design/tokens.ts` —los dos esquemas—
 * copiados a mano. No hay forma de importarlos: viven en el workspace de la app
 * y este es el del sitio. Si allí cambia un valor, aquí también, en el mismo
 * commit.
 *
 * Sin tipografías web a propósito. Una fuente descargada son dos peticiones más
 * y un salto de composición para ganar personalidad en una página que casi todo
 * el mundo abre una vez; la pila del sistema con `ui-serif` para los títulos da
 * el contraste serif/sans que tiene la app sin traerse nada.
 */

:root {
  color-scheme: light dark;

  --canvas: #f2f2e7;
  --surface: #ffffff;
  --surface-alt: #fafaf4;
  --sunken: #e6e8d7;
  --line: #e6e8d7;
  --line-strong: #d4d8c1;
  --ink: #2e2016;
  --ink-muted: #6b5f4e;
  --ink-subtle: #8e8474;
  --primary: #5f7a43;
  --primary-pressed: #4c6335;
  --primary-wash: rgba(95, 122, 67, 0.11);
  --on-primary: #ffffff;
  --accent: #c4873c;
  --sage: #6e8c3f;
  --inverse: #2e2016;
  --on-inverse: #f2f2e7;

  --shadow-sm: 0 1px 2px rgba(46, 32, 22, 0.06);
  --shadow-md: 0 1px 2px rgba(46, 32, 22, 0.06), 0 8px 24px rgba(46, 32, 22, 0.07);
  --shadow-lg: 0 2px 4px rgba(46, 32, 22, 0.07), 0 24px 60px rgba(46, 32, 22, 0.13);

  /* El marco del teléfono no sigue al tema: un móvil no se vuelve claro porque
     lo mires de día, y con `--ink` en oscuro salía un marco blanco. */
  --frame: #241a12;

  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --serif: ui-serif, Georgia, 'Iowan Old Style', 'Times New Roman', serif;

  --page: 68rem;
  --radius-sm: 0.5rem;
  --radius: 0.875rem;
  --radius-lg: 1.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #1a1a19;
    --surface: #242423;
    --surface-alt: #292928;
    --sunken: #131312;
    --line: #313130;
    --line-strong: #403f3e;
    --ink: #ededeb;
    --ink-muted: #a9a9a6;
    --ink-subtle: #807f7c;
    --primary: #9bbf6e;
    --primary-pressed: #b0d084;
    --primary-wash: rgba(155, 191, 110, 0.13);
    --on-primary: #1a1a19;
    --accent: #dba954;
    --sage: #b4d68a;
    --inverse: #f2f2e7;
    --on-inverse: #2e2016;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.45), 0 24px 60px rgba(0, 0, 0, 0.5);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

/* Quien pide menos movimiento no quiere tampoco el desplazamiento suave: es
   movimiento que no pidió y que en algunos vestibulares marea. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--primary-pressed);
}

img,
svg {
  max-width: 100%;
}

/* El foco visible es el mismo en todo el sitio y no se quita nunca: para quien
   navega con el teclado es lo único que dice dónde está. */
:where(a, button, summary):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
}

/* Visible solo para lectores de pantalla. Para el salto al contenido. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 20;
  background: var(--surface);
  color: var(--ink);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  transition: top 0.15s ease;
}

.skip:focus {
  top: 0.5rem;
}

/* ── La barra de arriba, común a portada y legales ───────────────────────── */

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-block: 0.75rem;
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
}

.bar-inner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
}

.bar-logo {
  width: 2rem;
  height: 2rem;
  flex: none;
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.bar nav {
  margin-left: auto;
  display: flex;
  gap: clamp(0.75rem, 3vw, 1.5rem);
  font-size: 0.92rem;
  font-weight: 500;
}

.bar nav a {
  color: var(--ink-muted);
  text-decoration: none;
}

.bar nav a:hover {
  color: var(--primary);
}

@media (max-width: 32rem) {
  .bar nav a.optional {
    display: none;
  }
}

/* ── El pie, común ───────────────────────────────────────────────────────── */

footer.site {
  margin-top: 5rem;
  padding-block: 2.5rem 3rem;
  border-top: 1px solid var(--line);
  background: var(--surface-alt);
  color: var(--ink-muted);
  font-size: 0.92rem;
}

footer.site .links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.25rem;
  font-weight: 500;
}

footer.site p {
  margin-block: 0.35rem;
  max-width: 46rem;
}

footer.site .fine {
  font-size: 0.85rem;
  color: var(--ink-subtle);
}