/*
 * Las páginas de marketing, en el sistema de diseño — `DESIGN_SYSTEM_1.0`.
 *
 * HTML estático, sin framework y sin JavaScript: existen para leerse y para
 * indexarse — `PLAN 5 §25`. Eso las deja fuera de Tamagui, así que los tokens
 * de `packages/ui/src/tokens` se copian aquí a mano. Es el mismo caso que el
 * `<input>` del selector de categoría: `§38` no prohíbe escribir un valor,
 * prohíbe inventarlo.
 *
 * `packages/ui/src/marketing.test.ts` compara este bloque con `themes` en cada
 * `pnpm verify`, porque una copia a mano se queda atrás sin que nadie lo vea —
 * que es exactamente lo que pasó entre el rediseño y esta portada.
 */

/*
 * Las dos familias de `§4.1`, servidas desde este dominio y declaradas igual
 * que en `apps/web/src/global.css`: mismo fichero, misma URL, misma caché. Un
 * visitante que llega por la portada y entra en la aplicación ya tiene la letra.
 *
 * La política de estas páginas es `default-src 'none'`, así que `firebase.json`
 * tiene que nombrar `font-src 'self'` explícitamente o el navegador descarta el
 * woff2 sin decir nada y la página cae a la letra del sistema.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-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: 'Newsreader';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/newsreader-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;
}

/* ------------------------------------------------------------ los tokens */

:root {
  /* `§3.1`, `§3.3` y `§13.1`, tal cual los da `themes.light`. */
  --background: #f7f5f0;
  --surface: #ffffff;
  --surface-subtle: #f1efe9;
  --color: #14233a;
  --muted: #5f6978;
  --border-color: #e4e1da;
  --border-strong: #d3cfc6;
  --divider: #ece9e3;
  --accent-background: #102544;
  --accent-hover: #1b3557;
  --accent-color: #ffffff;
  --information: #336ac9;
  --focus: #336ac9;
  --disabled-surface: #ebe8e1;
  --disabled-contrast: #5f6978;
  /* FinnTrack Supporter — the one gold thing, here as in the app. */
  --supporter: #986412;
  --supporter-surface: #fff3d9;
  --supporter-ring: #f2b744;

  /* `§4.1`, en el orden de reserva de `fontStack`. */
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-editorial: Newsreader, ui-serif, Georgia, 'Times New Roman', serif;

  /* `§7` overlay. La única sombra de estas páginas: una tarjeta normal no
     flota, se distingue por el blanco y por el borde de 1 px. */
  --shadow-overlay: 0 20px 48px rgb(16 37 68 / 14%);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* `§37`: papel oscuro diseñado, no una inversión. `themes.dark`. */
    --background: #101722;
    --surface: #172131;
    --surface-subtle: #1d293a;
    --color: #f3f5f7;
    --muted: #aeb8c6;
    --border-color: #2b384a;
    --border-strong: #3c4c63;
    --divider: #2b384a;
    /* Navy sobre navy no es una acción: en oscuro el botón principal es el
       claro, con la misma lectura de «esto es lo que hay que pulsar». */
    --accent-background: #f3f5f7;
    --accent-hover: #ffffff;
    --accent-color: #101722;
    --information: #8fb2f7;
    --focus: #8fb2f7;
    --disabled-surface: #2b384a;
    --disabled-contrast: #aeb8c6;
    --supporter: #e0b563;
    --supporter-surface: #352a1b;
    --supporter-ring: #f2b744;
    --shadow-overlay: 0 20px 48px rgb(0 0 0 / 14%);
  }
}

/* -------------------------------------------------------------- la página */

* {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  height: auto;
}
body {
  margin: 0;
  background: var(--background);
  color: var(--color);
  font-family: var(--font-ui);
  /* `§4.2` Body L. */
  font-size: 16px;
  line-height: 24px;
  /* `§4.2` envía cuatro pesos por familia; sintetizar los que faltan es lo que
     hace que una portada no se parezca a la aplicación en un navegador viejo. */
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* `§13.2`: 2 px information con 2 px de separación. Antes no había ninguno. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
main {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px 64px;
}

/* --------------------------------------------------------- la tipografía */

h1 {
  font-family: var(--font-editorial);
  /* `§4.2` H1. */
  font-size: 32px;
  line-height: 38px;
  font-weight: 600;
  letter-spacing: -0.35px;
  margin: 0 0 12px;
}
h2 {
  font-family: var(--font-editorial);
  /* `§4.2` H2. */
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.15px;
  margin: 40px 0 12px;
}
h3 {
  /*
   * `§4.2` H4, e Inter: H3 y H4 son de palo seco porque un título de sección se
   * sienta con los controles que lo rodean y el serif es de la página, no de su
   * mobiliario. Todos los `h3` de estas páginas son el título de una tarjeta, y
   * una tarjeta lleva H4 — igual que `ChartCard`.
   */
  font-family: var(--font-ui);
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.1px;
  margin: 0 0 8px;
}
/* El título de una página de texto empieza a una distancia de la cabecera,
   no pegado a ella: `§5` da el escalón y la cabecera ya gasta 20. */
article h1 {
  margin-top: 16px;
}
article h2 {
  margin-top: 36px;
}
article p,
article li {
  color: var(--color);
  max-width: 720px;
}
article .muted,
.muted {
  color: var(--muted);
}
main a {
  color: var(--information);
  /* `§30`: el color no viaja solo. Un enlace dentro de un párrafo se reconoce
     por el subrayado antes que por el tono. */
  text-decoration: underline;
  text-underline-offset: 2px;
}
main a:hover {
  color: var(--color);
}

/* ------------------------------------------------- la cabecera y el pie */

header.site {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.wordmark {
  /* La marca es Inter 700: `§4.2` envía 400, 500, 600 y 700, y el 800 que había
     aquí lo dibujaba el navegador a ojo. */
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.15px;
  color: var(--color);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wordmark img {
  width: 28px;
  height: 28px;
}
nav.site {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
nav.site a {
  color: var(--muted);
  text-decoration: none;
  /* `§4.2` Label M. */
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}
nav.site a:hover {
  color: var(--color);
}
footer.site {
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 20px 48px;
  color: var(--muted);
  /* `§4.2` Body S. */
  font-size: 13px;
  line-height: 18px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--divider);
}
footer.site a {
  color: var(--muted);
}
.langs {
  display: flex;
  gap: 8px;
}

/* ------------------------------------------------------------ los botones */

a.button {
  /* `§13.1` primary: 44 de alto en web, 20 de holgura, radio 16, Label L, y el
     navy de `§3.1` — nunca un color de marca. Todo lo que está coloreado en
     FinnTrack significa algo; un botón significa «esto es lo que hay que
     pulsar», que es énfasis y no semántica. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: var(--accent-background);
  color: var(--accent-color);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
}
a.button:hover {
  background: var(--accent-hover);
}
a.button.ghost {
  /* `§13.1` secondary: superficie, 1 px de borderStrong, texto en ink. */
  background: var(--surface);
  color: var(--color);
  border-color: var(--border-strong);
}
a.button.ghost:hover {
  background: var(--surface-subtle);
}

/* ------------------------------------------------------------- el héroe */

.hero {
  padding: 48px 0 24px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}
.hero h1 {
  /*
   * `§4.2` Display L: 40/44 en escritorio y 32/36 en el teléfono. El interletra
   * va en `em` para que los dos extremos salgan bien con un solo valor — −0.7
   * a 40 px, −0.56 a 32.
   */
  font-size: clamp(32px, 4.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.0175em;
  margin: 0 0 16px;
}
.hero p.lead {
  /* `§4.2` Body XL. */
  font-size: 18px;
  line-height: 28px;
  color: var(--muted);
  margin: 0 0 12px;
}
.hero p.promise {
  /* `§4.2` Body L, y 600: el 650 del documento se dibuja a 600 en todas partes
     porque el teléfono lleva un fichero por peso y no interpola. */
  font-weight: 600;
  margin: 0 0 24px;
}
/* El matiz honesto del héroe — #26. Va bajo los botones y no encima: encima
   empujaba el CTA por debajo del pliegue en un teléfono de 360 px, que es justo
   lo que #23 y #43 subieron. Más pequeño que la promesa y más claro que el
   cuerpo: es una condición, no un argumento. */
.hero p.nuance {
  /* `§4.2` Body M. */
  font-size: 15px;
  line-height: 22px;
  color: var(--muted);
  margin: 16px 0 0;
}
.hero .phone {
  width: 100%;
  max-width: 300px;
  height: auto;
  justify-self: center;
  /* `§6` hero card. */
  border-radius: 20px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-overlay);
}
.cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* -------------------------------------------------------- las dos tiendas */

.badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.badge {
  /*
   * Todavía no llevan a ninguna parte, y eso se dice con superficie propia y no
   * con opacidad — `§32`: bajar la opacidad del conjunto arrastra el fondo y el
   * rótulo juntos, y el contraste entre los dos se desploma justo donde hacía
   * falta leerlo.
   */
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  background: var(--disabled-surface);
  color: var(--disabled-contrast);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 8px 16px;
  min-width: 152px;
  text-decoration: none;
  line-height: 1.2;
}
.badge small {
  /* `§4.2` Caption. */
  font-size: 12px;
  line-height: 16px;
}
.badge strong {
  /* `§4.2` Label L. */
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
}

/* ------------------------------------------------------------ las tarjetas */

section.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  /* `§8`: la separación entre dos tarjetas de una fila. */
  gap: 24px;
  padding: 32px 0;
}
.card {
  /* `§13.3` standard: radio 16, 20 de holgura, 1 px de borde y ninguna sombra
     — `§7` da la jerarquía con el blanco, no con la profundidad. */
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 20px;
}
.card p {
  /* `§4.2` Body M. */
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 22px;
}
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  padding: 16px 0 32px;
}
.shots img {
  width: 100%;
  border-radius: 20px;
  border: 1px solid var(--border-color);
}

/* La prueba que sí se puede dar cuando todavía no hay usuarios — #26. */
.proof-intro {
  color: var(--muted);
  max-width: 720px;
  margin: 0 0 16px;
}
.proof {
  margin: 0 0 8px;
  padding-left: 20px;
  max-width: 720px;
}
.proof li {
  margin-bottom: 8px;
}

/* ----------------------------------------------------------- FinnTrack Full */

/*
 * La oferta, en una tarjeta destacada — `§13.3` large.
 *
 * Una sola por página y con tinte neutro, no con relleno de color: `§1.3`
 * mantiene una pantalla normal entre el 70 y el 80 % neutra, y media página
 * pintada para decir un precio es justo lo que esa regla evita. Lo que destaca
 * es el tamaño de la cifra y el borde, que es lo mismo que hace `BalanceCard`.
 */
.offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 720px;
  margin: 24px 0 8px;
  padding: 24px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
}
.offer p {
  margin: 0;
}
/*
 * FinnTrack Supporter, beside Full and in the same mould — the one card on the
 * page that is gold, as it is the one in the app, with the 2 px gold edge its
 * card wears there. `supporter` in `tokens/colors.ts`.
 */
.offer.supporter {
  background: var(--supporter-surface);
  border: 2px solid var(--supporter-ring);
}
.offer.supporter .eyebrow {
  color: var(--supporter);
}
.offer ul {
  margin: 0;
  padding-left: 20px;
}
.offer .eyebrow {
  /* `§4.2` Overline, que se usa muy poco: el rótulo de una tarjeta destacada es
     el sitio para el que está. */
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted);
}
.price {
  /*
   * `§4.3` Money Hero: Inter, tabular y nunca Newsreader. Un precio es una
   * cantidad de dinero, y `§4.3` sólo tiene una prohibición dura.
   */
  font-family: var(--font-ui);
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
  color: var(--color);
}
.price small {
  /* Debajo y no al lado: a 36 px, una línea entera de contexto detrás de la
     cifra parte el precio en dos renglones. `§4.2` Body M. */
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: normal;
  color: var(--muted);
}

/* ------------------------------------------------------------ los planes */

table.plans {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  /* `§4.2` Body M. */
  font-size: 15px;
  line-height: 22px;
}
table.plans th,
table.plans td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--divider);
  text-align: left;
  vertical-align: top;
}
table.plans th {
  background: var(--surface-subtle);
  /* `§4.2` Label M. */
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
table.plans tr:last-child td {
  border-bottom: none;
}
/*
 * La columna de Full, señalada: es la que responde «¿qué me llevo si pago?», y
 * una tabla de tres columnas iguales la deja a la altura de las otras dos. La
 * cabecera se pinta en navy y la columna se tinta; un relleno de color de
 * arriba abajo sería el bloque saturado que `§3.4` y `§1.3` no quieren.
 */
table.plans th:nth-child(3) {
  background: var(--accent-background);
  color: var(--accent-color);
}
table.plans td:nth-child(3) {
  background: var(--surface-subtle);
}

@media (max-width: 760px) {
  main {
    /* `§8`: 16 de margen en el teléfono. */
    padding: 0 16px 64px;
  }
  h1 {
    /* `§4.2` H1 mobile. */
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -0.25px;
  }
  h2 {
    /* `§4.2` H2 mobile. */
    font-size: 22px;
    line-height: 28px;
  }
  .hero {
    grid-template-columns: 1fr;
  }
  .hero .phone {
    max-width: 240px;
  }
  .offer {
    padding: 20px;
  }
  /* Three columns don't fit a phone width: one row per plan feature instead,
     with the plan name recovered as a label in front of each value. */
  table.plans,
  table.plans tr,
  table.plans th,
  table.plans td {
    display: block;
    width: 100%;
  }
  table.plans tr:first-child {
    display: none;
  }
  table.plans tr {
    border-bottom: 1px solid var(--divider);
  }
  table.plans tr:last-child {
    border-bottom: none;
  }
  table.plans td {
    border-bottom: none;
  }
  table.plans td:first-child {
    font-weight: 600;
    padding-bottom: 2px;
  }
  table.plans td:nth-of-type(2)::before,
  table.plans td:nth-of-type(3)::before {
    font-weight: 600;
    color: var(--muted);
  }
  table.plans td:nth-of-type(2)::before {
    content: 'FinnTrack Lite: ';
  }
  table.plans td:nth-of-type(3)::before {
    content: 'FinnTrack Full: ';
  }
  /* Apilada, la columna de Full es una fila más: el tinte sigue diciendo cuál
     es, con el radio de `§6` para que no parezca un corte de la tabla. */
  table.plans td:nth-child(3) {
    border-radius: 8px;
  }
}