/* ==========================================================================
   RP Medistock — hoja de estilos única del sitio (v3)
   --------------------------------------------------------------------------
   Un solo archivo compartido por la home y las ocho páginas de producto.
   Se sirve cacheado (ver netlify.toml), así que a partir de la segunda página
   que visita una persona el CSS ya no vuelve a descargarse. El sufijo .v3 es
   el mecanismo de invalidación: el nombre nuevo obliga a redescargar. Se subió
   de .v2 a .v3 con las mejoras visuales de la home (secciones 19–21); sin ese
   cambio de nombre, quien ya visitó el sitio seguiría un año con el CSS viejo.

   v2 = alineación con RP One (IBM Plex Sans/Mono, como las ocho apps del
   portafolio) + capa 3D (sección 16). La capa 3D degrada sola: sin JS o con
   prefers-reduced-motion el sitio se ve como el v1.

   Orden: tokens → base → layout → componentes → secciones → utilidades →
   responsive → capa 3D → mejoras de la home (19–21). No hay estilos en línea en el HTML a propósito: eso permite que
   la CSP prohíba style-src 'unsafe-inline'. La capa 3D respeta esa regla:
   el JS anima vía CSSOM (element.style), que la CSP no bloquea.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  /* Marca. El verde profundo es el color institucional; el brillante sólo
     acentúa (iconos, subrayados, estados activos), nunca bloques grandes. */
  --deep:        #0b3a31;
  --deep-2:      #072b24;
  --teal:        #0d7a63;
  --bright:      #14b88f;
  --tint:        #e7f4ef;
  --tint-2:      #f3f9f6;

  /* Acento cálido: reservado para señales de novedad y datos destacados.
     Si se usa en más de dos lugares por pantalla deja de ser un acento. */
  --gold:        #8f6316;
  --gold-tint:   #fdf6e8;

  /* Texto. Todos los pares texto/fondo verificados contra WCAG AA (4.5:1
     para texto normal). --faint y --gold se oscurecieron respecto del sitio
     anterior justamente por eso: los tonos originales quedaban en 3.3 y 3.7.
     Si se aclaran de nuevo, el texto de apoyo deja de ser legible para quien
     tiene baja visión — y una auditoría de accesibilidad lo marca. */
  --ink:         #0a201c;
  --ink-2:       #2b3f3a;
  --muted:       #556b65;
  --faint:       #59726b;
  --on-dark:     #e8f3ef;
  --on-dark-2:   #a9c4bc;

  /* Superficies y líneas */
  --bg:          #ffffff;
  --surface:     #f6faf8;
  --line:        #dfeae5;
  --line-2:      #c6d9d2;

  --shadow-sm:   0 1px 2px rgba(10, 32, 28, .05);
  --shadow:      0 2px 4px rgba(10, 32, 28, .04), 0 12px 32px -12px rgba(10, 32, 28, .16);
  --shadow-lg:   0 32px 70px -30px rgba(7, 43, 36, .55);

  --r:           12px;
  --r-lg:        20px;
  --r-pill:      999px;

  --maxw:        1160px;
  --gutter:      24px;

  /* Escala tipográfica fluida: un solo valor por nivel, sin media queries
     duplicando tamaños más abajo. */
  --t-display:   clamp(2.35rem, 1.4rem + 3.6vw, 3.9rem);
  --t-h2:        clamp(1.75rem, 1.25rem + 1.9vw, 2.6rem);
  --t-h3:        clamp(1.15rem, 1.02rem + .5vw, 1.4rem);
  --t-lead:      clamp(1.03rem, .98rem + .28vw, 1.18rem);

  /* Paleta de la malla WebGL (sección 16). Tres colores por tema: base,
     secundario y destello; el shader los mezcla por altura de ola y por una
     banda "aurora" que deriva con el tiempo. --fx* pinta sobre fondo claro
     (tintas), --fxd* sobre los bloques oscuros (luces aditivas). Las páginas
     de producto los redefinen en la sección 17. */
  --fx1:  #0d7a63;
  --fx2:  #0e7490;
  --fx3:  #b45309;
  --fxd1: #14b88f;
  --fxd2: #22d3ee;
  --fxd3: #fbbf24;
}

/* --- 2. Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .display {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  line-height: 1.13;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--t-display); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.25; }
h4 { font-size: 1rem; font-weight: 600; line-height: 1.35; }

p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
ul { list-style: none; }
strong, b { font-weight: 600; }

:focus-visible {
  outline: 2px solid var(--bright);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--bright); color: #fff; }

/* --- 3. Layout ----------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 780px; margin-inline: auto; padding-inline: var(--gutter); }

section { padding-block: clamp(56px, 7vw, 96px); }
section.tight { padding-block: clamp(40px, 5vw, 64px); }

.surface { background: var(--surface); }
.dark { background: var(--deep); color: var(--on-dark); }
.dark h1, .dark h2, .dark h3, .dark h4 { color: #fff; }
.dark p { color: var(--on-dark-2); }

.shead { max-width: 720px; margin-bottom: clamp(32px, 4vw, 48px); }
.shead.center { margin-inline: auto; text-align: center; }
.shead p { font-size: var(--t-lead); color: var(--muted); margin-top: 16px; }
.dark .shead p { color: var(--on-dark-2); }

/* Los microtítulos en mayúscula van en IBM Plex Mono, igual que los KPI y
   rótulos de las apps del portafolio: es la firma técnica de RP One. */
.eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .72rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 14px;
}
/* Sobre fondo verde profundo el teal institucional no llega a contraste
   suficiente: en esos bloques el antetítulo usa el verde brillante. */
.dark .eyebrow, .phero .eyebrow, .form-section .eyebrow { color: var(--bright); }

.lead { font-size: var(--t-lead); color: var(--muted); }

/* --- 4. Botones ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-size: .94rem; font-weight: 600;
  padding: 13px 24px; border-radius: var(--r-pill);
  border: 1.5px solid transparent; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
  white-space: nowrap; text-align: center;
}
.btn svg { flex: none; }

/* Neón sutil (2026-08-23, decisión del dueño): el primario gana un filo teal
   encendido y brillo interior; el secundario queda neutro en reposo y sólo se
   enciende al pasar el puntero, para no competir con el primario. */
.btn-primary {
  background: linear-gradient(175deg, #10493e 0%, var(--deep) 60%, #082e27 100%);
  color: #fff;
  border-color: rgba(20, 184, 143, .55);
  box-shadow:
    inset 0 1px 0 rgba(232, 243, 239, .18),
    0 0 12px rgba(20, 184, 143, .30),
    0 0 26px rgba(20, 184, 143, .14);
}
.btn-primary:hover {
  background: linear-gradient(175deg, #0f8a70 0%, var(--teal) 60%, #0a6a55 100%);
  border-color: rgba(20, 184, 143, .85);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(232, 243, 239, .25),
    0 0 18px rgba(20, 184, 143, .50),
    0 12px 26px -12px rgba(13, 122, 99, .8);
}

.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover {
  border-color: rgba(20, 184, 143, .7); color: var(--teal);
  box-shadow: 0 0 12px rgba(20, 184, 143, .28), 0 0 26px rgba(20, 184, 143, .12);
}

.btn-light { background: #fff; color: var(--deep); }
.btn-light:hover { background: var(--tint); transform: translateY(-1px); }

.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn-outline-light:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); }

.btn-block { width: 100%; }

.link-more {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .88rem; font-weight: 600; color: var(--teal);
}
.link-more::after { content: "→"; transition: transform .2s; }
.link-more:hover::after { transform: translateX(4px); }

/* --- 5. Cabecera --------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--deep); color: #fff; padding: 12px 20px;
  border-radius: 0 0 10px 0; font-weight: 600; font-size: .9rem;
}
.skip:focus { left: 0; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 74px; }

.brand { display: flex; align-items: center; gap: 12px; flex: none; perspective: 600px; }
.brand img { width: 42px; height: 42px; flex: none; border-radius: 10px; transition: transform .8s cubic-bezier(.3, .7, .2, 1); }
/* El sello gira como moneda al pasar el puntero: vuelve al mismo punto, así
   que nunca queda torcido. */
.brand:hover img { transform: rotateY(360deg); }
/* Nombre y lema con el neón sutil llevado a texto (2026-08-23): el nombre en
   degradado de marca recortado al glifo con un resplandor teal que respira;
   el lema con sombra de texto encendida. Los radios y opacidades viven en
   variables --rp-*: los keyframes compartidos (sección de neón, más abajo)
   las leen en cada elemento, y el refuerzo móvil sólo cambia variables.
   El degradado va tras @supports: sin recorte de texto, un fondo degradado
   pintaría un bloque encima del nombre. */
.brand-name {
  font-family: 'Fraunces', Georgia, serif; font-size: 1.3rem; font-weight: 600;
  letter-spacing: -.015em; color: var(--ink); line-height: 1.1; display: block;
  --rp-brillo-reposo: drop-shadow(0 0 9px rgba(20, 184, 143, .48));
  --rp-brillo-pico:   drop-shadow(0 0 14px rgba(20, 184, 143, .68));
  filter: var(--rp-brillo-reposo);
  animation: rp-brillo 3.6s ease-in-out infinite;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand-name {
    background-image: linear-gradient(120deg, var(--deep) 0%, var(--teal) 55%, var(--bright) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  /* Sobre el pie oscuro el degradado de tinta desaparecería: versión clara. */
  .site-footer .brand-name {
    background-image: linear-gradient(120deg, #ffffff 0%, var(--on-dark) 45%, #5fe3bf 100%);
  }
}
.brand-tag {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .6rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--teal); display: block; margin-top: 3px;
  --rp-lema-reposo: 0 0 8px rgba(20, 184, 143, .45), 0 0 18px rgba(20, 184, 143, .22);
  --rp-lema-pico:   0 0 11px rgba(20, 184, 143, .62), 0 0 24px rgba(20, 184, 143, .30);
  text-shadow: var(--rp-lema-reposo);
  animation: rp-lema 3.6s ease-in-out infinite 1.2s;
}

.main-nav { display: flex; align-items: center; gap: 26px; }
.main-nav > a, .nav-trigger {
  position: relative; font: inherit; font-size: .9rem; font-weight: 500;
  color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.main-nav > a:hover, .nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: var(--teal); }
.main-nav > a[aria-current="page"] { color: var(--teal); font-weight: 600; }
.nav-trigger svg { transition: transform .2s; }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Menú desplegable de productos: la lista de ocho no cabe en la barra, y
   esconderla tras un solo enlace "Productos" perdía descubribilidad. */
.nav-drop { position: relative; }
.nav-panel {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  width: min(620px, 88vw); background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 14px;
  display: none; grid-template-columns: 1fr 1fr; gap: 4px;
}
.nav-panel.open { display: grid; }
.nav-panel a { display: flex; gap: 11px; padding: 11px 12px; border-radius: var(--r); transition: background .15s; }
.nav-panel a:hover { background: var(--tint-2); }
.nav-panel .np-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--tint); color: var(--teal); display: grid; place-items: center; }
.nav-panel b { display: block; font-size: .9rem; font-weight: 600; color: var(--ink); }
.nav-panel span { display: block; font-size: .78rem; color: var(--muted); line-height: 1.4; }

.header-cta { display: flex; align-items: center; gap: 10px; flex: none; }
.header-phone { font-size: .88rem; font-weight: 600; color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; }
.header-phone:hover { color: var(--teal); }

/* WhatsApp e Instagram junto al botón de demo, cada uno con los colores
   reales de su marca en un cuadrado redondeado tipo icono de app y el glifo
   en blanco. Medían 40 px; el dueño pidió reducirlos un 30% el 22-08-2026
   (40 → 28). En pantallas angostas desaparecen con .header-cta; los enlaces
   siguen disponibles en el menú móvil y en el pie (versión .ig-badge). */
/* Neón sutil (2026-08-23): cada botón conserva los colores de su marca y gana
   halo en capas, filo de luz interior y un pulso lento que respira. El pulso
   anima box-shadow leyendo las variables --rp-halo-* del propio elemento
   (keyframes rp-pulso, sección de neón). En hover la animación se apaga
   —si sigue viva le pisa el box-shadow al estado hover— y entra el halo
   intensificado. */
.header-ig, .header-wa {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  color: #fff; display: grid; place-items: center;
  transition: transform .18s, box-shadow .18s;
  animation: rp-pulso 3.6s ease-in-out infinite;
}
.header-ig {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  --rp-halo-reposo:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 0 0 1px rgba(214, 36, 159, .35),
    0 2px 6px rgba(120, 40, 100, .28),
    0 0 12px rgba(214, 36, 159, .50),
    0 0 28px rgba(253, 89, 73, .26);
  --rp-halo-pico:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 0 0 1px rgba(214, 36, 159, .48),
    0 2px 6px rgba(120, 40, 100, .28),
    0 0 16px rgba(214, 36, 159, .66),
    0 0 36px rgba(253, 89, 73, .36);
  box-shadow: var(--rp-halo-reposo);
  animation-delay: 1.8s;
}
.header-ig:hover {
  animation: none; transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 0 0 1px rgba(214, 36, 159, .55),
    0 3px 9px rgba(120, 40, 100, .32),
    0 0 18px rgba(214, 36, 159, .70),
    0 0 40px rgba(253, 89, 73, .38);
}
.header-wa {
  background: linear-gradient(160deg, #3ae37b 0%, #25d366 55%, #17ad4f 100%);
  --rp-halo-reposo:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 0 0 1px rgba(37, 211, 102, .38),
    0 2px 6px rgba(18, 140, 74, .30),
    0 0 12px rgba(37, 211, 102, .55),
    0 0 28px rgba(37, 211, 102, .26);
  --rp-halo-pico:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 0 0 1px rgba(37, 211, 102, .50),
    0 2px 6px rgba(18, 140, 74, .30),
    0 0 16px rgba(37, 211, 102, .70),
    0 0 36px rgba(37, 211, 102, .36);
  box-shadow: var(--rp-halo-reposo);
}
.header-wa:hover {
  animation: none; transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 0 0 1px rgba(37, 211, 102, .55),
    0 3px 9px rgba(18, 140, 74, .35),
    0 0 18px rgba(37, 211, 102, .75),
    0 0 40px rgba(37, 211, 102, .40);
}

/* Versión móvil de los mismos botones: bajo 760 px la .header-cta entera
   desaparece y estos duplicados reaparecen junto a las tres líneas del menú,
   pedido del dueño el 21-08-2026. En escritorio quedan ocultos para no salir
   dos veces. Van después de .header-ig/.header-wa para pisarles el tamaño. */
.header-ig-m, .header-wa-m {
  display: none; width: 34px; height: 34px; border-radius: 10px;
  /* En pantalla chica el halo de escritorio desaparece (menos pulgadas y
     brillo más bajo): aquí los radios y opacidades van ~40% más arriba y el
     pulso un poco más rápido. Medían 25 px; suben a 34 con glifo de 18
     (wa_icon(18) / IG_ICON_M en build.py) — decisión del dueño 2026-08-23,
     revierte en parte la reducción del 22-08 que en móvil quedó invisible. */
  animation-duration: 3.2s;
}
.header-wa-m {
  --rp-halo-reposo:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 0 0 1px rgba(37, 211, 102, .5),
    0 2px 6px rgba(18, 140, 74, .35),
    0 0 14px rgba(37, 211, 102, .75),
    0 0 32px rgba(37, 211, 102, .38);
  --rp-halo-pico:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 0 0 1px rgba(37, 211, 102, .65),
    0 2px 6px rgba(18, 140, 74, .35),
    0 0 20px rgba(37, 211, 102, .90),
    0 0 42px rgba(37, 211, 102, .50);
  box-shadow: var(--rp-halo-reposo);
}
.header-ig-m {
  --rp-halo-reposo:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 0 0 1px rgba(214, 36, 159, .48),
    0 2px 6px rgba(120, 40, 100, .32),
    0 0 14px rgba(214, 36, 159, .70),
    0 0 32px rgba(253, 89, 73, .36);
  --rp-halo-pico:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 0 0 1px rgba(214, 36, 159, .62),
    0 2px 6px rgba(120, 40, 100, .32),
    0 0 20px rgba(214, 36, 159, .85),
    0 0 42px rgba(253, 89, 73, .48);
  box-shadow: var(--rp-halo-reposo);
  animation-delay: 1.6s;
}
.header-wa-m {
  /* .header-in reparte con space-between; el margen automático pega los dos
     iconos y el botón de menú al borde derecho en vez de dejarlos al centro.
     Va en el primero de los dos (WhatsApp precede a Instagram). */
  margin-left: auto;
}

/* Versión mini del sello de Instagram para enlaces de texto. */
.ig-badge {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  border-radius: 6px; color: #fff; flex: none;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  vertical-align: -4px; margin-right: 7px;
}

.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--ink); }

.mobile-nav {
  display: none; border-top: 1px solid var(--line); background: #fff;
  padding: 12px var(--gutter) 22px; max-height: calc(100vh - 74px); overflow-y: auto;
}
.mobile-nav.open { display: block; }
.mobile-nav a { display: block; padding: 12px 4px; font-size: 1rem; font-weight: 500; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.mobile-nav .mn-head { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .68rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); padding: 18px 4px 6px; border: 0; }
.mobile-nav .btn { margin-top: 18px; width: 100%; }
/* La regla `.mobile-nav a` de arriba gana por especificidad a `.btn-primary`
   y dejaba «Solicitar demo» con texto verde oscuro sobre fondo verde oscuro.
   Se devuelve el blanco y se quita el subrayado de lista. */
.mobile-nav .btn-primary { color: #fff; border-bottom: 0; padding: 13px 24px; }

/* --- 6. Hero ------------------------------------------------------------- */
.hero { background: linear-gradient(180deg, #fff 0%, var(--tint-2) 100%); padding-block: clamp(48px, 6vw, 84px) clamp(56px, 7vw, 92px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero h1 { margin-bottom: 20px; }
.hero .lead { max-width: 40em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-note { font-size: .84rem; color: var(--faint); margin-top: 16px; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 600; padding: 6px 14px 6px 10px;
  border-radius: var(--r-pill); border: 1px solid var(--line-2);
  background: #fff; color: var(--ink-2); margin-bottom: 18px;
}
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--bright); flex: none; }
.pill-gold { background: var(--gold-tint); border-color: #efe0be; color: var(--gold); }
.pill-gold i { background: var(--gold); }

/* Tarjeta de resumen del hero: sustituye al mock de interfaz simulada. No
   finge una captura de pantalla, describe la oferta. */
.hero-card {
  background: var(--deep); color: var(--on-dark); border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px); box-shadow: var(--shadow-lg);
}
.hero-card h2 { font-size: 1.15rem; color: #fff; margin-bottom: 4px; }
.hero-card > p { font-size: .88rem; color: var(--on-dark-2); margin-bottom: 22px; }
.hc-list { display: grid; gap: 2px; }
.hc-list li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.hc-list li:last-child { border-bottom: 0; }
.hc-list svg { flex: none; color: var(--bright); margin-top: 3px; }
.hc-list b { display: block; font-size: .92rem; color: #fff; font-weight: 600; }
.hc-list span { display: block; font-size: .8rem; color: var(--on-dark-2); line-height: 1.45; }

/* --- 7. Marquesina de productos ------------------------------------------ */
/* Sustituye a la barra de confianza de iconos repetidos: las cuatro cifras que
   ésta declaraba viven ahora en la banda de la sección 20, contadas y no
   listadas. Aquí desfilan los ocho nombres, que es lo que la persona vino a
   saber. El truco del bucle perfecto: la secuencia va DUPLICADA dentro de la
   pista y el desplazamiento es exactamente -50%, así el momento en que salta
   al origen cae sobre un fotograma idéntico. El duplicado va aria-hidden para
   que un lector de pantalla no lea ocho productos dos veces. */
.pmarq {
  border-block: 1px solid var(--line); background: #fff;
  padding-block: 16px; overflow: hidden;
  /* El fundido de los extremos evita el corte seco contra el borde. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 96px calc(100% - 96px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 96px calc(100% - 96px), transparent);
}
.pmarq-track { display: flex; width: max-content; gap: 56px; animation: marq 36s linear infinite; }
.pmarq-seq { display: flex; align-items: center; gap: 56px; }
.pmarq-item { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.pmarq-item::before { content: ""; width: 24px; height: 1px; background: var(--teal); flex: none; }
.pmarq-item b { font-size: .94rem; font-weight: 600; color: var(--ink); }
.pmarq-item span { font-size: .78rem; color: var(--muted); }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- 8. Tarjetas de producto con miniatura de interfaz ------------------- */
/* Cada tarjeta muestra un mini-mockup animado del dato que el producto
   gestiona, en vez de una lista de viñetas. La miniatura es un dibujo
   ilustrativo —no una captura— y se reemplaza por una real cuando exista.

   TONALIDAD POR CATEGORÍA. La lógica del prototipo se conserva y los matices
   se llevan a la marca: verde para lo clínico, cian para lo logístico, azul
   marino para la gestión —el azul marino es la empresa, regla de marca—. Cada
   familia define dos variables y todo lo demás las hereda, así que retocar la
   familia entera es cambiar dos líneas:
     --cat      color sobre fondo claro (kicker, halo del hover, borde)
     --cat-lite color sobre el panel oscuro de la miniatura, donde --cat
                desaparecería */
:root {
  --cat-clin:      #0d7a63;  --cat-clin-lite: #2fd7ad;
  --cat-log:       #0e7490;  --cat-log-lite:  #38c6e8;
  --cat-gest:      #0b2545;  --cat-gest-lite: #8fb3e8;
}

.mcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }

.mcard {
  --cat: var(--cat-clin); --cat-lite: var(--cat-clin-lite);
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.mcard.c-log  { --cat: var(--cat-log);  --cat-lite: var(--cat-log-lite); }
.mcard.c-gest { --cat: var(--cat-gest); --cat-lite: var(--cat-gest-lite); }
.mcard:hover { transform: translateY(-5px); border-color: var(--cat); box-shadow: 0 0 0 1px var(--cat), var(--shadow-lg); }

/* flex-start y no baseline: los kickers largos ocupan dos líneas y con
   baseline la insignia bajaba con ellos, quedando desalineada de tarjeta a
   tarjeta. Anclada arriba, las ocho insignias forman una línea. */
.mcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 14px; }
.mcard-kicker {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cat); margin-bottom: 6px;
}
.mcard-head h3 { font-size: 1.24rem; margin: 0; }
.mcard-head h3 small { font-family: 'IBM Plex Sans', sans-serif; font-size: .62em; font-weight: 500; color: var(--faint); }
.mcard-head .badge { position: static; flex: none; }
.mcard-desc { font-size: .89rem; line-height: 1.62; color: var(--muted); padding: 16px 22px 0; margin: 0; }
/* margin-top:auto empuja el enlace al fondo de la tarjeta: las miniaturas
   tienen alturas distintas y sin esto cada «Ver X» quedaba a una altura. */
.mcard .link-more { margin: 14px 22px 20px 22px; margin-top: auto; }

/* --- La miniatura ------------------------------------------------------- */
/* Panel oscuro dentro de la tarjeta clara: leído como una pantalla, que es
   justamente lo que representa. Por eso su interior usa --cat-lite y no
   --cat: sobre este fondo el color de familia claro se apagaría. */
.mock {
  margin: 0 22px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--deep-2); overflow: hidden;
}
.mock-bar { display: flex; gap: 5px; padding: 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.mock-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.mock-body { padding: 12px 14px 14px; font-size: .69rem; color: var(--on-dark-2); }
.mock-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mock-row + .mock-row { margin-top: 8px; }
.mock-lbl { color: var(--on-dark); }
.mock-num { color: var(--cat-lite); font-variant-numeric: tabular-nums; }
.mock-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: .62rem; color: rgba(233, 243, 239, .45); }
.mock svg { width: 100%; height: auto; display: block; }
.mock svg text { font-family: 'IBM Plex Sans', sans-serif; fill: rgba(233, 243, 239, .45); }

/* Barras de progreso de las miniaturas (Medicinvent, CompraSmart). */
.mock-bg { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: 6px; }
.mock-fill { display: block; height: 100%; background: var(--cat-lite); transform-origin: left; animation: grow 1.8s ease both; }
.mock-fill.warn { background: #f0a35e; }

/* Rejilla de boxes de ClinicBox y barras de tramos de CareerCare. */
.mock-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.mock-cell { height: 18px; border-radius: 3px; background: rgba(255, 255, 255, .1); }
.mock-cell.on   { background: color-mix(in srgb, var(--cat-lite) 42%, transparent); }
.mock-cell.live { background: var(--cat-lite); animation: mpulse 2.4s ease infinite; }
.mock-bars { display: flex; align-items: flex-end; gap: 8px; height: 56px; }
.mock-bars i { flex: 1; border-radius: 3px 3px 0 0; background: rgba(255, 255, 255, .13); transform-origin: bottom; animation: rise .9s ease both; }
.mock-bars i.on  { background: color-mix(in srgb, var(--cat-lite) 55%, transparent); }
.mock-bars i.top { background: var(--cat-lite); }
.mock-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: .62rem; color: rgba(233, 243, 239, .45); }
.mock-legend span { display: inline-flex; align-items: center; gap: 5px; }
.mock-legend i { width: 8px; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .1); }
.mock-legend i.on { background: color-mix(in srgb, var(--cat-lite) 42%, transparent); }
.mock-legend i.live { background: var(--cat-lite); }

/* Línea de tiempo de PROASmart. */
.mock-line { display: flex; align-items: center; }
.mock-line i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .16); flex: none; }
.mock-line i.done { background: var(--cat-lite); }
.mock-line i.now  { background: color-mix(in srgb, var(--cat-lite) 62%, transparent); animation: mpulse 2s ease infinite; }
.mock-line i.next { animation: mpulse 2s ease infinite; animation-delay: 1s; }
.mock-line b { flex: 1; height: 2px; background: rgba(255, 255, 255, .16); }
.mock-line b.done { background: linear-gradient(to right, var(--cat-lite), rgba(255, 255, 255, .16)); }

/* Tabla de activos de InventSmart. */
.mock-tbl { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 14px; align-items: center; }
.mock-th { font-size: .6rem; text-transform: uppercase; letter-spacing: .04em; color: rgba(233, 243, 239, .4); }
.mock-tag { font-size: .6rem; padding: 1px 8px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .18); color: var(--on-dark-2); }
.mock-tag.on { border-color: var(--cat-lite); color: var(--cat-lite); }

/* Código de barras de Medicinvent: dibujado, no una imagen. */
.mock-code { display: flex; gap: 2px; align-items: flex-end; margin-top: 10px; }
.mock-code i { height: 16px; background: rgba(233, 243, 239, .5); }
.mock-code em { font-style: normal; font-size: .62rem; color: rgba(233, 243, 239, .45); margin-left: 8px; font-variant-numeric: tabular-nums; }

/* El dato que parpadea para señalar el estado que el producto vigila. */
.mock-alert { color: var(--cat-lite); animation: mpulse 1.8s ease infinite; }
.mock-alert.warn { color: #f0a35e; }

/* Trazos animados de las miniaturas SVG. */
.mock-draw { animation: draw 5s ease-in-out infinite; }
.mock-dash { animation: dashmove 1.6s linear infinite; }

@keyframes mpulse   { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes grow     { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rise     { from { transform: scaleY(.08); } to { transform: scaleY(1); } }
@keyframes draw     { 0% { stroke-dashoffset: 1; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes dashmove { to { stroke-dashoffset: -20; } }

.badge {
  position: absolute; top: 18px; right: 18px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .64rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap;
}
.badge-new   { background: var(--gold-tint); color: var(--gold); }
.badge-ready { background: var(--tint); color: var(--teal); }

/* --- 9. Rejillas de contenido ------------------------------------------- */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }
.feat { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.feat-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--tint); color: var(--teal); display: grid; place-items: center; margin-bottom: 14px; }
/* Las tarjetas de capacidad no llevan icono: seis iconos idénticos repetidos
   no aportan información y leen como relleno. Un filete de color basta para
   separar visualmente una tarjeta de la siguiente. */
.feat h4 { margin-bottom: 8px; padding-top: 14px; border-top: 2px solid var(--bright); display: inline-block; }
.feat p { font-size: .89rem; color: var(--muted); }
.dark .feat { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .11); }
.dark .feat-ic { background: rgba(20, 184, 143, .16); color: var(--bright); }

/* Banda «para quién es». Cinco tarjetas compactas: cabe una fila en pantalla
   ancha y se reacomoda sin dejar una sola tarjeta huérfana al final. */
.aud-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.aud { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px 18px; text-align: center; }
.aud-ic { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 11px; background: var(--tint); color: var(--teal); }
.aud b { display: block; font-size: .94rem; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.aud span { display: block; font-size: .82rem; color: var(--muted); line-height: 1.45; }

.pain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.pain { border-left: 3px solid var(--line-2); padding: 4px 0 4px 20px; }
.pain h4 { color: var(--ink); margin-bottom: 7px; }
.pain p { font-size: .89rem; color: var(--muted); }

.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.spec { background: #fff; padding: 20px 22px; }
.spec dt { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.spec dd { font-size: .92rem; color: var(--ink-2); line-height: 1.5; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; counter-reset: step; }
.step { counter-increment: step; padding-top: 20px; border-top: 2px solid var(--line); position: relative; }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .85rem; font-weight: 600; letter-spacing: .06em; color: var(--teal);
  display: block; margin-bottom: 10px;
}
.step h4 { margin-bottom: 8px; }
.step p { font-size: .89rem; color: var(--muted); }

/* --- 10. Fundador (sustituye a la prueba social) ------------------------- */
.founder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(28px, 4vw, 56px); align-items: start; }
.founder-quote { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.25rem, 1rem + 1.1vw, 1.7rem); line-height: 1.35; color: var(--ink); margin-bottom: 22px; }
.founder-body p { font-size: .96rem; color: var(--muted); margin-bottom: 14px; }
.founder-sign { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.founder-sign b { display: block; font-size: .95rem; color: var(--ink); }
.founder-sign span { display: block; font-size: .84rem; color: var(--muted); }

.creds { display: grid; gap: 10px; }
.cred { display: flex; gap: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.cred svg { flex: none; color: var(--teal); margin-top: 3px; }
.cred b { display: block; font-size: .89rem; color: var(--ink); font-weight: 600; }
.cred span { display: block; font-size: .82rem; color: var(--muted); line-height: 1.45; }

/* --- 11. Formulario ------------------------------------------------------ */
.form-section { background: var(--deep); color: var(--on-dark); }
.form-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
/* h1–h3 heredan --ink por la regla global; sobre el bloque oscuro hay que
   devolverlos a blanco explícitamente (el <h3> del formulario no, porque vive
   dentro de la tarjeta blanca). */
.form-aside h2 { color: #fff; margin-bottom: 16px; }
.form-aside > p { font-size: var(--t-lead); color: var(--on-dark-2); margin-bottom: 26px; }
.form-aside .cred { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.form-aside .cred svg { color: var(--bright); }
.form-aside .cred b { color: #fff; }
.form-aside .cred span { color: var(--on-dark-2); }

.form-card { background: #fff; border-radius: var(--r-lg); padding: clamp(24px, 3vw, 34px); box-shadow: var(--shadow-lg); }
.form-card h3 { margin-bottom: 6px; }
.form-card > p { font-size: .88rem; color: var(--muted); margin-bottom: 24px; }
.field { margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.field .opt { font-weight: 400; color: var(--faint); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: .94rem; color: var(--ink);
  padding: 11px 14px; border: 1.5px solid var(--line-2); border-radius: var(--r);
  background: #fff; transition: border-color .18s, box-shadow .18s;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(20, 184, 143, .18);
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.form-legal { font-size: .78rem; color: var(--faint); margin-top: 14px; line-height: 1.5; }

/* --- 12. Cierre y pie ---------------------------------------------------- */
.closer { background: var(--tint-2); }
.closer-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.closer h3 { margin-bottom: 6px; }
.closer p { font-size: .92rem; color: var(--muted); }

.site-footer { background: var(--deep-2); color: var(--on-dark-2); padding-block: clamp(48px, 6vw, 68px) 28px; font-size: .88rem; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 36px; }
.site-footer .brand-name { color: #fff; }
.site-footer .brand-tag { color: var(--bright); }
.foot-about { margin-top: 16px; line-height: 1.6; max-width: 34em; }
.site-footer h4 { color: #fff; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .74rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer ul { display: grid; gap: 9px; }
.site-footer a:hover { color: var(--bright); }
.foot-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .8rem; color: #82a49b;
}

/* Botón flotante de WhatsApp: en venta a instituciones públicas chilenas el
   canal de primer contacto suele ser el teléfono, no el correo. Verde oficial
   de WhatsApp y logo real (WA_ICON en build.py), no los colores de la casa:
   con el verde propio y un globo genérico no se reconocía como WhatsApp. */
.fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(160deg, #3ae37b 0%, #25d366 55%, #17ad4f 100%);
  color: #fff; padding: 13px 20px;
  border-radius: var(--r-pill); font-size: .9rem; font-weight: 600;
  /* Neón sutil (2026-08-23): halo que respira + anillo expansivo. La sombra
     de elevación va TAMBIÉN dentro de las variables del pulso: la animación
     le gana a la declaración normal de box-shadow, así que una capa que no
     esté en --rp-halo-* desaparece apenas arranca el latido. */
  --rp-halo-reposo:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 0 0 1px rgba(37, 211, 102, .4),
    0 16px 34px -12px rgba(18, 140, 74, .7),
    0 0 18px rgba(37, 211, 102, .5),
    0 0 40px rgba(37, 211, 102, .22);
  --rp-halo-pico:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 0 0 1px rgba(37, 211, 102, .55),
    0 16px 34px -12px rgba(18, 140, 74, .7),
    0 0 24px rgba(37, 211, 102, .65),
    0 0 50px rgba(37, 211, 102, .32);
  box-shadow: var(--rp-halo-reposo);
  animation: rp-pulso 3.6s ease-in-out infinite;
  transition: transform .2s;
}
.fab::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(37, 211, 102, .55);
  animation: rp-anillo 2.8s ease-out infinite;
  pointer-events: none;
}
.fab:hover { transform: translateY(-2px); }
/* Con el menú móvil desplegado el botón flotante quedaba encima de la llamada
   a la acción del propio menú. Mientras el menú está abierto, se retira. */
.menu-open .fab { display: none; }
@media print { .fab, .site-header { display: none; } }

/* Keyframes del neón sutil, compartidos. Cada elemento declara sus variables
   --rp-* y la animación las lee al aplicarse (dentro de un keyframe las
   variables se resuelven por elemento, no quedan congeladas): un solo juego
   de fotogramas sirve para la cabecera, el fab, el nombre y el lema, y el
   refuerzo móvil es sólo redeclarar variables en la media query. La regla
   global de prefers-reduced-motion (sección 2) apaga todos estos pulsos. */
@keyframes rp-pulso {
  0%, 100% { box-shadow: var(--rp-halo-reposo); }
  50%      { box-shadow: var(--rp-halo-pico); }
}
@keyframes rp-brillo {
  0%, 100% { filter: var(--rp-brillo-reposo); }
  50%      { filter: var(--rp-brillo-pico); }
}
@keyframes rp-lema {
  0%, 100% { text-shadow: var(--rp-lema-reposo); }
  50%      { text-shadow: var(--rp-lema-pico); }
}
@keyframes rp-anillo {
  0%   { transform: scale(1); opacity: .7; }
  70%  { transform: scale(1.28); opacity: 0; }
  100% { transform: scale(1.28); opacity: 0; }
}

/* --- 13. Página de producto --------------------------------------------- */
.phero { background: linear-gradient(180deg, var(--deep) 0%, var(--deep-2) 100%); color: var(--on-dark); padding-block: clamp(44px, 5vw, 72px); }
.phero .crumbs { font-size: .82rem; color: var(--on-dark-2); margin-bottom: 22px; }
.phero .crumbs a:hover { color: var(--bright); }
.phero .crumbs span { margin-inline: 8px; opacity: .5; }
.phero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.phero h1 { color: #fff; margin-bottom: 16px; }
.phero .lead { color: var(--on-dark-2); }
.phero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.phero .pill { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; }

.phero-panel { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13); border-radius: var(--r-lg); padding: 26px; }
.phero-panel h2 { font-size: .74rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--bright); font-family: 'IBM Plex Mono', ui-monospace, monospace; margin-bottom: 16px; }
.phero-panel li { display: flex; gap: 11px; padding: 9px 0; font-size: .89rem; color: var(--on-dark); border-bottom: 1px solid rgba(255, 255, 255, .09); }
.phero-panel li:last-child { border-bottom: 0; }
.phero-panel svg { flex: none; color: var(--bright); margin-top: 4px; }

.highlight { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(26px, 3vw, 40px); }
.highlight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 44px); align-items: center; }
.hl-items { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hl-item { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 15px 17px; }
.hl-item b { display: block; font-size: .88rem; color: var(--ink); font-weight: 600; margin-bottom: 3px; }
.hl-item span { display: block; font-size: .8rem; color: var(--muted); line-height: 1.4; }

.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.rel { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; transition: border-color .2s, transform .2s; }
.rel:hover { border-color: var(--teal); transform: translateY(-2px); }
.rel b { display: block; font-size: .95rem; color: var(--ink); margin-bottom: 4px; }
.rel span { display: block; font-size: .82rem; color: var(--muted); line-height: 1.45; }

/* --- 14. Utilidades ------------------------------------------------------ */
.center { text-align: center; }
.hero-actions.center { justify-content: center; }
.ok-mark {
  width: 66px; height: 66px; margin: 0 auto 26px; border-radius: 20px;
  background: var(--tint); color: var(--teal); display: grid; place-items: center;
}
.mt-0 { margin-top: 0; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }
.note { font-size: .8rem; color: var(--faint); line-height: 1.55; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Aparición al hacer scroll. Sin JS el contenido queda visible igual: la
   clase .reveal sólo se activa cuando el script marca <html class="js">.
   v2: la entrada ahora es en profundidad (rotateX + perspective), no un
   deslizamiento plano — el bloque se "levanta" desde el plano de la página. */
.js .reveal {
  opacity: 0;
  transform: perspective(1100px) translateY(28px) rotateX(8deg);
  transform-origin: 50% 100%;
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* --- 15. Responsive ------------------------------------------------------ */
@media (max-width: 1000px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 900px) {
  .main-nav, .header-phone { display: none; }
  .nav-toggle { display: block; }
  .hero-grid, .phero-grid, .form-grid, .founder, .highlight-grid { grid-template-columns: 1fr; }
  .founder { gap: 34px; }
  .hero-side, .phero-side { order: 2; }
}
@media (max-width: 760px) {
  /* Por debajo de este ancho el botón de la cabecera empujaba el icono de
     menú fuera de pantalla. Se retira: la llamada a la acción sigue estando
     en el menú desplegado, en el hero y en el botón flotante. En su lugar
     aparecen los duplicados móviles de WhatsApp e Instagram, junto al menú. */
  .header-cta { display: none; }
  .header-ig-m, .header-wa-m { display: grid; }
}
@media (max-width: 620px) {
  :root { --gutter: 18px; }
  .field-row, .hl-items { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .trustbar-in { gap: 12px 22px; }
  .brand img { width: 36px; height: 36px; }
  /* Refuerzo móvil del neón: mismas capas, ~40% más encendidas y latido un
     poco más rápido — en pantalla chica el halo de escritorio no se ve. */
  .brand-name {
    font-size: 1.1rem;
    --rp-brillo-reposo: drop-shadow(0 0 10px rgba(20, 184, 143, .62));
    --rp-brillo-pico:   drop-shadow(0 0 15px rgba(20, 184, 143, .85));
    animation-duration: 3.2s;
  }
  .brand-tag {
    font-size: .55rem; letter-spacing: .04em;
    --rp-lema-reposo: 0 0 9px rgba(20, 184, 143, .60), 0 0 20px rgba(20, 184, 143, .30);
    --rp-lema-pico:   0 0 13px rgba(20, 184, 143, .80), 0 0 26px rgba(20, 184, 143, .42);
    animation-duration: 3.2s;
  }
  /* En pantalla angosta el botón con texto tapaba una línea entera de lectura.
     Se reduce a un círculo con icono; la etiqueta queda para lectores de
     pantalla mediante aria-label. El glifo crece a ~62% del círculo, como en
     el logo oficial: a 20 px se veía una marquita blanca perdida en un
     circulote verde, no un todo. */
  .fab {
    right: 14px; bottom: 14px; padding: 0; width: 52px; height: 52px; justify-content: center;
    --rp-halo-reposo:
      inset 0 1px 0 rgba(255, 255, 255, .5),
      0 0 0 1px rgba(37, 211, 102, .5),
      0 16px 34px -12px rgba(18, 140, 74, .7),
      0 0 22px rgba(37, 211, 102, .65),
      0 0 46px rgba(37, 211, 102, .3);
    --rp-halo-pico:
      inset 0 1px 0 rgba(255, 255, 255, .5),
      0 0 0 1px rgba(37, 211, 102, .65),
      0 16px 34px -12px rgba(18, 140, 74, .7),
      0 0 30px rgba(37, 211, 102, .85),
      0 0 58px rgba(37, 211, 102, .42);
    animation-duration: 3.2s;
  }
  .fab::after { inset: -4px; border-width: 2px; animation-duration: 2.6s; }
  .fab span { display: none; }
  .fab svg { width: 32px; height: 32px; }
  .hero-actions .btn, .phero-actions .btn { width: 100%; }
}

/* --- 16. Capa 3D ----------------------------------------------------------
   Tres piezas, todas opcionales y progresivas:

   a) Fondo WebGL: site.v2.js inyecta un <canvas class="fx3d-canvas"> como
      primer hijo del hero, del hero de producto y del bloque de contacto, y
      dibuja una malla de puntos en perspectiva con los colores de la casa.
      Sin WebGL, sin JS o con prefers-reduced-motion el canvas no existe y
      queda el fondo plano de siempre.
   b) Tilt de tarjetas: el JS inclina la tarjeta siguiendo el puntero
      (element.style.transform, CSSOM: no lo bloquea la CSP). Aquí sólo se
      declaran las transiciones y el contexto preserve-3d para que el icono
      "flote" por delante de la tarjeta inclinada.
   c) Reveal en profundidad: definido en la sección 14.

   Rendimiento: un solo dibujo por cuadro y por canvas visible; el canvas se
   pausa fuera de pantalla y con la pestaña oculta (lo gestiona el JS). Aquí,
   contain y translateZ(0) aíslan el pintado del resto de la página. */
.fx3d-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; contain: strict; transform: translateZ(0);
}
.hero, .phero, .form-section { position: relative; overflow: hidden; }
.hero > .wrap, .hero > .wrap-narrow, .phero > .wrap,
.form-section > .wrap { position: relative; z-index: 1; }

/* Sobre fondo claro la malla es un susurro; sobre los bloques verdes puede
   brillar más. La opacidad fina la decide el shader; esta es la global. */
/* En el hero claro la malla se atenúa en diagonal hacia la esquina del texto:
   los puntos nunca compiten con el titular ni con la nota pequeña. */
.hero .fx3d-canvas {
  opacity: .85;
  -webkit-mask-image: linear-gradient(115deg, rgba(0, 0, 0, .14) 30%, rgba(0, 0, 0, .72) 55%, #000 75%);
  mask-image: linear-gradient(115deg, rgba(0, 0, 0, .14) 30%, rgba(0, 0, 0, .72) 55%, #000 75%);
}
/* Hero centrado (gracias.html): sin columna de texto que esquivar, el fundido
   pasa a vertical y más tenue. :has() no llega a navegadores viejos; ahí
   queda el fundido diagonal, que también funciona. */
.hero:has(> .wrap-narrow) .fx3d-canvas {
  opacity: .55;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .08) 25%, rgba(0, 0, 0, .5) 60%, #000 88%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .08) 25%, rgba(0, 0, 0, .5) 60%, #000 88%);
}
/* En los bloques oscuros la malla brilla entera, pero cede un poco justo
   donde está la columna de texto (arriba a la izquierda). */
.phero .fx3d-canvas, .form-section .fx3d-canvas {
  opacity: .85;
  -webkit-mask-image: linear-gradient(105deg, rgba(0, 0, 0, .5) 22%, rgba(0, 0, 0, .85) 48%, #000 68%);
  mask-image: linear-gradient(105deg, rgba(0, 0, 0, .5) 22%, rgba(0, 0, 0, .85) 48%, #000 68%);
}

/* Objetivos del tilt que aún no transicionaban transform. */
.js .hero-card, .js .phero-panel, .js .aud, .js .feat { transition: transform .18s ease; }
.js .hero-card, .js .phero-panel, .js .aud, .js .rel, .js .feat { position: relative; }

/* El icono de la tarjeta de producto vive unos milímetros por delante del
   plano de la tarjeta: sólo se nota cuando el tilt crea la perspectiva. */
.js .pcard, .js .hero-card, .js .phero-panel { transform-style: preserve-3d; }
.js .pcard .pcard-ic { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.js .pcard:hover .pcard-ic { transform: translateZ(34px) rotateZ(-3deg); }
.js .hero-card:hover .hc-list svg { transform: translateZ(20px); }
.js .hc-list svg { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }

/* Brillo especular que sigue al puntero sobre las tarjetas inclinadas. El
   span lo inyecta el JS; el gradiente se posiciona vía CSSOM. */
.sheen {
  position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity .3s;
}

/* --- Medallón 3D del sello (hero de la home) -----------------------------
   Una moneda: cara frontal y cara trasera nítidas —la trasera va rotada
   180° y cada cara oculta su reverso con backface-visibility, así el logo
   se ve igual de vivo se mire por donde se mire— y entre ambas un canto de
   veinticuatro copias oscuras a 1 px más tres paredes interiores cruzadas
   (.rp-wall): de perfil se lee como un borde macizo, sin rendijas entre
   láminas. El JS lo hace girar solo, y se puede tomar y girar con el
   puntero (cursor grab). Sin JS las capas coinciden y se ve el logo
   plano. */
.hero-side { display: grid; justify-items: center; gap: 30px; }
.phero-side { display: grid; justify-items: center; gap: 26px; }

/* En las páginas de producto el medallón corona el panel del hero oscuro:
   algo más compacto, y en vez de sombra proyecta un aura del acento del
   producto (color-mix; los navegadores sin soporte conservan la sombra y el
   anillo teal de la base, que también se ven bien). */
.phero .rp-seal { width: 126px; height: 126px; }
.phero .rp-seal::after {
  background: radial-gradient(closest-side, rgba(20, 184, 143, .3), transparent 70%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bright) 36%, transparent), transparent 70%);
}
.phero .rp-face {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bright) 45%, transparent);
}
.rp-seal {
  width: 154px; height: 154px; position: relative; z-index: 1;
  perspective: 900px; cursor: grab; touch-action: none;
}
.rp-seal:active { cursor: grabbing; }
/* Sin aura. Se probó dos veces y ambas delatan un molde ajeno al isotipo
   («piñata de cumpleaños»): como box-shadow de las caras gira con la moneda
   y de canto se comprime en columnas que sobresalen; como capa estática
   queda un fantasma quieto detrás de una moneda que gira. El realce del
   medallón queda en el anillo de 1 px de las caras, que sí acompaña. */
.rp-seal::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -30px; height: 30px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(7, 43, 36, .32), transparent 70%);
}
.rp-seal-obj { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
/* Alma del canto: tres paredes interiores que cruzan la moneda de lado a
   lado, giradas 45/90/135° para que desde cualquier ángulo alguna quede de
   frente. De perfil llenan el hueco entre láminas con material sólido —sin
   ellas el fondo se cuela entre las capas y se ve el truco—; de frente
   quedan de canto (ancho cero) y las caras las tapan. */
.rp-wall {
  position: absolute; top: 2%; bottom: 2%; left: 50%;
  width: 26px; margin-left: -13px; border-radius: 13px;
  background: linear-gradient(180deg, #16283f, #070d16);
}
.rp-wall:nth-of-type(1) { transform: rotateY(45deg); }
.rp-wall:nth-of-type(2) { transform: rotateY(90deg); }
.rp-wall:nth-of-type(3) { transform: rotateY(135deg); }
/* Los radios de esquina van EN PORCENTAJE, calcados del propio SVG (rect de
   1000 con rx=230, retraído 12/1024 del borde): con un radio fijo en px, al
   cambiar el tamaño del medallón (órbita 21%, phero 126px, móvil 122px) el
   canto quedaba más redondo que las caras y se veía el molde. */
.rp-seal-obj img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 22.5%; user-select: none; -webkit-user-select: none;
}
/* Las 24 láminas del canto, a 1 px: con el paso de 2 px de antes, de canto
   se veían como persiana. Son planos sólidos (<i>), no copias del SVG —una
   imagen en ángulo rasante se emborrona—, con el mismo contorno redondeado
   que las caras. nth-of-type cuenta entre <i>, sin mezclarse con las
   paredes <b>. */
.rp-edge {
  position: absolute; inset: 1.2%; display: block; border-radius: 23%;
  background: linear-gradient(180deg, #16283f, #070d16);
}
.rp-edge:nth-of-type(1)  { transform: translateZ(-11.5px); }
.rp-edge:nth-of-type(2)  { transform: translateZ(-10.5px); }
.rp-edge:nth-of-type(3)  { transform: translateZ(-9.5px); }
.rp-edge:nth-of-type(4)  { transform: translateZ(-8.5px); }
.rp-edge:nth-of-type(5)  { transform: translateZ(-7.5px); }
.rp-edge:nth-of-type(6)  { transform: translateZ(-6.5px); }
.rp-edge:nth-of-type(7)  { transform: translateZ(-5.5px); }
.rp-edge:nth-of-type(8)  { transform: translateZ(-4.5px); }
.rp-edge:nth-of-type(9)  { transform: translateZ(-3.5px); }
.rp-edge:nth-of-type(10) { transform: translateZ(-2.5px); }
.rp-edge:nth-of-type(11) { transform: translateZ(-1.5px); }
.rp-edge:nth-of-type(12) { transform: translateZ(-.5px); }
.rp-edge:nth-of-type(13) { transform: translateZ(.5px); }
.rp-edge:nth-of-type(14) { transform: translateZ(1.5px); }
.rp-edge:nth-of-type(15) { transform: translateZ(2.5px); }
.rp-edge:nth-of-type(16) { transform: translateZ(3.5px); }
.rp-edge:nth-of-type(17) { transform: translateZ(4.5px); }
.rp-edge:nth-of-type(18) { transform: translateZ(5.5px); }
.rp-edge:nth-of-type(19) { transform: translateZ(6.5px); }
.rp-edge:nth-of-type(20) { transform: translateZ(7.5px); }
.rp-edge:nth-of-type(21) { transform: translateZ(8.5px); }
.rp-edge:nth-of-type(22) { transform: translateZ(9.5px); }
.rp-edge:nth-of-type(23) { transform: translateZ(10.5px); }
.rp-edge:nth-of-type(24) { transform: translateZ(11.5px); }
.rp-face {
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 0 0 1px rgba(46, 196, 176, .35);
}
.rp-face-front { transform: translateZ(13px); }
.rp-face-back { transform: translateZ(-13px) rotateY(180deg); }

@media (max-width: 620px) {
  .rp-seal { width: 122px; height: 122px; }
}

@media (prefers-reduced-motion: reduce) {
  .fx3d-canvas { display: none; }
  .brand:hover img { transform: none; }
}

/* --- 17. Tonalidad por producto -------------------------------------------
   Cada página de producto lleva <body class="t-slug"> y aquí recupera el
   color de su propia app del portafolio (RP One: cada producto conserva su
   color y nombre; el sello Rp Medistock es común). Redefinir los tokens
   basta: hero, acentos, checks, formulario, footer y la paleta de la malla
   WebGL se tiñen en cascada. Los pares texto/fondo se eligieron manteniendo
   el contraste AA de los originales. */
body.t-pharmacare {          /* verde-negro + neón, como la app */
  --deep: #082e26; --deep-2: #051f1a;
  --fxd1: #14b88f; --fxd2: #2dd4bf; --fxd3: #86efac;
}
body.t-proasmart {           /* teal petróleo "documento oficial" */
  --deep: #0e4d5c; --deep-2: #08333e; --teal: #0f7285; --bright: #2ec4b0;
  --tint: #e6f4f6; --tint-2: #f2fafb;
  --fxd1: #2ec4b0; --fxd2: #22d3ee; --fxd3: #a5f3fc;
}
body.t-medicinvent {         /* esmeralda */
  --deep: #065f46; --deep-2: #043d2d; --teal: #047857; --bright: #34d399;
  --tint: #e8f8f1; --tint-2: #f4fcf8;
  --fxd1: #34d399; --fxd2: #6ee7b7; --fxd3: #bef264;
}
body.t-inventsmart {         /* índigo */
  --deep: #312e81; --deep-2: #1e1b4b; --teal: #4338ca; --bright: #818cf8;
  --tint: #eceefc; --tint-2: #f5f6fe;
  --fxd1: #818cf8; --fxd2: #c4b5fd; --fxd3: #22d3ee;
}
body.t-fleetcare {           /* azul marino */
  --deep: #0f3557; --deep-2: #081f36; --teal: #175d8d; --bright: #38bdf8;
  --tint: #e7f1f9; --tint-2: #f2f8fd;
  --fxd1: #38bdf8; --fxd2: #7dd3fc; --fxd3: #a78bfa;
}
body.t-clinicbox {           /* navy institucional */
  --deep: #1e3a5f; --deep-2: #122540; --teal: #2d5c8c; --bright: #60a5fa;
  --tint: #e9f0f8; --tint-2: #f4f8fc;
  --fxd1: #60a5fa; --fxd2: #93c5fd; --fxd3: #5eead4;
}
body.t-careercare {          /* verde de la casa con destello dorado */
  --fxd1: #14b88f; --fxd2: #5eead4; --fxd3: #fbbf24;
}
body.t-comprasmart {         /* teal CompraSmart */
  --deep: #115e59; --deep-2: #0a413d; --teal: #0f766e; --bright: #2dd4bf;
  --tint: #e6f7f5; --tint-2: #f2fbfa;
  --fxd1: #2dd4bf; --fxd2: #99f6e4; --fxd3: #fbbf24;
}
body.t-docmanager {          /* azul institucional DocManager */
  --deep: #0b4468; --deep-2: #072b47; --teal: #0f5c8c; --bright: #5eb0e8;
  --tint: #eaf4fa; --tint-2: #f3f9fd;
  --fxd1: #2a86c0; --fxd2: #7dd3fc; --fxd3: #2ec4b0;
}

/* --- 18. Video del portafolio --------------------------------------------
   Un solo MP4 autoalojado (la CSP no permite reproductores de terceros).
   El póster evita descargar un solo byte del video hasta que se pulsa. */
.video-wrap { max-width: 960px; margin-inline: auto; }
.video-wrap video {
  width: 100%; display: block; border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); background: var(--deep-2);
}

/* --- 19. Órbita del hero -------------------------------------------------
   El ecosistema de ocho plataformas girando alrededor del medallón. Dos
   rotaciones encajadas: el grupo entero gira 360° en 70 s y cada chip
   CONTRARROTA a la misma velocidad en sentido inverso, que es lo único que
   mantiene el texto horizontal — sin eso los nombres quedan cabeza abajo la
   mitad del recorrido. La contrarrotación necesita transform-box: fill-box
   para girar sobre el centro del propio chip y no sobre el del lienzo.

   El medallón NO se dibuja aquí: es el mismo .rp-seal de la sección 16, que
   ya se puede tomar y girar con el puntero. La órbita sólo lo rodea. */
.orbit { margin: 0; width: 100%; max-width: 520px; }
.orbit-stage { position: relative; }
/* overflow oculto y no visible: nada del dibujo sale del viewBox —el chip más
   lejano llega a 535 de 560— y dejarlo visible permitía que el grupo, ya
   rotado, pintara fuera de su caja y empujara el ancho del documento. */
.orbit-svg { width: 100%; height: auto; display: block; overflow: hidden; }

/* La capa del medallón cubre todo el lienzo pero es transparente al puntero,
   salvo el medallón mismo: si no, su caja invisible se tragaría el clic de
   los chips que pasan por debajo. */
.orbit-core { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.orbit-core .rp-seal { width: 21%; height: auto; aspect-ratio: 1; pointer-events: auto; }
.orbit-core .rp-seal::after { display: none; }         /* la sombra de apoyo no aplica en el aire */

.orb-halo  { opacity: .55; }
.orb-ring  { fill: none; stroke: var(--line-2); stroke-dasharray: 2 6; }
.orb-spoke { stroke: var(--teal); stroke-opacity: .3; stroke-dasharray: 4 6; animation: dashmove 1.6s linear infinite; }
.orb-pkt   { fill: var(--teal); }
.orb-ping  { fill: none; stroke: var(--bright); animation: ping 3s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.orb-rot   { animation: spin 70s linear infinite; transform-box: view-box; transform-origin: 280px 280px; }
.orb-chip  { animation: spinCC 70s linear infinite; transform-box: fill-box; transform-origin: center; }

/* Cada chip hereda --cat de su familia, igual que las tarjetas. */
.orb-chip.c-clin { --cat: var(--cat-clin); }
.orb-chip.c-log  { --cat: var(--cat-log); }
.orb-chip.c-gest { --cat: var(--cat-gest); }
.orb-chip rect { fill: #fff; stroke: var(--cat); }
.orb-chip text { fill: var(--cat); font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; font-weight: 600; }
.orb-chip a { cursor: pointer; }
.orb-chip a:hover rect, .orb-chip a:focus-visible rect { fill: var(--cat); }
.orb-chip a:hover text, .orb-chip a:focus-visible text { fill: #fff; }

.orbit-legend { margin-top: 14px; font-size: .74rem; line-height: 1.7; color: var(--faint); text-align: center; }
.orbit-legend span { display: inline-flex; align-items: center; gap: 6px; margin: 0 7px; }
.orbit-legend i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.orbit-legend i.c-clin { background: var(--cat-clin); }
.orbit-legend i.c-log  { background: var(--cat-log); }
.orbit-legend i.c-gest { background: var(--cat-gest); }

@keyframes spin   { from { transform: rotate(0deg); }  to { transform: rotate(360deg); } }
@keyframes spinCC { from { transform: rotate(0deg); }  to { transform: rotate(-360deg); } }
@keyframes ping   { 0% { transform: scale(.6); opacity: .55; } 80%, 100% { transform: scale(2.4); opacity: 0; } }

/* --- 20. Banda de cifras ------------------------------------------------- */
/* Las cuatro cifras que antes se listaban en la barra de iconos. Contadas al
   entrar en pantalla (site.v3.js) y una sola vez: un contador que se reinicia
   cada vez que se pasa por delante deja de leerse como un dato y pasa a leerse
   como un adorno. Sin JS o con movimiento reducido el número ya está escrito
   en el HTML, así que se ve igual. */
.kpi {
  background: radial-gradient(900px 420px at 85% -40%, rgba(20, 184, 143, .26), transparent 64%), var(--deep);
  color: var(--on-dark); padding-block: 60px;
}
.kpi-in { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 40px 28px; }
.kpi-n { font-size: clamp(2.2rem, 3.6vw, 3.25rem); font-weight: 600; line-height: 1.1; margin: 0; font-variant-numeric: tabular-nums; }
.kpi-l {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--on-dark-2); margin: 12px 0 0; line-height: 1.5;
}

/* --- 21. Circuito completo ----------------------------------------------- */
/* Las tres familias como bloques enlazados, con el dato viajando entre ellos.
   El SVG no se encoge por debajo de 720 px: comprimido deja de leerse, así que
   se desplaza dentro de su panel. El scroll es del panel, nunca de la página. */
.circuit {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  padding: clamp(16px, 3vw, 36px); overflow-x: auto;
}
.circuit svg { width: 100%; min-width: 720px; height: auto; display: block; }
.circuit text { font-family: 'IBM Plex Sans', sans-serif; }
.cir-g.c-clin { --cat: var(--cat-clin); }
.cir-g.c-log  { --cat: var(--cat-log); }
.cir-g.c-gest { --cat: var(--cat-gest); }
.cir-box  { fill: #fff; stroke: var(--cat); }
.cir-kick { fill: var(--cat); font-size: 12px; font-weight: 600; letter-spacing: 1px; }
.cir-name { fill: var(--ink); font-size: 16px; font-weight: 600; }
.cir-desc { fill: var(--muted); font-size: 12.5px; }
.cir-pass { fill: var(--cat); font-size: 11.5px; }
.cir-flow { fill: none; stroke: var(--cat); stroke-opacity: .55; stroke-width: 2; stroke-dasharray: 5 6; animation: dashmove 1.4s linear infinite; }
.cir-pkt  { fill: var(--cat); }

/* --- 22. Responsive y movimiento reducido de las secciones 7 y 19–21 ----- */
@media (max-width: 900px) {
  /* Apilado, la órbita a 520 px domina la pantalla y empuja el formulario
     fuera de vista. Se acota y se centra. */
  .orbit { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 820px) {
  .kpi-in { grid-template-columns: repeat(2, 1fr); justify-content: stretch; gap: 32px 24px; }
}
@media (max-width: 620px) {
  /* minmax(340px, 1fr) fuerza una pista de 340 px: por debajo de ~376 px de
     viewport la rejilla desbordaría a lo ancho. min() la deja ceder. */
  .mcard-grid { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
  .pmarq { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px calc(100% - 40px), transparent);
                   mask-image: linear-gradient(to right, transparent, #000 40px calc(100% - 40px), transparent); }
}

/* El prototipo apagaba TODA animación con una regla global. Aquí se enumeran
   las clases nuevas para no alterar de paso el comportamiento ya acordado de
   la capa 3D y del revelado, que tienen su propia regla más arriba. Las
   animaciones SMIL (los paquetes de datos que recorren las líneas) no
   obedecen a CSS: las detiene site.v3.js con pauseAnimations(). */
@media (prefers-reduced-motion: reduce) {
  .pmarq-track, .orb-rot, .orb-chip, .orb-ping, .orb-spoke, .cir-flow,
  .mock-fill, .mock-cell.live, .mock-line i, .mock-alert, .mock-bars i,
  .mock-draw, .mock-dash {
    animation-duration: .01s !important;
    animation-iteration-count: 1 !important;
  }
}

/* --- 23. Medidas de las miniaturas --------------------------------------- */
/* La CSP del sitio prohíbe style-src 'unsafe-inline': un style= en el HTML no
   es que quede feo, es que el navegador lo IGNORA. Por eso cada medida de las
   miniaturas —anchos de barra, alturas de tramo, retardos y grosores del
   código de barras— es una clase y no un atributo. Los números son los del
   diseño; se leen junto al marcado que los usa en tools/build.py. */
.mock-w31  { width: 31%; }
.mock-w62  { width: 62%; }
.mock-w78  { width: 78%; }
.mock-w97  { width: 97%; }

.mock-h22  { height: 22%; }
.mock-h36  { height: 36%; }
.mock-h52  { height: 52%; }
.mock-h70  { height: 70%; }
.mock-h100 { height: 100%; }

/* Retardos en centésimas de segundo: mock-d80 = .8s. */
.mock-d15  { animation-delay: .15s; }
.mock-d30  { animation-delay: .3s; }
.mock-d45  { animation-delay: .45s; }
.mock-d60  { animation-delay: .6s; }
.mock-d80  { animation-delay: .8s; }
.mock-d140 { animation-delay: 1.4s; }

.mock-mt10 { margin-top: 10px; }

.mock-code i.b2 { width: 2px; } .mock-code i.b3 { width: 3px; }
.mock-code i.b4 { width: 4px; } .mock-code i.b5 { width: 5px; }
.mock-code i.b6 { width: 6px; }

/* --- 24. «Qué nos distingue» --------------------------------------------- */
/* Los tres argumentos que estaban en la tarjeta del hero, ahora dentro de la
   banda «Para quién es»: la órbita se quedó con la columna derecha del hero y
   estos tres puntos responden a la misma pregunta que la banda —si esto es
   para mí—, así que no hacía falta una sección propia para ellos. Tres
   columnas exactas y no auto-fit: son tres, siempre, y auto-fit dejaría uno
   huérfano en la segunda fila en anchos intermedios. */
.distingue { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; text-align: left; }
.distingue > div { padding-top: 14px; border-top: 2px solid var(--bright); }
.distingue b { display: block; font-size: .95rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.distingue span { display: block; font-size: .85rem; line-height: 1.55; color: var(--muted); }
@media (max-width: 820px) { .distingue { grid-template-columns: 1fr; gap: 16px; } }
/* La ayuda va en su propia línea: pegada a la leyenda de colores se partía
   por la mitad en anchos intermedios. */
.orbit-legend b { display: block; font-weight: 400; margin-top: 2px; }