/* La landing usa los MISMOS tokens que la consola. No es cosmetica: dos
   paletas que se copian divergen, y el cliente que pasa de la web a la
   consola nota el salto antes que cualquier otra cosa. */
@import '/tokens.css';

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--z-fuente);
  color: var(--z-text);
  background: var(--z-surface);
  line-height: 1.55;
}

header { padding: var(--z-esp-6) var(--z-esp-4); }
.logotipo { height: 2rem; width: auto; }

main { max-width: 56rem; margin: 0 auto; padding: 0 var(--z-esp-4) var(--z-esp-8); }

.primera { padding: var(--z-esp-8) 0; border-bottom: 1px solid var(--z-border); }
.primera h1 {
  font-size: clamp(1.75rem, 5vw, 3rem);
  line-height: 1.15; margin: 0 0 var(--z-esp-4);
  /* El navy del logotipo, por token. Nunca el literal. */
  color: var(--z-marca-navy);
}
.entrada { font-size: var(--z-texto-xl); color: var(--z-text-muted); max-width: 42rem; margin: 0; }

.tres { display: grid; gap: var(--z-esp-6); padding: var(--z-esp-8) 0; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.tres h2 { font-size: var(--z-texto-lg); margin: 0 0 var(--z-esp-2); }
/* El unico acento de marca, y con cuentagotas: una linea, no un bloque. */
.tres article { border-left: 3px solid var(--z-marca-violeta); padding-left: var(--z-esp-4); }
.tres p { margin: 0; color: var(--z-text-muted); }

.honesta { padding: var(--z-esp-6); background: var(--z-surface-sunken); border-radius: var(--z-radio-md); }
.honesta h2 { margin-top: 0; font-size: var(--z-texto-lg); }
.honesta p { margin: 0; color: var(--z-text-muted); max-width: 44rem; }

footer {
  display: flex; align-items: center; gap: var(--z-esp-3);
  padding: var(--z-esp-6) var(--z-esp-4);
  border-top: 1px solid var(--z-border);
  color: var(--z-text-faint); font-size: var(--z-texto-sm);
}
footer .isotipo { height: 1.25rem; width: auto; }
footer a { color: var(--z-action); margin-left: auto; }

@media (prefers-color-scheme: dark) {
  .logotipo { content: url('/zalvia-logo-blanco.svg'); }
  .primera h1 { color: var(--z-text); }
}