/* ============================================================================
 * vilnux.css — la piel de la marca vilnux sobre el escaparate.
 *
 * Se inyecta ANTES de </head> (no después de <head>) a propósito: varias páginas
 * traen su propio `:root{--accent:#0B5CFF}` en un <style> inline, y con la misma
 * especificidad gana el que va DESPUÉS en el documento. Si esto se mueve arriba,
 * precios/audit/leaderboard vuelven al cobalto en silencio.
 *
 * NO redefine layout. El HTML es el mismo que sirve la marca de casa: aquí solo
 * entran color, tipo y el motivo de la marca. Cualquier regla que mueva una caja
 * de sitio es señal de que el cambio debería estar en la página, no aquí.
 *
 * ─── LA DIRECCIÓN ──────────────────────────────────────────────────────────
 * La marca es la `v` del logotipo cruzada por una línea de barrido: lo que queda
 * por debajo está iluminado. Es el producto en una forma. Esa construcción
 * —tinta arriba, señal abajo, 2 px de línea entre medias— es lo que se aplica a
 * escala de página, y es lo único a lo que se le permite ser llamativo.
 *
 * Las reglas que gobiernan este fichero (de brand-vilnux/README.md):
 *  1. El naranja es SEÑAL, no decoración: una cosa por pantalla.
 *  2. Las cifras van en Geist Mono tabular. Un producto de medición no escribe
 *     números en la fuente del texto.
 *  3. El papel es cálido (#FAFAF7) a propósito: el sector entero usa #fff frío.
 *
 * Y una que se hereda de brand.css y NO se toca: el botón primario es NEGRO.
 * Un botón naranja de esquinas redondas es la firma exacta de la plantilla
 * generada, y además gastaría la señal donde menos informa.
 * ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&display=swap");

:root{
  /* — papel y tinta — */
  --paper:#FAFAF7;
  --surface:#FFFFFF;          /* las tarjetas SÍ son blancas: así levantan del papel */
  --surface-2:#F2F1EB;
  --black:#0B0C0E;            /* las secciones "negras" pasan a la tinta de la marca */
  --line:#E4E2DB;
  --line-2:#D8D5CC;

  --ink:#0B0C0E;
  --ink-2:#3A3D42;
  --ink-mute:#6B7079;
  --on-black:#EDEDE8;         /* sobre tinta: hueso, nunca blanco puro */
  --on-black-mute:#8A9099;

  /* — la señal — */
  --signal:#FF4A1C;
  --accent:#FF4A1C;
  --accent-2:#C93A0F;
  --accent-weak:#FFEAE3;
  --accent-glow:rgba(255,74,28,.24);

  /* El halo de las tarjetas. Aquí el plan recomendado NO usa un halo verde aparte: en esta
   * marca el verde es la semántica del dato ("apareces"), y un plan no aparece en ningún
   * sitio. El destacado lleva la señal, igual que su cinta y su botón. */
  --glow-card:0 0 0 1.5px rgba(255,74,28,.80), 0 0 30px rgba(255,74,28,.22), 0 22px 55px rgba(11,12,14,.18);
  --glow-pro:0 0 0 1.5px rgba(255,74,28,.90), 0 0 34px rgba(255,74,28,.30), 0 22px 55px rgba(11,12,14,.20);
  --glow-btn:0 10px 30px -8px rgba(255,74,28,.38);
  --glow-focus:0 0 0 3px rgba(255,74,28,.20);

  /* — el dato —
   * "No apareces" ES el mensaje del producto, así que lleva el color de la marca:
   * el rojo genérico y el naranja de señal son aquí el mismo concepto, y tenerlos
   * a la vez (#D6301C junto a #FF4A1C) solo da dos rojos que compiten. "Apareces"
   * se aparta a un verde apagado para que no discuta con la señal. */
  --neg:#FF4A1C;  --neg-weak:#FFEAE3;
  --pos:#2E7D6B;  --pos-weak:#E6F0ED;
  --warn:#9A6200; --warn-weak:#FBF1DE;

  --pro:var(--pos); --pro-weak:var(--pos-weak); --pro-line:#C6DCD5;
  --bg:var(--paper); --text:var(--ink); --text-2:var(--ink-2); --mute:var(--ink-mute);

  /* — tipo —
   * Geist se queda (es la cara de la marca). Cambia la fuente de las cifras: IBM
   * Plex Mono es la de otra herramienta del sector; Geist Mono es la pareja de la
   * nuestra y hace bloque con el texto. */
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --h1-tracking:-0.035em;     /* algo más apretado que la marca de casa */

  --sweep:2px;                /* el grosor de la línea. No cambiar: es la marca. */
  --vx-ease:cubic-bezier(.2,.8,.2,1);
}

/* Nombres de token propios de leaderboard.html, que trae su paleta aparte. */
:root{ --accent2:#C93A0F; --soft:#FFEAE3; --ink2:#3A3D42; }

/* ---------------------------------------------------------------- tipografía */

/* Los rótulos pequeños en mono, versalitas y muy espaciados: es la textura de un
 * panel de medida. Es también lo que más separa esta web de la de casa sin mover
 * una sola caja.
 *
 * Solo entran RÓTULOS de dos o tres palabras. Aquí estaban también `.tagline` y los
 * pies de figura, y era un error de bulto: son frases enteras ("Foto fija mensual de
 * tu visibilidad, al precio más bajo"), y una frase en versalitas monoespaciadas no
 * se lee — parece el mensaje de error de una máquina. */
.eyebrow,.diff-tag,.ans__eng,.logos__head{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.72rem;
  font-weight:500;
}
.eyebrow,.logos__head{ color:var(--ink-mute); }

/* Cifras: mono y tabulares en todo lo que sea una medida. */
.num,.kpi__value,.price,.stat,.ans__n,.chip__v{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

/* --------------------------------------------------------- el motivo: barrido */

/* La frase pintada del titular. Una por página: si pintas dos, no has elegido.
 *
 * Llevó un rato la línea de barrido debajo, y hubo que quitarla: la frase pintada
 * ocupa tres líneas en las dos portadas, el fondo se repite por cada renglón y salían
 * tres filetes de anchos distintos, uno de ellos pegado al párrafo de abajo como si
 * fuera suyo. Un motivo que en un sitio significa "hasta aquí ha llegado la medición"
 * y en otro es un subrayado suelto ha dejado de ser un motivo. El titular ya carga
 * bastante con ir en señal. */
h1 em,.accent{ color:var(--signal); font-style:normal; }

/* Las reglas horizontales dejan de ser un gris de separación y pasan a ser el
 * barrido: marca hasta dónde ha llegado la medición. */
.rule{ border:0; height:var(--sweep); background:linear-gradient(90deg,var(--signal),var(--line) 55%,transparent); }

/* Cabecera de sección: una marca de barrido corta encima del H2, no un filete
 * completo. El filete separa; esta marca señala. */
.sec-head{ position:relative; padding-top:22px; }
.sec-head::before{
  content:""; position:absolute; top:0; left:0;
  width:44px; height:var(--sweep); background:var(--signal);
}
/* …salvo en la sección que va justo detrás del héroe. Ahí el barrido del héroe ya ha
 * dibujado su línea a lo ancho, y el tick caía 90 px por debajo: dos marcas naranjas
 * seguidas que no se leen como dos cosas, sino como una línea rota y repetida. Las dos
 * dicen lo mismo —"aquí acaba una parte"— y en ese punto sobra una. */
.hero + .sec-head::before{ display:none; }

/* EL MOMENTO: el barrido cruza el héroe al cargar y se queda como su borde.
 * Es lo único que se mueve en toda la página. */
.hero{ position:relative; }
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px;
  height:var(--sweep); background:var(--signal);
  transform:scaleX(0); transform-origin:left center;
  animation:vx-sweep 1.05s var(--vx-ease) .2s both;
}
@keyframes vx-sweep{ to{ transform:scaleX(1); } }

@media (prefers-reduced-motion:reduce){
  .hero::after{ animation:none; transform:scaleX(1); }
}

/* --------------------------------------------------------------- componentes */

/* El lockup ya viene tipografiado dentro del SVG: la caja oscura que sujetaba el
 * radar sobra, y aplastaría la `v`. */
.brand--vx .mark{ background:none; width:auto; height:auto; border-radius:0; display:block; }
.brand--vx .brand__txt{ display:none; }      /* el nombre ya está en el logotipo */

/* El tamaño del lockup, medido y no estimado — que es como se fijaron los del resto del
 * sistema (ver la cabecera de brand.css).
 *
 * Referencia pedida: llmpulse.ai. Su lockup mide ~164 × 26 px con el menú a ~15 px. El
 * nuestro estuvo primero a 26 px de alto (102 px de ancho) y luego a 34, y aun siendo MÁS
 * ALTO que el suyo se seguía viendo pequeño. El motivo no es la altura: su marca es una
 * grotesca negra de 28 px —mucha tinta— y la `vilnux` es de trazo fino, así que a igualdad
 * de caja pesa la mitad. Lo que hay que igualar es la PRESENCIA, o sea el ancho.
 *
 * A 44 px el lockup mide ~132 px de ancho, ya en el orden del suyo, y la cabecera queda en
 * 84 px (la suya ronda los 72). Subir más obligaría a rehacer la cabecera entera. */
.brand--vx .vx-logo{ height:44px; width:auto; display:block; color:var(--ink); }
@media(max-width:560px){ .brand--vx .vx-logo{ height:32px; } }

/* El producto del héroe: la respuesta de la IA. La fila de "tu marca" ya venía con
 * su recuadro por el token del dato; solo hay que asegurar el texto. (Aquí había
 * además una línea de barrido encima de la fila: con el recuadro ya puesto eran dos
 * filetes pegados diciendo lo mismo.) */
.ans__you{ color:var(--signal); }
.ans__you b{ color:var(--signal); }

/* ── Los botones ──────────────────────────────────────────────────────────────
 * Las páginas pintan el botón lleno con `background:var(--accent)`. Con la señal
 * ahí, la página de precios salía con CUATRO botones naranjas en fila: eso ya no es
 * una señal, es el color corporativo puesto en todas partes — y un botón lleno de
 * color con las esquinas redondeadas es exactamente la firma de la plantilla que
 * brand.css lleva escrito que no se haga.
 *
 * Así que el botón va en TINTA, como el del héroe de la portada (que ya lo estaba:
 * la web se contradecía a sí misma entre páginas). Y el naranja se gasta en un solo
 * sitio de esa pantalla: el plan recomendado. Eso es lo que hay que mirar.
 *
 * Va por selectores y no cambiando `--accent`, porque el mismo token pinta la frase
 * del titular y el dato, que SÍ tienen que ir en señal. */
/* ⚠️ `.pricing .cta--primary` va enumerado aparte y no sobra: la portada cualifica
 * esos botones con el contenedor, así que su regla pesa más que un `.cta--primary`
 * a secas por muy abajo que esté esta hoja. Se vio en la captura de la página
 * entera: los de la página de precios ya estaban en tinta y los de la portada
 * seguían naranjas, con el mismo HTML. La especificidad no la arregla el orden. */
.cta--primary,.pricing .cta--primary,
.free-strip__cta,.contact__mail,.consult__cta,.cform__submit,.cycle__b.is-on{
  background:var(--ink); color:var(--paper);
}
.cta--primary:hover,.pricing .cta--primary:hover,
.free-strip__cta:hover,.contact__mail:hover,.consult__cta:hover,.cform__submit:hover{
  background:#000;
}
.cta--ghost{ color:var(--ink); }
.cta--ghost:hover{ border-color:var(--signal); background:var(--accent-weak); }

/* El plan recomendado: la cinta y su botón son la única cosa en señal de la página.
 * Iban en el verde de "apareces", que en esta marca es una semántica del DATO — un
 * plan no "aparece" en ningún sitio, y verde y naranja juntos se enturbian. */
.ribbon,.pricing .ribbon,.cta--pro,.pricing .cta--pro{ background:var(--signal); color:#fff; }
.cta--pro:hover,.pricing .cta--pro:hover{ background:var(--accent-2); }

/* Enlaces de texto: tinta subrayada, no naranja. Si los enlaces fueran de señal,
 * la señal dejaría de serlo (regla 1: una cosa por pantalla). */
.prose a,p a{ color:var(--ink); text-decoration-color:var(--line-2); text-underline-offset:3px; }
.prose a:hover,p a:hover{ text-decoration-color:var(--signal); }

/* Foco visible sobre papel cálido: el gris por defecto del navegador se pierde. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:var(--sweep) solid var(--signal); outline-offset:3px; border-radius:2px;
}

/* El degradado azul→violeta de la barra "tú" del ranking no existe en esta marca. */
.fill--you{ background:var(--signal) !important; }

/* ============================================================================
 * EL PANEL (/app)
 *
 * Va por otro sistema de diseño: styles.css nombra sus propios tokens y nunca recibió el
 * rediseño del escaparate. Casi todos coinciden con los de arriba —por eso el grueso del
 * color ya cambia solo— y aquí quedan los cinco que no.
 *
 * El color que se pinta desde JavaScript (gráficas, mapas de calor, el acento de los KPI)
 * NO se arregla desde aquí: un atributo `fill` de SVG no resuelve var(). Lo resuelve
 * charts.js leyendo --accent al cargar y repartiéndolo por window.Charts.BRAND.
 * ========================================================================== */

:root{
  --surface-3:#EAE8E1;        /* el tercer gris del panel, en cálido */
  --line-strong:#D8D5CC;
  --text-mute:#8A9099;
  --font:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* El logotipo del panel era un ◈ dentro de un cuadrado con degradado. Aquí lo sustituye el
 * lockup en línea (lo pinta site-brand.js), así que la caja sobra: sin esto, la `v` sale
 * aplastada dentro de 34×34 px y con un degradado detrás. */
.brand--vx .brand__mark{
  width:auto; height:auto; background:none; box-shadow:none; border-radius:0; display:block;
}
.brand--vx .brand__text{ display:none; }   /* el nombre ya está dentro del logotipo */

/* ⚠️ Acotado a .sidebar a propósito. Sin eso, esta regla y la del lockup del escaparate
 * tienen la MISMA especificidad, gana la última del fichero —esta— y el logotipo de la
 * portada se encogía a la medida del panel sin que nada fallara. Pasó justo aquí. */
.sidebar .brand--vx .vx-logo{ height:30px; width:auto; display:block; color:var(--ink); }
