/* Repase · brand "Esmeralda" (same tokens as the app: ui/theme/Color.kt) */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --esmeralda: #0A7D5B;
  --esmeralda-700: #08654A;
  --esmeralda-200: #9FDCC4;
  --esmeralda-50: #EAF6F1;
  --menta: #7BE3BC;
  --ambar: #A14E00;
  --ambar-fondo: #FFF1E0;

  --bg: #F6F8F7;
  --surface: #FFFFFF;
  --soft: var(--esmeralda-50);
  --text: #0F1A17;
  --muted: #5E6966;
  --line: #E3E9E6;
  --accent: var(--esmeralda);
  --accent-ink: #FFFFFF;
  --shadow: 0 1px 2px rgb(15 26 23 / .06), 0 12px 32px -12px rgb(15 26 23 / .18);

  --radius-s: 14px;
  --radius-m: 22px;
  --radius-l: 28px;
  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --section: clamp(4rem, 3rem + 5vw, 7.5rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B1210;
    --surface: #121B18;
    --soft: #14251F;
    --text: #E8F0ED;
    --muted: #98A6A1;
    --line: #22302B;
    --accent: #4FD3A3;
    --accent-ink: #0B1210;
    --ambar: #FFB866;
    --ambar-fondo: #2E2110;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 16px 40px -16px rgb(0 0 0 / .6);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "tnum";
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--menta); outline-offset: 3px; border-radius: 8px; }
img, svg { display: block; max-width: 100%; }

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

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.site-header .wrap { display: flex; align-items: center; gap: 1rem; height: 4rem; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--text); text-decoration: none; font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; }
.brand img { width: 34px; height: 34px; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; }
.site-nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .95rem; transition: color .2s var(--ease); }
.site-nav a:hover { color: var(--text); }
@media (max-width: 720px) { .site-nav a:not(.btn) { display: none; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.3rem; border-radius: 999px;
  font-weight: 700; font-size: .98rem; text-decoration: none; white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--accent); color: var(--accent-ink) !important; box-shadow: 0 8px 22px -10px var(--accent); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px var(--accent); }
.btn-quiet { color: var(--text) !important; border: 1px solid var(--line); background: var(--surface); }
.btn-quiet:hover { border-color: var(--accent); }
.btn-s { padding: .55rem 1rem; font-size: .9rem; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 2.5rem 0 3rem; color: var(--muted); font-size: .92rem; }
.site-footer .wrap { display: grid; gap: 1rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-footer nav a { color: var(--muted); text-decoration: none; font-weight: 600; }
.site-footer nav a:hover { color: var(--text); }

/* Legal pages (privacidad, borrar-cuenta) */
.doc { max-width: 44rem; margin: 0 auto; padding: 3.5rem var(--gutter) 4rem; }
.doc h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); line-height: 1.1; letter-spacing: -.035em; margin: 0 0 .5rem; }
.doc h2 { font-size: 1.2rem; letter-spacing: -.01em; margin: 2.5rem 0 .6rem; color: var(--accent); }
.doc .updated { color: var(--muted); margin: 0 0 2rem; }
.doc ul, .doc ol { padding-left: 1.25rem; }
.doc li { margin-bottom: .55rem; }
.doc li::marker { color: var(--accent); }