/* ============================================================================
   ARGOS ATLAS — sistema de tema compartido (landing + blog + páginas estáticas)
   ----------------------------------------------------------------------------
   FUENTE ÚNICA DE VERDAD para los design tokens y el modo claro del sitio
   editorial. Lo cargan:
     · la landing (/landing/index.html y /landing/en/index.html)
     · todas las páginas generadas por scripts/build_content.mjs (template.mjs)
   El mapa (/map/) NO usa este archivo: conserva su propia UI.

   DIRECTRICES
   1. Tokens, no literales: cualquier color nuevo en páginas editoriales debe
      consumir una variable de aquí (--bg, --ink, --mut, --line, --cy, --txt,
      --ink-strong, --dim, --panel, --mono, --c-*). Si usas un literal, el modo
      claro se romperá en esa pieza.
   2. El modo claro se activa con la clase `light` en <html>. La aplica antes
      del primer pintado este snippet (inclúyelo en el <head> de toda página):
        <script>try{if(localStorage.getItem('atlas_theme')==='light')
          document.documentElement.classList.add('light')}catch(e){}</script>
   3. El toggle es el botón `.theme-btn` (#themeBtn) + el listener estándar:
        themeBtn.click → html.classList.toggle('light') → localStorage.atlas_theme
   4. Clave de persistencia: `atlas_theme` ('light' | 'dark'). Oscuro = defecto.
   5. Los colores de familia (--c-*) son los MISMOS en ambos temas por decisión
      de producto: son los colores reales de las capas del mapa.
   6. Reglas de componente claras: además de los tokens, este archivo trae los
      overrides html.light de las clases compartidas del chrome editorial
      (ed-head, ed-cta, ed-lang, ed-nav, bg-*) y del cuerpo de contenido
      (ed-card, ed-toc, ed-table, …). Si creas una clase nueva con fondo o
      sombra propios, añade aquí su override de modo claro.
   ============================================================================ */

/* ---- 1 · TOKENS (tema oscuro = defecto) ---- */
:root{
  --cy:#0bd3d3;                       /* acento de marca */
  --bg:#05080c;                       /* fondo de página */
  --panel:rgba(10,17,24,.5);          /* paneles/tarjetas translúcidos */
  --ink:#dfeef2;                      /* texto principal */
  --ink-strong:#eafeff;               /* texto enfatizado / headings secundarios */
  --txt:#c2d6db;                      /* cuerpo de artículo (p, li) */
  --mut:#8aa3ab;                      /* texto secundario */
  --dim:#5f7a82;                      /* metadatos / fineprint */
  --line:rgba(11,211,211,.13);        /* hairlines */
  --hd:#ffffff;                       /* headings principales */
  /* ⚠ --mono también existe en src/style.css (la SPA) con OTRA pila de fuentes. Mismo nombre,
     dos valores, dos sistemas que no se cargan juntos — no copies reglas entre ellos a ciegas. */
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Definido el 2026-08-03: pricing/landing/template lo referencian 38 veces como
     var(--gold,#ffd23b) y hasta hoy el token NO existía — resolvían siempre por el fallback.
     Mismo valor que el fallback: cero cambio visual; ahora el oro de marca tiene UNA fuente. */
  --gold:#ffd23b;
  --grn:#22e07a;                      /* punto "en directo" */
  /* colores de familia (idénticos a las capas del mapa; NO cambian con el tema) */
  --c-cam:#3d8bff; --c-flight:#19e3ff; --c-ship:#2bf0c8; --c-air:#e8b84b;
  --c-port:#3dd6c4; --c-pwr:#ff6b6b; --c-vip:#ffd23b;
}

/* ---- 2 · TOKENS modo claro (hueso institucional) ---- */
html.light{
  --cy:#0a7d84;
  --bg:#f1f1ec;
  --panel:rgba(255,255,255,.78);
  --ink:#22363c;
  --ink-strong:#16292e;
  --txt:#3c5258;
  --mut:#52666d;
  --dim:#4d6168;
  --line:rgba(13,80,86,.16);
  --hd:#101d22;
  --grn:#0fae5e;
}

/* ---- 3 · BOTÓN DE TEMA (☀/☾) — común a todas las páginas ---- */
/* MODO CLARO DESHABILITADO TEMPORALMENTE (pendiente de fixes del tema claro): se OCULTA el botón de
   tema en todas las superficies que cargan este CSS (landing ES/EN + blog + páginas estáticas). La
   maquinaria del tema (tokens html.light, estilos de abajo) se conserva intacta. Para REACTIVAR el
   modo claro a ojos del usuario: eliminar la regla `.theme-btn{display:none}` de justo debajo. */
.theme-btn{ display:none !important; }
.theme-btn{ width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; flex:none;
  background:transparent; border:1px solid var(--line); border-radius:2px; color:var(--mut); cursor:pointer;
  font-size:14px; line-height:1; padding:0; transition:color .2s ease, border-color .2s ease; }
.theme-btn:hover{ color:var(--ink); border-color:var(--cy); }
.theme-btn::before{ content:"☀"; }
html.light .theme-btn::before{ content:"☾"; }

/* ---- 4 · MODO CLARO: chrome compartido (header / fondos ambientales / botones) ---- */
html.light body{ background:var(--bg); color:var(--ink); }
html.light .bg-grid{ background-color:#f1f1ec;
  background-image:linear-gradient(rgba(10,125,132,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(10,125,132,.06) 1px,transparent 1px); }
html.light .bg-particles{ opacity:.14; }
html.light .bg-glow{ background:radial-gradient(58% 42% at 50% -6%,rgba(10,125,132,.07),transparent 70%); }
html.light .ed-head{ background:rgba(243,243,238,.86); }
html.light .ed-brand{ color:#10242a; }
html.light .brand-logo{ filter:none; }
/* botones en negro sobre claro (decisión de producto: B/N, no cian) */
html.light .ed-cta{ background:#10181b; color:#fff; box-shadow:none; }
html.light .ed-lang a.on{ background:#10181b; color:#fff; }

/* ---- 5 · MODO CLARO: cuerpo editorial (clases de template.mjs) ---- */
html.light h1,html.light h2,html.light h3{ color:var(--hd); }
html.light .ed-card,html.light .ed-toc,html.light .ed-inline-cta{ box-shadow:0 6px 22px rgba(15,30,35,.08); }
html.light .ed-meta .dot{ box-shadow:none; }
html.light .ed-tag{ background:rgba(10,125,132,.06); }
html.light .ed-midcta{ background:rgba(10,125,132,.06); }
html.light .ed-fig-link img{ background:#fff; box-shadow:0 8px 26px rgba(15,30,35,.14); }
html.light .ed-fig-go{ background:#10181b; color:#fff; box-shadow:none; }
html.light .ed-foot-meta{ color:var(--dim); }

/* ============================================================================
   EL LENGUAJE COMÚN DEL SITIO (04-10-2026, auditoría de coherencia visual, tableros B1 a B8)
   ----------------------------------------------------------------------------
   Todo lo de aquí abajo es ADITIVO: ni una regla de arriba se toca (regla 6). Las páginas de una
   sola copia (cuenta, grabaciones, afiliados, su panel) ya no dibujan su propio botón, tarjeta,
   campo, antetítulo o aviso: piden estas piezas por clase (.ax-*) y conservan solo su maquetación.
   /pricing/, /planes/, /vuelve/ y las páginas de después de pagar no las piden: las mide el A/B.
   ============================================================================ */

/* ---- 7 · TOKENS del lenguaje común ---- */
:root{
  /* Sin esto el navegador pinta en CLARO lo que es suyo (casillas, desplegables, barras de
     desplazamiento) sobre un fondo casi negro: la casilla de novedades de /cuenta/ salía blanca. */
  color-scheme:dark;
  --mag:#ff3366;                      /* el precio tachado y la casilla que falta: se usaba y no existía */
  --aff:#6fd3ff;                      /* el azul del programa de afiliados (cabecera y /cuenta/) */
  --warn:#e0c37a;                     /* aviso (ámbar: el oro ya dice PRO y pagar) */
  --err:#ff8f8f;                      /* error */
  --ok:#45e0a8;                       /* hecho, bienvenido */
  --soon:#9b8cff;                     /* lo que aún no existe (antes solo en /pricing/) */
  --on-cy:#031014;                    /* tinta sobre un relleno cian */
  --on-gold:#12140a;                  /* tinta sobre un relleno oro */
  --display:Michroma,var(--mono);     /* titulares de producto */
  --r-tight:2px;                      /* el lenguaje intel: cabecera, blog, etiquetas */
  --r-ui:4px;                         /* botones y campos */
  --r-card:6px;                       /* tarjetas y avisos */
  --shadow-panel:0 20px 50px rgba(0,0,0,.4);
  --glow-cy:0 0 14px rgba(11,211,211,.3);
  --glow-gold:0 0 26px rgba(255,210,59,.4);
  /* los interruptores, con los MISMOS valores que src/style.css :root (allí --text-dim es #6f8a90) */
  --tog-off-border:color-mix(in srgb, #6f8a90 42%, transparent);
  --tog-off-bg:color-mix(in srgb, #6f8a90 14%, transparent);
  --tog-on-bg:color-mix(in srgb, var(--cy) 22%, transparent);
  --tog-knob:#6f8a90;
}
html.light{ color-scheme:light; --soon:#6a4fe0; }
/* /planes/ y /vuelve/ son el embudo aprobado el 26-09 y una rama del A/B: se quedan como estaban. */
:root:has(#pl), :root:has(#vu){ color-scheme:normal; }

/* ---- 8 · BOTÓN (.ax-btn) ----
   La receta es la de /pricing/ (.pr-btn, que sigue allí tal cual). El color entra por variable:
   cian = entrar y usar el mapa; oro = lo que COBRA (decisión D2); azul = el programa de afiliados.
   «Abrir el mapa» no es esto: es .ed-cta, el de la cabecera (B1). */
.ax-btn{ --ax-c:var(--cy); --ax-on:var(--on-cy); --ax-glow:0 0 22px rgba(11,211,211,.35);
  display:inline-flex; align-items:center; justify-content:center; gap:8px; box-sizing:border-box;
  min-height:44px; padding:11px 22px; border:1px solid var(--ax-c); border-radius:var(--r-ui);
  background:var(--ax-c); color:var(--ax-on); cursor:pointer; font-family:var(--mono); font-size:12.5px;
  font-weight:600; letter-spacing:.08em; line-height:1.2; text-align:center; text-decoration:none;
  transition:transform .12s, box-shadow .16s, border-color .15s, color .15s, background-color .15s; }
.ax-btn:hover{ text-decoration:none; transform:translateY(-1px); box-shadow:var(--ax-glow); color:var(--ax-on); }
.ax-btn[disabled], .ax-btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
.ax-btn--gold{ --ax-c:var(--gold); --ax-on:var(--on-gold); --ax-glow:var(--glow-gold); }
.ax-btn--aff{ --ax-c:var(--aff); --ax-on:#04121a; --ax-glow:0 0 22px rgba(111,211,255,.35); }
.ax-btn--ghost{ background:transparent; color:var(--ax-c); }
.ax-btn--ghost:hover{ color:var(--ax-c); }
.ax-btn--quiet{ background:rgba(255,255,255,.04); border-color:var(--line); color:var(--txt); }
.ax-btn--quiet:hover{ transform:none; box-shadow:none; color:var(--ink); border-color:rgba(11,211,211,.4); }
.ax-btn--danger{ background:rgba(255,77,77,.12); border-color:rgba(255,77,77,.4); color:#ff9a9a; }
.ax-btn--danger:hover{ transform:none; box-shadow:none; color:#ffb3b3; border-color:rgba(255,77,77,.7); }
.ax-btn--sm{ min-height:34px; padding:7px 14px; font-size:12px; letter-spacing:.06em; }
.ax-btn--lg{ min-height:52px; padding:14px 26px; font-size:13.5px; }
.ax-btn--block{ display:flex; width:100%; }
@media (prefers-reduced-motion:reduce){ .ax-btn:hover{ transform:none; } }

/* ---- 9 · TARJETA, FILA CLAVE-VALOR, CAMPO ---- */
.ax-card{ box-sizing:border-box; padding:24px 24px 26px; border:1px solid var(--line); border-radius:var(--r-card);
  background:rgba(6,12,17,.7); box-shadow:var(--shadow-panel); }
.ax-card h2{ margin:0 0 6px; font-size:19px; font-weight:700; letter-spacing:.02em; color:var(--ink); }
.ax-card h3{ margin:0 0 8px; font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--mut); }
@media (max-width:520px){ .ax-card{ padding:18px 16px 20px; } }
.ax-kv{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
.ax-kv > span{ color:var(--mut); }
.ax-kv > b{ font-weight:600; text-align:right; word-break:break-word; color:var(--ink); }
.ax-kv--mono{ padding:7px 0; font-size:12.5px; }
.ax-kv--mono > b{ font-family:var(--mono); font-size:12px; }
.ax-input{ display:block; width:100%; box-sizing:border-box; padding:11px 13px; border:1px solid var(--line);
  border-radius:var(--r-ui); background:rgba(0,0,0,.35); color:var(--ink); font:14px/1.3 Inter,system-ui,sans-serif; outline:none; }
.ax-input:focus, .ax-input:focus-visible{ outline:none; border-color:var(--cy); }
.ax-input--sm{ padding:8px 11px; font-size:13px; line-height:1.4; }
select.ax-input{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);
  background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
select.ax-input option{ background:#0a1016; color:var(--ink); }

/* ---- 10 · AVISO (.ax-note): la barra a la izquierda en el color de lo que dice ---- */
.ax-note{ --note-c:var(--cy); margin:12px 0 0; padding:11px 14px; border:1px solid color-mix(in srgb, var(--note-c) 40%, transparent);
  border-left:3px solid var(--note-c); border-radius:var(--r-card); background:color-mix(in srgb, var(--note-c) 7%, transparent);
  font-size:13px; line-height:1.5; color:var(--txt); }
.ax-note--warn{ --note-c:var(--warn); }
.ax-note--err{ --note-c:var(--err); color:var(--err); }
.ax-note--ok{ --note-c:var(--ok); }
.ax-note--info{ --note-c:var(--cy); color:var(--ink); }

/* ---- 11 · SEGMENTADO (.ax-seg): la forma del mensual/anual de /pricing/ (.pr-ciclo) ---- */
.ax-seg{ display:inline-flex; gap:2px; box-sizing:border-box; padding:3px; border:1px solid var(--line);
  border-radius:var(--r-card); background:rgba(255,255,255,.04); }
.ax-seg > button, .ax-seg > a{ background:none; border:0; border-radius:var(--r-ui); cursor:pointer; padding:8px 18px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); text-decoration:none; }
.ax-seg > button:hover, .ax-seg > a:hover{ color:var(--ink); text-decoration:none; }
.ax-seg > .on, .ax-seg > [aria-selected="true"], .ax-seg > [aria-pressed="true"]{ background:var(--cy); color:var(--on-cy); font-weight:600; }
.ax-seg--gold > .on, .ax-seg--gold > [aria-selected="true"], .ax-seg--gold > [aria-pressed="true"]{ background:var(--gold); color:var(--on-gold); }
.ax-seg--block{ display:flex; width:100%; }
.ax-seg--block > button, .ax-seg--block > a{ flex:1 1 0; }

/* ---- 12 · ANTETÍTULO EN PÍLDORA (.ax-pill): el de las páginas de producto, en cian o en oro ---- */
.ax-pill{ --pill-c:var(--cy); display:inline-flex; align-items:center; gap:8px; padding:5px 13px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--pill-c) 38%, transparent); font-family:var(--mono); font-size:10px;
  letter-spacing:.24em; color:var(--pill-c); }
.ax-pill--gold{ --pill-c:var(--gold); }
.ax-pill > i{ flex:none; width:6px; height:6px; border-radius:50%; background:currentColor;
  box-shadow:0 0 8px color-mix(in srgb, currentColor 80%, transparent); }

/* ---- 13 · INTERRUPTOR (.ax-switch): la geometría del sitio (38×22) con los grises del mapa ----
   <button class="ax-switch" role="switch"><i></i>Texto</button>; encendido con .on */
.ax-switch{ flex:none; display:inline-flex; align-items:center; gap:8px; padding:0; border:0; background:none; cursor:pointer;
  font:600 11px var(--mono); letter-spacing:.04em; color:var(--mut); }
.ax-switch > i{ position:relative; flex:none; box-sizing:border-box; width:38px; height:22px; border-radius:999px;
  border:1px solid var(--tog-off-border); background:var(--tog-off-bg); transition:background .15s, border-color .15s; }
.ax-switch > i::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:var(--tog-knob); transition:transform .15s, background .15s; }
.ax-switch:hover > i{ border-color:var(--cy); }
.ax-switch.on{ color:var(--cy); }
.ax-switch.on > i{ background:var(--tog-on-bg); border-color:var(--cy); }
.ax-switch.on > i::after{ transform:translateX(16px); background:var(--cy); box-shadow:0 0 8px var(--cy); }
.ax-switch[disabled]{ opacity:.5; cursor:default; }

/* ---- 14 · CARGANDO Y VACÍO ---- */
.ax-spin{ display:inline-block; box-sizing:border-box; width:22px; height:22px; border-radius:50%; vertical-align:middle;
  border:2px solid rgba(11,211,211,.25); border-top-color:var(--cy); animation:ax-rot .9s linear infinite; }
@keyframes ax-rot{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .ax-spin{ animation:none; } }
.ax-empty{ margin:4px 0 0; font-family:var(--mono); font-size:12px; letter-spacing:.02em; line-height:1.5; color:var(--mut); }
/* Una pieza con su propio display no se esconde sola con el atributo hidden: aquí sí. */
.ax-btn[hidden], .ax-card[hidden], .ax-kv[hidden], .ax-input[hidden], .ax-note[hidden], .ax-seg[hidden], .ax-pill[hidden],
.ax-switch[hidden], .ax-spin[hidden], .ax-empty[hidden]{ display:none !important; }

/* ---- 15 · MODO CLARO de las piezas nuevas (directriz 6 de arriba) ---- */
html.light .ax-card{ background:var(--panel); box-shadow:0 6px 22px rgba(15,30,35,.08); }
html.light .ax-input{ background:#fff; }
html.light .ax-btn--quiet{ background:rgba(16,24,27,.04); }

/* ---- 16 · LA CABECERA Y EL MENÚ, UNA SOLA VEZ (B7) ----
   Estaban escritos dos veces, en content/template.mjs y en las dos landings, y entre 1.101 y 1.360 px
   se separaban en seis detalles (la compresión a 1.360 solo en la plantilla, el reloj escondido a
   1.200 frente a 1.000, la marca a 480 frente a 440, el relleno del menú, el margen de la
   hamburguesa y el punto de «en directo»). Las copias viejas se quedan (regla 6); esta gana a las dos
   porque cada selector lleva :root delante, que vale una clase más, y así da igual quién cargue
   después. Lo que cambie la cabecera a partir de hoy se cambia AQUÍ. Los valores, los de la
   plantilla, que es la que pintan casi todas las páginas. */
:root .ed-head{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:20px; padding:0 26px;
  min-height:62px; background:rgba(5,8,12,.82); backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid var(--line); }
:root .ed-brand{ display:flex; align-items:center; gap:11px; color:#fff; flex:none; }
:root .brand-logo{ width:27px; height:27px; color:var(--cy); filter:drop-shadow(0 0 6px rgba(11,211,211,.5)); transition:filter .2s ease; }
:root .ed-brand:hover .brand-logo{ filter:drop-shadow(0 0 11px rgba(11,211,211,.85)); }
:root .ed-brand-name{ font-family:Michroma,monospace; letter-spacing:2.6px; font-size:13px; }
:root .ed-nav{ display:flex; gap:22px; margin-left:10px; flex:1; flex-wrap:wrap; }
:root .ed-nav a{ color:var(--mut); font-size:14px; position:relative; padding:3px 0; }
:root .ed-nav a:hover{ color:var(--ink); text-decoration:none; }
:root .ed-nav a.nav-twin{ display:inline-flex; align-items:center; gap:6px; padding:5px 14px; border-radius:999px; font-size:13px; font-weight:500;
  border:1px solid color-mix(in srgb, currentColor 42%, transparent); background:color-mix(in srgb, currentColor 7%, transparent);
  transition:background .25s ease, box-shadow .25s ease, border-color .25s ease, transform .25s ease; }
:root .ed-nav a.nav-twin::before{ content:"\2726"; margin:0; font-size:10px; }
:root .ed-nav a.nav-twin::after{ display:none; }
:root .ed-nav a.nav-twin:hover{ text-decoration:none; background:color-mix(in srgb, currentColor 16%, transparent);
  border-color:color-mix(in srgb, currentColor 75%, transparent); box-shadow:0 0 18px color-mix(in srgb, currentColor 28%, transparent);
  transform:translateY(-1px); }
:root .ed-nav a.nav-twin.nav-pro{ color:var(--gold); }
:root .ed-nav a.nav-twin.nav-earn{ color:var(--aff); }
@media (prefers-reduced-motion:reduce){ :root .ed-nav a.nav-twin{ transition:none; } :root .ed-nav a.nav-twin:hover{ transform:none; } }
:root .ed-lang{ display:flex; gap:2px; font-family:var(--mono); font-size:10.5px; letter-spacing:1px; flex:none; }
:root .ed-lang a{ color:var(--mut); padding:5px 8px; border-radius:2px; }
:root .ed-lang a:hover{ color:var(--ink); text-decoration:none; }
:root .ed-lang a.on, :root .ed-lang a.on:hover{ color:var(--on-cy); background:var(--cy); }
:root.light .ed-lang a.on, :root.light .ed-lang a.on:hover{ background:#10181b; color:#fff; }
:root .hud-status{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10px; letter-spacing:1px;
  color:var(--mut); white-space:nowrap; }
:root .hud-status b{ color:var(--ink-strong); font-weight:500; font-variant-numeric:tabular-nums; }
:root .hud-status .live-dot{ width:6px; height:6px; border-radius:50%; background:var(--grn); flex:none;
  box-shadow:0 0 8px var(--grn); transform:none; animation:ax-hud-pulse 2s ease-in-out infinite; }
@keyframes ax-hud-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
@media (prefers-reduced-motion:reduce){ :root .hud-status .live-dot{ animation:none; } }
:root .ed-head .ed-cta{ font-family:var(--mono); font-size:11.5px; letter-spacing:1.3px; text-transform:uppercase; color:var(--on-cy);
  background:var(--cy); padding:11px 18px; border-radius:2px; white-space:nowrap; flex:none; box-shadow:var(--glow-cy);
  transition:filter .15s ease, box-shadow .15s ease; }
:root .ed-head .ed-cta:hover{ text-decoration:none; filter:brightness(1.08); box-shadow:0 0 22px rgba(11,211,211,.45); }
:root.light .ed-head .ed-cta{ background:#10181b; color:#fff; box-shadow:none; }
/* la cuenta (cuenta-nav.js) */
:root .ed-user-in{ font-family:var(--mono); font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--mut);
  border:1px solid var(--line); border-radius:2px; padding:9px 12px; white-space:nowrap; flex:none; }
:root .ed-user-in:hover{ color:var(--ink); border-color:var(--cy); text-decoration:none; }
:root .ed-user{ position:relative; flex:none; }
:root .ed-user-btn{ width:40px; height:40px; padding:0; border-radius:50%; border:1px solid var(--line); background:none; color:var(--cy);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
:root .ed-user-btn svg{ width:20px; height:20px; }
:root .ed-user:hover .ed-user-btn, :root .ed-user.on .ed-user-btn{ border-color:var(--cy); box-shadow:var(--glow-cy); }
/* hamburguesa y panel desplegable (por debajo de 900 px) */
:root .ed-burger{ display:none; flex:none; width:42px; height:42px; padding:0; margin-right:-6px; cursor:pointer; background:none;
  border:1px solid var(--line); border-radius:2px; color:var(--ink); flex-direction:column; align-items:center; justify-content:center; gap:5px; }
:root .ed-burger i{ display:block; width:17px; height:1.5px; background:currentColor; border-radius:2px; transition:transform .22s ease, opacity .18s ease; }
:root .ed-burger[aria-expanded="true"]{ border-color:rgba(11,211,211,.55); color:var(--cy); }
:root .ed-burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
:root .ed-burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
:root .ed-burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
@media (prefers-reduced-motion:reduce){ :root .ed-burger i{ transition:none; } }
:root .ed-menu{ display:none; position:absolute; left:0; right:0; top:100%; padding:14px 18px 22px;
  background:rgba(5,8,12,.97); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); box-shadow:0 22px 44px rgba(0,0,0,.55); }
:root .ed-menu[hidden]{ display:none; }
:root .ed-menu-nav{ display:flex; flex-direction:column; }
:root .ed-menu-nav a{ padding:13px 2px; font-size:16px; color:var(--ink); border-bottom:1px solid var(--line); }
:root .ed-menu-nav a:last-of-type{ border-bottom:0; }
:root .ed-menu-nav a::after{ display:none; }
/* Fallo 11: en el menú del teléfono «ARGOS PRO» salía en blanco y sin su ✦ (no había regla para él).
   Las dos píldoras gemelas llevan su estrella y su color también aquí. */
:root .ed-menu-nav a.nav-twin{ display:flex; align-items:center; gap:9px; }
:root .ed-menu-nav a.nav-twin::before{ content:"\2726"; font-size:11px; }
:root .ed-menu-nav a.nav-twin.nav-pro{ color:var(--gold); }
:root .ed-menu-nav a.nav-twin.nav-earn{ color:var(--aff); }
/* 04-10-2026 (dueño: «estos botones hazlos más refinados»): las dos gemelas hablan el idioma del resto de la
   cabecera (mono, versalitas espaciadas, canto casi recto y una línea fina, como «Entrar» y «Abrir el mapa»)
   en vez de una píldora redonda de palo seco con un ✦. Siguen siendo gemelas: oro ARGOS PRO, azul afiliados,
   misma forma, tamaño y gesto (25-09-2026). Va DESPUÉS de las reglas de arriba, que se quedan (regla 6). */
:root .ed-nav a.nav-twin{ gap:9px; height:32px; padding:0 14px 0 12px; border-radius:3px; line-height:1;
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap;
  border:1px solid color-mix(in srgb, currentColor 30%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, currentColor 10%, transparent), color-mix(in srgb, currentColor 3%, transparent));
  box-shadow:inset 0 1px 0 color-mix(in srgb, currentColor 12%, transparent); }
:root .ed-nav a.nav-twin::before{ content:""; flex:none; width:5px; height:5px; margin:0 1px; transform:rotate(45deg);
  background:currentColor; box-shadow:0 0 7px currentColor; font-size:0; }
:root .ed-nav a.nav-twin:hover{ transform:none; border-color:color-mix(in srgb, currentColor 62%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, currentColor 18%, transparent), color-mix(in srgb, currentColor 6%, transparent));
  box-shadow:inset 0 1px 0 color-mix(in srgb, currentColor 22%, transparent), 0 0 18px color-mix(in srgb, currentColor 16%, transparent); }
/* entre 900 y 1100 px, con la versalita de 10,5 px, la de afiliados bajaba a una segunda fila (a 920 px) */
@media (max-width:1100px){ :root .ed-nav a.nav-twin{ gap:7px; height:30px; padding:0 10px 0 9px; font-size:9.5px; letter-spacing:1.1px; } }
:root .ed-menu-nav a.nav-twin{ gap:12px; font-family:var(--mono); font-size:13px; letter-spacing:1.4px; text-transform:uppercase; }
:root .ed-menu-nav a.nav-twin::before{ content:""; flex:none; width:6px; height:6px; margin:0 2px; transform:rotate(45deg);
  background:currentColor; box-shadow:0 0 8px currentColor; font-size:0; }
:root .ed-menu .ed-menu-cta{ display:block; margin-top:16px; text-align:center; font-size:12.5px; padding:14px 18px; }
@media (max-width:1360px){
  :root .ed-head{ gap:13px; padding:0 18px; }
  :root .ed-nav{ gap:13px; margin-left:4px; }
  :root .ed-nav a{ font-size:13px; }
  :root .ed-head > .ed-cta{ padding:10px 14px; font-size:11px; }
}
@media (max-width:1200px){ :root .hud-status{ display:none; } }
@media (max-width:900px){
  :root .ed-head{ gap:12px; padding:0 18px; min-height:58px; }
  :root .ed-nav{ display:none; }
  :root .ed-head > .ed-cta{ display:none; }
  :root .ed-burger{ display:flex; margin-left:auto; }
  :root .ed-menu.on{ display:block; }
  :root .ed-user, :root .ed-user-in{ display:none; }
}
@media (max-width:480px){
  :root .ed-brand-name{ font-size:11.5px; letter-spacing:2px; }
  :root .brand-logo{ width:23px; height:23px; }
}

/* ---- 17 · EL PIE, UNO SOLO (D7) ----
   El de la landing (marca, tres columnas y telemetría) es ya el de todas las páginas: la plantilla lo
   emite con la clase .ed-foot además de .lf, para que todo lo que ya escondía el pie de la plantilla
   (/planes/, /vuelve/, la vuelta del pago, la página de después de pagar) lo siga escondiendo. Estas
   reglas son copia de las de la landing (que se quedan allí, regla 6) más lo que anula la caja vieja. */
footer.lf{ position:relative; z-index:1; border-top:1px solid var(--line); background:rgba(5,8,12,.6); }
.lf-in{ max-width:1120px; margin:0 auto; padding:42px 22px 56px; display:flex; flex-wrap:wrap; gap:28px 48px; align-items:flex-start; }
.lf-brand{ display:flex; flex-direction:column; gap:10px; min-width:200px; }
.lf-slogan{ font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--mut); text-transform:uppercase; }
.lf-cols{ display:flex; gap:48px; flex-wrap:wrap; flex:1; }
.lf-col h4{ font-family:var(--mono); font-size:9.5px; letter-spacing:1.8px; text-transform:uppercase; color:var(--cy); margin:0 0 12px; }
.lf-col a{ display:block; color:var(--mut); font-size:13px; margin:7px 0; }
.lf-col a:hover{ color:var(--ink); text-decoration:none; }
.lf-meta{ width:100%; border-top:1px solid var(--line); margin-top:6px; padding-top:20px; color:#5f7a82; font-size:11.5px; }
.lf-sys{ font-family:var(--mono); font-size:9.5px; letter-spacing:1.8px; text-transform:uppercase; color:#46606a; margin-top:10px;
  display:flex; flex-wrap:wrap; gap:6px 18px; }
.lf-sys b{ color:#7da3ad; font-weight:500; font-variant-numeric:tabular-nums; }
/* la caja vieja de .ed-foot (680 px, su relleno, su raya) no se aplica al pie nuevo; con :root delante
   porque main.wide + .ed-foot y main.read + .ed-foot pesan lo mismo que footer.ed-foot.lf y van después */
:root footer.ed-foot.lf{ max-width:none; margin:36px 0 0; padding:0; }
footer.lf .ed-foot-cta{ margin:6px 0 0; }
footer.lf .lf-meta, footer.lf .lf-sys{ margin-bottom:0; }
html.light footer.lf{ background:rgba(247,247,243,.85); }
html.light .lf-sys{ color:#4d6168; } html.light .lf-sys b{ color:#22363c; }
html.light .lf-meta{ color:#4d6168; }
@media (max-width:640px){
  .lf-in{ flex-direction:column; align-items:center; text-align:center; gap:28px; padding:40px 20px 44px; }
  .lf-brand{ min-width:0; align-items:center; gap:8px; }
  .lf-cols{ width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:24px 12px; }
  .lf-col h4{ margin-bottom:10px; }
  .lf-col a{ font-size:12.5px; margin:6px 0; }
}