/* ═══════════════════════════════════════════════════════════════════
   SMARTECNIA · smarty.css
   Landing dedicada de Smarty (/smarty). Hereda tokens y componentes de
   styles.css (colores, tipografía, .btn, .kicker, .lead, .section,
   .ctaband--capsules) — este archivo solo cubre lo específico de esta
   página: header minimalista, hero, dolores, pasos, módulos,
   diferencial y footer liviano.

   Principio del brief: "el aire es lo que comunica que esto es
   fácil" — más espacio vertical entre secciones que el resto del
   sitio, un mensaje por pantalla, un solo CTA repetido.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Animaciones de entrada, por tipo de bloque ───────────────────
   Todo esto reutiliza el motor de .reveal de styles.css/main.js (el
   IntersectionObserver que agrega .is-in) — nunca se toca esa base ni
   el resto del sitio, solo se agregan variantes de esta página:

   · .reveal--left / .reveal--right — para pares texto+captura en
     columnas (Módulos, El diferencial, Próximo paso): cada mitad
     entra desde el lado en el que vive, como si se acomodara en su
     lugar. En mobile el layout ya es una sola columna, así que cae al
     mismo fade-up vertical de .reveal — el desplazamiento lateral no
     aporta ahí y arriesga overflow horizontal en pantallas angostas.
   · .reveal--scale — para capturas/mockups de producto "protagonistas"
     (el teléfono de Balance, el mockup de la app): en vez de
     desplazarse, se enfocan con una leve escala — se sienten como una
     demostración que aparece, no como un bloque de texto más.
   · Cascada por nth-child/delay — grillas y secuencias (precios,
     motivos de dolor, pasos del flujo, las 2 puertas de founders)
     entran una tras otra, no todas de golpe — refuerza que son varias
     opciones/pasos distintos, no un solo bloque. Delay acotado a los
     primeros ítems para no demorar el resto del contenido. */
.js .reveal--left { transform: translate3d(-28px, 0, 0); }
.js .reveal--right { transform: translate3d(28px, 0, 0); }
.js .reveal--left.is-in,
.js .reveal--right.is-in { transform: none; }
@media (max-width: 767px) {
  .js .reveal--left, .js .reveal--right { transform: translate3d(0, 20px, 0); }
}

.js .reveal--scale { transform: scale(0.96); }
.js .reveal--scale.is-in { transform: none; }

.smpricing .smprice:nth-child(2) { transition-delay: 90ms; }
.smpricing .smprice:nth-child(3) { transition-delay: 180ms; }
.smpain__card:nth-child(2) { transition-delay: 80ms; }
.smpain__card:nth-child(3) { transition-delay: 160ms; }
.smpain__card:nth-child(4) { transition-delay: 240ms; }
.qfork__door:nth-child(2) { transition-delay: 100ms; }

/* Las 4 capturas de "Más que un CRM" se asientan en su inclinación
   final (empiezan un poco más chicas y más abajo) mientras la tarjeta
   central solo hace fade-up — refuerza que las capturas "aterrizan"
   alrededor de la afirmación central. Necesita su propio par
   inicial/final porque estos elementos ya tienen una rotación fija de
   reposo (no pueden usar transform:none como estado final). */
.js .smproof__corner.reveal {
  transition: opacity 550ms var(--ease-out), transform 550ms var(--ease-out);
  transform: translate3d(0, 18px, 0) rotate(var(--corner-rot)) scale(0.9);
}
.js .smproof__corner.reveal.is-in { transform: rotate(var(--corner-rot)) scale(1); }
.smproof__corner--tr.reveal,
.smproof__corner--bl.reveal { transition-delay: 90ms; }
.smproof__corner--br.reveal { transition-delay: 160ms; }

/* ── Header minimalista ─────────────────────────────────────────── */
/* El header de esta página muestra la marca de Smarty (el SaaS), no la
   de Smartecnia (la consultora que lo hace) — son cosas distintas y
   quien aterriza acá está entrando al producto, no a la agencia. Esa
   distinción sí vive en el footer ("Smarty es el sistema operativo
   comercial de Smartecnia"), que es donde corresponde la atribución. */
.nav__logo--smarty { gap: 9px; }
.nav__logo--smarty img { height: 28px; width: 28px; }
.nav__logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--navy);
  transition: color 200ms var(--ease-out);
}
.nav--ondark .nav__logo-text,
.nav.is-stuck .nav__logo-text { color: #fff; }

.sm-navspacer { flex: 1; }

/* styles.css esconde .nav__cta en mobile (position:fixed, opacity:0) y
   solo lo revela cuando el JS del burger agrega body.menu-open — como
   esta página no tiene burger (no hay menú que abrir), sin este
   override el botón de conversión desaparece por completo en mobile.
   Mismo breakpoint que styles.css (860px) para que no quede un rango
   intermedio sin botón. */
@media (max-width: 860px) {
  #nav .nav__cta {
    position: static;
    display: inline-flex;
    opacity: 1;
    visibility: visible;
    transform: none;
    width: auto;
    inset: auto;
  }
}
@media (max-width: 400px) {
  #nav .nav__inner { gap: var(--space-3); }
  #nav .nav__cta { padding-inline: var(--space-4); font-size: 13px; min-height: 42px; }
}
.sm-navlogin {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-soft);
  transition: color 180ms var(--ease-out);
}
.sm-navlogin:hover { color: var(--azul); }
@media (max-width: 640px) { .sm-navlogin { display: none; } }
/* Mismo trato que .nav__links a: blanco sobre el hero navy o al hacer
   scroll (el header siempre se pone navy-glass, sea cual sea la
   sección detrás — convención compartida por todo el sitio). */
.nav--ondark .sm-navlogin,
.nav.is-stuck .sm-navlogin { color: rgba(255,255,255,0.82); }
.nav--ondark .sm-navlogin:hover,
.nav.is-stuck .sm-navlogin:hover { color: #fff; }

/* ── Pill de founders ──────────────────────────────────────────── */
.sm-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px var(--space-4) 7px var(--space-3);
  border-radius: 999px;
  background: var(--azul-soft, #EAF2FE);
  color: var(--azul);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.sm-pill__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--chispa-verde);
  box-shadow: 0 0 0 3px rgba(1,157,77,0.18);
}
.sm-textlink {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-soft);
  transition: color 180ms var(--ease-out);
}
.sm-textlink:hover { color: var(--azul); }
.sm-micro { font-size: var(--text-xs); color: var(--ink-mute); margin-top: var(--space-4); line-height: 1.5; }

/* ── Hero: navy + grid punteado + glow de marca, todo centrado ────
   Estética de referencia: Fina (fondo oscuro, aura de color detrás del
   titular, todo centrado, un solo CTA grande). Colores propios de
   Smartecnia (azul/oro/verde), no los morados/rosados de Fina. */
.smhero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: calc(var(--nav-h) + var(--space-8)) var(--space-9);
  background: radial-gradient(120% 100% at 50% -10%, #132646 0%, var(--navy) 55%, #060b14 100%);
}
.smhero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(65% 55% at 50% 22%, #000 40%, transparent 100%);
  mask-image: radial-gradient(65% 55% at 50% 22%, #000 40%, transparent 100%);
}
.smhero__glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.smhero__glow--a { width: 460px; height: 460px; top: -180px; left: 6%; background: var(--azul); opacity: 0.55; }
.smhero__glow--b { width: 400px; height: 400px; top: -120px; right: 4%; background: var(--chispa-verde); opacity: 0.32; }
.smhero__glow--c { width: 420px; height: 420px; bottom: -260px; left: 50%; transform: translateX(-50%); background: var(--chispa-oro); opacity: 0.26; }

.smhero__inner { position: relative; text-align: center; max-width: 840px; margin-inline: auto; }
.smhero .sm-pill {
  background: rgba(40,122,237,0.16);
  color: #CFE0FF;
  border: 1px solid rgba(107,168,255,0.35);
}
.smhero .sm-pill__dot { box-shadow: 0 0 0 3px rgba(1,157,77,0.28); }

.smhero__title {
  font-size: var(--text-4xl);
  line-height: 1.12;
  margin-top: var(--space-5);
  color: #fff;
  text-wrap: balance;
}
.smhero__title em {
  font-style: normal;
  background: linear-gradient(90deg, #7FB0FF 0%, var(--chispa-oro) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.smhero__sub { margin-top: var(--space-5); max-width: 58ch; margin-inline: auto; color: rgba(255,255,255,0.76); }
.smhero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-7);
  flex-wrap: wrap;
}
.smhero .sm-textlink { color: rgba(255,255,255,0.72); }
.smhero .sm-textlink:hover { color: #fff; }
.smhero .sm-micro { color: rgba(255,255,255,0.5); max-width: 62ch; margin-inline: auto; }

.smhero__media {
  margin-top: clamp(var(--space-8), 7vw, var(--space-10));
  max-width: 900px;
  margin-inline: auto;
}
.smhero__media .browserframe { box-shadow: 0 30px 70px rgba(0,0,0,0.55); }
@media (max-width: 640px) {
  .smhero__title { font-size: clamp(1.9rem, 8vw, 2.35rem); }
  .smhero__media { max-width: 100%; }
}

/* ── Marcos de captura: navegador (desktop) y teléfono (mobile) ──
   Las capturas son reales (cuenta de Smartecnia en Smarty), sin marco
   de ningún tipo. En vez de encargar un mockup de dispositivo, el
   marco se resuelve 100% en CSS — más liviano y consistente con el
   resto del sitio, que no usa maquetas skeuomórficas. */
.browserframe {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--paper);
}
.browserframe__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  background: linear-gradient(180deg, #EEF1F6, #E6EAF1);
}
.browserframe__bar span { width: 9px; height: 9px; border-radius: 50%; }
.browserframe__bar span:nth-child(1) { background: var(--chispa-roja); }
.browserframe__bar span:nth-child(2) { background: var(--chispa-oro); }
.browserframe__bar span:nth-child(3) { background: var(--chispa-verde); }
.browserframe img { display: block; width: 100%; height: auto; }

.phoneframe {
  border-radius: 32px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 6px solid var(--navy);
  background: var(--navy);
}
.phoneframe img { display: block; width: 100%; height: auto; }

/* ── Prueba social: slider de logos ───────────────────────────────
   Reusa el motor de #casesSlider/.casecard (main.js → initCasesSlider),
   el mismo que arma el carrusel de Casos de éxito en index.html — solo
   cambia la piel: acá cada .casecard es una tarjeta de logo clara, no
   una tarjeta de teléfono oscura. */
.smlogos { margin-top: clamp(var(--space-6), 5vw, var(--space-7)); }
.smlogos .casesslider { --visible: 4; --gap: var(--space-4); margin-top: 0; }
.smlogos .casecard {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 104px;
  padding: var(--space-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: none;
  cursor: default;
}
.smlogos .casecard::before { content: none; }
.smlogos .casecard:hover, .smlogos .casecard:focus-visible {
  border-color: var(--azul);
  box-shadow: 0 10px 24px rgba(40,122,237,0.16);
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
/* Cada logo enlaza al sitio real del negocio — así se ve a simple
   vista que son clientes reales, no un placeholder. El link vive dentro
   de .casecard (que sigue centrando su contenido con flex), no
   reemplaza la tarjeta. */
.smlogos .casecard a { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.smlogos .casecard a:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 6px; }
.smlogos .casecard img {
  max-width: 100%;
  max-height: 36px;
  width: auto;
  height: auto;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 220ms var(--ease-out), opacity 220ms var(--ease-out);
}
.smlogos .casecard:hover img { filter: grayscale(0); opacity: 1; }
.smlogos .casecard--brand { flex-direction: column; gap: 8px; }
.smlogos .casecard--brand a { flex-direction: column; gap: 8px; }
.smlogos .casecard--brand img { max-height: 26px; opacity: 1; filter: none; }
.smlogos .casecard--brand span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  opacity: 0.72;
  transition: opacity 220ms var(--ease-out);
}
.smlogos .casecard--brand:hover span { opacity: 1; }
.smlogos .casecard--text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.3;
  text-align: center;
  color: var(--ink-soft);
  opacity: 0.72;
  transition: opacity 220ms var(--ease-out), color 220ms var(--ease-out);
}
.smlogos .casecard--text:hover { opacity: 1; color: var(--azul); }
@media (max-width: 980px) { .smlogos .casesslider { --visible: 3; } }
@media (max-width: 700px) { .smlogos .casesslider { --visible: 2; } }
@media (max-width: 460px) { .smlogos .casesslider { --visible: 1; } }

.smproof__pretitle {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--ink-mute);
  margin-top: var(--space-4);
}

/* ── Más que un CRM: capturas flotando alrededor de la conclusión ──
   Mismo espíritu que el hero de Smartly (tiles sueltas rodeando la
   pieza central) pero sin superposición — tres columnas de grid, cada
   captura con un leve giro para que se sienta "puesta", no alineada
   con regla. Se resuelve solo con grid, nada de position:absolute, así
   que no hay nada que se pueda descuadrar en un ancho intermedio. */
.smproof {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr) minmax(0, 210px);
  grid-template-areas:
    "tl center tr"
    "bl center br";
  align-items: center;
  column-gap: clamp(var(--space-4), 2.5vw, var(--space-5));
  row-gap: var(--space-3);
  margin-top: clamp(var(--space-7), 6vw, var(--space-8));
}
.smproof__corner { display: flex; flex-direction: column; align-items: center; }
/* Cada captura se ancla al borde de su fila (no centrada en toda la
   mitad) para que quede pegada a la esquina real de la tarjeta central,
   no flotando a medio camino con un hueco grande de por medio. */
/* Inclinaciones suaves y en pares diagonales simétricos (tl/br = 3°,
   tr/bl = 2°) — con ángulos más marcados (hasta 5°) la composición se
   leía como descuadrada aunque la tarjeta central estuviera centrada
   de verdad; así se siente "puesta" sin generar esa ilusión óptica. */
.smproof__corner--tl { grid-area: tl; align-self: start; justify-self: end; --corner-rot: -3deg; transform: rotate(var(--corner-rot)); }
.smproof__corner--tr { grid-area: tr; align-self: start; justify-self: start; --corner-rot: 2deg; transform: rotate(var(--corner-rot)); }
.smproof__corner--bl { grid-area: bl; align-self: end; justify-self: end; --corner-rot: 2deg; transform: rotate(var(--corner-rot)); }
.smproof__corner--br { grid-area: br; align-self: end; justify-self: start; --corner-rot: -3deg; transform: rotate(var(--corner-rot)); }
.smproof__corner .phoneframe { max-width: 190px; }
.smproof__cap {
  display: block;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-mute);
  margin-bottom: var(--space-3);
}
.smproof__center {
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(var(--space-6), 5vw, var(--space-8));
  text-align: center;
  /* La captura de "Así la recibe tu cliente" es más alta que las otras
     tres, lo que empuja la fila superior del grid y deja la tarjeta
     corrida hacia arriba respecto al centro real de las 4 esquinas —
     se compensa bajándola un poco. */
  margin-top: 55px;
}
.smproof__center h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); text-wrap: balance; }
.smproof__nowrap { white-space: nowrap; }
.smproof__center h3 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--azul) 0%, var(--chispa-verde) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.smproof__center p { margin-top: var(--space-4); color: var(--ink-mute); font-size: var(--text-base); line-height: 1.65; }
.smproof__center p + p { margin-top: var(--space-3); }

.smproof__list {
  list-style: none;
  padding: 0;
  margin: clamp(var(--space-7), 5vw, var(--space-8)) auto 0;
  max-width: 760px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-6);
}
.smproof__list li {
  padding-inline-start: var(--space-5);
  position: relative;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: 1.6;
}
.smproof__list li::before {
  content: "";
  position: absolute; inset-inline-start: 0; top: 0.5em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--chispa-verde);
}
@media (max-width: 860px) {
  /* La tarjeta central pasa a ancho completo arriba, y las cuatro
     capturas se acomodan debajo en un grid 2x2 — mantiene la idea de
     "una captura por esquina" sin depender del ancho para las esquinas
     reales del recuadro. */
  .smproof {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "center center"
      "tl tr"
      "bl br";
    justify-items: center;
  }
  .smproof__corner--tl, .smproof__corner--tr,
  .smproof__corner--bl, .smproof__corner--br {
    transform: none;
    align-self: center;
    justify-self: center;
  }
  .smproof__corner .phoneframe { max-width: 100%; }
  .smproof__center { margin-top: 0; }
  .smproof__list { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  /* En mobile angosto el 2x2 queda muy apretado (~150px por captura) —
     mejor una sola columna, más legible. */
  .smproof {
    grid-template-columns: 1fr;
    grid-template-areas: "center" "tl" "tr" "bl" "br";
  }
  .smproof__corner .phoneframe { max-width: 260px; }
}

/* ── ¿Es Smarty para tu rubro? · desplegable ─────────────────────── */
.smrubros { margin-top: clamp(var(--space-7), 6vw, var(--space-8)); }
.smrubros__acc {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  overflow: hidden;
}
.smrubros__acc[open] { box-shadow: var(--shadow-sm); }
.smrubros__acc summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  transition: background 180ms var(--ease-out);
}
.smrubros__acc summary::-webkit-details-marker { display: none; }
.smrubros__acc summary:hover, .smrubros__acc summary:focus-visible {
  background: var(--azul-soft, #EAF2FE);
}
.smrubros__acc summary:hover .smrubros__chevron,
.smrubros__acc summary:focus-visible .smrubros__chevron { color: var(--azul); }
.smrubros__acc summary:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.smrubros__summeta { flex: 1; }
.smrubros__summeta small { display: block; font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); color: var(--ink-mute); margin-top: 4px; }
.smrubros__chevron { flex: none; width: 22px; height: 22px; color: var(--ink-mute); transition: transform 220ms var(--ease-out), color 180ms var(--ease-out); }
.smrubros__acc[open] .smrubros__chevron { transform: rotate(180deg); }
.smrubros__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin: 0 var(--space-6) var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.smrubro { padding: var(--space-4) var(--space-5); border-radius: 14px; background: var(--bg-2); }
.smrubro h4 { font-size: var(--text-sm); line-height: 1.35; }
.smrubro__logos { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.smrubro__logos a {
  display: flex;
  align-items: center;
  line-height: 0;
  opacity: 0.85;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
/* Crece un poco al pasar el mouse — con 1-2 logos por tarjeta el
   cambio de opacidad solo no bastaba para notar que es clickeable. */
.smrubro__logos a:hover, .smrubro__logos a:focus-visible { opacity: 1; transform: scale(1.12); }
.smrubro__logos a:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
.smrubro__logos img { height: 24px; width: auto; max-width: 92px; object-fit: contain; }
@media (max-width: 760px) { .smrubros__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .smrubros__grid { grid-template-columns: 1fr; } }

/* ── Planes ────────────────────────────────────────────────────── */
.smpricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: clamp(var(--space-7), 6vw, var(--space-8)); align-items: stretch; }
.smprice { display: flex; flex-direction: column; padding: var(--space-7) var(--space-6); border-radius: var(--radius-lg); border: 1.5px solid var(--line); background: var(--paper); position: relative; }

/* Starter: simple sigue siendo simple, pero con acento azul propio —
   no compite con el Pro, solo deja de verse "pelado". */
.smprice--starter { border-color: rgba(40,122,237,0.28); background: linear-gradient(180deg, var(--azul-soft, #EAF2FE) 0%, var(--paper) 38%); }

.smprice--pro { color: #fff; border-color: transparent; background: radial-gradient(140% 120% at 15% 0%, #1B3B6B 0%, var(--navy) 60%, #060b14 130%); box-shadow: var(--shadow-lg); }

/* Scale: acento oro — el tercer color de marca, para que la escalera
   Starter (azul) → Pro (navy) → Scale (oro) se sienta intencional. */
.smprice--scale { border-color: rgba(248,176,50,0.4); background: linear-gradient(180deg, rgba(248,176,50,0.12) 0%, var(--paper) 42%); }

.smprice__ribbon {
  position: absolute; top: var(--space-5); right: var(--space-6);
  font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--navy); background: var(--chispa-oro); padding: 5px 12px; border-radius: 999px;
}
.smprice__ribbon--soon { color: var(--ink-mute); background: var(--paper); border: 1px solid var(--line); }
.smprice__name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; }
.smprice__tagline {
  display: inline-flex; align-self: flex-start; margin-top: var(--space-2);
  font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.02em;
  color: var(--azul); background: rgba(40,122,237,0.1); padding: 4px 11px; border-radius: 999px;
}
.smprice--pro .smprice__tagline { color: var(--chispa-oro); background: rgba(248,176,50,0.16); }
.smprice--scale .smprice__tagline { color: #B4780B; background: rgba(248,176,50,0.22); }
.smprice__for { font-size: var(--text-sm); margin-top: var(--space-3); opacity: 0.72; max-width: 34ch; }
.smprice--pro .smprice__for { color: rgba(255,255,255,0.72); }
.smprice__cost { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.smprice__now { font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xl); line-height: 1; }
.smprice__period { font-size: var(--text-sm); opacity: 0.6; }
.smprice__then { width: 100%; font-size: var(--text-xs); opacity: 0.62; margin-top: 2px; }
.smprice__then s { margin-right: 4px; }
.smprice__badge {
  display: inline-flex; align-self: flex-start; margin-top: var(--space-4);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em;
  background: var(--azul-soft, #EAF2FE); color: var(--azul); padding: 5px 12px; border-radius: 999px;
}
.smprice--pro .smprice__badge { background: rgba(248,176,50,0.18); color: var(--chispa-oro); }
.smprice__badge--gold { background: rgba(248,176,50,0.22); color: #B4780B; }
.smprice__list { list-style: none; padding: 0; margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.smprice__list li { display: flex; gap: var(--space-3); font-size: var(--text-sm); line-height: 1.5; }
.smprice__list li::before { content: "✓"; flex: none; font-weight: 700; color: var(--chispa-verde); }
.smprice--pro .smprice__list li::before { color: var(--chispa-oro); }
.smprice--scale .smprice__list li::before { color: #B4780B; }
.smprice .btn { margin-top: var(--space-7); justify-content: center; }
.smprice__soonbtn {
  background: transparent; color: var(--ink); border: 1.5px solid var(--line);
}
.smprice__soonbtn:hover { background: var(--bg-2); }
@media (max-width: 980px) { .smpricing { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* ── También en tu bolsillo (teaser app móvil) ───────────────────── */
.smapp { background: var(--bg-2); }
.smapp__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); align-items: center; gap: clamp(var(--space-7), 5vw, var(--space-9)); }
.smapp__media { max-width: 300px; margin-inline: auto; }
.smapp__media img { width: 100%; height: auto; display: block; filter: drop-shadow(0 24px 40px rgba(10,21,38,0.25)); }
.smapp__pillars { list-style: none; padding: 0; margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.smapp__pillars li { display: flex; gap: var(--space-3); align-items: flex-start; text-align: left; }
.smapp__pillaricon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 16px;
}
.smapp__pillars strong { display: block; font-size: var(--text-sm); margin-bottom: 2px; }
.smapp__pillars div { font-size: var(--text-sm); color: var(--ink-mute); line-height: 1.55; }
.smapp__badges { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); flex-wrap: wrap; }
.smapp__badges img { height: 42px; width: auto; filter: grayscale(1); opacity: 0.6; }
.smapp__soon {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-mute); background: var(--paper); border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px;
}
@media (max-width: 860px) {
  .smapp__inner { grid-template-columns: 1fr; text-align: center; }
  .smapp__inner .kicker { justify-content: center; }
  .smapp__badges { justify-content: center; }
  .smapp__pillars { max-width: 440px; margin-inline: auto; }
}

/* ── Cupo founders: contador + dos puertas ───────────────────────── */
/* Línea secundaria (la llamada agendada) separada y más chica que
   "30 días gratis, sin tarjeta" — para que no compitan por atención
   y no se lea como un solo párrafo largo. */
.smfounders__note {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-mute);
}
.smfounders__counter { max-width: 460px; margin: var(--space-6) auto 0; }
.smfounders__label { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-2); }
.smfounders__label span:last-child { color: var(--chispa-verde); }
.smfounders__bar { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.smfounders__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--azul), var(--chispa-verde)); }
.smfounders .qfork { max-width: 720px; margin-inline: auto; }

/* ── Comunidad Smarty · newsletter ────────────────────────────────
   Reusa .news__form/.news__input/.news__btn/.news__micro tal como
   vive hoy en el footer de La Ruta Smart (styles.css) — están
   pensados para fondo oscuro, así que esta sección también es navy. */
.smnews { background: var(--navy); }
.smnews__inner { max-width: 680px; margin-inline: auto; text-align: center; }
.smnews h2 { color: #fff; }
.smnews .lead { color: rgba(255,255,255,0.76); }
.smnews .news__form { margin-top: var(--space-6); max-width: 420px; margin-inline: auto; }
.smnews .news__micro { text-align: center; }

/* ── Prueba social ─────────────────────────────────────────────── */
.smsocial { padding-block: var(--space-7); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.smsocial__text { text-align: center; font-size: var(--text-sm); color: var(--ink-mute); margin-bottom: var(--space-5); }
.smsocial__logos { display: flex; align-items: center; justify-content: center; gap: clamp(var(--space-6), 6vw, var(--space-9)); flex-wrap: wrap; }
.smsocial__logos img {
  height: 34px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 220ms var(--ease-out), opacity 220ms var(--ease-out);
}
.smsocial__logos img:hover { filter: grayscale(0); opacity: 1; }

/* ── ¿Te suena familiar? ──────────────────────────────────────── */

/* Collage del caos: chips sueltos, cada uno rotado a su manera — la
   idea es que se vean como pestañas de navegador tiradas sin ningún
   orden, no como una lista prolija. Sin animación (nada que distraiga,
   solo el desorden hecho imagen). */
.smchaos {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 16px 20px;
  margin-top: clamp(var(--space-7), 6vw, var(--space-8));
  padding: var(--space-5) var(--space-4) var(--space-3);
}
/* El "enredo": un hilo suelto tejido detrás de las pestañas, no una
   línea que conecta punto a punto (eso se rompería en cada breakpoint) —
   es textura de fondo, igual de válida a cualquier ancho. */
.smchaos__thread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.22;
  z-index: 0;
  pointer-events: none;
}
.smchaos__tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px 9px 9px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.smchaos__tab:nth-child(1) { transform: rotate(-6deg); }
.smchaos__tab:nth-child(2) { transform: rotate(4deg); margin-top: 20px; }
.smchaos__tab:nth-child(3) { transform: rotate(-3deg); }
.smchaos__tab:nth-child(4) { transform: rotate(7deg); margin-top: 10px; }
.smchaos__tab:nth-child(5) { transform: rotate(-5deg); margin-top: 22px; }
.smchaos__tab:nth-child(6) { transform: rotate(5deg); }
.smchaos__icon {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
}
.smchaos__icon svg { width: 15px; height: 15px; }
@media (max-width: 560px) {
  .smchaos { gap: 12px 14px; }
  .smchaos__tab { font-size: var(--text-xs); padding: 7px 14px 7px 7px; }
  .smchaos__tab:nth-child(n) { margin-top: 0; }
}
.smpain {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-top: clamp(var(--space-6), 5vw, var(--space-7));
}
.smpain__card {
  padding: var(--space-6) var(--space-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform 240ms var(--ease-spring), box-shadow 240ms var(--ease-out);
}
.smpain__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.smpain__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--azul-soft, #EAF2FE);
  color: var(--azul);
  margin-bottom: var(--space-4);
  transition: background 220ms var(--ease-out);
}
.smpain__icon svg { width: 22px; height: 22px; transition: stroke 220ms var(--ease-out); }
.smpain__card h3 { font-size: var(--text-base); margin-bottom: var(--space-2); text-wrap: balance; }
.smpain__card p { font-size: var(--text-sm); color: var(--ink-mute); line-height: 1.55; }
/* Mismo trato que .pillar en index.html: cada tarjeta cambia el color
   de su ícono a un acento de marca distinto al pasar el mouse. */
.smpain__card:nth-child(1):hover .smpain__icon { background: rgba(231,61,56,0.12); }
.smpain__card:nth-child(1):hover .smpain__icon svg { stroke: var(--chispa-roja); }
.smpain__card:nth-child(2):hover .smpain__icon { background: rgba(248,176,50,0.16); }
.smpain__card:nth-child(2):hover .smpain__icon svg { stroke: var(--chispa-oro); }
.smpain__card:nth-child(3):hover .smpain__icon { background: rgba(1,157,77,0.12); }
.smpain__card:nth-child(3):hover .smpain__icon svg { stroke: var(--chispa-verde); }
.smpain__card:nth-child(4):hover .smpain__icon { background: var(--azul-soft, #EAF2FE); }
.smpain__card:nth-child(4):hover .smpain__icon svg { stroke: var(--azul); }
.smpain__close {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  margin-top: clamp(var(--space-7), 5vw, var(--space-8));
}
.smpain__bridge {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--azul);
  margin-top: var(--space-4);
}
@media (max-width: 980px) { .smpain { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .smpain { grid-template-columns: 1fr; } }

/* ── Cómo funciona ─────────────────────────────────────────────── */
.smsteps {
  position: relative;
  display: grid;
  /* Antes alternaba 1fr/auto pensado para [paso,flecha]×5 — pero como
     las flechas están en display:none, quedan fuera del conteo de la
     grilla entera y los 5 pasos visibles caían en las primeras 5
     columnas de esa plantilla (1,2,3,4,5), no en las que se veían
     "correctas" a simple vista (1,3,5,7,9) — la mitad angostas (1fr) y
     la mitad anchas (auto, a su propio ancho de contenido). Con solo 5
     columnas iguales no hay ambigüedad posible. */
  grid-template-columns: repeat(5, 1fr);
  align-items: start;
  gap: var(--space-3);
  margin-top: clamp(var(--space-7), 6vw, var(--space-9));
  list-style: none;
  padding: 0;
}
.smsteps__step { position: relative; z-index: 1; text-align: center; }
.smsteps__flow-wrap { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.smsteps__flow { display: none; }
.smsteps__flow--v { width: 60px; height: 100%; margin-inline: auto; }
@media (max-width: 860px) {
  .smsteps__flow--v { display: block; }
}
@media (min-width: 861px) {
  /* .wrap tiene un tope de 1200px en todo el sitio — a 5 columnas eso
     deja ~227px cada una, insuficiente para que el texto de cada paso
     se lea bien (se parte en líneas de un par de palabras). Esta
     sección se sale de ese tope con más ancho propio, centrada sobre
     el viewport en vez de sobre .wrap. */
  .smsteps {
    width: min(94vw, 1560px);
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .smsteps__flow-wrap { height: 60px; }
  .smsteps__flow--h { display: block; width: 100%; height: 100%; }
  /* En columnas angostas el texto centrado se ve irregular — a la
     izquierda, con el número/título arriba centrados, se lee mejor. */
  .smsteps__step p { text-align: left; max-width: none; margin-inline: 0; }
}
.smsteps__n {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(10,21,38,0.18);
  transition: transform 220ms var(--ease-spring), box-shadow 220ms var(--ease-out);
}
/* Misma rotación de color que .rutastep__n / .rmap__dot en el resto
   del sitio — es el mismo Smarty, mismos acentos de marca. */
/* nth-child arranca en 2 porque el li del hilo de flujo (decorativo)
   ahora ocupa la posición 1, antes del primer paso. */
.smsteps__step:nth-child(2) .smsteps__n { background: var(--chispa-roja); }
.smsteps__step:nth-child(4) .smsteps__n { background: var(--chispa-oro); }
.smsteps__step:nth-child(6) .smsteps__n { background: var(--azul); }
.smsteps__step:nth-child(8) .smsteps__n { background: var(--chispa-verde); }
.smsteps__step:nth-child(10) .smsteps__n { background: var(--navy); }
@media (hover: hover) and (pointer: fine) {
  .smsteps__step:hover .smsteps__n { transform: scale(1.22); box-shadow: 0 10px 22px rgba(10,21,38,0.28); }
}
.smsteps__step h3 { font-size: var(--text-lg); margin: var(--space-3) 0 var(--space-2); }
.smsteps__step p { font-size: var(--text-sm); color: var(--ink-mute); line-height: 1.55; max-width: 34ch; margin-inline: auto; }
/* La línea de flujo (horizontal o vertical, según el ancho) reemplaza
   a estas flechitas en las dos versiones — quedan en el HTML solo para
   no tener que recalcular los nth-child de los números, pero no se
   muestran nunca. */
.smsteps__arrow { display: none; }
@media (max-width: 860px) {
  .smsteps { grid-template-columns: 1fr; justify-items: center; }
}

/* ── Módulos ───────────────────────────────────────────────────── */
.smmod {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--space-6), 5vw, var(--space-8));
  margin-top: clamp(var(--space-8), 6vw, var(--space-10));
}
.smmod:first-of-type { margin-top: clamp(var(--space-7), 6vw, var(--space-9)); }
.smmod--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); }
.smmod--flip .smmod__media { order: 2; }
.smmod__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--paper);
}
.smmod__media--real img { width: 100%; height: auto; display: block; }
.smmod__label {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul);
  margin-bottom: var(--space-2);
}
.smmod__body h3 { font-size: var(--text-2xl); text-wrap: balance; }
.smmod__body p { font-size: var(--text-base); color: var(--ink-soft); line-height: 1.65; margin-top: var(--space-3); max-width: 46ch; }
@media (max-width: 860px) {
  /* Mobile-first: primero el texto que explica qué estás viendo,
     después la captura — no al revés. Si la imagen llega antes que
     el contexto, la persona no sabe qué está mirando. */
  .smmod, .smmod--flip { grid-template-columns: 1fr; }
  .smmod__body { order: -1; }
  .smmod__media { max-width: 420px; margin-inline: auto; }
}

/* Wireframes de los módulos sin captura todavía — geometría abstracta
   en los tonos de marca, pensada para ocupar exactamente el mismo
   hueco (.smmod__media) que ocupará la captura real después. */
.smwire {
  aspect-ratio: 4 / 3;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: center;
  background: linear-gradient(160deg, var(--bg-2), var(--paper));
}
.smwire__bar { width: 46%; height: 14px; border-radius: 7px; background: var(--navy); opacity: 0.9; margin-bottom: var(--space-2); }
.smwire__row { display: flex; align-items: center; gap: var(--space-3); }
.smwire__dot { flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--azul); opacity: 0.16; }
.smwire__line { display: block; height: 10px; border-radius: 5px; background: var(--azul); opacity: 0.22; }
.smwire__line--soft { opacity: 0.12; height: 8px; }
.smwire__line--30 { width: 30%; } .smwire__line--35 { width: 35%; } .smwire__line--40 { width: 40%; }
.smwire__line--45 { width: 45%; } .smwire__line--48 { width: 48%; } .smwire__line--55 { width: 55%; }
.smwire__line--60 { width: 60%; } .smwire__line--65 { width: 65%; } .smwire__line--80 { width: 80%; }
.smwire__total { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--line); }
.smwire__pill { width: 64px; height: 22px; border-radius: 999px; background: var(--azul); }
.smwire__client { display: flex; align-items: center; gap: var(--space-3); }
.smwire__avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--azul); opacity: 0.2; }
.smwire__cl-lines { display: flex; flex-direction: column; gap: 6px; flex: 1; }

/* ── El diferencial ───────────────────────────────────────────── */
.smdiff {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  grid-template-areas:
    "copy  media"
    "list  media";
  align-items: center;
  gap: clamp(var(--space-6), 5vw, var(--space-9));
}
.smdiff__copy { grid-area: copy; }
.smdiff__list { grid-area: list; list-style: none; padding: 0; margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.smdiff__list li {
  padding-inline-start: var(--space-5);
  position: relative;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: 1.6;
}
.smdiff__list li::before {
  content: "";
  position: absolute; inset-inline-start: 0; top: 0.5em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--chispa-verde);
}
.smdiff__media {
  grid-area: media;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.smdiff__media img { width: 100%; height: auto; display: block; }
/* Mockup con fondo transparente (igual que el de "Próximo paso") que
   cambia de mes flojo a mes bueno al pasar el mouse — dos imágenes
   apiladas, sin JS, solo opacidad cruzada. El marco genérico de
   .smdiff__media (pensado para una captura plana con borde/sombra
   propios) se apaga acá porque el mockup ya trae su propia sombra. */
.smdiff__balhover {
  position: relative;
  width: 100%;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  aspect-ratio: 700 / 872;
  max-width: 340px;
  margin: 0 auto 40px;
  cursor: pointer;
}
.smdiff__media .smdiff__balimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 34px rgba(10,21,38,0.22));
  transition: opacity 320ms var(--ease-out);
}
.smdiff__balimg--bad { opacity: 1; }
.smdiff__balimg--good { opacity: 0; }
.smdiff__balhover:hover .smdiff__balimg--bad,
.smdiff__balhover:focus-visible .smdiff__balimg--bad,
.smdiff__balhover:focus-within .smdiff__balimg--bad { opacity: 0; }
.smdiff__balhover:hover .smdiff__balimg--good,
.smdiff__balhover:focus-visible .smdiff__balimg--good,
.smdiff__balhover:focus-within .smdiff__balimg--good { opacity: 1; }
/* La etiqueta flota por encima del mockup, no sobre la pantalla del
   teléfono — así se lee bien el cambio de estado sin taparse con el
   contenido de la captura al pasar el mouse. */
.smdiff__baltag {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(10,21,38,0.12);
  transition: opacity 320ms var(--ease-out);
}
.smdiff__baltag--bad { background: var(--paper); color: var(--chispa-roja); opacity: 1; }
.smdiff__baltag--good { background: var(--paper); color: var(--chispa-verde); opacity: 0; }
.smdiff__balhover:hover .smdiff__baltag--bad,
.smdiff__balhover:focus-within .smdiff__baltag--bad { opacity: 0; }
.smdiff__balhover:hover .smdiff__baltag--good,
.smdiff__balhover:focus-within .smdiff__baltag--good { opacity: 1; }
.smdiff__balhint {
  position: absolute;
  bottom: -34px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-mute);
  white-space: nowrap;
}
.smdiff__balhover:hover .smdiff__balhint,
.smdiff__balhover:focus-within .smdiff__balhint { opacity: 0; }
@media (max-width: 900px) {
  /* Mobile-first: primero el texto que da contexto, luego el mockup
     que lo demuestra, y al final los bullets de detalle — no el
     mockup antes que nadie sepa qué está mirando. También se centra
     todo, igual que el resto de los títulos de sección en mobile (acá
     quedaba a la izquierda por ser el único bloque de dos columnas). */
  .smdiff {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "media" "list";
    text-align: center;
  }
  .smdiff__copy .kicker { justify-content: center; }
  .smdiff__media { max-width: 380px; margin-inline: auto; }
  .smdiff__list {
    max-width: 440px;
    margin-inline: auto;
    text-align: left;
  }
}

/* ── Footer liviano ───────────────────────────────────────────── */
.smfoot { background: var(--navy); padding-block: var(--space-8); }
.smfoot__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
.smfoot__tag { font-size: var(--text-sm); color: rgba(255,255,255,0.7); }
.smfoot__links { display: flex; gap: var(--space-5); }
.smfoot__links a { font-size: var(--text-sm); color: rgba(255,255,255,0.85); transition: color 180ms var(--ease-out); }
.smfoot__links a:hover { color: #fff; }
.smfoot__copy { font-size: var(--text-xs); color: rgba(255,255,255,0.45); margin-top: var(--space-2); }

@media (prefers-reduced-motion: reduce) {
  .smpain__card:hover { transform: none; }
}