/* ═══════════════════════════════════════════════════════════════════════════
   FixrOS — PUENTE
   Engancha el vocabulario de clases que ya existe en las 41 plantillas a los
   componentes canónicos de components.css. Sustituye por completo a
   redesign.css.

   POR QUÉ EXISTE
   ─────────────────────────────────────────────────────────────────────────
   Había 217 selectores CSS dibujando una tarjeta y 37 clases de tarjeta en el
   markup. Reescribir el markup de 41 plantillas para usar .fx-card habría
   sido semanas de trabajo y el riesgo real está ahí: cada plantilla lleva
   i18n con fixros_t() y schema. Este fichero define UNA vez cada componente
   y hace que las 37 clases apunten a él. El resultado visual es idéntico al
   de reescribir el markup; el riesgo, una fracción.

   REGLA: aquí no se inventa nada. Si un valor no existe en tokens.css, se
   añade a tokens.css primero.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Los tokens heredados apuntan a los nuevos ─────────────────────────
   style.css usa --color-* y --font-brand en 8.320 líneas. En vez de tocarlas
   una a una, se redefinen para que apunten al sistema nuevo. Una línea aquí
   arregla cientos allí. */
:root {
  --font-brand:         var(--fx-font-display);
  --font-mono:          var(--fx-font-mono);
  --disp:               var(--fx-font-display);
  --font:               var(--fx-font-body);

  --color-ink:          var(--fx-neutral-900);
  --color-bolt:         var(--fx-brand-600);
  --color-os-dark:      var(--fx-navy-2);
  --color-os-light:     var(--fx-brand-300);
  --color-navy:         var(--fx-navy);
  --color-gray-text:    var(--fx-text-muted);
  --color-gray-bg:      var(--fx-bg-alt);
  --color-gray-border:  var(--fx-border);
  --color-white:        var(--fx-white);
  --color-success:      var(--fx-success);
  --color-error:        var(--fx-danger);
  --color-warning:      var(--fx-warning);
  --color-slogan:       var(--fx-text-subtle);

  --gradient-os:        linear-gradient(160deg, var(--fx-navy) 0%, var(--fx-navy-2) 100%);
  --gradient-os-light:  linear-gradient(135deg, var(--fx-brand-50) 0%, var(--fx-brand-100) 100%);

  --text-xs: var(--fx-text-xs);   --text-sm: var(--fx-text-sm);
  --text-base: var(--fx-text-md); --text-md: var(--fx-text-md);
  --text-lg: var(--fx-text-lg);   --text-xl: var(--fx-text-xl);
  --text-2xl: var(--fx-text-2xl); --text-3xl: var(--fx-text-3xl);
  --text-4xl: var(--fx-text-3xl); --text-5xl: var(--fx-text-4xl);

  --radius-sm: var(--fx-radius-sm);  --radius-md: var(--fx-radius-md);
  --radius-lg: var(--fx-radius-md);  --radius-pill: var(--fx-radius-pill);

  --shadow-card: var(--fx-shadow-sm);  --shadow-hover: var(--fx-shadow-md);
  --transition-base: var(--fx-dur-fast) var(--fx-ease);
  --transition-smooth: var(--fx-dur-base) var(--fx-ease);

  --space-section: var(--fx-section-y);
  --space-section-mob: var(--fx-section-y);

  /* vocabulario del rediseño anterior */
  --bg: var(--fx-bg); --bg-2: var(--fx-bg-alt); --bg-3: var(--fx-bg-sunken);
  --ink: var(--fx-neutral-900); --ink-2: var(--fx-text-muted);
  --mute: var(--fx-text-subtle); --line: var(--fx-border);
  --blue: var(--fx-brand-600); --blue-d: var(--fx-brand-700);
  --blue-t: var(--fx-brand-50); --blue-t2: var(--fx-brand-200);
  --night: var(--fx-navy); --night-2: var(--fx-navy-2);
  --ok: var(--fx-success); --ok-t: var(--fx-success-bg);
  --warn: var(--fx-warning); --warn-t: var(--fx-warning-bg);
  --err: var(--fx-danger); --err-t: var(--fx-danger-bg);
  --ease: var(--fx-ease); --r: var(--fx-radius-md); --r-l: var(--fx-radius-lg);
}

/* ── 2. LAYOUT: una sola vertical en toda la web ──────────────────────────
   La barra usa max-width 1200 + 24px de padding. Hero, secciones y pie
   comparten esa caja para que logo, titular y pie caigan a plomo. */
.section, .hero-section, .fxc-sec, .foto-showcase,
#el-problema, #capturas, #traccion, #como-funciona-home {
  padding-inline: 0;
}
.section, .fxc-sec,
#el-problema, #capturas, #traccion, #como-funciona-home {
  padding-block: var(--fx-section-y);
  margin-block: 0;
}
.section > .container,
.hero-section > .container,
.fxc-sec > .container,
.fixros-footer > .container,
.cta-final-section {
  width: 100%;
  max-width: var(--fx-container);
  margin-inline: auto;
  padding-inline: var(--fx-gutter);
  box-sizing: border-box;
}
.section--gray, .section.section--gray { background: var(--fx-bg-alt); }
/* el mosaico de fotos va a sangre: es la única excepción deliberada */
.foto-showcase { padding-block: 0; width: 100%; overflow: hidden; line-height: 0; }

/* ── 3. CABECERAS DE SECCIÓN ──────────────────────────────────────────── */

.section-title    { font-size: var(--fx-text-3xl); margin: 0; }
.section-subtitle { font-size: var(--fx-text-2xl); }
.section-desc, .hero-desc, .voz-ai-desc, .problema-bottom p {
  font-size: var(--fx-text-lg);
  line-height: var(--fx-leading-body);
  color: var(--fx-text-muted);
  font-weight: var(--fx-weight-medium);
}
.text-center:has(> .section-title) .section-desc { margin-inline: auto; }

/* dos tonos en titulares: gris para el matiz, marca para el acento */
.section-title .dim, .hero-subtitle .dim { color: var(--fx-text-subtle); }
.section-title .hl  { color: var(--fx-accent); }
.section--dark .section-title .hl,
.voz-ai-section .section-title .hl,
.hero-subtitle .hl { color: var(--fx-on-dark-accent); }

/* ── 4. BADGES / EYEBROWS — una sola píldora ──────────────────────────── */

.eyebrow, .hero-badge, .voz-ai-eyebrow, .home-blog-cat,
.diferencial-tag, .paraquien-chips span, .pf .chips span,
.plataforma-tools span, .mmock-badge, .mmock-tag, .blog-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--fx-space-2);
  /* Altura mínima, no fija. Con `height: 2rem` la píldora no crecía cuando el
     texto pasaba a dos líneas y la segunda quedaba FUERA del fondo: pasaba en
     el hero de la home a 393px, con «Sistema Operativo de la Propiedad
     Horizontal» (caja de 32px para 41px de texto). Con `min-height` más
     `padding-block`, una píldora de una línea sigue midiendo exactamente
     32px —6px de padding más 15px de línea se quedan por debajo del mínimo—
     así que no se mueve ninguna de las que ya estaban bien. */
  min-height: 2rem;
  padding-block: 0.375rem;
  padding-inline: var(--fx-space-4);
  text-align: center;
  border-radius: var(--fx-radius-pill);
  background: var(--fx-accent-soft);
  color: var(--fx-accent);
  font-family: var(--fx-font-body);
  font-size: var(--fx-text-xs);
  font-weight: var(--fx-weight-bold);
  line-height: 1.25;
  letter-spacing: var(--fx-tracking-wide);
  white-space: nowrap;
  box-sizing: border-box;
}
.eyebrow, .hero-badge, .voz-ai-eyebrow, .home-blog-cat, .blog-cat-chip { text-transform: uppercase; }
.paraquien-chips span, .pf .chips span, .plataforma-tools span {
  text-transform: none;
  letter-spacing: 0;
  background: var(--fx-bg-alt);
  color: var(--fx-text-muted);
}
.eyebrow::before { content: ""; width: .5rem; height: .5rem; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
/* la píldora de voz IA ya trae su propio punto en el markup */
.voz-ai-eyebrow::before { display: none; }
/* etiquetas largas: parten sin recortarse */
.diferencial-tag, .mmock-tag, .home-blog-cat {
  height: auto; min-height: 2rem;
  padding-block: var(--fx-space-2);
  white-space: normal;
  line-height: var(--fx-leading-snug);
}
/* La píldora se centra SÓLO si su contenedor está centrado. Centrarla
   siempre la descolgaba en las secciones a dos columnas de producto: la
   píldora al centro de su columna y el titular a la izquierda debajo. */
.eyebrow { width: fit-content; }
.text-center .eyebrow,
.text-center > .eyebrow { margin-inline: auto; }
.hero-badge, .voz-ai-eyebrow, .paraquien-hero .eyebrow {
  margin-inline: 0 auto;
}
/* Cristal SÓLO sobre superficie oscura o fotografía. `.demo-page-hero` NO
   entra: su hero es un degradado claro y con este tratamiento la píldora
   quedaba blanca sobre blanco. Se detecta la foto de verdad con :has(). */
.voz-ai-section .eyebrow, .traccion-section .eyebrow, #traccion .eyebrow,
.hero-badge, .paraquien-hero--photo .eyebrow,
section:has(> .hero-bg-img) .eyebrow, header:has(> .hero-bg-img) .eyebrow {
  background: rgba(255, 255, 255, 0.14);
  color: var(--fx-white);
  border: 1px solid var(--fx-on-dark-border);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ── 5. BOTONES — un solo componente ──────────────────────────────────── */

.btn, .btn-primary, .btn-secondary, .btn-ghost,
.btn-cta-final, .btn-cta-ghost, .home-blog-all, .paraquien-cta, .hero-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fx-space-3);
  height: 3rem;
  padding-inline: var(--fx-space-6);
  border: 1px solid transparent;
  border-radius: var(--fx-radius-pill);
  font-family: var(--fx-font-body);
  font-size: var(--fx-text-sm);
  font-weight: var(--fx-weight-bold);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  width: fit-content;
  box-sizing: border-box;
  transition: background var(--fx-dur-fast) var(--fx-ease),
              color var(--fx-dur-fast) var(--fx-ease),
              transform var(--fx-dur-base) var(--fx-ease),
              box-shadow var(--fx-dur-base) var(--fx-ease);
}
.btn-primary {
  background: var(--fx-brand-600); color: var(--fx-white);
  box-shadow: 0 8px 20px -10px rgba(18, 70, 255, .7);
}
.btn-primary:hover {
  background: var(--fx-brand-700); color: var(--fx-white);
  transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(18, 70, 255, .65);
}
.btn-secondary, .btn-ghost, .home-blog-all, .paraquien-cta {
  background: var(--fx-neutral-900); color: var(--fx-white);
}
.btn-secondary:hover, .btn-ghost:hover, .home-blog-all:hover, .paraquien-cta:hover {
  background: var(--fx-brand-600); color: var(--fx-white);
  transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(18, 70, 255, .55);
}
.btn-cta-final { background: var(--fx-white); color: var(--fx-neutral-900); }
.btn-cta-final:hover { color: var(--fx-neutral-900); transform: translateY(-1px); box-shadow: var(--fx-shadow-md); }
.btn-cta-ghost {
  background: rgba(255, 255, 255, .12); color: var(--fx-white);
  border-color: rgba(255, 255, 255, .28);
}
.btn-cta-ghost:hover { background: rgba(255, 255, 255, .2); color: var(--fx-white); }
/* sobre fotografía */
body.home .hero-actions .btn-ghost,
.paraquien-hero--photo .btn-secondary {
  background: rgba(255, 255, 255, .14) !important;
  color: var(--fx-white) !important;
  border: 1px solid rgba(255, 255, 255, .34) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
body.home .hero-actions .btn-ghost:hover { background: rgba(255, 255, 255, .24) !important; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; box-shadow: none; }

/* ── 6. TARJETAS — las 37 clases, una sola definición ─────────────────── */

/* .card-content NO va aquí: es el envoltorio interior de .solucion-card
   (en el sistema viejo sólo tenía position/z-index). Al meterlo en el grupo
   de tarjetas quedaban dos bordes concéntricos y padding doble, y en la
   rejilla de 5 la columna de texto se quedaba en 174px. */
.card-content { background: transparent; border: 0; box-shadow: none; padding: 0; }

.solucion-card, .trust-card, .kpi-card,
.diferencial-card, .paraquien-card, .paraquien-full-card, .problema-item,
.problema-card, .metrica-item, .home-blog-card, .fxc-card, .integ-card,
.role-card, .cmp-card, .contacto-card, .sn-stat-card, .sn-founder-card,
.aseg-regulatory-card, .aseg-regulatory-pillar, .traccion-kpi, .card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--fx-space-8);
  background: var(--fx-surface);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-md);
  box-shadow: var(--fx-shadow-sm);
  overflow: hidden;
  box-sizing: border-box;
  transition: transform var(--fx-dur-base) var(--fx-ease),
              box-shadow var(--fx-dur-base) var(--fx-ease),
              border-color var(--fx-dur-fast) var(--fx-ease);
}
.solucion-card:hover, .trust-card:hover,
.kpi-card:hover, .diferencial-card:hover, .paraquien-card:hover, .problema-item:hover,
.metrica-item:hover, .home-blog-card:hover, .fxc-card:hover, .integ-card:hover,
.role-card:hover, .cmp-card:hover, .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--fx-shadow-md);
  border-color: var(--fx-brand-200);
}
/* la tarjeta de problema avisa en rojo, es su función */
.problema-item:hover, .problema-card:hover { border-color: var(--fx-danger); }

/* iconos de tarjeta */
.solucion-icon, .card-icon, .trust-icon,
.diferencial-icon, .paraquien-icon-wrap, .problema-icon, .integ-icon {
  width: 2.875rem; height: 2.875rem;
  flex: 0 0 auto;
  display: grid; place-items: center;
  margin-bottom: var(--fx-space-6);
  border-radius: var(--fx-radius-sm);
  background: var(--fx-accent-soft);
  color: var(--fx-accent);
}
.solucion-icon svg, .card-icon svg,
.trust-icon svg, .problema-icon svg, .integ-icon svg { width: 1.375rem; height: 1.375rem; }
.problema-icon { background: var(--fx-danger-bg); color: var(--fx-danger); margin-bottom: var(--fx-space-6); }
.trust-icon    { background: var(--fx-success-bg); color: var(--fx-success); }

/* títulos y textos de tarjeta */
.solucion-card-title, .card-title, .trust-title,
.diferencial-title, .paraquien-title, .problema-label, .home-blog-title, .flow-title {
  font-family: var(--fx-font-display);
  font-size: var(--fx-text-xl);
  font-weight: var(--fx-weight-black);
  line-height: var(--fx-leading-snug);
  letter-spacing: var(--fx-tracking-snug);
  color: var(--fx-text);
  margin: 0 0 var(--fx-space-3);
}
.solucion-card-desc, .card-desc, .trust-desc,
.diferencial-desc, .problema-desc, .home-blog-excerpt, .flow-desc {
  font-size: var(--fx-text-sm);
  line-height: var(--fx-leading-body);
  color: var(--fx-text-muted);
  margin: 0;
}

/* variantes oscuras del bento */
.diferenciales-grid > .diferencial-card:nth-child(4n+1) {
  background: linear-gradient(160deg, var(--fx-navy), var(--fx-navy-2));
  border-color: transparent;
}
.diferenciales-grid > .diferencial-card:nth-child(4n+6) {
  background: var(--fx-brand-600);
  border-color: transparent;
}
.diferenciales-grid > .diferencial-card:nth-child(4n+1),
.diferenciales-grid > .diferencial-card:nth-child(4n+1) *,
.diferenciales-grid > .diferencial-card:nth-child(4n+6),
.diferenciales-grid > .diferencial-card:nth-child(4n+6) * { color: var(--fx-white); }
.diferenciales-grid > .diferencial-card:nth-child(4n+1) .diferencial-desc { color: var(--fx-on-dark-muted); }
.diferenciales-grid > .diferencial-card:nth-child(4n+6) .diferencial-desc { color: rgba(255,255,255,.86); }
.diferenciales-grid > .diferencial-card:nth-child(4n+1) .diferencial-tag,
.diferenciales-grid > .diferencial-card:nth-child(4n+6) .diferencial-tag {
  background: rgba(255,255,255,.16); color: var(--fx-white);
}
.diferenciales-grid > .diferencial-card:nth-child(4n+1) .diferencial-icon,
.diferenciales-grid > .diferencial-card:nth-child(4n+6) .diferencial-icon {
  background: rgba(255,255,255,.14); color: var(--fx-white);
}

/* orden interno del bento: icono, píldora, título, texto */
.diferencial-card .diferencial-icon  { order: 1; }
.diferencial-card .diferencial-tag   { order: 2; align-self: flex-start; margin: 0 0 var(--fx-space-4); }
.diferencial-card .diferencial-title { order: 3; }
.diferencial-card .diferencial-desc  { order: 4; }

/* número de fondo del bento (::before ya lo usa la barra de hover) */
.diferenciales-grid { counter-reset: fxdif; }
.diferencial-card { counter-increment: fxdif; }
.diferencial-card::after {
  content: counter(fxdif, decimal-leading-zero);
  position: absolute;
  inset-inline-end: 1rem; inset-block-end: .25rem;
  font-family: var(--fx-font-display);
  font-weight: var(--fx-weight-black);
  font-size: clamp(5.5rem, 7vw, 8rem);
  line-height: 1; letter-spacing: -.06em;
  color: rgba(10, 12, 16, .055);
  pointer-events: none; z-index: 0;
}
.diferencial-card > * { position: relative; z-index: var(--fx-z-base); }
.diferenciales-grid > .diferencial-card:nth-child(4n+1)::after,
.diferenciales-grid > .diferencial-card:nth-child(4n+6)::after { color: rgba(255,255,255,.10); }

/* ── 7. CIFRAS ────────────────────────────────────────────────────────── */

.metrica-num, .metrica-sign, .traccion-kpi-num, .kpi-value,
.mmock-kpi-num, .mockup-stat-num, .sn-stat-num {
  font-family: var(--fx-font-display);
  font-weight: var(--fx-weight-black);
  line-height: 1;
  letter-spacing: var(--fx-tracking-tight);
  background: none;
  -webkit-text-fill-color: var(--fx-accent);
  color: var(--fx-accent);
}
.metrica-num, .metrica-sign, .traccion-kpi-num { font-size: var(--fx-text-3xl); display: inline-block; }
.kpi-value { font-size: var(--fx-text-3xl); display: block; }
.mmock-kpi-num, .mockup-stat-num { font-size: var(--fx-text-2xl); display: block; }
.metrica-label, .traccion-kpi-label, .kpi-label, .mmock-kpi-label, .mockup-stat-label {
  display: block;
  margin-top: var(--fx-space-3);
  font-size: var(--fx-text-sm);
  font-weight: var(--fx-weight-semi);
  color: var(--fx-text-muted);
}
.mmock-kpi-label, .mockup-stat-label { font-size: var(--fx-text-xs); margin-top: var(--fx-space-2); }
/* sobre banda azul u oscura, las cifras van en blanco */
#traccion .traccion-kpi-num, .traccion-section .traccion-kpi-num,
.section--dark .metrica-num, .fx-card--dark .kpi-value {
  -webkit-text-fill-color: var(--fx-white); color: var(--fx-white);
}
#traccion .traccion-kpi-label, .traccion-section .traccion-kpi-label { color: rgba(255,255,255,.85); }

/* ── 8. BANDA CTA ─────────────────────────────────────────────────────── */

.cta-final-section {
  position: relative; overflow: hidden;
  padding: clamp(2.5rem, 1rem + 5vw, 5rem);
  border-radius: var(--fx-radius-lg);
  background: var(--fx-neutral-900);
  color: var(--fx-on-dark-text);
  margin-block: var(--fx-section-y);
}
.cta-final-section::before {
  content: ""; position: absolute;
  inset-inline-end: -20%; inset-block-start: -60%;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(18,70,255,.5), transparent 62%);
  filter: blur(40px); pointer-events: none;
}
.cta-final-section > * { position: relative; z-index: var(--fx-z-base); }
.cta-final-title { font-size: var(--fx-text-3xl); color: var(--fx-white); }
.cta-final-desc  { color: var(--fx-on-dark-muted); margin-top: var(--fx-space-4); }
.cta-final-actions { display: flex; gap: var(--fx-space-3); flex-wrap: wrap; margin-top: var(--fx-space-8); }

/* ── 9. TABLAS ────────────────────────────────────────────────────────── */

.table-wrap, .table-scroll {
  overflow-x: auto;
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-md);
  background: var(--fx-surface);
  -webkit-overflow-scrolling: touch;
}
.table-wrap table, .table-scroll table { width: 100%; border-collapse: collapse; font-size: var(--fx-text-sm); }
.table-wrap th, .table-scroll th {
  padding: var(--fx-space-4) var(--fx-space-6);
  background: var(--fx-bg-alt);
  font-family: var(--fx-font-display);
  font-size: var(--fx-text-xs);
  font-weight: var(--fx-weight-black);
  letter-spacing: var(--fx-tracking-wide);
  text-transform: uppercase;
  color: var(--fx-text-subtle);
  text-align: left; white-space: nowrap;
}
.table-wrap td, .table-scroll td {
  padding: var(--fx-space-4) var(--fx-space-6);
  border-top: 1px solid var(--fx-border);
  color: var(--fx-text-muted);
}
.table-wrap tbody tr:hover, .table-scroll tbody tr:hover { background: var(--fx-accent-soft); }

/* ── 10. FORMULARIOS ──────────────────────────────────────────────────── */

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="search"], select, textarea {
  font-family: var(--fx-font-body);
  font-size: var(--fx-text-md);          /* 16px: sin zoom automático en iOS */
  color: var(--fx-text);
  background: var(--fx-surface);
  border: 1px solid var(--fx-border-strong);
  border-radius: var(--fx-radius-sm);
  padding: var(--fx-space-3) var(--fx-space-4);
  min-height: 3rem;
  box-sizing: border-box;
  transition: border-color var(--fx-dur-fast) var(--fx-ease),
              box-shadow var(--fx-dur-fast) var(--fx-ease);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--fx-brand-600);
  box-shadow: var(--fx-ring);
}
input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--fx-danger);
  box-shadow: 0 0 0 3px rgba(196, 50, 31, .18);
}

/* ── 11. REVELADO ─────────────────────────────────────────────────────── */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity var(--fx-dur-base) var(--fx-ease),
              transform var(--fx-dur-base) var(--fx-ease);
}
.animate-on-scroll.visible, .animate-on-scroll.in-view,
.animate-on-scroll.is-visible, .animate-on-scroll.animated { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .animate-on-scroll { opacity: 1; transform: none; } }


/* ── 11 bis. FILAS DE MÉTRICA ──────────────────────────────────────────
   El sistema viejo dibujaba UNA caja con divisores internos: el contenedor
   llevaba el borde y `gap: 0`, y las celdas se separaban con líneas de 1px.
   Al pasar cada .metrica-item a tarjeta con borde propio quedaban tres cosas
   feas a la vez: la caja exterior suelta rodeándolo todo, doble línea de 1px
   entre celdas, y las tarjetas pegadas sin aire. Se recupera el aire y se
   quita el contenedor de en medio. Afecta a /, /administradores/,
   /proveedores/, /corporates/ y /peritos/. */
.metricas-row,
.metricas-grid {
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  gap: var(--fx-space-4);
}

.metricas-row > *,
.metricas-grid > * {
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-md);
  background: var(--fx-surface);
}

/* El número es el protagonista de la fila: mismo peso y mismo azul que en
   el resto de la web, y cifras de ancho fijo para que no bailen. */
.metrica-valor,
.metricas-row .kpi-value,
.metricas-grid .kpi-value {
  color: var(--fx-accent);
  font-family: var(--fx-font-display);
  font-weight: var(--fx-weight-black);
  letter-spacing: var(--fx-tracking-tight);
  font-variant-numeric: tabular-nums;
}

/* ── 12. FILA DE FUNCIONALIDAD (.modulo-feature) ──────────────────────────
   NO es una tarjeta. Es una fila compacta: icono a la izquierda, texto a la
   derecha. Meterla en el grupo de tarjetas la volvió vertical y con 32 px de
   padding, y las páginas de producto se llenaron de aire: una fila de dos
   líneas de texto pasó a ocupar 710×300 px. */
.modulo-features { display: flex; flex-direction: column; gap: var(--fx-space-3); }
.modulo-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--fx-space-4);
  padding: var(--fx-space-4) var(--fx-space-5, var(--fx-space-4));
  background: var(--fx-surface);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-sm);
  transition: border-color var(--fx-dur-fast) var(--fx-ease),
              box-shadow var(--fx-dur-fast) var(--fx-ease);
}
.modulo-feature:hover { border-color: var(--fx-brand-300); box-shadow: var(--fx-shadow-sm); }
.feature-icon-wrap {
  width: 2.5rem; height: 2.5rem;
  flex: 0 0 auto;
  display: grid; place-items: center;
  margin: 0;
  border-radius: var(--fx-radius-sm);
  background: var(--fx-accent-soft);
  color: var(--fx-accent);
}
.feature-icon-wrap svg { width: 1.25rem; height: 1.25rem; }
.feature-title {
  font-family: var(--fx-font-display);
  font-size: var(--fx-text-md);
  font-weight: var(--fx-weight-black);
  line-height: var(--fx-leading-snug);
  letter-spacing: var(--fx-tracking-snug);
  color: var(--fx-text);
  margin: 0 0 var(--fx-space-1);
}
.feature-desc {
  font-size: var(--fx-text-sm);
  line-height: var(--fx-leading-body);
  color: var(--fx-text-muted);
  margin: 0;
}
.modulo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fx-space-12); align-items: center; }
@media (max-width: 56.25rem) { .modulo-grid { grid-template-columns: 1fr; gap: var(--fx-space-8); } }

/* ── 11 ter. CARDS NUMÉRICAS: UN ÚNICO FORMATO ─────────────────────────
   Aparecen en la home y en cuatro páginas de «¿Para quién?», y cada una
   las pintaba distinto: unas centradas y otras no, la cifra en tres pesos
   diferentes y la etiqueta en dos tamaños. Al ser el mismo componente
   —una cifra grande y una frase corta debajo— se define una sola vez. */
.metrica-item,
.traccion-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fx-space-2);
  padding: var(--fx-space-8) var(--fx-space-6);
  text-align: center;
}

.metrica-valor,
.metrica-num,
.traccion-kpi-num {
  font-family: var(--fx-font-display);
  font-size: var(--fx-text-3xl);
  font-weight: var(--fx-weight-black);
  line-height: var(--fx-leading-tight);
  letter-spacing: var(--fx-tracking-tight);
  color: var(--fx-accent);
  font-variant-numeric: tabular-nums;
}

.metrica-label,
.traccion-kpi-label {
  font-size: var(--fx-text-sm);
  line-height: var(--fx-leading-body);
  color: var(--fx-text-muted);
  max-width: 24ch;
  text-wrap: balance;
}