/* =====================================================================
   Páginas públicas de TrackInvex (qué es, privacidad).

   Hoja aparte, y pequeña, a propósito: styles.css pesa ~90 KB porque
   viste una aplicación entera con tablas, gráficos y modales. Estas
   páginas son texto; cargar todo aquello para pintar dos columnas de
   párrafos las haría lentas justo donde importa, que es la primera
   visita de alguien que llega desde un buscador.

   Se respetan los dos temas leyendo la misma preferencia que la app.
   ===================================================================== */
:root {
  --pg-bg: #0a0d12;
  --pg-surface: #111721;
  --pg-text: #e8edf6;
  --pg-dim: #98a3b6;
  --pg-border: #222b39;
  --pg-accent: #3d8bff;
  --pg-green: #35b04a;
}
:root[data-theme="light"] {
  --pg-bg: #f4f6fb;
  --pg-surface: #ffffff;
  --pg-text: #131924;
  --pg-dim: #56617a;
  --pg-border: #dde3ee;
  --pg-accent: #1f6feb;
  --pg-green: #1a7f37;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --pg-bg: #f4f6fb;
    --pg-surface: #ffffff;
    --pg-text: #131924;
    --pg-dim: #56617a;
    --pg-border: #dde3ee;
    --pg-accent: #1f6feb;
    --pg-green: #1a7f37;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--pg-bg);
  color: var(--pg-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------- cabecera ------------------------------- */
.pg-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 780px; margin: 0 auto; padding: 20px;
}
.pg-brand {
  display: flex; align-items: center; gap: 9px;
  color: var(--pg-text); text-decoration: none;
  font-size: 17px; font-weight: 600; letter-spacing: -0.2px;
}
.pg-brand b { color: var(--pg-accent); font-weight: 700; }
.pg-brand img { display: block; }
.pg-cta {
  background: var(--pg-accent); color: #fff; text-decoration: none;
  border-radius: 9px; padding: 8px 15px; font-size: 13.5px; font-weight: 600;
  white-space: nowrap;
}
.pg-cta:hover { filter: brightness(1.08); }

/* ------------------------------- contenido ------------------------------ */
.pg { max-width: 780px; margin: 0 auto; padding: 8px 20px 40px; }
.pg h1 {
  font-size: clamp(28px, 5.4vw, 40px); line-height: 1.15;
  letter-spacing: -0.8px; margin: 18px 0 14px;
}
.pg h2 {
  font-size: 21px; letter-spacing: -0.3px; margin: 38px 0 8px;
  padding-top: 20px; border-top: 1px solid var(--pg-border);
}
.pg h3 { font-size: 16px; margin: 24px 0 4px; }
.pg p { margin: 0 0 14px; }
.pg ul { margin: 0 0 16px; padding-left: 22px; }
.pg li { margin-bottom: 9px; }
.pg a { color: var(--pg-accent); }
.pg b { font-weight: 600; }
.pg code {
  background: var(--pg-surface); border: 1px solid var(--pg-border);
  border-radius: 5px; padding: 1px 6px; font-size: 0.88em;
}
.pg-lead { font-size: 17.5px; line-height: 1.6; color: var(--pg-dim); }
.pg-lead b { color: var(--pg-text); }
.pg-try {
  background: var(--pg-surface); border: 1px solid var(--pg-border);
  border-left: 3px solid var(--pg-green);
  border-radius: 10px; padding: 13px 16px; font-size: 14.5px;
}
.pg-end { margin-top: 34px; text-align: center; }
.pg-cta-big { display: inline-block; padding: 12px 24px; font-size: 15px; border-radius: 11px; }

/* --------------------------------- pie ---------------------------------- */
.pg-foot {
  max-width: 780px; margin: 0 auto; padding: 22px 20px 40px;
  border-top: 1px solid var(--pg-border);
  font-size: 13px; color: var(--pg-dim);
}
.pg-foot a { color: var(--pg-dim); }
.pg-disc { margin-top: 8px; font-size: 12px; opacity: .8; }