/* La web de Yagi.
 *
 * Un solo fichero para las seis páginas. `TEXTOS.md` decía «CSS incrustado en
 * cada página, son dos páginas»; son seis, así que un fichero cacheado gana a
 * repetir el mismo bloque seis veces.
 *
 * Oscuro, neutro y SIN COLOR DE ACENTO: el único color propio del proyecto es
 * el #1D3550 del logotipo, y vive dentro del SVG. Ni botones azules ni enlaces
 * de color. Lo que destaca, destaca por contraste o por peso, no por tono.
 *
 * Tipografía del sistema. Cero fuentes descargadas: son peticiones a otro
 * servidor, que es exactamente lo que esta página promete que no hay.
 */

:root {
  color-scheme: dark;
  --papel: #1b1b1d;
  --panel: #242427;
  --tinta: #ececee;
  --suave: #9a9a9f;
  --linea: #35353a;
  --peligro: #ff9a8f;
  --peligro-fondo: #2a1917;
}

* { box-sizing: border-box }

html { -webkit-text-size-adjust: 100% }

body {
  margin: 0;
  padding: 3rem 1.25rem 5rem;
  background: var(--papel);
  color: var(--tinta);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

main, header, footer { max-width: 46rem; margin-inline: auto }

/* ── Cabecera ───────────────────────────────────────────────────────── */

.marca { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem }
.marca img { width: 56px; height: auto; flex: none }
.marca p { margin: 0; color: var(--suave) }
.marca strong { display: block; color: var(--tinta); font-size: 1.35rem; letter-spacing: -.01em }

/* ── Texto ──────────────────────────────────────────────────────────── */

h1 { font-size: 1.75rem; line-height: 1.25; margin: 0 0 .75rem; letter-spacing: -.02em }
h2 {
  font-size: 1.1rem; margin: 3rem 0 .9rem; padding-bottom: .45rem;
  border-bottom: 1px solid var(--linea); letter-spacing: -.01em;
}
h3 { font-size: 1rem; margin: 2rem 0 .5rem }
p { margin: 0 0 1rem }
a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--suave) }
a:hover { text-decoration-color: currentColor }
.suave { color: var(--suave) }
.entradilla { font-size: 1.1rem; color: var(--suave); margin-bottom: 2rem }

/* El bloque que dice que Yagi no da contenido. Mismo tamaño que el resto del
 * texto principal a propósito: destaca por el filete y el fondo, no por ser
 * más grande ni por ir en un color de aviso. Es información, no una alarma. */
.aviso-contenido {
  background: var(--panel);
  border-left: 3px solid var(--suave);
  border-radius: 0 8px 8px 0;
  padding: 1.1rem 1.25rem;
  margin: 0 0 2.5rem;
}
.aviso-contenido p:last-child { margin-bottom: 0 }

/* ── Descarga ───────────────────────────────────────────────────────── */

.descarga { background: var(--panel); border-radius: 10px; padding: 1.25rem 1.4rem; margin: 0 0 1.25rem }
.descarga p:last-child { margin-bottom: 0 }
.descarga .ficha { color: var(--suave); font-size: .9rem }

/* El botón, para el día que haya descarga: claro sobre oscuro, sin color. */
.boton {
  display: inline-block; padding: .7rem 1.4rem; border-radius: 8px;
  background: var(--tinta); color: var(--papel); font-weight: 600;
  text-decoration: none;
}
.boton:hover { background: #fff }

/* El enlace a la primera apertura. Va destacado a propósito: es donde se
 * atasca todo el mundo, y esconderlo es garantizar soporte. */
.siguiente-paso {
  display: block; border: 1px solid var(--linea); border-radius: 10px;
  padding: 1rem 1.25rem; margin: 1.5rem 0; text-decoration: none;
}
.siguiente-paso:hover { border-color: var(--suave) }
.siguiente-paso strong { display: block; margin-bottom: .25rem }
.siguiente-paso span { color: var(--suave); font-size: .93rem }

/* ── Plataformas ────────────────────────────────────────────────────── */

/* Una lista de entradas iguales. Añadir una plataforma es añadir un <li>:
 * nada del resto de la página depende de cuántas haya. */
.plataformas { list-style: none; padding: 0; margin: 1.25rem 0 0 }
.plataformas li {
  display: flex; gap: 1rem; align-items: baseline;
  padding: .8rem 0; border-top: 1px solid var(--linea);
}
.plataformas b { flex: 0 0 9rem }
.plataformas span { color: var(--suave) }

/* ── Funciones y capturas ───────────────────────────────────────────── */

.funcion { margin: 2.5rem 0 }
.funcion h3 { margin-top: 0 }
/* Con margen ABAJO también: sin él, el pie de foto se pegaba al párrafo
 * siguiente y los dos se leían como el mismo bloque. */
figure { margin: 1.25rem 0 1.75rem }
figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--linea); border-radius: 10px;
}
figcaption { color: var(--suave); font-size: .85rem; margin-top: .5rem }

ul.simple { padding-left: 1.1rem }
ul.simple li { margin-bottom: .4rem }

ol.conexiones { padding-left: 1.4rem }
ol.conexiones li { margin-bottom: .4rem }

/* ── Cajas ──────────────────────────────────────────────────────────── */

.caja { border-radius: 10px; padding: 1rem 1.25rem; margin: 1.5rem 0; border: 1px solid var(--linea) }
.caja p:first-child { margin-top: 0 }
.caja p:last-child { margin-bottom: 0 }
/* El único color de la hoja, y es semántico, no decorativo: el consejo de
 * apagar Gatekeeper en todo el sistema es lo más peligroso de esta web. */
.peligro { background: var(--peligro-fondo); border-color: var(--peligro); color: var(--peligro) }
.peligro strong { color: inherit }

code { background: var(--panel); border-radius: 5px; padding: .15rem .4rem; font-size: .9em }
kbd { font: inherit; font-weight: 600; background: var(--panel); border-radius: 5px; padding: .1rem .4rem }

/* ── Pasos numerados (primera apertura) ─────────────────────────────── */

ol.pasos { padding-left: 0; list-style: none; counter-reset: paso }
ol.pasos li { counter-increment: paso; position: relative; padding: 0 0 1.4rem 3rem }
ol.pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: -.1rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--tinta); color: var(--papel);
  display: grid; place-items: center; font-weight: 600; font-size: .95rem;
}

/* ── Pie ────────────────────────────────────────────────────────────── */

footer {
  margin-top: 4rem; padding-top: 1.25rem; border-top: 1px solid var(--linea);
  color: var(--suave); font-size: .9rem;
}
footer p { margin-bottom: .6rem }

@media (max-width: 34rem) {
  body { padding-top: 2rem }
  .plataformas li { display: block }
  .plataformas b { display: block; margin-bottom: .15rem }
}

/* ── Marcadores pendientes ──────────────────────────────────────────── */

/* Los tres marcadores de la web (dominio, correo, Ko-fi) se VEN a propósito.
 * Decisión del usuario: «prefiero un DOMINIO-PENDIENTE visible a un enlace
 * roto». El estilo es lo que separa «pendiente a propósito» de «esto está mal»:
 * monoespaciado y con borde discontinuo, que es como se lee un hueco. */
.marcador {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85em; color: var(--suave);
  border: 1px dashed var(--linea); border-radius: 5px;
  padding: .05rem .4rem; white-space: nowrap;
}