/* Modo — hoja de estilo de /modo
   ---------------------------------------------------------------------------
   Modo es un producto de Rocapia con identidad propia (marca endosada): mismo
   sistema tipográfico y mismos fundamentos, pero su verde y su papel crema.
   Por eso NO importa styles.css: importa los mismos tokens y construye encima.
   Los valores propios viven en tokens/colors.css bajo el prefijo --modo-*.

   Los alias locales de abajo (--ink, --paper, --accent…) existen para que el
   CSS se lea igual que el de la home — allí --ink es Slate Profundo, aquí es
   la tinta de modo — y para que portar un componente de una a otra no exija
   renombrar media hoja. */

@import url('./tokens/colors.css');
@import url('./tokens/typography.css');
@import url('./tokens/spacing.css');
@import url('./tokens/effects.css');
/* tokens/icons.css NO se importa aqui a proposito: la home y /eficiencia-operativa
   usan ~40 iconos y ahi la fuente de Lucide se paga sola, pero /modo usa tres
   (menu, play y pausa) y van como SVG en linea en el marcado. Eso quita una
   peticion a unpkg, su CSS y un fichero de fuente del arranque. */

:root {
  --ink: var(--modo-ink);
  --muted: var(--modo-muted);
  --muted-2: var(--modo-muted-2);
  --paper: var(--modo-paper);
  --white: var(--color-white);
  --line: var(--modo-line);
  --soft: var(--modo-soft);
  --accent: var(--modo-accent);
  --accent-strong: var(--modo-accent-strong);
  --accent-ink: var(--modo-accent-ink);
  --accent-hover: var(--modo-accent-hover);
  --accent-2: var(--modo-accent-soft);
  --deep: var(--modo-deep);
  --deep-2: var(--modo-deep-2);
  --radius: var(--modo-radius);
  --shadow: var(--modo-shadow);
  --max: var(--modo-max);

  /* Sistema de movimiento — mismos valores que la home (css/styles.css) para
     que las dos páginas revelen contenido con el mismo ritmo. js/shared/reveal.js
     lee estos mismos números desde window.RcMotion. */
  --reveal-distance: 18px;
  --reveal-duration: 550ms;
  --reveal-ease: cubic-bezier(.2, .8, .2, 1);
  --reveal-stagger: 90ms;
}

/* ---------- Reset y base ---------- */
* { box-sizing: border-box; }
::selection { background: rgba(47, 140, 106, .18); color: var(--ink); }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0;
  font: var(--text-body-md);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
a, button { -webkit-tap-highlight-color: transparent; }

/* El foco tiene que verse siempre. Sin esto, recorrer la página con el
   teclado es imposible: los CTAs son <a> sin outline propio. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

/* Sora para todo lo que titula. Es la tipografía de titulares de Rocapia, y
   compartirla es lo que hace que las dos webs se sientan de la misma casa
   sin tener que renunciar al color propio de modo. El tracking es menos
   cerrado que el del diseño original porque aquello se dibujó contra la
   grotesca del sistema; Sora ya viene apretada de fábrica. */
h1, h2, h3, .section-title, .price, .modo-wordmark {
  font-family: var(--font-display);
}

.wrap { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }

/* Texto solo para lectores de pantalla: la alternativa a la ilustración del
   hero y la etiqueta del campo de texto del cierre. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 8px 12px; background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(8px);
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
}

/* Iconos en linea. Heredan color y toman el grosor de trazo del sistema, que
   es lo que mantenia consistente a la fuente de iconos: "lineales, pocos,
   consistentes y con el mismo grosor" (brandbook, 09). */
.modo-icon {
  display: block; flex: 0 0 auto;
  fill: none; stroke: currentColor;
  stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round;
}
.modo-icon[hidden] { display: none; }

/* ---------- Sistema de reveal ----------
   La clase la aplica js/shared/reveal.js (`is-visible`), compartido con la
   home. Solo opacidad y transform, que son las dos propiedades que el
   compositor puede animar sin repintar. */
/* Sin `scale`. El desplazamiento solo —sin escala— se lee como editorial: el
   contenido sube a su sitio. Con escala se lee como una plantilla, porque el
   par "sube y crece un poco" es el gesto por defecto de cualquier libreria de
   reveal y el ojo ya lo tiene fichado. Ademas la escala reencuadra el texto
   mientras entra, que a cuerpos grandes se nota como un temblor. */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease);
  transition-delay: calc(var(--i, 0) * var(--reveal-stagger));
}

.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- El punto ----------
   El punto del wordmark es la unica marca grafica propia que tiene modo, y la
   pagina lo repetia sin sistema: el del logotipo, el de .pain con su anillo,
   los de severidad del panel, y tres circulos difuminados sangrando por las
   esquinas de las tarjetas. Cuatro vocabularios para la misma forma, y el
   ultimo —el circulo decorativo en la esquina— es ademas el gesto que hace que
   una pagina parezca ensamblada en vez de dibujada.

   Aqui se declara una sola vez: un circulo, su anillo, y las dos medidas como
   tokens. Todo lo que sea un punto lo hereda. Lo que no significaba nada se
   ha ido.

   Lo que NO se toca son las palomitas de .price-list y .proof ni el guion de
   .limit-list: no son decoracion, son significado —"incluido" y "fuera"— y
   cambiarlos por puntos neutros perderia informacion a cambio de coherencia
   formal. Un sistema de diseno no puede costar contenido. */
:root {
  --dot: 10px;
  --dot-ring: 5px;
}
.pain::before, .case::before {
  content: ""; display: block;
  width: var(--dot); height: var(--dot); border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 var(--dot-ring) color-mix(in oklch, var(--accent) 11%, transparent);
}

/* ---------- Wordmark y firma "by Rocapia" ----------
   El punto es parte del logotipo, no puntuación: por eso es un <span> con
   aria-hidden y no un carácter, que los lectores de pantalla leerían. */
.modo-wordmark {
  display: inline-flex; align-items: flex-start; position: relative;
  font-weight: 800; letter-spacing: -.045em; line-height: .9;
  color: inherit; white-space: nowrap;
}
.modo-wordmark .modo-dot {
  display: block; width: .24em; height: .24em;
  margin-left: .1em; margin-top: -.1em;
  border-radius: 50%; background: var(--accent); flex: 0 0 auto;
}
.inline-brand { font-size: .94em; vertical-align: .02em; margin: 0 .04em; }

/* Un unico latido del punto de la marca cuando la demo del hero encuentra
   algo. Es el gesto que conecta el logotipo con lo que el producto hace: la
   marca reacciona a la misma senal que el panel. Solo el del nav —que es el
   punto persistente— y solo una vez por hallazgo; el wordmark aparece seis
   veces mas en la pagina y hacerlos latir a todos seria ruido. */
@keyframes dot-pulse {
  from { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 60%, transparent); }
  to   { box-shadow: 0 0 0 9px color-mix(in oklch, var(--accent) 0%, transparent); }
}
.nav .modo-dot.is-pulsing { animation: dot-pulse .9s var(--ease-standard) 1; }

/* La firma usa la variante "como R" del logo — el isotipo ES la R de ROCAPIA,
   así que la marca se lee una sola vez y a 18px sigue siendo legible. Es
   además exactamente la misma imagen que el visitante acaba de ver en el nav
   de rocapia.com, y un endoso funciona precisamente porque se reconoce igual. */
.rocapia-lockup {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: 11px; font-weight: 600;
  white-space: nowrap;
  transition: color var(--duration-standard) var(--ease-standard);
}
.rocapia-lockup::before {
  content: ""; width: 1px; height: 18px;
  background: var(--line); margin-right: 2px;
}
/* Sin opacity. El "by" llevaba .75 para sonar mas bajo que el logotipo, y con
   eso el color efectivo caia a 3,12:1 sobre el papel — por debajo de AA para
   11px. Y no se ve en una auditoria que mire el `color`, porque el color
   declarado si cumple (5,11:1): la opacidad lo estropea despues. Bajar de tono
   con opacidad es comodo y es justo la forma de hacerlo que no deja rastro.
   El "by" ya suena mas bajo por tamano y por color; no necesitaba mas. */
/* Sirve para las dos variantes del <picture>: el wordmark horizontal y el
   isotipo. Como ambas se escalan por altura y conservan su proporción, no hace
   falta ninguna regla extra para el cambio. */
.rocapia-logo { height: 12px; width: auto; display: block; object-fit: contain; }
.footer-rocapia-logo { height: 26px; width: auto; display: block; margin-top: 14px; }

/* ---------- Nav ---------- */
/* La barra cambia de piel al pasar por la seccion oscura. Antes seguia siendo
   crema sobre el negro verdoso de "Como funciona", y rompia la inmersion justo
   en el momento mas cinematografico de la pagina: una franja clara flotando
   sobre lo unico oscuro que hay. La clase la pone js/modo.js cuando la seccion
   ocupa la banda que hay debajo del nav.

   Todo lo que cambia se declara como transicion de color, nunca de layout: la
   barra no se mueve ni cambia de alto, solo de tono. */
.nav {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid rgba(16, 32, 44, .08);
  background: rgba(247, 247, 242, .82); backdrop-filter: blur(18px);
  transition: background var(--duration-standard) var(--ease-standard),
              border-color var(--duration-standard) var(--ease-standard),
              color var(--duration-standard) var(--ease-standard);
}
.nav.is-over-dark {
  background: color-mix(in oklch, var(--deep-2) 78%, transparent);
  border-bottom-color: rgba(255, 255, 255, .12);
  color: #fff;
}
.nav.is-over-dark .navlinks { color: #b9c8cf; }
.nav.is-over-dark .navlinks a:hover { color: #fff; }
.nav.is-over-dark .nav-back { color: #8fa3ac; }
.nav.is-over-dark .rocapia-lockup { color: #8fa3ac; }
.nav.is-over-dark .rocapia-lockup::before { background: rgba(255, 255, 255, .22); }
.nav.is-over-dark .nav-mobile-btn { color: #fff; }
.nav.is-over-dark .brand { color: #fff; }
/* El panel del menu vive dentro del nav, asi que hereda su estado. Sin esto,
   abrirlo mientras se pasa por la seccion oscura daba tinta sobre tinta. */
.nav.is-over-dark .nav-mobile-panel { border-top-color: rgba(255, 255, 255, .14); }
.nav.is-over-dark .nav-mobile-panel a { color: #fff; }
/* El CTA no cambia. Lo habia aclarado a --accent para que destacara mas sobre
   el oscuro, y con eso el texto blanco caia a 4,13:1 — por debajo de AA. Y
   ademas era mala idea: es el ancla de conversion de la pagina y no deberia
   cambiar de aspecto segun por donde vaya el scroll. --accent-strong ya
   funciona aqui: 4,68:1 de texto blanco y 3,26:1 de boton contra el fondo del
   nav, por encima del 3:1 que pide WCAG 1.4.11 para componentes. */

/* Las dos variantes del logotipo se apilan en una sola celda: la fila de marca
   mide siempre lo mismo y el intercambio no mueve un pixel. Va en su propio
   contenedor y no en .rocapia-lockup porque ese lleva un ::before —el filete
   vertical— que tambien seria item de la rejilla. */
.rocapia-logo-swap { display: grid; }
.rocapia-logo-pos, .rocapia-logo-neg {
  grid-area: 1 / 1; display: block;
  transition: opacity var(--duration-standard) var(--ease-standard);
}
.rocapia-logo-neg { opacity: 0; }
.nav.is-over-dark .rocapia-logo-pos { opacity: 0; }
.nav.is-over-dark .rocapia-logo-neg { opacity: 1; }
.nav-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* flex-shrink 0 por la misma razón que en el nav de la home: la marca no cede
   ancho. Sin esto es lo primero que la fila comprime cuando crece el menú, y
   lo que se pierde es justo el logotipo de la firma. */
.brand { font-size: 25px; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
/* nowrap: los enlaces no parten palabra ni saltan de línea. Sin esto, en
   cuanto la fila se queda justa el menú se convierte en dos alturas de texto
   troceado en vez de colapsar a hamburguesa, que es lo que debe hacer. */
.navlinks { display: flex; flex-wrap: nowrap; white-space: nowrap; gap: 24px; align-items: center; font-size: 14px; font-weight: 600; color: #34434d; }
/* Los enlaces de navegación se pulsan, así que tienen que medir algo. Sin esto
   ocupan lo que ocupa su línea de texto —20px— y quedan por debajo del 24x24
   que pide WCAG 2.5.8. */
.navlinks a, .foot-links a { display: inline-flex; align-items: center; min-height: 28px; }
.navlinks a:hover { color: var(--ink); }
.nav-back { color: var(--muted); }

.nav-cta, .cta {
  display: inline-block; text-align: center; text-decoration: none; border: 0;
  background: var(--accent-strong); color: #fff;
  border-radius: var(--radius-pill); padding: 13px 19px;
  font-family: var(--font-display); font-weight: 600; cursor: pointer;
  transition: transform var(--duration-standard) var(--ease-standard),
              box-shadow var(--duration-standard) var(--ease-standard),
              background var(--duration-standard) var(--ease-standard);
}
.nav-cta:hover, .cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(47, 140, 106, .24);
  background: var(--accent-hover);
}

/* Menú móvil. Antes no existía: por debajo de 900px los enlaces se ocultaban
   con display:none y la navegación desaparecía entera, dejando solo el CTA.
   Mismo patrón que partials/nav.php en la home. */
.nav-mobile-btn {
  display: none; background: none; border: 0; padding: 6px;
  color: var(--ink); cursor: pointer; line-height: 1;
}
.nav-mobile-panel {
  display: none; flex-direction: column; gap: 2px;
  padding: 8px 0 18px; border-top: 1px solid var(--line);
}
.nav-mobile-panel[hidden] { display: none; }
.nav-mobile-panel a {
  display: flex; align-items: center; min-height: 46px;
  font-size: 16px; font-weight: 600; color: var(--ink);
}
.nav-mobile-panel .nav-cta { margin-top: 10px; text-align: center; }

/* ---------- Hero ---------- */
.hero {
  padding: 46px 0 70px; overflow: hidden; position: relative;
  background:
    radial-gradient(circle at 77% 20%, rgba(47, 140, 106, .10), transparent 31%),
    radial-gradient(circle at 12% 84%, rgba(47, 140, 106, .055), transparent 26%);
}
.hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: 52px; align-items: center; }
h1 {
  font-size: clamp(38px, 6vw, 58px); font-weight: 700; line-height: 1.02;
  letter-spacing: -.035em; margin: 0 0 22px; max-width: 760px;
}
.lead { font-size: 19px; color: var(--muted-2); max-width: 640px; margin: 0 0 28px; line-height: 1.6; }
.lead-tail { display: block; margin-top: 10px; font-weight: 500; font-size: 16px; color: var(--ink); }
.hero-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cta { padding: 15px 22px; font-size: 15px; }
.cta.secondary {
  background: rgba(255, 255, 255, .72); color: var(--ink);
  border: 1px solid var(--line); backdrop-filter: blur(8px);
}
.cta.secondary:hover { background: #fff; box-shadow: var(--shadow-md); }
.proof { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 22px; color: var(--muted); font-size: 13px; font-weight: 600; }
.proof span::before { content: "✓"; color: var(--accent); margin-right: 6px; }

/* ---------- Demo del hero ---------- */
.product-card {
  background: rgba(255, 255, 255, .84);
  border: 1px solid rgba(47, 140, 106, .18);
  border-radius: var(--modo-radius-lg);
  box-shadow: 0 28px 80px rgba(18, 32, 44, .12);
  padding: 12px; transform: rotate(.35deg); position: relative;
  backdrop-filter: blur(12px);
}
.product-card::before {
  content: ""; position: absolute; inset: -40px -40px auto auto;
  width: 230px; height: 230px; background: var(--accent-2);
  filter: blur(90px); opacity: .46; z-index: -1;
}
.window { border-radius: 22px; background: #fbfcfc; border: 1px solid #e7eaec; overflow: hidden; }
.window-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid #edf0f2; font-size: 12px; color: var(--muted);
}
.lights { display: flex; gap: 6px; }
.lights i { width: 8px; height: 8px; border-radius: 50%; background: #d5dadd; display: block; }
.lights i:first-child { background: #f39d84; }
.lights i:nth-child(2) { background: #f4d36a; }
.lights i:nth-child(3) { background: #76bc99; }

/* Botón Pausar/Reproducir de la demo. La animación gira en bucle, y lo que
   WCAG 2.2.2 exige del movimiento largo es que se pueda parar — no que se
   pare solo. El ancho mínimo evita que el botón encoja al cambiar de
   "Pausar" a "Reproducir" y baile la barra del título. */
.demo-replay {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 96px;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  border-radius: var(--radius-pill); padding: 4px 10px;
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: color var(--duration-fast), border-color var(--duration-fast);
}
.demo-replay:hover { color: var(--ink); border-color: var(--accent); }
/* Los dos SVG viven en el boton y el JS alterna cual lleva [hidden]; no hay
   tamano que fijar aqui porque cada uno trae el suyo en el marcado. */

/* La hoja y el panel construido comparten la MISMA celda de la rejilla y
   ninguno sale del flujo: se ocultan con visibility, no con display. Asi la
   ventana mide siempre lo que mide el mas alto de los dos y la altura de la
   ilustracion no cambia en toda la animacion.

   Antes cada estado hacia display:none sobre el otro y la ventana crecia y
   encogia en cada vuelta del bucle. En escritorio el min-height lo disimulaba;
   en movil no, porque ahi los tres indicadores del panel se apilan y el panel
   pasa a ser mucho mas alto que la hoja — y el hero entero, con el titular y
   los botones, subia y bajaba sin parar. Ver js/modo.js (HeroDemo). */
.demo { padding: 18px; position: relative; display: grid; }
/* stretch, no start ni center. La caja reserva la altura del estado mas alto
   —el panel—, asi que en el estado de la hoja sobra sitio: arriba dejaba un
   hueco muerto debajo y centrada lo dejaba a los dos lados. Estirando, la hoja
   llena su ventana, que es justo lo que hace una hoja de calculo de verdad. */
.demo-stage, .dashboard { grid-area: 1 / 1; align-self: stretch; }
.demo-stage {
  position: relative;
  transition: opacity .5s var(--ease-standard), transform .5s var(--ease-standard), visibility .5s;
}
.demo-stage.is-off { opacity: 0; visibility: hidden; }
.sheet-grid {
  display: grid; grid-template-columns: 1.2fr .9fr .9fr; gap: 1px;
  background: #e9edf0; border: 1px solid #e9edf0; border-radius: 15px;
  overflow: hidden; font-size: 12px;
  /* Llena el alto de la ventana repartiendo las filas: el minmax evita que se
     compriman por debajo de lo legible si algun dia el panel encoge. */
  height: 100%; grid-auto-rows: minmax(38px, 1fr);
}
.cell { background: #fff; padding: 11px 12px; display: flex; align-items: center; }
.cell.head { font-weight: 700; background: #f3f6f7; }
.cell.warn { background: #f1faf6; }
.cell.bad { background: #fff1ef; }
.ai-note {
  position: absolute; right: 2px; top: 84px; background: var(--ink); color: #fff;
  padding: 12px 14px; border-radius: 16px; font-size: 12px; width: 210px;
  box-shadow: 0 18px 40px rgba(16, 32, 44, .2);
  opacity: 0; transform: translateY(8px); transition: .4s;
}
.ai-note.show { opacity: 1; transform: none; }
.ai-note b { display: block; margin-bottom: 4px; }
/* Antes el recorrido eran 250px fijos, que era mas o menos lo que medía la
   hoja en escritorio. Ahora la hoja se estira hasta llenar la ventana y su
   alto cambia con el ancho, asi que el barrido va de 0% a 100% de la propia
   hoja y siempre la recorre entera. */
.scanbar {
  height: 3px; background: linear-gradient(90deg, transparent, var(--accent), transparent);
  position: absolute; left: 10px; right: 10px; top: 0; opacity: 0; z-index: 1;
}
.scanbar.run { opacity: 1; animation: scan 2s ease-in-out forwards; }
.scanbar.done { opacity: 0 !important; animation: none !important; top: 100% !important; }
@keyframes scan { from { top: 0; } to { top: 100%; } }

.dashboard {
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease-standard), visibility .35s;
}
.dashboard.show { opacity: 1; visibility: visible; }
/* is-popping solo cuando se llega al panel animandose. Al aterrizar de golpe
   —movimiento reducido, o pausa antes de tiempo— se pone sin el rebote. */
.dashboard.show.is-popping { animation: pop .55s ease both; }
@keyframes pop { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.dash-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.dash-head h3 { font-size: 24px; margin: 0; letter-spacing: -.03em; }
.tag { font-size: 11px; background: #ecf8f3; color: var(--accent); padding: 6px 9px; border-radius: var(--radius-pill); font-weight: 700; }
.attention { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { padding: 15px; background: #f7f9fa; border: 1px solid #edf0f2; border-radius: 16px; }
.stat strong { font-size: 25px; display: block; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.stat small { color: #677781; }
.issues { margin-top: 14px; border: 1px solid #edf0f2; border-radius: 16px; overflow: hidden; }
.issue {
  display: grid; grid-template-columns: 8px 1fr auto; gap: 11px; align-items: center;
  padding: 13px 14px; border-bottom: 1px solid #edf0f2; font-size: 12px;
}
.issue:last-child { border-bottom: 0; }
/* Mismo objeto que el punto de marca, a escala de interfaz y con el color de
   estado en vez del acento: aqui el color es informacion. */
.sev { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.sev.red { box-shadow: 0 0 0 4px rgba(220, 109, 93, .14); }
.sev.amber { box-shadow: 0 0 0 4px rgba(223, 170, 69, .14); }
.sev.red { background: #dc6d5d; }
.sev.amber { background: #dfaa45; }
/* Los "botones" del panel son <span>: no hacen nada, y como <button> obligaban
   a un lector de pantalla a anunciar tres controles falsos. */
.issue > span { background: var(--soft); padding: 7px 9px; border-radius: 9px; font-weight: 600; color: #40515e; }

/* ---------- Secciones ---------- */
section { padding: 104px 0; }
.eyebrow {
  font-size: 12px; text-transform: uppercase; letter-spacing: .14em;
  font-weight: 700; color: var(--muted); margin-bottom: 14px;
}
/* Escala de titulares. Antes el h1 salia a 58px y los titulares de seccion a
   54: cuatro pixeles de diferencia en toda la pagina. Con todo gritando igual
   no habia jerarquia, y por eso ningun titular destacaba — ni siquiera el h1,
   que es el unico que deberia.

   Ahora el h1 manda de largo (58 contra 44) y los titulares de seccion se
   colocan un peldano por debajo, donde les toca. El tamano grande queda
   reservado para dos momentos elegidos: la linea puente que cierra "El
   problema" y la pregunta final. La jerarquia se construye conteniendose, no
   anadiendo tamanos. */
.section-title {
  font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; line-height: 1.08;
  letter-spacing: -.028em; margin: 0 0 18px; max-width: 820px; text-wrap: balance;
}
/* Los dos momentos que si se llevan el tamano grande. */
.final .section-title {
  font-size: clamp(34px, 4.4vw, 54px); line-height: 1.05; letter-spacing: -.032em;
  max-width: 940px;
}
.section-copy { color: #566671; font-size: 17px; line-height: 1.62; max-width: 720px; }

/* ---------- El problema ---------- */
.pain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 34px; }
.pain {
  position: relative; background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(16, 32, 44, .10); border-radius: 18px;
  padding: 18px 20px 18px 48px; font-size: 17px; line-height: 1.32;
  font-weight: 600; min-height: 82px; display: flex; align-items: center;
  box-shadow: 0 8px 24px rgba(16, 32, 44, .025);
  transition: transform .22s, box-shadow .22s, border-color .22s, background .22s;
}
.pain::before {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
}
.pain:hover {
  transform: translateY(-3px); border-color: rgba(47, 140, 106, .25);
  background: #fff; box-shadow: 0 14px 36px rgba(16, 32, 44, .07);
}
.bridge {
  margin-top: 34px; padding: 30px 4px 0; border-top: 1px solid var(--line);
  font-family: var(--font-display); font-size: clamp(23px, 2.3vw, 30px);
  line-height: 1.32; letter-spacing: -.025em; max-width: 900px; text-wrap: balance;
}
/* --accent sobre el papel crema da 3,85:1, y a 23px/600 esto no cuenta como
   texto grande (haria falta 24px o peso 700), asi que se queda corto de AA.
   --accent-strong tampoco basta: esta calculado contra blanco. --accent-ink es
   el mismo verde ajustado al papel de modo, 4,53:1. */
.bridge strong { color: var(--accent-ink); font-weight: 600; }

/* ---------- Sheets / modo / ERP ---------- */
.middle-card { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.choice { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.choice h3 { font-size: 23px; letter-spacing: -.025em; margin: 4px 0 10px; }
.choice p { color: var(--muted); margin: 0; }
/* La elevacion de la tarjeta destacada va en `translate`, no en `transform`.
   Las dos son elementos .reveal, y .reveal anima `transform`: al declararlo
   aqui tambien, esta regla ganaba por especificidad y las tarjetas destacadas
   eran las unicas de su rejilla que no hacian la entrada. `translate` es una
   propiedad independiente que se compone con `transform` en vez de pisarlo,
   asi que la tarjeta entra como sus vecinas y despues se queda elevada. Mismo
   motivo por el que se quito .pain:nth-child(2n) { transform: none }. */
.choice.featured {
  background: var(--deep); color: #fff; translate: 0 -8px;
  border-color: var(--deep); box-shadow: 0 24px 60px rgba(23, 56, 46, .16);
}
.choice.featured p { color: #c9d2d8; }
.choice.featured .pill { color: var(--ink); }

/* ---------- Cómo funciona ---------- */
.live { background: var(--deep-2); color: #fff; overflow: hidden; position: relative; }
.live .eyebrow { color: #9fb0ba; }
.live .section-copy { color: #c8d2d8; }
.live-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 46px; align-items: start; margin-top: 36px; }
.steps { display: grid; gap: 10px; }
/* Son pestañas de verdad: <button role="tab">, no <div> con onclick. Antes no
   se podían alcanzar con el teclado ni las anunciaba un lector de pantalla. */
.step {
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 18px;
  padding: 17px 18px; color: #bac6cd; cursor: pointer; text-align: left;
  background: transparent; width: 100%; transition: .25s;
}
.step:hover { border-color: rgba(255, 255, 255, .3); color: #fff; }
.step[aria-selected="true"] {
  background: #f2fbf7; color: var(--ink); transform: translateX(8px);
  border-color: rgba(191, 231, 214, .45);
}
.step strong { display: block; font-family: var(--font-display); font-size: 16px; margin-bottom: 3px; }
.step span { font-size: 13px; }
.consultant {
  background: #fff; color: var(--ink); border-radius: 28px; padding: 24px;
  min-height: 430px; box-shadow: 0 24px 70px rgba(0, 0, 0, .16);
}
.chatline { padding: 14px 16px; border-radius: 15px; margin: 0 0 12px; max-width: 88%; font-size: 14px; }
.chatline.user { background: #edf2f3; margin-left: auto; }
.chatline.agent { background: #eef8f4; border: 1px solid #d6ebe2; }
.suggestion { margin-top: 24px; padding: 20px; border: 1px solid #e6e9eb; border-radius: 18px; }
.suggestion small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.suggestion h3 { margin: 8px 0; font-size: 20px; letter-spacing: -.02em; }
.suggestion p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.mini-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.node { padding: 8px 10px; border-radius: var(--radius-pill); background: #f0f4f5; font-size: 12px; font-weight: 600; }
.arrow { color: var(--muted); }
.suggest-actions { display: flex; gap: 8px; }
.tiny { border: 0; border-radius: 10px; padding: 9px 11px; font-weight: 600; cursor: pointer; }
.tiny.primary { background: var(--ink); color: #fff; }
.tiny.ghost { background: #f1f4f5; }

/* ---------- Workspace ---------- */
.workspace-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
.stack { display: grid; gap: 10px; }
.stack-item {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px;
  display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start;
}
.stack-icon {
  width: 38px; height: 38px; border-radius: 12px; background: var(--soft);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700;
}
.stack-item h3 { margin: 0 0 4px; font-size: 16px; }
.stack-item p { margin: 0; color: var(--muted); font-size: 14px; }
.strike { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0; }
.strike span {
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 10px 13px; background: #fff; color: var(--muted); text-decoration: line-through;
}
/* El argumento de seguridad. Es consecuencia directa del perímetro del
   producto —solo Workspace— y es de lo mejor que tiene, así que se destaca
   en vez de quedar diluido entre las tarjetas técnicas. */
.safety {
  margin-top: 26px; padding: 22px 24px; border-radius: var(--radius);
  background: rgba(255, 255, 255, .7); border: 1px solid rgba(47, 140, 106, .2);
}
.safety strong { display: block; font-family: var(--font-display); font-size: 18px; letter-spacing: -.02em; margin-bottom: 7px; }
.safety p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* ---------- Casos ---------- */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.case {
  background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 24px;
  min-height: 180px; position: relative;
}
/* Sin overflow:hidden: solo estaba para recortar el circulo difuminado que
   sangraba por la esquina, y de paso recortaba tambien el anillo de foco. */
.case::before { position: absolute; top: 26px; right: 26px; }
/* padding-right: el punto vive en esa esquina y un titular de dos lineas se le
   metia debajo. Reservarle el hueco cuesta menos que acortar los titulares. */
.case h3 { font-size: 19px; line-height: 1.2; margin: 0 0 9px; letter-spacing: -.02em; padding-right: 26px; }
.case p { color: var(--muted); font-size: 14px; margin: 0; max-width: 90%; }

/* ---------- Aplicaciones construidas ----------
   La captura va a todo el ancho y el texto encima, no en columna al lado:
   son paneles densos y a media columna no se leería nada de lo que hay dentro,
   que es justo lo que tienen que demostrar. */
.app { display: grid; gap: 22px; margin-top: 44px; }
.app + .app { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--line); }
.app-intro { max-width: 760px; display: flex; flex-direction: column; gap: 12px; }
.app-intro h3 { font-size: 26px; letter-spacing: -.03em; margin: 0; }
.app-intro p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.app-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.app-tab {
  border: 1px solid var(--line); background: #fff; border-radius: var(--radius-pill);
  padding: 9px 15px; font-size: 13.5px; font-weight: 600; color: var(--muted);
  cursor: pointer; min-height: 38px;
  transition: color var(--duration-standard), border-color var(--duration-standard),
              background var(--duration-standard);
}
.app-tab:hover { color: var(--ink); border-color: var(--accent); }
.app-tab[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.app-shot {
  margin: 0; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 18px 50px rgba(18, 32, 44, .10);
}
/* aspect-ratio fijo: las capturas no miden todas exactamente lo mismo y sin
   esto la página daba un salto cada vez que se cambiaba de vista. */
.app-shot img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1912 / 905; object-fit: cover; object-position: top center;
}
.apps-note { margin-top: 26px; }

/* En pantalla estrecha la captura entera cabría a 350px, y a ese tamaño un
   panel de operaciones no se lee: se ve que hay algo, no qué. Así que la
   imagen conserva un ancho legible y es la caja la que se desplaza. */
.app-hint { display: none; font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
@media (max-width: 760px) {
  .app-shot { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .app-shot img { width: 880px; max-width: none; aspect-ratio: auto; }
  .app-hint { display: block; }
}

/* ---------- Precios ---------- */
/* Las tres tarjetas comparten rejilla de filas via subgrid, no solo de
   columnas. Reservar el hueco del distintivo alineaba el arranque, pero a
   partir de ahi cada tarjeta seguia su propio ritmo: el titular de una ocupa
   dos lineas y el de otra una, la entradilla de la gratuita es mas larga, y el
   arranque de las listas se separaba 45px. En una tabla comparativa el barrido
   horizontal es justo lo que la rejilla existe para permitir: si "que incluye"
   no empieza a la misma altura en las tres columnas, no se pueden comparar.

   Las ocho filas son las ocho piezas de la tarjeta, en orden. La septima —la
   lista— se lleva el 1fr, asi que absorbe la holgura y deja el CTA abajo del
   todo sin necesidad de margin-top:auto.

   El @supports deja el flex de antes para quien no tenga subgrid: pierde la
   alineacion fina, que es exactamente lo que habia hasta ahora, no una
   regresion. */
.pricing-journey {
  margin-top: 42px; display: grid; grid-template-columns: .86fr 1.14fr .96fr;
  gap: 14px; align-items: stretch; position: relative;
}
.price-card {
  background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 28px;
  position: relative; overflow: hidden; display: flex; flex-direction: column;
}

@supports (grid-template-rows: subgrid) {
  .pricing-journey {
    /* distintivo · antetitulo · titular · precio · nota · entradilla · lista · CTA */
    grid-template-rows: auto auto auto auto auto auto 1fr auto;
  }
  .price-card {
    display: grid; grid-row: 1 / -1; grid-template-rows: subgrid;
  }
  .price-list { align-self: start; }
  .price-cta { margin-top: 0; }
}
.price-card.free { background: rgba(255, 255, 255, .66); }
.price-card.build {
  background: var(--deep); color: #fff; border-color: var(--deep);
  box-shadow: 0 24px 65px rgba(23, 56, 46, .14); translate: 0 -8px;
}
/* Era otro circulo difuminado en la esquina. Ahora es un brillo de canto en el
   borde superior: la convencion fisica de una superficie oscura elevada, que
   es justo lo que la tarjeta quiere decir, y que ademas refuerza los 8px de
   elevacion en vez de competir con ellos. */
.price-card.build::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(191, 231, 214, .38), transparent);
}
.price-card.improve { border-color: rgba(47, 140, 106, .20); }
.price-kicker { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.build .price-kicker { color: #a9cabe; }
.price-card h3 { font-size: 27px; letter-spacing: -.03em; margin: 8px 0 5px; }
.price-line { display: flex; align-items: baseline; gap: 7px; margin: 18px 0 4px; }
.price { font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
/* "desde" es un cualificador, no la cifra. A 40px como el numero le robaba el
   golpe y hacia que la tarjeta del medio pareciera la mas cara de leer. */
.price-from {
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  letter-spacing: 0; color: var(--muted); align-self: baseline;
}
.build .price-from { color: #b9cbc4; }
.price-note { font-size: 13px; color: var(--muted); }
.build .price-note { color: #b9cbc4; }
.price-desc { font-size: 15px; line-height: 1.55; color: #53636d; max-width: 520px; margin: 16px 0 20px; }
.build .price-desc { color: #d4dfdb; }
.price-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.price-list li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 13.5px; line-height: 1.4; }
.price-list li::before { content: "✓"; color: var(--accent); font-weight: 700; }
.build .price-list li::before { color: #8dd1b7; }
/* El escaneo gratuito es el único CTA dominante de la página. Los otros dos
   son secundarios dentro de su tarjeta: antes los cinco competían con el
   mismo peso visual y ninguno ganaba. */
.price-cta {
  display: inline-flex; align-self: flex-start; margin-top: auto;
  border: 1px solid var(--accent-strong); border-radius: var(--radius-pill);
  padding: 12px 18px; font-family: var(--font-display); font-weight: 600;
  cursor: pointer; background: transparent; color: var(--accent-strong);
  transition: background var(--duration-standard), color var(--duration-standard);
}
.price-cta:hover { background: var(--accent-strong); color: #fff; }
.free .price-cta { background: var(--accent-strong); color: #fff; }
.free .price-cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.build .price-cta { border-color: rgba(255, 255, 255, .5); color: #fff; }
.build .price-cta:hover { background: #fff; color: var(--deep); border-color: #fff; }
/* El distintivo solo lo lleva la tarjeta del medio, pero las tres reservan su
   altura con un .price-tag vacio. Sin eso la columna destacada bajaba 20px y
   nada quedaba a la misma altura entre tarjetas: ni los titulares, ni los
   precios, ni el arranque de las listas (45px de dispersion). En una tabla
   comparativa el barrido horizontal es justo para lo que existe la rejilla. */
.price-tag {
  display: inline-flex; align-self: flex-start; margin: 0 0 10px;
  border-radius: var(--radius-pill); padding: 6px 9px; font-size: 11px;
  font-weight: 700; background: #eaf6f1; color: var(--accent-strong);
  min-height: 25px;
}
.price-tag:empty { background: none; padding: 6px 0; }
.build .price-tag { background: rgba(255, 255, 255, .12); color: #d9eee5; }
.pricing-foot {
  margin-top: 18px; padding: 17px 20px; border: 1px solid rgba(47, 140, 106, .16);
  border-radius: 18px; background: rgba(255, 255, 255, .52); font-size: 13px;
  color: #62716d; display: flex; justify-content: space-between; gap: 20px; align-items: center;
}
.pricing-foot strong { color: var(--ink); }

/* ---------- Qué no hace ---------- */
.limits { display: grid; grid-template-columns: 1.25fr .75fr; gap: 32px; align-items: start; margin-top: 32px; }
.limit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.limit-list li {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px;
  font-size: 16px; line-height: 1.5; color: var(--muted-2);
}
.limit-list li::before { content: "—"; color: var(--accent); font-weight: 700; }
.handoff {
  background: var(--deep); color: #fff; border-radius: var(--radius); padding: 26px;
}
.handoff h3 { font-size: 20px; letter-spacing: -.025em; margin: 0 0 8px; }
.handoff p { margin: 0 0 18px; color: #c9d2d8; font-size: 14.5px; line-height: 1.55; }
.handoff .cta { background: #fff; color: var(--deep); padding: 12px 18px; font-size: 14px; }
.handoff .cta:hover { background: var(--accent-2); box-shadow: none; }

/* ---------- Firma del fundador ---------- */
.signature {
  display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: center;
  max-width: 720px; margin: 0 auto; padding: 26px 28px;
  background: rgba(255, 255, 255, .72); border: 1px solid var(--line);
  border-radius: var(--radius); text-align: left;
}
/* El retrato va envuelto en <picture> (WebP con PNG detrás), así que el hijo
   directo de la rejilla es el <picture> y no el <img>: sin display:block se
   queda como caja en línea y añade el espacio del descuelgue tipográfico. */
.signature picture { display: block; }
.signature img { width: 72px; height: 72px; border-radius: 50%; display: block; }
.signature blockquote { margin: 0 0 8px; font-size: 16.5px; line-height: 1.55; color: var(--ink); }
.signature cite { font-style: normal; font-size: 13px; color: var(--muted); font-weight: 600; }

/* ---------- Cierre ---------- */
.final { padding: 110px 0 100px; text-align: center; }
.final .section-title, .final .section-copy { margin-left: auto; margin-right: auto; }
.promptbox {
  width: min(760px, 100%); margin: 30px auto 0; background: #fff;
  border: 1px solid rgba(47, 140, 106, .22); border-radius: 26px; padding: 10px;
  display: flex; gap: 10px; box-shadow: var(--shadow);
}
.promptbox input { flex: 1; border: 0; outline: 0; padding: 14px; background: transparent; font-size: 16px; }
.promptbox button {
  border: 0; background: var(--accent-strong); color: #fff; border-radius: 18px;
  padding: 13px 18px; font-family: var(--font-display); font-weight: 600; cursor: pointer;
}
.promptbox button:hover { background: var(--accent-hover); }
.micro { font-size: 12px; color: var(--muted); margin-top: 10px; }

/* ---------- En construcción ----------
   Página de paso mientras la aplicación se termina. Reutiliza las piezas del
   hero (eyebrow, h1, lead, .cta) en vez de inventar componentes para algo que
   va a desaparecer. */
.construccion { padding: 110px 0 130px; }
.construccion h1 { font-size: clamp(32px, 4.5vw, 48px); margin-bottom: 20px; max-width: 720px; }
.construccion .lead { max-width: 660px; margin-bottom: 18px; }
.construccion .hero-actions { margin-top: 12px; }
.construccion-contacto { margin-top: 24px; }
.construccion-contacto a { color: var(--accent-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Pie ---------- */
footer { border-top: 1px solid var(--line); padding: 36px 0 50px; }
.foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.foot p { color: var(--muted); font-size: 13px; margin-top: 8px; max-width: 320px; }
.foot-links { display: flex; gap: 24px; font-size: 13px; font-weight: 600; color: #52616b; }
.foot-links a:hover { color: var(--ink); }

/* ---------- Responsive ---------- */

/* El nav colapsa antes que el resto del layout, y por eso va en su propia
   media query. La fila entera —marca, seis enlaces y el CTA— mide unos
   1100px; por debajo de eso no cabe y lo correcto es el menú de hamburguesa.
   Estaba en 900, así que entre 900 y 1100 el menú se partía en dos líneas. */
@media (max-width: 1100px) {
  .navlinks { display: none; }
  .nav-mobile-btn { display: block; }
  .nav-mobile-panel { display: flex; }
}

@media (max-width: 980px) {
  .limits { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero-grid, .live-grid, .workspace-grid { grid-template-columns: 1fr; }
  .product-card { transform: none; }
  .pain-grid, .middle-card, .cases { grid-template-columns: 1fr 1fr; }
  .choice.featured { translate: none; }
  .pricing-journey { grid-template-columns: 1fr; }
  .price-card.build { translate: none; }
}
@media (max-width: 760px) {
  .pricing-foot { align-items: flex-start; flex-direction: column; }
  .price-card { padding: 24px; }
  .price { font-size: 36px; }
}
@media (max-width: 620px) {
  .wrap { width: min(100% - 24px, var(--max)); }
  .nav-inner { height: 58px; }
  section { padding: 76px 0; }
  .hero { padding-top: 28px; }
  .hero-grid { gap: 34px; }
  h1 { font-size: 40px; }
  .lead { font-size: 17px; }
  .pain-grid, .middle-card, .cases { grid-template-columns: 1fr; }
  .pain { min-height: 72px; padding: 16px 18px 16px 46px; }
  /* Los tres indicadores se quedan en fila. Apilados sumaban 312px de los 662
     que medía el panel, y como la ventana reserva la altura del estado mas
     alto, ese exceso lo pagaba tambien el estado de la hoja. En fila miden 123
     y siguen leyendose como lo que son: una fila de cifras de cabecera. */
  .attention { gap: 8px; }
  .stat { padding: 12px 10px; }
  .stat strong { font-size: 22px; }
  .stat small { font-size: 11px; line-height: 1.25; display: block; }
  .promptbox { flex-direction: column; }
  .promptbox button { width: 100%; }
  .signature { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .foot { flex-direction: column; }
  .foot-links { flex-wrap: wrap; }
  .foot-links a { min-height: 46px; }
  /* Aquí el <picture> ya ha servido el isotipo en vez del wordmark. Sube un
     par de píxeles porque es una marca compacta y a 18px se queda pequeña al
     lado del wordmark de modo. El "by" se mantiene: sin él dejan de leerse
     como una marca y su firma, y pasan a leerse como dos logos pegados. */
  .rocapia-logo { height: 20px; }
}

/* ---------- Movimiento reducido ----------
   Mismo criterio que la home: nada se mueve solo, todo queda en su estado
   final legible. js/modo.js además no arranca la demo y la deja directamente
   en el panel construido. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .pain, .cta, .nav-cta, .price-cta, .step, .demo-stage, .ai-note { transition: none; }
  .pain:hover, .cta:hover, .nav-cta:hover { transform: none; }
  .scanbar { animation: none; display: none; }
  .demo-stage { transition: none; }
  .nav, .nav .rocapia-lockup, .rocapia-logo-pos, .rocapia-logo-neg { transition: none; }
  .dashboard { transition: none; }
  .dashboard.show.is-popping { animation: none; }
  .nav .modo-dot.is-pulsing { animation: none; }
}