/* GPI — landing. Tokens del Brand Book GPI (raíz de GP-Inversiones).
   Reglas duras: verde #3C7A4B es el ÚNICO acento y es IDÉNTICO en los dos temas
   (decisión de marca: identidad antes que contraste AA). Prohibido hex fuera de
   este bloque de tokens. */

/* ── Tipografía de marca, auto-hosteada ────────────────────────────────────
   NO volver a pedirlas a api.fontshare.com: Fontshare no sirve JetBrains Mono
   (el pedido se ignora en silencio y la mono cae al monospace del sistema) y el
   <link> tampoco llegaba a aplicar los @font-face. Mismo criterio y mismos
   .woff2 que GP-Inversiones/app/globals.css — no divergir. */
@font-face { font-family:'Clash Grotesk'; src:url('fonts/ClashGrotesk-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap }
@font-face { font-family:'Clash Grotesk'; src:url('fonts/ClashGrotesk-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap }
@font-face { font-family:'Clash Grotesk'; src:url('fonts/ClashGrotesk-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap }
@font-face { font-family:'JetBrains Mono'; src:url('fonts/JetBrainsMono-Variable.woff2') format('woff2'); font-weight:100 800; font-style:normal; font-display:swap }

:root {
    /* Marca */
    --green:       #3C7A4B;
    /* Celeste de GP Intelligence (la casa), solo para su isologo en el "powered by" del pie. */
    --gpint-celeste: #74acdf;
    --green-deep:  #2E5E39;
    --green-400:   #6CA07E;
    --green-100:   #E9F2EC;   /* tinta sobre relleno verde, en los dos temas */
    --green-soft:  rgba(60, 122, 75, 0.14);

    --sans: 'Clash Grotesk', 'General Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --ease: cubic-bezier(0.2, 0.7, 0.1, 1);

    /* 1080px dejaba ~185px de aire muerto de cada lado en una pantalla de
       1440. 1280 aprovecha el ancho sin que los renglones de texto se pasen de
       largo: los titulares y leads siguen acotados por su propio `ch`. */
    --wrap: 1280px;
    --nav-h: 63px;
}

/* Oscuro = modo natural de la marca (el isologo vive sobre negro). */
[data-theme="dark"] {
    --bg:          #0A0A0A;
    --bg-alt:      #151515;   /* banda alterna: marca el cambio de capítulo */
    --bg-elev:     #131313;
    --fg:          #FAFAF7;
    --fg-muted:    #8A8A8A;
    --fg-faint:    #4A4A4A;
    --line:        rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);
    --warning:     #F2C94C;
    --warn-soft:   rgba(242, 201, 76, 0.12);
    --danger:      #F2685F;
    --danger-soft: rgba(242, 104, 95, 0.14);
    --row-1:       rgba(255, 255, 255, 0.065);  /* fila de rubro en la tabla */
    --row-2:       rgba(255, 255, 255, 0.032);  /* fila de sub-rubro */
}

[data-theme="light"] {
    --bg:          #FAFAF7;
    --bg-alt:      #EFEDE4;   /* banda alterna: marca el cambio de capítulo */
    --bg-elev:     #FFFFFF;
    --fg:          #060606;
    --fg-muted:    #3A3A3A;
    --fg-faint:    #9A9A95;
    --line:        rgba(0, 0, 0, 0.08);
    --line-strong: rgba(0, 0, 0, 0.18);
    --warning:     #9A7400;
    --warn-soft:   rgba(154, 116, 0, 0.10);
    --danger:      #E54B4B;
    --danger-soft: rgba(229, 75, 75, 0.11);
    --row-1:       rgba(0, 0, 0, 0.055);        /* fila de rubro en la tabla */
    --row-2:       rgba(0, 0, 0, 0.026);        /* fila de sub-rubro */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* El `margin: 0` de arriba pisa el `margin: auto` con el que el navegador
   centra un <dialog> modal — sin esto los dos diálogos quedan clavados
   arriba a la izquierda. */
dialog { margin: auto; }

html {
    scroll-behavior: smooth;
    /* La nav es FIJA: sin esto el anchor lleva el borde de la sección a y=0 y
       el número + título quedan abajo del bar (en teléfono, a 9px de él).
       `--nav-h` es el alto de la nav ya scrolleada (13px + 13px + el alto de
       los controles), que es el estado en el que siempre cae un salto. */
    scroll-padding-top: calc(var(--nav-h) + 58px);
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
    background: var(--line-strong); border-radius: 999px;
    border: 2px solid var(--bg); background-clip: padding-box;
}

body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    transition: background 0.5s var(--ease), color 0.5s var(--ease);
}

a { color: inherit; text-decoration: none; }
em { font-style: normal; color: var(--green); }
b, strong { font-weight: 600; color: var(--fg); }
::selection { background: var(--green); color: var(--green-100); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ─── Isologo ───────────────────────────────────────────────────────────────
   El <symbol> vive una vez en el HTML; acá solo el tamaño. Hereda el color con
   currentColor: verde sobre tinta, tinta sobre crema.
   ⚠️ Brand Book: nunca abajo de 24px de alto en digital — de ahí los tamaños. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.logo { display: block; height: 26px; width: auto; aspect-ratio: 440 / 215; fill: currentColor; color: var(--green); }
.logo-xl { height: clamp(44px, 6vw, 64px); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }

/* ─── Nav ─── */
.nav {
    position: fixed; inset: 0 0 auto 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 20px clamp(20px, 5vw, 40px);
    background: color-mix(in oklab, var(--bg) 72%, transparent);
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    border-bottom: 1px solid transparent;
    transition: padding 0.4s var(--ease), border-color 0.4s var(--ease);
}
.nav.scrolled { padding-block: 13px; border-bottom-color: var(--line); }

.nav-mark {
    display: flex; align-items: center; gap: 11px;
    font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted);
}
.nav-mark .logo { height: 24px; }
/* "PMS" al lado del isologo (6-oct-2026): el isologo dice GPI y juntos se leen "GPI PMS". Va en tinta, no en
   verde —el verde es del isologo— y con el alto de las mayúsculas cerca del alto del isologo. */
.nav-pms {
    font-family: var(--sans); font-size: 24px; font-weight: 600; line-height: 1;
    letter-spacing: -0.01em; text-transform: none; color: var(--fg);
}
/* El punto medio separa el isologo de PMS: "GPI · PMS" (6-oct-2026). */
.nav-pms i { font-style: normal; color: var(--fg-muted); margin-right: 9px; }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.45 } }

.nav-left { display: flex; align-items: center; gap: 12px; }

/* Hamburguesa: a la izquierda del isologo y en los DOS tamaños. La nav no
   lista secciones sueltas — las ocho viven en `.nav-menu`, así que el
   recorrido es el mismo en desktop y en teléfono. Abajo de 760px el rótulo
   se va y queda solo el ícono. */
.nav-burger {
    display: flex; align-items: center; gap: 9px; cursor: pointer;
    flex: 0 0 auto; padding: 7px 14px;
    background: none; border: 1px solid var(--line-strong); border-radius: 999px;
    color: var(--fg-muted);
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav-burger:hover { color: var(--green); border-color: var(--green); }
.nav-burger svg { width: 14px; height: 14px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }

.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-cta {
    font-family: inherit; cursor: pointer; white-space: nowrap;
    background: var(--green); color: var(--green-100); border: 1px solid var(--green);
    border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 600;
    transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.nav-cta:hover { background: var(--green-deep); border-color: var(--green-deep); }

.theme-toggle {
    display: flex; align-items: center; gap: 9px; cursor: pointer;
    background: none; border: 1px solid var(--line-strong); border-radius: 999px;
    padding: 7px 14px; color: var(--fg-muted);
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.theme-toggle:hover { color: var(--green); border-color: var(--green); }
/* Sol/luna en vez del punto: abajo de 760px el rótulo "Dark"/"Light" se va y
   sin ícono el botón quedaba un círculo vacío, sin pista de qué hace. */
.theme-toggle svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .ti-moon { display: none; }
[data-theme="light"] .theme-toggle .ti-sun { display: none; }
[data-theme="light"] .theme-toggle .ti-moon { display: block; }

/* Abajo de 760px los tres controles se compactan a solo ícono para que la
   nav entre: menú, tema y CTA. */
@media (max-width: 760px) {
    .nav-burger { padding: 7px 10px; }
    .nav-burger span { display: none; }
    .theme-toggle { padding: 7px 10px; }
    .theme-toggle #themeLabel { display: none; }
    .nav-cta { padding: 9px 15px; }
}

/* Abajo de 400px (iPhone SE/mini y ventanas angostas) los tres controles ya
   compactados seguían sumando más ancho que el viewport y el CTA se salía por
   la derecha, con scroll horizontal en toda la página. Se recorta el aire de
   la nav, no el CTA: el botón sigue entero y legible. */
@media (max-width: 400px) {
    .nav { padding-inline: 14px; gap: 10px; }
    .nav-left, .nav-right { gap: 8px; }
    .nav-mark .logo { height: 21px; }
    .nav-pms { font-size: 21px; }
    .nav-cta { padding: 9px 13px; font-size: 12.5px; }
}

/* ─── Hero ───
   18-sep-2026: ya no ocupa la pantalla entera. Con `100dvh` y el contenido
   centrado quedaban ~280px vacíos abajo de los botones, más el padding de
   §2: el usuario pidió "achicar espacio con la segunda sección". Ahora el
   rótulo de §2 asoma en la primera pantalla de una laptop, que además avisa
   que hay más abajo. */
.hero {
    min-height: min(84dvh, 820px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: clamp(18px, 2.6vh, 30px); position: relative;
    padding: clamp(96px, 14vh, 140px) clamp(20px, 5vw, 40px) clamp(28px, 5vh, 56px);
}
/* En el teléfono el contenido mide menos de la mitad de la pantalla: con el
   84dvh quedaban ~200px vacíos abajo de los botones. */
@media (max-width: 760px) { .hero { min-height: 70dvh; } }
.eyebrow {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--green);
}
/* La identidad del producto arriba del título (6-oct-2026). */
.hero-pms { font-size: clamp(11px, 1.15vw, 13px); }
/* El tamaño se acota también por ALTO: en una laptop baja, un clamp por vw solo
   empujaba el hint de scroll fuera de la pantalla. */
/* 18-sep-2026: título y subtítulo invertidos y los dos más grandes. El
   titular es más largo que el anterior (55 contra 38 caracteres): la medida en
   `ch` sube a 20 para que entre en tres renglones y no en cuatro. */
.hero h1 {
    font-size: clamp(38px, min(7.4vw, 9.6vh), 92px);
    font-weight: 500; letter-spacing: -0.035em; line-height: 0.98;
    text-wrap: balance; max-width: 20ch;
}
.hero-lead {
    color: var(--fg-muted); font-size: clamp(19px, 2.4vw, 30px);
    font-weight: 500; letter-spacing: -0.015em;
    line-height: 1.3; max-width: 30ch; text-wrap: balance;
}

.cta-solo { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 13px; }
.btn {
    font-family: inherit; cursor: pointer;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 14px 24px; border-radius: 14px;
    font-size: 15px; font-weight: 600; border: 1px solid transparent;
    transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn svg {
    width: 17px; height: 17px; stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.btn-1 { background: var(--green); color: var(--green-100); border-color: var(--green); }
.btn-1:hover { background: var(--green-deep); border-color: var(--green-deep); }
/* ⚠️ `background: none` explícito: desde sep-2026 `.btn-2` lo usa un <button>
   ("Mirá el recorrido", que abre el diálogo de rol) y no un <a>, y un <button>
   sin fondo declarado se pinta del gris del sistema. */
.btn-2 { background: none; border-color: var(--line-strong); color: var(--fg-muted); }
.btn-2:hover { border-color: var(--green); color: var(--green); }

/* ─── Diálogo de demo (2 pasos) ─── */
.demo {
    border: 1px solid var(--line-strong); border-radius: 24px;
    background: var(--bg-elev); color: var(--fg);
    padding: clamp(26px, 4vw, 40px); width: min(94vw, 520px);
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.6);
}
.demo::backdrop { background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(4px); }
.demo[open] { animation: demo-in 0.28s var(--ease); }
@keyframes demo-in { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

.demo-x { position: absolute; top: 16px; right: 16px; }
.demo-x button {
    display: flex; cursor: pointer; padding: 8px; border-radius: 10px;
    background: none; border: 0; color: var(--fg-faint);
    transition: color 0.2s var(--ease);
}
.demo-x button:hover { color: var(--fg); }
.demo-x svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }

.demo-paso {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--green); margin-bottom: 14px;
}
.demo h2 {
    font-size: clamp(21px, 2.6vw, 26px); font-weight: 500;
    letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance; margin-bottom: 24px;
}
/* Un solo formulario (Entrega 2, §8). El paso "¿WhatsApp o email?" se
   eliminó: el canal es indistinto para el equipo y preguntarlo primero era
   fricción sin beneficio. Ahora va último y opcional; lo que importa es saber
   con quién se habla antes de la primera llamada. */
.frm { display: flex; flex-direction: column; gap: 14px; }
.frm-f { display: flex; flex-direction: column; gap: 6px; }
/* El `legend` del segmentado va acá: es un rótulo de campo como los otros y
   sin esto queda en cuerpo de texto, el doble de grande que sus vecinos. */
.frm-f > span, .frm-seg legend > span {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--fg-muted);
}
.frm-f > span i, .frm-seg legend > span i {
    font-style: normal; text-transform: none; letter-spacing: 0.03em;
    color: var(--fg-faint);
}
.frm-f input, .frm-f textarea, .sel-frm .sel-t {
    font-family: inherit; font-size: 15px; color: var(--fg); width: 100%;
    background: var(--bg); border: 1px solid var(--line-strong);
    border-radius: 12px; padding: 12px 14px;
    transition: border-color 0.2s var(--ease);
}
.frm-f textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.frm-f input:focus, .frm-f textarea:focus { outline: none; border-color: var(--green); }
.frm-go { margin-top: 6px; justify-content: center; }
.frm-n { font-size: 12px; line-height: 1.55; color: var(--fg-faint); text-align: center; }

/* ─── Email o teléfono ───
   Van en pareja porque la regla es "uno de los dos": separados en dos filas
   sueltas, el visitante lee dos campos obligatorios. En teléfono se apilan. */
.frm-par { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 460px) { .frm-par { grid-template-columns: 1fr; } }
.frm-h { font-size: 12px; line-height: 1.5; color: var(--fg-faint); margin-top: -6px; }

/* ─── ALyC o productor ───
   Dos opciones: un `select` de dos ítems esconde la mitad de la pregunta
   detrás de un click. Segmentado se leen las dos de una.
   El `input` real queda tapado pero NO con `display: none`: así sigue siendo
   focuseable con el teclado y el `:focus-visible` puede dibujar el anillo. */
.frm-seg { border: 0; padding: 0; margin: 0; min-width: 0; }
.frm-seg legend { padding: 0; margin-bottom: 6px; }
.frm-seg-b { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 460px) { .frm-seg-b { grid-template-columns: 1fr; } }
.frm-seg-b label { position: relative; display: block; cursor: pointer; }
.frm-seg-b input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: pointer;
}
.frm-seg-b span {
    display: block; text-align: center; font-size: 14.5px; font-weight: 500;
    color: var(--fg-muted); background: var(--bg);
    border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 10px;
    transition: background 0.22s var(--ease), border-color 0.22s var(--ease), color 0.22s var(--ease);
}
.frm-seg-b label:hover span { border-color: var(--green); color: var(--green); }
.frm-seg-b input:checked + span {
    background: var(--green); border-color: var(--green); color: var(--green-100);
}
.frm-seg-b input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }

/* El honeypot no puede ir con `display: none` ni `hidden`: los bots que valen
   la pena saltean lo que el CSS esconde por completo. Se lo saca del flujo. */
.frm-miel {
    position: absolute; left: -9999px; width: 1px; height: 1px;
    overflow: hidden; opacity: 0; pointer-events: none;
}

/* Estado del envío. `.frm-n` ya centra y atenúa; esto solo tiñe el resultado. */
.frm-n.ok { color: var(--green); }
.frm-n.mal { color: var(--danger); }
/* Mientras viaja el POST, el botón queda inerte y lo dice. */
.frm-go[disabled] { opacity: 0.6; pointer-events: none; }

/* `[hidden]` del navegador pierde contra cualquier `display` de autor
   (`.frm-f` es flex, `.frm-listo` también): sin esto los pasos y los campos
   extra se verían todos a la vez. */
.demo [hidden], .nav-menu [hidden] { display: none !important; }

/* ─── Lo opcional no ocupa lugar (18-sep-2026) ───
   Pedido del usuario: obligatorio solo el nombre y un email o un celular. Lo
   que ocupa lugar —la ALyC, el comentario— entra como un botón y el campo
   aparece recién si lo tocan (el botón se va y el foco pasa al campo). Lo que
   se contesta en un toque —ALyC/productor, cantidad de clientes— queda a la
   vista, marcado `opcional`. */
.frm-mas { display: flex; flex-wrap: wrap; gap: 8px; }
.frm-mas:not(:has(.frm-mas-b:not([hidden]))) { display: none; }
.frm-mas-b {
    cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 500;
    padding: 8px 14px; border-radius: 999px;
    background: none; color: var(--fg-muted);
    border: 1px dashed var(--line-strong);
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.frm-mas-b:hover { color: var(--green); border-color: var(--green); }

/* ─── Paso 2: confirmar los datos de contacto ─── */
.frm-conf {
    display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; align-items: baseline;
    padding: 16px 18px; margin-bottom: 22px;
    background: var(--bg); border: 1px solid var(--line-strong); border-radius: 14px;
}
.frm-conf dt {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--fg-muted);
}
.frm-conf dd { font-size: 15.5px; color: var(--fg); overflow-wrap: anywhere; }
.frm-acc { display: flex; flex-direction: column; gap: 10px; }
.frm-acc > .btn, .frm-acc > form, .frm-acc > form > .btn { width: 100%; }
.frm-acc .frm-go { margin-top: 0; }
[data-paso="confirmar"] .frm-n:not(:empty) { margin-top: 14px; }

/* ─── Paso 3: enviado ─── */
.frm-listo { text-align: center; padding-top: 8px; }
.frm-listo-i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50%;
    background: var(--green-soft); color: var(--green);
}
.frm-listo-i svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.frm-listo h2 { margin-bottom: 8px; }
.frm-listo p { font-size: 15.5px; color: var(--fg-muted); }
.frm-listo form { margin-top: 24px; }
.frm-listo .btn { width: 100%; }
.demo h2[tabindex]:focus { outline: none; }

/* ─── Select propio ─────────────────────────────────────────────────────────
   Reemplaza al <select> nativo, que abre un menú con el estilo del sistema
   operativo y se veía fuera de lugar (captura del usuario, 18-sep-2026). Sigue
   a `SimpleSelect` de GP-Inversiones (`components/ui/simple-select.tsx`):
   disparador con chevron, lista flotante con borde hairline, el ítem elegido
   con tilde verde y el ítem bajo el cursor/teclado con fondo suave. Lo usan el
   formulario de demo (cantidad de clientes) y el menú (la vista). Teclado:
   flechas, Home/End, Enter/Espacio y Esc — ver `armarSelect` en script.js. */
.sel { position: relative; }
.sel-t {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; cursor: pointer; text-align: left;
    font-family: inherit; font-size: 15px; color: var(--fg);
    background: var(--bg); border: 1px solid var(--line-strong); border-radius: 12px;
    padding: 12px 14px;
    transition: border-color 0.2s var(--ease);
}
.sel-t:hover, .sel-t[aria-expanded="true"] { border-color: var(--green); }
.sel-t:focus-visible { outline: none; border-color: var(--green); }
.sel-v.vacio { color: var(--fg-faint); }
/* Chevron dibujado con dos bordes: sin íconos externos. */
.sel-t i {
    flex: 0 0 auto; width: 7px; height: 7px; margin: -3px 2px 0 0;
    border-right: 1.5px solid var(--fg-muted); border-bottom: 1.5px solid var(--fg-muted);
    transform: rotate(45deg); transition: transform 0.2s var(--ease);
}
.sel-t[aria-expanded="true"] i { transform: rotate(225deg); margin-top: 4px; }
.sel-l {
    position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px);
    list-style: none; padding: 4px; margin: 0;
    background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 12px;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
    animation: sel-in 0.16s var(--ease);
}
@keyframes sel-in { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }
.sel-l li {
    position: relative; cursor: pointer; border-radius: 8px;
    padding: 9px 36px 9px 12px; font-size: 14.5px; color: var(--fg);
}
.sel-l li.act { background: var(--row-1); }
.sel-l li[aria-selected="true"] { color: var(--green); font-weight: 500; }
.sel-l li[aria-selected="true"]::after {
    content: ""; position: absolute; right: 14px; top: 50%;
    width: 5px; height: 10px; margin-top: -7px;
    border-right: 2px solid var(--green); border-bottom: 2px solid var(--green);
    transform: rotate(45deg);
}

/* ─── Menú de secciones: PANEL LATERAL ──────────────────────────────────────
   Hasta el 26-ago-2026 era una tarjeta centrada; ahora entra deslizando desde
   el borde izquierdo —el mismo lado donde vive la hamburguesa— y ocupa todo el
   alto. Sigue siendo el mismo <dialog> nativo, así que Esc, foco atrapado y
   ::backdrop salen gratis: lo único que cambia es de dónde entra y qué forma
   tiene.
   ⚠️ El `dialog { margin: auto }` de arriba es lo que centra un diálogo modal;
   sin pisarlo acá con `margin: 0 auto 0 0`, el panel vuelve al medio. */
.nav-menu {
    margin: 0 auto 0 0;
    height: 100dvh; max-height: none; overflow-y: auto;
    width: min(86vw, 340px);
    border: 0; border-right: 1px solid var(--line-strong); border-radius: 0;
    background: var(--bg-elev); color: var(--fg);
    padding: clamp(26px, 4vw, 36px) clamp(18px, 2.6vw, 26px);
    box-shadow: 30px 0 90px -40px rgba(0, 0, 0, 0.6);
}
.nav-menu::backdrop { background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(4px); }
.nav-menu[open] { animation: cajon-in 0.3s var(--ease); }
@keyframes cajon-in { from { transform: translateX(-100%) } to { transform: none } }
/* Deja pasar el botón de cerrar, que es absoluto arriba a la derecha. */
.nav-menu .demo-paso { margin-top: 30px; }
/* La marca arriba del recorrido (6-oct-2026). Toma el margen de arriba que antes
   tenía "Recorrido" y deja lugar a la derecha para el botón de cerrar. */
.nm-marca {
    margin: 4px 0 26px; padding-right: 40px;
    font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1;
}
.nm-marca small {
    display: block; margin-top: 6px;
    font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--fg-muted);
}
.nav-menu .nm-marca + .demo-paso { margin-top: 0; }
/* La vista se elige también desde acá (18-sep-2026), con el mismo select
   propio del formulario, y los links de abajo se adaptan a ella. */
.nm-vista { display: flex; flex-direction: column; gap: 7px; margin: 0 0 24px; padding: 0 12px; }
.nm-vista-k {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--fg-muted);
}
.nm-vista .sel-t { font-size: 14.5px; font-weight: 500; padding: 10px 13px; }
/* ⚠️ El sidebar NO lista los seis títulos de la página: lista **los módulos de
   la plataforma**, agrupados como están adentro del producto (26-ago-2026).
   Tus cuentas = Dashboard · Novedades · Agenda · Clientes 360 · Mercado ·
   Clientes por especie. Tus clientes = KYC · Conversation Center · Propuestas
   de Cartera. Tu negocio = Practice Intelligence y sus vistas. Los asistentes
   no son un módulo: viven en el bot.
   Cada entrada apunta a un `id="m-…"` puesto en el bloque correspondiente, así
   que **si se mueve o se fusiona un bloque hay que mover su id con él**, no
   solo actualizar el texto del menú. */
.nav-menu-links { display: flex; flex-direction: column; gap: 20px; margin-top: 6px; }
.nm-s { display: flex; flex-direction: column; gap: 1px; }
.nav-menu-links a {
    display: block; padding: 8px 12px 8px 24px; border-radius: 10px;
    font-size: 13.5px; color: var(--fg-muted);
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nm-g {
    padding: 9px 12px !important; margin-bottom: 3px;
    font-size: 16px; font-weight: 500; letter-spacing: -0.015em; color: var(--fg) !important;
}
.nm-fin { gap: 1px; }
.nav-menu-links a:hover { background: var(--green-soft); color: var(--green) !important; }

/* ─── Secciones ─────────────────────────────────────────────────────────────
   ⚠️ **El cambio de sección NO se enumera** (decisión del 26-ago-2026: los
   números 01–06 se sacaron de las cabeceras, del menú y del pie). Lo que marca
   el corte es el FONDO: las bandas alternan `--bg` y `--bg-alt`. Como las
   cabeceras de capítulo también alternan de lado, el tono acompaña la escalera
   — los capítulos de la derecha son los tintados.
   Por eso tampoco hace falta la línea divisoria que había antes: todo borde
   entre secciones ya es un cambio de color. Y por eso el `nth-of-type` no se
   toca sin pensar: agregar o sacar una sección invierte todas las de abajo. */
body > section {
    padding: clamp(72px, 11vw, 132px) 0;
    transition: background 0.5s var(--ease);
}
body > section:nth-of-type(even) { background: var(--bg-alt); }

/* ⚠️ Hasta el 18-sep-2026 había acá una compensación para la vista ALyC, que
   escondía `#perfil` y corría la alternancia. Desde que la ALyC ve todo el
   recorrido, ningún rol esconde una sección entera: el cliente colapsa BLOQUES
   (`.rol-off`) pero las secciones siguen ahí, así que el `nth-of-type` alterna
   igual en las tres vistas. Si algún día un rol vuelve a esconder una sección
   entera, la compensación vuelve con él. */

/* El rótulo de sección de `Para quién` y `Nosotros`, que no son capítulos de
   valor sino el cierre. Mismo tratamiento que el `.cap-k` de los capítulos. */
.section-k {
    margin-bottom: 20px;
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--green);
}
.section-title {
    font-size: clamp(28px, 4.4vw, 52px); font-weight: 500;
    letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; max-width: 20ch;
}
.section-lead {
    margin-top: 22px; color: var(--fg-muted);
    font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6; max-width: 62ch;
}

/* ─── Product shot del inicio ───────────────────────────────────────────────
   Desde ago-2026 abre el capítulo 01 (ver `.cap-shot`) en vez de tener banda
   propia: es "el primer pantallazo con lo más importante", así que va adentro
   del capítulo que habla de administrar las cuentas, no suelto arriba.
   Está DIBUJADO: para cambiarlo por una captura real, reemplazar el contenido
   de `.shot` por un <img> y borrar de acá para abajo hasta "Bloques". */
.shot {
    border: 1px solid var(--line-strong); border-radius: 18px; overflow: hidden;
    background: var(--bg-elev); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, 0.7);
}
.shot img { display: block; width: 100%; height: auto; }
.shot-bar {
    display: flex; align-items: center; gap: 14px;
    padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--bg);
}
.dots { display: flex; gap: 6px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.shot-url {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--fg-faint);
}

.shot-body { display: grid; grid-template-columns: 132px minmax(0, 1fr); }
.shot-nav {
    display: flex; flex-direction: column; gap: 3px; padding: 16px 12px;
    border-right: 1px solid var(--line); background: var(--bg);
}
/* El isologo, igual que en el sidebar real de la plataforma
   (`GpiLogo` con `h-7 w-auto text-brand`). Va a 24px y no más chico: es el
   mínimo que fija el Brand Book para digital. */
.sn-mark { display: flex; margin-bottom: 12px; padding: 0 8px; }
.sn-mark .logo { height: 24px; }
.sn {
    font-size: 12px; color: var(--fg-faint); padding: 7px 8px; border-radius: 7px;
}
.sn.on { color: var(--green); background: var(--green-soft); }

.shot-main { padding: clamp(16px, 2vw, 22px); display: flex; flex-direction: column; gap: 16px; }
.shot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sh-t { font-size: clamp(15px, 1.6vw, 18px); font-weight: 500; letter-spacing: -0.02em; }
.sh-d { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.kpi {
    display: flex; flex-direction: column; gap: 5px;
    border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; background: var(--bg);
}
.k-l { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.k-v { font-size: clamp(16px, 1.7vw, 19px); font-weight: 500; letter-spacing: -0.02em; }
.k-c { font-family: var(--mono); font-size: 10px; color: var(--fg-muted); }

.shot-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px; }
.card {
    display: flex; flex-direction: column; gap: 10px;
    border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--bg);
}
.c-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.c-t { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.c-n {
    font-family: var(--mono); font-size: 10px; color: var(--green);
    border: 1px solid var(--green); border-radius: 999px; padding: 2px 8px;
}
.c-leg { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9px; color: var(--fg-faint); }
.c-leg i { width: 10px; height: 2px; border-radius: 999px; background: var(--green); }
.c-leg i.alt { background: var(--line-strong); margin-left: 6px; }
.c-foot {
    display: flex; justify-content: space-between;
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--fg-faint);
}
.mini { margin-top: auto; }
.mini svg { display: block; width: 100%; height: 96px; }
.mini .g { stroke: var(--line); stroke-width: 1; }
.mini .line.alt { stroke: var(--line-strong); stroke-width: 1.4; stroke-dasharray: 3 3; }

/* Dos tarjetas anchas debajo: agenda y ranking. */
.card.wide { grid-column: 1 / -1; }
.ag { display: flex; flex-direction: column; gap: 8px; }
.ar {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center;
    font-size: 12px; color: var(--fg-muted);
}
.ar b { font-family: var(--mono); font-weight: 500; font-size: 11.5px; color: var(--fg); }
.tagx {
    font-style: normal; font-family: var(--mono); font-size: 9px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint);
    border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}
.tagx.w { border-color: var(--warning); color: var(--warning); }

.rank { display: flex; flex-direction: column; gap: 8px; }
.rr {
    display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 52px; gap: 12px; align-items: center;
    font-size: 12px; color: var(--fg-muted);
}
.rr i {
    font-style: normal; width: 18px; height: 18px; border-radius: 6px;
    border: 1px solid var(--line-strong); color: var(--fg-faint);
    display: flex; align-items: center; justify-content: center; font-size: 9.5px;
}
.rr:first-child i { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.rr b { font-family: var(--mono); font-weight: 500; font-size: 11.5px; color: var(--fg); text-align: right; }
.rr em { font-style: normal; font-size: 10.5px; text-align: right; }
.mini .line { fill: none; stroke: var(--green); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mini .area { fill: var(--green-soft); stroke: none; }
.cr {
    display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 10px; align-items: center;
    font-size: 12px; color: var(--fg-muted);
}
.cr i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.cr i.g { background: var(--green); }
.cr i.w { background: var(--warning); }
.cr b { font-family: var(--mono); font-weight: 500; color: var(--fg); font-size: 11.5px; }

@media (max-width: 720px) {
    .shot-nav { display: none; }
    .shot-body { grid-template-columns: 1fr; }
    .shot-cols { grid-template-columns: 1fr; }
}

/* ─── Bloques alternados: texto de un lado, producto del otro ─── */
.b-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(32px, 5vw, 72px); align-items: start;
}
.b-grid.rev .b-txt { order: 2; }
.b-txt { display: flex; flex-direction: column; align-items: flex-start; }
.b-txt .section-title { max-width: 16ch; }
/* `start` arriba y sticky acá: cuando la columna de texto es más alta que el
   visual (la del asistente mide el doble), el producto acompaña la lectura en
   vez de dejar media pantalla vacía. Con `align-items: center` el item no se
   estira y sticky no engancha nada. */
.b-vis { min-width: 0; position: sticky; top: 96px; }
@media (max-width: 900px) {
    .b-grid { grid-template-columns: 1fr; gap: 32px; }
    .b-grid.rev .b-txt { order: 0; }
    .b-vis { position: static; }
}

.lista { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.lista li {
    position: relative; padding-left: 20px; color: var(--fg-muted);
    font-size: 16px; line-height: 1.6;
}
.lista li::before {
    content: ""; position: absolute; left: 0; top: 12px;
    width: 8px; height: 1px; background: var(--green);
}
/* Segundo nivel — hoy solo lo usa "Gestioná tu equipo comercial", que es el
   único ítem del set que agrupa varias cosas (10-sep-2026). Se distingue del
   primer nivel por cuerpo y por tinta, y su marcador es un punto en vez de la
   rayita verde: si repitiera la raya, los dos niveles se leerían igual. */
.sub-lista { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.sub-lista li { font-size: 14.5px; color: var(--fg-faint); padding-left: 16px; }
.sub-lista li::before {
    content: ""; position: absolute; left: 0; top: 10px;
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--fg-faint);
}
/* Dos columnas de beneficio: el cliente y el asesor, lado a lado. Es el punto
   de la sección — el bot descarga a los dos. */
.dual {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: clamp(24px, 3vw, 36px); margin-top: 30px; width: 100%;
}
.dual-col { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: 18px; }
.dual-tag {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--green);
}
.dual-col p { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--fg-muted); }

/* ─── Teléfono dibujado (sección del asistente) ─── */
.phone {
    width: min(300px, 100%); margin: 0 auto;
    border: 8px solid var(--line-strong); border-radius: 34px;
    background: var(--bg-elev); overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.55);
}
.ph-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 13px; border-bottom: 1px solid var(--line); background: var(--bg);
}
.ph-av {
    width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
    background: var(--green-soft); border: 1px solid var(--green); color: var(--green);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 9px; font-weight: 600;
}
.ph-meta { display: flex; flex-direction: column; line-height: 1.3; }
.ph-meta b { font-size: 13px; font-weight: 600; }
.ph-meta i { font-style: normal; font-family: var(--mono); font-size: 9.5px; color: var(--green); }

.ph-chat { display: flex; flex-direction: column; gap: 8px; padding: 14px 11px; }
.msg {
    max-width: 88%; padding: 8px 11px 6px; border-radius: 12px;
    font-size: 12.5px; line-height: 1.45; position: relative;
}
.msg .t {
    display: block; text-align: right; font-family: var(--mono);
    font-size: 8.5px; color: var(--fg-faint); margin-top: 3px;
}
.msg.out { align-self: flex-end; background: var(--green-soft); border: 1px solid var(--green); }
.msg.in { align-self: flex-start; background: var(--bg); border: 1px solid var(--line-strong); }
.msg .num { font-size: 12px; }

/* Burbuja de audio: es el punto de la sección — se pregunta hablando. */
.audio { display: flex; align-items: center; gap: 8px; }
.audio .play {
    width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
    background: var(--green); display: flex; align-items: center; justify-content: center;
}
.audio .play svg { width: 11px; height: 11px; fill: var(--green-100); stroke: none; }
.audio .wave { display: flex; align-items: center; gap: 2px; height: 16px; flex: 1 1 auto; }
.audio .wave i {
    width: 2px; border-radius: 999px; background: var(--green); opacity: 0.55;
    height: 40%; animation: wave 1.5s var(--ease) infinite;
}
.audio .wave i:nth-child(3n) { height: 90%; }
.audio .wave i:nth-child(3n+1) { height: 65%; }
.audio .wave i:nth-child(2) { animation-delay: .1s } .audio .wave i:nth-child(3) { animation-delay: .2s }
.audio .wave i:nth-child(4) { animation-delay: .3s } .audio .wave i:nth-child(5) { animation-delay: .4s }
.audio .wave i:nth-child(6) { animation-delay: .5s } .audio .wave i:nth-child(7) { animation-delay: .6s }
.audio .wave i:nth-child(8) { animation-delay: .7s } .audio .wave i:nth-child(9) { animation-delay: .8s }
.audio .wave i:nth-child(10) { animation-delay: .9s } .audio .wave i:nth-child(11) { animation-delay: 1s }
.audio .wave i:nth-child(12) { animation-delay: 1.1s } .audio .wave i:nth-child(13) { animation-delay: 1.2s }
.audio .wave i:nth-child(14) { animation-delay: 1.3s }
@keyframes wave { 0%, 100% { opacity: .35; transform: scaleY(.7) } 50% { opacity: 1; transform: scaleY(1.25) } }
.audio .dur { font-family: var(--mono); font-size: 9.5px; color: var(--fg-muted); flex: 0 0 auto; }

.msg.file .doc {
    display: flex; align-items: center; gap: 9px; margin-bottom: 7px;
    padding: 8px; border-radius: 9px; background: var(--bg-elev);
}
.msg.file .ext {
    font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .04em;
    color: var(--green); border: 1px solid var(--green); border-radius: 5px; padding: 4px 5px; flex: 0 0 auto;
}
.msg.file .dn { display: flex; flex-direction: column; min-width: 0; }
.msg.file .dn b { font-size: 11px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg.file .dn i { font-style: normal; font-family: var(--mono); font-size: 9px; color: var(--fg-faint); }

/* Pilares: hairline + dos columnas. Sin cajas, sin chips. */
.kicker-wide { margin-top: clamp(28px, 4vw, 44px); max-width: 62ch; }
.kicker {
    border-left: 2px solid var(--green); padding: 2px 0 2px 16px; margin-top: 26px;
    font-size: 16px; font-weight: 500; line-height: 1.5; max-width: 54ch;
}

/* ─── Mockups (dibujados, sin imágenes) ─── */
.mock {
    background: var(--bg-elev); border: 1px solid var(--line);
    border-radius: 16px; overflow: hidden; margin: 8px 0 clamp(20px, 3vw, 32px);
}
/* ⚠️ El TÍTULO del mockup se marca (27-ago-2026). Iba del mismo gris que el
   dato de contexto de la derecha y el usuario lo frenó: "en la mayoría no se
   marca el título con un color distinto, estaría bueno para que salga más a la
   luz a lo que refiere cada uno". Ahora lleva punto verde y tinta plena —el
   mismo lenguaje que usa la plataforma real en sus encabezados de sección—. */
.mock-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--line);
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--fg-muted);
}
.mock-head > span:not(.live):not(.std) {
    display: flex; align-items: center; gap: 9px;
    font-weight: 600; color: var(--fg);
}
.mock-head > span:not(.live):not(.std)::before {
    content: ""; flex: 0 0 auto; width: 7px; height: 7px;
    border-radius: 50%; background: var(--green);
}
.mock-head .live { display: flex; align-items: center; gap: 7px; color: var(--fg-faint); }
/* ⚠️ `.std` es el sello de práctica internacional (FIFO, TWR, TIR, P&L). Va en
   la cabecera del mockup, donde antes iba un `.live` en `--fg-faint` — y el
   usuario marcó que así pasaba desapercibido ("LIBRO FIFO está muy muy sutil").
   Es el único ratón de la cabecera que se lee en verde y con caja: el argumento
   del capítulo es que las cuentas están hechas con estos criterios, no que la
   pantalla es linda. Si se agrega otro mockup con un estándar adentro, lleva
   `.std`; nunca `.live`. */
.mock-head .std {
    font-family: var(--mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
    color: var(--green); background: var(--green-soft);
    border: 1px solid var(--green); border-radius: 999px; padding: 4px 11px;
}
/* Misma idea adentro de una tabla: la columna que trae el estándar se marca. */
.lt-h span.k, .pc i.k { color: var(--green); }
.mock-head .live i {
    width: 6px; height: 6px; border-radius: 50%; background: var(--green);
    animation: pulse 2.8s var(--ease) infinite;
}

.feed { display: flex; flex-direction: column; }
.fr {
    display: grid; grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.fr:last-child { border-bottom: 0; }
.fico {
    width: 26px; height: 26px; border-radius: 8px; background: var(--bg);
    border: 1px solid var(--line-strong); color: var(--fg-muted);
    display: flex; align-items: center; justify-content: center;
}
.fico svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fico.g { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.fico.w { border-color: var(--warning); background: var(--warn-soft); color: var(--warning); }
.ftxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ftxt b { font-size: 14px; font-weight: 500; }
.ftxt i { font-style: normal; font-size: 12px; line-height: 1.45; color: var(--fg-muted); }
.tag {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
    text-transform: uppercase; white-space: nowrap; color: var(--fg-muted);
    border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 11px;
}
.tag.g { border-color: var(--green); color: var(--green); }
.tag.w { border-color: var(--warning); color: var(--warning); }
@media (max-width: 620px) {
    .fr { grid-template-columns: 26px minmax(0, 1fr); row-gap: 10px; }
    .fr > .tag { grid-column: 2; justify-self: start; }
}

.tl { padding: 6px 16px 14px; }
/* ⚠️ La fuente (WhatsApp / Reunión / Email / Nota / Portal) es EL argumento de
   este mockup: todos los canales caen en un solo hilo. Hasta el 26-ago-2026 era
   un rótulo diminuto en `--fg-faint` arriba del texto y el usuario lo frenó:
   "quedan poco marcadas las fuentes, no se identifican fácil visualmente".
   Ahora cada una es una cápsula verde con su ícono adentro (`.src`), en columna
   propia. Si se suma un canal, va con `.src`, nunca como texto suelto. */
.te { display: grid; grid-template-columns: 54px 128px minmax(0, 1fr); gap: 12px; padding: 12px 0; position: relative; }
.te::after { content: ""; position: absolute; left: 60px; top: 10px; bottom: -12px; width: 1px; background: var(--line); }
.te:last-child::after { display: none; }
/* Vista Cliente: sus filas van antes que las del asesor (ocultas), así que
   su última fila no es :last-child. La marca `.fin-cli` corta el riel ahí. */
[data-rol="cliente"] .te.fin-cli::after { display: none; }
.src {
    display: inline-flex; align-items: center; gap: 7px; justify-self: start; align-self: start;
    padding: 4px 11px 4px 5px; border-radius: 999px; z-index: 1;
    border: 1px solid var(--green); background: var(--green-soft); color: var(--green);
    font-family: var(--mono); font-size: 9px; font-weight: 600;
    letter-spacing: 0.11em; text-transform: uppercase; white-space: nowrap;
}
.src .k {
    width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
    background: var(--green); color: var(--green-100);
    display: flex; align-items: center; justify-content: center;
}
.src .k svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.te .d {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--fg-faint); text-align: right;
    padding-top: 4px; line-height: 1.4;
}
.te .b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.te .b b { font-size: 14px; font-weight: 500; line-height: 1.4; }
.te .b .num { font-size: 13px; }
/* El pie repite las fuentes: mismo criterio, cápsulas y no una enumeración. */
.brf-f .fnt { display: flex; flex-wrap: wrap; gap: 5px; }
.brf-f .fnt em {
    font-style: normal; font-family: var(--mono); font-size: 8.5px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--green);
    border: 1px solid var(--green); border-radius: 999px; padding: 3px 8px;
}

/* ─── Gráfico de mercado ─── */
.chart { position: relative; padding: 16px 0 0; }
.chart svg { display: block; width: 100%; height: 130px; }
.chart .g { stroke: var(--line); stroke-width: 1; }
.chart .line { fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart .area { fill: var(--green-soft); stroke: none; }
.chart-foot {
    display: flex; justify-content: space-between; padding: 10px 16px 14px;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--fg-faint);
}

.up { color: var(--green); }
.down { color: var(--danger); }

/* ─── Segmentación (espejo de la pantalla real: viñetas + treemap + grilla) ─── */
.segcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.sc {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 11px; background: var(--bg-elev);
}
.sc-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sc-top b {
    font-family: var(--mono); font-size: 10px; font-weight: 600;
    border: 1px solid var(--line-strong); border-radius: 6px; padding: 2px 7px; color: var(--fg-muted);
}
.sc.on .sc-top b { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.sc-top .num { font-size: 15px; font-weight: 500; }
.sc-aum { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; margin-top: 2px; }
.sc-pct { font-size: 9px; color: var(--fg-faint); line-height: 1.4; }
.sc-warn {
    display: flex; align-items: center; gap: 4px; margin-top: 2px;
    font-family: var(--mono); font-size: 9px; color: var(--fg-muted);
}
.sc-warn i { font-style: normal; color: var(--warning); }

/* Treemap: rampa de verdes por tamaño, no hues nuevos. */
.tree {
    display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(5, 15px);
    gap: 2px; padding: 12px 11px; border-top: 1px solid var(--line);
}
.tree i { display: block; border-radius: 3px; }
.tree i.a { background: var(--green); }
.tree i.b { background: var(--green-400); opacity: 0.65; }
.tree i.c { background: var(--line-strong); }

.grid { border-top: 1px solid var(--line); }
.gr {
    display: grid; grid-template-columns: minmax(0, 1fr) 28px 68px 44px;
    gap: 10px; align-items: center; padding: 9px 11px;
    border-bottom: 1px solid var(--line); font-size: 12px; color: var(--fg-muted);
}
.gr:last-child { border-bottom: 0; }
.gr span:nth-child(3), .gr span:nth-child(4) { text-align: right; }
.gr-head span {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--fg-faint);
}
.sg {
    font-family: var(--mono); font-size: 9px; font-weight: 600; text-align: center;
    border-radius: 5px; padding: 2px 0; border: 1px solid var(--line-strong); color: var(--fg-faint);
}
.sg.a { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.gr .num { color: var(--fg); }
.gr .num.warn { color: var(--warning); }

.segs-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px; border-top: 1px solid var(--line);
    font-size: 11.5px; color: var(--fg-muted);
}

/* ─── Tres lados ─── */
.lados {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: clamp(28px, 4vw, 48px); margin-top: clamp(40px, 6vw, 72px);
}
.lado { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--line); padding-top: 22px; }
.lado-tag {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--green);
}
.lado p { font-size: 15px; line-height: 1.6; color: var(--fg-muted); }
/* El plan invirtió la jerarquía: el beneficio de negocio, que estaba en cuerpo
   chico al pie, es ahora el titular de la tarjeta. */
.lado-out {
    font-size: clamp(18px, 2vw, 22px); font-weight: 500;
    letter-spacing: -0.02em; line-height: 1.2; color: var(--fg);
}
.lado-link {
    margin-top: auto; padding-top: 16px; align-self: flex-start;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--green);
}
.lado-link:hover { color: var(--green-deep); }

/* ─── Nosotros ─── */
.nos { margin-top: clamp(40px, 6vw, 72px); display: flex; flex-direction: column; gap: 20px; }
.nos p { color: var(--fg-muted); font-size: clamp(16px, 1.7vw, 18px); line-height: 1.7; max-width: 66ch; }
.nos .kicker-wide { margin-top: clamp(28px, 4vw, 44px); max-width: 62ch; }
.kicker { grid-column: auto; color: var(--fg); }

.equipo {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(28px, 4vw, 48px); margin-top: 12px;
}
.miembro { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: 20px; }
.m-nom { font-size: clamp(18px, 2vw, 21px); font-weight: 600; letter-spacing: -0.02em; color: var(--fg); }
.m-rol {
    margin-top: 6px; font-family: var(--mono); font-size: 10.5px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--green);
}
.m-txt { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--fg-muted); }

/* ─── Contacto ─── */
footer { padding: clamp(72px, 11vw, 132px) 0 0; }
.cierre {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(20px, 3vw, 40px); align-items: end;
    padding-bottom: clamp(48px, 7vw, 80px); border-bottom: 1px solid var(--line);
}
.cierre .logo-xl { grid-column: 1 / -1; margin-bottom: clamp(14px, 2vw, 22px); }
.cierre .section-title { max-width: 14ch; }
@media (max-width: 640px) { .cierre { grid-template-columns: 1fr; align-items: start; } }

.f-grid {
    display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 48px); padding: clamp(44px, 6vw, 64px) 0;
}
@media (max-width: 860px) { .f-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }

.f-marca { display: flex; flex-direction: column; gap: 14px; }
.f-mark { display: flex; }
.f-mark .logo { height: 30px; }
.f-marca p { font-size: 14px; line-height: 1.6; color: var(--fg-muted); max-width: 34ch; }

.f-col { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.f-col h3 {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--fg-faint); font-weight: 400; margin-bottom: 3px;
}
.f-col a, .f-col span {
    font-size: 14px; color: var(--fg-muted); line-height: 1.5;
    transition: color 0.2s var(--ease);
}
.f-col a:hover { color: var(--green); }
.f-demo {
    font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
    background: none; border: 0; padding: 0; color: var(--green); text-align: left;
    transition: opacity 0.2s var(--ease);
}
.f-demo:hover { opacity: 0.7; }

.f-base {
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 22px 0 30px; border-top: 1px solid var(--line);
    font-family: var(--mono); font-size: 10.5px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint);
}
/* "powered by GPI" → la landing de la casa madre (6-oct-2026). */
.f-powered { display: inline-flex; align-items: center; gap: 7px; color: var(--fg-muted); text-decoration: none; }
.f-powered:hover { color: var(--fg); }
.f-powered svg { height: 11px; width: auto; aspect-ratio: 440 / 215; fill: var(--gpint-celeste); }

/* ═══════════════════════════════════════════════════════════════════════════
   Sub-bloques y mockups nuevos (ago-2026)

   Cada sección pasó a ser un capítulo con varios bloques `.b-grid` adentro,
   alternando lado. La sección abre con su cabecera (`.cap-head`, o `.section-k`
   + `.section-title` en las dos del cierre) y los bloques que siguen van un
   escalón abajo: `.b-sub` + `.sub-title`.
   Todos los mockups siguen DIBUJADOS: cero imágenes, cero datos reales.
   ═══════════════════════════════════════════════════════════════════════════ */

body > section > .wrap + .wrap { margin-top: clamp(56px, 8vw, 104px); }

.b-sub {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--green); margin-bottom: 16px;
}
.sub-title {
    font-size: clamp(24px, 3.3vw, 38px); font-weight: 500;
    letter-spacing: -0.028em; line-height: 1.06; text-wrap: balance; max-width: 20ch;
}
.b-txt .sub-title { max-width: 17ch; }

/* Los titulares que arrancan con un verbo son más largos que los declarativos
   que había antes ("Definí la estrategia con tu cliente y seguí de cerca el
   perfil de cada uno" son 79 caracteres contra 42). En la medida angosta de la
   columna se partían en cinco renglones. `.t-largo` ensancha la medida y baja
   un escalón el cuerpo: la frase entra en tres renglones y el bloque sigue
   pesando lo mismo que sus vecinos. No cambia nada más — es tipografía, no un
   tamaño de titular nuevo. */
.b-txt .section-title.t-largo { font-size: clamp(27px, 3.9vw, 46px); max-width: 21ch; }
.b-txt .sub-title.t-largo { font-size: clamp(23px, 3.1vw, 35px); max-width: 21ch; }

/* El lema abre y cierra la página: eyebrow del hero y cierre del footer. */
.cierre-lema {
    grid-column: 1 / -1;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--green); margin-bottom: 14px;
}

/* ─── Saldos por moneda (02) ─── */
.sal { display: flex; flex-direction: column; gap: 1px; background: var(--line); }
.sal-b { background: var(--bg-elev); padding: 12px 15px 13px; display: flex; flex-direction: column; gap: 8px; }
.sal-h {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.11em;
    text-transform: uppercase; color: var(--fg-faint);
}
.sal-h b { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--green); }
.sal-b.neg .sal-h b { color: var(--danger); }
.sal-r {
    display: grid; grid-template-columns: minmax(0, 1fr) 46px 84px;
    gap: 10px; align-items: baseline; font-size: 11.5px; color: var(--fg-muted);
}
.sal-r .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sal-r .n .liq { font-style: normal; font-family: var(--mono); font-size: 9px; color: var(--warning); }
.sal-r i { font-style: normal; font-family: var(--mono); font-size: 9.5px; color: var(--fg-faint); }
.sal-r b { font-family: var(--mono); font-weight: 500; font-size: 11.5px; color: var(--green); text-align: right; }
.sal-b.neg .sal-r b { color: var(--danger); }
.sal-more {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--fg-faint);
}
.sal-foot, .sol-foot, .mas-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 15px; border-top: 1px solid var(--line);
    font-size: 11.5px; color: var(--fg-muted);
}

/* ─── Rentas y dividendos (02) ─── */
.acr { border-bottom: 1px solid var(--line); }
.acr:last-child { border-bottom: 0; }
.acr-h {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 11px 15px 9px;
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.11em;
    text-transform: uppercase; color: var(--fg-faint);
}
.acr-h b { font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--fg); }
.acr-r {
    display: grid; grid-template-columns: 12px 58px minmax(0, 1fr) auto;
    gap: 10px; align-items: baseline; padding: 8px 15px;
    font-size: 11px; color: var(--fg-muted); border-top: 1px solid var(--line);
}
.acr-r .chev { font-style: normal; color: var(--fg-faint); font-size: 11px; line-height: 1; }
.acr-r b { font-family: var(--mono); font-size: 11.5px; font-weight: 500; }
.acr-r em { font-style: normal; font-size: 11px; }
.acr-r.on { background: var(--green-soft); }
.acr-r.on .chev, .acr-r.on b { color: var(--green); }
.acr-sub { display: flex; flex-direction: column; gap: 7px; padding: 9px 15px 11px 43px; background: var(--green-soft); }
.acr-sub .as {
    display: grid; grid-template-columns: minmax(0, 1fr) 46px 92px;
    gap: 10px; align-items: baseline; font-size: 11px; color: var(--fg-muted);
}
.acr-sub .as .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acr-sub .as i { font-style: normal; font-family: var(--mono); font-size: 9.5px; color: var(--fg-faint); }
.acr-sub .as b { font-family: var(--mono); font-weight: 500; font-size: 11px; color: var(--fg); text-align: right; }
.acr-sub .as.more .n { font-family: var(--mono); font-size: 9.5px; color: var(--fg-faint); }
.acr-sub .as.more b { color: var(--fg-faint); }

/* ─── Calendario (03) ─── */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.cd {
    background: var(--bg); padding: 7px 0; text-align: center;
    font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--fg-faint);
}
.cc { background: var(--bg-elev); min-height: 42px; padding: 5px 5px 6px; display: flex; flex-direction: column; gap: 3px; }
.cc.off { background: var(--bg); }
.cn { font-family: var(--mono); font-size: 9.5px; color: var(--fg-faint); }
.cc.on .cn {
    display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
    width: 17px; height: 17px; border-radius: 50%; background: var(--green); color: var(--green-100);
}
.cev {
    display: block; font-style: normal; font-size: 8px; line-height: 1.5;
    background: var(--green-soft); color: var(--green); border-radius: 4px; padding: 2px 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cev { text-align: center; }
.cal-day { border-top: 1px solid var(--line); padding: 12px 15px 14px; display: flex; flex-direction: column; gap: 9px; }
.cal-dt {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.11em;
    text-transform: uppercase; color: var(--fg-faint);
}
.cal-e {
    display: grid; grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px; align-items: center; font-size: 12px; color: var(--fg-muted);
}
.cal-e b { font-family: var(--mono); font-weight: 500; font-size: 11.5px; color: var(--fg); }
.cal-e i {
    font-style: normal; font-family: var(--mono); font-size: 9px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint);
    border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}
.cal-e i.w { border-color: var(--warning); color: var(--warning); }

/* ─── Tablero de tareas + recordatorio (03) ───────────────────────────────
   El aviso flota sobre la esquina del tablero: es lo que se ve cuando salta
   el recordatorio. Abajo de 620px se apoya debajo, para no tapar una tarjeta. */
.kanw { position: relative; padding-bottom: 8px; }
.kan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.kcol { background: var(--bg-elev); padding: 12px 11px; display: flex; flex-direction: column; gap: 9px; }
.kc-h {
    display: flex; align-items: center; gap: 7px;
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--fg-faint);
}
.kc-h i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }
.kc-h i.c2 { background: var(--green-400); }
.kc-h i.c3 { background: var(--line-strong); }
.kc-h b { margin-left: auto; font-weight: 500; color: var(--fg-muted); }
.kt {
    display: flex; flex-direction: column; gap: 6px;
    border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--bg);
}
.kt-t { font-size: 11.5px; font-weight: 500; line-height: 1.35; }
.kt-m { display: flex; flex-wrap: wrap; gap: 5px; }
.kt-m i {
    font-style: normal; font-family: var(--mono); font-size: 8.5px;
    letter-spacing: 0.06em; color: var(--fg-faint);
    border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 7px;
}
.kt-m i.pri { border-color: var(--fg-faint); }
.kt-m i.pri.alta { border-color: var(--warning); color: var(--warning); }
.kt-m i.pri.baja { border-color: var(--line-strong); }
.kt-c { font-size: 10.5px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-v { font-size: 11px; color: var(--green); }

.toast {
    position: absolute; right: -10px; bottom: -14px; width: min(258px, 82%);
    display: flex; flex-direction: column; gap: 7px;
    border: 1px solid var(--line-strong); border-radius: 14px;
    background: var(--bg-elev); padding: 13px 14px;
    box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 0.6);
}
.to-h { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.to-i {
    width: 22px; height: 22px; border-radius: 7px; flex: 0 0 auto;
    background: var(--warn-soft); border: 1px solid var(--warning); color: var(--warning);
    display: flex; align-items: center; justify-content: center;
}
.to-i svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.to-s { font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; color: var(--fg-faint); }
.to-a { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.to-a em {
    font-style: normal; font-family: var(--mono); font-size: 9px;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted);
    border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 9px;
}
.to-a em.mins { color: var(--warning); border-color: var(--warning); }
.to-a em.ok { margin-left: auto; background: var(--green); border-color: var(--green); color: var(--green-100); }
.to-f {
    display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line);
    font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em; color: var(--fg-faint);
}
.to-f i { font-style: normal; border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; }
.to-f i:first-of-type { margin-left: auto; }
@media (max-width: 620px) {
    .toast { position: static; width: 100%; margin-top: 12px; }
}

/* ─── Señales y consultas del cliente (04) ─── */
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 15px; border-bottom: 1px solid var(--line); }
.chp {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--fg-faint); border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 10px;
}
.chp b { font-weight: 500; color: var(--fg-muted); }
.chp.on { border-color: var(--green); color: var(--green); }
.chp.on b { color: var(--green); }
.acts { display: flex; flex-direction: column; }
.ac { display: flex; flex-direction: column; gap: 5px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.ac:last-child { border-bottom: 0; }
.ac-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ac-h b { font-size: 12.5px; font-weight: 600; }
.ac-h i { font-style: normal; font-family: var(--mono); font-size: 9.5px; color: var(--fg-faint); }
.ac-h .tag { font-size: 9px; padding: 3px 8px; }
.ac-h em { font-style: normal; margin-left: auto; font-size: 9.5px; color: var(--fg-faint); }
.ac-t { font-size: 12.5px; font-weight: 500; }
.ac-o { font-family: var(--mono); font-size: 9px; color: var(--fg-faint); margin-top: 2px; }

/* ─── Solicitudes del cliente (04) ─── */
/* ⚠️ Estas grillas van con COLUMNAS FIJAS, no con `auto-fit`: el hueco de 1px
   sobre fondo de línea es lo que dibuja los separadores, así que la celda que
   `auto-fit` deja vacía al envolver se veía como un recuadro claro suelto
   (pasaba en teléfono con P&L, los KPI de retornos y el tablero de tareas).
   Donde el conteo no cierra la fila, el último item toma el ancho entero. */
.retk, .genk, .inik { display: grid; gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.retk { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sk { background: var(--bg-elev); padding: 12px 13px; display: flex; flex-direction: column; gap: 3px; }
.sk b { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.sk i {
    font-style: normal; font-family: var(--mono); font-size: 8.5px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); line-height: 1.4;
}
.sol { display: flex; flex-direction: column; }
.sr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) 44px 72px;
    gap: 10px; align-items: center; padding: 10px 15px;
    border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--fg-muted);
}
.sr:last-child { border-bottom: 0; }
.sr .n { display: flex; flex-direction: column; min-width: 0; color: var(--fg); }
.sr .n i { font-style: normal; font-family: var(--mono); font-size: 9px; color: var(--fg-faint); }
.sr .num { color: var(--fg); }
.sr-h span {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--fg-faint);
}
.st {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
    border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 8px;
    text-align: center; white-space: nowrap;
}
.st.pend { border-color: var(--warning); color: var(--warning); }
.st.curso { border-color: var(--green-400); color: var(--green-400); }
.st.ok { border-color: var(--green); color: var(--green); }

/* ─── Ficha de estrategia + perfil (05) ─── */
.kid { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.kid-a {
    width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
    background: var(--green-soft); border: 1px solid var(--green); color: var(--green);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 10px; font-weight: 600;
}
.kid-n { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.kid-n b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kid-n i { font-style: normal; font-size: 9.5px; color: var(--fg-faint); }
.kid .tag { margin-left: auto; font-size: 9px; padding: 3px 9px; }

.fichas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.fch { background: var(--bg-elev); padding: 11px 12px; display: flex; flex-direction: column; gap: 4px; }
.fch i {
    font-style: normal; font-family: var(--mono); font-size: 8.5px;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-faint);
}
.fch b { font-size: 12px; font-weight: 500; line-height: 1.35; }
.fch.add { justify-content: center; }
.fch.add i { color: var(--green); letter-spacing: 0.06em; }

.rasgos { display: flex; flex-wrap: wrap; gap: 5px; padding: 12px 15px; border-top: 1px solid var(--line); }
.rg {
    font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.04em; color: var(--fg-faint);
    border: 1px solid var(--line-strong); border-radius: 7px; padding: 4px 8px;
}
.rg b { font-weight: 500; color: var(--fg-muted); }

.gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.gg { background: var(--bg-elev); padding: 13px 8px 14px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gg-s { display: block; width: 100%; max-width: 108px; height: auto; }
.gg-s .t { fill: none; stroke: var(--line-strong); stroke-width: 7; stroke-linecap: round; }
.gg-s .v { fill: none; stroke: var(--green); stroke-width: 7; stroke-linecap: round; }
.gg b { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; margin-top: -2px; }
.gg i {
    font-style: normal; font-family: var(--mono); font-size: 8.5px;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-faint); text-align: center;
}
.gg span { font-family: var(--mono); font-size: 9px; color: var(--green); }
.kfoot {
    display: flex; align-items: center; gap: 9px; padding: 11px 15px;
    border-top: 1px solid var(--line); font-size: 11.5px; color: var(--fg-muted);
}
.kfoot i { font-style: normal; color: var(--green); }

/* ─── Antes de la reunión (05) ─── */
.brf-b { display: flex; flex-direction: column; }
.bi { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 14px 15px; border-bottom: 1px solid var(--line); }
.bi-k {
    width: 22px; height: 22px; border-radius: 7px;
    background: var(--warn-soft); border: 1px solid var(--warning); color: var(--warning);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 11px; font-weight: 600;
}
.bi-c { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bi-c b { font-size: 13px; font-weight: 500; line-height: 1.35; }
.bi-c i { font-style: normal; font-size: 11.5px; line-height: 1.5; color: var(--fg-muted); }
.bi-a { display: flex; gap: 7px; margin-top: 4px; }
.bi-a em {
    font-style: normal; font-family: var(--mono); font-size: 9px;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--green); border: 1px solid var(--green); border-radius: 999px; padding: 4px 10px;
}
.bi-a em.gh { color: var(--fg-faint); border-color: var(--line-strong); }
.brf-f {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 15px;
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--fg-faint);
}

/* ─── Análisis por posición (05) ─── */
.pnl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.pc { background: var(--bg-elev); padding: 13px 14px; display: flex; flex-direction: column; gap: 4px; }
.pc i {
    font-style: normal; font-family: var(--mono); font-size: 8.5px;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-faint);
}
.pc b { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; }
.pc span { font-size: 9.5px; color: var(--fg-faint); line-height: 1.4; }
.lots { display: flex; flex-direction: column; }
.lt {
    display: grid; grid-template-columns: 1.2fr 0.85fr 0.85fr 0.85fr 0.95fr 0.85fr;
    gap: 8px; align-items: center; padding: 9px 15px;
    border-bottom: 1px solid var(--line); font-size: 10.5px; color: var(--fg-muted);
}
.lt span:not(:first-child) { text-align: right; }
/* Retorno por rubro pasó a SIETE columnas el 10-sep-2026: "Resultado" se llamó
   P&L, que es su nombre, y se sumó P&L % — sin el porcentaje, el número absoluto
   no se puede comparar entre rubros de distinto tamaño. El libro FIFO sigue en
   seis, así que la variante va marcada y no al revés. */
.lt7 .lt { grid-template-columns: 1.15fr 0.8fr 0.8fr 0.8fr 0.8fr 0.85fr 0.8fr; gap: 6px; font-size: 10px; }
.lt-h span {
    font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--fg-faint);
}
.lt .num { color: var(--fg); }
.lt-t { border-bottom: 0; background: var(--green-soft); }
.lt-t span:first-child {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--green);
}

/* ─── Concentración y generado mensual (08) ─── */
.genk { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gk { background: var(--bg-elev); padding: 12px 13px; display: flex; flex-direction: column; gap: 3px; }
.gk i {
    font-style: normal; font-family: var(--mono); font-size: 8.5px;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-faint);
}
.gk b { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.gk span { font-size: 9.5px; color: var(--fg-faint); }
.lorenz { padding: 14px 15px 0; }
.lorenz svg { display: block; width: 100%; height: 92px; }
.lorenz .eq { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.lorenz .line { fill: none; stroke: var(--green); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.lorenz .area { fill: var(--green-soft); stroke: none; }
.lz-foot {
    display: flex; justify-content: space-between; padding: 8px 0 0;
    font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--fg-faint);
}
.genb { padding: 14px 15px 4px; border-top: 1px solid var(--line); margin-top: 14px; }
.gb-t {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.11em;
    text-transform: uppercase; color: var(--fg-faint); margin-bottom: 11px;
}
.bars { display: flex; align-items: flex-end; gap: 5px; height: 72px; }
.bars i { flex: 1 1 0; background: var(--green); opacity: 0.32; border-radius: 3px 3px 0 0; }
.bars i.on { opacity: 1; }
.genb .c-foot { padding: 9px 0 12px; }

/* ─── Oportunidades y pipeline (08) ─── */
.opo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.op { background: var(--bg-elev); padding: 13px 14px; display: flex; flex-direction: column; gap: 6px; }
.op-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.op-h b { font-size: 12.5px; font-weight: 500; }
.op-h i {
    font-style: normal; font-family: var(--mono); font-size: 9px;
    color: var(--fg-faint); border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 8px;
}
.op-d { font-size: 11px; line-height: 1.5; color: var(--fg-muted); }
.op-v { font-family: var(--mono); font-size: 13.5px; font-weight: 500; color: var(--green); margin-top: auto; }
.op.on { background: var(--green-soft); }
.op.on .op-h i { border-color: var(--green); color: var(--green); }
.op.w .op-h i { border-color: var(--warning); color: var(--warning); }
.op.w .op-v { color: var(--warning); }
.pipe { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.pp { background: var(--bg-elev); padding: 11px 6px 12px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pp i {
    font-style: normal; font-family: var(--mono); font-size: 8px;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-faint); text-align: center;
}
.pp b { font-size: 15px; font-weight: 500; }
.pp.on { background: var(--green-soft); }
.pp.on b, .pp.on i { color: var(--green); }

/* ─── Campañas (08) ─── */
.inik { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ik { background: var(--bg-elev); padding: 12px 13px; display: flex; flex-direction: column; gap: 3px; }
.ik b { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.ik i {
    font-style: normal; font-family: var(--mono); font-size: 8.5px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint);
}
.ini { display: flex; flex-direction: column; }
.ir {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(60px, 1fr) 92px;
    gap: 12px; align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--line);
}
.ir-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ir-t b { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ir-t i { font-style: normal; font-family: var(--mono); font-size: 9px; color: var(--fg-faint); }
.ir .bar { height: 5px; border-radius: 999px; background: var(--line-strong); overflow: hidden; }
.ir .bar i { display: block; height: 100%; border-radius: 999px; background: var(--green); }
.ir em { font-style: normal; font-size: 10px; color: var(--fg-muted); text-align: right; }
.etapas { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 15px; }
.et {
    font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--fg-faint); border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 10px;
}
.et.on { border-color: var(--green); background: var(--green-soft); color: var(--green); }

/* ─── Acciones masivas por especie (08) ─── */
.masb {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 11px 15px; border-bottom: 1px solid var(--line);
}
.ms-s { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--green); }
.ms-a { display: flex; flex-wrap: wrap; gap: 5px; }
.ms-a em.on {
    background: var(--green); border-color: var(--green); color: var(--green-100);
}
.ms-a em {
    font-style: normal; font-family: var(--mono); font-size: 8.5px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted);
    border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 9px;
}
.mas { display: flex; flex-direction: column; }
.mr {
    display: grid; grid-template-columns: 16px minmax(0, 1fr) 58px 84px;
    gap: 10px; align-items: center; padding: 9px 15px;
    border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--fg-muted);
}
.mr:last-child { border-bottom: 0; }
.mr .n { display: flex; flex-direction: column; min-width: 0; color: var(--fg); }
.mr .n i { font-style: normal; font-family: var(--mono); font-size: 9px; color: var(--fg-faint); }
.mr span:nth-child(3), .mr span:nth-child(4) { text-align: right; }
.mr .num { color: var(--fg); }
.mr-h span {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--fg-faint);
}
.ck {
    width: 16px; height: 16px; border-radius: 5px; font-size: 9px;
    border: 1px solid var(--green); background: var(--green); color: var(--green-100);
    display: flex; align-items: center; justify-content: center;
}
.ck.off { background: none; border-color: var(--line-strong); color: transparent; }

/* ─── Los mockups en pantalla chica ────────────────────────────────────────
   Solo se reacomodan las grillas: el último item toma la fila entera cuando el
   conteo no cierra, así nunca queda el recuadro vacío. */
@media (max-width: 560px) {
    .kan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kcol:last-child { grid-column: 1 / -1; }
    .pnl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pc:last-child { grid-column: 1 / -1; }
    .retk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lt { gap: 5px; padding-inline: 11px; font-size: 9.5px; }
    .sr { gap: 7px; padding-inline: 11px; font-size: 10.5px; }
    .sal-r, .acr-sub .as { gap: 7px; }
    .sal-b, .acr-h, .acr-r, .chips, .ac, .kid, .rasgos, .cal-day,
    .bi, .brf-f, .masb, .mr, .ir, .etapas, .sal-foot, .sol-foot,
    .mas-foot, .kfoot { padding-inline: 12px; }
}
@media (max-width: 420px) {
    .opo { grid-template-columns: minmax(0, 1fr); }
    .pipe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pp:nth-child(4) { grid-column: 1 / 3; }
}

/* ─── Grupos guardados (08 · segmentación) ─── */
.grupos { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 11px; border-top: 1px solid var(--line); }
.gp-l {
    font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.11em;
    text-transform: uppercase; color: var(--fg-faint); margin-right: 3px;
}
.gp {
    font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.04em; color: var(--fg-muted);
    border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 9px;
}
.gp.on { border-color: var(--green); background: var(--green-soft); color: var(--green); }


/* ═══════════════════════════════════════════════════════════════════════════
   CAPÍTULOS EN ESCALERA — ago-2026
   La página dejó de ser una fila india de diez funciones numeradas y pasó a
   CUATRO capítulos: tus cuentas, tus clientes, tu negocio y los asistentes.
   Cada uno abre con esta cabecera, y las cabeceras ALTERNAN de lado —01 y 03 a
   la izquierda, 02 y 04 a la derecha— para que se lean como escalones que
   bajan. Adentro, los bloques siguen con el zigzag de siempre, arrancando del
   MISMO lado que su cabecera: así el capítulo se lee como una unidad y no como
   más de lo mismo.

   Desde el 26-ago-2026 la cabecera NO lleva número: quedó el rótulo en verde y
   la regla que se estira hasta el borde. El orden del `.cap-top` es
   rótulo → regla, y `.cap.der` lo invierte con `row-reverse`, así la regla
   siempre corre hacia el borde de la página y el rótulo queda del lado del
   texto.

   ⚠️ Agregar o sacar un capítulo toca TRES cosas: el menú `#navMenu`, el
   `Recorrido` del pie y los `.rev` de todos los bloques de ahí para abajo — si
   no, quedan dos mockups seguidos del mismo lado y la escalera se rompe.
   Y una cuarta indirecta: el `nth-of-type` que tinta las bandas se invierte.
   ═══════════════════════════════════════════════════════════════════════════ */
.cap-head { display: flex; flex-direction: column; align-items: flex-start; max-width: 680px; }
.cap.der .cap-head { margin-left: auto; align-items: flex-end; text-align: right; }
.cap-top { display: flex; align-items: center; gap: 16px; width: 100%; margin-bottom: 16px; }
.cap.der .cap-top { flex-direction: row-reverse; }
/* La regla es lo que dibuja el escalón: nace pegada al rótulo y muere contra
   el borde del lado que le toca al capítulo. */
.cap-rule { flex: 1 1 auto; height: 1px; background: var(--line-strong); }
/* Con el número afuera, el rótulo es lo único que identifica al capítulo: pasa
   a verde y sube un punto de cuerpo. */
.cap-k {
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--green); white-space: nowrap;
}
/* Mismo criterio que `.t-largo` en los bloques: el titular del capítulo es el
   nombre del agregado de valor y algunos pasan de 55 caracteres. */
.cap-t { max-width: 17ch; }
.cap-t.t-largo { font-size: clamp(27px, 3.9vw, 46px); max-width: 22ch; }
.cap-lead {
    margin-top: 22px; color: var(--fg-muted);
    font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6; max-width: 56ch;
}
/* En teléfono no hay escalera posible —una sola columna—: todo vuelve a la
   izquierda, incluido el orden rótulo/regla. */
@media (max-width: 900px) {
    .cap-head, .cap.der .cap-head {
        margin-left: 0; max-width: none; align-items: flex-start; text-align: left;
    }
    .cap.der .cap-top { flex-direction: row; }
}

/* El product shot abre el capítulo 01 a ancho completo, con su propio titular. */
.cap-shot .sub-title { max-width: 28ch; }
.cap-shot .shot { margin-top: clamp(26px, 3.4vw, 40px); }

/* Dos mockups apilados en la misma columna. Es la forma de compactar dos
   bloques viejos en uno sin perder ninguno de los dos dibujos: saldos +
   acreencias, señales + pedidos, rentabilidad + libro FIFO, oportunidades +
   campañas. El aire lo pone el margen de abajo del primero. */
.b-vis .mock:not(:last-child) { margin-bottom: 14px; }

/* ─── Posiciones, composición y movimientos (01 · Clientes 360) ─────────────
   Espeja Clientes 360 → Posiciones: el total arriba y abajo los rubros, con la
   valuación, el peso en la cartera y el resultado. Columnas FIJAS por la misma
   razón que el resto de los mockups (con `auto-fit` la celda que envuelve se
   pinta del color del contenedor y aparece un recuadro suelto). */
/* ─── Posiciones ────────────────────────────────────────────────────────────
   Rehecha el 26-ago-2026. La versión anterior mostraba cuatro filas planas con
   nombres de columna inventados; el usuario marcó que así no se entiende nada
   de lo que la pantalla real hace. Ahora respeta las columnas de la app **y su
   orden** (ticker · descripción · cantidad · precio · var % · P&L día ·
   valuación · % del total) y, sobre todo, **la desagregación escalonada**:
   total global → rubro → sub-rubro → tipo → especie, cada nivel con su sangría
   (`.lv1`…`.lv4`) y su tono de fila (`--row-1` / `--row-2`), como en la
   plataforma. Sin eso la tabla se lee como una lista y se pierde el argumento.
   ⚠️ Es la tabla más ancha de la página: va sí o sí en un `.bf-i.full`. */
.pos { display: flex; flex-direction: column; }
.po {
    display: grid;
    grid-template-columns: 92px minmax(0, 1.6fr) 78px 64px 64px 82px 104px 70px;
    gap: 8px; align-items: center; padding: 9px 15px;
    border-bottom: 1px solid var(--line); font-size: 11px; color: var(--fg-muted);
}
.po span:not(:first-child):not(:nth-child(2)) { text-align: right; }
.po .num { color: var(--fg); }
.po i {
    display: inline; font-style: normal; font-family: var(--mono);
    font-size: 8.5px; color: var(--fg-faint); margin-left: 6px;
}
.po .dsc { color: var(--fg-muted); font-size: 10.5px; }
/* La sangría ES la jerarquía: sin ella los cuatro niveles se ven iguales. */
.po .lv1 { padding-left: 0; }
.po .lv2 { padding-left: 11px; }
.po .lv3 { padding-left: 22px; }
.po .lv4 { padding-left: 33px; }
.po .lv3, .po .lv4 {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.02em; color: var(--fg);
}
.po-h span {
    font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--fg-faint);
}
.po-t { background: var(--green-soft); }
.po-t span:first-child {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--green);
}
.po-g { background: var(--row-1); }
.po-g span:first-child {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--green);
}
.po-g .num { color: var(--green); }
.po-s { background: var(--row-2); }
.po-s span:first-child { font-weight: 600; color: var(--fg); }
.po-s2 { background: var(--row-2); }
.po-s2 .lv3 { font-weight: 600; }
.po-more span { color: var(--fg-faint); }

/* Cinco cortes apilados dejaban la tarjeta tres veces más alta que la de
   movimientos, que va al lado en la misma grilla. Se acomodan de a dos: el
   hueco de 1px sobre el fondo `--line` dibuja las medianeras, la misma técnica
   que el resto de los mockups. En teléfono vuelven a una sola columna. */
.cmp-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.cmp-g > .comp { background: var(--bg-elev); border-bottom: 0; }
/* El corte que queda impar se lleva la fila entera, si no aparece media celda
   pintada del color del contenedor. */
.cmp-g > .comp:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 900px) { .cmp-g { grid-template-columns: 1fr; } }

.comp { padding: 13px 15px; border-bottom: 1px solid var(--line); }
.cmp-t {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.11em;
    text-transform: uppercase; color: var(--fg-faint); margin-bottom: 10px;
}
/* Rampa de verdes, no hues nuevos: es una escala del mismo dato (peso en la
   cartera), igual que el treemap de segmentación.
   ⚠️ Desde el 27-ago-2026 la composición va en TORTA, no en barras: es como se
   ve en la plataforma y el usuario lo pidió así. El anillo se dibuja con
   `stroke-dasharray` sobre una circunferencia de largo 100, así los valores del
   HTML son directamente los porcentajes. Sin `preserveAspectRatio="none"`: hay
   círculos y con la escala deformada saldrían elipses. */
.cmp-w { display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); }
.cmp-pie { flex: 0 0 auto; width: 86px; height: 86px; transform: rotate(-90deg); }
.cmp-pie circle { fill: none; stroke-width: 7; }
.cmp-pie .ring { stroke: var(--line); }
.cmp-pie .a { stroke: var(--green); }
.cmp-pie .b { stroke: var(--green-400); }
.cmp-pie .c { stroke: var(--line-strong); }
/* Cuarto escalón de la rampa, para las tortas de cuatro porciones que entraron
   el 10-sep-2026 (variable macro y sector). Sigue siendo la MISMA rampa de
   verdes: es peso en la cartera, una escala del mismo dato — nunca hues nuevos,
   que es lo que el Brand Book reserva para las familias semánticas. */
.cmp-pie .d { stroke: var(--green-deep); }
.cmp-leg i.a { background: var(--green); }
.cmp-leg i.b { background: var(--green-400); }
.cmp-leg i.c { background: var(--line-strong); }
.cmp-leg i.d { background: var(--green-deep); }
.cmp-leg {
    display: flex; flex-direction: column; gap: 7px;
    font-size: 10.5px; color: var(--fg-muted);
}
.cmp-leg span { display: flex; align-items: center; gap: 6px; }
.cmp-leg i { display: block; width: 9px; height: 9px; border-radius: 3px; }
.cmp-leg b { font-weight: 500; color: var(--fg); }

.movs { display: flex; flex-direction: column; }
.mv {
    display: grid; grid-template-columns: 46px minmax(0, 1fr) 82px;
    gap: 10px; align-items: center; padding: 9px 15px;
    border-bottom: 1px solid var(--line); font-size: 11px; color: var(--fg-muted);
}
.mv:last-child { border-bottom: 0; }
.mv span:last-child { text-align: right; }
.mv .num { color: var(--fg); }
.mv-h span {
    font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--fg-faint);
}

/* ─── Evolución de la cartera (01 · rentabilidad) ───────────────────────────
   La línea llena es la cartera; la punteada es la misma plata sin invertir, que
   es contra lo que el cliente compara. Los marcadores son aportes y retiros: sin
   ellos el salto de la curva se lee como rendimiento y no lo es. */
.evo { position: relative; padding: 16px 0 0; }
.evo svg { display: block; width: 100%; height: 120px; }
.evo .g { stroke: var(--line); stroke-width: 1; }
.evo .area { fill: var(--green-soft); stroke: none; }
.evo .line {
    fill: none; stroke: var(--green); stroke-width: 1.8;
    stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.evo .base {
    fill: none; stroke: var(--line-strong); stroke-width: 1.4;
    stroke-dasharray: 4 4; vector-effect: non-scaling-stroke;
}
.evo .mk { position: absolute; transform: translate(-50%, -50%); font-size: 9px; line-height: 1; }
.evo .mk.dep { color: var(--green); }
.evo .mk.ext { color: var(--danger); }
.evo-leg {
    display: flex; flex-wrap: wrap; gap: 7px 16px; padding: 12px 15px 0;
    font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--fg-faint);
}
.evo-leg span { display: flex; align-items: center; gap: 6px; }
.evo-leg i { width: 14px; height: 2px; border-radius: 2px; background: var(--green); }
.evo-leg i.dash {
    background: repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 7px);
}
.evo-leg em { font-style: normal; color: var(--green); }
.evo-leg em.ext { color: var(--danger); }

/* ─── Descalce de perfil y propuesta (02) ───────────────────────────────────
   La barra es lo que la cartera tiene HOY y la marca vertical es lo acordado:
   la distancia entre las dos ES el descalce, sin tener que leer el número. */
.desc { display: flex; flex-direction: column; }
.ds {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 46px;
    gap: 12px; align-items: center; padding: 11px 15px;
    border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--fg-muted);
}
.ds-b { position: relative; height: 13px; border-radius: 4px; background: var(--line); }
.ds-b i { position: absolute; inset: 0 auto 0 0; background: var(--green); opacity: 0.5; border-radius: 4px; }
.ds-b em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--fg); }
.ds .dl { font-family: var(--mono); font-size: 10.5px; text-align: right; color: var(--fg); }
.ds .dl.up { color: var(--green); }
.ds .dl.down { color: var(--danger); }
.ds-h span {
    font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--fg-faint);
}
/* ─── Lo que se le pregunta al asistente (04) ───────────────────────────────
   Las preguntas son el mockup: muestran el alcance sin explicar el mecanismo. */
.qa-l { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 15px; border-bottom: 1px solid var(--line); }
.qa-q {
    font-size: 11.5px; line-height: 1.4; color: var(--fg-muted);
    border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 12px;
}
.qa-q.on { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.qa-q.on .num { color: var(--green); }
.qa-a { padding: 14px 15px 6px; display: flex; flex-direction: column; }
.qa-a b { font-size: 13px; font-weight: 500; line-height: 1.45; margin-bottom: 8px; }
.qa-r {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--line);
    font-size: 11.5px; color: var(--fg-muted);
}
.qa-r:last-child { border-bottom: 0; }
.qa-r .num { color: var(--fg); }
.qa-f {
    padding: 10px 15px 12px; border-top: 1px solid var(--line);
    font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.04em;
    color: var(--fg-faint); line-height: 1.5;
}

/* ─── Los mockups nuevos en pantalla chica ─────────────────────────────────
   Mismo criterio que el resto: se caen las columnas accesorias, nunca la que
   lleva el nombre y la que lleva la plata. */
@media (max-width: 560px) {
    .po { grid-template-columns: minmax(0, 1.3fr) 1fr 0.8fr; }
    .po span:nth-child(2), .po span:nth-child(3), .po span:nth-child(4),
    .po span:nth-child(5), .po span:nth-child(6) { display: none; }
    .po, .comp, .mv, .ds, .qa-l, .qa-a, .qa-f, .evo-leg, .fron { padding-inline: 12px; }
    .ds { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 40px; gap: 9px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Bloques a ancho completo (26-ago-2026) — `.b-full`

   El capítulo 01 dejó de usar el zigzag de `.b-grid`. El pedido fue textual:
   "menos texto, menos explicación, que hablen más las imágenes, expresiones
   cortas y directas". Un `.b-grid` reserva media página para la prosa; un
   `.b-full` deja un titular corto arriba y abajo TODAS las pantallas de esa
   subsección, en dos o tres columnas.

   Anatomía: `.bf-head` (titular + `.bf-sub` en mono verde + `.bf-list` de
   sustantivos separados por ·) y `.bf-grid.c2` / `.c3` con `.bf-i` adentro.
   Cada `.bf-i` lleva su `.bf-cap` — el rótulo corto de qué muestra esa foto —
   y uno o más `.mock`. `.bf-i.full` ocupa toda la fila (la tabla de posiciones
   y los paneles del mercado la necesitan).

   ⚠️ **`.lap` es la compresión visual que pidió el usuario**: dos mockups de
   la MISMA subsección se superponen en vez de apilarse sueltos. El de arriba
   reserva `padding-bottom` justamente para que el de abajo lo tape sin comerse
   ningún dato — "sin perder lo que muestran las fotos".
   ═══════════════════════════════════════════════════════════════════════════ */
.b-full .bf-head { max-width: 62ch; margin-bottom: clamp(26px, 3.4vw, 40px); }
.bf-sub {
    display: inline-block; margin-top: 16px;
    font-family: var(--mono); font-size: 12px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--green);
    border-bottom: 1px solid var(--green); padding-bottom: 5px;
}
.bf-list {
    margin-top: 12px; color: var(--fg-muted);
    font-size: clamp(14px, 1.5vw, 16.5px); line-height: 1.6;
}
.bf-grid { display: grid; gap: clamp(24px, 3vw, 40px); align-items: start; }
.bf-grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bf-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bf-i.full { grid-column: 1 / -1; }
.bf-in { display: grid; gap: clamp(16px, 2vw, 24px); align-items: start; }
.bf-in.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.bf-cap {
    display: block; margin-bottom: 13px;
    font-size: 15px; font-weight: 500; letter-spacing: -0.012em; color: var(--fg);
}
.bf-cap i {
    display: block; margin-top: 4px; font-style: normal;
    font-size: 12.5px; font-weight: 400; color: var(--fg-muted); line-height: 1.5;
}
/* Adentro de un `.bf-i` el mockup no lleva el aire que trae por defecto: el
   aire lo pone la grilla. */
.bf-i .mock { margin: 0; }
.bf-i .mock + .mock { margin-top: 14px; }
.bf-i.lap .mock:not(:last-child) { padding-bottom: 24px; }
.bf-i.lap .mock + .mock {
    margin: -28px 0 0 clamp(14px, 3vw, 44px);
    position: relative; z-index: 1;
    box-shadow: 0 -12px 44px -20px rgba(0, 0, 0, 0.5);
}

@media (max-width: 1000px) {
    .bf-grid.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bf-in.c3 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .bf-grid.c2, .bf-grid.c3 { grid-template-columns: 1fr; }
    .bf-i.lap .mock:not(:last-child) { padding-bottom: 0; }
    .bf-i.lap .mock + .mock { margin: 14px 0 0; box-shadow: none; }
}

/* ─── Movimientos con saldo acumulado (4 columnas) ─── */
.movs.mv4 .mv { grid-template-columns: 62px minmax(0, 1fr) 88px 92px; }
/* Seis columnas: concertación, liquidación, movimiento, cantidad, precio y neto.
   La liquidación es lo que separa un extracto real de una lista de gastos, y es
   la columna por la que un operador chequea si una landing sabe de qué habla. */
.movs.mv6 .mv { grid-template-columns: 50px 50px minmax(0, 1fr) 62px 56px 84px; gap: 8px; font-size: 10.5px; }
@media (max-width: 900px) {
    .movs.mv6 .mv { grid-template-columns: 46px minmax(0, 1fr) 56px 78px; }
    .movs.mv6 .mv > span:nth-child(2), .movs.mv6 .mv > span:nth-child(5) { display: none; }
}

/* ─── Solapas de un mockup (mercado, fundamentals) ─── */
.tabs {
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 10px 15px; border-bottom: 1px solid var(--line);
}
.tb {
    padding: 6px 11px; border-radius: 8px;
    font-size: 11px; color: var(--fg-muted); white-space: nowrap;
}
.tb.on { background: var(--green-soft); color: var(--green); }

/* ─── Panel de mercado ─── */
.mkt { display: flex; flex-direction: column; }
.mk-r {
    display: grid;
    grid-template-columns: 82px repeat(3, 78px) 72px 116px repeat(3, 78px);
    gap: 8px; align-items: center; padding: 9px 15px;
    border-bottom: 1px solid var(--line); font-size: 11px; color: var(--fg-muted);
}
.mk-r:last-child { border-bottom: 0; }
.mk-r span:not(:first-child) { text-align: right; }
.mk-r .num { color: var(--fg); }
.mk-h span {
    font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--fg-faint);
}
.tk { font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; color: var(--fg); }

/* ─── Curva de rendimientos ─────────────────────────────────────────────────
   ⚠️ Sin `preserveAspectRatio="none"`: este SVG tiene círculos y con la escala
   deformada saldrían elipses (el mismo motivo por el que la frontera del 02
   dibuja los puntos con HTML). Acá escala parejo y se resuelve solo. */
/* Rótulos de EJE (no de valor): dicen qué se mide, que es lo que faltaba —la
   curva mostraba números sin decir que el vertical es TIR y el horizontal
   duración modificada. */
.curva .axt {
    font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.1em;
    fill: var(--green); text-transform: uppercase;
}
.curva { padding: 14px 12px 4px; }
.curva svg { display: block; width: 100%; height: auto; }
.curva .g { stroke: var(--line); stroke-width: 1; }
.curva .ax { stroke: var(--line-strong); stroke-width: 1; }
.curva .cv { fill: none; stroke-width: 1.8; stroke-linecap: round; }
.curva .cv.a, .curva .pt.a { stroke: var(--green); fill: none; }
.curva .cv.b, .curva .pt.b { stroke: var(--green-400); fill: none; }
.curva .pt { stroke-width: 1.6; }
.curva .pt.a { fill: var(--green); }
.curva .pt.b { fill: var(--green-400); }
.curva .lb { fill: var(--fg-faint); font-family: var(--mono); font-size: 8px; }

/* ─── Variables macro ─── */
.macro { display: flex; flex-direction: column; }
.ma {
    display: grid; grid-template-columns: minmax(0, 1fr) 88px 110px;
    gap: 10px; align-items: center; padding: 10px 15px;
    border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--fg-muted);
}
.ma:last-child { border-bottom: 0; }
.ma span:not(:first-child) { text-align: right; }
.ma .num { color: var(--fg); font-size: 12px; }
.ma .u { font-family: var(--mono); font-size: 9px; color: var(--fg-faint); }
.ma-h span {
    font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--fg-faint);
}

/* ─── Varias series en un mismo gráfico ─── */
.fxc .line { fill: none; stroke-width: 1.6; }
.fxc .line.a { stroke: var(--green); }
.fxc .line.b { stroke: var(--green-400); }
.fxc .line.c { stroke: var(--line-strong); }
.evo-leg i.alt { background: var(--green-400); }
.evo-leg i.dim { background: var(--line-strong); }
.evo-leg b { font-weight: 500; color: var(--fg); }

/* ─── Ficha de un activo ─── */
.fich { padding: 13px 15px 0; }
.fh-n { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.fh-tg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fh-tg i {
    font-style: normal; font-family: var(--mono); font-size: 9px;
    letter-spacing: 0.04em; color: var(--fg-muted);
    border: 1px solid var(--line-strong); border-radius: 6px; padding: 4px 8px;
}
.rango { padding: 12px 15px 14px; border-bottom: 1px solid var(--line); }
.rg-t {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.11em;
    text-transform: uppercase; color: var(--fg-faint); margin-bottom: 10px;
}
.rg-b { position: relative; height: 3px; border-radius: 3px; background: var(--line-strong); }
.rg-b i {
    position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%;
    background: var(--green); transform: translate(-50%, -50%);
}
.rg-l {
    display: flex; justify-content: space-between; margin-top: 9px;
    font-family: var(--mono); font-size: 9.5px; color: var(--fg-faint);
}
.rg-l b { font-weight: 500; color: var(--fg); }

/* ─── Comparación de fundamentals ─── */
.fund { display: flex; flex-direction: column; }
.fu {
    display: grid; grid-template-columns: minmax(0, 1fr) 82px 82px;
    gap: 6px; align-items: center; padding: 8px 15px;
    border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--fg-muted);
}
.fu:last-child { border-bottom: 0; }
.fu span:not(:first-child) { text-align: right; padding: 4px 8px; border-radius: 6px; }
.fu .num { color: var(--fg); }
.fu-h span {
    font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--fg-faint); padding: 0;
}
.fu .bien { background: var(--green-soft); color: var(--green); }
.fu .mal { background: var(--danger-soft); color: var(--danger); }

/* ─── Calculadora de cartera y flujo de fondos ─── */
.calc { display: flex; flex-direction: column; }
.cl {
    display: grid; grid-template-columns: 34px 78px 88px 96px 116px auto;
    gap: 10px; align-items: center; padding: 10px 15px;
    border-bottom: 1px solid var(--line); font-size: 11px; color: var(--fg-muted);
}
.cl span:nth-child(n+3) { text-align: right; }
.cl span:last-child { text-align: right; justify-self: end; }
.cl .num { color: var(--fg); }
.cl-h span {
    font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--fg-faint);
}
.tg {
    display: block; width: 28px; height: 16px; border-radius: 999px;
    background: var(--line-strong); position: relative;
}
.tg i {
    position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
    border-radius: 50%; background: var(--bg-elev);
}
.tg.on { background: var(--green); }
.tg.on i { left: auto; right: 2px; }

.tirs {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px; background: var(--line); border-top: 1px solid var(--line);
}
.tr-c { background: var(--bg-elev); padding: 14px 15px; display: flex; flex-direction: column; gap: 4px; }
.tr-c > i {
    font-style: normal; font-family: var(--mono); font-size: 9px;
    letter-spacing: 0.11em; text-transform: uppercase; color: var(--fg-faint);
}
.tr-c > b { font-size: 24px; font-weight: 500; letter-spacing: -0.025em; }
.tr-c > span { font-size: 10px; color: var(--fg-faint); }
.tr-g { display: flex; gap: 22px; margin-top: 8px; }
.tr-g span { display: flex; flex-direction: column; gap: 2px; }
.tr-g i {
    font-style: normal; font-family: var(--mono); font-size: 9px; color: var(--fg-faint);
}
.tr-g b { font-family: var(--mono); font-size: 12px; font-weight: 500; }

/* ─── Comparadores del retorno de la cartera ─── */
.bench {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px; background: var(--line); border-top: 1px solid var(--line);
}
.bn { background: var(--bg-elev); padding: 11px 12px; display: flex; flex-direction: column; gap: 3px; }
.bn i {
    font-style: normal; font-family: var(--mono); font-size: 8.5px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint);
}
.bn b { font-family: var(--mono); font-size: 13px; font-weight: 500; }

@media (max-width: 900px) {
    .mk-r { grid-template-columns: 74px repeat(2, minmax(0, 1fr)) 68px; }
    .mk-r span:nth-child(2), .mk-r span:nth-child(3),
    .mk-r span:nth-child(7), .mk-r span:nth-child(8), .mk-r span:nth-child(9) { display: none; }
    .cl { grid-template-columns: 34px 68px minmax(0, 1fr) auto; }
    .cl span:nth-child(3), .cl span:nth-child(4) { display: none; }
    .bench { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Propuestas de Cartera (26-ago-2026)

   El bloque tenía un solo mockup —barras de descalce + una frontera dibujada a
   ojo— y el usuario lo frenó: "las que hay ahora son muy limitadas". Pasó a ser
   un `.b-full` con cinco pantallas espejadas de la app real: el resumen de la
   propuesta, la distribución por activo, el descalce, el perfil declarado /
   actual / propuesto, y la frontera eficiente de verdad.

   ⚠️ La captura del resumen traía nombre, cuenta y patrimonio REALES. Como
   siempre: cifras inventadas y plausibles.
   ⚠️ La captura de la distribución traía un botón de IA por fila. **No se
   dibujó**: la palabra "IA" solo está permitida en el título del capítulo 04.
   ═══════════════════════════════════════════════════════════════════════════ */
.prop {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px; background: var(--line); border-bottom: 1px solid var(--line);
}
.pp-c { background: var(--bg-elev); padding: 14px 16px 15px; }
.pp-t {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--fg-faint); margin-bottom: 8px;
}
.pp-r {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12px;
}
.pp-r:last-child { border-bottom: 0; }
.pp-r i { font-style: normal; color: var(--fg-muted); }
.pp-r b { font-weight: 500; text-align: right; }

.pstrip {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1px; background: var(--line); border-bottom: 1px solid var(--line);
}
.ps { background: var(--bg-elev); padding: 11px 13px; display: flex; flex-direction: column; gap: 4px; }
.ps i {
    font-style: normal; font-family: var(--mono); font-size: 8.5px;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-faint);
}
.ps b { font-family: var(--mono); font-size: 12.5px; font-weight: 500; }

.okban {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    background: var(--green-soft); color: var(--green); font-size: 12.5px;
}
.okban i {
    font-style: normal; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
    border: 1px solid var(--green); display: flex; align-items: center;
    justify-content: center; font-size: 10px;
}

.pbar { height: 6px; margin: 14px 16px 4px; border-radius: 999px; background: var(--line); }
.pbar i { display: block; height: 100%; border-radius: 999px; background: var(--green); }

.dist { display: flex; flex-direction: column; }
.di {
    display: grid;
    grid-template-columns: 66px 96px 56px 42px 56px 104px 98px 100px minmax(0, 1fr);
    gap: 8px; align-items: center; padding: 9px 15px;
    border-bottom: 1px solid var(--line); font-size: 11px; color: var(--fg-muted);
}
.di:last-child { border-bottom: 0; }
.di span:nth-child(2), .di span:nth-child(3), .di span:nth-child(5),
.di span:nth-child(7), .di span:nth-child(8) { text-align: right; }
.di .num { color: var(--fg); }
.di-h span {
    font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--fg-faint);
}
.di .mot { font-size: 10.5px; color: var(--fg-faint); }
.sit {
    justify-self: start; border: 1px solid; border-radius: 999px; padding: 4px 9px;
    font-family: var(--mono); font-size: 8.5px; font-weight: 600;
    letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap;
}
.sit.keep { border-color: var(--line-strong); color: var(--fg-muted); }
.sit.in { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.sit.out { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }

.perf {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px; background: var(--line); border-bottom: 1px solid var(--line);
}
.pf { background: var(--bg-elev); padding: 13px 14px; display: flex; flex-direction: column; gap: 3px; }
.pf i {
    font-style: normal; font-family: var(--mono); font-size: 8.5px;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-faint);
}
.pf b { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.pf em { font-style: normal; font-size: 10.5px; color: var(--fg-muted); }
.pf.bien b, .pf.bien em { color: var(--green); }
.pf.mal b, .pf.mal em { color: var(--danger); }

/* ─── La frontera eficiente ──────────────────────────────────────────────────
   ⚠️ Sin `preserveAspectRatio="none"`: hay círculos, y con la escala deformada
   saldrían elipses. Las cuatro bandas de perfil van con el MISMO verde y
   opacidad creciente: conservador → agresivo es una escala de un solo dato (el
   riesgo), no cuatro categorías — el Brand Book resuelve las categorías con sus
   familias semánticas, y acá no corresponde. */
.fron { padding: 14px 12px 2px; }
.fron svg { display: block; width: 100%; height: auto; }
.fron .g { stroke: var(--line); stroke-width: 1; }
.fron .ax { stroke: var(--line-strong); stroke-width: 1; }
.fron .fr { fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; }
.fron .fr.b1 { opacity: 0.35; }
.fron .fr.b2 { opacity: 0.6; }
.fron .fr.b3 { opacity: 0.82; }
.fron .fr.b4 { opacity: 1; }
.fron .ac { fill: var(--fg-faint); }
.fron .mn { fill: var(--fg); }
.fron .pr-n { fill: none; stroke: var(--green); stroke-width: 1.8; }
.fron .sh { fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linecap: round; }
.fron .pr-h { fill: var(--danger); }
.fron .lb { fill: var(--fg-faint); font-family: var(--mono); font-size: 7.5px; }
.fron .lb.ejey { font-size: 7px; }

.fron-leg {
    display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 15px 13px;
    font-size: 10.5px; color: var(--fg-muted);
}
.fron-leg span { display: flex; align-items: center; gap: 6px; }
.fron-leg i { width: 16px; height: 3px; border-radius: 3px; background: var(--green); }
.fron-leg i.b1 { opacity: 0.35; }
.fron-leg i.b2 { opacity: 0.6; }
.fron-leg i.b3 { opacity: 0.82; }
.fron-leg i.b4 { opacity: 1; }
.fron-leg em { font-style: normal; font-size: 11px; color: var(--green); }
.fron-leg em.pn { color: var(--green); }
.fron-leg em.mn { color: var(--fg); }
.fron-leg em.ph { color: var(--danger); }

@media (max-width: 900px) {
    .prop, .perf { grid-template-columns: 1fr; }
    .pstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .di { grid-template-columns: 62px minmax(0, 1fr) 96px 100px; }
    .di span:nth-child(3), .di span:nth-child(4), .di span:nth-child(5),
    .di span:nth-child(7), .di span:nth-child(9) { display: none; }
    .te { grid-template-columns: 48px minmax(0, 1fr); }
    .te .src { grid-column: 2; }
    .te::after { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   El lente de rol (plan de implementación, ago-2026)

   La landing no muestra tres productos distintos: muestra **un producto con
   tres alcances**. El lente no reemplaza secciones — cambia el encuadre, los
   rótulos de contexto y, donde corresponde, colapsa lo que ese rol no ve.

   Mecánica: los botones ponen `data-rol` en `<html>`; todo lo demás es CSS.
   Por defecto, `asesor`. El estado vive mientras dura la visita, no se guarda.

   ⚠️ **Lo que un rol no ve NO se oculta y ya: se colapsa a una línea atenuada**
   (`.rol-off`). La ausencia visible es parte de lo que se está demostrando — el
   modelo de permisos. Si se agrega un bloque que un rol no debe ver, lleva
   `data-off="cliente"` **y** tiene que existir una `.rol-off` que lo explique.
   ⚠️ §9 Para quién es la excepción: ahí no se filtra nada nunca. Las tres
   tarjetas se ven siempre y solo se destaca la del rol activo.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ La lente YA NO VIVE EN EL HERO (sep-2026). Ocupaba una pantalla entera
   para una pregunta que recién importa cuando arranca el recorrido, y para
   cambiarla había que volver hasta arriba de todo. Ahora son dos piezas:
     · `#rolDialog` — lo abre "Mirá el recorrido", y al elegir baja al cap. 01.
     · `.ba-seg`    — el selector de la barra de identidad, que viaja pegada
                      abajo de la nav durante todo el recorrido.
   El mecanismo no cambió: los dos usan `data-rol-set` y el mismo handler. */
.rol-dlg h2 { margin-bottom: 10px; }
.rol-dlg-n { font-size: 14px; line-height: 1.6; color: var(--fg-muted); margin-bottom: 22px; }
.rol-dlg-b { display: flex; flex-direction: column; gap: 10px; }
/* Tarjeta y no píldora: cada rol viene con la línea que explica qué ve. Eso
   contesta la pregunta que traía el visitante ("¿cuál soy yo?") sin obligarlo
   a adivinar por el rótulo. */
.rol-dlg-b button {
    cursor: pointer; font-family: inherit; text-align: left;
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 18px; border-radius: 14px;
    border: 1px solid var(--line-strong); background: var(--bg); color: var(--fg);
    transition: background 0.22s var(--ease), border-color 0.22s var(--ease), color 0.22s var(--ease);
}
.rol-dlg-b button b { font-size: 15.5px; font-weight: 600; }
.rol-dlg-b button span { font-size: 13.5px; line-height: 1.5; color: var(--fg-muted); }
.rol-dlg-b button:hover { border-color: var(--green); }
.rol-dlg-b button:hover b { color: var(--green); }
/* `aria-pressed` lo pone el mismo handler que la barra: al reabrir el diálogo
   se ve cuál está activo. */
.rol-dlg-b button[aria-pressed="true"] {
    border-color: var(--green); background: var(--green-soft);
}
.rol-dlg-b button[aria-pressed="true"] b { color: var(--green); }

/* ─── Barra de identidad ─────────────────────────────────────────────────────
   Una sola para todo el recorrido, pegada abajo de la nav. Se apaga al llegar a
   `Nosotros`, que ya no es recorrido. ⚠️ Suma alto al encabezado fijo: por eso
   `scroll-padding-top` es `--nav-h + 58px` y no `+ 20px`. */
.barra {
    position: sticky; top: var(--nav-h); z-index: 40;
    background: color-mix(in oklab, var(--bg) 86%, transparent);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border-bottom: 1px solid var(--line);
    transition: opacity 0.35s var(--ease);
}
.barra.off { opacity: 0; pointer-events: none; }
.barra-in {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px;
    padding-block: 9px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--fg-muted);
}
/* Dónde está parado el lector (18-sep-2026): "Tus cuentas — Novedades".
   Reemplazó a "Tu ALyC · Datos de ejemplo · PROD-014", que el usuario sacó
   porque no le decía nada al que recorre. Los rótulos los copia el script del
   menú, con sus variantes por rol adentro, así que el CSS de roles los resuelve
   solo. La subsección va un escalón más tenue que la sección. */
.ba-donde { display: inline-flex; align-items: center; gap: 9px; min-width: 0; color: var(--fg); }
.ba-sub { color: var(--fg-muted); }
.ba-sub:empty { display: none; }
.ba-sub::before { content: "—"; margin-right: 9px; color: var(--fg-faint); }
.ba-p { display: none; align-items: center; gap: 9px; }
.ba-p::before { content: "·"; color: var(--fg-faint); }
/* El alcance solo se muestra donde cambia algo (Segmentación y Métricas de
   clientes): `.con-alcance` lo pone el script según el bloque que se lee. */
[data-rol="alyc"] .barra.con-alcance .ba-p[data-ver="alyc"] { display: inline-flex; }
.ba-alc {
    cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 11px; border-radius: 999px;
    border: 1px solid var(--green); background: var(--green-soft); color: var(--green);
}
.ba-alc i { font-style: normal; }

/* ─── Selector de rol, anclado en la barra ───
   `margin-left: auto` lo manda a la derecha y lo deja QUIETO: lo de la
   izquierda cambia con el scroll (la sección) y con el rol (el alcance del
   ALyC), y si el selector viajara con eso, el control se movería solo al usarlo.
   ⚠️ Sin verde. El verde de esta barra es del conmutador de alcance; dos
   acentos acá adentro compiten y ninguno se lee como "lo clickeable". */
.ba-rol { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.ba-rol-k { color: var(--fg-faint); }
.ba-seg {
    display: inline-flex; padding: 2px; gap: 2px;
    border: 1px solid var(--line-strong); border-radius: 999px;
}
.ba-seg button {
    cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit;
    padding: 3px 10px; border: 0; border-radius: 999px;
    background: none; color: var(--fg-faint);
    transition: background 0.22s var(--ease), color 0.22s var(--ease);
}
.ba-seg button:hover { color: var(--fg); }
.ba-seg button[aria-pressed="true"] { background: var(--bg-elev); color: var(--fg); }

/* En teléfono la barra ya envuelve en dos renglones: el `margin-left: auto`
   no tiene nada que empujar y el rótulo se come el ancho del control. */
@media (max-width: 700px) {
    .ba-rol { margin-left: 0; }
    .ba-rol-k { display: none; }
    /* Envuelto, el alcance arranca renglón propio: el "·" quedaba suelto. */
    .ba-p::before { display: none; }
}

/* ─── Conmutador de alcance del ALyC ────────────────────────────────────────
   Los dos estados —por cliente / agregado por productor— viven en el DOM y se
   turnan. No cambia solo la tabla: cambian los rótulos, las tarjetas por
   segmento, los KPI, la curva de concentración y las barras de lo generado. El
   usuario lo pidió explícitamente: "los cuadros y los gráficos no cambian
   cuando selecciono vista por productor".

   ⚠️ El display de la variante activa se declara EXPLÍCITAMENTE por tipo de
   elemento. `revert` y `unset` no sirven: devuelven el valor del navegador, no
   el del autor — una fila `.gr` volvería a `block` y se rompería la grilla. Si
   se agrega un par de variantes con un display distinto, hay que sumarlo acá. */
/* ⚠️ El conmutador SOLO OCULTA. Nunca declara un `display` para mostrar.
   La primera versión listaba el display de cada variante activa
   (`… .gr.alc-p { display: grid }`, `… svg.alc-p { display: block }`…) y se
   rompió al día siguiente: reglas más específicas del propio mockup
   —`.mock-head > span:not(.live):not(.std)`, `.lorenz svg`— le ganaban a
   `.alc-p` y las DOS variantes se veían a la vez (título duplicado y dos curvas
   de Lorenz encimadas en la vista ALyC por cliente).

   Con este planteo el elemento activo conserva el `display` que ya tenía: no
   hay nada que restaurar, así que no hay pelea de especificidad posible. Cada
   estado dice qué esconde y listo:
     • cualquier rol que no sea ALyC, o ALyC mirando por cliente → fuera `.alc-p`
     • ALyC mirando agregado por productor → fuera `.alc-c`
   El botón de la barra usa el mismo par y sale gratis: muestra el alcance
   vigente sin reglas propias. */
:root:not([data-rol="alyc"]) .alc-p,
[data-rol="alyc"][data-alcance="cliente"] .alc-p { display: none !important; }
[data-rol="alyc"][data-alcance="productor"] .alc-c { display: none !important; }

/* Bloques que SOLO existen para un rol. Es lo contrario de `data-off`: no hay
   línea atenuada porque para los otros roles ese contenido nunca existió. */
[data-solo] { display: none; }
[data-rol="alyc"] [data-solo~="alyc"] { display: block; }

/* ─── Lo que un rol no ve ───
   • `.rol-off` — el CLIENTE no tiene permiso. La ausencia visible es parte de
     lo que se demuestra (el modelo de permisos), por eso el bloque se colapsa a
     una línea atenuada en vez de desaparecer.
   • La ALyC, desde el 18-sep-2026, ve TODO: tiene permiso sobre las mismas
     pantallas que el asesor. Lo que antes era la derivación `.rol-remite` es
     ahora el diálogo `#alycDialog`. Nunca colapsar algo de la ALyC a un "esto
     no lo ves": sería mentira. */
.rol-off { display: none; }
[data-rol="cliente"] .rol-off[data-only~="cliente"] { display: block; }
/* Variantes de TEXTO por rol (18-sep-2026): el mismo par sirve para un bloque
   entero o para dos `<span>` adentro de un titular —
   `<span data-off="cliente">de tus clientes</span><span data-only="cliente">tu perfil</span>`.
   Igual que el conmutador de alcance, SOLO OCULTA y con `!important`: varias
   reglas de mockup (`.mock-head > span…`, `.tl .te`) declaran su propio
   `display` con más especificidad y, sin esto, las dos variantes se veían a la
   vez. El elemento que queda conserva el display que ya tenía. */
[data-rol="cliente"] [data-off~="cliente"],
[data-rol="alyc"] [data-off~="alyc"],
:root:not([data-rol="cliente"]) [data-only~="cliente"] { display: none !important; }
.rol-off span {
    display: block; max-width: 58ch; padding: 20px 0;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    font-size: 14px; line-height: 1.6; color: var(--fg-faint);
}

/* ─── Aclaración de la vista ALyC: un diálogo (18-sep-2026) ───
   Hasta esa fecha era el bloque `.rol-remite`, adentro del capítulo 01, y la
   ALyC no veía ni el 01 ni el 02. Ahora la ALyC recorre TODO y la aclaración
   sale del recorrido: la muestra este diálogo al pasar a la vista ALyC, como
   mucho una vez cada 24 h. Mismo registro que antes —formal, tercera persona,
   titular sin imperativo—: sigue siendo una aclaración, no un bloque de venta. */
.alyc-dlg h2 { margin-bottom: 14px; }
.alyc-dlg-p { font-size: 14.5px; line-height: 1.65; color: var(--fg-muted); }
.alyc-dlg-p + .alyc-dlg-p { margin-top: 12px; }
.alyc-dlg .frm-acc { margin-top: 24px; }
/* Señales perdió su cabecera al fusionarse con Novedades (10-sep-2026): sin
   esto quedaban 104px de aire partiendo en dos lo que ahora es un solo
   bloque. El id gana por especificidad, no hace falta `!important`. */
#m-senales { margin-top: clamp(20px, 2.6vw, 34px); }
/* La tarjeta del rol activo se destaca; ninguna se esconde. */
[data-rol="alyc"] .lado[data-lado="alyc"],
[data-rol="asesor"] .lado[data-lado="asesor"],
[data-rol="cliente"] .lado[data-lado="cliente"] { border-top-color: var(--green); }

/* ─── §2 El problema: dos mitades espejadas ─────────────────────────────────
   Hasta sep-2026 las dos columnas no jugaban el mismo deporte: la izquierda era
   una `<ul>` de cinco palabras sueltas, la derecha un párrafo corrido, y la
   grilla era 0.78fr / 1.22fr — o sea, ni siquiera estaban a la misma altura ni
   con el mismo ancho. Se leía como dos cosas distintas puestas al lado, no como
   una comparación.

   Ahora: rótulo centrado arriba, dos columnas IGUALES, las dos con texto
   corrido del mismo largo, y una MEDIANERA entre ellas. El corte lo hacen tres
   cosas juntas —la línea, el salto de tono (`--fg-faint` contra `--fg-muted`) y
   el verde del título—, no una sola.

   ⚠️ La medianera es un `border-left` de la segunda columna, no un
   pseudo-elemento: así desaparece sola cuando la grilla colapsa a una columna y
   el borde pasa a ser el de arriba.

   ⚠️ El aire NO lo pone `gap`: lo ponen los dos `padding` de media medianera
   (`--prob-aire`). Con `gap` la línea quedaría pegada a la columna derecha en
   vez de en el medio, y corregirlo con un margen negativo desalinea el texto
   respecto de su propia columna. Así el hueco es simétrico y la línea cae justo
   al medio. */
.prob {
    --prob-aire: clamp(26px, 4.4vw, 62px);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0; align-items: stretch;
    margin-top: clamp(22px, 3vw, 34px);
}
.prob-k { text-align: center; }
/* Menos aire arriba que el resto de las secciones: viene pegada al hero y el
   pedido fue achicar ese hueco (18-sep-2026). */
body > section#problema { padding-top: clamp(40px, 6vw, 72px); }
.prob-c { min-width: 0; }
.prob-c:first-child { padding-right: var(--prob-aire); }
.prob-c + .prob-c {
    border-left: 1px solid var(--line);
    padding-left: var(--prob-aire);
}
.prob-t { font-size: clamp(21px, 2.6vw, 30px); font-weight: 500; letter-spacing: -0.025em; }
.prob-t.on { color: var(--green); }
.prob-p {
    margin-top: 18px; font-size: clamp(15px, 1.7vw, 18px);
    line-height: 1.65; color: var(--fg-faint); max-width: 46ch;
    /* Justificado (pedido del usuario, 18-sep-2026). El guionado evita los
       huecos grandes entre palabras en pantallas angostas. */
    text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}
/* El lado GPI va un escalón más presente que el lado "Hoy": el contraste de
   tinta es parte del argumento, igual que el verde del título. */
.prob-c:last-child .prob-p { color: var(--fg-muted); }

/* ─── El mini gráfico de cada mitad (18-sep-2026) ───
   Idea A de las cuatro que se le mostraron al usuario: las seis fuentes del
   texto, sueltas y torcidas en "Hoy"; las mismas seis confluyendo en un solo
   nodo en "Con GPI". Repite el mismo contraste que el resto de la sección:
   tinta `--fg-faint` de un lado, `--fg-muted` y verde del otro.
   ⚠️ viewBox de 400 y no más ancho: en un teléfono la columna mide ~350px y el
   texto del SVG escala con ella — con 460 los rótulos bajaban a 8px. */
.pg { display: block; width: 100%; max-width: 440px; height: auto; margin-bottom: clamp(18px, 2.4vw, 26px); overflow: visible; }
.pg text { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-anchor: middle; }
.pg-hoy rect { fill: none; stroke: var(--fg-faint); }
.pg-hoy .pg-duda { stroke-dasharray: 3 4; }
.pg-hoy text { fill: var(--fg-faint); }
.pg-corte { fill: none; stroke: var(--line-strong); stroke-dasharray: 2 5; }
.pg-gpi rect { fill: var(--bg); stroke: var(--line-strong); }
.pg-gpi text { fill: var(--fg-muted); }
.pg-hilo { fill: none; stroke: var(--green); stroke-width: 1.2; opacity: 0.7; }
.pg-nodo { fill: var(--green); }
.pg .pg-nodo-t { fill: var(--green-100); font-size: 13px; font-weight: 600; }

@media (max-width: 820px) {
    .prob { grid-template-columns: 1fr; }
    .prob-k { text-align: left; }
    .prob-c:first-child { padding-right: 0; padding-bottom: clamp(24px, 5vw, 32px); }
    .prob-c + .prob-c {
        border-left: 0; border-top: 1px solid var(--line);
        padding-left: 0; padding-top: clamp(24px, 5vw, 32px);
    }
    .prob-p { max-width: none; }
}

/* Menciones que no llevan mockup propio: se nombran, no se desarrollan. */
.cober { margin-top: 11px; font-size: 13px; line-height: 1.6; color: var(--fg-faint); }

/* Mercado se comprime sin perder ningún mockup: menos aire y escala menor. */
.b-full.compacto .bf-grid { gap: clamp(16px, 2vw, 26px); }
.b-full.compacto .bf-in { gap: 12px; }
.b-full.compacto .bf-cap { font-size: 13.5px; margin-bottom: 9px; }
.b-full.compacto .bf-cap i { font-size: 11.5px; }
.b-full.compacto .evo svg, .b-full.compacto .chart svg { height: 92px; }
.b-full.compacto .sk b { font-size: 16px; }
.b-full.compacto .mk-r, .b-full.compacto .ma { padding-block: 7px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Cabeceras de tabla (27-ago-2026)

   Los nombres de columna iban en `--fg-faint` sobre el mismo fondo que las
   filas: no se leían como cabecera. El usuario lo pidió para posiciones,
   movimientos y retorno por rubro; se aplicó a **todas** las tablas, porque el
   problema era el mismo en todas y una landing con dos criterios distintos de
   cabecera se lee peor que con uno solo.

   El fondo es `--bg` sobre `--bg-elev`: en oscuro la cabecera queda más
   hundida, en claro más gris. Igual que la plataforma. Si se agrega una tabla
   nueva, su fila de encabezado entra en esta lista.
   ════════════════════════════════════════════════════════════════════════════ */
.po-h, .mv-h, .lt-h, .di-h, .gr-head, .sr-h, .mr-h, .ds-h, .cm-h, .eq-h, .tp-h {
    background: var(--bg); border-bottom: 1px solid var(--line-strong);
}
.po-h span, .mv-h span, .lt-h span, .di-h span, .gr-head span, .sr-h span,
.mr-h span, .ds-h span, .cm-h span, .eq-h span, .tp-h span {
    font-weight: 600; color: var(--fg-muted);
}
.lt-h span.k { color: var(--green); }


/* ─── Campaña repartida y equipo comercial (solo ALyC) ──────────────────────
   El plus que el usuario marcó como "muy importante" y estaba solo enunciado en
   una viñeta: el objetivo repartido productor por productor, con el avance
   medido contra operaciones reales, y el alta de asesores con su alcance. */
.camp-h {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px; background: var(--line); border-bottom: 1px solid var(--line);
}
.camp-o { background: var(--bg-elev); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.camp-o i {
    font-style: normal; font-family: var(--mono); font-size: 8.5px;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-faint);
}
.camp-o b { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; }

.camp { display: flex; flex-direction: column; margin-top: 10px; }
.cm {
    display: grid; grid-template-columns: 82px 64px 64px 48px minmax(60px, 1fr);
    gap: 10px; align-items: center; padding: 9px 15px;
    border-bottom: 1px solid var(--line); font-size: 11px; color: var(--fg-muted);
}
.cm:last-child { border-bottom: 0; }
.cm span:nth-child(2), .cm span:nth-child(3), .cm span:nth-child(4) { text-align: right; }
.cm .num { color: var(--fg); }
.cm .num.warn { color: var(--warning); }
.cm-b { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.cm-b i { display: block; height: 100%; border-radius: 999px; background: var(--green); }
.cm-b i.w { background: var(--warning); }

.eq { display: flex; flex-direction: column; }
.eq-r {
    display: grid; grid-template-columns: 82px 56px 96px 96px 76px;
    gap: 10px; align-items: center; padding: 9px 15px;
    border-bottom: 1px solid var(--line); font-size: 11px; color: var(--fg-muted);
}
.eq-r:last-child { border-bottom: 0; }
.eq-r span:nth-child(2), .eq-r span:nth-child(3) { text-align: right; }
.eq-r .num { color: var(--fg); }

/* ─── Acciones masivas ──────────────────────────────────────────────────────
   Estaban dibujadas como cuatro rótulos grises y el usuario no las vio: "en la
   foto no aparece el botón para descargar a Excel, mandar mensaje masivo u
   operar masivamente". Ahora son botones de verdad, con el principal en verde
   pleno, y se suma el filtro por perfil que el texto promete. */
.ms-f {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em;
    color: var(--fg-muted); border: 1px solid var(--line-strong);
    border-radius: 999px; padding: 4px 10px;
}
.ms-f b { font-weight: 600; color: var(--fg); }
.ms-f i { font-style: normal; color: var(--fg-faint); }

/* ─── Reveal ─── */
/* ═══ §8 · En el teléfono ════════════════════════════════════
   Las pantallas se DIBUJAN, como todos los mockups de la página. Las capturas
   que pasó el autor (27-ago-2026) sirvieron de referencia de layout —AUM +
   ratios, Clientes 360 con torta, agenda mensual— pero traían datos reales:
   acá los números, los tickers y los nombres son inventados.

   ⚠️ Los medidores usan verde / ––warning / ––danger. Es la única excepción
   a "el verde es el único acento": el semáforo ES el contenido del medidor,
   igual que `.up` / `.down` en los valores.
   ═══════════════════════════════════════════════════════════════════════ */
.fonos {
    margin-top: clamp(26px, 3.2vw, 42px);
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.8vw, 40px); align-items: start;
}
@media (max-width: 900px) {
    .fonos { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
}
.fono { margin: 0; }
/* Vista Cliente (18-sep-2026): el inicio del asesor y la agenda se colapsan, así
   que de los tres teléfonos queda uno. Centrado, al ancho de uno. */
[data-rol="cliente"] .fonos { grid-template-columns: minmax(0, 360px); justify-content: center; }
#telefono .rol-off { margin-top: clamp(26px, 3.2vw, 42px); }
.fono-w { margin-top: clamp(26px, 3.2vw, 42px); }

.tel {
    border: 1px solid var(--line-strong); border-radius: 30px;
    background: var(--bg); padding: 7px;
    box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 0.6);
}
.tel-in { border-radius: 24px; overflow: hidden; background: var(--bg); }
.tel-h { border-radius: 22px; }
.tel-h .tel-in { border-radius: 16px; }

.tel-st {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px 6px; font-family: var(--mono); font-size: 9px;
    color: var(--fg-faint);
}
.tel-bat {
    width: 17px; height: 8px; border: 1px solid var(--fg-faint); border-radius: 2px;
    display: block; padding: 1px;
}
.tel-bat::after { content: ''; display: block; width: 62%; height: 100%; background: var(--fg-faint); }

.tel-sc { padding: 9px 10px 11px; display: flex; flex-direction: column; gap: 8px; }
.tel-nav {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
    padding: 9px 6px 11px; border-top: 1px solid var(--line);
    font-size: 8px; text-align: center; color: var(--fg-faint);
}
.tel-nav .on { color: var(--green); font-weight: 600; }

/* Tarjetas de la pantalla */
.te-c {
    background: var(--bg-elev); border: 1px solid var(--line);
    border-radius: 12px; padding: 10px 12px;
}
.te-c.ctr { text-align: center; }
.te-c.row { display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.te-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.te-k {
    font-family: var(--mono); font-size: 8px; letter-spacing: 0.11em;
    text-transform: uppercase; color: var(--fg-faint);
}
.te-k2 { margin-top: 2px; font-size: 9.5px; color: var(--fg-faint); }
.te-big { margin-top: 6px; font-size: clamp(16px, 1.6vw, 20px); font-weight: 600; letter-spacing: -0.02em; }
.te-d { margin-top: 4px; font-size: 9.5px; }
.te-m { margin-top: 5px; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.te-g { margin-top: 2px; font-size: 15px; font-weight: 600; }
.te-gl { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.tag-n {
    background: var(--green); color: var(--green-100); border-radius: 999px;
    padding: 1px 7px; font-size: 9px;
}
.te-h { display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; font-weight: 600; }
.te-h span { font-family: var(--mono); font-size: 9px; font-weight: 400; color: var(--fg-faint); }

/* Medidor de aguja */
.medi { display: block; width: 100%; max-width: 92px; height: auto; margin: 5px auto 0; }
.medi path { fill: none; stroke-width: 9; }
.medi .g1 { stroke: var(--green); }
.medi .g2 { stroke: var(--warning); }
.medi .g3 { stroke: var(--danger); }
.medi line { stroke: var(--fg); stroke-width: 3; stroke-linecap: round; }
.medi circle { fill: var(--fg); }

/* Solapas de Clientes 360 */
.te-ch { display: flex; flex-wrap: wrap; gap: 4px; }
.te-ch span {
    padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--bg-elev); font-size: 8.5px; color: var(--fg-muted);
}
.te-ch .on { background: var(--green-soft); border-color: var(--green); color: var(--green); font-weight: 600; }

/* Torta de monedas: misma técnica que `.cmp-pie` (circunferencia 100, los
   valores del HTML son directamente los porcentajes). Rampa por opacidad. */
.te-pie { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
.tpie { flex: 0 0 auto; width: 88px; height: 88px; transform: rotate(-90deg); }
.tpie circle { fill: none; stroke-width: 8; stroke: var(--green); }
.tpie .s1 { opacity: 1; }
.tpie .s2 { opacity: 0.78; }
.tpie .s3 { opacity: 0.58; }
.tpie .s4 { opacity: 0.4; }
.tpie .s5 { opacity: 0.26; }
.te-leg { list-style: none; display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; font-size: 9.5px; color: var(--fg-muted); }
.te-leg li { display: flex; align-items: center; gap: 6px; }
.te-leg i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px; background: var(--green); }
.te-leg .s1 { opacity: 1; }
.te-leg .s2 { opacity: 0.78; }
.te-leg .s3 { opacity: 0.58; }
.te-leg .s4 { opacity: 0.4; }
.te-leg .s5 { opacity: 0.26; }
.te-leg b { margin-left: auto; font-weight: 500; color: var(--fg); }

/* Agenda */
.te-tg { align-self: flex-start; display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.te-tg span { padding: 3px 11px; font-size: 8.5px; color: var(--fg-muted); }
.te-tg .on { background: var(--green-soft); color: var(--green); font-weight: 600; }
.tcal { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.tcal-h, .tcal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.tcal-h span { text-align: center; font-family: var(--mono); font-size: 7.5px; color: var(--fg-faint); }
.tcal-g { margin-top: 5px; }
.tcal-g span {
    aspect-ratio: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; border-radius: 6px;
    font-size: 9px; color: var(--fg-muted);
}
.tcal-g .on { border: 1px solid var(--green); color: var(--fg); font-weight: 600; }
.tcal-g b { font-weight: inherit; }
.tcal-g u { display: flex; gap: 2px; height: 3px; text-decoration: none; }
.tcal-g u i { width: 3px; height: 3px; border-radius: 50%; background: var(--green); }
.tev {
    background: var(--bg-elev); border: 1px solid var(--line);
    border-left: 2px solid var(--green); border-radius: 10px; padding: 7px 9px;
}
.tev-t { font-size: 10.5px; font-weight: 500; }
.tev-t i { font-style: normal; color: var(--fg-faint); }
.tev-m { margin-top: 3px; font-family: var(--mono); font-size: 8.5px; color: var(--fg-faint); }

/* Tabla apaisada */
.tp-r {
    display: grid; grid-template-columns: 1.1fr 1fr 0.9fr 0.8fr 1fr 1.2fr 0.8fr;
    gap: 10px; padding: 9px clamp(12px, 1.6vw, 20px); font-size: clamp(10px, 1.05vw, 12px);
}
.tp-r + .tp-r { border-top: 1px solid var(--line); }
.tp-r span:not(:first-child) { text-align: right; }
.tp-r span:first-child { font-weight: 500; }
.tp-h span { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.tp-t { background: var(--green-soft); }
.tp-t span:first-child {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--green);
}


/* ═══ §10 · Una sola fuente de verdad ══════════════════════════════════
   El diagrama es parte del argumento, no un adorno. Reglas que NO se pueden
   perder si se lo toca:
   1. Son DOS actores. El cálculo y las pantallas son ambos GPI y viven dentro
      de UN solo contenedor (`.fv-b`). Si se leen tres cajas en fila, falló.
   2. Las dos flechas son distintas: la de entrada cruza el límite entre dos
      sistemas (sólida, marcada); la interna no cruza nada (punteada).
   3. Las etiquetas llevan el argumento y van en mono, verde.
   4. Sin candados ni escudos: esto habla de procedencia, no de seguridad.
   ═══════════════════════════════════════════════════════════════════════ */
.fv-txt { margin-top: clamp(18px, 2.4vw, 28px); max-width: 66ch; display: flex; flex-direction: column; gap: 14px; }
.fv-txt p { font-size: clamp(15px, 1.7vw, 18px); line-height: 1.65; color: var(--fg-muted); }
.fv-txt b { color: var(--fg); font-weight: 600; }

.fv {
    margin-top: clamp(30px, 4vw, 50px);
    display: grid; grid-template-columns: minmax(0, 0.8fr) auto minmax(0, 2.1fr);
    column-gap: clamp(10px, 1.6vw, 22px); row-gap: 12px; align-items: stretch;
}
.fv-a, .fv-b {
    border: 1px solid var(--line-strong); border-radius: 16px;
    background: var(--bg-elev); padding: clamp(16px, 2.2vw, 26px);
}
.fv-b { border-color: var(--green); display: flex; flex-direction: column; }
.fv-t {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--fg-faint); margin-bottom: 14px;
}
.fv-b .fv-t { color: var(--green); }

/* Lado ALyC: el dato como sale del sistema. Denso, sin formatear, y recortado
   por abajo con una máscara para que se lea "hay más de esto". */
.fv-rk {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--fg-muted); margin-bottom: 6px;
}
.fv-rk + .fv-rw { margin-bottom: 16px; }
.fv-rw {
    display: flex; flex-direction: column; gap: 3px; overflow: hidden;
    font-family: var(--mono); font-size: clamp(9px, 0.95vw, 11px);
    color: var(--fg-faint); white-space: nowrap;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 62%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 62%, rgba(0, 0, 0, 0) 100%);
}

/* La transformación: cuatro cálculos, no cuatro viñetas. */
.fv-proc { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; }
.fv-proc li {
    padding: 6px 11px; border: 1px solid var(--green); border-radius: 999px;
    background: var(--green-soft); color: var(--green);
    font-size: clamp(11.5px, 1.2vw, 13px); font-weight: 500;
}

/* Lo que sale: gráficos, posiciones y resultado, uno por alcance. */
.fv-out {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 1.4vw, 18px);
}
.fo {
    display: flex; flex-direction: column; gap: 8px;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--bg); padding: 12px;
}
.fo figcaption {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--fg-muted);
}
.fo-p { font-size: 11.5px; line-height: 1.4; color: var(--fg-faint); margin-top: auto; }

.fo-bar { display: block; width: 100%; height: 44px; }
.fo-bar rect { fill: var(--green); opacity: 0.4; }
.fo-bar rect:nth-child(n+6) { opacity: 0.68; }
.fo-bar rect:nth-child(n+8) { opacity: 1; }

.fo-t { display: flex; flex-direction: column; }
.fo-r {
    display: flex; justify-content: space-between; gap: 8px;
    padding: 4px 6px; font-size: 10.5px; color: var(--fg-muted);
}
.fo-r .num { color: var(--fg); }
.fo-tot { background: var(--green-soft); border-radius: 5px; }
.fo-tot span, .fo-tot .num { color: var(--green); }
.fo-gr { background: var(--row-1); border-radius: 5px; }

.fo-d { display: flex; align-items: center; gap: 10px; }
.fo-pie { flex: 0 0 auto; width: 46px; height: 46px; transform: rotate(-90deg); }
.fo-pie circle { fill: none; stroke-width: 8; stroke: var(--green); }
.fo-pie .s2 { opacity: 0.66; }
.fo-pie .s3 { opacity: 0.36; }
.fo-n { font-size: 15px; font-weight: 600; }

.fv-arr { display: flex; align-items: center; justify-content: center; }
.fv-arr svg { width: 100%; max-width: 60px; height: 16px; }
.fv-arr-in { padding: 14px 0; }
.fv-arr-in svg { width: 16px; max-width: none; height: 34px; }
.fv-ln, .fv-pt { fill: none; stroke: var(--fg-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fv-arr-in .fv-ln, .fv-arr-in .fv-pt { stroke: var(--fg-faint); stroke-width: 1.5; }
.fv-pun { stroke-dasharray: 3 4; }
.fv-lab {
    font-family: var(--mono); font-size: clamp(9.5px, 1vw, 11px);
    letter-spacing: 0.05em; color: var(--green); text-align: center;
}
.lb1 { grid-column: 2; }
.lb2 { grid-column: 3; }
@media (max-width: 900px) {
    .fv { grid-template-columns: 1fr; }
    .fv > .fv-arr:not(.fv-arr-in) svg { transform: rotate(90deg); }
    .fv-a { order: 1; }
    .fv > .fv-arr:not(.fv-arr-in) { order: 2; }
    .lb1 { order: 3; grid-column: 1; }
    .fv-b { order: 4; }
    .lb2 { order: 5; grid-column: 1; }
}
@media (max-width: 560px) { .fv-out { grid-template-columns: 1fr; } }

/* ═══ §11 · Cómo se implementa ══════════════════════════════════════
   Es el único lugar de la página donde el numerado sobrevive: acá el orden es
   real. `.paso-hito` marca la conciliación contra los datos de la ALyC, que es
   el hito que enlaza con §10 y la prueba de que no habrá dos verdades. */
.pasos {
    list-style: none; margin-top: clamp(28px, 3.6vw, 46px);
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 26px);
}
.paso {
    display: flex; flex-direction: column; gap: 8px;
    border: 1px solid var(--line); border-radius: 16px;
    background: var(--bg-elev); padding: clamp(18px, 2.2vw, 28px);
}
.paso-n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--fg-faint); }
.paso-t { font-size: clamp(16px, 1.7vw, 19px); font-weight: 600; letter-spacing: -0.02em; }
.paso-d { font-size: clamp(13.5px, 1.4vw, 15px); line-height: 1.6; color: var(--fg-muted); }
.paso-hito { border-color: var(--green); background: var(--green-soft); }
.paso-hito .paso-n { color: var(--green); }
@media (max-width: 900px) { .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pasos { grid-template-columns: 1fr; } }

/* Contacto y titularidad en el pie: sin esto la página se ve anónima.
   ⚠️ El plan escribe `clientes@gpi.com.ar`; el dominio real es
   gpintelligence.com.ar y es el que se publica. */
.f-sede {
    padding-top: 10px; font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.04em; color: var(--fg-faint);
}
.f-sede a { color: var(--fg-muted); text-decoration: none; }
.f-sede a:hover { color: var(--green); }


.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   EL SEMÁFORO GANA SIEMPRE (10-sep-2026)

   ⚠️ Casi veinte mockups declaran `.X .num { color: var(--fg) }` para que sus
   cifras salgan en tinta plena — `.mv`, `.lt`, `.po`, `.gr`, `.di`, `.cm`… — y
   esa especificidad (0,2,0) le ganaba a `.up` / `.down` (0,1,0). Resultado: los
   importes marcados como positivos o negativos se veían en negro. El usuario lo
   detectó en la tabla de movimientos, pero pasaba en TODAS.

   Va al final del archivo a propósito: tiene el mismo peso que aquellas reglas,
   así que lo que decide es el orden del documento y acá es la última palabra.
   Si algún día hace falta una cifra en tinta plena a pesar del signo, se le
   saca la clase — no se pelea con esta regla.
   ═══════════════════════════════════════════════════════════════════════════ */
.num.up { color: var(--green); }
.num.down { color: var(--danger); }