/*
 * La web de Apolo (apolo.webcafeina.com, entrega 8d, ADR 0024).
 *
 * La paleta es la de la aplicación: tokens.css lo genera `make tokens` desde crates/tema, y su
 * contraste se mide allí (tests/contraste.rs). Aquí solo se usan parejas medidas: tinta, cuerpo y
 * apagado sobre lienzo, suave, tarjeta, elevada y campo; sobre-acento sobre relleno. El oro nunca
 * es color de texto: solo relleno.
 *
 * La estructura (escalas, radios, densidad, anatomía de botones y tarjetas) sale del sistema
 * «raycast» de ~/sistemas-diseno-empresas, solo la estructura: una web de producto donde la
 * interfaz de la aplicación es la protagonista. Tipografía 64/56/24/20/18/16/14/13; espaciado
 * 4/8/12/16/24/32 y 96 entre secciones; radios 6/8/10/16; botones de 36 px; borde de un píxel;
 * 1200 px de ancho. La identidad es la de Apolo: Marcellus en la marca y los titulares, Figtree en
 * el texto (las dos OFL, alojadas aquí: la web no carga nada de terceros).
 */

@font-face {
  font-family: "Marcellus";
  src: url("fuentes/marcellus-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fuentes/figtree-latin-variable.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --serif: "Marcellus", Georgia, serif;
  --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-seccion: 96px;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 16px;

  --ancho: 1200px;
  --margen: 24px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--lienzo);
  color: var(--cuerpo);
  font: 400 16px/1.6 var(--sans);
}

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

a {
  color: var(--tinta);
  text-underline-offset: 3px;
}

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

.contenedor {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--margen);
}

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

.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--lienzo) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--filete);
}
.cabecera .contenedor {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  height: 60px;
}
.marca {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  color: var(--tinta);
  text-decoration: none;
  font: 400 22px/1 var(--serif);
}
.marca img {
  width: 28px;
  height: 28px;
}
.navegacion {
  display: flex;
  gap: var(--e-5);
  margin-left: auto;
  font-size: 14px;
}
.navegacion a {
  color: var(--cuerpo);
  text-decoration: none;
}
.navegacion a:hover {
  color: var(--tinta);
}
.idioma {
  font-size: 14px;
  color: var(--cuerpo);
}

/* ── Botones (los de raycast: 36 px, radio 8, texto de 14) ────────────────────── */

.boton {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  height: 44px;
  padding: 0 var(--e-5);
  border-radius: var(--r-md);
  border: 1px solid var(--filete);
  background: var(--boton);
  color: var(--tinta);
  font: 600 15px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.boton:hover {
  background: var(--boton-encima);
}
.boton.principal {
  background: var(--relleno);
  border-color: var(--relleno);
  color: var(--sobre-acento);
}
.boton.principal:hover {
  background: var(--relleno-vivo);
  border-color: var(--relleno-vivo);
}
.boton.chico {
  height: 36px;
  padding: 0 var(--e-4);
  font-size: 14px;
}

/* ── Héroe ────────────────────────────────────────────────────────────────────── */

.heroe {
  padding: var(--e-seccion) 0 var(--e-6);
  text-align: center;
}
.heroe .icono {
  width: 112px;
  height: 112px;
  margin: 0 auto var(--e-5);
}
h1,
h2 {
  margin: 0;
  color: var(--tinta);
  font-family: var(--serif);
  font-weight: 400;
}
h1 {
  font-size: 64px;
  line-height: 1.1;
}
.heroe .lema {
  max-width: 680px;
  margin: var(--e-5) auto 0;
  font-size: 20px;
  line-height: 1.5;
}
.acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-3);
  margin-top: var(--e-6);
}
.letra-chica {
  margin-top: var(--e-4);
  font-size: 13px;
  color: var(--apagado);
}

/* La captura, enmarcada: la interfaz de la aplicación es la protagonista. */
.captura {
  margin: var(--e-6) auto 0;
  border: 1px solid var(--filete);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--suave);
  box-shadow: 0 24px 64px rgb(0 0 0 / 18%);
}

/* ── Secciones ────────────────────────────────────────────────────────────────── */

.seccion {
  padding: var(--e-seccion) 0;
  border-top: 1px solid var(--filete);
}
.seccion.suave {
  background: var(--suave);
}
h2 {
  font-size: 40px;
  line-height: 1.15;
}
.entradilla {
  max-width: 720px;
  margin: var(--e-4) 0 0;
  font-size: 18px;
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-4);
  margin-top: var(--e-6);
}
.tarjeta {
  padding: var(--e-5);
  border: 1px solid var(--filete);
  border-radius: var(--r-lg);
  background: var(--tarjeta);
}
.tarjeta h3 {
  margin: 0 0 var(--e-2);
  color: var(--tinta);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}
.tarjeta p {
  margin: 0;
  font-size: 15px;
}

.formatos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-5);
  padding: 0;
  list-style: none;
}
.formatos li {
  padding: var(--e-1) var(--e-3);
  border: 1px solid var(--filete);
  border-radius: 999px;
  background: var(--tarjeta);
  color: var(--tinta);
  font-size: 14px;
  font-weight: 600;
}

/* Texto a un lado y captura al otro. */
.dos {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--e-6);
  align-items: center;
}
.dos .captura {
  margin: 0;
}
/* Sin esto, un elemento de la rejilla no se encoge por debajo de su contenido (un bloque de
   código largo), y en un móvil la página se desplaza en horizontal. */
.dos > *,
.rejilla > *,
.notas > * {
  min-width: 0;
}
.dos ul {
  margin: var(--e-4) 0 0;
  padding-left: 1.2em;
}
.dos li + li {
  margin-top: var(--e-2);
}

/* ── Código ───────────────────────────────────────────────────────────────────── */

pre,
code {
  font-family: var(--mono);
}
pre {
  margin: var(--e-4) 0 0;
  padding: var(--e-4);
  overflow-x: auto;
  border: 1px solid var(--filete);
  border-radius: var(--r-md);
  background: var(--campo);
  color: var(--tinta);
  font-size: 13px;
  line-height: 1.6;
}
pre .comentario {
  color: var(--apagado);
}
p code,
li code,
td code {
  padding: 1px 5px;
  border-radius: var(--r-sm);
  background: var(--tarjeta);
  color: var(--tinta);
  font-size: 0.88em;
}
.suave p code,
.suave li code {
  background: var(--elevada);
}
/* En las tarjetas, sin borde: varios seguidos («cwebp, cjpeg, oxipng…») recargaban. */
.tarjeta code {
  padding: 0;
  border: 0;
  background: none;
}

/* ── Descargas ────────────────────────────────────────────────────────────────── */

.tabla {
  width: 100%;
  margin-top: var(--e-6);
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--filete);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-size: 15px;
}
.tabla th,
.tabla td {
  padding: var(--e-3) var(--e-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--filete);
}
.tabla tr:last-child td {
  border-bottom: 0;
}
.tabla th {
  background: var(--tarjeta);
  color: var(--tinta);
  font-weight: 600;
}
.tabla td {
  background: var(--lienzo);
}
.tabla .sistema {
  color: var(--tinta);
  font-weight: 600;
}
.tabla a {
  display: inline-block;
  margin: 0 var(--e-3) var(--e-1) 0;
}
.tabla tr.tuyo td {
  background: var(--tarjeta);
}

.notas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-4);
  margin-top: var(--e-5);
}

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

.pie {
  padding: var(--e-6) 0;
  border-top: 1px solid var(--filete);
  font-size: 14px;
  color: var(--apagado);
}
.pie .contenedor {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-5);
  justify-content: space-between;
}
.pie a {
  color: var(--cuerpo);
}

/* ── Pantallas estrechas ──────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .rejilla,
  .notas {
    grid-template-columns: 1fr 1fr;
  }
  .dos {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  :root {
    --margen: 16px;
    --e-seccion: 64px;
  }
  .navegacion {
    display: none;
  }
  .idioma {
    margin-left: auto;
  }
  h1 {
    font-size: 44px;
  }
  h2 {
    font-size: 32px;
  }
  .heroe .lema {
    font-size: 18px;
  }
  .rejilla,
  .notas {
    grid-template-columns: 1fr;
  }
  .tabla thead {
    display: none;
  }
  .tabla,
  .tabla tbody,
  .tabla tr,
  .tabla td {
    display: block;
  }
  .tabla td {
    border-bottom: 0;
  }
  .tabla tr {
    border-bottom: 1px solid var(--filete);
  }
}

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