/* The site that presents Servos and its guide, in the app's own paper, ink and moss (src/app/styles.css), with its
   letters: Onest for what is said, Charis SIL for what is quoted. Phone first (375 px); the theme is the system's. */

@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("letras/onest-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("letras/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Charis SIL"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("letras/charis-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Charis SIL"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("letras/charis-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Charis SIL"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("letras/charis-latin-700.woff2") format("woff2"); }

:root {
  --bg: #f7f2e8;
  --surface: #fefcf7;
  --surface-soft: #ede7db;
  --text: #182125;
  --text-soft: #454e54;
  --line: #ddd7ca;
  --accent: #3b6f30;
  --accent-text: #ffffff;
  --accent-soft: #e2ebdc;
  --mark: #f2cf8f;
  --warn-bg: #faf0dc;
  --warn-text: #8a5b12;
  --field-ink: #2f5a26;
  --on-field: #f7f2e8;
  --on-field-soft: rgba(247, 242, 232, 0.84);
  --field-kicker: #f2cf8f;
  --hair: rgba(70, 50, 20, 0.12);
  --shadow-card: 0 1px 2px rgba(70, 50, 20, 0.08), 0 3px 10px rgba(70, 50, 20, 0.07);
  --serif: 'Charis SIL', 'PT Serif', Georgia, 'Times New Roman', serif;
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius: 10px;
  --gutter: 16px;
  --wide: 1120px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c1316;
    --surface: #151c20;
    --surface-soft: #1f262b;
    --text: #e9e4da;
    --text-soft: #bbb7ae;
    --line: #2c3439;
    --accent: #98cf8b;
    --accent-text: #0c1316;
    --accent-soft: #1b2b1d;
    --mark: #61481b;
    --warn-bg: #3a2c12;
    --warn-text: #f5d79e;
    --field-ink: #1f3a22;
    --on-field: #e9e4da;
    --on-field-soft: rgba(233, 228, 218, 0.8);
    --field-kicker: #e2b55c;
    --hair: rgba(233, 228, 218, 0.09);
    --shadow-card: none;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 var(--font);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1; width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }

a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, .boton:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 800; letter-spacing: -0.01em; }
h1 { font-size: 34px; }
h2 { font-size: 24px; }
h3 { font-size: 19px; }

img { max-width: 100%; height: auto; display: block; }

code { font-size: 0.9em; background: var(--surface-soft); padding: 1px 5px; border-radius: 4px; }

/* ── The bar on top, edge to edge ── */

.barra {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px var(--gutter);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.nombre {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  font-size: 20px;
}
.marca { width: 28px; height: 28px; fill: var(--accent); }
.enlaces { display: flex; align-items: center; gap: 4px; }
.enlaces a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}
.enlaces a:hover { background: var(--surface-soft); }
.enlaces a[aria-current='page'] { color: var(--accent); }
.enlaces .abrir { border: 1px solid var(--line); }

/* ── Buttons: one filled per screen, the way on ── */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: background 140ms cubic-bezier(0.2, 0, 0, 1);
}
.boton:hover { background: var(--surface-soft); }
.boton.lleno { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.boton.lleno:hover { filter: brightness(1.08); }
.boton span { font-weight: 600; color: var(--text-soft); }

.entrada { font-size: 20px; color: var(--text-soft); margin: 12px 0 0; }
.entrada-chica { color: var(--text-soft); margin: 8px 0 0; max-width: 62ch; }
.nota-chica { font-size: 15px; color: var(--text-soft); margin: 12px 0 0; }

/* ── The landing ── */

.portada { display: grid; gap: 32px; padding: 40px 0 24px; align-items: center; }
.portada h1 { font-size: 40px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.acciones .boton { flex: 1 1 200px; }

/* A phone's picture is drawn as a phone, and never wider than one. */
figure { margin: 0; }
figure.telefono { max-width: 300px; margin-inline: auto; }
figure.telefono img {
  border-radius: 28px;
  border: 8px solid var(--text);
  box-shadow: var(--shadow-card);
  background: var(--bg);
}
figure.ancha img { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
figcaption { font-size: 15px; color: var(--text-soft); margin-top: 10px; text-align: center; }

.tres { display: grid; gap: 12px; padding: 16px 0 24px; }
.tres > div { background: var(--surface); border-radius: 14px; padding: 20px; box-shadow: var(--shadow-card); }
.tres h2 { font-size: 20px; }
.tres p { margin: 8px 0 0; color: var(--text-soft); }

.pasos, .descargas, .guia-corta { padding: 32px 0; border-top: 1px solid var(--line); }
.pasos ol { padding-inline-start: 22px; margin: 16px 0 28px; max-width: 62ch; }
.pasos li { margin: 0 0 10px; }

/* The downloads: a field of moss, as the app's «go on where you left off». */
.descargas {
  background: var(--field-ink);
  color: var(--on-field);
  border-radius: 18px;
  padding: 28px 20px;
  border-top: none;
  margin: 8px 0 32px;
}
.descargas .entrada-chica, .descargas .nota-chica { color: var(--on-field-soft); }
.descargas h2 { color: var(--on-field); }
.tarjetas { display: grid; gap: 12px; margin-top: 20px; }
.tarjeta { background: var(--surface); color: var(--text); border-radius: 14px; padding: 20px; display: grid; gap: 10px; align-content: start; }
.tarjeta p { margin: 0; color: var(--text-soft); }
.tarjeta .boton { width: 100%; flex-wrap: wrap; overflow-wrap: anywhere; }
.archivo { margin-top: -4px; font-size: 13px; color: var(--text-soft); text-align: center; overflow-wrap: anywhere; }
.seguir { font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }

.capitulos { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; counter-reset: cap; }
.capitulos li { counter-increment: cap; }
.capitulos a {
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 12px;
  padding: 16px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--text);
  text-decoration: none;
}
.capitulos a::before {
  content: counter(cap);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
}
.capitulos a:hover { background: var(--surface-soft); }
.capitulos span { color: var(--text-soft); font-size: 15px; }

/* ── The guide ── */

.guia { display: grid; gap: 24px; padding: 24px 0 40px; }
.lado { display: none; }
.texto { max-width: 68ch; padding-bottom: 32px; }
.texto > h1 { margin-top: 4px; }
.miga { font-size: 15px; color: var(--text-soft); margin: 16px 0 0; }
.texto h2 { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.texto h3 { margin: 28px 0 0; }
.texto p, .texto ul, .texto ol { margin: 12px 0 0; }
.texto li { margin: 0 0 8px; }
.texto figure { margin-top: 20px; margin-bottom: 8px; }
.tira { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 20px; align-items: start; }
.tira figure { margin-top: 0; }

.indice { margin-top: 20px; padding: 16px 20px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-card); }
.indice p { margin: 0; font-weight: 700; font-size: 15px; color: var(--text-soft); }
.indice ul { margin: 6px 0 0; padding: 0; list-style: none; }
.indice li { margin: 0; }
.indice a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 700; }

.aviso { margin-top: 20px; padding: 14px 18px; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn-text); }
.aviso p:first-child { margin-top: 0; }
.aviso strong { color: inherit; }

.seguir-leyendo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; }
.seguir-leyendo .boton { flex: 1 1 220px; }

/* ── The foot ── */

.pie { border-top: 1px solid var(--line); padding: 20px var(--gutter) 32px; color: var(--text-soft); font-size: 15px; text-align: center; }
.pie p { margin: 0 auto; max-width: 62ch; }
.idiomas { display: flex; justify-content: center; gap: 4px; margin-bottom: 12px; }
.idiomas a, .idiomas span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--radius); }
.idiomas span { font-weight: 700; color: var(--text); }

/* ── A wider window ── */

@media (min-width: 760px) {
  :root { --gutter: 32px; }
  h1, .portada h1 { font-size: 52px; }
  h2 { font-size: 30px; }
  .portada { grid-template-columns: 1.2fr 1fr; padding: 64px 0 40px; }
  .tres { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .tarjetas { grid-template-columns: repeat(3, 1fr); }
  .descargas { padding: 40px; }
  .capitulos { grid-template-columns: 1fr 1fr; }
  .texto > h1 { font-size: 44px; }
  .guia .texto figure.telefono { float: right; width: 280px; margin: 8px 0 16px 32px; }
  .guia .texto .tira figure.telefono { float: none; width: auto; margin: 0; }
  .texto h2, .seguir-leyendo, .tira, .texto figure.ancha { clear: both; }
}

@media (min-width: 1100px) {
  .guia { grid-template-columns: 240px 1fr; gap: 48px; }
  .lado { display: block; position: sticky; top: 84px; align-self: start; padding-top: 16px; }
  .lado-titulo { font-weight: 800; color: var(--text); text-decoration: none; }
  .lado ol { list-style: none; padding: 0; margin: 12px 0 0; }
  .lado li a {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius);
    color: var(--text-soft);
    text-decoration: none;
    font-weight: 700;
  }
  .lado li a:hover { background: var(--surface-soft); }
  .lado li a[aria-current='page'] { background: var(--accent-soft); color: var(--accent); }
}