/* Páginas legales de emprende.ar.
   Los tokens de color son una copia de los de index.html (y esos, de
   globals.css de la app). Si cambian allá, se copian acá. */
  :root {
    color-scheme: light;

    /* `--navy` es el único azul de la marca y de él cuelga todo lo demás. */
    --navy: oklch(12.9% 0.066 270);          /* #020321 */

    --surface: oklch(97.2% 0.011 275);        /* #F3F5FD, azul tenue */
    --surface-raised: oklch(100% 0 0);
    --line: color-mix(in oklab, var(--surface), var(--navy) 9%);
    --line-strong: color-mix(in oklab, var(--surface), var(--navy) 16%);

    --ink: var(--navy);
    --ink-muted: oklch(47% 0.05 274);
    --ink-subtle: oklch(51.5% 0.04 274);

    /* Naranja: `brand` para rellenos (con azul noche encima), `brand-ink`
       para letra e íconos sobre claro. */
    --brand: oklch(75.8% 0.174 60);           /* #FE9114 */
    --brand-strong: oklch(71% 0.18 56);
    --brand-ink: oklch(52% 0.15 52);
    --brand-soft: oklch(95% 0.045 72);
    --on-brand: var(--navy);
    /* Letra sobre azul noche fijo (el botón de la banda naranja). */
    --on-navy: oklch(100% 0 0);

    /* Estados de la venta, los mismos de la app. `info` es el lavanda del
       canto del logo (#D0D1FE), para "En camino". */
    --positive-ink: oklch(49% 0.14 155);
    --positive-soft: oklch(95% 0.04 155);
    --warning-ink: oklch(51% 0.12 70);
    --warning-soft: oklch(96% 0.05 75);
    --info-ink: oklch(42% 0.1 282);
    --info-soft: oklch(91% 0.045 283);

    /* El globo del mensaje que manda el emprendedor. */
    --bubble-out: oklch(93% 0.06 150);
    --bubble-out-ink: var(--navy);

    /* Las notas sueltas de "Seguro te pasa esto". */
    --note: oklch(94% 0.085 98);
    --note-ink: var(--navy);

    /* Muestras de los temas Suave y Natural del catálogo (globals.css de la
       app, [data-theme='suave'|'natural']). Solo para las bolitas. */
    --catalog-suave-a: oklch(97.6% 0.012 350);
    --catalog-suave-b: oklch(79% 0.085 355);
    --catalog-natural-a: oklch(96.4% 0.017 85);
    --catalog-natural-b: oklch(49% 0.06 135);

    /* El isotipo: cara y canto se invierten entre temas. */
    --mark-face: oklch(40.7% 0.075 282);
    --mark-edge: var(--navy);
    --mark-dot-from: oklch(89.1% 0.18 96);
    --mark-dot-to: oklch(75.8% 0.174 60);

    /* Las bandas claras. En oscuro pasan a un azul más hondo para que la
       alternancia oscuro/claro de los posts se siga leyendo. */
    --band-alt: var(--surface);

    --radius: 16px;
    --gutter: 20px;
    --font-display: 'Lato', ui-sans-serif, system-ui, sans-serif;
    --font-text: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  }

  /* --- Tokens oscuros ------------------------------------------------------
     Valen para el tema oscuro del teléfono y, siempre, para las bandas azul
     noche (.dark). Las tres reglas tienen que quedar iguales. */
  .dark {
    color-scheme: dark;
    --surface: var(--navy);
    --surface-raised: color-mix(in oklab, var(--navy), white 8%);
    --line: color-mix(in oklab, var(--surface), white 14%);
    --line-strong: color-mix(in oklab, var(--surface), white 22%);
    --ink: oklch(96.5% 0.008 280);
    --ink-muted: oklch(74% 0.055 283);
    --ink-subtle: oklch(68% 0.06 280);
    --brand-strong: oklch(81% 0.15 66);
    --brand-ink: oklch(78% 0.16 62);
    --brand-soft: color-mix(in oklab, var(--brand), black 62%);
    --positive-ink: oklch(66% 0.14 155);
    --positive-soft: color-mix(in oklab, oklch(58% 0.14 155), black 62%);
    --warning-ink: oklch(72% 0.15 75);
    --warning-soft: color-mix(in oklab, oklch(72% 0.15 75), black 62%);
    --info-ink: oklch(87.5% 0.062 284);
    --info-soft: color-mix(in oklab, oklch(60% 0.12 283), black 50%);
    --mark-face: oklch(100% 0 0);
    --mark-edge: oklch(87.5% 0.062 284);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --surface: var(--navy);
      --surface-raised: color-mix(in oklab, var(--navy), white 8%);
      --line: color-mix(in oklab, var(--surface), white 14%);
      --line-strong: color-mix(in oklab, var(--surface), white 22%);
      --ink: oklch(96.5% 0.008 280);
      --ink-muted: oklch(74% 0.055 283);
      --ink-subtle: oklch(68% 0.06 280);
      --brand-strong: oklch(81% 0.15 66);
      --brand-ink: oklch(78% 0.16 62);
      --brand-soft: color-mix(in oklab, var(--brand), black 62%);
      --positive-ink: oklch(66% 0.14 155);
      --positive-soft: color-mix(in oklab, oklch(58% 0.14 155), black 62%);
      --warning-ink: oklch(72% 0.15 75);
      --warning-soft: color-mix(in oklab, oklch(72% 0.15 75), black 62%);
      --info-ink: oklch(87.5% 0.062 284);
      --info-soft: color-mix(in oklab, oklch(60% 0.12 283), black 50%);
      --mark-face: oklch(100% 0 0);
      --mark-edge: oklch(87.5% 0.062 284);
      --band-alt: color-mix(in oklab, var(--navy), black 45%);
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --surface: var(--navy);
    --surface-raised: color-mix(in oklab, var(--navy), white 8%);
    --line: color-mix(in oklab, var(--surface), white 14%);
    --line-strong: color-mix(in oklab, var(--surface), white 22%);
    --ink: oklch(96.5% 0.008 280);
    --ink-muted: oklch(74% 0.055 283);
    --ink-subtle: oklch(68% 0.06 280);
    --brand-strong: oklch(81% 0.15 66);
    --brand-ink: oklch(78% 0.16 62);
    --brand-soft: color-mix(in oklab, var(--brand), black 62%);
    --positive-ink: oklch(66% 0.14 155);
    --positive-soft: color-mix(in oklab, oklch(58% 0.14 155), black 62%);
    --warning-ink: oklch(72% 0.15 75);
    --warning-soft: color-mix(in oklab, oklch(72% 0.15 75), black 62%);
    --info-ink: oklch(87.5% 0.062 284);
    --info-soft: color-mix(in oklab, oklch(60% 0.12 283), black 50%);
    --mark-face: oklch(100% 0 0);
    --mark-edge: oklch(87.5% 0.062 284);
    --band-alt: color-mix(in oklab, var(--navy), black 45%);
  }


* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: var(--brand-ink); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px));
}

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.logo { display: inline-flex; align-items: center; padding-block: 8px; margin-block: -8px; }
.logo svg { display: block; height: 26px; width: auto; }
.logo .m-face { fill: var(--mark-face); }
.logo .m-edge { fill: var(--mark-edge); }
.logo .m-name { fill: var(--ink); }
.back { font-size: 15px; font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }

main { padding-block: clamp(36px, 8vw, 72px); }
.kicker { display: block; margin-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--brand-ink); }
h1, h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
  padding-right: 0.08em;
}
h1 { font-size: clamp(2.2rem, 9vw, 3.4rem); line-height: 1; }
h2 { font-size: clamp(1.35rem, 4.6vw, 1.7rem); line-height: 1.15; margin-top: 40px; }
.updated { margin-top: 14px; font-size: 14.5px; color: var(--ink-subtle); }
.lede { margin-top: 20px; font-size: 1.08rem; color: var(--ink-muted); }
p, ul { margin: 14px 0 0; }
ul { padding-left: 1.2em; }
li + li { margin-top: 6px; }
strong { font-weight: 600; }
.law { font-size: 14.5px; color: var(--ink-subtle); }

.card {
  margin-top: 18px;
  padding: clamp(18px, 5vw, 26px);
  border-radius: var(--radius);
  background: var(--surface-raised);
  border: 1px solid var(--line);
}
.card h2 { margin-top: 0; }
.notice { font-size: 15px; color: var(--ink-muted); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  margin-top: 18px;
  padding-inline: 24px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  background: var(--brand);
  color: var(--on-brand);
  transition: background-color .15s;
}
.btn:hover { background: var(--brand-strong); }
@media (max-width: 520px) { .btn { width: 100%; } }

.toc { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.toc a {
  display: inline-flex; align-items: center; min-height: 40px; padding-inline: 14px;
  border-radius: 999px; border: 1px solid var(--line-strong);
  color: var(--ink); font-size: 14.5px; font-weight: 500; text-decoration: none;
}
.toc a:hover { border-color: var(--brand); }

footer {
  margin-top: clamp(48px, 10vw, 80px);
  border-top: 1px solid var(--line);
  padding-block: 22px calc(30px + env(safe-area-inset-bottom, 0px));
  font-size: 14px;
  color: var(--ink-subtle);
}
.legal-links { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0; padding: 0; list-style: none; }
.legal-links li + li { margin-top: 0; }
.legal-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-subtle); text-decoration: none; }
.legal-links a:hover, .legal-links a[aria-current] { color: var(--ink); }
footer p { margin-top: 10px; }
.data-fiscal { display: inline-block; margin-top: 16px; }
.data-fiscal img { display: block; height: 64px; width: auto; border-radius: 4px; }