/* ═══════════════════════════════════════════════════════════════════
   VURA FX · efectos de la web (subconjunto del paquete Vura FX)
   Hoy (solo en los homes ES/EN, que son los que cargan este archivo):
     0) marco de la página: rieles verticales + líneas entre bloques con "+"
     1) diagrama de arquitectura que se dibuja con el scroll
     2) ejemplo de conversación en tarjetas isométricas, sobre fondo punteado
     3) fondo punteado de sección (estilo SaaS) — clase .fx-dots
     4) pie de página en tarjeta sobre un degradé suave con los colores del logo
   Reglas:
   - Aditivo: nada se oculta si el JS no corre. Los estados "apagados"
     solo existen bajo clases que pone el propio script.
   - Dos mundos: colores propios para oscuro (default) y [data-theme="light"].
   - prefers-reduced-motion: acotado a estas clases, no pisa el resto del sitio.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 0 · Marco de la página ───────────────────────────────────────── */
/* El contenido de las secciones arranca en max(24px, 5vw, (100vw-1200px)/2 + 24px).
   Los rieles van 32 px afuera de ese borde. */
:root { --fx-rail-x: max(0px, calc(5vw - 32px), calc((100vw - 1200px) / 2 - 8px)); }

/* La portada usaba otro padding (max(24px, 5vw)) y quedaba pegada al riel:
   se alinea con el resto de las secciones. */
.hero {
  padding-left: max(24px, max(5vw, calc((100vw - 1200px) / 2 + 24px)));
  padding-right: max(24px, max(5vw, calc((100vw - 1200px) / 2 + 24px)));
}

/* El cartel flotante "+847 consultas hoy" del mockup salía 36 px por fuera
   (right:-36px) y tocaba el riel derecho: se lo mete dentro del mockup. */
.hero .mockup-float-b { right: 12px; }

/* Sin la grilla de fondo: el marco pasa a ser la estructura visual. */
html[data-theme] body::before { display: none; }
/* La luz que sigue al puntero, solo en modo oscuro. */
html[data-theme="light"] body::after { display: none; }

/* Rieles verticales, por encima de las secciones que pintan su propio fondo. */
html::after {
  content: '';
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background-image: linear-gradient(var(--border), var(--border)), linear-gradient(var(--border), var(--border));
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: var(--fx-rail-x) 0, calc(100% - var(--fx-rail-x)) 0;
  /* Sobre la portada con video no se ven: vura-fx.js mueve --fx-rail-top para que
     arranquen apenas un tramo corto antes del "+" del final de la portada. */
  clip-path: inset(var(--fx-rail-top, 0px) 0 0 0);
}

/* Línea entre bloques y cruces en los cruces con los rieles (los inserta vura-fx.js). */
.fx-divider { position: relative; height: 0; z-index: 3; pointer-events: none; }
.fx-divider::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--border);
}
.fx-cross {
  position: absolute; top: 0; width: 13px; height: 13px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(var(--text-3), var(--text-3)) center / 1px 100% no-repeat,
    linear-gradient(var(--text-3), var(--text-3)) center / 100% 1px no-repeat;
}
.fx-cross.fx-l { left: calc(var(--fx-rail-x) + .5px); }
.fx-cross.fx-r { left: calc(100% - var(--fx-rail-x) - .5px); }

@media (max-width: 768px) {
  html::after, .fx-cross { display: none; }
}

/* ─── 1 · Diagrama de arquitectura que se dibuja ───────────────────── */
/* Solo con .fx-flow-on (lo pone vura-fx.js): sin JS se ve completo. */
.fx-flow-on .arch-node {
  opacity: .38;
  filter: saturate(.35);
  transform: translateY(6px);
  transition: opacity .5s cubic-bezier(.22,1,.36,1), filter .5s, transform .5s cubic-bezier(.22,1,.36,1);
}
.fx-flow-on .arch-node.fx-lit { opacity: 1; filter: none; transform: none; }

.fx-flow-on .arch-conn-line::after {
  content: '';
  position: absolute; left: 0; top: -0.5px; height: 2px; width: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--indigo), var(--indigo-l));
  transform: scaleX(var(--fx-fill, 0));
  transform-origin: left center;
}
[data-theme="light"] .fx-flow-on .arch-conn-line::after {
  background: linear-gradient(90deg, var(--indigo-cta), var(--indigo));
}
/* Los puntos que viajan aparecen recién cuando el tramo está completo. */
.fx-flow-on .arch-conn-line:not(.fx-done) .arch-conn-dot { visibility: hidden; }
.fx-flow-on .arch-connector .arch-conn-label { opacity: .4; transition: opacity .4s; }
.fx-flow-on .arch-connector.fx-done .arch-conn-label { opacity: 1; }

/* ─── 2 · Ejemplo en tarjetas isométricas (sección Demo) ───────────── */
.fx-deck-block { margin-top: 72px; }
.fx-deck-head { text-align: center; max-width: 620px; margin: 0 auto 24px; }
.fx-deck-head h3 {
  font-family: var(--f-head); font-weight: 300; font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  letter-spacing: -.02em; color: var(--text); margin: 6px 0 10px; text-wrap: balance;
}
.fx-deck-head p { color: var(--text-2); font-size: 14px; margin: 0; }

/* El módulo: tarjeta con fondo punteado que se desvanece hacia los bordes. */
.fx-scene {
  position: relative; width: 100%; max-width: 100%; height: var(--fx-scene-h, 600px);
  perspective: 1500px; perspective-origin: 50% 44%;
  overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg-card);
}
.fx-scene::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(165,180,252,.20) 1px, transparent 1.4px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 45%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 75% at 50% 45%, #000 35%, transparent 100%);
}
[data-theme="light"] .fx-scene::before {
  background-image: radial-gradient(rgba(79,70,229,.22) 1px, transparent 1.4px);
}

.fx-deck {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform-style: preserve-3d;
}
.fx-plate {
  position: absolute; left: -270px; top: -165px; width: 540px; height: 330px;
  border-radius: 26px; transform: translateZ(-42px);
  background: linear-gradient(150deg, rgba(24,24,34,.88), rgba(10,10,16,.5));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 50px 90px -46px rgba(0,0,0,.9);
}
.fx-pill {
  position: absolute; display: flex; align-items: center; gap: 9px; white-space: nowrap;
  font-family: var(--f-mono); font-size: 14px; font-weight: 400; letter-spacing: -.005em;
  padding: 11px 19px; border-radius: 12px; border: 1px solid currentColor;
  background: rgba(6,6,11,.9); transform-style: preserve-3d; will-change: transform;
  transition: transform .42s cubic-bezier(.22,1,.36,1), box-shadow .42s;
}
.fx-pill b { color: var(--text); font-weight: 500; }
.fx-c1 { color: #9ca3af; } .fx-c2 { color: #22d3ee; } .fx-c3 { color: #4ade80; }
.fx-c4 { color: #a78bfa; } .fx-c5 { color: #60a5fa; } .fx-c6 { color: #f59e0b; }

/* Modo claro: crema, bordes y textos más oscuros para que se lean. */
[data-theme="light"] .fx-plate {
  background: linear-gradient(150deg, rgba(255,253,247,.95), rgba(239,231,215,.7));
  border-color: var(--border);
  box-shadow: 0 40px 70px -40px rgba(70,58,36,.38);
}
[data-theme="light"] .fx-pill { background: rgba(255,253,247,.96); box-shadow: 0 10px 24px -14px rgba(70,58,36,.35); }
[data-theme="light"] .fx-c1 { color: #57534e; } [data-theme="light"] .fx-c2 { color: #0e7490; }
[data-theme="light"] .fx-c3 { color: #15803d; } [data-theme="light"] .fx-c4 { color: #6d28d9; }
[data-theme="light"] .fx-c5 { color: #1d4ed8; } [data-theme="light"] .fx-c6 { color: #b45309; }

/* Lista legible para lectores de pantalla (y respaldo sin JS). */
.fx-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Sin JS no hay tarjetas: se muestra la lista en su lugar. */
.fx-scene:not(.fx-ready) { display: none; }
.fx-deck-block:not(.fx-js) .fx-sr {
  position: static; width: auto; height: auto; margin: 16px auto 0; clip: auto; white-space: normal;
  max-width: 520px; color: var(--text-2); font-family: var(--f-mono); font-size: 13px; line-height: 2;
}

@media (max-width: 900px) {
  .fx-scene { --fx-scene-h: 440px; perspective: 1100px; }
  .fx-pill { font-size: 11px; padding: 8px 12px; border-radius: 10px; }
  .fx-plate { left: -170px; top: -120px; width: 340px; height: 240px; }
}

/* ─── 3 · Fondo punteado de sección (como el SaaS) ─────────────────── */
/* Trama que se desvanece arriba y abajo, con un brillo tenue arriba.
   Va detrás del contenido de la sección (z-index -1 dentro de su contexto). */
.fx-dots { isolation: isolate; }
.fx-dots::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(ellipse 60% 360px at 50% 0%, rgba(99,102,241,.14), transparent 70%),
    radial-gradient(rgba(165,180,252,.20) 1px, transparent 1.4px);
  background-size: 100% 100%, 20px 20px;
  background-repeat: no-repeat, repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 80%, transparent 100%);
}
[data-theme="light"] .fx-dots::before {
  background-image:
    radial-gradient(ellipse 60% 360px at 50% 0%, rgba(99,102,241,.08), transparent 70%),
    radial-gradient(rgba(79,70,229,.20) 1px, transparent 1.4px);
}

/* ─── 4 · Pie de página en tarjeta ─────────────────────────────────── */
footer.fx-footer { border-top: 0; overflow: hidden; padding-top: 80px; padding-bottom: 80px; isolation: isolate; }

/* Degradé que se mueve lento detrás de la tarjeta, con los colores del logo
   (muestreados de logo-icon.png): violeta profundo #6030c0, púrpura #9048a8,
   coral #d87878 y durazno #f09060. */
.fx-mesh { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fx-mesh i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(90px); will-change: transform;
}
.fx-mesh i:nth-child(1) { width: 52%; aspect-ratio: 1; left: -14%; top: 8%; background: #f09060; opacity: .42; animation: fx-drift1 26s ease-in-out infinite; }
.fx-mesh i:nth-child(2) { width: 56%; aspect-ratio: 1; right: -16%; top: -18%; background: #6030c0; opacity: .55; animation: fx-drift2 30s ease-in-out infinite; }
.fx-mesh i:nth-child(3) { width: 38%; aspect-ratio: 1; left: 34%; top: 30%; background: #9048a8; opacity: .3; animation: fx-drift3 22s ease-in-out infinite; }
[data-theme="light"] .fx-mesh i:nth-child(1) { background: #d89078; opacity: .34; }
[data-theme="light"] .fx-mesh i:nth-child(2) { background: #7848c0; opacity: .26; }
[data-theme="light"] .fx-mesh i:nth-child(3) { background: #d87878; opacity: .2; }
@keyframes fx-drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(10%,-8%) scale(1.1); } }
@keyframes fx-drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-9%,10%) scale(1.12); } }
@keyframes fx-drift3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-12%,-10%); } }

.fx-footer-card {
  position: relative; z-index: 1; max-width: 1200px; margin: 0 auto;
  border-radius: var(--r-xl); border: 1px solid rgba(255,255,255,.08);
  background: rgba(6,6,9,.9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  padding: 48px 44px 22px;
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.9);
}
[data-theme="light"] .fx-footer-card {
  background: rgba(255,253,247,.94);
  border-color: var(--border);
  box-shadow: 0 30px 70px -42px rgba(70,58,36,.4);
}
.fx-footer-card .footer-main { margin-bottom: 40px; }
/* La línea de abajo cruza la tarjeta de borde a borde. */
.fx-footer-card .footer-bottom { margin: 0 -44px; padding: 20px 44px 0; }

@media (max-width: 768px) {
  footer.fx-footer { padding: 48px 16px; }
  .fx-footer-card { padding: 32px 20px 18px; border-radius: 18px; }
  .fx-footer-card .footer-bottom { margin: 0 -20px; padding: 18px 20px 0; }
}

/* ─── 5 · Portada con video ────────────────────────────────────────── */
/* El video se esfuma por los cuatro lados sobre el fondo de la página, así que
   el texto sigue el tema (oscuro sobre crema, claro sobre negro). Arriba la frase,
   abajo el texto y los botones, y las manos que se tocan quedan en el medio.
   La portada va debajo del menú fijo, que queda transparente mientras está encima. */
nav { transition: background-color .35s ease, border-color .35s ease, backdrop-filter .35s ease; }
body.fx-nav-sobre nav {
  background: transparent !important;
  border-bottom-color: transparent !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: none !important;
}
.hero.fx-hero {
  padding: 0; display: block; overflow: hidden;
  min-height: 100svh;
  margin-top: -60px;   /* sube debajo del menú fijo (el body reserva 60 px) */
  background: var(--bg);
}
.fx-hero-media {
  position: absolute; inset: 0; z-index: 0; opacity: .88;
  /* Esfumado: se desvanece a los costados y arriba/abajo (intersección de las dos máscaras). */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 20%, #000 54%, transparent 78%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 20%, #000 54%, transparent 78%);
  mask-composite: intersect;
}
[data-theme="light"] .fx-hero-media { opacity: .78; }
.fx-hero-poster, .fx-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
}
.fx-hero-video { opacity: 0; transition: opacity .7s ease; }
.fx-hero.fx-playing .fx-hero-video { opacity: 1; }
.fx-hero-veil { display: none; }   /* el esfumado reemplaza al velo oscuro */
/* Trama de puntos encima del video, con esfumado circular: se ve más en el
   centro (donde se tocan los dedos) y se apaga hacia afuera. Va entre el video
   (z-index 0, antes en el DOM) y el texto (z-index 1). */
.hero.fx-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(199,210,254,.42) 1.1px, transparent 1.6px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(circle at 50% 44%, #000 0%, rgba(0,0,0,.55) 22%, transparent 48%);
  mask-image: radial-gradient(circle at 50% 44%, #000 0%, rgba(0,0,0,.55) 22%, transparent 48%);
}
[data-theme="light"] .hero.fx-hero::after {
  background-image: radial-gradient(rgba(224,231,255,.5) 1.1px, transparent 1.6px);
}

.fx-hero-content {
  position: relative; z-index: 1; min-height: inherit;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  text-align: center; color: var(--text);
  padding: calc(80px + clamp(16px, 4vh, 48px)) max(24px, max(5vw, calc((100vw - 1200px) / 2 + 24px))) clamp(24px, 4.5vh, 44px);
}
/* Etiqueta en chip translúcido: en modo día, con color terciario y sobre el borde
   gris del video, casi no se leía. Así se lee sobre cualquier parte del video. */
.fx-hero-eyebrow {
  display: inline-flex; align-items: center;
  font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text); padding: 7px 14px; border-radius: 999px;
  background: rgba(10,10,14,.55); border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
[data-theme="light"] .fx-hero-eyebrow {
  background: rgba(255,253,247,.82); border-color: var(--border);
}
/* Halo del color de fondo detrás del texto: se lee aunque pase por encima del video. */
/* Solo en el texto chico: en la frase grande el halo se veía como un brillo difuso anticuado. */
.fx-hero-h1, .fx-hero-sub, .fx-hero-scroll { text-shadow: 0 0 18px var(--bg), 0 0 6px var(--bg); }
.fx-hero-claim {
  position: relative; display: inline-block;
  /* Mayúsculas y minúsculas, peso 500 y letras juntas: las mayúsculas finas y
     espaciadas (Inter 200 + tracking abierto) se leían como una web de 2015. */
  font-family: var(--f-head); font-weight: 500; text-transform: none;
  font-size: clamp(3rem, 7.2vw, 6.4rem); line-height: .95; letter-spacing: -0.045em;
  margin: 14px 0 26px; color: var(--text); text-wrap: balance;
}
/* Línea con los colores del logo debajo de la frase. */
.fx-hero-claim::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: -12px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #f09060 22%, #9048a8 50%, #6030c0 78%, transparent);
}
/* Palabra destacada de la frase con el mismo degradé de los títulos del sitio
   (.h1-grad): claro en oscuro, índigo profundo en claro. El padding de abajo
   agranda la caja del fondo para que el recorte no corte la "j". */
.fx-acento, .fx-aurora {
  background-image: linear-gradient(120deg, #f4a27e, #d9a4f5, #a5b4fc, #818cf8, #c48ae0, #f4a27e);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: fx-aurora 9s ease-in-out infinite;
}
.fx-acento { padding-bottom: .14em; margin-bottom: -.14em; }
/* Aurora con los colores del logo (durazno, púrpura, índigo); en claro, más profundos para contraste. */
[data-theme="light"] .fx-acento, [data-theme="light"] .fx-aurora {
  background-image: linear-gradient(120deg, #cf6038, #8b3fb8, #4f46e5, #6d28d9, #c0507a, #cf6038);
}
@keyframes fx-aurora { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
/* Entra entera, sin transform (un transform rompería el recorte del degradé). */
/* La palabra lleva también la aurora: si no se lista acá, esta regla la pisa. */
.fx-letters-on .fx-acento-in {
  opacity: 0; animation: fx-acento-in .95s ease forwards, fx-aurora 9s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 45ms + 250ms), 0s;
}
@keyframes fx-acento-in { from { opacity: 0; filter: blur(14px); } to { opacity: 1; filter: blur(0); } }
.fx-hero-h1 {
  font-family: var(--f-head); font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 200;
  line-height: 1.35; letter-spacing: -0.012em; color: var(--text); max-width: 34ch;
  margin: 6px auto 0; text-wrap: balance;
}
.fx-hero-sub {
  font-size: 15px; line-height: 1.7; color: var(--text-2); max-width: 560px;
  margin: 0 auto 22px; font-weight: 300; text-wrap: balance;
}
.fx-hero .hero-ctas { justify-content: center; margin-bottom: 20px; }
.fx-hero-scroll {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .04em; color: var(--text-3); text-decoration: none;
  transition: color .2s;
}
.fx-hero-scroll:hover { color: var(--text); }
.fx-hero-scroll span { display: inline-block; animation: fx-bajar 2.2s ease-in-out infinite; }
@keyframes fx-bajar { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Entrada de la frase letra por letra (solo con .fx-letters-on, que pone el JS). */
.fx-word { display: inline-block; white-space: nowrap; }
.fx-letters-on .fx-ch {
  display: inline-block; opacity: 0;
  animation: fx-ch-in .95s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--i, 0) * 45ms + 250ms);
}
@keyframes fx-ch-in {
  0% { opacity: 0; filter: blur(16px); transform: translateY(.4em) scale(1.12); }
  60% { opacity: 1; }
  100% { opacity: 1; filter: blur(0); transform: none; }
}
/* La línea se dibuja justo cuando las manos se tocan (~3 s). */
.fx-letters-on .fx-hero-claim::after {
  transform: scaleX(0); transform-origin: center;
  animation: fx-linea 1.2s cubic-bezier(.22,1,.36,1) 2.6s forwards;
}
@keyframes fx-linea { to { transform: scaleX(1); } }
.fx-letters-on .fx-hero-h1, .fx-letters-on .fx-hero-eyebrow {
  opacity: 0; animation: fx-aparecer .8s ease forwards;
}
.fx-letters-on .fx-hero-eyebrow { animation-delay: .1s; }
.fx-letters-on .fx-hero-h1 { animation-delay: 1.2s; }
@keyframes fx-aparecer { to { opacity: 1; } }

/* Frase debajo de los dedos (pedido de Iván): la etiqueta queda arriba y la frase,
   el título, el texto y los botones bajan juntos, centrados bajo el toque.
   display:contents hace que los hijos de los dos bloques sean una sola columna. */
.fx-hero-top, .fx-hero-bottom { display: contents; }
.fx-hero-content { justify-content: flex-start; }
.fx-hero-claim { margin-top: auto; margin-bottom: 18px; font-size: clamp(2.8rem, 6vw, 5.6rem); }
.fx-hero-h1 { max-width: none; margin-top: 0; }
.fx-hero-sub { margin-top: 16px; margin-bottom: 18px; }
.fx-hero .hero-ctas { margin-bottom: 16px; }
/* Botones de la portada más chicos: tamaño btn-md del sitio en vez de btn-lg. */
.fx-hero .hero-ctas .btn-lg { padding: 10px 20px; font-size: 14px; }

@media (max-width: 768px) {
  .fx-hero-claim { font-size: 2.6rem; margin-bottom: 14px; }
  .fx-hero-h1 { font-size: 1.05rem; }
  .fx-hero-sub { font-size: 13.5px; margin-top: 10px; margin-bottom: 14px; }
}

@media (max-width: 768px) {
  .hero.fx-hero { min-height: 100svh; }
  .fx-hero-content { padding: calc(64px + 24px) 20px 24px; }
  .fx-hero-media {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 22%, #000 52%, transparent 74%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 22%, #000 52%, transparent 74%);
  }
  .fx-hero-sub { font-size: 14px; }
}

/* Sticky: overflow-x:hidden en html/body los vuelve contenedores de scroll y cancela
   position:sticky. clip recorta igual lo que se sale de costado, sin romperlo. */
/* ─── 7 · Rayo de luz y destello cuando se tocan los dedos ─────────── */
/* Va dentro de la capa del video (hereda su esfumado): un rayo blanco baja desde
   arriba hasta el punto de contacto y ahí abre un destello en forma de estrella.
   vura-fx.js calcula el punto (--fx-toque-x/y) según cómo encuadra el video y lo
   dispara con el tiempo real del video, no con un temporizador. */
.fx-toque { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fx-rayo {
  position: absolute; left: var(--fx-toque-x, 50%); top: 0;
  width: clamp(2px, .16vw, 4px); height: var(--fx-toque-y, 44%);
  transform: translateX(-50%) scaleY(0); transform-origin: top center; opacity: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 40%, #fff 100%);
  box-shadow: 0 0 12px 2px rgba(255,255,255,.9), 0 0 40px 10px rgba(199,210,254,.55), 0 0 90px 24px rgba(129,140,248,.3);
}
/* El tamaño de la estrella acompaña el ancho de pantalla: fija en px se perdía en monitores grandes. */
.fx-destello {
  --fx-estrella: clamp(260px, 26vw, 620px);
  position: absolute; left: var(--fx-toque-x, 50%); top: var(--fx-toque-y, 44%);
  width: var(--fx-estrella); height: var(--fx-estrella); opacity: 0;
  transform: translate(-50%, -50%) scale(.2);
  background:
    radial-gradient(circle, #fff 0%, #fff 4%, rgba(238,242,255,.85) 9%, rgba(199,210,254,.45) 20%, rgba(129,140,248,0) 46%),
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.5) 30%, #fff 50%, rgba(255,255,255,.5) 70%, transparent 100%) center / 100% 3px no-repeat,
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,.5) 30%, #fff 50%, rgba(255,255,255,.5) 70%, transparent 100%) center / 3px 100% no-repeat;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.8)) drop-shadow(0 0 28px rgba(165,180,252,.6));
}
/* Rayos diagonales, más cortos y finos: completan la estrella de 8 puntas. */
.fx-destello::after {
  content: ''; position: absolute; inset: 24%;
  transform: rotate(45deg);
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.85) 50%, transparent 100%) center / 100% 2px no-repeat,
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,.85) 50%, transparent 100%) center / 2px 100% no-repeat;
}
.fx-toque.fx-on .fx-rayo { animation: fx-rayo 640ms cubic-bezier(.55,0,.85,.35) forwards; }
@keyframes fx-rayo {
  0% { opacity: 1; transform: translateX(-50%) scaleY(0); }
  72% { opacity: 1; transform: translateX(-50%) scaleY(1); }
  100% { opacity: 0; transform: translateX(-50%) scaleY(1); }
}
.fx-toque.fx-on .fx-destello { animation: fx-destello 1800ms cubic-bezier(.22,1,.36,1) 460ms forwards; }
@keyframes fx-destello {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.15) rotate(0deg); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(4deg); }
  38% { opacity: .9; transform: translate(-50%, -50%) scale(1.15) rotate(10deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6) rotate(24deg); }
}
@media (max-width: 768px) { .fx-destello { --fx-estrella: 200px; } }
@media (prefers-reduced-motion: reduce) { .fx-toque { display: none; } }

@supports (overflow-x: clip) {
  html, body { overflow-x: clip !important; }
}

/* ─── 6 · Paso a paso del ejemplo (tarjetas + texto al costado) ─────── */
/* Sin JS: la lista de pasos se lee completa y no hay tarjetas.
   Con JS (.fx-js en el bloque): el bloque se estira y queda fijo mientras
   se baja; cada tarjeta se enciende en orden y su paso se escribe al costado. */
.fx-deck-sticky {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px; align-items: center;
}
.fx-js .fx-deck-scroll { position: relative; height: 230vh; }
.fx-js .fx-deck-sticky { position: sticky; top: calc(80px + 5vh); }
.fx-deck-sticky .fx-scene { --fx-scene-h: 560px; }

.fx-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fx-step {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 12px 14px; border-radius: 12px; border: 1px solid transparent;
  transition: opacity .45s ease, background-color .45s ease, border-color .45s ease;
}
.fx-step-n { font-family: var(--f-mono); font-size: 11px; color: var(--text-3); padding-top: 2px; letter-spacing: .04em; }
.fx-step b { display: block; font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 3px; }
.fx-step p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); min-height: 1.55em; }

.fx-js .fx-step { opacity: .3; }
.fx-js .fx-step.fx-on { opacity: .72; }
.fx-js .fx-step.fx-actual { opacity: 1; background: var(--bg-card); border-color: var(--border); }
.fx-js .fx-step.fx-actual .fx-step-n { color: var(--indigo); }
.fx-step p .fx-cursor {
  display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: -2px;
  background: var(--indigo); animation: fx-parpadeo 1s steps(1) infinite;
}
@keyframes fx-parpadeo { 50% { opacity: 0; } }

/* Tarjetas: apagadas hasta su paso; la actual se destaca con su propio color. */
.fx-stepping .fx-pill { opacity: .26; filter: saturate(.25); transition: opacity .45s ease, filter .45s ease, transform .42s cubic-bezier(.22,1,.36,1), box-shadow .42s; }
.fx-stepping .fx-pill.fx-on { opacity: 1; filter: none; }
.fx-stepping .fx-pill.fx-actual { box-shadow: 0 0 0 1px currentColor, 0 16px 36px -18px currentColor; }

@media (max-width: 900px) {
  .fx-deck-sticky { grid-template-columns: 1fr; gap: 12px; }
  .fx-deck-sticky .fx-scene { --fx-scene-h: 380px; order: -1; }
  .fx-js .fx-deck-scroll { height: 200vh; }
  .fx-js .fx-deck-sticky { top: calc(64px + 2vh); }
  /* En celular solo se ve el paso actual, como leyenda debajo de las tarjetas. */
  .fx-js .fx-step:not(.fx-actual) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-flow-on .arch-node, .fx-pill { transition: none !important; }
  .fx-mesh i, .fx-hero-scroll span, .fx-step p .fx-cursor, .fx-acento, .fx-aurora { animation: none !important; }
  .fx-step, .fx-stepping .fx-pill { transition: none !important; }
}

/* ─── 8 · Filas de texto gigante que se mueven con el scroll ───────── */
/* Sin JS: la primera copia de cada fila queda quieta (se lee igual). */
/* line-height amplio: con overflow:hidden en la fila, uno justo cortaba las colas (p, y, g). */
.fx-vel { position: relative; z-index: 1; padding: 48px 0 56px; overflow: hidden; display: grid; gap: 0; }
.fx-vel-fila {
  overflow: hidden; white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.fx-vel-pista { display: inline-flex; will-change: transform; }
.fx-vel-grupo { display: inline-flex; align-items: center; flex-shrink: 0; }
.fx-vel-grupo span {
  font-family: var(--f-ui, 'Inter', sans-serif);
  font-size: clamp(2.6rem, 7.4vw, 7rem); line-height: 1.24; letter-spacing: -.045em;
  padding: 0 .32em; color: var(--text);
}
.fx-vel-a span { font-weight: 500; }
.fx-vel-b span { font-weight: 200; color: var(--text-2); }
.fx-vel-grupo i {
  flex-shrink: 0; display: block; width: clamp(8px, .9vw, 14px); aspect-ratio: 1; border-radius: 50%;
  background: linear-gradient(135deg, #f09060, #9048a8 55%, #6030c0);
}

/* ─── 9 · Placa con grilla animada (franja final) ──────────────────── */
.cta-band.fx-placa {
  width: min(1200px, calc(100% - 2 * max(24px, 5vw))); margin: 72px auto;
  padding: 96px max(24px, 5vw);
  border: 1px solid var(--border); border-radius: var(--r-xl, 24px);
  background: var(--bg-card); isolation: isolate;
}
.fx-grid-anim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; color: var(--text);
  -webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, #000 15%, transparent 85%);
  mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, #000 15%, transparent 85%);
}
.fx-grid-anim svg { display: block; width: 100%; height: 100%; }
.fx-grid-anim .fx-gl { stroke: currentColor; stroke-opacity: .1; }
.fx-grid-anim .fx-cel { fill: #818cf8; opacity: 0; transition: opacity 1.4s ease; }
[data-theme="light"] .fx-grid-anim .fx-cel { fill: #6366f1; }
.fx-grid-anim .fx-cel.fx-on { opacity: .32; }
@media (max-width: 768px) { .cta-band.fx-placa { margin: 48px auto; padding: 64px 22px; } }

/* ─── 10 · Placa con grilla que parpadea (Seguridad) ───────────────── */
.fx-placa-flicker {
  position: relative; isolation: isolate; overflow: hidden; margin-top: 64px;
  border: 1px solid var(--border); border-radius: var(--r-xl, 24px); background: var(--bg-card);
  padding: clamp(36px, 6vw, 72px); min-height: 280px; display: flex; align-items: center;
}
.fx-flicker {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 70%);
  mask-image: linear-gradient(90deg, transparent 8%, #000 70%);
}
.fx-placa-txt { max-width: 560px; }
.fx-placa-txt h3 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-weight: 400; letter-spacing: -.03em; line-height: 1.12; margin: 10px 0 14px; }
.fx-placa-txt p { color: var(--text-2); max-width: 470px; }
@media (max-width: 768px) { .fx-flicker { -webkit-mask-image: linear-gradient(180deg, transparent 20%, #000 100%); mask-image: linear-gradient(180deg, transparent 20%, #000 100%); } }

/* ─── 11 · Frase final gigante, debajo de la tarjeta del pie ───────── */
/* Sin JS se ve quieta y completa. Con JS (vura-fx.js) cada letra sube desde
   abajo con desenfoque a medida que se baja, y ya entera engorda con el mouse. */
@property --fx-au { syntax: '<number>'; inherits: true; initial-value: 0; }
.fx-frase-final {
  position: relative; z-index: 1; max-width: 1200px; margin: 64px auto 0;
  text-align: center; white-space: nowrap;
  font-family: var(--f-ui, 'Inter', sans-serif); font-weight: 400;
  font-size: min(7.1vw, 96px); line-height: 1.12; letter-spacing: .1em;
  /* El espaciado queda también después de la última letra: text-indent lo compensa para centrar. */
  text-indent: .1em; text-transform: uppercase;
  padding-bottom: .06em; color: var(--text); user-select: none;
}
.fx-frase-final .fx-k { display: inline-block; white-space: pre; }
/* La aurora va letra por letra: cada una muestra su tramo del mismo degradé
   (--fx-off = distancia al inicio de la palabra, --fx-w = ancho de la palabra),
   así las letras pueden moverse sin romper el recorte del texto. */
.fx-frase-final .fx-aurora {
  --fx-au-grad: linear-gradient(120deg, #f4a27e, #d9a4f5, #a5b4fc, #818cf8, #c48ae0, #f4a27e);
  background: none; color: inherit; -webkit-text-fill-color: currentColor;
  animation: fx-au 9s ease-in-out infinite;
}
[data-theme="light"] .fx-frase-final .fx-aurora {
  --fx-au-grad: linear-gradient(120deg, #cf6038, #8b3fb8, #4f46e5, #6d28d9, #c0507a, #cf6038);
  background: none;
}
.fx-frase-final .fx-aurora .fx-k {
  background-image: var(--fx-au-grad);
  background-size: calc(var(--fx-w, 1em) * 3) 100%;
  background-position: calc(var(--fx-au) * var(--fx-w, 1em) * -2 - var(--fx-off, 0px)) 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  padding-right: .02em;
}
@keyframes fx-au { 0%, 100% { --fx-au: 0; } 50% { --fx-au: 1; } }
@media (max-width: 768px) { .fx-frase-final { margin-top: 40px; } }
@media (prefers-reduced-motion: reduce) { .fx-frase-final .fx-aurora { animation: none; } }

/* ─── 12 · Antes / después con línea que se arrastra ────────────────── */
/* Dos capas iguales encimadas: "después" se recorta desde la izquierda hasta
   --fx-pos. Cada fila tiene dos mitades (mensaje del cliente | respuesta), así
   con la línea al medio se lee "sin respuesta" contra la respuesta del agente.
   Sin JS se ve mitad y mitad, quieto. */
.fx-compare {
  --fx-pos: 50%;
  --fx-mal: #f87171; --fx-bien: #34d399; --fx-acc: var(--indigo-l);
  position: relative; max-width: 980px; margin: 40px auto 0;
  border: 1px solid var(--border); border-radius: var(--r-lg, 20px); overflow: hidden;
  background: var(--bg-card); user-select: none; -webkit-user-select: none; touch-action: pan-y;
  box-shadow: 0 40px 80px -50px rgba(0,0,0,.7);
}
[data-theme="light"] .fx-compare {
  --fx-mal: #b91c1c; --fx-bien: #047857; --fx-acc: var(--indigo-cta);
  box-shadow: 0 30px 70px -44px rgba(70,58,36,.38);
}
.fx-cmp-lado { padding: 22px 26px 18px; background: var(--bg-card); }
.fx-cmp-despues {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--indigo) 7%, var(--bg-card));
  clip-path: inset(0 0 0 var(--fx-pos));
}
.fx-cmp-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
}
.fx-cmp-titulo { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13.5px; font-weight: 500; color: var(--text); }
.fx-cmp-chip {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid;
}
.fx-cmp-antes .fx-cmp-chip { color: var(--fx-mal); border-color: color-mix(in srgb, var(--fx-mal) 45%, transparent); background: color-mix(in srgb, var(--fx-mal) 10%, transparent); }
.fx-cmp-despues .fx-cmp-chip { color: var(--fx-bien); border-color: color-mix(in srgb, var(--fx-bien) 45%, transparent); background: color-mix(in srgb, var(--fx-bien) 10%, transparent); }
.fx-cmp-contador { font-size: 12.5px; font-weight: 500; color: var(--fx-mal); white-space: nowrap; }
.fx-cmp-contador.fx-ok { color: var(--fx-bien); }
.fx-cmp-punto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--fx-bien); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fx-bien) 20%, transparent); }

.fx-cmp-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center;
  height: 78px; border-bottom: 1px solid var(--border);
}
.fx-cmp-fila:last-of-type { border-bottom: 0; }
.fx-cmp-cli { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; }
.fx-cmp-av {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 500; color: var(--text-2); background: var(--bg-nest); border: 1px solid var(--border);
}
.fx-cmp-despues .fx-cmp-av { color: var(--fx-acc); background: color-mix(in srgb, var(--indigo) 14%, transparent); border-color: var(--border-h); }
.fx-cmp-txt { min-width: 0; }
.fx-cmp-nom { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; }
.fx-cmp-hora { font-size: 11.5px; font-weight: 400; color: var(--text-3); }
.fx-cmp-antes .fx-cmp-hora { color: var(--fx-mal); }
.fx-cmp-despues .fx-cmp-hora { color: var(--fx-bien); }
.fx-cmp-msg { margin-top: 3px; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-cmp-badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 600; color: #fff; background: #dc2626;
}
.fx-cmp-res { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 0; }
.fx-cmp-sin { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.fx-cmp-sin.fx-cmp-perdida { color: var(--fx-mal); font-weight: 500; }
.fx-cmp-burbuja {
  max-width: 100%; padding: 7px 12px; border-radius: 14px 14px 4px 14px;
  font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: color-mix(in srgb, var(--indigo) 20%, var(--bg-card)); border: 1px solid var(--border-h);
}
[data-theme="light"] .fx-cmp-burbuja { background: color-mix(in srgb, var(--indigo) 11%, #fff); }
.fx-cmp-estado { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; color: var(--fx-bien); white-space: nowrap; }
.fx-cmp-pie {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-2);
}
.fx-cmp-pie b { font-weight: 500; }
.fx-cmp-antes .fx-cmp-pie b { color: var(--fx-mal); }
.fx-cmp-despues .fx-cmp-pie b { color: var(--fx-bien); }

/* La línea: degradé con los colores del logo y perilla que se arrastra. */
.fx-cmp-linea {
  position: absolute; top: 0; bottom: 0; left: var(--fx-pos); z-index: 2;
  width: 44px; margin-left: -22px; cursor: ew-resize; touch-action: none; outline: none;
}
.fx-cmp-linea::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, transparent, #f09060 16%, #9048a8 50%, #6366f1 84%, transparent);
  box-shadow: 0 0 18px 2px rgba(144,72,168,.45);
}
.fx-cmp-perilla {
  position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; translate: -50% -50%;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--border-h); color: var(--text);
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.55); transition: scale .2s ease;
}
.fx-cmp-linea:hover .fx-cmp-perilla, .fx-compare.fx-arrastrando .fx-cmp-perilla { scale: 1.1; }
.fx-cmp-linea:focus-visible .fx-cmp-perilla { outline: 2px solid var(--fx-acc); outline-offset: 3px; }
.fx-cmp-nota { text-align: center; margin-top: 14px; font-size: 12px; color: var(--text-3); }

@media (max-width: 640px) {
  .fx-cmp-lado { padding: 16px 12px 12px; }
  .fx-cmp-fila { gap: 14px; height: 96px; }
  .fx-cmp-cli { grid-template-columns: minmax(0, 1fr); }
  .fx-cmp-av, .fx-cmp-sub, .fx-cmp-hora { display: none; }
  .fx-cmp-nom { font-size: 13px; }
  .fx-cmp-msg, .fx-cmp-burbuja {
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    font-size: 12px; line-height: 1.35;
  }
  .fx-cmp-burbuja { padding: 6px 9px; border-radius: 12px 12px 4px 12px; }
  .fx-cmp-sin, .fx-cmp-estado { font-size: 10.5px; white-space: normal; text-align: right; }
  .fx-cmp-pie { font-size: 11.5px; }
}

/* ─── 13 · Resaltado con puntero ───────────────────────────────────── */
/* vura-fx.js agrega el recuadro y el puntero; al entrar en pantalla el recuadro
   se dibuja en diagonal y el puntero acompaña la esquina. Sin JS: texto normal. */
.fx-resaltar { position: relative; display: inline-block; padding: 0 .16em; }
.fx-res-caja {
  position: absolute; inset: .02em 0 -.06em; pointer-events: none;
  border: 1.5px solid var(--indigo-l); border-radius: 4px; background: rgba(129,140,248,.07);
  clip-path: inset(0 100% 100% 0);
  transition: clip-path .95s cubic-bezier(.65,0,.35,1) .55s;
}
[data-theme="light"] .fx-res-caja { border-color: var(--indigo-cta); background: rgba(79,70,229,.06); }
.fx-res-puntero {
  position: absolute; left: 0; top: 0; width: .46em; height: .46em; min-width: 16px; min-height: 16px;
  color: var(--indigo-l); pointer-events: none; opacity: 0;
  transition: left .95s cubic-bezier(.65,0,.35,1) .55s, top .95s cubic-bezier(.65,0,.35,1) .55s, opacity .25s ease .55s;
}
[data-theme="light"] .fx-res-puntero { color: var(--indigo-cta); }
.fx-res-puntero svg { display: block; width: 100%; height: 100%; translate: -12% -12%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.fx-resaltar.fx-on .fx-res-caja { clip-path: inset(0 0 0 0); }
.fx-resaltar.fx-on .fx-res-puntero { left: 100%; top: 100%; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fx-res-caja, .fx-res-puntero { transition: none; } }

/* ─── 14 · Proceso con líneas que se dibujan (efecto Gemini) ──────── */
/* Sin JS: bloque normal con las líneas completas y los 6 pasos visibles.
   Con JS (.fx-js): la sección se estira, queda fija en pantalla y el scroll
   dibuja las líneas hasta el núcleo y va encendiendo los pasos. */
.fx-gem {
  --fx-gem-pad: max(24px, max(5vw, calc((100vw - 1200px) / 2 + 24px)));
  --g1: #f4a27e; --g2: #e58c93; --g3: #c084fc; --g4: #8b7cf6; --g5: #a5b4fc;
  position: relative; background: var(--bg);
}
[data-theme="light"] .fx-gem { --g1: #e0784a; --g2: #c65a6a; --g3: #8b3fb8; --g4: #5b3cc4; --g5: #4f46e5; }
.fx-gem-sticky { display: flex; flex-direction: column; padding: 88px var(--fx-gem-pad) 56px; }
.fx-gem.fx-js { height: 400vh; }
.fx-gem.fx-js .fx-gem-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; box-sizing: border-box; overflow: hidden; }
.fx-gem-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.fx-gem-top .section-title { margin-bottom: 0; }
.fx-gem-contador { font-family: var(--f-mono); font-size: 13px; letter-spacing: .12em; color: var(--text-3); white-space: nowrap; }
.fx-gem-contador b { color: var(--indigo-l); font-weight: 500; }
[data-theme="light"] .fx-gem-contador b { color: var(--indigo-cta); }

.fx-gem-lienzo { position: relative; flex: 1; min-height: 240px; margin: 12px calc(-1 * var(--fx-gem-pad)); }
.fx-gem-lienzo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-gem-l, .fx-gem-b { fill: none; stroke-linecap: round; }
.fx-gem-l { stroke-width: 2.5; }
.fx-gem-brillo { filter: blur(7px); opacity: .5; }
.fx-gem-b { stroke-width: 9; }
.fx-gem.fx-js .fx-gem-l, .fx-gem.fx-js .fx-gem-b { stroke-dasharray: 1; stroke-dashoffset: 1; }

.fx-gem-nucleo {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1;
  display: flex; align-items: center; gap: 10px; padding: 9px 18px 9px 9px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--border);
  font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap;
  transition: box-shadow .6s ease, border-color .6s ease;
}
.fx-gem-nucleo img { width: 30px; height: 30px; display: block; }
.fx-gem-nucleo.fx-lleno {
  border-color: var(--border-h);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--indigo) 12%, transparent), 0 0 60px 8px rgba(144,72,168,.35);
}

.fx-gem-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; }
.fx-gem-paso { position: relative; padding-top: 16px; border-top: 1px solid var(--border); transition: opacity .5s ease; }
.fx-gem-paso::before {
  content: ''; position: absolute; left: 0; top: -1px; height: 2px; width: var(--fx-llenado, 0%);
  background: linear-gradient(90deg, #f09060, #9048a8, #6366f1);
}
.fx-gem.fx-js .fx-gem-paso { opacity: .32; }
.fx-gem.fx-js .fx-gem-paso.fx-hecho { opacity: .6; }
.fx-gem.fx-js .fx-gem-paso.fx-actual { opacity: 1; }
.fx-gem-num { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; color: var(--indigo-l); }
[data-theme="light"] .fx-gem-num { color: var(--indigo-cta); }
.fx-gem-paso h3 { margin: 8px 0 6px; font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--text); }
.fx-gem-paso p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }

@media (max-width: 900px) {
  .fx-gem { --fx-gem-pad: 20px; }
  .fx-gem.fx-js { height: 340vh; }
  .fx-gem-sticky { padding: 80px var(--fx-gem-pad) 36px; }
  .fx-gem-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .fx-gem-lienzo { min-height: 180px; }
  .fx-gem-pasos { grid-template-columns: 1fr; gap: 16px; }
  .fx-gem.fx-js .fx-gem-pasos { position: relative; min-height: 150px; }
  .fx-gem.fx-js .fx-gem-paso { position: absolute; left: 0; right: 0; top: 0; opacity: 0; }
  .fx-gem.fx-js .fx-gem-paso.fx-actual { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .fx-gem-paso, .fx-gem-nucleo { transition: none; } }

/* ─── 15 · Integraciones con haces animados hacia el hub ───────────── */
/* Íconos originales sobre círculos blancos; vura-fx.js dibuja una curva de
   cada ícono al hub y un pulso de luz que viaja por ella. Sin JS: solo íconos. */
.fx-haz {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(24px, 5vw, 80px); padding: 16px 0; min-height: 440px;
}
.fx-haz-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none; }
.fx-haz-col { position: relative; z-index: 1; display: grid; gap: 16px; }
/* Etiquetas del lado de afuera: las curvas salen del círculo hacia el hub sin cruzar el texto. */
.fx-haz-izq { justify-items: end; }
.fx-haz-der { justify-items: start; }
.fx-haz-nodo { display: flex; align-items: center; gap: 10px; }
.fx-haz-izq .fx-haz-nodo { flex-direction: row-reverse; }
.fx-haz-ico {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 8px 20px -10px rgba(0,0,0,.35);
  transition: scale .25s cubic-bezier(.22,1,.36,1);
}
.fx-haz-ico img, .fx-haz-ico svg { width: 26px !important; height: 26px !important; display: block; }
.fx-haz-nodo:hover .fx-haz-ico { scale: 1.12; }
.fx-haz-nodo > span { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.fx-haz-centro { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; }
.fx-haz-hub {
  position: relative; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--border-h);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--indigo) 10%, transparent), 0 20px 40px -18px rgba(79,70,229,.55);
}
.fx-haz-hub img { width: 54px; height: 54px; display: block; }
.fx-haz-hub::after {
  content: ''; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--indigo) 45%, transparent);
  animation: fx-hub 2.8s ease-out infinite;
}
@keyframes fx-hub { from { transform: scale(1); opacity: .8; } to { transform: scale(1.45); opacity: 0; } }
.fx-haz-centro > span { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; }
.fx-haz-base { fill: none; stroke: var(--border); stroke-width: 2; }
.fx-haz-pulso {
  fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 16 84;
  filter: drop-shadow(0 0 4px rgba(144,72,168,.55));
  animation: fx-haz var(--t, 3s) linear infinite; animation-delay: var(--d, 0s);
}
@keyframes fx-haz { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@media (max-width: 640px) {
  .fx-haz { min-height: 380px; gap: 18px; }
  .fx-haz-nodo > span:not(.fx-haz-ico) { display: none; }
  .fx-haz-ico { width: 44px; height: 44px; }
  .fx-haz-hub { width: 76px; height: 76px; }
  .fx-haz-hub img { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-haz-pulso { display: none; }
  .fx-haz-hub::after { animation: none; }
}

/* ─── 16 · Portada: hero parallax con pantallas del producto ──────── */
/* Viene de _pruebas/portadas.css (prueba B, elegida por Iván). Clases pp-*. */
/* Textos compartidos */
.pp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text); padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: color-mix(in srgb, var(--bg-card) 72%, transparent);
}
.pp-claim {
  font-family: var(--f-ui); font-weight: 500; font-size: clamp(2.8rem, 6vw, 5.6rem);
  line-height: 1.02; letter-spacing: -.045em; color: var(--text); margin: 0 0 12px; text-wrap: balance;
}
.pp-h1 { font-size: clamp(1.1rem, 1.9vw, 1.5rem); font-weight: 200; color: var(--text); letter-spacing: -.01em; margin: 0 0 14px; }
.pp-sub { max-width: 560px; color: var(--text-2); font-size: 15px; line-height: 1.6; margin: 0 0 26px; }
.pp-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.pp-ctas .btn-lg { padding: 10px 20px; font-size: 14px; }
.pp-scroll { margin-top: 26px; font-size: 13px; color: var(--text-3); text-decoration: none; }

/* Entrada de textos: solo con .pp-js (lo pone un script en el <head>), sin JS se ve todo. */
.pp-js .pp-sube {
  opacity: 0; transform: translateY(26px); filter: blur(10px);
  transition: opacity .9s ease, transform 1s cubic-bezier(.22,1,.36,1), filter .9s ease;
  transition-delay: var(--d, 0s);
}
.pp-js .pp-texto-on .pp-sube { opacity: 1; transform: none; filter: none; }

/* ─── B · HERO PARALLAX ───────────────────────────────────────────── */
.pp-parallax { position: relative; height: 290vh; margin-top: -60px; padding-top: 60px; overflow: hidden; background: var(--bg); isolation: isolate; }
.pp-parallax .pp-cabecera { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 14vh max(24px, 5vw) 0; }
.pp-parallax .pp-eyebrow { margin-bottom: 18px; }
.pp-parallax .pp-sub { max-width: 520px; }
.pp-plano { position: relative; z-index: 1; perspective: 1000px; margin-top: 40px; }
.pp-plano-in { transform-origin: 50% 0; will-change: transform, opacity; transform-style: preserve-3d; }
.pp-fila { display: flex; gap: 2.5rem; margin-bottom: 2.5rem; width: max-content; will-change: transform; }
.pp-fila-1, .pp-fila-3 { flex-direction: row-reverse; }

.pp-tile {
  width: 30rem; height: 19rem; flex-shrink: 0; position: relative; overflow: hidden;
  border-radius: 18px; border: 1px solid var(--border); background: var(--bg-card);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.85); transition: translate .35s cubic-bezier(.22,1,.36,1), border-color .35s;
}
[data-theme="light"] .pp-tile { box-shadow: 0 26px 50px -36px rgba(70,58,36,.45); }
.pp-tile:hover { translate: 0 -14px; border-color: var(--border-h); }
.pp-tile-bar { height: 36px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-2); white-space: nowrap; }
.pp-tile-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.pp-tile-bar b { margin-left: 8px; font-weight: 500; color: var(--text); }
.pp-tile-tag { margin-left: auto; font-size: 10.5px; color: var(--indigo-l); }
[data-theme="light"] .pp-tile-tag { color: var(--indigo-cta); }
.pp-tile-body { padding: 14px; display: grid; gap: 8px; align-content: start; }

/* Piezas de las mini pantallas */
.pp-b { height: 28px; max-width: 80%; display: flex; align-items: center; padding: 0 11px; border-radius: 13px 13px 13px 4px; font-size: 11.5px; color: var(--text-2); background: var(--bg-nest); border: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; justify-self: start; }
.pp-b.pp-out { justify-self: end; border-radius: 13px 13px 4px 13px; color: var(--text); background: color-mix(in srgb, var(--indigo) 22%, var(--bg-card)); border-color: var(--border-h); }
.pp-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pp-col { display: grid; gap: 6px; align-content: start; padding: 8px; min-height: 200px; border-radius: 10px; background: var(--bg-nest); }
.pp-col h6 { margin: 0 0 2px; font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.pp-card { padding: 6px 8px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border); font-size: 10.5px; line-height: 1.25; color: var(--text-3); }
.pp-card b { display: block; font-weight: 500; color: var(--text); }
.pp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pp-kpi { padding: 8px 10px; border-radius: 10px; background: var(--bg-nest); font-size: 10px; color: var(--text-3); }
.pp-kpi b { display: block; font-size: 19px; font-weight: 400; letter-spacing: -.02em; color: var(--text); }
.pp-barras { display: flex; align-items: flex-end; gap: 7px; height: 150px; padding-top: 8px; border-bottom: 1px solid var(--border); }
.pp-barras i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(to top, #6366f1, #a5b4fc); }
.pp-onda { display: flex; align-items: center; justify-content: center; gap: 3px; height: 92px; }
.pp-onda i { width: 4px; border-radius: 2px; background: linear-gradient(#f09060, #9048a8 60%, #6366f1); transform-origin: center; animation: pp-onda 1.1s ease-in-out infinite alternate; }
@keyframes pp-onda { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.pp-linea-t { padding: 7px 10px; border-radius: 8px; background: var(--bg-nest); font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-linea-t b { font-weight: 500; color: var(--text); }
.pp-cal { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.pp-cal em { font-style: normal; font-size: 10px; font-weight: 500; color: var(--text-3); text-align: center; }
.pp-cal span { height: 44px; padding: 5px; border-radius: 7px; background: var(--bg-nest); font-size: 9.5px; line-height: 1.2; color: var(--text-3); }
.pp-cal span.pp-t { color: var(--text); background: color-mix(in srgb, var(--indigo) 22%, transparent); border: 1px solid var(--border-h); }
.pp-cal span.pp-t2 { color: var(--text); background: color-mix(in srgb, #10b981 18%, transparent); border: 1px solid rgba(16,185,129,.35); }
.pp-flujo { position: relative; height: 230px; }
.pp-flujo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pp-flujo path { fill: none; stroke: var(--border-h); stroke-width: 1.5; }
.pp-nodo { position: absolute; translate: 0 -50%; padding: 7px 11px; border-radius: 9px; border: 1px solid var(--border-h); background: var(--bg-nest); font-size: 11px; color: var(--text); white-space: nowrap; }
.pp-nodo.pp-ia { background: color-mix(in srgb, var(--indigo) 20%, var(--bg-card)); }
.pp-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: 9px; background: var(--bg-nest); font-size: 11.5px; color: var(--text-2); white-space: nowrap; }
.pp-item span:first-child { overflow: hidden; text-overflow: ellipsis; }
.pp-est { flex-shrink: 0; font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 999px; color: #34d399; border: 1px solid rgba(52,211,153,.35); }
.pp-est.pp-pend { color: #fbbf24; border-color: rgba(251,191,36,.35); }
[data-theme="light"] .pp-est { color: #047857; border-color: rgba(4,120,87,.35); }
[data-theme="light"] .pp-est.pp-pend { color: #b45309; border-color: rgba(180,83,9,.35); }

@media (max-width: 768px) {
  .pp-parallax { height: 210vh; }
  .pp-parallax .pp-cabecera { padding-top: 10vh; }
  .pp-fila { zoom: .55; }
}
@media (prefers-reduced-motion: reduce) { .pp-onda i { animation: none; } }

/* ─── 17 · Arquitectura: líneas punteadas (estilo Supabase) + Sentinel + números ─── */
.arq { --arq-acc: #818cf8; --arq-linea: rgba(255,255,255,.16); --arq-ok: #34d399; margin-top: 48px; }
[data-theme="light"] .arq { --arq-acc: #4f46e5; --arq-linea: rgba(60,45,20,.24); --arq-ok: #047857; }
.arq-sentinel {
  position: relative; display: flex; align-items: center; gap: 14px; width: min(560px, 100%); margin: 0 auto;
  padding: 14px 18px; border-radius: 14px; background: var(--bg-card); box-shadow: inset 0 0 0 1px var(--border);
}
.arq-ico { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; color: var(--arq-acc); box-shadow: inset 0 0 0 1px var(--arq-linea); }
.arq-ico svg { width: 18px; height: 18px; }
.arq-sentinel b { display: block; font-size: 14px; font-weight: 500; color: var(--text); }
.arq-sentinel small { font-size: 12.5px; color: var(--text-3); }
.arq-estado { margin-left: auto; display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; color: var(--arq-ok); white-space: nowrap; }
.arq-estado i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.arq-lienzo { position: relative; margin-top: 22px; overflow: hidden; border-radius: 22px; background: var(--bg-card); box-shadow: inset 0 0 0 1px var(--border); }
.arq-lienzo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image: radial-gradient(var(--arq-linea) 1px, transparent 1.3px); background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 20%, transparent 90%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 20%, transparent 90%);
}
.arq-diagrama { position: relative; width: calc(100% - 64px); margin: 36px auto 54px; aspect-ratio: 1000 / 360; }
.arq-diagrama > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.arq-linea { fill: none; stroke: var(--arq-acc); stroke-width: 1.2; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; animation: arq-flujo 1.2s linear infinite; }
@keyframes arq-flujo { to { stroke-dashoffset: -18; } }
.arq-flecha circle, .arq-punta, .arq-nudo { fill: var(--bg-card); stroke: var(--arq-acc); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.arq-flecha path { fill: none; stroke: var(--arq-acc); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.arq-nudo-centro { fill: var(--arq-acc); }
.arq-nudo-anillo { fill: none; stroke: var(--arq-acc); stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: arq-anillo 2s ease-out infinite; }
@keyframes arq-anillo { from { transform: scale(.5); opacity: .7; } to { transform: scale(1.9); opacity: 0; } }
.arq-nodo {
  position: absolute; width: 6.4%; aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center;
  border-radius: 12px; color: var(--text); background: var(--bg); box-shadow: inset 0 0 0 1px var(--arq-linea);
}
.arq-nodo svg { width: 42%; height: 42%; }
.arq-nodo img { width: 60%; height: 60%; }
.arq-nodo span { position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; white-space: nowrap; font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; color: var(--text-3); }
.arq-stats { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.arq-stats::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--arq-linea) 15%, var(--arq-linea) 85%, transparent); }
.arq-stat { position: relative; padding: 32px 28px 26px; }
.arq-stat + .arq-stat::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: linear-gradient(transparent, var(--arq-linea), transparent); }
.arq-stat b { display: block; margin-bottom: 12px; font-family: var(--f-mono); font-size: 34px; font-weight: 300; letter-spacing: -.03em; line-height: 1; color: var(--text); }
.arq-stat b.ok { color: var(--arq-ok); }
.arq-stat b.acc { color: var(--arq-acc); }
.arq-stat span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.arq-stat i { position: relative; display: block; height: 2px; margin-top: 16px; overflow: hidden; border-radius: 2px; background: var(--border); }
.arq-stat i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, var(--c), transparent); }
.arq-nota { margin: 0; padding: 0 28px 20px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--text-3); }
@media (max-width: 760px) {
  .arq-diagrama { width: calc(100% - 28px); margin: 24px auto 28px; }
  .arq-nodo { border-radius: 7px; }
  .arq-nodo span, .arq-estado { display: none; }
  .arq-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arq-stat:nth-child(3)::before { display: none; }
  .arq-stat { padding: 24px 20px 20px; }
  .arq-stat b { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .arq-linea, .arq-nudo-anillo { animation: none; } }

/* ─── 18 · Casos de uso, uno por vez, con íconos pixelados apilados ─── */
.fx-px { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; width: 56%; }
.fx-px i { aspect-ratio: 1; border-radius: 2px; }
.fx-px i.a { background: var(--p1); } .fx-px i.b { background: var(--p2); } .fx-px i.c { background: var(--p3); }
.fx-px i.d { background: var(--border-h); opacity: .6; }
.fx-casos-chat p { width: fit-content; max-width: 92%; margin: 0 0 10px; padding: 10px 14px; font-size: 14px; line-height: 1.45; }
.fx-casos-chat .in { color: var(--text-2); background: var(--bg-nest); border-radius: 14px 14px 14px 4px; }
.fx-casos-chat .out {
  margin-left: auto; color: var(--text); border-radius: 14px 14px 4px 14px;
  background: linear-gradient(135deg, rgba(240,144,96,.16), rgba(144,72,168,.16) 45%, rgba(99,102,241,.24));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
[data-theme="light"] .fx-casos-chat .out { box-shadow: inset 0 0 0 1px rgba(79,70,229,.14); }
.fx-casos {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center;
  margin-top: 44px; padding: 56px; overflow: hidden; border-radius: 26px; background: var(--bg-card); box-shadow: inset 0 0 0 1px var(--border);
}
.fx-casos::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .6;
  background-image: radial-gradient(var(--border-h) 1px, transparent 1.3px); background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 50% 50%, #000 20%, transparent 90%);
  mask-image: radial-gradient(ellipse 70% 75% at 50% 50%, #000 20%, transparent 90%);
}
.fx-casos-pila { position: relative; width: 100%; max-width: 320px; aspect-ratio: 1; justify-self: center; }
.fx-casos-tile {
  position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: 24px;
  background: var(--bg-nest); box-shadow: inset 0 0 0 1px var(--border), 0 30px 60px -40px rgba(0,0,0,.8);
  transition: transform .7s cubic-bezier(.22,1,.36,1), opacity .7s ease, filter .7s ease;
}
/* Las de atrás son opacas y sin dibujo: solo asoman sus bordes rotados (con transparencia los pixeles se mezclaban). */
.fx-casos-tile:not(.activo) { transform: translateY(12px) scale(.93) rotate(var(--rot)); filter: brightness(.82); }
.fx-casos-tile .fx-px { transition: opacity .5s ease; }
.fx-casos-tile:not(.activo) .fx-px { opacity: 0; }
.fx-casos-texto { position: relative; min-height: 250px; }
.fx-casos-rubro { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--indigo-l); }
[data-theme="light"] .fx-casos-rubro { color: var(--indigo-cta); }
.fx-casos-texto h3 { margin: 10px 0 24px; font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; color: var(--text); }
.fx-pal { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(4px); transition: opacity .45s ease, filter .45s ease, transform .45s ease; transition-delay: var(--dl, 0s); }
.fx-ver .fx-pal { opacity: 1; filter: none; transform: none; }
.fx-casos-nav { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.fx-casos-nav button { width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; border-radius: 50%; color: var(--text); background: var(--bg-nest); border: 1px solid var(--border-h); transition: transform .2s ease; }
.fx-casos-nav button:hover { transform: translateY(-2px); }
.fx-casos-num { margin-left: 8px; font-family: var(--f-mono); font-size: 12px; color: var(--text-3); }
@media (max-width: 800px) {
  .fx-casos { grid-template-columns: 1fr; gap: 28px; padding: 30px 20px; }
  .fx-casos-pila { max-width: 220px; }
  .fx-casos-texto { min-height: 280px; }
}
@media (prefers-reduced-motion: reduce) { .fx-pal, .fx-casos-tile { transition: none; } }

/* ─── 19 · Casos en marquesina 3D ─── */
.fx-m3 { position: relative; height: 560px; margin-top: 44px; overflow: hidden; border-radius: 28px; background: var(--bg-card); box-shadow: inset 0 0 0 1px var(--border); }
.fx-m3::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 45%, var(--bg-card) 100%); }
.fx-m3-plano { position: absolute; left: 50%; top: 50%; display: grid; grid-template-columns: repeat(4, 320px); gap: 22px; transform: translate(-50%, -50%) rotateX(55deg) rotateZ(-45deg); }
.fx-m3-col { display: flex; flex-direction: column; gap: 22px; animation: fx-m3 16s ease-in-out infinite alternate; }
.fx-m3-col:nth-child(even) { animation-direction: alternate-reverse; }
@keyframes fx-m3 { from { transform: translateY(-180px); } to { transform: translateY(180px); } }
.fx-caso { padding: 20px; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)), var(--bg); box-shadow: inset 0 0 0 1px var(--border); }
.fx-caso-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fx-mini { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: var(--bg-nest); box-shadow: inset 0 0 0 1px var(--border); }
.fx-mini .fx-px { width: 26px; gap: 1px; }
.fx-mini .fx-px i { border-radius: 1px; }
.fx-caso-cab small { display: block; margin-bottom: 3px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; color: var(--indigo-l); }
[data-theme="light"] .fx-caso-cab small { color: var(--indigo-cta); }
.fx-caso-cab b { font-size: 14px; font-weight: 500; letter-spacing: -.01em; color: var(--text); }
.fx-caso .fx-casos-chat p { font-size: 13px; padding: 8px 12px; }
@media (max-width: 760px) { .fx-m3 { height: 420px; } .fx-m3-plano { grid-template-columns: repeat(4, 270px); } }
@media (prefers-reduced-motion: reduce) { .fx-m3-col { animation: none; } }

/* ─── 20 · Texto que se revela con el mouse (SVG Mask Effect) ─── */
@property --fx-r { syntax: '<length>'; inherits: true; initial-value: 40px; }
.fx-mascara-sec { position: relative; padding: 96px max(24px, 5vw) 84px; text-align: center; }
/* Las dos frases van encimadas en la misma celda: el bloque toma el alto de la más larga. */
.fx-mascara { --fx-x: 50%; --fx-y: 50%; position: relative; display: grid; max-width: 1040px; margin: 0 auto; transition: --fx-r .45s cubic-bezier(.22,1,.36,1); }
.fx-mascara > p { grid-area: 1 / 1; display: grid; place-items: center; }
.fx-mascara p { margin: 0; padding: 36px 24px; font-size: clamp(1.9rem, 4.4vw, 3.6rem); font-weight: 500; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.fx-mascara-base { color: var(--text-3); }
.fx-mascara-base span { color: var(--text); }
.fx-mascara-revela {
  border-radius: 26px; color: #0b0b10;
  background: linear-gradient(120deg, #f09060, #d87878 30%, #9048a8 62%, #6366f1);
  -webkit-mask-image: radial-gradient(circle var(--fx-r) at var(--fx-x) var(--fx-y), #000 98%, transparent 100%);
  mask-image: radial-gradient(circle var(--fx-r) at var(--fx-x) var(--fx-y), #000 98%, transparent 100%);
}
.fx-mascara-revela span { color: #fff; }
.fx-mascara.fx-activa { --fx-r: 220px; }
.fx-mascara.fx-auto { --fx-r: 120px; }
.fx-mascara-pista { margin: 16px 0 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
@media (max-width: 760px) { .fx-mascara-sec { padding: 64px 20px 56px; } .fx-mascara p { padding: 24px 12px; } }

/* ─── 21 · Tarjetas Evervault en Seguridad (Aceternity) ─────────────── */
/* Caracteres "cifrados" con el degradé del logo alrededor del puntero; en táctil la luz recorre sola. */
.ev-sec {
  --ev-borde: rgba(255,255,255,.09); --ev-fondo: #08080c; --ev-letras: rgba(255,255,255,.92); --ev-tenue: rgba(255,255,255,.05);
  margin-top: 72px;
}
[data-theme="light"] .ev-sec { --ev-borde: rgba(60,45,20,.14); --ev-fondo: #fffdf8; --ev-letras: rgba(255,255,255,.96); --ev-tenue: rgba(60,45,20,.05); }
.ev-cabecera { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.ev-cabecera h3 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-weight: 400; letter-spacing: -.03em; line-height: 1.12; margin: 10px 0 12px; }
.ev-cabecera p { margin: 0; font-size: 14px; color: var(--text-2); }
.ev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }

/* Marco cuadrado con cruces en las esquinas, como el componente original */
.ev-marco { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--ev-borde); }
.ev-mas { position: absolute; width: 22px; height: 22px; color: var(--text-3); }
.ev-mas::before, .ev-mas::after { content: ''; position: absolute; background: currentColor; }
.ev-mas::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.ev-mas::after { top: 50%; left: 0; right: 0; height: 1px; }
.ev-tl { top: -11px; left: -11px; } .ev-tr { top: -11px; right: -11px; }
.ev-bl { bottom: -11px; left: -11px; } .ev-br { bottom: -11px; right: -11px; }

.ev-card {
  --x: 50%; --y: 50%;
  position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 24px; overflow: hidden;
  display: grid; place-items: center; background: var(--ev-fondo); isolation: isolate;
}
.ev-tenue, .ev-color, .ev-letras { position: absolute; inset: 0; margin: 0; pointer-events: none; }
.ev-tenue, .ev-letras {
  padding: 6px; font-family: var(--f-mono); font-size: 11px; line-height: 1.3; font-weight: 700;
  word-break: break-all; overflow: hidden;
}
.ev-tenue {
  color: var(--ev-tenue);
  -webkit-mask-image: linear-gradient(#000, transparent 85%); mask-image: linear-gradient(#000, transparent 85%);
}
.ev-color {
  background: linear-gradient(120deg, #f09060, #d87878 30%, #9048a8 60%, #6366f1);
  opacity: 0; transition: opacity .5s ease;
  -webkit-mask-image: radial-gradient(250px circle at var(--x) var(--y), #000, transparent);
  mask-image: radial-gradient(250px circle at var(--x) var(--y), #000, transparent);
}
.ev-letras {
  color: var(--ev-letras); mix-blend-mode: overlay; opacity: 0; transition: opacity .5s ease;
  -webkit-mask-image: radial-gradient(250px circle at var(--x) var(--y), #000, transparent);
  mask-image: radial-gradient(250px circle at var(--x) var(--y), #000, transparent);
}
.ev-card.ev-on .ev-color, .ev-card.ev-on .ev-letras { opacity: 1; }

.ev-centro { position: relative; z-index: 2; width: 58%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; }
.ev-centro::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--ev-fondo) 82%, transparent); filter: blur(12px);
}
.ev-centro span { position: relative; font-size: clamp(1.35rem, 2.3vw, 2rem); font-weight: 600; letter-spacing: -.03em; color: var(--text); }

.ev-marco h4 { margin: 4px 0 0; font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--text); }
.ev-marco p { margin: 0; font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--text-2); }
.ev-pill {
  align-self: flex-start; font-family: var(--f-mono); font-size: 11px; letter-spacing: .05em;
  padding: 3px 11px; border-radius: 999px; border: 1px solid var(--ev-borde); color: var(--text-2);
}

@media (max-width: 900px) {
  .ev-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; gap: 40px; }
}
@media (prefers-reduced-motion: reduce) { .ev-color, .ev-letras { transition: none; } }

/* ─── 22 · Chat de la demo: sugerencias (A), texto que rota y se borra en partículas (B), estilo nuevo (C) ─── */
.demo-inner .chat-card { position: relative; }
.demo-inner .chat-head { position: relative; border-bottom-color: transparent; }
.demo-inner .chat-head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--border) 14%, var(--border) 86%, transparent);
}
.demo-inner .chat-status-txt { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; }
.demo-inner .chat-body { background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.3px); background-size: 18px 18px; }
[data-theme="light"] .demo-inner .chat-body { background-image: radial-gradient(rgba(60,45,20,.1) 1px, transparent 1.3px); }
.demo-inner .msg.bot {
  border-color: transparent; border-radius: 14px 14px 14px 4px;
  background: linear-gradient(135deg, rgba(240,144,96,.12), rgba(144,72,168,.12) 45%, rgba(99,102,241,.18));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
[data-theme="light"] .demo-inner .msg.bot { box-shadow: inset 0 0 0 1px rgba(79,70,229,.14); }
.demo-inner .msg.user { border-color: transparent; border-radius: 14px 14px 4px 14px; background: var(--bg-nest); box-shadow: inset 0 0 0 1px var(--border); }

/* C · borde que brilla hacia el mouse */
.chat-brillo {
  position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from calc(var(--ang, 0deg) - 50deg), transparent 0deg, #f09060 35deg, #9048a8 55deg, #6366f1 75deg, transparent 110deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: var(--op, 0); transition: opacity .3s ease;
}

/* A · preguntas sugeridas */
.chat-sugerencias { display: flex; gap: 8px; overflow-x: auto; padding: 0 20px 12px; scrollbar-width: none; }
.chat-sugerencias::-webkit-scrollbar { display: none; }
.chat-sug {
  flex-shrink: 0; cursor: pointer; padding: 7px 12px; border-radius: 999px;
  font: 400 12px var(--f-ui); color: var(--text-2);
  background: color-mix(in srgb, var(--bg-nest) 80%, transparent); border: 1px solid var(--border);
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.chat-sug:hover { color: var(--text); border-color: var(--border-h); transform: translateY(-1px); }

/* B · texto del campo que rota y borrado en partículas */
.demo-inner .chat-input-row { position: relative; }
.chat-card.fx-chat-on #chat-field::placeholder { color: transparent; }
.chat-ph { position: absolute; overflow: hidden; pointer-events: none; font-family: var(--f-ui); font-size: 13px; color: var(--text-3); white-space: nowrap; transition: opacity .2s ease; }
.chat-ph.oculto { opacity: 0; }
.chat-ph span { position: absolute; left: 0; top: 0; animation: chat-ph-in .45s cubic-bezier(.22,1,.36,1) both; }
.chat-ph span.fuera { animation: chat-ph-out .35s ease forwards; }
@keyframes chat-ph-in { from { transform: translateY(12px); opacity: 0; filter: blur(4px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes chat-ph-out { to { transform: translateY(-12px); opacity: 0; filter: blur(4px); } }
.chat-vanish { position: absolute; z-index: 2; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .chat-ph span, .chat-ph span.fuera { animation: none; } }

/* ─── 23 · "VURAOS IA" del pie: 40 % más grande y un poco escondido bajo el borde ─── */
/* margin-bottom negativo = padding inferior del pie + lo que queda debajo de la línea base
   (~.34em) + ~10 % de la altura de las mayúsculas: el pie tiene overflow:hidden y lo recorta. */
/* Ronda 26: 30 % más grande y más arriba (queda apoyado en el borde con un recorte mínimo). */
.fx-frase-final { font-size: min(12.4vw, 174px); max-width: none; margin-bottom: calc(-80px - .26em); }
@media (max-width: 768px) { .fx-frase-final { margin-bottom: calc(-48px - .26em); } }

/* ─── 24 · Logo del menú 20 % más grande (45 → 54 px; celular 25 → 30 px) ─── */
.nav-logo img { height: 54px !important; }
@media (max-width: 768px) { .nav-logo img { height: 30px !important; max-width: 132px !important; } }
@media (max-width: 380px) { .nav-logo img { max-width: 108px !important; } }

/* ─── 25 · "VURAOS IA" del pie: entero y centrado (pedido de Iván) ─── */
/* Sin recorte: margin-bottom 0. Centrado con flex (así el texto también queda al medio si es más
   ancho que la caja); padding-left .1em compensa el espaciado que queda después de la última letra.
   Tope 11vw / 146px: con el espaciado, "VURAOS IA" mide ~7,25em y entra en el ancho del pie. */
/* Más cerca del borde de abajo sin cortar: resta el padding inferior del pie (80px / 48px en celular)
   y parte del espacio que queda debajo de la línea base, dejando ~18px de aire bajo las letras. */
.fx-frase-final { display: flex; justify-content: center; font-size: min(11vw, 146px); max-width: none; margin-bottom: calc(-62px - .24em); text-indent: 0; padding-left: .1em; padding-bottom: .04em; }
@media (max-width: 768px) { .fx-frase-final { margin-bottom: calc(-34px - .24em); } }