/* Akari — landing + legal pages. Same "Zen Garden" palette as the app's
   default theme (foco/src/lib/temas/jardinzen.ts): moss green accent,
   warm terracotta, cream paper background. Self-contained, no external
   fonts/requests. */

:root {
  --acento: #5b8266;
  --acento-oscuro: #3f7d6b;
  --primario: #c98a4b;
  --suave: #eef3ea;
  --borde: #cddcc9;
  --fondo-app: #f4efdf;
  --texto: #1a1a1a;
  --texto-sec: #6b6558;
}
@media (prefers-color-scheme: dark) {
  :root {
    --acento: #5fa792;
    --acento-oscuro: #5fa792;
    --primario: #d99a5e;
    --suave: #1f2b23;
    --borde: #375041;
    --fondo-app: #141a15;
    --texto: #f0f0ee;
    --texto-sec: #b9c2ba;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--texto);
  background-color: var(--fondo-app);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='18' viewBox='0 0 120 18'%3E%3Cpath d='M0 3 Q15 0 30 3 T60 3 T90 3 T120 3' fill='none' stroke='%235b8266' stroke-opacity='0.07' stroke-width='1.2'/%3E%3Cpath d='M0 15 Q15 12 30 15 T60 15 T90 15 T120 15' fill='none' stroke='%235b8266' stroke-opacity='0.05' stroke-width='1.2'/%3E%3C/svg%3E");
  line-height: 1.6;
}

a { color: var(--acento-oscuro); }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }

header.site {
  padding: 28px 0 10px;
}
header.site .wrap { display: flex; align-items: center; gap: 12px; }
.mark {
  width: 40px; height: 40px; flex: none;
  display: block;
  border-radius: 22%;
  object-fit: cover;
}
.wordmark { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.01em; }
.wordmark small { display: block; font-weight: 400; font-size: 0.75rem; color: var(--texto-sec); }

main { padding: 24px 0 64px; }

h1 { font-size: 2rem; line-height: 1.25; margin: 0.4em 0 0.3em; }
h2 { font-size: 1.3rem; margin: 2.2em 0 0.6em; color: var(--acento-oscuro); }
p { color: var(--texto); }
.lede { font-size: 1.1rem; color: var(--texto-sec); max-width: 46ch; }

.card {
  background: var(--suave);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 20px 22px;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 28px 0;
  padding: 0;
  list-style: none;
}
.features li {
  background: var(--suave);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 16px 18px;
}
.features .ic { font-size: 1.4rem; display: block; margin-bottom: 6px; }
.features h3 { margin: 0 0 4px; font-size: 1rem; }
.features p { margin: 0; font-size: 0.92rem; color: var(--texto-sec); }

.pill {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--acento-oscuro);
  background: var(--suave);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 14px;
}

footer.site {
  border-top: 1px solid var(--borde);
  padding: 22px 0 40px;
  font-size: 0.85rem;
  color: var(--texto-sec);
}
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
footer.site a { color: var(--texto-sec); }

.legal h1 { font-size: 1.6rem; }
.legal .updated { color: var(--texto-sec); font-size: 0.9rem; margin-top: -0.4em; }
.legal h2 { font-size: 1.05rem; margin: 1.8em 0 0.5em; }
.legal ul { padding-left: 1.2em; }
.legal li { margin: 0.3em 0; }
.back { display: inline-block; margin-bottom: 18px; font-size: 0.9rem; }