/* site.css — Design tokens + componentes del sitio público (F8 Visual System).
   Fuente ÚNICA de color/tipografía/espacio. Los componentes NUNCA hardcodean hex:
   usan var(--token). Dos modos: Evidence (oscuro) y Guide (claro), conmutados por
   la clase .mode-evidence / .mode-guide en el contenedor de página. */

:root {
  /* Marca (compartido entre modos) */
  --gold: #fad02c;
  --gold-deep: #b8860b;
  /* The figure that carries a chart's message: the leaf gold on a dark ground, the deep gold on paper
     (.mode-guide), where the leaf gold does not read. An agency maps both golds to its accent. */
  --figure: var(--gold);
  --blue: #8facc5;

  /* Alias canónicos del F8 Visual System (mismo valor, vocabulario del spec) */
  --rich-black: #0B0B0F;
  --navy: #252A44;
  --navy-hi: #333A5C;
  --deep-gold: #b8860b;
  --secondary-blue: #8facc5;
  --light-neutral: #e9eaec;

  /* Superficies por modo */
  --evidence-bg: #0B0B0F;
  --evidence-surface: #252A44;
  --evidence-surface-hi: #333A5C;
  --evidence-ink: #e9eaec;
  --guide-bg: #e9eaec;
  --guide-ink: #0B0B0F;
  --guide-ink-soft: #252A44;

  /* Diagnóstico (déficit) — solo cifras de estado */
  --deficit: #c8564a;

  /* Las dos placas de la rueda de trabajo. Una celda está en uno de cuatro estados y los cuatro
     se distinguen de un vistazo: no aplica, hecha, vencida sin hacer, u hoy y abierta. «Hecha» es
     el token del anillo y «hoy» es un hairline suyo, así que las otras dos necesitan un fondo —y
     ninguna puede ser roja: el rojo es del número de déficit (§4.1).

     Son TONOS SÓLIDOS, no velos: F8 pide jerarquía por tamaño/peso/tono y nunca por transparencia.
     `color-mix()` mezcla los tokens del modo, así que un agency que redefine `--app-bg` y
     `--light-neutral` también redefine estas dos placas sin tocar la regla. */
  --inert: color-mix(in srgb, var(--app-bg) 88%, var(--light-neutral) 12%);
  --undone: color-mix(in srgb, var(--app-bg) 76%, var(--light-neutral) 24%);

  /* Éxito y advertencia.
   *
   * No estaban, y por eso el árbol tenía 126 apariciones del verde `var(--success, #6f9a72)` y el naranja
   * `var(--warning, #b8860b)` que CLAUDE.md §0.1 B prohíbe: sin un token que decir, cada pantalla escribió el hex
   * que le pareció. El verde es el que §4.1 nombra; la advertencia usa el oro profundo que la
   * paleta ya tenía, porque el rojo está reservado al número de déficit y un aviso no es un error.
   *
   * El triplete existe para los lavados: `rgba()` no admite `var()` de un color entero, así que
   * el alfa se queda en el sitio que lo usa y el color sigue viniendo de acá. */
  --success: #6f9a72;
  --success-rgb: 111, 154, 114;
  --warning: var(--deep-gold);
  --warning-rgb: 184, 134, 11;

  /* Tipografía */
  --font-editorial: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* The type scale, on F8's 4pt grid, with a floor: nothing is set under --fs-label (12px).
   * Same values as `VisualConfiguration::PROVIDER`; `php tools/trinquete.php tipo` counts what is under it. */
  --fs-label: 12px;
  --fs-meta: 14px;
  --fs-body: 16px;
  --fs-lead: 20px;
  --fs-title: 24px;
  --fs-display: 32px;

  /* The panel's vocabulary, so a component reads the same names on any page.
   * Same values as `VisualConfiguration::PROVIDER`; VisualConfigurationTest holds them equal.
   * An agency configuration redefines these — a view that writes the literal never hears. */
  --app-bg: #14161f;
  --navy-line: #4f7fa8;
  --hairline: rgba(255,255,255,.14);
  --ink-strong: #fff;
  --gold-rgb: 250,208,44;
  --blue-rgb: 143,172,197;
  --navy-rgb: 37,42,68;
  --rich-black-rgb: 11,11,15;
  --app-bg-rgb: 20,22,31;
  --ink-rgb: 233,234,236;
  --veil-rgb: 255,255,255;

  /* Las tintas calladas. F8 tenía una tinta brillante y nada entre ella y el fondo, así que
   * cada pantalla se inventó la suya con `rgba(var(--ink-rgb),.X)` a mano. Dos escalones,
   * medidos sobre los dos fondos del panel:
   *   --ink-quiet  8,5:1 sobre #0B0B0F · 7,8:1 sobre #14161f — dato secundario, nota, vacío
   *   --ink-faint  5,4:1 sobre #0B0B0F · 5,0:1 sobre #14161f — EL PISO: inactivo, nada más
   * Distinto de `--ink-soft`, que es del vocabulario de modos de abajo y nunca vive acá. */
  --ink-quiet: #a8abb2;
  --ink-faint: #82868f;
  /* La fila. La banda es un VELO, no una superficie: sigue a su fondo, así que la misma
   * declaración aclara un panel oscuro y oscurece el papel. */
  --row-alt: rgba(var(--veil-rgb),.05);
  --row-hover: rgba(var(--gold-rgb),.14);
  --bar-bg: var(--rich-black);
  --bar-line: var(--hairline);
  --cta-bg: var(--gold);
  --cta-hover: #fff;
  --sheet: #fff;

  /* Escala 4pt */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:52px; --s16:84px;

  /* F8: cuadrado, sin sombras */
  --radius: 0;
}

/* ---- Modos: mapean tokens neutros (--bg/--ink/--surface/--line) ---- */
.mode-evidence {
  --bg: var(--evidence-bg);
  --ink: var(--evidence-ink);
  --ink-soft: var(--blue);
  --surface: var(--evidence-surface);
  --line: rgba(255,255,255,.15);
  --line-soft: rgba(255,255,255,.12);
  --eyebrow-ink: rgba(233,234,236,.58);
  --row-alt: rgba(255,255,255,.05);
}
.mode-guide {
  --bg: var(--guide-bg);
  --ink: var(--guide-ink);
  --ink-soft: var(--guide-ink-soft);
  --surface: var(--evidence-surface);   /* los bloques Evidence quedan navy también en Guide */
  --line: rgba(37,42,68,.3);
  --line-soft: rgba(37,42,68,.25);
  --eyebrow-ink: var(--guide-ink-soft);
  /* Sobre papel la tinta callada es la navy del modo, no el gris de `:root`. */
  --ink-quiet: var(--guide-ink-soft);
  --ink-faint: var(--guide-ink-soft);
  --figure: var(--gold-deep);
  --row-alt: rgba(37,42,68,.05);
}

/* ---- Base ---- */
*{box-sizing:border-box}
.page{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.6;min-height:100vh}
.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.wrap--wide{max-width:1280px}
.pf{font-family:var(--font-editorial)}
.mono{font-family:var(--font-mono)}
a{color:inherit;text-decoration:none}

/* ---- Cómo cortan los titulares ----
   Un titular de display con `max-width` en `ch` corta donde le toca, y donde le toca suele ser
   mal: «El mismo trabajo, con el sistema fiscal en lugar del político.» dejaba «político.» solo
   en una tercera línea. No es un defecto de ese texto sino de cualquiera que cruce el ancho.

   `text-wrap:balance` reparte las líneas parejas — es para titulares, que tienen pocas.
   `text-wrap:pretty` sólo evita que la última quede con una palabra suelta — es para prosa, donde
   balancear un párrafo largo no aporta y el navegador lo ignora igual.

   Donde no está soportado no pasa nada: se corta como antes. */

/* ---- Eyebrow (kicker mono) ----
   `margin:0` y `font-weight:400` no son decorativos: son lo que permite que un rótulo de sección
   sea un <h2> real sin cambiar de aspecto. La hoja no tiene reset de encabezados (sólo
   `*{box-sizing}` y `.page{margin:0}`), así que un h2 sin esto hereda del navegador margen 0.83em
   y negrita. 400 es el peso que hereda hoy del cuerpo, no un valor elegido. */
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--eyebrow-ink);margin:0;font-weight:400}
.eyebrow--gold{color:var(--gold)}
.eyebrow--rule{border-bottom:1px solid var(--line);padding-bottom:12px}

/* ---- Header + nav ---- */
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:64px;padding:0 clamp(16px,3vw,28px);background:var(--bg);border-bottom:1px solid var(--line)}
.site-header__brand{display:flex;align-items:center;gap:11px;flex:none}
.site-header__brand img{height:26px;width:auto;display:block}
.brand-name{font-family:var(--font-editorial);font-size:19px;color:var(--ink);white-space:nowrap}
.site-nav{display:flex;align-items:center;gap:clamp(12px,1.8vw,24px);flex:none;white-space:nowrap}
.nav-link{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);transition:color .15s}
.nav-link:hover{color:var(--ink)}
.nav-link--active{color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px}
.nav-link--alt{color:var(--gold)}
.nav-bar,.nav-check{display:none}
.lang-switch{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em}
.lang-switch__opt{color:var(--ink-soft);transition:color .15s}
a.lang-switch__opt:hover{color:var(--ink)}
.lang-switch__opt.is-active{color:var(--gold)}
.lang-switch__sep{color:var(--line)}

/* ---- Botones ---- */
.cta{display:inline-block;background:var(--cta-bg);color:var(--evidence-bg);font-family:var(--font-mono);
  font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:16px 30px;border:0;cursor:pointer;transition:background .15s,color .15s}
.cta:hover{background:var(--cta-hover);color:var(--evidence-bg)}
.cta--sm{padding:9px 18px;font-size:12px}
.btn-line{display:inline-block;border:1px solid var(--gold);color:var(--gold);font-family:var(--font-mono);
  font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;padding:15px 29px;transition:background .15s,color .15s}
.btn-line:hover{background:var(--gold);color:var(--evidence-bg)}

/* ---- Cards / grillas ---- */
.grid-1px{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line)}
.post-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{background:var(--guide-bg);padding:clamp(26px,2.6vw,32px) clamp(24px,2.4vw,30px);display:flex;flex-direction:column;color:var(--guide-ink)}
.card__meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(37,42,68,.7)}
.card__title{font-family:var(--font-editorial);font-weight:500;font-size:clamp(21px,2.4vw,26px);line-height:1.15;margin:14px 0 0;max-width:24ch}
.card__excerpt{font-size:13.5px;line-height:1.7;color:var(--guide-ink-soft);margin:14px 0 0;max-width:50ch}

/* ---- Bloque Evidence (cifra) ---- */
.evidence{background:var(--evidence-surface);color:var(--evidence-ink);padding:clamp(26px,3vw,34px) clamp(24px,2.6vw,30px);display:flex;flex-direction:column;justify-content:center}
.evidence__figure{font-family:var(--font-editorial);font-size:clamp(48px,7vw,76px);line-height:.95;color:#fff;margin-top:18px}
.evidence__note{font-size:13px;line-height:1.65;color:var(--blue);margin-top:16px;max-width:26ch}

/* ---- CTA banner (dark en cualquier modo) ---- */
.banner{background:var(--evidence-bg);color:var(--evidence-ink);padding:clamp(28px,3.6vw,38px) clamp(24px,3vw,36px);
  display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.banner__title{font-family:var(--font-editorial);font-size:clamp(24px,3vw,32px);line-height:1.15;color:#fff;margin-top:14px;max-width:24ch}

/* ---- Secciones / títulos de página ---- */
.section{padding:clamp(28px,4vw,52px) 0 0}
.section--first{padding-top:clamp(36px,5vw,60px)}
.page-eyebrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.page-title{font-family:var(--font-editorial);font-weight:600;font-size:clamp(40px,7vw,58px);line-height:1;letter-spacing:-.02em;margin:20px 0 0}

/* ---- Lead article (destacado del blog) ---- */
.lead-article{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(24px,3.5vw,44px);
  border-top:1px solid var(--line);padding-top:36px;color:inherit}
.lead__title{font-weight:500;font-size:clamp(30px,4.6vw,46px);line-height:1.06;letter-spacing:-.015em;margin:18px 0 0;max-width:19ch}
.lead__excerpt{font-size:16px;line-height:1.75;color:var(--ink-soft);margin:20px 0 0;max-width:52ch}
.lead__read{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-top:24px;border-bottom:1px solid var(--ink);padding-bottom:3px;display:inline-block}
.evidence__restate{font-size:clamp(30px,4vw,40px);line-height:1.1;color:#fff;margin-top:18px;max-width:20ch}

/* ---- Masterclass ---- */
.mc-wrap{max-width:860px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.mc-hero{min-height:min(78vh,760px);display:flex;flex-direction:column;justify-content:center;padding:clamp(56px,9vw,120px) clamp(20px,5vw,88px) clamp(40px,6vw,80px);border-bottom:1px solid var(--line)}
.mc-hero__kicker{font-family:var(--font-mono);font-size:clamp(9.5px,1.1vw,11px);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.mc-hero__a{font-family:var(--font-editorial);font-weight:500;font-size:clamp(32px,6.2vw,74px);line-height:1.04;letter-spacing:-.02em;color:#fff;margin:clamp(24px,3.4vw,44px) 0 0;max-width:19ch;text-wrap:balance}
.mc-hero__b{font-family:var(--font-editorial);font-style:italic;font-weight:400;font-size:clamp(26px,4.4vw,52px);line-height:1.12;letter-spacing:-.015em;color:var(--gold);margin:clamp(14px,1.8vw,24px) 0 0;max-width:24ch}
.mc-typing{display:flex;align-items:center;gap:10px;margin-top:clamp(28px,4vw,52px);font-family:var(--font-mono);font-size:clamp(10px,1.15vw,12px);color:var(--ink-quiet)}
.mc-typing span{width:5px;height:5px;background:var(--secondary-blue);animation:mcdot 1.4s infinite}
.mc-typing span:nth-child(2){animation-delay:.2s}.mc-typing span:nth-child(3){animation-delay:.4s}
.mc-typing em{margin-left:6px;font-style:normal}
@keyframes mcdot{0%,60%,100%{opacity:.25}30%{opacity:1}}
.mc-sec{padding:clamp(44px,6vw,88px) 0 0}
/* Ídem `.eyebrow`: margen y peso explícitos para que el rótulo pueda ser <h2>. */
.mc-eyebrow{font-family:var(--font-mono);font-size:clamp(9.5px,1.05vw,10.5px);letter-spacing:.2em;text-transform:uppercase;color:rgba(233,234,236,.58);border-bottom:1px solid var(--line);padding-bottom:12px;margin:0;font-weight:400}
.mc-say{font-family:var(--font-editorial);font-size:clamp(21px,3vw,36px);line-height:1.28;color:#fff;margin:clamp(28px,3.6vw,48px) 0 0;max-width:30ch;text-wrap:pretty}
.mc-say--sm{font-size:clamp(19px,2.5vw,30px);color:var(--evidence-ink);line-height:1.36}
.mc-say--gold{font-style:italic;color:var(--gold);font-size:clamp(20px,2.7vw,32px);line-height:1.34}
.mc-opts{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(22px,2.8vw,32px)}
.mc-opt{background:var(--rich-black);padding:clamp(18px,2.4vw,26px) clamp(16px,2.2vw,26px);font-family:var(--font-mono);font-size:clamp(12px,1.5vw,15px);line-height:1.55;color:rgba(233,234,236,.75);display:flex;justify-content:space-between;align-items:center;gap:14px;transition:background .15s}
.mc-opt:hover{background:#14141c}
.mc-opt--pick{background:var(--surface);border-left:2px solid var(--gold);color:#fff}
.mc-opt__tag{font-family:var(--font-mono);font-size:clamp(8.5px,.95vw,10px);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-quiet);flex:none}
.mc-chart{border:1px solid rgba(250,208,44,.35);background:var(--surface);padding:clamp(20px,2.6vw,30px) clamp(16px,2.2vw,28px) clamp(18px,2.4vw,26px);margin-top:clamp(26px,3.2vw,40px)}
.mc-chart__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.mc-chart__ttl{font-family:var(--font-mono);font-size:clamp(9px,1vw,10.5px);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0;font-weight:400}
.mc-chart__leg{display:flex;gap:16px;font-family:var(--font-mono);font-size:clamp(8.5px,.95vw,10px);letter-spacing:.1em;text-transform:uppercase}
.mc-chart__key{display:flex;align-items:center;gap:6px}
.mc-chart__key::before{content:'';width:8px;height:8px;flex:none}
.mc-chart__key--blue{color:var(--secondary-blue)}.mc-chart__key--blue::before{background:var(--secondary-blue)}
.mc-chart__key--gold{color:var(--gold)}.mc-chart__key--gold::before{background:var(--gold)}
.mc-chart__body{--mc-big:clamp(34px,6vw,64px);display:flex;flex-direction:column;gap:clamp(5px,.7vw,8px);margin-top:clamp(16px,2vw,22px)}
.mc-br--big{margin-top:calc(var(--mc-big) * .55);margin-bottom:calc(var(--mc-big) * .18)}
.mc-br{display:grid;grid-template-columns:clamp(56px,7vw,84px) 1fr;gap:clamp(8px,1.2vw,14px);align-items:center}
.mc-br__lbl{font-family:var(--font-mono);font-size:clamp(8.5px,.95vw,10.5px);color:var(--secondary-blue);text-align:right}
.mc-br__bars{display:flex;flex-direction:column;gap:2px}
.mc-br__corp{height:clamp(7px,.85vw,10px);background:var(--secondary-blue);min-width:2px;display:block}
.mc-br__money-row{display:flex;align-items:center;gap:8px;position:relative}
.mc-br__money{height:clamp(7px,.85vw,10px);background:rgba(250,208,44,.5);min-width:2px;flex:none;display:block}
.mc-br__money--big{background:var(--gold)}
.mc-br__money-row em{font-family:var(--font-mono);font-size:clamp(8px,.9vw,10px);color:rgba(250,208,44,.6);white-space:nowrap;font-style:normal}
.mc-br__money-row em.mc-br__big{position:absolute;left:calc(var(--mc-w) + clamp(10px,1.2vw,16px));top:50%;transform:translateY(-50%);font-family:var(--font-editorial);font-weight:600;font-size:var(--mc-big);line-height:.78;letter-spacing:-.03em;color:var(--gold);pointer-events:none}
.mc-chart__foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(14px,1.8vw,20px);border-top:1px solid var(--line);padding-top:clamp(12px,1.5vw,16px);font-family:var(--font-mono);font-size:clamp(9px,1vw,10.5px);letter-spacing:.06em;color:var(--evidence-ink)}
.mc-chart__src{color:var(--ink-quiet);text-transform:uppercase}
.mc-blocks{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(24px,3vw,36px)}
.mc-block{background:var(--rich-black);display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.4vw,32px);padding:clamp(18px,2.4vw,28px) clamp(16px,2.2vw,28px);align-items:baseline}
.mc-block__r{font-family:var(--font-mono);font-size:clamp(10px,1.15vw,12px);letter-spacing:.14em;color:var(--gold)}
.mc-block__t{font-family:var(--font-editorial);font-size:clamp(16px,2vw,25px);line-height:1.36;color:#fff}
/* Retorno del checkout: los tres pasos de «qué pasa ahora» sólo se muestran con el cobro ya
   confirmado. Mismo patrón que `.mc-resp` — la hoja no tiene reset de `[hidden]` y `.mc-blocks`
   declara `display`, así que el atributo no alcanzaría para taparlos. */
.mc-ret__pasos{display:none}
.mc-ret__pasos.is-shown{display:flex}
.mc-note{font-family:var(--font-mono);font-size:clamp(9.5px,1.05vw,11px);letter-spacing:.14em;text-transform:uppercase;color:var(--secondary-blue);margin-top:clamp(20px,2.6vw,30px);border-top:1px solid var(--line);padding-top:16px}
.mc-note--split{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;text-transform:none;letter-spacing:.1em;color:var(--ink-quiet)}
/* Cuatro tramos, cuatro columnas. `auto-fit` con mínimo 190px necesita 763px y el contenedor da
   748 —`.mc-wrap` es 860 menos 56 de padding a cada lado—: fallaba por 15px, caían tres arriba y
   el cuarto solo en una segunda fila. Los cortes son explícitos, no `auto-fit`, para que cuatro
   nunca se parta en 3+1: 4 → 2+2 → 1. */
.mc-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(24px,3vw,36px)}
@media (max-width:720px){.mc-tiers{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.mc-tiers{grid-template-columns:1fr}}
.mc-tier{background:var(--rich-black);padding:clamp(20px,2.6vw,30px) clamp(14px,1.8vw,24px);display:flex;flex-direction:column}
.mc-tier--now{background:var(--surface)}
.mc-tier__tag{font-family:var(--font-mono);font-size:clamp(8.5px,.95vw,10px);letter-spacing:.18em;text-transform:uppercase;color:var(--secondary-blue)}
.mc-tier--now .mc-tier__tag{color:var(--gold)}
/* La moneda pasa a su propia línea, en mono, como cualquier otro rótulo. En la misma línea que la
   cifra se comía sesenta píxeles de una columna que ahora mide 186, y era lo que impedía agrandar
   el número. Separada, la cifra manda y el rótulo acompaña. */
.mc-tier__cur{display:block;font-family:var(--font-mono);font-size:clamp(8.5px,.95vw,10px);letter-spacing:.18em;color:var(--secondary-blue);margin-bottom:6px}
.mc-tier__price{font-family:var(--font-editorial);font-size:clamp(22px,2.8vw,34px);line-height:1;color:#fff;margin-top:14px}
/* El vigente se lee más grande que los demás: es el único que esta persona todavía puede pagar. */
.mc-tier--now .mc-tier__price{color:var(--gold);font-size:clamp(36px,4.8vw,58px)}
.mc-tier--now .mc-tier__cur{color:var(--gold)}
.mc-tier__win{font-family:var(--font-mono);font-size:clamp(9px,1vw,10.5px);line-height:1.6;color:var(--secondary-blue);margin-top:12px}
.mc-tier__state{font-family:var(--font-mono);font-size:clamp(9px,1vw,10.5px);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-quiet);margin-top:clamp(14px,1.8vw,20px);border-top:1px solid var(--line-soft);padding-top:12px}
.mc-tier--now .mc-tier__state{color:var(--gold)}
/* El tramo vencido se muestra como una pérdida, no como un dato apagado: el precio va tachado y
   el rótulo se lee a plena luz. Si se difumina entero, deja de doler y deja de servir. */
.mc-tier--past .mc-tier__tag{color:var(--ink-quiet)}
.mc-tier--past .mc-tier__price{color:var(--ink-quiet);text-decoration:line-through;text-decoration-thickness:2px}
.mc-tier--past .mc-tier__win{color:var(--ink-quiet)}
.mc-tier--past .mc-tier__state{color:var(--light-neutral)}
.mc-turn{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.8vw,34px)}
.mc-form{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,26px);margin-top:clamp(24px,3vw,36px);max-width:540px}
.mc-fld{display:flex;flex-direction:column;gap:8px}
.mc-fld label{font-family:var(--font-mono);font-size:clamp(9px,1vw,10.5px);letter-spacing:.16em;text-transform:uppercase;color:var(--secondary-blue)}
.mc-input{border:1px solid rgba(255,255,255,.28);background:var(--rich-black);padding:14px 15px;font-family:var(--font-mono);font-size:clamp(12px,1.4vw,14px);color:var(--evidence-ink);outline:none}
.mc-input:focus{border-color:var(--gold)}
.mc-toggle{display:flex;gap:1px;background:rgba(255,255,255,.28);border:1px solid rgba(255,255,255,.28);width:fit-content}
.mc-toggle label{background:var(--rich-black);padding:12px 26px;font-family:var(--font-mono);font-size:clamp(12px,1.4vw,14px);color:var(--evidence-ink);cursor:pointer;display:flex;align-items:center;gap:6px}
.mc-consent-lead{font-family:var(--font-editorial);font-size:clamp(19px,2.5vw,30px);line-height:1.36;color:var(--evidence-ink);margin:clamp(12px,1.6vw,20px) 0 0}
.mc-priv{font-size:clamp(12px,1.35vw,14px);line-height:1.8;color:var(--secondary-blue);margin:0;text-wrap:pretty}
.mc-check{display:flex;gap:14px;align-items:flex-start;cursor:pointer}
.mc-check input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--gold)}
.mc-check span{font-size:clamp(11.5px,1.3vw,13.5px);line-height:1.65;color:var(--evidence-ink)}
.mc-check a{color:var(--gold)}.mc-check b{color:var(--secondary-blue);font-weight:400}
.mc-pay{background:var(--gold);color:var(--rich-black);text-align:center;padding:clamp(16px,2vw,20px) 0;font-family:var(--font-body);font-weight:600;font-size:clamp(11px,1.25vw,13px);letter-spacing:.1em;text-transform:uppercase;border:0;cursor:pointer;transition:background .15s}
.mc-pay:hover{background:#fff}
.mc-pay__note{font-family:var(--font-mono);font-size:clamp(9px,1vw,10.5px);letter-spacing:.08em;color:var(--ink-quiet);margin-top:-8px}
.mc-msg{font-family:var(--font-mono);font-size:12px;color:var(--secondary-blue);min-height:16px;margin:0}
/* El error se distingue por hairline y contraste, no por emoji ni por rojo: el rojo está
   reservado a la cifra de estado del FNA. */
.mc-msg--err{color:var(--light-neutral);border-left:2px solid var(--gold);padding-left:10px}
.mc-partner{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--line);padding-top:clamp(24px,3vw,36px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(16px,2.4vw,32px)}
.mc-partner__k{font-family:var(--font-mono);font-weight:600;font-size:clamp(12px,1.4vw,16px);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.mc-partner__t{font-size:clamp(15px,1.9vw,26px);line-height:1.3;color:var(--evidence-ink);margin-top:10px;max-width:34ch;font-family:var(--font-editorial)}
.mc-partner__logo{width:min(250px,60vw);height:auto;display:block;flex:none}
/* Revelación progresiva (chat) + música + opciones interactivas */
.mc-anim .mc-reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease-out,transform .55s ease-out}
.mc-anim .mc-reveal.is-in{opacity:1;transform:none}
.mc-mute{position:fixed;bottom:clamp(14px,2.4vw,24px);right:clamp(14px,2.4vw,24px);z-index:30;display:flex;align-items:flex-end;gap:3px;height:18px;padding:9px;background:rgba(11,11,15,.55);border:1px solid rgba(143,172,197,.28);cursor:pointer;transition:border-color .15s;backdrop-filter:none}
.mc-mute:hover{border-color:var(--gold)}
.mc-mute i{width:3px;height:5px;background:var(--secondary-blue);display:block;transition:height .15s}
.mc-mute.is-playing i{background:var(--gold);animation:mceq 1s ease-in-out infinite}
.mc-mute.is-playing i:nth-child(2){animation-delay:.15s}
.mc-mute.is-playing i:nth-child(3){animation-delay:.3s}
@keyframes mceq{0%,100%{height:4px}50%{height:16px}}
/* Bio · "La casa" (Fortüna) */
.bio-house{background:#0a1f45;color:#fff;border-top:2px solid var(--gold-deep);display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(20px,3vw,44px);align-items:center;padding:clamp(24px,3vw,40px) clamp(20px,2.6vw,34px)}
.bio-house__k{font-family:var(--font-mono);font-weight:600;font-size:clamp(12px,1.4vw,16px);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.bio-house__t{font-family:var(--font-editorial);font-size:clamp(19px,2.3vw,34px);line-height:1.28;color:#fff;margin-top:clamp(12px,1.6vw,18px);max-width:26ch}
.bio-house__p{font-size:clamp(11.5px,1.25vw,13px);line-height:1.8;color:rgba(255,255,255,.62);margin:clamp(13px,1.6vw,18px) 0 0;max-width:46ch}
.bio-house__logo{width:min(300px,70vw);height:auto;display:block;justify-self:end}

/* Flyer del inicio (diseño "Flyer Codigo del Empresario v2") — panel lateral que entra del lado, lento */
.flyer__col{min-width:0;display:flex;flex-direction:column}
.flyer__k{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);padding-right:26px}
.flyer__t{font-family:var(--font-editorial);font-weight:600;font-size:clamp(28px,6.5vw,40px);line-height:.95;letter-spacing:-.022em;color:#fff;margin:14px 0 0;text-wrap:balance}
.flyer__s{font-family:var(--font-editorial);font-style:italic;font-size:clamp(15px,3.4vw,18px);line-height:1.3;color:var(--gold);margin:16px 0 0}
.flyer__lead{font-family:var(--font-mono);font-size:11px;line-height:1.7;color:var(--secondary-blue);margin:16px 0 0}
.flyer__stats{border-top:1px solid rgba(255,255,255,.18);margin-top:22px;padding-top:18px}
.flyer__stats-h{display:flex;flex-direction:column;gap:5px;font-family:var(--font-mono)}
.flyer__stats-h span:first-child{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--secondary-blue)}
.flyer__src{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-quiet)}
.flyer__bars{display:grid;grid-template-columns:84px 1fr;gap:9px 14px;align-items:center;margin-top:16px}
.flyer__bl{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--secondary-blue)}
.flyer__bar{display:flex;height:24px;background:rgba(255,255,255,.12);align-items:stretch}
.flyer__seg{background:var(--gold);min-width:3px;display:flex;align-items:center}
.flyer__seg--fill{padding-left:10px}
.flyer__seg--fill b{font-family:var(--font-mono);font-size:11px;color:var(--rich-black)}
.flyer__bt{flex:1;display:flex;align-items:center;gap:8px;padding-left:10px;font-family:var(--font-mono);font-size:11px;color:var(--evidence-ink)}
.flyer__bt b{color:var(--gold);font-weight:600}
.flyer__quote{font-family:var(--font-editorial);font-style:italic;font-size:15px;line-height:1.4;color:#fff;margin-top:18px}
.flyer__meta{display:flex;flex-wrap:wrap;gap:14px 20px;margin-top:22px;border-top:1px solid rgba(255,255,255,.18);padding-top:18px}
.flyer__meta>div{display:flex;flex-direction:column;gap:7px}
.flyer__ml{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(233,234,236,.55)}
.flyer__mv{font-family:var(--font-mono);font-size:12px;color:#fff}
.flyer__mv--gold{color:var(--gold)}
.flyer__cta{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;background:var(--gold);color:var(--rich-black);padding:9px 16px;margin-top:20px;font-family:var(--font-mono);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;transition:background .15s}
.flyer__cta:hover{background:#fff}
.flyer__cta span:first-child{font-family:var(--font-mono);font-size:11px}
.flyer__url{display:none}
.flyer__partner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;border-top:1px solid rgba(255,255,255,.18);padding-top:14px}
.flyer__pk{font-family:var(--font-mono);font-weight:600;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.flyer__partner img{width:clamp(88px,34%,110px);height:auto;display:block;flex:none}
.mc-opt{width:100%;text-align:left;border:0;cursor:pointer;font-family:var(--font-mono)}
.mc-opt.is-picked{background:var(--surface);border-left:2px solid var(--gold);color:#fff}
.mc-resp{display:none;margin-top:clamp(18px,2.2vw,28px);border-left:2px solid var(--gold);padding-left:clamp(14px,1.8vw,20px)}
.mc-resp.is-shown{display:block}

/* ---- Bio (Sobre Jaime) ---- */
.bio-hero{background:var(--evidence-bg);color:var(--evidence-ink);display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.bio-hero__art{min-height:clamp(320px,45vw,600px);background:var(--evidence-surface);display:flex;align-items:center;justify-content:center}
.bio-hero__art img{width:100%;height:100%;object-fit:cover;display:block}
.bio-hero__mono{font-family:var(--font-editorial);font-size:clamp(72px,12vw,160px);color:rgba(250,208,44,.22)}
.bio-hero__text{display:flex;flex-direction:column;justify-content:center;padding:clamp(36px,5.5vw,76px) clamp(20px,4vw,60px)}
.bio-hero__eyebrow{font-family:var(--font-mono);font-size:clamp(9.5px,1.1vw,11px);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.bio-hero__title{font-family:var(--font-editorial);font-weight:500;font-size:clamp(34px,5.6vw,70px);line-height:1.02;letter-spacing:-.02em;color:#fff;margin:clamp(20px,2.8vw,34px) 0 0;max-width:16ch;text-wrap:balance}
.bio-hero__sub{font-size:clamp(14px,1.6vw,18px);line-height:1.75;color:var(--blue);margin:clamp(18px,2.4vw,28px) 0 0;max-width:42ch}
.bio-act{padding:clamp(44px,6vw,90px) 0 0}
.bio-act__title{font-family:var(--font-editorial);font-weight:500;font-size:clamp(26px,3.8vw,50px);line-height:1.1;letter-spacing:-.015em;margin:clamp(22px,2.8vw,34px) 0 0;max-width:22ch;text-wrap:balance}
.bio-act__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(20px,3vw,48px);margin-top:clamp(22px,2.8vw,34px)}
.bio-col{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px)}
.bio-col p{font-size:clamp(14px,1.5vw,16.5px);line-height:1.85;color:var(--ink-soft);margin:0}
.bio-side{background:var(--evidence-surface);color:var(--evidence-ink);padding:clamp(22px,2.8vw,34px) clamp(18px,2.4vw,30px);align-self:start}
.bio-side--dark{background:var(--evidence-bg)}
.bio-side__line{font-size:clamp(12.5px,1.35vw,14px);line-height:1.7;color:var(--blue);border-top:1px solid rgba(255,255,255,.16);padding:clamp(10px,1.3vw,13px) 0}
.bio-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:rgba(255,255,255,.16);border:1px solid var(--line);margin-top:clamp(26px,3vw,40px)}
.bio-fig{background:var(--evidence-bg);padding:clamp(20px,2.6vw,30px) clamp(16px,2vw,24px)}
.bio-fig__val{font-family:var(--font-editorial);font-size:clamp(30px,4vw,52px);line-height:1;color:#fff}
.bio-fig__val--gold{color:var(--gold)}
.bio-fig__label{font-family:var(--font-mono);font-size:clamp(9px,1vw,10.5px);line-height:1.65;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-top:clamp(12px,1.5vw,16px)}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-top:0}
.svc{background:var(--guide-bg);padding:clamp(22px,2.8vw,32px) clamp(18px,2.2vw,26px)}
.svc__tag{font-family:var(--font-mono);font-size:clamp(9px,1vw,10.5px);letter-spacing:.18em;text-transform:uppercase;color:rgba(37,42,68,.7)}
.svc__title{font-family:var(--font-editorial);font-size:clamp(18px,2.1vw,24px);line-height:1.25;margin-top:clamp(11px,1.4vw,15px);max-width:20ch}
.svc__text{font-size:clamp(12.5px,1.35vw,14px);line-height:1.75;color:var(--guide-ink-soft);margin:clamp(11px,1.4vw,15px) 0 0;max-width:36ch}

/* ---- Home (Advisory) ---- */
.hero{min-height:clamp(560px,80vh,760px);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(52px,8vw,110px) clamp(20px,5vw,84px) clamp(40px,6vw,76px);border-bottom:1px solid var(--line)}
.hero__eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.hero__title{font-family:var(--font-editorial);font-weight:500;font-size:clamp(32px,6vw,74px);line-height:1.03;letter-spacing:-.02em;color:#fff;margin:clamp(22px,3.2vw,42px) 0 0;max-width:19ch;text-wrap:balance}
.hero__lead{font-size:clamp(16px,1.6vw,19px);line-height:1.7;color:var(--blue);margin:clamp(20px,2.6vw,32px) 0 0;max-width:52ch}
.hero__ctas{display:flex;flex-wrap:wrap;gap:clamp(10px,1.4vw,16px);margin-top:clamp(28px,3.6vw,44px)}
.commit-row{background:var(--surface);display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(12px,2vw,32px);padding:clamp(20px,2.6vw,30px) clamp(16px,2.2vw,28px)}
.commit-tag{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
/* El peso va explícito porque Playfair se carga en 500 y 600: como <div> heredaba 400 y el
   navegador servía el 500; como <h3> heredaría 700 y serviría el 600, que es otra letra. */
.commit-title{font-family:var(--font-editorial);font-size:clamp(18px,2.2vw,26px);line-height:1.25;color:#fff;margin:10px 0 0;font-weight:500;max-width:20ch;text-wrap:balance}
.commit-text{font-size:clamp(15px,1.35vw,16px);line-height:1.75;color:var(--blue);max-width:46ch}
.price-box{background:var(--evidence-bg);border:1px solid rgba(250,208,44,.35);padding:clamp(26px,3.4vw,44px) clamp(20px,2.8vw,40px);display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(20px,3vw,44px);align-items:center}
.price-figure{font-family:var(--font-editorial);font-weight:600;font-size:clamp(48px,7.5vw,96px);line-height:.92;color:var(--gold);margin-top:14px}
.price-meta{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--blue);margin-top:12px}
.price-list{display:flex;flex-direction:column;gap:clamp(9px,1.1vw,12px)}
.price-item{font-size:clamp(15px,1.35vw,16px);line-height:1.6;color:var(--evidence-ink);border-top:1px solid rgba(255,255,255,.16);padding-top:clamp(9px,1.1vw,12px)}
.case-row{border-bottom:1px solid var(--line);padding:clamp(24px,3vw,40px) 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(16px,2.4vw,40px)}
.case-who{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);line-height:1.6;margin:0;font-weight:400}
.case-meta{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-quiet);line-height:1.6;margin-top:6px}
.case-quote{font-family:var(--font-editorial);font-size:clamp(20px,2.1vw,26px);line-height:1.45;color:#fff;margin:0;max-width:38ch;text-wrap:pretty}
.case-note{font-size:clamp(15px,1.3vw,16px);line-height:1.75;color:var(--blue);margin:clamp(12px,1.6vw,18px) 0 0;max-width:52ch;text-wrap:pretty}
.agendar-box{background:var(--surface);padding:clamp(28px,3.6vw,48px) clamp(20px,2.8vw,40px)}
.agendar-title{font-family:var(--font-editorial);font-size:clamp(22px,3vw,38px);line-height:1.15;color:#fff;margin:0;font-weight:500;max-width:26ch;text-wrap:balance}
.agendar-form{margin-top:clamp(24px,3vw,34px);display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;max-width:640px}
.field{width:100%;padding:14px 16px;background:var(--bg-input,#1f2238);border:1px solid rgba(255,255,255,.20);color:var(--evidence-ink);font-family:inherit;font-size:14px}
.field:focus{outline:2px solid var(--gold);outline-offset:0}
.field::placeholder{color:#8a93a0}
.disclaimer{font-family:var(--font-mono);font-size:12px;line-height:1.8;color:var(--blue);margin-top:14px;border-top:1px solid rgba(255,255,255,.18);padding-top:clamp(14px,1.8vw,20px);max-width:60ch}

/* ---- Artículo (post del blog) ---- */
.article{max-width:792px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.article__head{padding-top:clamp(40px,6vw,64px)}
.article__title{font-family:var(--font-editorial);font-weight:600;font-size:clamp(33px,6vw,56px);line-height:1.03;letter-spacing:-.02em;margin:24px 0 0;max-width:20ch}
.article__lead{font-size:clamp(16px,2vw,19px);line-height:1.6;font-weight:500;color:var(--ink-soft);margin:22px 0 0;max-width:46ch}
.article__body{padding-top:clamp(28px,4vw,44px);margin-top:clamp(24px,3vw,36px);border-top:1px solid var(--line-soft)}
.prose{max-width:660px}
.prose h1{font-family:var(--font-editorial);font-weight:600;font-size:clamp(30px,5vw,48px);line-height:1.05;letter-spacing:-.02em;color:var(--ink);margin:0 0 24px}
.prose p{font-size:17px;line-height:1.85;color:var(--ink-soft);margin:0 0 26px}
.prose--legal h2{font-size:clamp(19px,2.4vw,26px);margin-top:36px}
.prose--legal ul{color:var(--ink-soft);line-height:1.8;font-size:16px;padding-left:22px;margin:0 0 22px}
.prose h2,.prose h3{font-family:var(--font-editorial);color:var(--ink);line-height:1.2;margin:8px 0 12px}
.prose a{color:var(--ink);border-bottom:1px solid var(--gold)}
/* ---- Tablas dentro de un artículo ----------------------------------------------------------
   La prosa mide 660px y una tabla de tasas no cabe en un teléfono. El contenedor desplaza; la
   tabla NO se encoge por debajo de lo que sus celdas necesitan, porque una tabla comprimida hasta
   ser ilegible es peor que una que se desplaza. Por eso `min-width:100%` y no `width:100%`.
   Geometría F8: cuadrada, sin sombras, separada por hairlines. Y las celdas SÍ ajustan de línea
   —al revés que `.data-table`, que es de panel y lleva `nowrap`—: en una comparación de tasas el
   contenido es prosa corta, y `nowrap` la empuja fuera de la pantalla sin necesidad. */
.prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-collapse:collapse;min-width:100%;margin:0 0 26px;font-size:15px;line-height:1.5}
.prose table caption{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);text-align:left;padding-bottom:10px}
.prose th{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--ink);text-align:left;padding:10px 14px 10px 0;
  border-bottom:1px solid var(--line);vertical-align:bottom}
.prose td{color:var(--ink-soft);padding:10px 14px 10px 0;border-top:1px solid var(--line-soft);
  vertical-align:top}
.prose th:last-child,.prose td:last-child{padding-right:0}
/* Las cifras se comparan en columna: alineadas a la derecha y con cifras de ancho fijo, los
   dígitos caen unos sobre otros y la diferencia se ve sin leer. */
.prose td.num,.prose th.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
/* La nota al pie y la lista de fuentes: más chicas que la prosa, porque se leen después. */
.prose sup{font-size:.7em;line-height:0;vertical-align:super}
.prose .fuentes{font-size:14px;line-height:1.7;color:var(--ink-soft);
  border-top:1px solid var(--line-soft);margin-top:34px;padding-top:18px}
.prose .fuentes li{margin-bottom:8px}
.prose .descargo{font-size:13.5px;line-height:1.65;color:var(--ink-soft);
  border-left:2px solid var(--line);padding-left:16px;margin-top:26px}

.pull-quote{border-left:3px solid var(--gold);padding:6px 0 6px 28px;margin:34px 0}
.pull-quote p{font-family:var(--font-editorial);font-style:italic;font-size:clamp(22px,3vw,29px);line-height:1.35;color:var(--ink);margin:0;max-width:26ch}
.author{border-top:1px solid var(--line-soft);margin-top:clamp(32px,4vw,44px);padding-top:24px;display:flex;align-items:center;gap:16px}
.author img{height:26px;width:auto;display:block}
.author__name{font-family:var(--font-editorial);font-size:19px;line-height:1.2;color:var(--ink)}
.author__role{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:5px}

/* ---- Privacidad (encuadres del mockup) ---- */
.priv-head{padding-top:clamp(40px,6vw,64px)}
.priv-head h1{font-family:var(--font-editorial);font-weight:600;font-size:clamp(30px,5vw,50px);line-height:1.05;letter-spacing:-.02em;color:var(--ink);margin:0}
.priv-date{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--ink-soft);margin-top:14px}
.priv-intro{font-size:clamp(15px,1.7vw,18px);line-height:1.8;color:var(--ink-soft);margin:22px 0 clamp(16px,2vw,28px);max-width:64ch}
.priv-sec{display:grid;grid-template-columns:1fr;gap:clamp(10px,1.6vw,20px);padding:clamp(24px,3vw,36px) 0;border-top:1px solid var(--line-soft)}
.priv-sec__h{font-family:var(--font-editorial);font-size:clamp(19px,2.2vw,26px);line-height:1.22;color:var(--ink);margin:0;text-wrap:balance}
.priv-sec__b p{font-size:16px;line-height:1.8;color:var(--ink-soft);margin:0 0 16px;max-width:62ch}
.priv-sec__b p:last-child{margin-bottom:0}
.priv-sec--accent{border-left:3px solid var(--gold);padding-left:clamp(16px,2vw,26px)}
@media(min-width:760px){.priv-sec{grid-template-columns:minmax(180px,1fr) 2.4fr;gap:clamp(24px,3.5vw,48px)}}

/* ---- Portal del cliente (dashboard, mockup Portal Page) ---- */
.client-avatar{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:var(--gold);color:var(--evidence-bg);font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.04em;flex:none}
/* Menú de cuenta del portal — <details> sin JS. Cuadrado y sin sombra: el borde es hairline. */
.client-avmenu{position:relative;flex:none}
.client-avmenu>summary{cursor:pointer;list-style:none}
.client-avmenu>summary::-webkit-details-marker{display:none}
.client-avmenu>summary::marker{content:''}
.client-avmenu>summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.client-avmenu__panel{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:250px;background:var(--evidence-bg);color:var(--evidence-ink);border:1px solid var(--evidence-surface);padding:var(--s2) 0}
.client-avmenu__hd{padding:var(--s3) var(--s4) var(--s2);border-bottom:1px solid var(--evidence-surface)}
.client-avmenu__hd b{display:block;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--evidence-ink)}
.client-avmenu__hd em{display:block;font-family:var(--font-mono);font-size:10.5px;font-style:normal;color:var(--blue);margin-top:2px;word-break:break-all}
.client-avmenu__sec{padding:var(--s3) var(--s4) var(--s1);font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.client-avmenu__a{display:block;padding:var(--s2) var(--s4);font-family:var(--font-body);font-size:13px;color:var(--evidence-ink);text-decoration:none;transition:background .15s linear}
.client-avmenu__a:hover{background:var(--evidence-surface)}
.client-avmenu__div{height:1px;background:var(--evidence-surface);margin:var(--s2) 0}
.portal-hero{padding:clamp(32px,4vw,52px) 0 0}
.portal-hero__eyebrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.portal-hero__h1{font-family:var(--font-editorial);font-weight:600;font-size:clamp(30px,4.6vw,48px);line-height:1.05;letter-spacing:-.02em;color:var(--ink);margin:14px 0 0}
.portal-hero__sub{font-size:clamp(15px,1.6vw,18px);line-height:1.7;color:var(--ink-soft);margin:14px 0 0;max-width:52ch}
.fna-card{background:var(--evidence-bg);color:var(--evidence-ink);padding:clamp(26px,3.4vw,40px) clamp(22px,3vw,36px);margin-top:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:clamp(14px,1.8vw,20px)}
.fna-card__eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
/* `--evidence-ink` y no `#fff`: su tarjeta se pinta con `--evidence-bg`, y en una instancia con
   configuración propia ese fondo es papel. El blanco escrito a mano quedaba invisible sobre él.
   En la del proveedor el token vale #e9eaec, así que ahí no cambia nada. */
.fna-card__title{font-family:var(--font-editorial);font-size:clamp(24px,3.2vw,40px);line-height:1.15;color:var(--evidence-ink);max-width:22ch}
.fna-card__meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--blue)}
.fna-card__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
/* Badge (Jolarte\View\Ui\Badge) — el rótulo corto que dice un estado al lado de lo que califica.
   Cuatro tonos, que son la jerarquía F8 y no un semáforo: gold = lo accionable, blue = jerarquía
   media, muted = contexto, danger = lo genuinamente mal. El componente trae estas mismas reglas en
   su ::css() para las pantallas del panel, que no cargan esta hoja. */
.ui-badge{display:inline-block;padding:3px 8px;border:1px solid;font-family:var(--font-mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;line-height:1.4}
.ui-badge.is-gold{background:transparent;color:var(--gold);border-color:var(--gold)}
.ui-badge.is-blue{background:transparent;color:var(--blue);border-color:var(--blue)}
.ui-badge.is-muted{background:transparent;color:var(--blue);border-color:rgba(var(--blue-rgb),.35);opacity:.8}
.ui-badge.is-danger{background:transparent;color:var(--deficit);border-color:var(--deficit)}
.badge-ok{display:inline-block;background:var(--gold);color:var(--evidence-bg);font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px}
.portal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(14px,1.8vw,20px)}
.portal-card{background:var(--guide-bg);padding:clamp(20px,2.4vw,28px) clamp(18px,2.2vw,24px);display:flex;flex-direction:column;gap:8px}
.portal-card__tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.portal-card__when{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--ink-soft)}
.portal-card__text{font-size:14.5px;line-height:1.6;color:var(--guide-ink);margin-top:4px}
.goal-bar{height:6px;background:rgba(37,42,68,.14);margin-top:10px;overflow:hidden}
.goal-bar>i{display:block;height:100%;background:var(--gold)}
.portal-empty{padding:clamp(20px,2.6vw,30px);border:1px dashed var(--line);color:var(--ink-soft);font-size:14px;margin-top:clamp(14px,1.8vw,20px)}

/* ---- Documentos (subida SafeAI) ---- */
.doc{max-width:600px;margin:0 auto}
.doc-form{margin-top:clamp(20px,2.6vw,30px)}
.doc-drop{display:block;border:1px dashed var(--line);padding:clamp(28px,4vw,42px) 20px;text-align:center;cursor:pointer;background:transparent;transition:border-color .18s,background .18s}
.doc-drop:hover,.doc-drop.over{border-color:var(--gold);background:rgba(250,208,44,.06)}
.doc-drop__main{font-size:15px;line-height:1.6;color:var(--ink)}
.doc-drop__main b{color:var(--gold);font-weight:600}
.doc-muted{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--ink-soft);margin-top:10px}
.doc-lang{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--ink)}
.doc-lang label{cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.doc-lang .doc-muted{margin-top:0}
.doc-note{font-size:12.5px;line-height:1.65;color:var(--ink-soft);background:rgba(143,172,197,.10);border-left:2px solid var(--blue);padding:12px 14px;margin-top:16px}
.doc-consent{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--ink);margin-top:14px;cursor:pointer}
.doc-consent input{margin-top:3px}
.doc-consent a{color:var(--blue);text-decoration:underline}
.doc-result{margin-top:18px}
.doc-card{background:var(--surface);color:var(--evidence-ink);border:1px solid var(--line-soft);padding:18px}
.doc-card--warn{border-color:var(--gold);background:rgba(250,208,44,.06);color:var(--ink)}
.doc-badge{display:inline-block;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--evidence-bg);background:var(--gold);padding:3px 10px}
.doc-sug{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft);font-family:var(--font-mono);font-size:14px}
.doc-sug__campo{color:var(--blue);text-transform:uppercase;font-size:11px;letter-spacing:.06em}
.doc-sug__val{color:var(--gold);font-weight:600}
.doc-card--warn .doc-muted{color:var(--ink-soft)}
/* Menú guiado de documentos */
.docmenu{max-width:680px;margin:0 auto}
.docsection{margin-top:clamp(22px,3vw,38px)}
.docsection summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px}
.docsection summary::-webkit-details-marker{display:none}
.docsection summary::after{content:'+';font-family:var(--font-mono);color:var(--ink-soft);margin-left:auto}
.docsection[open] summary::after{content:'–'}
.docitem{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line)}
.docitem__body{flex:1;min-width:0}
.docitem__name{font-family:var(--font-editorial);font-size:17px;color:var(--ink);line-height:1.2}
.docitem__hint{font-size:13px;color:var(--ink-soft);margin-top:4px;line-height:1.5}
.docitem__status{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin-top:8px;color:var(--ink-soft)}
.docitem__status.done{color:var(--gold)}
.docitem__msg{font-size:12px;color:var(--ink-soft);margin-top:6px;line-height:1.5}
.docitem__action{flex-shrink:0}
.docitem__btn{display:inline-block;border:1px solid var(--gold);color:var(--ink);background:transparent;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:9px 16px;cursor:pointer;transition:background .15s,color .15s}
.docitem__btn:hover:not(:disabled){background:var(--gold);color:var(--rich-black)}
.docitem__btn:disabled{opacity:.4;cursor:not-allowed}

/* ---- Autorización / disclosure (firma) ---- */
.sign{max-width:600px;margin:0 auto}
.sign-card{background:var(--surface);color:var(--evidence-ink);border:1px solid var(--line-soft);padding:clamp(18px,2.2vw,24px);margin-top:16px}
.sign-card h2{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.sign-card p{font-size:14px;line-height:1.65;color:var(--evidence-ink)}
.sign-card ul{margin:10px 0 0 18px;font-size:14px;line-height:1.6;color:var(--evidence-ink)}
.sign-card li{margin-bottom:7px}
.sign-accept{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5;color:var(--ink);margin:18px 0 14px;cursor:pointer}
.sign-accept input{margin-top:3px;transform:scale(1.25)}
.sign-msg{margin-top:10px;font-family:var(--font-mono);font-size:12px;color:var(--ink-soft)}
.sign-done{display:none;border:1px solid var(--gold);background:rgba(250,208,44,.07);padding:16px;font-size:14px;line-height:1.55;color:var(--ink);margin-top:16px}
.sign-done.show{display:block}
.sign-done b{color:var(--gold)}

/* ---- Perfil (cuenta: datos, contraseña, postventa, sesión) ---- */
.prof{max-width:760px;margin:0 auto}
.prof-sec{background:var(--surface);color:var(--evidence-ink);border:1px solid var(--line-soft);border-left:3px solid var(--gold);padding:clamp(16px,2vw,22px);margin-top:18px}
.prof-sec--plain{border-left:1px solid var(--line-soft)}
.prof-sec--alert{border:1px solid var(--gold);border-left:3px solid var(--gold);background:rgba(250,208,44,.06)}
.prof-sec__h{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--secondary-blue);margin:0 0 14px}
.prof-sec__lead{font-size:13px;color:var(--evidence-ink);line-height:1.5;margin-bottom:14px}
.prof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.prof-grid--pw{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.prof-full{grid-column:1/-1}
.prof-label{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--secondary-blue);margin-bottom:5px}
.prof-note{font-family:var(--font-mono);font-size:10px;color:var(--ink-soft);margin-top:4px;font-style:italic}
.prof-hint{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);margin-top:8px}
.prof-actions{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.prof-msg{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft)}
.prof-msg.ok{color:var(--gold)}
.prof-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:18px}
.prof-logout{display:inline-block;background:transparent;color:var(--ink-soft);border:1px solid var(--line);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:11px 20px;cursor:pointer;transition:color .15s,border-color .15s}
.prof-logout:hover{color:var(--gold);border-color:var(--gold)}
/* input deshabilitado (perfil: nombre/correo los cambia el asesor) */
.field[disabled]{color:var(--ink-soft);cursor:not-allowed;border-color:var(--line-soft)}

/* ---- Mis datos (acceso PIPEDA — volcado por bloques) ---- */
.mydata{max-width:900px;margin:0 auto}
.data-intro{background:rgba(143,172,197,.10);border-left:2px solid var(--secondary-blue);padding:14px 18px;margin-top:clamp(18px,2.2vw,26px);font-size:13px;line-height:1.6;color:var(--ink-soft)}
.data-card{background:var(--surface);color:var(--evidence-ink);border:1px solid var(--line-soft);padding:clamp(16px,2vw,22px);margin-top:18px}
.data-card__h{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--secondary-blue);margin:0 0 10px}
.data-kv{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-top:1px solid var(--line-soft)}
.data-kv__k{color:var(--secondary-blue);font-size:12px}
.data-kv__v{color:var(--evidence-ink);font-size:13px;font-weight:500;text-align:right}
.data-sub{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:18px 0 8px}
.data-list{margin:0;padding:0;list-style:none}
.data-list li{padding:8px 0;border-top:1px solid var(--line-soft);font-size:13px;color:var(--ink-soft)}
.data-list b{color:var(--evidence-ink)}
.data-note{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);margin-top:10px}
.data-note a{color:var(--gold)}
.data-scroll{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:12px}
.data-table th{text-align:left;padding:8px 10px;color:var(--ink-soft);font-family:var(--font-mono);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:10px;border-bottom:1px solid var(--line);white-space:nowrap}
.data-table td{padding:8px 10px;border-top:1px solid var(--line-soft);color:var(--ink);white-space:nowrap}
.data-table tbody tr:nth-child(even){background:var(--row-alt)}
.data-foot{margin-top:26px;font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);text-align:center;line-height:1.7}

/* ---- Transacciones del cliente (cotizaciones, pólizas, reuniones) ---- */
.tx{max-width:960px;margin:0 auto}
.tx-next{background:var(--rich-black);color:var(--evidence-ink);border-left:3px solid var(--gold);padding:clamp(20px,2.6vw,30px) clamp(18px,2.4vw,28px);margin-top:clamp(18px,2.4vw,28px)}
.tx-next__label{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--secondary-blue)}
.tx-next__title{font-family:var(--font-editorial);font-size:clamp(20px,2.6vw,30px);line-height:1.2;color:#fff;margin-top:10px}
.tx-next__sub{font-size:13px;color:var(--evidence-ink);margin-top:8px;line-height:1.6;max-width:60ch}
.tx-next__cta{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap}
.tx-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(14px,1.8vw,20px)}
.tx-item{background:var(--guide-bg);padding:clamp(14px,1.8vw,18px) clamp(14px,1.8vw,20px);display:grid;grid-template-columns:1fr auto;gap:10px 16px;align-items:center}
.tx-item__name{font-size:14.5px;color:var(--guide-ink);line-height:1.4}
.tx-item__meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px}
.tx-item__right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.tx-amt{font-family:var(--font-mono);font-size:14px;color:var(--gold)}
.tx-badge{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;background:rgba(37,42,68,.12);color:var(--guide-ink-soft)}
.tx-badge--ok{background:var(--gold);color:var(--rich-black)}
.tx-mini{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);color:var(--ink);padding:8px 12px;cursor:pointer;background:transparent;transition:border-color .15s,color .15s;text-decoration:none;display:inline-block}
.tx-mini:hover{border-color:var(--gold);color:var(--gold)}
.tx-mini--gold{border-color:var(--gold);color:var(--gold)}

/* ---- FNA del cliente (mockup FNA Cliente) ---- */
.fna{max-width:1160px;margin:0 auto}
.fna-head{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(16px,2.6vw,36px);flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:clamp(16px,2.2vw,26px)}
.fna-head__eyebrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.fna-head__h1{font-family:var(--font-editorial);font-weight:500;font-size:clamp(26px,3.8vw,46px);line-height:1.05;letter-spacing:-.015em;margin:clamp(12px,1.6vw,18px) 0 0;color:var(--ink)}
.fna-dl{display:flex;flex-wrap:wrap;gap:10px}
.fna-dl a{border:1px solid var(--line);color:var(--ink);padding:clamp(11px,1.4vw,14px) clamp(16px,2.2vw,24px);font-family:var(--font-mono);font-weight:600;font-size:11px;letter-spacing:.09em;text-transform:uppercase;transition:border-color .15s,color .15s}
.fna-dl a:hover{border-color:var(--gold);color:var(--gold)}
.fna-dl a[aria-disabled=true]{opacity:.5;pointer-events:none}
.fna-savebar{background:var(--surface);color:var(--evidence-ink);padding:clamp(16px,2vw,22px) clamp(16px,2vw,24px);margin-top:clamp(16px,2vw,24px);display:flex;justify-content:space-between;align-items:center;gap:clamp(14px,2vw,28px);flex-wrap:wrap}
.fna-savebar__dot{width:9px;height:9px;background:var(--gold);flex:none}
.fna-savebar__txt{font-size:13px;line-height:1.6;max-width:62ch;display:flex;align-items:center;gap:13px}
.fna-savebar__meta{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--secondary-blue);flex:none}
.fna-tabs{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(18px,2.4vw,28px)}
.fna-tab{padding:clamp(11px,1.4vw,14px) clamp(12px,1.6vw,18px);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;flex:1 1 auto;text-align:center;background:var(--guide-bg);color:var(--guide-ink-soft);transition:color .15s linear}
a.fna-tab:hover{color:var(--ink)}
.fna-tab--active,a.fna-tab--active:hover{background:var(--surface);color:var(--evidence-ink)}
.fna-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(16px,2.2vw,28px);margin-top:clamp(20px,2.6vw,32px);align-items:start}
.fna-person{border:1px solid var(--line);background:var(--guide-bg)}
.fna-person__head{border-bottom:1px solid var(--line);padding:clamp(13px,1.7vw,18px) clamp(14px,1.8vw,20px);display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.fna-person__role{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.fna-person__name{font-family:var(--font-editorial);font-size:19px;color:var(--ink)}
.fna-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(12px,1.6vw,18px);padding:clamp(14px,1.8vw,20px)}
.fna-block{margin-top:clamp(24px,3vw,42px)}
.fna-block__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:11px}
.fna-block__eyebrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.fna-block__meta{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-soft)}
.fna-block__fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(14px,1.8vw,24px);margin-top:clamp(16px,2vw,24px)}
.fna-field{display:flex;flex-direction:column;gap:7px}
.fna-field__k{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.fna-field__v{border:1px solid var(--line-soft);background:var(--sheet);padding:clamp(11px,1.4vw,14px);font-family:var(--font-mono);font-size:14px;color:var(--guide-ink)}
.fna-field--calc .fna-field__v{background:rgba(37,42,68,.08);color:var(--guide-ink-soft);border-color:rgba(37,42,68,.22)}
.fna-field__hint{font-family:var(--font-mono);font-size:10px;line-height:1.7;color:var(--ink-soft)}
.fna-status{background:var(--rich-black);color:var(--evidence-ink);padding:clamp(18px,2.4vw,28px) clamp(16px,2.2vw,26px);margin-top:clamp(16px,2vw,24px);display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(14px,2vw,30px);flex-wrap:wrap}
.fna-status__label{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--secondary-blue)}
.fna-status__main{font-family:var(--font-editorial);font-size:clamp(24px,3.2vw,42px);line-height:1.05;color:var(--evidence-ink);margin-top:clamp(10px,1.3vw,14px)}
.fna-status__second{font-family:var(--font-editorial);font-size:clamp(22px,2.6vw,32px);line-height:1.2;margin-top:clamp(8px,1.1vw,12px);color:var(--gold)}
.fna-status__second--deficit{color:var(--deficit)}
.fna-status__src{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-quiet);flex:none;text-align:right;line-height:1.8}
.fna-empty{border:1px dashed var(--line);background:rgba(37,42,68,.05);padding:clamp(28px,4vw,52px) clamp(20px,3vw,36px);text-align:center;margin-top:clamp(20px,2.6vw,32px)}
.fna-empty__t{font-family:var(--font-editorial);font-size:clamp(20px,2.6vw,30px);line-height:1.2;color:var(--ink)}
.fna-empty__s{font-size:14px;line-height:1.7;color:var(--ink-soft);margin-top:12px;max-width:52ch;margin-left:auto;margin-right:auto}
/* Barra de confirmación del cliente (datos sugeridos por IA) */
.fna-confirm{background:rgba(250,208,44,.12);border:1px solid var(--gold);padding:clamp(14px,1.8vw,20px) clamp(16px,2vw,22px);margin-top:16px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.fna-confirm__txt{font-size:13.5px;line-height:1.6;color:var(--ink);max-width:66ch}
.fna-confirm__btn{border:1px solid var(--gold);background:var(--gold);color:#0B0B0F;font-family:var(--font-mono);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:11px 20px;cursor:pointer;flex:none}
.fna-confirm__btn:hover{background:transparent;color:var(--ink)}
.fna-confirm__btn:disabled{opacity:.5;cursor:default}
.fna-confirm--done{border-color:var(--secondary-blue);background:rgba(143,172,197,.12)}
/* Mis documentos (documentos-primero) */
.fna-docs{margin-top:clamp(28px,3.6vw,48px)}
.fna-docs__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:11px}
.fna-docs__eyebrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.fna-docs__meta{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-soft)}
.fna-drop{border:1px dashed var(--line);background:rgba(37,42,68,.05);padding:clamp(20px,2.6vw,32px);margin-top:16px;text-align:center;display:block}
.fna-drop:hover{border-color:var(--gold)}
.fna-drop__t{font-family:var(--font-editorial);font-size:clamp(17px,2vw,23px);line-height:1.25;color:var(--ink)}
.fna-drop__s{font-size:13px;line-height:1.7;color:var(--ink-soft);margin-top:9px}
.fna-doclist{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:14px}
.fna-doc{background:var(--guide-bg);padding:clamp(13px,1.7vw,18px) clamp(14px,1.8vw,20px);display:grid;grid-template-columns:1fr auto;gap:8px 20px;align-items:center}
.fna-doc__name{font-size:14px;line-height:1.5;color:var(--ink)}
.fna-doc__note{font-family:var(--font-mono);font-size:10.5px;line-height:1.6;color:var(--ink-soft);margin-top:6px}
.fna-doc__state{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;justify-self:end;white-space:nowrap}
.fna-doc__state--up{background:var(--surface);color:var(--evidence-ink)}
.fna-doc__state--ia{background:var(--gold);color:var(--guide-ink)}
.fna-doc__state--pend{border:1px solid var(--line);color:var(--ink)}
.fna-docs__foot{font-family:var(--font-mono);font-size:10.5px;line-height:1.8;color:var(--ink-soft);margin-top:14px}

/* ---- The analysis on the client's page (`ReportOnScreen`) ----
   The printed report's parts and classes (`InformeImpresionCss`), set for a screen in the page's
   mode: a reading measure, room between blocks, figures in the display face, the negative only on a
   deficit's figure. One part at a time once the tab script runs; every part when it does not. */
.fna-report{margin-top:clamp(22px,2.8vw,34px)}
.fna-report--tabs .fna-panel{display:none}
.fna-report--tabs .fna-panel.is-on{display:block}
.fna-report .inf-sec{max-width:880px;margin:0 0 clamp(40px,5vw,64px)}
.fna-report .inf-sec__quien{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px}
.fna-report .inf-sec__quien--sub{margin:clamp(28px,3.4vw,40px) 0 12px;padding-top:14px;border-top:1px solid var(--line)}
.fna-report .inf-sec__h{font-family:var(--font-editorial);font-weight:500;font-size:clamp(24px,3vw,34px);line-height:1.15;color:var(--ink);margin:0;padding-bottom:12px;border-bottom:1px solid var(--ink);text-wrap:balance}
.fna-report .inf-lede{font-size:16px;line-height:1.6;color:var(--ink);margin:16px 0 24px;max-width:68ch;text-wrap:pretty}
.fna-report .inf-p{font-size:14.5px;line-height:1.7;color:var(--ink);margin:0 0 12px;max-width:72ch;text-wrap:pretty}
.fna-report .inf-nota{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin:26px 0 8px}
.fna-report .inf-t,.fna-report .inf-dash,.fna-report .inf-orden,.fna-report .inf-check,.fna-report .inf-donas,.fna-report .inf-cabeza{width:100%;border-collapse:collapse}
.fna-report .inf-t{margin:0 0 12px}
.fna-report .inf-t td{padding:10px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.fna-report .inf-t__k{font-size:14px;line-height:1.5;color:var(--ink);padding-right:16px}
.fna-report .inf-t__v{font-family:var(--font-mono);font-size:13.5px;text-align:right;color:var(--ink);white-space:nowrap}
.fna-report .inf-t__v--texto{font-family:var(--font-body);font-size:14px;white-space:normal}
.fna-report .inf-t__s{font-size:12px;line-height:1.45;color:var(--ink-soft);margin-top:3px}
.fna-report .inf-t__total td{border-top:1px solid var(--ink);border-bottom:0;font-weight:600}
.fna-report .inf-t__destacada .inf-t__v{font-family:var(--font-editorial);font-size:20px;font-weight:600}
.fna-report .inf-cabeza{margin:8px 0}
.fna-report .inf-cabeza td{vertical-align:middle;padding:0}
.fna-report .inf-cabeza__dona{width:176px;padding-right:20px}
.fna-report .inf-cabeza__cifra{border-top:2px solid var(--ink);border-bottom:1px solid var(--line);padding:16px 0 16px 4px}
.fna-report .inf-estado__k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.fna-report .inf-estado__v{font-family:var(--font-editorial);font-weight:600;font-size:clamp(28px,3.6vw,40px);line-height:1.1;color:var(--ink);margin:6px 0}
.fna-report .inf-estado__v--deficit,.fna-report .inf-deficit{color:var(--deficit)}
.fna-report .inf-estado__s{font-size:14px;line-height:1.5;color:var(--ink-soft)}
.fna-report .inf-grafico{margin:26px 0 14px;overflow-x:auto}
.fna-report .inf-grafico__msg{font-size:15px;font-weight:600;color:var(--ink);margin:0 0 10px}
.fna-report .inf-grafico__nota{font-size:12px;color:var(--ink-soft);margin-top:6px}
.fna-report .inf-donas{margin:0 0 24px}
.fna-report .inf-donas td{padding:12px 8px;border-bottom:1px solid var(--line-soft);vertical-align:middle;text-align:center}
.fna-report .inf-donas td.inf-donas__k{text-align:left;font-size:14px;color:var(--ink);width:32%}
.fna-report .inf-donas svg{margin:0 auto}
.fna-report .inf-donas__quien{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--ink)!important}
.fna-report .inf-donas__sub{font-size:12px;color:var(--ink-soft);margin-top:4px}
.fna-report .inf-donas__cap{font-family:var(--font-mono);font-size:12.5px;color:var(--ink);margin-top:6px}
.fna-report .inf-donas__cap--ok,.fna-report .inf-donas__na{color:var(--ink-soft)}
.fna-report .inf-dash{margin:0 0 16px}
.fna-report .inf-dash td{padding:10px 10px 10px 0;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.fna-report .inf-dash__h td{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--ink)}
.fna-report .inf-dash__k{font-size:14px;color:var(--ink);width:30%}
.fna-report .inf-dash__v,.fna-report .inf-dash__pct{font-family:var(--font-mono);font-size:13px;text-align:right;color:var(--ink)}
.fna-report .inf-dash__falta{font-weight:600}
.fna-report .inf-dash__nota{font-size:12.5px;color:var(--ink-soft);margin:4px 0 0}
.fna-report .inf-contexto{border-left:2px solid var(--figure);padding:0 0 0 18px;margin:24px 0 0}
.fna-report .inf-contexto .inf-nota{margin-top:0}
.fna-report .inf-fuentes{font-size:12px;line-height:1.5;color:var(--ink-soft);margin-top:10px;overflow-wrap:anywhere}
.fna-report .inf-fuentes div{margin-bottom:4px}
.fna-report .inf-orden td{padding:10px 0;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.fna-report .inf-orden__n{font-family:var(--font-editorial);font-size:22px;font-weight:600;color:var(--ink);width:48px}
.fna-report .inf-orden__t{font-size:15px;color:var(--ink)}
.fna-report .inf-meta{margin:0 0 18px}
.fna-report .inf-meta__k{font-size:12.5px;font-weight:600;color:var(--ink-soft);margin:0 0 4px}
.fna-report .inf-meta__v{font-size:14.5px;line-height:1.6;color:var(--ink)}
.fna-report .inf-falta{border-bottom:1px solid var(--line-soft);padding-bottom:12px;margin-bottom:12px}
.fna-report .inf-falta__why{font-size:13px;color:var(--ink-soft);margin-top:4px}
.fna-report .inf-reco{border-top:1px solid var(--line);padding:16px 0 8px}
.fna-report .inf-reco__h{font-size:16px;font-weight:600;color:var(--ink)}
.fna-report .inf-reco__k{font-size:13px;color:var(--ink-soft);margin:4px 0 8px}
.fna-report .inf-cita{border-left:2px solid var(--figure);padding:0 0 0 18px;margin:0 0 24px}
.fna-report .inf-cita__t{font-size:12.5px;font-weight:600;color:var(--ink-soft);margin:0 0 6px}
.fna-report .inf-check{margin:0 0 16px}
.fna-report .inf-check td{padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:14px;color:var(--ink);vertical-align:top}
.fna-report .inf-check__h td{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--ink)}
.fna-report .inf-check__c{width:15%;text-align:center;font-family:var(--font-mono);font-size:12.5px}
.fna-report .inf-pie{margin-top:20px;padding-top:10px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--ink-soft)}
/* Detail behind a figure already shown: one tap away, never in the way. */
.fna-report .inf-detalle{margin:18px 0 0;border-top:1px solid var(--line)}
.fna-report .inf-detalle>summary{cursor:pointer;list-style:none;padding:13px 0;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.fna-report .inf-detalle>summary::-webkit-details-marker{display:none}
.fna-report .inf-detalle>summary::before{content:'+';display:inline-block;width:20px;color:var(--ink-soft)}
.fna-report .inf-detalle[open]>summary::before{content:'\2212'}
.fna-report .inf-detalle>summary:hover{color:var(--ink-soft)}
@media (max-width:600px){
  .fna-report .inf-cabeza,.fna-report .inf-cabeza tbody,.fna-report .inf-cabeza tr,.fna-report .inf-cabeza td{display:block;width:auto}
  .fna-report .inf-cabeza__dona{padding:0 0 14px;max-width:140px}
  .fna-report .inf-dash,.fna-report .inf-check{display:block;overflow-x:auto}
}

/* ---- Footer ---- */
.site-footer{max-width:1280px;margin:clamp(44px,6vw,84px) auto 0;border-top:1px solid var(--line);
  padding:clamp(24px,3vw,36px) clamp(20px,4vw,56px) clamp(40px,5vw,68px);display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;
  font-family:var(--font-mono);font-size:12px;line-height:1.8;color:var(--eyebrow-ink)}
.site-footer a{color:var(--gold)}

/* ---- A phone first ----
   The header ran 757 px wide on a 375 px screen and hid the language and the session behind a sideways scroll. Below this width the
   links fold behind one button, every target is 44 px, the one action fills the width, and reading comes before the picture. */
@media (max-width:900px){
  .site-header{gap:12px}
  .nav-bar{display:flex;align-items:center;gap:14px;margin-left:auto}
  .nav-bar .nav-link--alt{display:inline-flex;align-items:center;min-height:44px}
  .nav-check{display:block;position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
  .nav-toggle{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line);font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);cursor:pointer}
  .nav-check:focus-visible + .nav-toggle{outline:2px solid var(--gold);outline-offset:2px}
  .nav-check:checked + .nav-toggle{border-color:var(--gold);color:var(--gold)}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px clamp(16px,3vw,28px) 16px;background:var(--bg);border-bottom:1px solid var(--line);white-space:normal}
  .nav-bar:has(.nav-check:checked) + .site-nav{display:flex}
  .site-nav .nav-link{display:flex;align-items:center;min-height:48px;font-size:13px;border-bottom:1px solid var(--line);padding:0}
  .site-nav .nav-link--active{color:var(--gold)}
  .site-nav .nav-link--alt{display:none}
  .site-nav .cta{display:block;margin-top:14px;padding:16px;font-size:13px;text-align:center}
}
@media (max-width:720px){
  .hero{min-height:0;padding:36px 20px 44px}
  .hero__eyebrow{letter-spacing:.14em;line-height:1.6}
  .hero__title{font-size:clamp(34px,10vw,42px);line-height:1.08;margin-top:14px}
  .hero__lead{font-size:17px;line-height:1.6;margin-top:16px;color:var(--ink)}
  .hero__ctas{margin-top:24px}
  .hero__ctas .cta{display:block;width:100%;padding:18px 16px;text-align:center}
  .eyebrow{letter-spacing:.14em;line-height:1.5}
  .case-row{grid-template-columns:minmax(0,1fr);gap:8px;padding:22px 0}
  .case-row>div{grid-column:auto!important}
  .case-note,.commit-text,.price-item{font-size:16px;line-height:1.6;color:var(--ink)}
  .commit-row{grid-template-columns:minmax(0,1fr);gap:8px;padding:20px}
  .commit-title{max-width:none}
  .price-box{grid-template-columns:minmax(0,1fr);padding:24px 20px}
  .agendar-box{padding:24px 20px}
  .site-footer{flex-direction:column}
}
@media (max-width:420px){
  .site-header__brand{gap:8px}
  .site-header__brand img{height:20px}
  .brand-name{font-size:16px}
  .nav-bar{gap:8px}
  .nav-toggle{padding:0 10px}
}
