/* ==========================================================================
   RP Medistock — hoja de estilos única del sitio (v11)
   --------------------------------------------------------------------------
   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.

   v13 (2026-10-05) = home «Instrumento» (sección 26), Geist en lugar de
   Fraunces + IBM Plex, y la tinta pasa al azul marino de la marca.
   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:        #0b2545;
  --deep-2:      #071a33;
  --teal:        #0b7d70;
  --bright:      #2ec4b6;
  --tint:        #e4f3f1;
  --tint-2:      #f3f6f7;

  /* 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:         #0b2545;
  --ink-2:       #22385a;
  --muted:       #4a5a6e;
  --faint:       #536579;
  --on-dark:     #eef3f6;
  --on-dark-2:   #b8c7d4;

  /* Superficies y líneas */
  --bg:          #ffffff;
  --surface:     #f3f6f7;
  --line:        #dde5ea;
  --line-2:      #c5d1d9;

  --shadow-sm:   0 1px 2px rgba(11, 37, 69, .05);
  --shadow:      0 2px 4px rgba(11, 37, 69, .04), 0 12px 32px -12px rgba(11, 37, 69, .16);
  --shadow-lg:   0 32px 70px -30px rgba(7, 26, 51, .45);

  --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);
}

/* --- 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: 'Geist', 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: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.03em;
  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 Geist Mono (antes IBM Plex Mono, como los KPI y
   rótulos de las apps del portafolio: es la firma técnica de RP One. */
.eyebrow {
  font-family: 'Geist 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; }

/* Plano desde v13 (2026-10-05, home «Instrumento»): el neón sutil del
   23-08 (filo teal encendido y resplandor) se retiró porque el brillo
   exterior es de los rastros de IA más reconocibles. Está en el historial. */
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: #096a5f; transform: translateY(-1px); }
.btn:active { transform: scale(.97); }

.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }

.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: 'Geist', system-ui, sans-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: 'Geist 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: 'Geist 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; }

/* --- 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: 28px; }
/* v13: columnas con filete en vez de cinco tarjetas iguales con ícono. */
.aud { border-top: 1px solid var(--line-2); padding-top: 16px; }
.aud-ic { display: block; margin-bottom: 12px; color: var(--teal); }
.aud b { display: block; font-size: 1rem; 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: 'Geist 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: 'Geist 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) ------------------------- */
.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: 'Geist 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: 'Geist 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: translateY(14px);
  transition: opacity .45s cubic-bezier(.23, 1, .32, 1), transform .45s cubic-bezier(.23, 1, .32, 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. (Retirada) Capa 3D --------------------------------------------
   Aquí vivían el fondo WebGL de puntos, la inclinación de tarjetas con
   brillo especular y el medallón 3D del isotipo. Se retiraron en octubre de
   2026 con el lenguaje «Instrumento», que no lleva efectos; están en el
   historial de git. Queda sólo el contexto de posición de los bloques. */
.hero, .phero, .form-section { position: relative; overflow: hidden; }

/* El panel del hero de producto, sin el medallón que lo coronaba. */
.hero-side { display: grid; justify-items: center; gap: 30px; }
.phero-side { display: grid; gap: 26px; }

@media (prefers-reduced-motion: reduce) {
  .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;
}
body.t-proasmart {           /* teal petróleo "documento oficial" */
  --deep: #0e4d5c; --deep-2: #08333e; --teal: #0f7285; --bright: #2ec4b0;
  --tint: #e6f4f6; --tint-2: #f2fafb;
}
body.t-medicinvent {         /* esmeralda */
  --deep: #065f46; --deep-2: #043d2d; --teal: #047857; --bright: #34d399;
  --tint: #e8f8f1; --tint-2: #f4fcf8;
}
body.t-inventsmart {         /* índigo */
  --deep: #312e81; --deep-2: #1e1b4b; --teal: #4338ca; --bright: #818cf8;
  --tint: #eceefc; --tint-2: #f5f6fe;
}
body.t-fleetcare {           /* azul marino */
  --deep: #0f3557; --deep-2: #081f36; --teal: #175d8d; --bright: #38bdf8;
  --tint: #e7f1f9; --tint-2: #f2f8fd;
}
body.t-clinicbox {           /* navy institucional */
  --deep: #1e3a5f; --deep-2: #122540; --teal: #2d5c8c; --bright: #60a5fa;
  --tint: #e9f0f8; --tint-2: #f4f8fc;
}
body.t-careercare {          /* verde de la casa con destello dorado */
}
body.t-comprasmart {         /* teal CompraSmart */
  --deep: #115e59; --deep-2: #0a413d; --teal: #0f766e; --bright: #2dd4bf;
  --tint: #e6f7f5; --tint-2: #f2fbfa;
}
body.t-docmanager {          /* azul institucional DocManager */
  --deep: #0b4468; --deep-2: #072b47; --teal: #0f5c8c; --bright: #5eb0e8;
  --tint: #eaf4fa; --tint-2: #f3f9fd;
}

/* --- 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. (Retirada) -------------------------------------------------------
   Aquí vivía la órbita de chips alrededor del medallón (hero v2, 21-08-2026).
   La sustituyó la escena de la sección 25 el 20-09-2026. El número se
   conserva para que las referencias a «sección 20/21» sigan siendo ciertas. */

/* --- 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: #fff; color: var(--ink); border-bottom: 1px solid var(--line); padding-block: 44px; }
.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: 'Geist Mono', ui-monospace, monospace;
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 10px 0 0; line-height: 1.5;
}
@media (max-width: 820px) {
  .kpi-in { grid-template-columns: repeat(2, 1fr); justify-content: stretch; gap: 32px 24px; }
}

/* --- 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; } }


/* --- 26. Home «Instrumento» (2026-10-05) ---------------------------------
   Reemplaza a la escena del portátil (sección 25, retirada; está en el
   historial de git). La home se lee como un instrumento de medición: fondo
   claro, una sola tinta (azul marino) y un acento (teal), pantallas REALES
   con anotaciones a línea fina. Lo único que se mueve es la línea de cada
   anotación al entrar en pantalla: dice «mira aquí», nada más.

   Las tres familias se tiñen desde aquí (antes vivían en la sección 8):
   verde lo clínico, cian lo logístico, azul marino la gestión. */
.c-clin { --cat: #0b7d70; }
.c-log  { --cat: #0e6f8f; }
.c-gest { --cat: #0b2545; }

.ihero { background: var(--surface); overflow-x: clip; padding-block: clamp(40px, 6vw, 88px) clamp(56px, 7vw, 104px); }
.ihero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.ihero h1 { font-size: clamp(2.2rem, 1.2rem + 2.6vw, 3.1rem); line-height: 1.04; letter-spacing: -.035em; margin-bottom: 22px; }
.ihero .lead { max-width: 34ch; font-size: clamp(1.05rem, 1rem + .35vw, 1.22rem); }
.ihero .hero-actions { margin-top: 34px; }

/* Pantalla real enmarcada. Las anotaciones van DENTRO del marco para que sus
   porcentajes sean de la captura y no de la figura con su pie. */
.shot { margin: 0; }
.shot-frame { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px; box-shadow: 0 30px 60px -30px rgba(11, 37, 69, .35); }
.shot-frame img { width: 100%; height: auto; border-radius: 8px; }
.shot figcaption { font-family: 'Geist Mono', ui-monospace, monospace; font-size: .76rem; color: var(--muted); margin-top: 14px; line-height: 1.55; }
.shot figcaption .link-more { font-family: 'Geist', system-ui, sans-serif; font-size: .9rem; margin-left: 6px; }

/* Anotación: punto sobre el dato, línea fina y rótulo. El punto marca la
   coordenada exacta; el rótulo va siempre a la derecha. */
.co { position: absolute; display: flex; align-items: center; gap: 0; pointer-events: none; font-family: 'Geist Mono', ui-monospace, monospace; font-size: .74rem; font-weight: 500; color: var(--ink); white-space: nowrap; transform: translateY(-50%); }
.co b { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--teal); background: #fff; flex: none; box-shadow: 0 0 0 4px rgba(46, 196, 182, .22); }
.co i { display: block; width: 56px; height: 1px; background: var(--ink); opacity: .6; transform-origin: left center; }
.co > span { background: #fff; border: 1px solid var(--line-2); border-radius: 6px; padding: 6px 10px; box-shadow: var(--shadow-sm); }
.co b { margin-left: -5.5px; }
/* Los rótulos quedan en el blanco a la derecha de cada fila, no sobre el
   dato al que apuntan: la línea es lo bastante larga para salir del texto. */
.co-a { left: 30%; top: 55%; }
.co-b { left: 35%; top: 76%; }
.co-a i, .co-b i { width: 150px; }
/* En CompraSmart la tabla no deja blancos: la captura se angosta y el rótulo
   sale a la derecha del marco. */
.shot-wide .shot-frame { width: 82%; }
.co-c { left: 82%; top: 20.5%; }
.co-c i { width: 200px; }

.js .shot.reveal .co i { transform: scaleX(0); transition: transform .7s cubic-bezier(.23, 1, .32, 1) .45s; }
.js .shot.reveal .co > span { opacity: 0; transition: opacity .4s ease .9s; }
.js .shot.reveal.in .co i { transform: none; }
.js .shot.reveal.in .co > span { opacity: 1; }

/* Índice de las nueve por familia. Sin tarjetas ni filetes por fila: la
   familia la dice el filete superior de su columna, en su color. */
.pidx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px); }
.pidx-col { border-top: 2px solid var(--cat); padding-top: 18px; }
.pidx-col h3 { font-size: 1.05rem; letter-spacing: -.01em; }
.pidx-col > p { font-size: .9rem; color: var(--muted); margin: 6px 0 14px; line-height: 1.5; }
.pidx li a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 12px; }
.pidx li b { display: block; font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; transition: color .2s ease; }
.pidx li a > span > span { display: block; font-family: 'Geist Mono', ui-monospace, monospace; font-size: .76rem; color: var(--muted); margin-top: 3px; }
.pidx li svg { flex: none; color: var(--faint); transition: transform .2s cubic-bezier(.23, 1, .32, 1), color .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .pidx li a:hover b, .pidx li a:hover svg { color: var(--cat); }
  .pidx li a:hover svg { transform: translate(2px, -2px); }
}

/* La captura del hero sangra hacia el borde derecho: a la mitad de la
   columna no se leía. La sección recorta el sobrante (overflow-x: clip). */
.shot-hero .shot-frame { width: 132%; }

#destacado .shead { max-width: 760px; }

/* «Quiénes somos» con la credencial al frente (bloque de la propuesta C). */
.fnd { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.fnd-con-foto { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); }
/* Con foto, tres columnas dejaban el titular en cinco líneas: las
   credenciales pasan a una fila de cuatro bajo la foto y el texto. */
.fnd-con-foto .fnd-creds { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 8px; }
.fnd-photo { width: 100%; height: auto; border-radius: 12px; }
.dark .fnd-lead { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem); line-height: 1.16; letter-spacing: -.03em; font-weight: 600; color: #fff; margin-bottom: 28px; text-wrap: balance; }
.fnd-lead em { font-style: italic; color: var(--bright); }
.dark .fnd-body p:not(.fnd-lead) { font-size: 1rem; margin-bottom: 14px; max-width: 62ch; }
.fnd-sign { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(238, 243, 246, .18); }
.fnd-sign b { display: block; color: #fff; }
.fnd-sign span { display: block; font-size: .88rem; }
.fnd-creds { display: grid; gap: 22px; }
.fnd-creds div { border-top: 1px solid rgba(238, 243, 246, .22); padding-top: 14px; }
.fnd-creds dt { font-family: 'Geist Mono', ui-monospace, monospace; font-size: .74rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--bright); }
.fnd-creds dd { margin-top: 6px; color: var(--on-dark); font-size: .95rem; line-height: 1.5; }

@media (max-width: 900px) {
  .ihero-grid, .pidx, .fnd, .fnd-con-foto, .fnd-con-foto .fnd-creds { grid-template-columns: 1fr; }
  .fnd-photo { max-width: 360px; }
  .shot-hero .shot-frame, .shot-wide .shot-frame { width: 100%; }
  /* A este ancho las anotaciones tapan la captura; el pie ya las dice. */
  .co { display: none; }
}

/* --- 27. Teléfono (2026-10-05, probado en un Galaxy S24: 384 px de ancho) --
   a) La descripción de la captura del hero quedaba bajo el borde: el hero se
      compacta (menos aire, titular algo menor) y el botón secundario se va,
      porque el índice de las nueve plataformas está justo debajo.
   b) Con Geist el lema de la marca quedó más ancho que con IBM Plex Mono y
      empujaba el botón de menú fuera de la pantalla: el lema se ajusta y el
      bloque de marca puede encogerse. */
@media (max-width: 620px) {
  .ihero { padding-block: 22px 40px; }
  .ihero-grid { gap: 24px; }
  .ihero h1 { font-size: 1.9rem; line-height: 1.08; margin-bottom: 14px; }
  .ihero .lead { font-size: 1rem; line-height: 1.55; }
  .ihero .hero-actions { margin-top: 20px; }
  .ihero .btn-ghost { display: none; }
  .shot figcaption { margin-top: 10px; font-size: .72rem; }
}
@media (max-width: 430px) {
  .brand { min-width: 0; flex-shrink: 1; }
  .header-in { gap: 10px; }
  .brand { gap: 9px; }
  .brand-tag { letter-spacing: 0; font-size: .5rem; white-space: nowrap; }
  .brand-name { font-size: 1.02rem; }
  .header-ig-m, .header-wa-m { width: 32px; height: 32px; }
  .nav-toggle { flex: none; }
}

/* Un RUT no se parte en el guion del dígito verificador. */
.nw { white-space: nowrap; }

/* Titular del hero de producto: con Geist en negrita el tamaño de display
   (3,9 rem) dejaba seis líneas en la columna; mismo tope que la home. */
.phero h1 { font-size: clamp(2.1rem, 1.2rem + 2.4vw, 3.05rem); line-height: 1.06; letter-spacing: -.03em; }

/* --- 28. Cabecera sin efectos (2026-10-05) --------------------------------
   El lenguaje «Instrumento» no lleva resplandores ni latidos. Aquí se apagan
   los de la cabecera, decididos el 21 y 23-08: el brillo pulsante y el
   degradado del nombre, el brillo del lema, el giro de moneda del logo y los
   halos que laten en WhatsApp e Instagram. Los botones conservan sus colores
   de marca. El botón flotante de WhatsApp (.fab) no es cabecera: sigue igual. */
.brand img { transition: none; }
.brand:hover img { transform: none; }
.brand-name {
  filter: none; animation: none;
  background-image: none; color: var(--ink); -webkit-text-fill-color: currentColor;
}
.site-footer .brand-name { background-image: none; color: #fff; -webkit-text-fill-color: currentColor; }
.brand-tag { text-shadow: none; animation: none; }
.header-ig, .header-wa, .header-ig-m, .header-wa-m { animation: none; box-shadow: none; }

/* --- 29. Fluidez entre páginas (2026-10-05) -------------------------------
   Se sentía lento al cambiar de página: la clase .js la ponía el script
   diferido, así que el contenido se pintaba, desaparecía al activarse
   .reveal y volvía en 0,7 s con un giro 3D. Ahora .js se marca en el <head>
   (build.py), la entrada es un fundido corto sin 3D (sección 14) y la
   captura del hero se ve desde el primer cuadro: sólo se animan las líneas
   de sus anotaciones. Además, transición nativa entre páginas del mismo
   sitio (View Transitions): un fundido breve en vez del pantallazo blanco.
   Los navegadores que no la soportan navegan como siempre. */
.js .shot-hero.reveal { opacity: 1; transform: none; transition: none; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* --- 30. Home «Jornada» (2026-10-10) --------------------------------------
   Reemplaza a «Instrumento» en la home (las páginas de producto no cambian).
   La home cuenta un día en la farmacia de un hospital: abre a las 08:00 con
   el video del vial al amanecer y cierra a las 17:30 con la farmacia al
   atardecer. Todo el movimiento sale del reloj y de la luz del día: sin
   neón ni resplandores (rastro de IA, ver sección 4). Los degradados que hay
   son velos sobre foto para que el texto se lea, no fondos decorativos. */
.j-dark .site-header { background: rgba(6, 20, 42, .72); border-bottom-color: rgba(255, 255, 255, .08); }
.j-dark .brand-name { color: #fff; }
.j-dark .brand-tag { color: var(--bright); }
.j-dark .main-nav > a, .j-dark .nav-trigger, .j-dark .header-phone { color: #c9d6e3; }
.j-dark .main-nav > a:hover, .j-dark .nav-trigger:hover, .j-dark .nav-trigger[aria-expanded="true"],
.j-dark .header-phone:hover { color: #fff; }
.j-dark .nav-toggle { color: #fff; }
.j-dark .header-cta .btn-primary { background: var(--bright); color: #06142a; }
.j-dark .header-cta .btn-primary:hover { background: #5fe3d6; }

.btn-bright { background: var(--bright); color: #06142a; }
.btn-bright:hover { background: #5fe3d6; transform: translateY(-2px); }
.btn-glass {
  color: #fff; border-color: rgba(255, 255, 255, .28); background: rgba(6, 20, 42, .35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-glass:hover { border-color: rgba(255, 255, 255, .65); transform: translateY(-2px); }

@keyframes j-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes j-mask { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(18px); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } }
@keyframes j-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes j-zoom { from { transform: scale(1.1); } to { transform: none; } }
@keyframes j-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.j-kicker, .jh-eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: .74rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bright);
}
.dim { color: #9fb4ca; }

/* Portada */
.jh {
  position: relative; overflow: hidden; display: flex; align-items: flex-end;
  min-height: min(92svh, 920px); padding-block: 0; background: #06142a; color: #fff;
}
.jh-media {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 68% 50%;
  animation: j-zoom 7s cubic-bezier(.2, .7, .2, 1) both;
}
.jh-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 20, 42, .94) 0%, rgba(6, 20, 42, .7) 38%, rgba(6, 20, 42, .05) 72%),
    linear-gradient(0deg, #06142a 0%, rgba(6, 20, 42, 0) 34%);
}
.jh-in { position: relative; z-index: 1; width: 100%; padding-top: 140px; padding-bottom: clamp(56px, 8vw, 96px); }
.jh-eyebrow { display: flex; align-items: center; gap: 12px; animation: j-rise .8s .3s cubic-bezier(.2, .7, .2, 1) both; }
.jh-eyebrow span { width: 36px; height: 1px; background: currentColor; transform-origin: left; animation: j-draw 1s .5s cubic-bezier(.65, 0, .35, 1) both; }
.jh-title {
  margin-top: 26px; color: #fff;
  font-size: clamp(2.4rem, .9rem + 4.5vw, 5rem); font-weight: 700; line-height: .98; letter-spacing: -.045em;
}
.jh-title > span { display: block; animation: j-mask 1.1s cubic-bezier(.65, 0, .35, 1) both; }
.jh-title > span:nth-child(1) { animation-delay: .5s; }
.jh-title > span:nth-child(2) { animation-delay: .65s; }
.jh-title > span:nth-child(3) { animation-delay: .8s; }
.jh-title em { font-style: normal; color: var(--bright); }
.jh-foot { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; }
.jh-lead { flex: 0 1 44ch; font-size: var(--t-lead); line-height: 1.55; color: #c9d6e3; animation: j-rise .9s 1.15s cubic-bezier(.2, .7, .2, 1) both; }
.jh-actions { display: flex; flex-wrap: wrap; gap: 12px; animation: j-rise .9s 1.3s cubic-bezier(.2, .7, .2, 1) both; }

/* Junto al paciente */
.jp { background: #06142a; color: #fff; padding-block: clamp(72px, 9vw, 120px); }
.jp-in { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.jp-fig { flex: 1 1 300px; max-width: 460px; border-radius: var(--r-lg); overflow: hidden; background: var(--deep); }
.jp-fig img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.jp-copy { flex: 999 1 460px; min-width: 0; }
.j-h2 { margin-top: 22px; color: #fff; font-size: clamp(2rem, 1rem + 3.4vw, 3.8rem); font-weight: 700; line-height: 1.02; letter-spacing: -.04em; }
.j-lead { margin-top: 26px; max-width: 48ch; font-size: var(--t-lead); line-height: 1.6; color: #b9c8d8; }

/* La jornada. El tono del fondo va por clase (.jd-tN); el reloj, más abajo. */
.jd {
  --sky: #0a2242;
  background-color: var(--sky); color: #fff; transition: background-color 1.6s ease;
  padding-block: clamp(80px, 9vw, 112px) clamp(56px, 7vw, 80px);
}
.jd.jd-t1 { --sky: #0c2a50; }
.jd.jd-t2 { --sky: #0e3159; }
.jd.jd-t3 { --sky: #0c2a50; }
.jd.jd-t4 { --sky: #16213f; }
.jd-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.jd-head h2 { color: #fff; max-width: 16ch; font-size: clamp(2.1rem, 1rem + 3vw, 3.6rem); font-weight: 700; line-height: 1; letter-spacing: -.035em; }
.jd-play {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px;
  border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .24); background: none;
  color: #d6e1ec; font: 500 .8rem 'Geist Mono', ui-monospace, monospace; cursor: pointer;
  transition: border-color .25s, color .25s;
}
.jd-play:hover { border-color: rgba(255, 255, 255, .6); color: #fff; }
.jd-play[hidden], .jd-stops[hidden] { display: none; }
.jd-play .i-play, .jd.jd-paused .jd-play .i-pause { display: none; }
.jd.jd-paused .jd-play .i-play { display: inline; }
.jd-stage { margin-top: 56px; display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.jd-clock { flex: 1 1 340px; max-width: 440px; margin-inline: auto; }
.jd-label { text-align: center; font: 500 .74rem 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #8ea6c0; }
/* Esfera de reloj fino: escala de minutos, índices delgados, agujas
   afiladas y segundero que gira siempre. Por fuera, el anillo de la jornada
   (07:00 en adelante) se pinta hasta la hora de la escena. Las agujas y el
   anillo leen --hr, --mn y --arc, que el JS cambia por CSSOM; los valores de
   partida son los de las 08:00. */
.jd-dial { --hr: 240deg; --mn: 2880deg; --arc: 30; width: 100%; margin-top: 18px; overflow: visible; }
.jd-ring { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 2; }
.jd-arc {
  fill: none; stroke: var(--bright); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: var(--arc) 360; transition: stroke-dasharray 1.6s cubic-bezier(.65, 0, .35, 1);
}
.jd-dot { fill: #06142a; stroke: rgba(255, 255, 255, .45); stroke-width: 1.5; transition: fill .6s, stroke .6s; }
.jd-dot.on { fill: var(--bright); stroke: var(--bright); }
.jd-face { fill: rgba(255, 255, 255, .035); stroke: rgba(255, 255, 255, .14); stroke-width: 1; }
.jd-scale .mi { stroke: rgba(255, 255, 255, .26); stroke-width: .8; }
.jd-scale .ix { stroke: rgba(255, 255, 255, .78); stroke-width: 2; stroke-linecap: round; }
.jd-scale .ix4 { stroke: #fff; stroke-width: 3.5; }
.jd-hand { transform-box: view-box; transform-origin: 200px 200px; transition: transform 1.6s cubic-bezier(.65, 0, .35, 1); }
.jd-hh { transform: rotate(var(--hr)); }
.jd-mm { transform: rotate(var(--mn)); }
.jd-hh path { fill: #fff; }
.jd-mm path { fill: #e3ebf3; }
@keyframes j-spin { to { transform: rotate(360deg); } }
.jd-sec { transform-box: view-box; transform-origin: 200px 200px; animation: j-spin 60s linear infinite; }
.jd-sec line { stroke: var(--bright); stroke-width: 1.4; stroke-linecap: round; }
.jd-sec circle { fill: var(--bright); }
.jd-cap { fill: #06142a; stroke: var(--bright); stroke-width: 2.5; }
.jd-cap2 { fill: var(--bright); }
@media (prefers-reduced-motion: reduce) { .jd-sec { animation: none; } }
.jd-scenes { flex: 999 1 520px; min-width: 0; display: grid; gap: 64px; list-style: none; }
.jd-scene h3 { margin-top: 14px; color: #fff; font-size: clamp(1.8rem, 1rem + 2.2vw, 2.7rem); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
.jd-cmp { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.jd-hoy, .jd-con { padding: 20px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12); }
.jd-con { background: rgba(46, 196, 182, .1); border-color: rgba(46, 196, 182, .35); }
.jd-tag { font: 500 .7rem 'Geist Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #f0b98a; }
.jd-con .jd-tag { color: var(--bright); }
.jd-cmp p:not(.jd-tag) { margin-top: 10px; font-size: 1.02rem; line-height: 1.5; color: #c6d3e0; }
.jd-con p:not(.jd-tag) { color: #fff; }
.jd-ui {
  margin-top: 14px; padding: 16px 18px; border-radius: 12px; background: #fff; color: var(--ink);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6);
}
.jd-ui b { font-size: .95rem; }
.jd-ui span { font: 400 .75rem 'Geist Mono', ui-monospace, monospace; color: var(--faint); }
.jd-ui .jd-chip { padding: 5px 10px; border-radius: var(--r-pill); background: var(--tint); color: #0b6b60; }
.jd-foot { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.jd-ej { font: 400 .7rem 'Geist Mono', ui-monospace, monospace; color: #8ea6c0; }
.jd .link-more { color: var(--bright); }
/* Con JS: las escenas se apilan en la misma celda y sólo se ve la activa. */
.jd.jd-on .jd-scenes { gap: 0; }
.jd.jd-on .jd-scene {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(18px);
  transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1), visibility 0s .9s;
}
.jd.jd-on .jd-scene.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.jd-stops { margin-top: 64px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .14); }
.jd-stop {
  position: relative; text-align: left; background: none; border: 0; color: inherit; font: inherit;
  cursor: pointer; padding: 18px 14px 16px; min-height: 76px; transition: background-color .3s;
}
.jd-stop:hover { background: rgba(255, 255, 255, .05); }
.jd-bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--bright); transform: scaleX(0); transform-origin: left; }
.jd-stop[aria-pressed="true"] .jd-bar { transform: scaleX(1); }
.jd.jd-playing .jd-stop[aria-pressed="true"] .jd-bar { animation: j-fill 6s linear both; }
.jd-st { display: block; font: 500 .95rem 'Geist Mono', ui-monospace, monospace; color: #8ea6c0; }
.jd-sc { display: block; margin-top: 6px; font-size: .92rem; font-weight: 600; line-height: 1.3; color: #9fb4ca; }
.jd-stop[aria-pressed="true"] .jd-st { color: var(--bright); }
.jd-stop[aria-pressed="true"] .jd-sc { color: #fff; }

/* Quién lo hace */
.jq { background: var(--tint-2); padding-block: clamp(80px, 10vw, 120px); }
.jq-top { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.jq-fig { position: relative; flex: 1 1 260px; max-width: 360px; border-radius: var(--r-lg); overflow: hidden; background: var(--deep); }
.jq-fig img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.96); }
.jq-fig::after { content: ""; position: absolute; inset: 0; background: rgba(11, 37, 69, .3); mix-blend-mode: multiply; }
.jq-quote { flex: 999 1 520px; min-width: 0; }
.jq-quote svg { fill: var(--bright); }
.jq-quote p { margin-top: 24px; color: var(--ink); font-size: clamp(1.55rem, 1rem + 2vw, 2.7rem); font-weight: 600; line-height: 1.18; letter-spacing: -.025em; }
.jq-quote footer { margin-top: 24px; display: flex; align-items: center; gap: 14px; font: 400 .8rem 'Geist Mono', ui-monospace, monospace; color: var(--faint); }
.jq-quote footer::before { content: ""; flex: none; width: 32px; height: 1px; background: currentColor; }
.jq-creds { margin-top: 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 32px; }
.jq-creds > div { padding: 18px 0; border-top: 1px solid var(--line-2); }
.jq-creds dt { font: 500 .7rem 'Geist Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.jq-creds dd { margin-top: 8px; line-height: 1.45; color: var(--ink-2); }

/* Plataformas */
.jpl { background: #06142a; color: #fff; padding-block: clamp(80px, 10vw, 112px); }
.jpl-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; }
.jpl-head h2 { color: #fff; max-width: 15ch; font-size: clamp(2.1rem, 1rem + 3vw, 3.6rem); font-weight: 700; line-height: 1; letter-spacing: -.035em; }
.jpl-head p { max-width: 44ch; color: #9fb4ca; }
.jpl-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.jpl-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 220px;
  padding: 24px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .1);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), border-color .3s, background-color .3s;
}
.jpl-card:hover { transform: translateY(-6px); border-color: var(--bright); background-color: #0d2546; }
.jpl-card b { display: block; color: #fff; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.jpl-d { display: block; margin-top: 8px; color: #9fb4ca; line-height: 1.45; }
.jpl-rest { margin-top: 32px; }
.jpl-rest a { color: var(--bright); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.jpl-rest a:hover { color: #fff; }

/* Cierre a las 17:30 */
.jc { position: relative; overflow: hidden; padding-block: 0; background: #0b1a33; color: #fff; }
.jc-media { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 30% 50%; }
.jc-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 20, 42, .3) 0%, rgba(6, 20, 42, .78) 45%, rgba(6, 20, 42, .95) 100%); }
.jc-in { position: relative; z-index: 1; display: flex; justify-content: flex-end; padding-top: clamp(110px, 13vw, 180px); padding-bottom: clamp(72px, 9vw, 120px); }
.jc-box { max-width: 720px; }
.jc-box .j-kicker { color: #f0b98a; }
.jc-box h2 { margin-top: 20px; color: #fff; font-size: clamp(2.3rem, 1rem + 4vw, 4.6rem); font-weight: 700; line-height: .98; letter-spacing: -.045em; }
.jc-box > p:not(.j-kicker):not(.jc-alt) { margin-top: 20px; font-size: var(--t-lead); color: #c9d6e3; }
.jc-chips { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; }
.jc-chip {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px;
  border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .28); background: rgba(6, 20, 42, .35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; font-size: .95rem;
  transition: background-color .25s, color .25s, border-color .25s;
}
.jc-chip:hover { background-color: var(--bright); border-color: var(--bright); color: #06142a; }
.jc-chip b { font: 500 .85rem 'Geist Mono', ui-monospace, monospace; }
.jc-alt { margin-top: 24px; font-size: .92rem; color: #b9c8d8; }
.jc-alt a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .jh { min-height: min(88svh, 760px); }
  .jh-media { object-position: 74% 50%; }
  .jh-scrim { background: linear-gradient(0deg, #06142a 0%, rgba(6, 20, 42, .82) 45%, rgba(6, 20, 42, .45) 100%); }
  .jh-in { padding-top: 120px; }
  .jd-stops { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .jd-stop { padding: 14px 4px; min-height: 56px; text-align: center; }
  .jd-sc { display: none; }
  .jd-st { font-size: .8rem; }
  .jd-clock { max-width: 300px; }
  .jc-scrim { background: rgba(6, 20, 42, .82); }
  .jp-fig, .jq-fig { max-width: 300px; }
  .jp-in, .jq-top { gap: 40px; }
  .jpl-card { min-height: 0; gap: 24px; }
}

/* --- 31. Páginas de producto en clave «Jornada» (2026-10-10) -------------
   Cada página abre con su propio plano de cine en loop (Higgsfield, sin
   letras), el mismo velo y la misma cabecera oscura de la home. «Qué
   resuelve» deja de ser un panel junto al titular —taparía el plano— y pasa
   a una banda propia justo debajo. El video lo arranca site.js (.jh-media). */
.phero-cine {
  display: flex; align-items: flex-end; min-height: min(80svh, 780px);
  padding-block: 0; background: #06142a; color: #fff;
}
.phero-in { position: relative; z-index: 1; width: 100%; padding-top: clamp(100px, 11vw, 150px); padding-bottom: clamp(48px, 6vw, 80px); }
.phero-cine .crumbs { margin-bottom: 28px; animation: j-rise .8s .2s cubic-bezier(.2, .7, .2, 1) both; }
.phero-copy { max-width: 660px; }
.phero-copy .j-kicker { animation: j-rise .8s .35s cubic-bezier(.2, .7, .2, 1) both; }
.phero-cine h1 {
  margin-top: 18px; margin-bottom: 0; color: #fff;
  font-size: clamp(2.3rem, 1.1rem + 3.2vw, 3.9rem); font-weight: 700; line-height: 1.02; letter-spacing: -.04em;
  animation: j-mask 1.1s .5s cubic-bezier(.65, 0, .35, 1) both;
}
.phero-cine .lead { margin-top: 22px; max-width: 54ch; color: #c9d6e3; animation: j-rise .9s .8s cubic-bezier(.2, .7, .2, 1) both; }
.phero-cine .phero-actions { animation: j-rise .9s .95s cubic-bezier(.2, .7, .2, 1) both; }
.phero-cine .pill { margin-bottom: 14px; }

.presuelve { background: #06142a; color: #fff; padding-block: 0 clamp(48px, 6vw, 72px); }
.presuelve-in { display: grid; grid-template-columns: minmax(140px, auto) repeat(3, minmax(0, 1fr)); gap: 20px 36px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .12); }
.presuelve h2 { font: 500 .74rem 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--bright); padding-top: 3px; }
.presuelve ul { display: contents; }
.presuelve li { display: flex; gap: 11px; color: #c9d6e3; line-height: 1.5; font-size: .95rem; }
.presuelve li svg { flex: none; margin-top: 4px; color: var(--bright); }

@media (max-width: 900px) {
  .presuelve-in { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 760px) {
  .phero-cine { min-height: min(86svh, 760px); }
  .phero-cine .jh-media { object-position: 72% 50%; }
}

/* --- 32. Home: «Para el resto de la institución» (2026-10-10) ------------
   Las cuatro plataformas que no son de farmacia, cada una con el plano de
   cine de su página. Con puntero fino el video corre al pasar el mouse
   (site.js); en el teléfono queda el póster. Sigue a «Cinco plataformas»
   sobre el mismo fondo, así que arranca sin relleno superior. */
.jpl { padding-bottom: clamp(56px, 7vw, 80px); }
.jin { background: #06142a; color: #fff; padding-block: clamp(24px, 3vw, 40px) clamp(80px, 10vw, 112px); }
.jin-head { max-width: 760px; padding-top: clamp(40px, 5vw, 56px); border-top: 1px solid rgba(255, 255, 255, .12); }
.jin-head h2 { margin-top: 16px; color: #fff; font-size: clamp(2.1rem, 1rem + 3vw, 3.6rem); font-weight: 700; line-height: 1; letter-spacing: -.035em; }
.jin-head p:last-child { margin-top: 18px; max-width: 52ch; color: #9fb4ca; font-size: var(--t-lead); }
.jin-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.jin-card {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  min-height: 380px; border-radius: var(--r-lg); background: var(--deep); color: #fff;
  border: 1px solid rgba(255, 255, 255, .08); transition: border-color .3s;
}
.jin-card:hover { border-color: rgba(46, 196, 182, .55); }
.jin-media {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 70% 50%; transform: scale(1.02);
  transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
}
.jin-card:hover .jin-media { transform: scale(1.08); }
.jin-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(6, 20, 42, .96) 0%, rgba(6, 20, 42, .6) 48%, rgba(6, 20, 42, .1) 100%); }
.jin-body { display: block; padding: clamp(22px, 3vw, 32px); }
.jin-body .pill { display: flex; width: fit-content; margin-bottom: 12px; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; }
.jin-body b { display: block; margin-top: 10px; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); font-weight: 700; letter-spacing: -.025em; }
.jin-h { display: block; margin-top: 8px; max-width: 36ch; color: #c9d6e3; line-height: 1.45; }
.jin-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--bright); font-weight: 600; font-size: .92rem; }
.jin-more::after { content: "→"; transition: transform .25s; }
.jin-card:hover .jin-more::after { transform: translateX(4px); }
@media (max-width: 760px) {
  .jin-grid { grid-template-columns: 1fr; }
  .jin-card { min-height: 320px; }
}

/* --- 33. Formación del fundador (2026-10-10) -----------------------------
   Los tres títulos con su universidad, entre la cita y las credenciales:
   el grado en grande y la institución en mono, como un rótulo. */
.jq-form { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; }
.jq-form li { padding: 22px 24px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.jq-form b { display: block; color: var(--ink); font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.jq-form span { display: block; margin-top: 10px; font: 500 .74rem 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); line-height: 1.5; }
.jq-form + .jq-creds { margin-top: 40px; }
@media (max-width: 900px) { .jq-form { grid-template-columns: 1fr; } }

/* --- 34. Home: spot de marca (2026-10-14) ---------------------------------
   El video de 54 s entre «Para el resto de la institución» y «De la primera
   conversación a la operación». El encabezado reutiliza .jin-head (misma
   línea superior y tipografía); sin padding superior, porque el inferior de
   .jin ya da el aire, igual que entre .jpl y .jin. */
.jsp { background: #06142a; color: #fff; padding-block: 0 clamp(80px, 10vw, 112px); }
.jsp-video { margin-top: 48px; }
.jsp-video video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: 16px; border: 1px solid rgba(255, 255, 255, .1); background: #071a33;
}
.jsp-note { margin-top: 16px; font: 500 .74rem 'Geist Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #9fb4ca; }