/* ============================================================
   tokens.css — variables de diseño, reset y utilidades de TODAS
   las landings. Los valores base son los de la plantilla de mockups
   (plantilla/maquetado-modular/app/shared/css/tokens.css): neutro
   cálido, salmón como acción, Gabarito + Instrument Sans.

   Capa de ALIAS (bloque 2): la landing solo usa --acc*, --logo-*,
   --btn-primary-* y --sombra-*; nunca --salmon directamente. Así
   cada proyecto cambia de marca sobrescribiendo esos alias (y, si
   su app los cambia, los neutros, fuentes y radios) en su propio
   <proyecto>/tema.css, sin tocar landing.css.
   ============================================================ */
:root{
  /* 1 · tokens de la plantilla (idénticos a la app) */
  --font-ui:'Instrument Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:'Gabarito','Instrument Sans',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --bg:#F4F4F1; --card:#FFFFFF; --card-2:#F7F7F4;
  --line:#E8E8E2; --line-2:#DCDCD5;
  --ink:#20201E; --muted:#71716C; --faint:#A3A39C;
  --salmon:#E97C62; --salmon-2:#D96B51; --salmon-soft:#FBEAE4; --salmon-line:#F2C7B9;
  --ok:#2F9E63; --ok-bg:#E1F4E8;
  --warn:#C7861E; --warn-bg:#FAEFD8;
  --danger:#DB4F3F; --danger-bg:#FBE5E1;
  --info:#3E6DE0; --info-bg:#E9EFFC;
  --r:14px; --r-sm:10px; --r-lg:16px; --pill:999px;

  /* 2 · alias de marca (los sobrescribe <proyecto>/tema.css) */
  --acc:var(--salmon); --acc-2:var(--salmon-2); --acc-soft:var(--salmon-soft); --acc-line:var(--salmon-line);
  --acc-rgb:233,124,98;                           /* el acento en r,g,b para halos y transparencias */
  --logo-bg:var(--ink); --logo-fg:#fff;           /* isotipo: el mismo cuadro que el lateral de la app */
  --btn-primary-bg:var(--acc); --btn-primary-bg-hover:var(--acc-2);
  --btn-primary-sombra:0 1px 2px rgba(217,107,81,.2);
  --btn-r:11px; --btn-primary-r:var(--pill);      /* secundario rect suave · primario en píldora */
  --tag-r:7px;
  --sombra-card:none;                             /* la plantilla es plana; algunas apps añaden sombra suave */
  --sombra-flota:0 2px 4px rgba(32,32,30,.05),0 14px 36px rgba(32,32,30,.14);   /* menús y tarjetas flotantes */
  --neutro-suave:#EFEFEA;                         /* pistas de barra, tag neutro */
  --sec-alt:var(--card);                          /* fondo de las secciones alternas */

  /* 3 · landing: contenedor y ritmo (breakpoints del doc: 640 · 1024 · 1440) */
  --max:1280px;                                   /* max-w-7xl centrado */
  --gutter:20px;
  --sec-py:88px;
  --header-h:68px;
  --barra-movil-h:72px;
}
@media(max-width:1023px){:root{--sec-py:72px}}
@media(max-width:639px){:root{--gutter:16px;--sec-py:56px;--header-h:60px}}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
body{font-family:var(--font-ui);background:var(--bg);color:var(--ink);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.01em;line-height:1.15}

svg.lucide{width:18px;height:18px;stroke-width:2;flex-shrink:0;vertical-align:middle}

/* ---- utilidades ---- */
.muted{color:var(--muted)}
.small{font-size:13px}
.mono{font-family:var(--font-mono);font-size:12px;color:var(--muted);letter-spacing:0;white-space:nowrap}
.nowrap{white-space:nowrap}
.up{color:var(--ok)} .down{color:var(--danger)}

/* [hidden] siempre oculta, aunque la clase tenga display:flex/grid */
[hidden]{display:none !important}