/* Smart Fams · sitio público de smartfams.com
   Sin scripts, sin cookies, sin peticiones a terceros: las tipografías van en /fonts. */

@font-face {
  font-family: 'Zen Maru Gothic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/zen-maru-gothic-700-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;   /* archivo variable: cubre de normal a negrita */
  font-display: swap;
  src: url(/fonts/karla-latin.woff2) format('woff2');
}

:root {
  --ground:#EFF1EA; --surface:#FBFCF8; --sunken:#E6E9DF;
  --ink:#26332C; --ink-soft:#5A6B60; --line:#DEE3D6;
  --verde:#33684B; --verde-ink:#2A5740; --verde-wash:#EAF1E7;
  --kin:#A87E1C; --kin-wash:#FAF4E3;
  --shadow:0 1px 2px rgba(38,51,44,.05), 0 8px 24px -16px rgba(38,51,44,.25);
  --round:16px;
  --title:'Zen Maru Gothic', ui-rounded, 'Hiragino Maru Gothic ProN', system-ui, sans-serif;
  --body:'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#141A16; --surface:#1C231E; --sunken:#10150F;
    --ink:#E8EDE5; --ink-soft:#A9B7AC; --line:#2C362D;
    --verde:#7FB98F; --verde-ink:#9CCBA8; --verde-wash:#1F2C23;
    --kin:#D9A62E; --kin-wash:#231D0F;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -16px rgba(0,0,0,.6);
  }
}

* { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap { max-width:900px; margin:0 auto; padding:0 20px }
h1, h2, h3, .brand-name { font-family:var(--title); letter-spacing:.01em; line-height:1.25 }
h1 { font-size:clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); margin:0 0 14px }
h2 { font-size:1.45rem; margin:44px 0 12px }
h3 { font-size:1.1rem; margin:24px 0 6px }
p { margin:0 0 14px }
a { color:var(--verde-ink); text-underline-offset:3px; text-decoration-thickness:1.5px }
a:hover { color:var(--verde) }
:focus-visible { outline:3px solid var(--kin); outline-offset:3px; border-radius:6px }
strong { font-weight:700 }
code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.92em; background:var(--sunken); padding:1px 5px; border-radius:5px }
small, .fine { font-size:.87rem; color:var(--ink-soft) }
ul { padding-left:1.15em; margin:0 0 14px }
li { margin:0 0 8px }
.skip { position:absolute; left:-9999px }
.skip:focus { left:16px; top:16px; z-index:9; background:var(--surface); padding:10px 14px; border-radius:10px; box-shadow:var(--shadow) }

/* ---- cabecera ---- */
header.site { border-bottom:1px solid var(--line); background:var(--surface) }
header.site .wrap { display:flex; align-items:center; gap:16px; min-height:66px; flex-wrap:wrap }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:700 }
.brand img { width:32px; height:32px; border-radius:9px; display:block }
.brand-name { font-size:1.05rem }
header.site nav { margin-left:auto; display:flex; align-items:center; gap:18px; font-size:.95rem }
header.site nav a { text-decoration:none }
header.site nav a:hover { text-decoration:underline }
.lang { border:1px solid var(--line); border-radius:999px; padding:3px 11px; font-weight:700; font-size:.82rem; letter-spacing:.04em }

/* ---- portada ---- */
.hero { padding:64px 0 8px }
.lede { font-size:1.18rem; color:var(--ink-soft); max-width:36em; margin-bottom:26px }
.actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:14px }
.btn {
  display:inline-block; text-decoration:none; font-weight:700; font-size:1rem;
  padding:12px 22px; border-radius:999px; border:1.5px solid transparent;
}
.btn-primary { background:var(--verde); color:var(--surface) }
.btn-primary:hover { background:var(--verde-ink); color:var(--surface) }
.btn-ghost { border-color:var(--line); background:var(--surface); color:var(--ink) }
.btn-ghost:hover { border-color:var(--verde); color:var(--ink) }
.badge {
  display:inline-block; background:var(--kin-wash); color:var(--kin);
  border-radius:999px; padding:4px 12px; font-size:.82rem; font-weight:700;
  letter-spacing:.03em; margin-bottom:18px;
}

/* ---- tarjetas ---- */
.cards { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); margin:8px 0 0; padding:0; list-style:none }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--round); padding:20px; box-shadow:var(--shadow) }
.card h3 { margin:0 0 6px }
.card p { margin:0; color:var(--ink-soft); font-size:.97rem }
.card .emoji { font-size:1.5rem; display:block; margin-bottom:8px; line-height:1.3 }

/* ---- bloque destacado ---- */
.note {
  background:var(--verde-wash); border:1px solid var(--line); border-radius:var(--round);
  padding:22px 24px; margin:24px 0;
}
.note h2 { margin-top:0 }
.note p:last-child { margin-bottom:0 }

/* ---- texto largo (soporte y privacidad) ---- */
.doc { padding:44px 0 8px; max-width:44em }
.doc h1 + p { font-size:1.1rem; color:var(--ink-soft) }
.doc dl { margin:0 0 14px }
.doc dt { font-weight:700; margin-top:14px }
.doc dd { margin:0 0 0 0 }
.doc table { border-collapse:collapse; width:100%; margin:6px 0 18px; font-size:.95rem }
.doc th, .doc td { text-align:left; vertical-align:top; padding:9px 12px; border-bottom:1px solid var(--line) }
.doc th { font-family:var(--title); font-weight:700 }
.updated { font-size:.87rem; color:var(--ink-soft); border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:5px 14px; display:inline-block; margin-bottom:22px }
.mail { font-weight:700 }

/* ---- pie ---- */
footer.site { margin-top:56px; border-top:1px solid var(--line); background:var(--surface) }
footer.site .wrap { padding-top:24px; padding-bottom:34px }
footer.site p { margin:0 0 6px; font-size:.92rem }
footer.site a { text-decoration:none }
footer.site a:hover { text-decoration:underline }

/* ---- pantallas estrechas ---- */
@media (max-width: 560px) {
  body { font-size:16px }
  .hero { padding:40px 0 4px }
  .doc { padding:32px 0 4px }
  .doc table { font-size:.88rem }
  .doc th, .doc td { padding:8px }
  .note { padding:18px }
  header.site nav { gap:14px; font-size:.9rem }
}