/* ============================================================================
   marketing.css — capa oscura del sistema de diseño para la web pública
   Creado el 3-sep-2026 en la revisión de diseño.

   POR QUÉ EXISTE. verixa-ds.css define el sistema (Riviera #018ADA, Manrope,
   Inter, JetBrains Mono, escala y espaciado) pero SOLO en claro, porque nació
   para la aplicación. La landing es oscura, así que no podía usarlo: medido el
   3-sep, landing.html llevaba 51 hexadecimales sueltos y CERO usos de var(--vx-*).
   Esta capa traduce el mismo sistema a superficie oscura. El acento, la escala
   tipográfica y el ritmo son los mismos que en la app; solo cambia el fondo.

   CÓMO SE USA. Se carga DESPUÉS de verixa-ds.css y ANTES de los <style> de la
   plantilla. Es aditiva: define tokens --vxm-* y un puñado de utilidades. No
   pisa nada de la aplicación.
   ============================================================================ */

:root{
  /* — superficies, de más honda a más alta — */
  --vxm-void:      #060d17;   /* fondo de página, el más hondo */
  --vxm-bg:        #0a1626;   /* superficie base de sección */
  --vxm-bg-2:      #0e1d31;   /* sección alterna */
  --vxm-surface:   #112339;   /* tarjeta */
  --vxm-surface-2: #162b45;   /* tarjeta elevada / hover */

  /* — tinta — */
  --vxm-text:      #eaf1f9;   /* texto principal */
  --vxm-text-2:    #a9bbd0;   /* secundario: párrafos largos */
  --vxm-text-3:    #7288a4;   /* terciario: pies, etiquetas */

  /* — líneas — */
  --vxm-line:      rgba(150,185,225,.14);
  --vxm-line-2:    rgba(150,185,225,.24);

  /* — acento: el MISMO Riviera de la aplicación, subido para fondo oscuro — */
  --vxm-acc:       #33a3e8;
  --vxm-acc-2:     #6cc2f4;
  --vxm-acc-deep:  #018ADA;
  --vxm-acc-soft:  rgba(51,163,232,.12);
  --vxm-acc-line:  rgba(51,163,232,.30);

  /* — semánticos, solo para estado; nunca como color de marca — */
  --vxm-ok:        #4cc98a;
  --vxm-ok-soft:   rgba(76,201,138,.12);
  --vxm-warn:      #e0a84a;
  --vxm-warn-soft: rgba(224,168,74,.12);

  /* — tipografía: la del sistema, sin serif de acento — */
  --vxm-display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vxm-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vxm-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* — escala: una sola, para que dos secciones nunca compitan — */
  --vxm-d1: clamp(2.2rem, 5.2vw, 3.6rem);   /* h1 */
  --vxm-d2: clamp(1.7rem, 3.4vw, 2.5rem);   /* h2 de sección */
  --vxm-d3: clamp(1.05rem, 1.6vw, 1.22rem); /* h3 de tarjeta */
  --vxm-lead: clamp(1rem, 1.3vw, 1.08rem);  /* entradilla */
  --vxm-body-size: .96rem;
  --vxm-small: .84rem;
  --vxm-label: .72rem;

  /* — ritmo vertical: una sección respira igual en toda la web — */
  --vxm-sec-y: clamp(72px, 9vw, 116px);
  --vxm-gap:   clamp(18px, 2.2vw, 28px);
  --vxm-radius: 14px;
  --vxm-radius-s: 9px;

  --vxm-shadow: 0 24px 60px -28px rgba(0,8,22,.85);
}

/* ---------------------------------------------------------------------------
   1 · CONTENIDO VISIBLE EN REPOSO
   Las clases anim-* ponían opacity:0 desde el CSS y esperaban a que el
   IntersectionObserver las revelara. Medido el 3-sep en producción: 26
   elementos con texto invisibles al cargar, en 5 de las 6 secciones. La página
   en reposo estaba vacía — miniatura, primera impresión y cualquier visita sin
   JavaScript veían un fondo azul sin nada.
   Ahora el ocultado solo se aplica si el documento lleva la clase .js, que un
   script en línea del <head> pone en cuanto se ejecuta. Sin JavaScript, con
   JavaScript lento o con un error, el contenido está ahí desde el primer píxel.
   --------------------------------------------------------------------------- */
html:not(.js) [class*="anim-"]{opacity:1 !important;transform:none !important}

/* ---------------------------------------------------------------------------
   3 · UTILIDADES DE COMPOSICIÓN
   --------------------------------------------------------------------------- */
.vxm-wrap{max-width: 1140px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 32px)}
.vxm-narrow{max-width: 760px}
.vxm-eyebrow{
  font-family: var(--vxm-mono); font-size: var(--vxm-label); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--vxm-acc);
}
.vxm-num{font-family: var(--vxm-mono); font-variant-numeric: tabular-nums}

/* ---------------------------------------------------------------------------
   4 · PANEL DE PRODUCTO
   El 16-ago el hero llevaba un panel con un caso real (un Clio). El 19-ago Álex
   lo quitó porque el caso no era representativo — decisión correcta: una cifra
   que no se sostiene destruye más confianza de la que gana. Pero al quitarlo, la
   web se quedó SIN ENSEÑAR EL PRODUCTO en ninguna página, y diez clases de CSS
   se quedaron muertas (.sx-prod, .sx-ph, .sx-pb, .sx-pm, .sx-ps, .sx-row,
   .sx-bar, .sx-leg, .sx-chip, .sx-ok: definidas, usadas cero veces).
   Esta versión enseña la ESTRUCTURA de lo que devuelve Verixa —las partidas y
   el criterio detrás de cada una— con las cifras marcadas como ejemplo en la
   propia pantalla. Enseña el producto sin afirmar una precisión no demostrada.
   --------------------------------------------------------------------------- */
.vxm-panel{
  background: linear-gradient(180deg, var(--vxm-surface), var(--vxm-bg));
  border: 1px solid var(--vxm-line); border-radius: 18px;
  box-shadow: var(--vxm-shadow), 0 0 0 1px var(--vxm-acc-soft);
  overflow: hidden; text-align: left;
}
.vxm-panel-h{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 13px 18px; border-bottom: 1px solid var(--vxm-line);
  background: rgba(6,13,23,.35);
}
.vxm-panel-h .t{display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0}
.vxm-tag{
  font-family: var(--vxm-mono); font-size: var(--vxm-label); font-weight: 600;
  letter-spacing: .08em; padding: 4px 9px; border-radius: 6px;
  background: var(--vxm-acc-soft); border: 1px solid var(--vxm-acc-line); color: var(--vxm-acc-2);
  white-space: nowrap;
}
.vxm-tag.ejemplo{background: var(--vxm-warn-soft); border-color: rgba(224,168,74,.32); color: var(--vxm-warn)}
.vxm-panel-h .veh{font-size: var(--vxm-small); color: var(--vxm-text-2)}
.vxm-panel-b{display: grid; grid-template-columns: 1.25fr .85fr}
.vxm-panel-m{padding: 6px 18px 16px; border-right: 1px solid var(--vxm-line); min-width: 0}
.vxm-line{
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--vxm-line);
}
.vxm-line:last-child{border-bottom: none}
.vxm-line .l{font-size: var(--vxm-small); color: var(--vxm-text); min-width: 0}
.vxm-line .l small{display: block; font-size: var(--vxm-label); color: var(--vxm-text-3); margin-top: 3px; line-height: 1.5}
.vxm-line .v{font-family: var(--vxm-mono); font-variant-numeric: tabular-nums; font-size: .92rem; color: var(--vxm-text); white-space: nowrap}
.vxm-line.total{border-top: 1px solid var(--vxm-line-2); border-bottom: none; margin-top: 4px; padding-top: 13px}
.vxm-line.total .l{font-weight: 600}
.vxm-line.total .v{font-size: 1.3rem; font-weight: 700; color: var(--vxm-acc-2)}
.vxm-panel-s{
  padding: 16px 18px; display: flex; flex-direction: column; gap: 12px;
  justify-content: center; background: rgba(6,13,23,.4); min-width: 0;
}
.vxm-panel-s .q{font-size: var(--vxm-small); line-height: 1.6; color: var(--vxm-text-2)}
.vxm-panel-s .q b{color: var(--vxm-text); font-weight: 600}
.vxm-panel-s .mini{font-family: var(--vxm-mono); font-size: var(--vxm-label); color: var(--vxm-text-3); line-height: 1.6}
@media (max-width: 820px){
  .vxm-panel-b{grid-template-columns: 1fr}
  .vxm-panel-m{border-right: none; border-bottom: 1px solid var(--vxm-line)}
}

/* ---------------------------------------------------------------------------
   5 · BANDA DE PRUEBA HONESTA
   Las seis marcas de confianza del §0.6 llevadas a pantalla: lo que se puede
   demostrar hoy se enseña con su fuente; lo que no, se enseña como hueco. Un
   hueco visible da más confianza que un número redondo sin respaldo.
   --------------------------------------------------------------------------- */
.vxm-prueba{display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--vxm-gap)}
.vxm-prueba > div{
  background: var(--vxm-surface); border: 1px solid var(--vxm-line);
  border-radius: var(--vxm-radius); padding: 22px 20px;
  display: flex; flex-direction: column;
}
.vxm-prueba .d{flex: 1}
.vxm-prueba .k{min-height: 2.2em}
.vxm-prueba .k{font-family: var(--vxm-mono); font-size: var(--vxm-label); letter-spacing: .1em; text-transform: uppercase; color: var(--vxm-text-3)}
.vxm-prueba .v{font-family: var(--vxm-display); font-size: 1.55rem; font-weight: 700; letter-spacing: -.01em; color: var(--vxm-text); margin: 10px 0 8px; line-height: 1.15; text-wrap: balance}
.vxm-prueba .v.cifra{font-family: var(--vxm-mono); font-variant-numeric: tabular-nums; font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em}
.vxm-prueba .v.pendiente{font-size: 1.2rem; color: var(--vxm-warn)}
.vxm-prueba .d{font-size: var(--vxm-small); color: var(--vxm-text-2); line-height: 1.55}
.vxm-prueba .f{font-size: var(--vxm-label); color: var(--vxm-text-3); margin-top: 10px; line-height: 1.5}

/* ---------------------------------------------------------------------------
   6 · REJILLA DE PRODUCTOS SECUNDARIOS
   La landing nombraba nueve productos con el mismo peso visual que el núcleo.
   Aquí van compactos, para que Peritación y KronoVO se lean como el producto y
   el resto como lo que hay alrededor.
   --------------------------------------------------------------------------- */
.vxm-mas{display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px}
.vxm-mas a{
  display: block; padding: 15px 17px; border-radius: var(--vxm-radius-s);
  border: 1px solid var(--vxm-line); background: var(--vxm-surface);
  text-decoration: none; transition: border-color .2s, background .2s, transform .2s;
}
.vxm-mas a:hover, .vxm-mas a:focus-visible{border-color: var(--vxm-acc-line); background: var(--vxm-surface-2); transform: translateY(-1px)}
.vxm-mas b{display: block; font-family: var(--vxm-display); font-size: .98rem; color: var(--vxm-text); font-weight: 700; margin-bottom: 5px}
.vxm-mas span{display: block; font-size: var(--vxm-small); color: var(--vxm-text-2); line-height: 1.5}

/* ---------------------------------------------------------------------------
   7 · FOCO VISIBLE
   Un teclado tiene que saber dónde está. Faltaba en toda la web pública.
   --------------------------------------------------------------------------- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--vxm-acc-2); outline-offset: 3px; border-radius: 4px;
}
