/* Gatera. Fuentes del sistema: nada se descarga de Google ni de un CDN. */

:root {
  --ink: #1e1a16;
  --muted: #5e564c;
  --paper: #f7f3ec;
  --paper-2: #efe6d6;
  --line: #ddcfbb;
  --accent: #6e4b2b;
  --mark: #3d2914;
  --focus: #1e1a16;
  color-scheme: light;
  font-family: "PingFang SC", "Hiragino Sans GB", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Apple SD Gothic Neo",
    "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans CJK JP", "Noto Sans CJK KR",
    "Malgun Gothic", "Yu Gothic", "Yu Gothic UI", "Meiryo",
    "Noto Sans SC", "Noto Sans JP", "Noto Sans KR",
    "Source Han Sans SC", "Source Han Sans JP", "Source Han Sans KR",
    system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 1.05rem;
}

body, h1, h2, h3, p, li { overflow-wrap: anywhere; }

html[lang|="zh"] body,
html[lang="ja"] body,
html[lang="ko"] body { line-break: strict; }

a { color: var(--accent); }
a:hover { color: var(--mark); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.4rem 0.7rem;
  z-index: 5;
}
.skip:focus { top: 0.5rem; }

.wrap {
  width: min(72rem, calc(100% - 2rem));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--paper) 92%, white);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 0.75rem 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 650;
  margin-right: auto;
}

.brand .mark { font-size: 1.35rem; line-height: 1; }

.nav, .langs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  align-items: center;
}

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

.nav a[aria-current="page"],
.langs a[aria-current="true"] {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.hero, section { padding: 1.6rem 0; }

.hero {
  padding-top: 2rem;
  border-bottom: 1px solid var(--line);
}

.page-title {
  padding-top: 2rem;
  padding-bottom: 0.4rem;
}

.page-title h1 { margin: 0; }

h2, section[id], .page-title { scroll-margin-top: 10rem; }

.jump {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0.35rem 0 0.7rem;
}

.jump a {
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  background: white;
  font-size: 0.9rem;
}

details.more { margin: 0.35rem 0 0.6rem; }

details.more summary {
  cursor: pointer;
  color: var(--muted);
}

.eyebrow, .meta, .fine, .pending, .source {
  color: var(--muted);
}

.eyebrow {
  letter-spacing: 0.02em;
  margin: 0 0 0.4rem;
}

h1, h2, h3 { line-height: 1.25; font-weight: 650; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin: 0 0 0.4rem; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 0.6rem; }
h3 { font-size: 1.2rem; margin: 0.2rem 0 0.35rem; }

.lede { font-size: 1.25rem; margin-top: 0; }

.button {
  display: inline-block;
  background: var(--mark);
  color: #f7f3ec;
  text-decoration: none;
  padding: 0.75rem 1.1rem;
  min-height: 2.75rem;
  border-radius: 999px;
}

.button:hover { background: #2a1c0e; color: #f7f3ec; }

.steps, .plain { padding-left: 1.1rem; }
.steps li, .plain li { margin: 0.35rem 0; }

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  padding: 1rem 1rem 0.85rem;
}

.card-lead {
  background: var(--paper-2);
  border-color: #c8b190;
}

.badge {
  display: inline-block;
  margin: 0 0 0.45rem;
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.82rem;
}

.addr { margin-bottom: 0.2rem; }

.note { margin: 0.45rem 0; }

.site-footer {
  border-top: 1px solid var(--line);
  padding: 1.4rem 0 2.2rem;
  color: var(--muted);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-bottom: 0.6rem;
}

@media (min-width: 800px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


.email-cta {
  display: inline-block;
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  font-weight: 650;
  letter-spacing: 0.01em;
  user-select: all;
  -webkit-user-select: all;
  color: var(--mark);
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

.brand .mark img {
  display: block;
  width: 1.55rem;
  height: 1.55rem;
}