/* ==========================================================================
   HybridMeM · web pública (www.hybridmem.com)
   Una sola hoja para las tres páginas.

   Colores: los del proyecto de Claude Design «Design system HybridMeM»
   (hm-theme.js y handoff/tokens.css): seis temas de fábrica y un tema libre
   generado desde un tono, cada uno en claro y en oscuro.
   Selección: <html data-hm-theme="gris|tierra|oro|abisal|lavanda|indigo|custom"
                    data-hm-mode="light|dark" style="--hm-hue: 0-359">
   Sin atributos (sin JavaScript) se pinta gris con el modo del sistema.

   Índice: 1 fuentes · 2 temas · 3 base · 4 utilidades · 5 cabecera
           6 piezas · 7 secciones · 8 diagramas animados · 9 pie · 10 móvil
   ========================================================================== */

/* ── 1. Fuentes (autoalojadas, licencia OFL en /fuentes/) ───────────────── */

@font-face {
  font-family: "Manrope";
  src: url("/fuentes/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("/fuentes/newsreader-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ── 2. Temas ───────────────────────────────────────────────────────────── */

:root {
  /* gris neutro · claro (tema de fábrica) */
  --bg: #f3f2f0; --elev: #ffffff; --sunk: #e9e8e5;
  --fg: #17171a; --fg2: #5a5a5e; --fg3: #696a6e;
  --bd: #dcdbd7; --bd2: #c8c7c2;
  --ac: #2a2a2e; --mk: #8e8e92; --acs: #e4e3df; --acf: #ffffff;
  --ok: #46795a; --warn: #8a6a18; --err: #9e3b31;
  --t1: #2a2a2e; --t2: #6f6e6c; --t3: #9c9a95; --t4: #c8c7c2;

  --hm-hue: 265;

  /* Acento para texto sobre el acento suave: en los temas de color el acento puro
     no llega a 4,5:1 sobre su versión suave, así que se acerca un poco a la tinta. */
  --ac-txt: var(--ac);
  /* Acento para texto pequeño sobre el fondo de página (antetítulos, numeración). */
  --ac-fino: var(--ac);

  --serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ancho: 1120px;
  --margen: 28px;
  --cab-alto: 58px;

  color-scheme: light;
}

/* Sin JavaScript no hay atributo de modo: manda el sistema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-hm-mode]) {
    --bg: #121213; --elev: #1a1a1b; --sunk: #0d0d0e;
    --fg: #f0efec; --fg2: #a3a2a0; --fg3: #8d8c8a;
    --bd: #2b2b2c; --bd2: #3a3a3b;
    --ac: #f0efec; --mk: #a3a2a0; --acs: #262627; --acf: #121213;
    --ok: #7fb08f; --warn: #d2a94a; --err: #e0796d;
    --t1: #f0efec; --t2: #a3a2a0; --t3: #6f6e6c; --t4: #3a3a3b;
    color-scheme: dark;
  }
}

[data-hm-mode="dark"] { color-scheme: dark; }

[data-hm-theme="gris"][data-hm-mode="dark"] {
  --bg: #121213; --elev: #1a1a1b; --sunk: #0d0d0e;
  --fg: #f0efec; --fg2: #a3a2a0; --fg3: #8d8c8a;
  --bd: #2b2b2c; --bd2: #3a3a3b;
  --ac: #f0efec; --mk: #a3a2a0; --acs: #262627; --acf: #121213;
  --ok: #7fb08f; --warn: #d2a94a; --err: #e0796d;
  --t1: #f0efec; --t2: #a3a2a0; --t3: #6f6e6c; --t4: #3a3a3b;
}

/* tierra cocida */
[data-hm-theme="tierra"] {
  --bg: #f9f4ee; --elev: #ffffff; --sunk: #f4ece4;
  --fg: #241512; --fg2: #6b5347; --fg3: #7a6a5e;
  --bd: #e8ded4; --bd2: #d8c9bc;
  --ac: #8e3a2c; --mk: #8e3a2c; --acs: #f7e2d9; --acf: #ffffff;
  --ok: #3f7a50; --warn: #8a6414; --err: #b03a34;
  --t1: #8e3a2c; --t2: #a8601f; --t3: #2c7a8e; --t4: #4f8a5f;
}
[data-hm-theme="tierra"][data-hm-mode="dark"] {
  --bg: #1c110d; --elev: #25160f; --sunk: #170e0b;
  --fg: #f2e6dd; --fg2: #bfa596; --fg3: #a49180;
  --bd: #3d2820; --bd2: #4d342a;
  --ac: #c86b53; --mk: #c86b53; --acs: #3a201a; --acf: #1c110d;
  --ok: #7fb08f; --warn: #d9ab55; --err: #e08a72;
  --t1: #c86b53; --t2: #d69a53; --t3: #53b0c8; --t4: #7fb08f;
}

/* oro y basalto */
[data-hm-theme="oro"] {
  --bg: #f8f5ec; --elev: #ffffff; --sunk: #f1ecdd;
  --fg: #1e1c16; --fg2: #615c4c; --fg3: #736d5d;
  --bd: #e4dece; --bd2: #d1c9b3;
  --ac: #8a6c14; --mk: #8a6c14; --acs: #f3e7c4; --acf: #ffffff;
  --ok: #3f7a58; --warn: #b3551f; --err: #a83430;
  --t1: #8a6c14; --t2: #6f7a1f; --t3: #1f5e7a; --t4: #7a4a1f;
}
[data-hm-theme="oro"][data-hm-mode="dark"] {
  --bg: #16150f; --elev: #1f1d15; --sunk: #100f0a;
  --fg: #efe9d8; --fg2: #b5ad95; --fg3: #9b9481;
  --bd: #2e2b20; --bd2: #3d392b;
  --ac: #dcb75a; --mk: #dcb75a; --acs: #312b17; --acf: #16150f;
  --ok: #7fb08f; --warn: #e0864a; --err: #e0796d;
  --t1: #dcb75a; --t2: #b5c15a; --t3: #5aa9c1; --t4: #c1875a;
}

/* abisal y eucalipto */
[data-hm-theme="abisal"] {
  --bg: #f4f7f5; --elev: #ffffff; --sunk: #eef2f0;
  --fg: #121d1f; --fg2: #5c6b68; --fg3: #63716d;
  --bd: #dbe3e0; --bd2: #c3ccc8;
  --ac: #1f7a74; --mk: #1f7a74; --acs: #dcece9; --acf: #ffffff;
  --ok: #3f7a50; --warn: #8a6614; --err: #b03a34;
  --t1: #1f7a74; --t2: #1f5c7a; --t3: #8e4a2c; --t4: #6b7a1f;
}
[data-hm-theme="abisal"][data-hm-mode="dark"] {
  --bg: #0f1615; --elev: #161f1e; --sunk: #0a0f0e;
  --fg: #e8eeec; --fg2: #9aa8a4; --fg3: #828f8b;
  --bd: #233130; --bd2: #2f403e;
  --ac: #4fb3ab; --mk: #4fb3ab; --acs: #1c2f2d; --acf: #0f1615;
  --ok: #6fb287; --warn: #d2a94a; --err: #df8272;
  --t1: #4fb3ab; --t2: #4f8fb3; --t3: #c8825e; --t4: #a3b35a;
}

/* antracita y lavanda */
[data-hm-theme="lavanda"] {
  --bg: #f5f4f8; --elev: #ffffff; --sunk: #efedf4;
  --fg: #1b1922; --fg2: #5d5a6b; --fg3: #726d87;
  --bd: #dedae6; --bd2: #c9c3d6;
  --ac: #5f4fbe; --mk: #5f4fbe; --acs: #e7e3f8; --acf: #ffffff;
  --ok: #46795a; --warn: #8a6a18; --err: #a83a46;
  --t1: #5f4fbe; --t2: #8f4fbe; --t3: #be9e4f; --t4: #4f9ebe;
}
[data-hm-theme="lavanda"][data-hm-mode="dark"] {
  --bg: #14121b; --elev: #1c1926; --sunk: #0e0c14;
  --fg: #edeaf1; --fg2: #a09bb3; --fg3: #8d889d;
  --bd: #2c2839; --bd2: #3a3550;
  --ac: #a99ee0; --mk: #a99ee0; --acs: #262133; --acf: #14121b;
  --ok: #7fb08f; --warn: #d2a94a; --err: #e08497;
  --t1: #a99ee0; --t2: #c39ee0; --t3: #e0cf9e; --t4: #9ecfe0;
}

/* índigo */
[data-hm-theme="indigo"] {
  --bg: #f6f7fb; --elev: #ffffff; --sunk: #eef1f8;
  --fg: #141726; --fg2: #555a72; --fg3: #6b7087;
  --bd: #dcdfea; --bd2: #c4c9da;
  --ac: #3647b8; --mk: #3647b8; --acs: #e2e6fa; --acf: #ffffff;
  --ok: #46795a; --warn: #8a6a18; --err: #a8333f;
  --t1: #3647b8; --t2: #6136b8; --t3: #b8a736; --t4: #36b89e;
}
[data-hm-theme="indigo"][data-hm-mode="dark"] {
  --bg: #0e1020; --elev: #171a2c; --sunk: #090b16;
  --fg: #e9ebf5; --fg2: #9ba0ba; --fg3: #8a8fa5;
  --bd: #262b42; --bd2: #343a56;
  --ac: #8f9cf5; --mk: #8f9cf5; --acs: #1e2340; --acf: #0e1020;
  --ok: #7fb08f; --warn: #d2a94a; --err: #e08497;
  --t1: #8f9cf5; --t2: #b18ff5; --t3: #f5e08f; --t4: #8ff5d6;
}

/* Tono libre: un solo tónico H (--hm-hue, 0-359) gobierna todo. Las
   luminosidades y las cromas son constantes del sistema y no se tocan.
   Va dentro de @supports: un navegador sin oklch() se queda en el gris de fábrica. */
@supports (color: oklch(50% .1 200)) {
  [data-hm-theme="custom"] {
    --bg: oklch(97% .010 var(--hm-hue)); --elev: oklch(99.4% .004 var(--hm-hue)); --sunk: oklch(94.5% .018 var(--hm-hue));
    --fg: oklch(22% .045 var(--hm-hue)); --fg2: oklch(46% .032 var(--hm-hue)); --fg3: oklch(54% .030 var(--hm-hue));
    --bd: oklch(88% .018 var(--hm-hue)); --bd2: oklch(80% .026 var(--hm-hue));
    --ac: oklch(52% .155 var(--hm-hue)); --mk: oklch(52% .155 var(--hm-hue));
    --acs: oklch(92% .055 var(--hm-hue)); --acf: oklch(99% .006 var(--hm-hue));
    --ok: oklch(52% .10 150); --warn: oklch(56% .12 75); --err: oklch(52% .16 25);
    --t1: oklch(52% .155 var(--hm-hue)); --t2: oklch(52% .155 calc(var(--hm-hue) + 32));
    --t3: oklch(52% .14 calc(var(--hm-hue) + 180)); --t4: oklch(52% .14 calc(var(--hm-hue) + 120));
  }
  [data-hm-theme="custom"][data-hm-mode="dark"] {
    --bg: oklch(16% .030 var(--hm-hue)); --elev: oklch(21% .034 var(--hm-hue)); --sunk: oklch(12% .026 var(--hm-hue));
    --fg: oklch(94% .016 var(--hm-hue)); --fg2: oklch(72% .026 var(--hm-hue)); --fg3: oklch(64% .028 var(--hm-hue));
    --bd: oklch(30% .032 var(--hm-hue)); --bd2: oklch(38% .036 var(--hm-hue));
    --ac: oklch(74% .135 var(--hm-hue)); --mk: oklch(74% .135 var(--hm-hue));
    --acs: oklch(28% .060 var(--hm-hue)); --acf: oklch(15% .030 var(--hm-hue));
    --ok: oklch(74% .10 150); --warn: oklch(80% .11 80); --err: oklch(70% .13 25);
    --t1: oklch(74% .135 var(--hm-hue)); --t2: oklch(74% .135 calc(var(--hm-hue) + 32));
    --t3: oklch(74% .12 calc(var(--hm-hue) + 180)); --t4: oklch(74% .12 calc(var(--hm-hue) + 120));
  }
}

@supports (color: color-mix(in oklab, red, blue)) {
  :root { --ac-txt: color-mix(in oklab, var(--ac) 70%, var(--fg)); }
  /* En el tono libre, los verdes azulados claros se quedan en 4,3:1: un punto más de tinta. */
  [data-hm-theme="custom"]:not([data-hm-mode="dark"]) { --ac-fino: color-mix(in oklab, var(--ac) 85%, var(--fg)); }
}

/* ── 3. Base ────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}

h1, h2, h3, p, ul, ol, figure, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 700; }
svg { flex: none; }
code { font-family: var(--mono); font-size: .95em; }

a { color: var(--ac); text-decoration: none; }
a:hover { color: var(--fg); }

/* Un enlace dentro de un párrafo no puede distinguirse solo por el color. */
p a, .pie__legal a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

::selection { background: var(--acs); }

:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 3px;
  border-radius: 4px;
}

[id] { scroll-margin-top: calc(var(--cab-alto) + 18px); }
.con-subnav [id] { scroll-margin-top: calc(var(--cab-alto) + 62px); }

.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.salto {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 9px;
  background: var(--ac); color: var(--acf); font-size: .875rem; font-weight: 600;
}
.salto:focus { top: 10px; color: var(--acf); }

/* ── 4. Utilidades de composición ───────────────────────────────────────── */

.caja {
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* Columnas flexibles: la base es la anchura de caja (con borde y relleno). */
.b230 { flex: 1 1 230px; min-width: 0; } .b240 { flex: 1 1 240px; min-width: 0; }
.b260 { flex: 1 1 260px; min-width: 0; } .b280 { flex: 1 1 280px; min-width: 0; }
.b300 { flex: 1 1 300px; min-width: 0; } .b320 { flex: 1 1 320px; min-width: 0; }
.b340 { flex: 1 1 340px; min-width: 0; } .b360 { flex: 1 1 360px; min-width: 0; }
.b380 { flex: 1 1 380px; min-width: 0; } .b400 { flex: 1 1 400px; min-width: 0; }
.b420 { flex: 1 1 420px; min-width: 0; } .b440 { flex: 1 1 440px; min-width: 0; }
.b460 { flex: 1 1 460px; min-width: 0; }
.b368 { flex: 1 1 368px; min-width: 0; } .b370 { flex: 1 1 370px; min-width: 0; }
.b430 { flex: 1 1 430px; min-width: 0; }

.mx800 { max-width: 800px; } .mx820 { max-width: 820px; } .mx860 { max-width: 860px; }

.rej { display: grid; gap: 14px; }
.rej--160 { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 12px; }
.rej--200 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.rej--230 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.rej--240 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.rej--250 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.rej--2 { grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Tipografía ── */

.ante {  /* antetítulo en mono, mayúsculas espaciadas */
  font-family: var(--mono); font-size: .71875rem; line-height: 1.5;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ac-fino);
}
.rot {   /* rótulo pequeño en mono */
  font-family: var(--mono); font-size: .65625rem; line-height: 1.5;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg3);
}
.rot--min { text-transform: none; letter-spacing: 0; }
.rot--ac { color: var(--ac-fino); }
.mono { font-family: var(--mono); }

.tit {   /* titular de página o de landing: Newsreader grande */
  --max: 4.25rem;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.375rem, 1.1rem + 5.4vw, var(--max));
  line-height: .99; letter-spacing: -.035em; text-wrap: balance;
}
.tit--64 { --max: 4rem; }     .tit--62 { --max: 3.875rem; } .tit--60 { --max: 3.75rem; }
.tit--58 { --max: 3.625rem; } .tit--56 { --max: 3.5rem; }   .tit--54 { --max: 3.375rem; line-height: 1.02; }

.tit2 {  /* titular de sección */
  --max: 2.75rem;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 1.2rem + 3vw, var(--max));
  line-height: 1.05; letter-spacing: -.03em; text-wrap: balance;
}
.tit2--40 { --max: 2.5rem; }

.serif { font-family: var(--serif); }

.t18 { font-size: clamp(1.0625rem, 1rem + .3vw, 1.125rem); line-height: 1.55; color: var(--fg2); text-wrap: pretty; }
.t175 { font-size: clamp(1.03rem, 1rem + .25vw, 1.09375rem); line-height: 1.55; color: var(--fg2); text-wrap: pretty; }
.t17 { font-size: clamp(1rem, .96rem + .25vw, 1.0625rem); line-height: 1.55; color: var(--fg2); text-wrap: pretty; }
.t16 { font-size: 1rem; line-height: 1.6; color: var(--fg2); text-wrap: pretty; }
.t155 { font-size: .96875rem; line-height: 1.6; color: var(--fg2); }
.t145 { font-size: .90625rem; line-height: 1.5; }
.t14 { font-size: .875rem; line-height: 1.6; color: var(--fg2); }
.t135 { font-size: .84375rem; line-height: 1.6; color: var(--fg2); }
.t13 { font-size: .8125rem; line-height: 1.55; color: var(--fg2); }
.t125 { font-size: .78125rem; line-height: 1.55; color: var(--fg2); }
.t12 { font-size: .75rem; line-height: 1.5; color: var(--fg3); }
.c-fg { color: var(--fg); }
.c-fg2 { color: var(--fg2); }
.c-fg3 { color: var(--fg3); }
.c-ac { color: var(--ac-fino); }
.c-ok { color: var(--ok); }
.c-warn { color: var(--warn); }
.fuerte { color: var(--fg); font-weight: 700; }
.t14 strong, .t135 strong, .t13 strong, .t16 strong, .t125 strong { color: var(--fg); }

.ch48 { max-width: 48ch; } .ch50 { max-width: 50ch; } .ch52 { max-width: 52ch; }
.ch56 { max-width: 56ch; } .ch58 { max-width: 58ch; } .ch78 { max-width: 78ch; }

/* ── 5. Cabecera ────────────────────────────────────────────────────────── */

.cab {
  position: sticky; top: 0; z-index: 60;
  background: var(--elev);
  border-bottom: 1px solid var(--bd);
}
.cab__fila {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  min-height: var(--cab-alto);
  padding: 12px 24px;
}

.marca {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--fg); font-size: 1rem; font-weight: 700; letter-spacing: -.035em;
}
.marca:hover { color: var(--fg); }
.marca svg { width: 22px; height: 22px; }
.marca__a { fill: var(--fg); }
.marca__b { fill: var(--mk); }

.cab__nav {
  display: flex; flex-wrap: wrap; column-gap: 18px;
  margin-left: 10px;
  font-size: .84375rem; font-weight: 500;
}
.cab__nav a { color: var(--fg2); padding: 6px 0; }
.cab__nav a:hover, .cab__nav a[aria-current="page"] { color: var(--fg); }

.cab__tema { display: flex; align-items: center; gap: 10px; margin-left: auto; }
html:not(.js) .cab__tema { display: none; }      /* sin JavaScript no hay nada que elegir */
html:not(.js) .cab__cta { margin-left: auto; }

.temas { display: flex; align-items: center; gap: 5px; }
.tema {
  position: relative; width: 24px; height: 18px; padding: 0;
  border: 1px solid var(--bd); border-radius: 5px; cursor: pointer;
}
.tema[aria-pressed="true"]::after {
  content: ""; position: absolute; inset: -4px;
  border: 2px solid var(--ac); border-radius: 8px;
}
.tema--gris    { background: linear-gradient(90deg, #17171a 50%, #8e8e92 50%); }
.tema--tierra  { background: linear-gradient(90deg, #241512 50%, #8e3a2c 50%); }
.tema--abisal  { background: linear-gradient(90deg, #121d1f 50%, #2c8781 50%); }
.tema--lavanda { background: linear-gradient(90deg, #1b1922 50%, #6f5fd0 50%); }
.tema--indigo  { background: linear-gradient(90deg, #141726 50%, #3647b8 50%); }
.tema--oro     { background: linear-gradient(90deg, #1e1c16 50%, #9a7b1f 50%); }
.tema--custom  {
  border-style: dashed; border-color: var(--bd2);
  background: conic-gradient(from 90deg, #b03a34, #b3862a, #4f8a5f, #2c8781, #3647b8, #6f5fd0, #b03a34);
}

.tono { width: 76px; margin: 0; accent-color: var(--ac); cursor: pointer; }

.modo {
  display: flex; align-items: center; overflow: hidden;
  border: 1px solid var(--bd); border-radius: 9px;
}
.modo button {
  padding: 6px 11px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--sans); font-size: .71875rem; font-weight: 600; line-height: 1.4;
  color: var(--fg2);
}
.modo button[aria-pressed="true"] { background: var(--acs); color: var(--fg); }
.modo button:focus-visible, .tema:focus-visible { outline-offset: 2px; }

.cab__boton {
  display: none; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--bd2); border-radius: 9px;
  background: transparent; color: var(--fg); cursor: pointer;
  font-family: var(--sans); font-size: .8125rem; font-weight: 600; line-height: 1.4;
}
.cab__boton svg { width: 14px; height: 14px; }
.cab__boton .en-movil, .cab__cta .corto { display: none; }

/* Segunda fila de las páginas por público: saltos a cada bloque. Va dentro de la
   cabecera, así que se queda pegada con ella sin calcular alturas. */
.subnav { border-top: 1px solid var(--bd); }
.subnav__fila {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 24px;
  overflow-x: auto; scrollbar-width: none;
}
.subnav__fila::-webkit-scrollbar { display: none; }
.subnav .rot { flex: none; margin-right: 6px; }
.salto-pub {
  flex: none; padding: 5px 10px;
  border: 1px solid var(--bd); border-radius: 8px;
  font-size: .75rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
  color: var(--fg2);
}
.salto-pub:hover { border-color: var(--ac); color: var(--fg); }

/* ── 6. Piezas ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border: 1px solid transparent; border-radius: 11px;
  font-family: var(--sans); font-size: .9375rem; font-weight: 600; line-height: 1.4;
  text-align: center; cursor: pointer;
}
.btn--pri { background: var(--ac); color: var(--acf); }
.btn--pri:hover { background: var(--fg); color: var(--acf); }
.btn--sec { border-color: var(--bd2); color: var(--fg); background: transparent; }
.btn--sec:hover { border-color: var(--ac); color: var(--fg); }
.btn--m { padding: 11px 20px; font-size: .875rem; }
.btn--cab { padding: 7px 15px; border-radius: 9px; font-size: .8125rem; white-space: nowrap; }

.tar {   /* tarjeta blanca de borde fino */
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 22px 24px;
  background: var(--elev); border: 1px solid var(--bd); border-radius: 16px;
}
.tar--m { padding: 20px 22px; gap: 8px; }
.tar--s { padding: 18px 20px; gap: 4px; }
.tar--18 { border-radius: 18px; }
.tar--20 { border-radius: 20px; padding: 24px; gap: 12px; }
.tar--marca { border-left: 3px solid var(--ac); }
.tar--caja { padding: 0; gap: 0; overflow: hidden; border-radius: 18px; }
.tar__cab {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  padding: 13px 18px; border-bottom: 1px solid var(--bd);
}
.tar__cuerpo { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.tar__pie {
  display: flex; align-items: center; gap: 10px;
  margin-top: auto; padding: 14px 18px; border-top: 1px solid var(--bd);
}
.tar__t { font-size: 1rem; font-weight: 700; line-height: 1.35; }
.tar__t--155 { font-size: .96875rem; }
.tar__t--15 { font-size: .9375rem; }
.tar__t--145 { font-size: .90625rem; }
.tar__t--135 { font-size: .84375rem; }
.tar svg.ico { width: 24px; height: 24px; }
.tar > .eti:last-child { margin-top: auto; }
.ico-niv { width: 32px; height: 32px; color: var(--fg); }

a.mos {   /* ficha del mosaico de usos */
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 20px;
  background: var(--elev); border: 1px solid var(--bd); border-radius: 14px;
  color: inherit;
}
a.mos:hover { border-color: var(--ac); color: inherit; }

.hund {  /* panel hundido */
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  padding: 24px; background: var(--sunk); border-radius: 20px;
}
.hund--18 { padding: 18px 20px; border-radius: 18px; gap: 8px; }
.hund--22 { padding: 20px 22px; border-radius: 18px; gap: 10px; }

.franja {  /* franja de aviso o de cierre */
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px;
  padding: 18px 22px; background: var(--sunk); border-radius: 16px;
}
.franja--ac { background: var(--acs); padding: 20px 24px; }
.franja--elev { background: var(--elev); border: 1px solid var(--bd); padding: 20px 26px; }

/* Sobre fondo hundido o de acento suave, el gris tenue no llega a 4,5:1. */
.hund .rot, .hund .t12, .hund .t125, .franja .t12, .franja .rot, .franja--ac .c-fg3 { color: var(--fg2); }

.caja-bg {  /* caja interior sobre tarjeta */
  padding: 14px 16px; background: var(--bg); border: 1px solid var(--bd); border-radius: 12px;
}
.caja-bg--marca { border-left: 3px solid var(--ac); }
.caja-acs { padding: 14px 16px; background: var(--acs); border-radius: 12px; }
.caja-acs .rot { color: var(--ac-txt); }
.caja-raya { padding: 12px 14px; border: 1px dashed var(--bd2); border-radius: 11px; }

.pil {
  display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: 999px;
  font-size: .75rem; font-weight: 600; line-height: 1.4;
}
.pil--ac { background: var(--acs); color: var(--ac-txt); }
.pil--hund { background: var(--sunk); border: 1px solid var(--bd); color: var(--fg2); }
.pil--elev { background: var(--elev); border: 1px solid var(--bd); color: var(--fg2); }
.pil--g { padding: 7px 14px; font-size: .8125rem; }

.eti {   /* etiqueta de estado */
  display: inline-flex; align-self: flex-start;
  padding: 3px 9px; border: 1px solid var(--bd2); border-radius: 6px;
  background: var(--elev);
  font-family: var(--mono); font-size: .65625rem; font-weight: 400; line-height: 1.5;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.eti--ok { color: var(--ok); }
.eti--warn { color: var(--warn); }
.eti--vis { color: var(--fg3); }
.eti--g { padding: 4px 9px; font-size: .6875rem; letter-spacing: .08em; white-space: normal; }

.raya { height: 1px; background: var(--bd); border: 0; margin: 0; }
.punto { flex: none; width: 6px; height: 6px; border-radius: 50%; }
.punto--c { width: 8px; height: 8px; border-radius: 2px; }
.bg-t1 { background: var(--t1); } .bg-t2 { background: var(--t2); }
.bg-t3 { background: var(--t3); } .bg-t4 { background: var(--t4); }
.bg-fg { background: var(--fg); } .bg-ac { background: var(--ac); }
.bg-err { background: var(--err); } .bg-warn { background: var(--warn); }

.num { display: flex; flex-direction: column; gap: 12px; }
.num li { display: flex; gap: 12px; align-items: flex-start; }
.num__n { flex: none; padding-top: 2px; font-family: var(--mono); font-size: .6875rem; color: var(--ac-fino); }
.num p { font-size: .875rem; line-height: 1.55; color: var(--fg2); }
.num strong { color: var(--fg); }

.term {  /* panel de terminal */
  padding: 14px 16px;
  background: var(--elev); border: 1px solid var(--bd); border-radius: 12px;
  font-family: var(--mono); font-size: .75rem; line-height: 1.8; color: var(--fg2);
}
.term .on { color: var(--fg); }
.term code { font-size: 1em; }
pre.sesion {
  padding: 18px; overflow-x: auto;
  font-family: var(--mono); font-size: .75rem; line-height: 1.75; color: var(--fg2);
}

.cita { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.35; }
.cita--17 { font-size: 1.0625rem; line-height: 1.4; }
.linea { display: flex; align-items: center; gap: 10px; min-width: 0; }
.linea--i { align-items: flex-start; }

.cifra { font-size: 1.875rem; font-weight: 700; line-height: 1.25; letter-spacing: -.03em; }
.cifra--mono { font-family: var(--mono); font-size: 1.5rem; letter-spacing: 0; }

.sigla {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--acs); color: var(--ac-txt); font-size: .6875rem; font-weight: 700;
}
.sigla--no { background: var(--sunk); color: var(--fg2); }

.conmutador { display: flex; align-items: center; overflow: hidden; border: 1px solid var(--bd); border-radius: 11px; }
.conmutador span { flex: 1; padding: 11px 10px; text-align: center; font-size: .8125rem; font-weight: 600; color: var(--fg2); }
.conmutador .on { background: var(--fg); color: var(--bg); }

.reng {  /* renglón: rótulo · texto · dato a la derecha */
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 10px 12px; border-radius: 10px;
}
.reng--hund { background: var(--sunk); }
.reng--hund .t12 { color: var(--fg2); }
.reng--bg { align-items: center; background: var(--bg); border: 1px solid var(--bd); border-radius: 11px; padding: 11px 13px; }
.reng > .crece { flex: 1 1 auto; min-width: 0; }

.tablero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px; }
.tablero__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nota-k {
  padding: 10px 11px; background: var(--bg); border: 1px solid var(--bd); border-radius: 10px;
  font-size: .78125rem; line-height: 1.4;
}
.nota-k--marca { border-left: 3px solid var(--ac); }
.nota-k small { display: block; margin-top: 4px; font-family: var(--mono); font-size: .625rem; color: var(--fg3); }
.nota-k small.c-ac { color: var(--ac-fino); }

.puente { display: flex; align-items: stretch; gap: 12px; }
.puente__lado { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.puente__flecha { display: grid; place-items: center; width: 44px; flex: none; }

details.faq {
  background: var(--elev); border: 1px solid var(--bd); border-radius: 14px;
}
details.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; cursor: pointer; list-style: none;
  font-size: .96875rem; font-weight: 700; line-height: 1.4;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+"; flex: none;
  font-family: var(--mono); font-size: 1rem; font-weight: 400; color: var(--fg2);
}
details.faq[open] summary::after { content: "\2212"; }
details.faq summary:focus-visible { border-radius: 14px; outline-offset: 2px; }
.faq__r { display: flex; flex-direction: column; gap: 10px; padding: 0 20px 18px; max-width: 80ch; }
.faq__r p, .faq__r li { font-size: .875rem; line-height: 1.65; color: var(--fg2); }
.faq__r strong { color: var(--fg); }
.faq__r ol { display: flex; flex-direction: column; gap: 6px; padding-left: 1.4em; list-style: decimal; }

.demo .demo__texto { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.45; letter-spacing: -.01em; }
.demo__paso { display: flex; align-items: center; gap: 10px; padding-left: 6px; }
.demo__paso::before { content: ""; width: 1px; height: 26px; background: var(--bd2); }
.demo__paso span { font-family: var(--mono); font-size: .6875rem; color: var(--fg2); }

.hechos { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .8125rem; line-height: 1.5; color: var(--fg3); }
.hechos li:not(:last-child)::after { content: "·"; margin-left: 18px; }

.hoy .tar { border-radius: 14px; gap: 6px; }

.pago { display: flex; flex-direction: column; gap: 7px; padding-left: 1.5em; list-style: decimal; }
.pago li { font-size: .84375rem; line-height: 1.6; color: var(--fg2); }
.pago strong { color: var(--fg); }

/* ── 7. Secciones ───────────────────────────────────────────────────────── */

.sec { padding: 56px 0; border-top: 1px solid var(--bd); }
.sec--hero { padding: 88px 0 64px; border-top: 0; }
.sec--estado { padding: 48px 0; }
.sec--fin { padding: 56px 0 88px; }

.sec__cab { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 32px; }
.sec__cab > .tit2 { flex: 1 1 420px; min-width: 0; }
.sec__cab > p { flex: 1 1 300px; min-width: 0; }
.sec__cab--seg > .tit2 { flex-basis: 400px; }
.sec__cab--usos { gap: 14px 24px; }
.sec__cab--usos > .tit2 { flex-basis: 360px; }
.sec__cab--usos > p { flex-basis: 320px; }

.estado__col { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

/* Bloque por público (páginas «Para ti» y «Para empresas») */
.pub { border-bottom: 1px solid var(--bd); }
.pub:last-of-type { border-bottom: 0; }
.pub__tira {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding-top: 14px; padding-bottom: 14px;
  font-size: .75rem; line-height: 1.5; color: var(--fg3);
}
.pub__est { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pub__est .eti { align-self: auto; flex: none; }
.pub__cuerpo { padding-top: 52px; padding-bottom: 72px; }
.pub__cuerpo--56 { padding-top: 56px; padding-bottom: 64px; }
.pub__cuerpo--fin { padding-bottom: 88px; }

/* ── 8. Diagramas animados ──────────────────────────────────────────────── */

.fig {
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px;
  width: 100%; padding: 22px 24px;
  background: var(--elev); border: 1px solid var(--bd); border-radius: 20px;
}
.fig--18 { border-radius: 18px; }
.fig__svg { flex: 1 1 340px; min-width: 0; max-width: 560px; width: 100%; height: auto; display: block; }
.fig__svg--520 { flex-basis: 320px; max-width: 520px; }
.fig__txt { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.fig text { font-family: var(--mono); }
.fig text.dg-sans { font-family: var(--sans); }

.fig__pausa {
  display: none; align-self: flex-start;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--mono); font-size: .65625rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg3); text-decoration: underline; text-underline-offset: 3px;
}
.fig__pausa:hover { color: var(--fg); }

/* Estado en reposo: es lo que se ve con «reducir movimiento» y lo que
   queda si el navegador no anima. Cada diagrama enseña su conclusión. */
.an-sin-ruta { opacity: .95; }
.an-sin-anillo, .an-sin-punto, .an-sin-peso-a { opacity: 0; }
.an-sin-peso-b { opacity: 1; }
.an-sin-olvido-linea { opacity: .2; }
.an-sin-olvido-nodo { opacity: .3; }
.an-cur-trazo { stroke-dasharray: 620; stroke-dashoffset: 0; }
.an-fro-cruza { transform: translate(254px, 0); }
.an-fro-rebota { transform: translate(108px, 0); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .js .fig__pausa { display: inline-flex; }

  /* «Una consulta, en directo»: ciclo de 9 s */
  .an-sin-ruta          { animation: sin-ruta 9s linear infinite; }
  .an-sin-olvido-linea  { animation: sin-olvido-linea 9s linear infinite; }
  .an-sin-anillo--1     { animation: sin-anillo-1 9s linear infinite; }
  .an-sin-anillo--2     { animation: sin-anillo-2 9s linear infinite; }
  .an-sin-anillo--3     { animation: sin-anillo-3 9s linear infinite; }
  .an-sin-olvido-nodo   { animation: sin-olvido-nodo 9s linear infinite; }
  .an-sin-punto         { animation: sin-punto-ver 9s linear infinite, sin-punto-ir 9s linear infinite; }
  .an-sin-peso-a        { animation: sin-peso-a 9s linear infinite; }
  .an-sin-peso-b        { animation: sin-peso-b 9s linear infinite; }

  /* Curva del olvido: ciclo de 8 s */
  .an-cur-trazo         { animation: cur-trazo 8s linear infinite; }
  .an-cur-repaso--1     { animation: cur-repaso-1 8s linear infinite; }
  .an-cur-repaso--2     { animation: cur-repaso-2 8s linear infinite; }
  .an-cur-aviso         { animation: cur-aviso 8s linear infinite; }

  /* Frontera entre dos memorias: ciclo de 10 s */
  .an-fro-cruza         { animation: fro-cruza 10s linear infinite; }
  .an-fro-rebota        { animation: fro-rebota 10s linear infinite; }
  .an-fro-no            { animation: fro-no 10s linear infinite; }
  .an-fro-si            { animation: fro-si 10s linear infinite; }

  .fig[data-pausada] .an { animation-play-state: paused; }
}

@keyframes sin-ruta         { 0%, 6% { opacity: 0; } 42%, 72% { opacity: .95; } 92% { opacity: .25; } 100% { opacity: 0; } }
@keyframes sin-olvido-linea { 0% { opacity: 1; } 50%, 85% { opacity: .2; } 100% { opacity: 1; } }
@keyframes sin-anillo-1     { 0%, 5% { opacity: 0; } 10% { opacity: .8; } 22%, 100% { opacity: 0; } }
@keyframes sin-anillo-2     { 0%, 20% { opacity: 0; } 26% { opacity: .8; } 38%, 100% { opacity: 0; } }
@keyframes sin-anillo-3     { 0%, 37% { opacity: 0; } 43% { opacity: .8; } 55%, 100% { opacity: 0; } }
@keyframes sin-olvido-nodo  { 0% { opacity: 1; } 30% { opacity: .9; } 60%, 85% { opacity: .3; } 100% { opacity: 1; } }
@keyframes sin-punto-ver    { 0%, 5% { opacity: 0; } 8%, 44% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes sin-punto-ir     { 0%, 6% { transform: translate(78px, 70px); } 24.3% { transform: translate(128px, 168px); } 44%, 100% { transform: translate(246px, 178px); } }
@keyframes sin-peso-a       { 0%, 22% { opacity: 1; } 30%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes sin-peso-b       { 0%, 28% { opacity: 0; } 34%, 88% { opacity: 1; } 100% { opacity: 0; } }

@keyframes cur-trazo        { 0%, 5% { stroke-dashoffset: 620; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes cur-repaso-1     { 0%, 26% { opacity: 0; } 32%, 100% { opacity: 1; } }
@keyframes cur-repaso-2     { 0%, 46% { opacity: 0; } 52%, 100% { opacity: 1; } }
@keyframes cur-aviso        { 0%, 68% { opacity: 0; } 76%, 100% { opacity: 1; } }

@keyframes fro-cruza        { 0%, 8% { transform: translate(0, 0); } 40%, 92% { transform: translate(254px, 0); } 100% { transform: translate(0, 0); } }
@keyframes fro-rebota       { 0%, 46% { transform: translate(0, 0); } 62%, 66% { transform: translate(108px, 0); } 69% { transform: translate(92px, 0); } 72% { transform: translate(108px, 0); } 84%, 100% { transform: translate(0, 0); } }
@keyframes fro-no           { 0%, 62% { opacity: 0; } 66%, 78% { opacity: 1; } 84%, 100% { opacity: 0; } }
@keyframes fro-si           { 0%, 22% { opacity: 0; } 30%, 50% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* ── 9. Pie ─────────────────────────────────────────────────────────────── */

.pie { border-top: 1px solid var(--bd); background: var(--elev); }
.pie__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 26px; padding-bottom: 26px; }
.pie .marca { font-size: .84375rem; letter-spacing: -.03em; }
.pie .marca svg { width: 18px; height: 18px; }
.pie__enl { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8125rem; }
.pie__enl a { color: var(--fg2); padding: 3px 0; }
.pie__enl a:hover { color: var(--fg); }
.pie__glos { margin-left: auto; font-family: var(--mono); font-size: .6875rem; color: var(--fg3); }
.pie__legal {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 20px; padding-bottom: 30px;
  border-top: 1px solid var(--bd);
  font-size: .75rem; line-height: 1.65; color: var(--fg3);
}
.pie__legal h2 { font-family: var(--mono); font-size: .65625rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--fg3); }
.pie__legal p { max-width: 140ch; }
.pie__legal a { color: var(--fg2); }
.pie__legal a:hover { color: var(--fg); }

/* ── Utilidades de composición (al final: ganan a las piezas) ── */

.fila { display: flex; flex-wrap: wrap; }
.pila { display: flex; flex-direction: column; min-width: 0; }
.ai-c { align-items: center; }
.ai-f { align-items: flex-end; }
.ai-i { align-items: flex-start; }
.ai-b { align-items: baseline; }
.jc-c { justify-content: center; }
.as-i { align-self: flex-start; }
.as-c { align-self: center; }
.ml-a { margin-left: auto; }
.w100 { width: 100%; }
.tc { text-align: center; }
.ti { text-align: left; }

.g4 { gap: 4px; }   .g5 { gap: 5px; }   .g6 { gap: 6px; }   .g7 { gap: 7px; }
.g8 { gap: 8px; }   .g9 { gap: 9px; }   .g10 { gap: 10px; } .g11 { gap: 11px; }
.g12 { gap: 12px; } .g14 { gap: 14px; } .g18 { gap: 18px; } .g20 { gap: 20px; }
.g22 { gap: 22px; } .g24 { gap: 24px; } .g26 { gap: 26px; } .g28 { gap: 28px; }
.g32 { gap: 32px; } .g34 { gap: 34px; } .g36 { gap: 36px; } .g40 { gap: 40px; }
.g44 { gap: 44px; } .g52 { gap: 52px; }

/* ── 10. Anchos intermedios y móvil ─────────────────────────────────────── */

/* Por debajo de 1220 px los temas no caben en la fila: pasan a un panel. */
@media (max-width: 1219px) {
  .js .cab__boton { display: inline-flex; }
  .cab__cta { margin-left: auto; }
  .js .cab__tema {
    display: none; order: 10; flex: 1 0 100%; flex-wrap: wrap; gap: 14px 16px;
    margin: 0; padding: 14px 0 4px; border-top: 1px solid var(--bd);
  }
  .js .cab[data-abierto] .cab__tema { display: flex; }
  .js .cab[data-abierto] { max-height: 100vh; overflow-y: auto; }
  .tema { width: 34px; height: 26px; border-radius: 7px; }
  .tema[aria-pressed="true"]::after { border-radius: 10px; }
  .temas { gap: 9px; }
  .tono { width: 120px; }
  .modo button { padding: 8px 14px; font-size: .78125rem; }
}

/* Por debajo de 900 px tampoco cabe el menú: entra en el mismo panel. */
@media (max-width: 899px) {
  .cab__boton .en-movil { display: inline; }
  .cab__boton .en-medio { display: none; }
  .js .cab__nav {
    display: none; order: 9; flex: 1 0 100%; flex-direction: column;
    margin: 0; padding: 4px 0 0; border-top: 1px solid var(--bd);
    font-size: .9375rem;
  }
  .js .cab[data-abierto] .cab__nav { display: flex; }
  .js .cab__nav a { padding: 11px 0; }
  html:not(.js) .cab__fila { row-gap: 4px; }
  html:not(.js) .cab__nav { order: 9; flex: 1 0 100%; margin: 0; }
}

@media (max-width: 759px) {
  :root { --margen: 20px; --cab-alto: 56px; }

  .cab__fila { padding: 11px 16px; column-gap: 8px; }
  .subnav__fila { padding: 8px 16px; }

  .sec { padding: 44px 0; }
  .sec--hero { padding: 44px 0 44px; }
  .sec--estado { padding: 40px 0; }
  .sec--fin { padding: 44px 0 64px; }
  .pub__cuerpo, .pub__cuerpo--56 { padding-top: 36px; padding-bottom: 52px; }
  .pub__cuerpo--fin { padding-bottom: 64px; }

  .g52 { gap: 36px; } .g44 { gap: 32px; } .g40 { gap: 30px; } .g36 { gap: 28px; } .g34 { gap: 28px; }

  .tar, .tar--20 { padding: 18px 18px; }
  .tar--caja { padding: 0; }
  .hund { padding: 18px; }
  .fig { padding: 16px; gap: 16px; }
  .franja, .franja--ac, .franja--elev { padding: 16px 18px; }
  .pie__glos { margin-left: 0; }
  .btn:not(.btn--cab) { padding: 12px 18px; }
}

@media (max-width: 519px) {
  .cab__cta .largo { display: none; }
  .cab__cta .corto { display: inline; }
  .tablero { grid-template-columns: 1fr; }
  .puente { flex-direction: column; }
  .puente__flecha { width: auto; height: 30px; }
  .puente__flecha svg { transform: rotate(90deg); }
  .cifra { font-size: 1.625rem; }
}