/* snowlab.com.mx - one stylesheet for every page. Colours are Snowlab's own
   (snowy/assets/ui/shell.rcss); fonts are the app's, served from here so
   no visitor's address goes to a font service. */

@font-face { font-family: "Baloo 2"; src: url("/fonts/Baloo2-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/Nunito-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/Nunito-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --bg: #EEF4F6;
  --surface: #FFFFFF;
  --ink: #36353B;
  --muted: #6E757C;
  --brand: #3B8DA1;
  --brand-strong: #2C6E7E;
  --brand-soft: #CDE8EF;
  --line: #D5E3E8;
  --mark: #FFF1A8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14191C;
    --surface: #1C2327;
    --ink: #E6EEF1;
    --muted: #9AA6AD;
    --brand: #5BB3C7;
    --brand-strong: #8CC5D2;
    --brand-soft: #22414A;
    --line: #2C373D;
    --mark: #5A4E12;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--brand-strong); }
a:hover { color: var(--brand); }

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

/* Top bar */
.top { padding: 20px 0; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--brand); }
.brand svg { width: 34px; height: 34px; flex: none; }
.brand span { color: var(--ink); font: 700 26px/1 "Baloo 2", "Nunito", sans-serif; letter-spacing: -0.01em; padding-top: 4px; }
.top nav { display: flex; gap: 20px; font-size: 15px; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover { color: var(--ink); }

/* Landing */
.hero { padding-top: 64px; padding-bottom: 80px; }
.hero .eyebrow { display: inline-block; color: var(--brand-strong); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 12px; }
.hero h1 { font: 700 clamp(38px, 6vw, 64px)/1.05 "Baloo 2", "Nunito", sans-serif; margin: 0 0 20px; max-width: 14ch; letter-spacing: -0.01em; }
.hero p.lead { font-size: clamp(18px, 2.2vw, 21px); color: var(--muted); max-width: 40ch; margin: 0 0 32px; }
.status { display: inline-flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px; font-size: 16px; }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); flex: none; }

.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-bottom: 88px; }
.point { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.point h2 { font: 700 21px/1.2 "Baloo 2", "Nunito", sans-serif; margin: 0 0 8px; }
.point p { margin: 0; color: var(--muted); font-size: 16px; }
@media (max-width: 780px) { .points { grid-template-columns: 1fr; } .hero { padding-top: 40px; padding-bottom: 56px; } }

/* Legal pages */
.doc { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 40px 48px; margin: 8px auto 64px; max-width: 820px; }
.doc h1 { font: 700 clamp(28px, 4vw, 38px)/1.15 "Baloo 2", "Nunito", sans-serif; margin: 0 0 4px; }
.doc h2 { font-size: 20px; line-height: 1.3; margin: 32px 0 10px; color: var(--brand-strong); }
.doc h3 { font-size: 17px; margin: 22px 0 8px; }
.doc p, .doc li { text-align: left; }
.doc ul { padding-left: 22px; }
.doc li > p { margin: 4px 0; }
.doc mark { background: var(--mark); color: inherit; padding: 0 2px; }
.doc .version { color: var(--muted); margin: 0 0 24px; }
.draft { background: var(--mark); border-radius: 10px; padding: 12px 16px; margin: 0 0 24px; font-size: 15px; }
@media (max-width: 640px) { .doc { padding: 24px 20px; border-radius: 12px; } }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--muted); font-size: 14px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.foot nav { display: flex; gap: 20px; }
.foot a { color: var(--muted); }