/* Manrope (SIL Open Font License), servida desde el propio sitio. */
@font-face {
  font-family: "Manrope";
  src: url("/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

/* Mismos tokens que la app (apps/web/app/tokens.css). */
:root {
  color-scheme: light;
  --color-fondo: #f5f6f7;
  --color-superficie: #ffffff;
  --color-texto: #171b16;
  --color-texto-secundario: #5e655d;
  --color-linea: #e3e6e2;
  --color-acento: #c1f743;
  --color-sobre-acento: #192208;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-fondo: #141414;
    --color-superficie: #202020;
    --color-texto: #f3f3f0;
    --color-texto-secundario: #b5b5b0;
    --color-linea: #3b3b3b;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: "Manrope", system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.page {
  min-height: 100dvh;
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.brand {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.05em;
}

.hero {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.badge {
  align-self: flex-start;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--color-acento);
  color: var(--color-sobre-acento);
  font-size: 14px;
  font-weight: 700;
}

h1 {
  margin: 0;
  font-size: clamp(40px, 9vw, 72px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.lead {
  margin: 0;
  max-width: 560px;
  font-size: 18px;
  color: var(--color-texto-secundario);
}

/* Los bloques: la idea de armar el sistema por módulos. */
.blocks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.blocks li {
  padding: 20px 16px;
  border: 1px solid var(--color-linea);
  border-radius: 12px;
  background: var(--color-superficie);
  font-weight: 600;
}

.blocks .accent {
  border-color: var(--color-acento);
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}

.contact {
  margin: 0;
  color: var(--color-texto-secundario);
}

.contact a {
  color: var(--color-texto);
  font-weight: 700;
  text-decoration-color: var(--color-acento);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

.contact a:focus-visible {
  outline: 2px solid var(--color-texto);
  outline-offset: 3px;
  border-radius: 2px;
}

.foot {
  margin-top: auto;
  font-size: 12px;
  color: var(--color-texto-secundario);
}

@media (max-width: 560px) {
  .blocks {
    grid-template-columns: repeat(2, 1fr);
  }
}