/* =========================================================
   DISEÑO UNIFICADO — lleva el lenguaje de las páginas de producto al resto del sitio.
   Se activa por página con el envoltorio .u (site.mjs → unified()):
   · fondo continuo de manchas de color (sin cortes entre secciones)
   · ilustración del encabezado que se endereza al hacer scroll + alertas flotantes
   · secciones oscuras como paneles redondeados con brillos
   · tarjetas blancas con sombra suave y encabezados centrados
   ========================================================= */

/* =========================================================
   NEGRITAS CON DEGRADADO — regla de todo el sitio.
   Toda negrita dentro de un título (h1–h4, .h2, .h1-sm) lleva el degradado de la marca.
   · FleTrack: azul índigo → violeta → malva → rosa empolvado.
   · Fondos oscuros: los mismos tonos en claro.
   · Páginas de producto: el degradado de su propia marca (proposal.css → .pv).
   Los títulos animados palabra por palabra (.w) llevan el degradado en cada palabra; main.js
   le pasa a cada una el ancho y la posición de la negrita completa (--gw, --gx) para que el
   degradado fluya continuo de la primera a la última palabra.
   ========================================================= */
:root {
  --fx-grad: linear-gradient(100deg, #4a5fcf 0%, #7368b2 45%, #8f7699 72%, #a57b86 100%);
  --fx-grad-dark: linear-gradient(100deg, #b6c3ff 0%, #cbc2f2 45%, #dcc3e0 72%, #efc6cf 100%);
}
:is(.dark, .dsplit, .footer, .plan--featured, .custom-plan, .pv-flow-sec, .pv-demo-sec, .pp-dark) { --fx-grad: var(--fx-grad-dark); }
.pv { --fx-grad: linear-gradient(100deg, color-mix(in srgb, var(--deep2) 92%, #000) 0%, color-mix(in srgb, var(--deep2) 50%, var(--glow)) 100%); }
.pv :is(.pv-flow-sec, .pv-demo-sec) { --fx-grad: linear-gradient(100deg, #fff 0%, var(--hi) 100%); }
:is(h1, h2, h3, h4, .h2, .h1-sm) :is(b, strong) {
  padding: 0 .1em .12em; margin: 0 -.1em -.12em;
  background-image: var(--fx-grad); background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
/* Títulos animados por palabra: el degradado va en cada palabra, continuo gracias a --gw / --gx */
:is(h1, h2, h3, h4, .h2, .h1-sm) :is(b, strong):has(.w) { background-image: none; padding: 0; margin: 0; }
:is(h1, h2, h3, h4, .h2, .h1-sm) :is(b, strong) .w {
  /* El espaciado negativo hace que la última letra sobresalga de la caja de la palabra; el
     degradado solo pinta dentro de la caja. Un margen interno compensado deja espacio sin mover el texto. */
  padding: 0 .12em .14em; margin: 0 -.12em -.14em;
  background-image: var(--fx-grad); background-repeat: no-repeat;
  background-size: var(--gw, 100%) 100%; background-position: calc(-1 * var(--gx, 0px)) 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}

/* ---------- Paletas ---------- */
.u {
  --pv-ink: #111316; --pv-mute: #4a4f58; --pv-line: rgba(17, 19, 22, .08);
  --ok: #16a34a; --warn: #d97706; --bad: #dc2626;
}
.u--fletrack { --g1: #dfe7f4; --g2: #f1e7ee; --g3: #f7d3b7; --g4: #e4ddfb; --deep: #14132b; --deep2: #2e2a5e; --glow: #4a5fcf; --glow2: #a57b86; --hi: #cbc2f2; --brand: #4a5fcf; --brand-soft: #eceefc; }
.u--norux    { --g1: #dbe4f7; --g2: #e6ecfb; --g3: #cdd9f5; --g4: #e9e6f8; --deep: #041438; --deep2: #061c56; --glow: #0437ad; --glow2: #3b6ef5; --hi: #9fb9ff; --brand: #0437ad; --brand-soft: #e7ecf8; }

/* ---------- Fondo continuo ---------- */
.u { position: relative; isolation: isolate; background: #f8f9fb; overflow-x: clip; }
.u-canvas { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.u-canvas i { position: absolute; width: min(1100px, 80vw); aspect-ratio: 1.35; border-radius: 50%; background: radial-gradient(closest-side, var(--c) 0%, transparent 100%); opacity: .95; }
.u-canvas i:nth-child(odd)  { left: -18%; }
.u-canvas i:nth-child(even) { right: -18%; }
.u-canvas i:nth-child(1)  { top: -4%;  --c: var(--g1); }
.u-canvas i:nth-child(2)  { top: 2%;   --c: var(--g2); }
.u-canvas i:nth-child(3)  { top: 12%;  --c: color-mix(in srgb, var(--hi) 45%, transparent); left: 20%; }
.u-canvas i:nth-child(4)  { top: 22%;  --c: var(--g4); }
.u-canvas i:nth-child(5)  { top: 33%;  --c: var(--g3); }
.u-canvas i:nth-child(6)  { top: 44%;  --c: var(--g2); }
.u-canvas i:nth-child(7)  { top: 55%;  --c: var(--g1); }
.u-canvas i:nth-child(8)  { top: 66%;  --c: var(--g3); }
.u-canvas i:nth-child(9)  { top: 77%;  --c: var(--g4); }
.u-canvas i:nth-child(10) { top: 86%;  --c: var(--g2); }

/* Las secciones ya no llevan fondo propio: se ve el lienzo continuo */
.u .bg-gradient, .u .hero, .u .phero { background: none !important; }
/* ---------- Encabezado: la ilustración se endereza con el scroll (proposal.js → --t) ---------- */
.u-stage { --t: 1; position: relative; width: 100%; perspective: 1800px; animation: media-in 1.2s var(--ease-out) .45s both; }
.u .hero > .u-stage { max-width: var(--max); }
/* Misma separación entre el texto del encabezado y la ilustración en todas las páginas */
.u .hero > .u-stage, .u .phero > .u-stage { margin-top: clamp(44px, 5vw, 72px); }
.u-stage > .hero__media, .u-stage > .banner {
  margin-top: 0; animation: none; transform-origin: 50% 0; will-change: transform;
  transform: rotateX(calc(var(--t) * 16deg)) scale(calc(1 - var(--t) * .05));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 50px 100px -40px rgba(17, 19, 22, .45), 0 20px 40px -30px rgba(17, 19, 22, .3);
}
.u .phero .u-stage { margin-inline: auto; }

/* ---------- Encabezados de sección centrados ---------- */
.u .shead--left { text-align: center; align-items: center; margin-inline: auto; }
.u .shead--left .w-text, .u .shead--left .h2 { margin-inline: auto; }
.u .shead--left .split { flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.u #soluciones > .container > .eyebrow, .u #soluciones > .container > .h2 { text-align: center; margin-inline: auto; }
.u #soluciones > .container > .split { flex-direction: column; align-items: center; gap: 22px; text-align: center; margin-top: 18px; }
.u #soluciones > .container > .split .lead { margin-inline: auto; }

/* ---------- Paneles oscuros redondeados con brillos ---------- */
.u .section.dark, .u .dsplit {
  position: relative; isolation: isolate; overflow: hidden;
  margin-inline: clamp(8px, 1.4vw, 24px); border-radius: clamp(28px, 3.6vw, 56px);
  background:
    radial-gradient(45% 60% at 0% 0%, color-mix(in srgb, var(--glow) 45%, transparent) 0%, transparent 70%),
    radial-gradient(40% 55% at 100% 100%, color-mix(in srgb, var(--glow2) 32%, transparent) 0%, transparent 70%),
    linear-gradient(160deg, var(--deep2) 0%, var(--deep) 62%);
}
.u .section.dark::before, .u .dsplit::before { /* retícula muy sutil */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%);
}
.u .section.dark .eyebrow, .u .dsplit .eyebrow { color: color-mix(in srgb, var(--hi) 80%, #fff); }
.u .section.dark .h2 b, .u .dsplit .h1-sm b { color: var(--hi); }
.u .dark .feature { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); border-radius: 26px; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .6); }
.u .dark .feature__icon { background: rgba(255, 255, 255, .12); color: var(--hi); }
/* Panel oscuro con texto centrado arriba y la plataforma abajo (como en productos) */
.u .dsplit { padding: clamp(64px, 7vw, 110px) clamp(20px, 5vw, 80px) 0; }
.u .dsplit__inner { grid-template-columns: 1fr; justify-items: center; gap: clamp(36px, 4vw, 56px); }
.u .dsplit__text { text-align: center; align-items: center; display: flex; flex-direction: column; max-width: 760px; }
.u .dsplit__text .lead { margin-inline: auto; }
.u .dsplit__media { width: min(1100px, 100%); border-radius: 22px 22px 0 0; overflow: hidden; box-shadow: 0 -20px 60px -30px rgba(0, 0, 0, .55); }

/* ---------- Banda de llamada a la acción: panel de cristal claro ---------- */
.u .cta-band {
  width: min(1240px, calc(100% - 2 * var(--gutter))); margin: clamp(24px, 4vw, 56px) auto; padding: clamp(56px, 7vw, 96px) 24px;
  border-radius: clamp(28px, 3.6vw, 48px); background: linear-gradient(135deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .5));
  border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 40px 90px -55px rgba(17, 19, 22, .45);
}

/* ---------- Tarjetas: blancas, redondeadas y con sombra suave ---------- */
.u .fbox, .u .hw, .u .bento__card, .u .sol-card, .u .plan:not(.plan--featured) {
  border-radius: 28px; border: 1px solid rgba(17, 19, 22, .06); box-shadow: 0 30px 60px -48px rgba(17, 19, 22, .45);
  transition: box-shadow .3s, transform .3s var(--ease-out);
}
.u .fbox:hover, .u .hw:hover { box-shadow: 0 34px 70px -44px rgba(17, 19, 22, .5); transform: translateY(-3px); }
.u .fbox .ibox { background: linear-gradient(140deg, var(--g1), var(--g2)); color: var(--brand); }

/* Botón flotante (estilos en proposal.css): aire para que no tape el footer */
.u .pv-sticky b { background: var(--pv-ink); }

/* ---------- Ritmo vertical: el mismo espacio entre todos los bloques ----------
   G = var(--section-y) (100 px en escritorio, 88 en tableta, 72 en celular).
   · Secciones claras: G/2 arriba y abajo → entre contenidos queda G.
   · Paneles (oscuros y de cristal): G/2 de margen exterior → del panel a lo que sigue también queda G.
   · Dentro de cada panel, G de aire arriba y abajo. */
.u > section[class]:not(.hero):not(.phero):not(.quote-page) { padding-top: calc(var(--section-y) / 2); }
.u > section[class] { padding-bottom: calc(var(--section-y) / 2); }   /* el encabezado conserva su espacio superior para la barra de navegación */
.u > .cta-band, .u > .section.dark, .u > .dsplit { margin-top: calc(var(--section-y) / 2); margin-bottom: calc(var(--section-y) / 2); }
/* !important: la regla general de arriba es más específica (incluye :not()); los paneles mandan */
.u > section.cta-band, .u > section.section.dark { padding-top: var(--section-y) !important; padding-bottom: var(--section-y) !important; }
.u > section.dsplit { padding-top: var(--section-y) !important; padding-bottom: 0 !important; }
.u > section[class]:last-of-type { padding-bottom: var(--section-y); }
/* Dos paneles seguidos: sus márgenes se fusionarían en G/2; se fuerza G entre ellos */
.u > :is(.cta-band, .section.dark, .dsplit) + :is(.cta-band, .section.dark, .dsplit) { margin-top: var(--section-y); }
/* Pasos apilados: sin relleno extra al final de la lista */
.u .pv-steps__list { padding-bottom: 0; margin-bottom: 0; }

/* ---------- Sección del ecosistema (industrias): panel de cristal claro ---------- */
.u > section.esplit {
  width: min(1240px, calc(100% - 2 * var(--gutter))); margin: calc(var(--section-y) / 2) auto;
  padding: clamp(28px, 4vw, 56px) !important; gap: clamp(28px, 4vw, 56px);
  border-radius: clamp(28px, 3.6vw, 48px); background: linear-gradient(135deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .5));
  border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 40px 90px -55px rgba(17, 19, 22, .45);
}
.u > section.esplit .esplit__text { padding-left: 0; }
.u > section.esplit .esplit__media { border-radius: 24px; overflow: hidden; }
.u > :is(.cta-band, .section.dark, .dsplit, .esplit) + :is(.cta-band, .section.dark, .dsplit, .esplit) { margin-top: var(--section-y); }

/* ---------- Formularios de Contacto y Cotizar: mismo estilo que el de demo ---------- */
.u .cform {
  position: relative; isolation: isolate; gap: 16px 18px;
  padding: clamp(24px, 3vw, 40px); border-radius: 32px; background: #fff; border: 0;
  box-shadow: 0 60px 120px -60px rgba(17, 19, 22, .45);
}
.u .cform::before { /* borde con el degradado de FleTrack */
  content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: 34px;
  background: linear-gradient(140deg, #b6c3ff, rgba(255, 255, 255, .4) 40%, rgba(255, 255, 255, .4) 60%, #efc6cf);
}
.u .cform::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff; }
.u .cform label { gap: 8px; font-size: 14px; font-weight: 500; letter-spacing: -.01em; color: #111316; }
.u .cform input:not([type=hidden]):not(.cform__hp), .u .cform select, .u .cform textarea {
  min-height: 56px; padding: 14px 16px; border-radius: 16px; border: 1px solid #dfe3ea; background: #f7f8fa;
  font: inherit; font-size: 16px; color: #111316; transition: border-color .2s, box-shadow .2s, background .2s;
}
.u .cform textarea { min-height: 140px; resize: vertical; }
.u .cform input:focus, .u .cform select:focus, .u .cform textarea:focus {
  outline: none; background: #fff; border-color: #4a5fcf; box-shadow: 0 0 0 4px rgba(74, 95, 207, .16);
}
.u .cform [aria-invalid="true"] { border-color: #dc2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); }
.u .cform .cform__foot .btn {
  width: 100%; min-height: 58px; border-radius: 18px; font-size: 16.5px; font-weight: 600; color: #fff;
  background: linear-gradient(120deg, #2e2a5e 0%, #4a5fcf 55%, #7368b2 100%); box-shadow: 0 20px 40px -20px rgba(74, 95, 207, .7);
}
.u .cform .cform__foot .btn:hover { filter: brightness(1.07); }
/* En Cotizar el formulario ya va dentro de su tarjeta */
.u .quote__card .cform { padding: 0; box-shadow: none; background: none; }
.u .quote__card .cform::before, .u .quote__card .cform::after { content: none; }
.u .quote__card { border-radius: 32px; box-shadow: 0 60px 120px -60px rgba(17, 19, 22, .45); }

@media (max-width: 767px) {
  .u > section.esplit { width: calc(100% - 16px); }
  .u .cform { padding: 22px 18px; border-radius: 26px; }
}

@media (max-width: 1024px) {
  .u .dsplit { padding-inline: 20px; }
}
@media (max-width: 767px) {
  .u .section.dark, .u .dsplit { margin-inline: 8px; border-radius: 28px; }
  .u .cta-band { width: calc(100% - 16px); padding-inline: 18px; }
  .u-canvas i { width: 130vw; }
}
@media (prefers-reduced-motion: reduce) {
  .u-stage { animation: none; }
  .u-stage > .hero__media, .u-stage > .banner { transform: none !important; }
}

/* Puntuación pegada a una negrita (animWords → .w-p): conserva el color normal del título */
.w-p { font-style: normal; color: #111316; -webkit-text-fill-color: #111316; }
:is(.dark, .dsplit, .footer, .plan--featured, .custom-plan, .pv-flow-sec, .pv-demo-sec, .pp-dark) .w-p { color: #fff; -webkit-text-fill-color: #fff; }

/* ---------- Títulos principales: 2 a 3 renglones ----------
   Más anchos y con tamaño que escala con la pantalla, para que una frase de 6-8 palabras quepa
   en 2-3 renglones en escritorio, tableta y celular. */
.u :is(.phero__title, .hero__title, .quote__title) {
  max-width: min(1180px, 100%); margin-inline: auto;
  font-size: clamp(34px, 7vw, 88px); letter-spacing: -.052em; line-height: 1.02; text-wrap: balance;
}
.u .quote__title.phero__title { max-width: 14ch; margin-inline: 0; font-size: clamp(34px, 4.6vw, 76px); }
.pv .pv-hero__title { max-width: min(1100px, 100%); font-size: clamp(34px, 6.6vw, 84px); text-wrap: balance; }

/* ---------- Subtítulos de sección (h2): también 2 a 3 renglones ----------
   El ancho por defecto (~35 % de la pantalla) hacía que frases largas bajaran a 4 renglones. */
.u :is(.shead, .center-col, #soluciones > .container, .cta-band) > :is(.h2, h2) { max-width: min(940px, 100%); margin-inline: auto; text-wrap: balance; }
.u .h2, .u .h1-sm { text-wrap: balance; }
/* Tamaño fluido: 48 px en escritorio, ~30 px en celular (antes ~38 px → 4-5 renglones) */
:is(.u, .pv) .h2 { font-size: clamp(26px, 3.6vw + 13px, 48px); letter-spacing: -.045em; line-height: 1.06; text-wrap: balance; }
.u .h1-sm { font-size: clamp(28px, 3.4vw + 15px, 64px); letter-spacing: -.05em; line-height: 1.04; }
/* Columnas laterales: el título puede usar todo el ancho de su columna */
.u :is(.two-col__text, .esplit__text, .dsplit__text, .split, .shead--left) > :is(.h2, .h1-sm, h2) { max-width: min(720px, 100%); }
/* Panel del ecosistema (industrias): el texto vive en media columna */
.u .esplit .h2 { font-size: clamp(26px, 2.2vw + 10px, 40px); }

/* ---------- Ecosistema (diagrama con FleTrack al centro): tarjeta de cristal con brillos de la marca ---------- */
.u .eco-media {
  margin-top: 24px; border-radius: clamp(28px, 3.6vw, 44px); overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .55)) !important;
  border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 40px 90px -55px rgba(17, 19, 22, .45);
}
.u .eco-media .mg-eco {
  background:
    radial-gradient(42% 55% at 18% 30%, color-mix(in srgb, var(--g1) 90%, transparent) 0%, transparent 70%),
    radial-gradient(40% 50% at 84% 72%, color-mix(in srgb, var(--g4) 90%, transparent) 0%, transparent 70%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 55%);
}
/* Logos de productos: tarjetas clicables con la misma sombra y elevación que el resto */
.u .eco-tile { border-radius: 24px; box-shadow: 0 24px 50px -34px rgba(17, 19, 22, .5); transition: transform .3s var(--ease-out), box-shadow .3s; }
.u .eco-tile:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -32px rgba(17, 19, 22, .55); }
.u .eco-tile:focus-visible { outline: 3px solid #4a5fcf; outline-offset: 3px; }

/* =========================================================
   MENÚ MÓVIL (≤1240px): hoja completa bajo la barra
   Tipografía grande, grupos con ícono y descripción, productos con su logo,
   contacto, acceso a clientes y acciones fijas abajo.
   ========================================================= */
.mobile-menu.mnav {
  position: fixed; z-index: 49; left: var(--gutter); right: var(--gutter);
  top: var(--mnav-top, 96px); bottom: 12px; margin: 0 auto; max-width: 720px;
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  border-radius: 30px; border: 1px solid rgba(255, 255, 255, .9);
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(182, 195, 255, .45), transparent 60%),
    radial-gradient(90% 50% at 0% 100%, rgba(239, 198, 207, .35), transparent 60%),
    rgba(250, 250, 252, .97);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 40px 90px -40px rgba(17, 19, 22, .45);
  animation: mnav-in .32s cubic-bezier(.2, .8, .2, 1) both;
}
.mobile-menu.mnav[hidden] { display: none; }
@keyframes mnav-in { from { opacity: 0; translate: 0 -10px; scale: .985; } }
html.is-mnav-open, html.is-mnav-open body { overflow: hidden; }

.mnav__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 22px 24px; }

/* Navegación principal en tipografía grande */
.mnav__primary { display: flex; flex-direction: column; }
.mnav__primary > a, .mnav__group > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px; padding: 0; border: 0; border-bottom: 1px solid rgba(17, 19, 22, .08);
  font-size: clamp(24px, 6.4vw, 30px); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; color: #111316;
  list-style: none; cursor: pointer;
}
.mnav__group > summary::-webkit-details-marker { display: none; }
.mnav .mnav__group > summary::after, .mnav details[open] > summary::after { content: none; }
.mnav__primary > a[aria-current="page"] { color: #4a5fcf; }
.mnav__chev { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: rgba(17, 19, 22, .05); color: #111316; transition: transform .25s ease, background .2s; }
.mnav__group[open] > summary .mnav__chev { transform: rotate(180deg); background: #111316; color: #fff; }
.mnav__primary > a:active, .mnav__group > summary:active { opacity: .6; }

/* Contenido de cada grupo */
.mnav__items { display: grid; gap: 4px; padding: 12px 0 6px; }
.mnav__item { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 10px 8px 8px; border-radius: 18px; transition: background .2s; }
.mnav__item:active, .mnav__item:hover { background: rgba(255, 255, 255, .9); }
.mnav__ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: #fff; box-shadow: 0 6px 16px -10px rgba(17, 19, 22, .35); }
.mnav__ic svg { width: 19px; height: 19px; fill: none; stroke: #4a5fcf; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mnav__item b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.02em; color: #111316; }
.mnav__item small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.3; color: #5b616b; }
.mnav__prods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 0 6px; }
.mnav__prod { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 104px; padding: 16px; border-radius: 20px; background: #fff; box-shadow: 0 10px 24px -18px rgba(17, 19, 22, .45); }
.mnav__prod img { width: auto; height: 22px; max-width: 100%; object-fit: contain; object-position: left center; }
.mnav__prod small { font-size: 13px; line-height: 1.3; color: #5b616b; }
.mnav__all { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px 10px; font-size: 15px; font-weight: 600; color: #4a5fcf; }
.mnav__all svg { width: 16px; height: 16px; }
.mnav__group[open] { padding-bottom: 6px; border-bottom: 1px solid rgba(17, 19, 22, .08); }
.mnav__group[open] > summary { border-bottom-color: transparent; }

/* Contacto y acceso a clientes */
.mnav__eyebrow { margin-bottom: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8a8f98; }
.mnav__contact { display: grid; gap: 12px; margin-top: 26px; }
.mnav__contact > :is(a, p) { display: grid; gap: 2px; }
.mnav__contact b { font-size: 15px; font-weight: 600; color: #111316; letter-spacing: -.01em; }
.mnav__contact span { font-size: 15px; color: #5b616b; }
.mnav__contact a span { color: #4a5fcf; }
.mnav__login { margin-top: 26px; }
.mnav__pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mnav__pills a { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-height: 84px; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid rgba(17, 19, 22, .06); box-shadow: 0 10px 24px -20px rgba(17, 19, 22, .45); }
.mnav__pills a > span { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; color: #4a5fcf; }
.mnav__pills a > span svg { width: 15px; height: 15px; }
.mnav__pills img { width: auto; max-width: 100%; height: 18px; object-fit: contain; object-position: left center; }

/* Acciones fijas abajo */
.mnav__bar { display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(17, 19, 22, .06); background: rgba(255, 255, 255, .75); }
.mnav__bar .btn { min-height: 52px; border-radius: 16px; font-size: 16px; font-weight: 600; }
.mnav__bar .btn--dark { flex: 1; justify-content: center; }
.mnav__wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; }
.mnav__wa svg { width: 18px; height: 18px; fill: #16a34a; }

/* Entrada escalonada de la navegación principal */
.mnav__primary > * { animation: mnav-item .4s cubic-bezier(.2, .8, .2, 1) both; }
.mnav__primary > :nth-child(2) { animation-delay: .03s; } .mnav__primary > :nth-child(3) { animation-delay: .06s; }
.mnav__primary > :nth-child(4) { animation-delay: .09s; } .mnav__primary > :nth-child(5) { animation-delay: .12s; }
.mnav__primary > :nth-child(6) { animation-delay: .15s; } .mnav__primary > :nth-child(n + 7) { animation-delay: .18s; }
@keyframes mnav-item { from { opacity: 0; translate: 0 8px; } }
@media (prefers-reduced-motion: reduce) { .mobile-menu.mnav, .mnav__primary > * { animation: none; } .mnav__chev { transition: none; } }
@media (min-width: 1241px) { .mobile-menu.mnav { display: none !important; } }
@media (max-width: 380px) {
  .mnav__prods { grid-template-columns: 1fr; gap: 8px; }
  .mnav__prod { min-height: 0; flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
  .mnav__prod img { flex: none; width: 88px; height: 18px; object-position: left center; }
  .mnav__prod small { flex: 1; }
}
html.is-mnav-open .chat-bubble, html.is-mnav-open .pv-sticky { display: none !important; }   /* el chat y el botón flotante no tapan las acciones del menú */

/* =========================================================
   PRESENTACIÓN DE PRODUCTO (Productos y Nosotros) · showcase.mjs
   Texto + panel con el color oficial, la plataforma completa en una ventana
   de navegador y dos tarjetas flotantes con cifras de ejemplo.
   ========================================================= */
.psc-list { display: flex; flex-direction: column; gap: clamp(80px, 9vw, 136px); margin-top: clamp(48px, 5vw, 72px); }
.psc { display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); gap: clamp(36px, 5.5vw, 88px); align-items: center; }
.psc--flip { grid-template-columns: minmax(0, 1.26fr) minmax(0, .74fr); }
.psc--flip .psc__text { order: 2; }

.psc__text { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.psc__brand { display: flex; align-items: center; gap: 14px; }   /* logo afuera, a la izquierda; categoría en su pill */
.psc__brand img { height: 20px; width: auto; max-width: 110px; object-fit: contain; }
.psc__pill { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 99px; background: #fff; border: 1px solid rgba(17, 19, 22, .06); box-shadow: 0 8px 20px -14px rgba(17, 19, 22, .4); font-size: 13px; font-weight: 600; color: var(--psc-ink); }
.psc__title { font-size: clamp(30px, 3.1vw, 46px); font-weight: 600; line-height: 1.06; letter-spacing: -.04em; color: #111316; text-wrap: balance; }
.psc__lead { font-size: 17px; line-height: 1.55; color: #4b5563; max-width: 46ch; }
.psc__feats { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 16px; }
.psc__feats li { display: flex; align-items: center; gap: 14px; }
.psc__ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: color-mix(in srgb, var(--psc-ink) 9%, #fff); color: var(--psc-ink); }
.psc__ic svg { width: 20px; height: 20px; }
.psc__feats b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.015em; color: #111316; }
.psc__feats small { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.4; color: #5b616b; }
.psc__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; }
.psc__cta svg { width: 17px; height: 17px; transition: transform .2s ease; }
.psc__cta:hover svg { transform: translateX(3px); }

/* Panel con el color de la marca */
.psc__stage { position: relative; isolation: isolate; padding: clamp(36px, 4.4vw, 64px) clamp(20px, 2.4vw, 36px); border-radius: 36px; background: var(--stage); }
.psc__stage::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(70% 60% at 85% 0%, rgba(255, 255, 255, .28), transparent 60%), radial-gradient(60% 50% at 0% 100%, rgba(0, 0, 0, .18), transparent 70%); }

/* Ventana de navegador con la plataforma completa (se escala para caber, nunca se recorta) */
.psc__win { position: relative; z-index: 1; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .35); }
.psc__bar { position: relative; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; background: #f3f4f7; border-bottom: 1px solid #e6e8ee; }
.psc__bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; } .psc__bar i:nth-child(2) { background: #febc2e; } .psc__bar i:nth-child(3) { background: #28c840; }
.psc__bar span { position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; max-width: 60%; padding: 4px 12px; border-radius: 8px; background: #fff; border: 1px solid #e6e8ee; font-size: 12px; font-weight: 500; color: #4b5563; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psc__bar span img { height: 11px; width: auto; }
.psc__view { display: grid; place-items: center; overflow: hidden; background: #f6f8fb; }
.psc__shot { width: 940px; }   /* ancho de diseño: las plataformas se acomodan a él y luego se escalan */
.psc__shot > * { min-height: 520px; position: relative !important; inset: auto !important; width: 100% !important; max-width: none !important; height: auto !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.psc__shot > .tr { min-height: 0; }   /* Trayectus: su ventana es más baja; sin franja vacía */

/* Tarjetas flotantes */
.psc__float { position: absolute; z-index: 2; border-radius: 20px; padding: 16px 18px; font-family: "Inter", system-ui, sans-serif; box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .55); }
.psc__float small { display: block; font-size: 12px; font-weight: 500; letter-spacing: -.005em; }
.psc__float b { display: block; margin-top: 4px; font-size: 26px; font-weight: 700; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.psc__float em { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 12px; font-style: normal; font-weight: 500; }
.psc__float--stat { top: 4%; right: -44px; width: 212px; background: #111316; color: #fff; }
.psc__float--stat small, .psc__float--stat em { color: rgba(255, 255, 255, .62); }
.psc__bars { display: flex; align-items: flex-end; gap: 6px; height: 74px; margin-top: 12px; }
.psc__bars span { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; font-size: 10px; color: rgba(255, 255, 255, .5); }
.psc__bars i { display: block; width: 100%; height: var(--h); border-radius: 5px; background: linear-gradient(180deg, var(--bar), color-mix(in srgb, var(--bar) 35%, transparent)); transform-origin: bottom; animation: psc-grow .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 70ms + .2s); }
.psc__float--kpi { bottom: -26px; left: -44px; width: 236px; background: #fff; color: #111316; }
.psc__float--kpi small { color: #6b7280; }
.psc__float--kpi em { color: #15803d; } .psc__float--kpi em svg { width: 14px; height: 14px; }
.psc__spark { display: block; width: 100%; height: 38px; margin-top: 8px; }
.psc__spark-area { fill: color-mix(in srgb, var(--psc-ink) 12%, transparent); stroke: none; }
.psc__spark-line { fill: none; stroke: var(--psc-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.psc--flip .psc__float--stat { right: auto; left: -44px; }
.psc--flip .psc__float--kpi { left: auto; right: -44px; }
@keyframes psc-grow { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) { .psc__bars i { animation: none; } }

/* Pantallas medianas: las tarjetas flotantes salen menos del panel para no tocar la orilla */
@media (max-width: 1200px) {
  .psc__float--stat { right: -20px; } .psc__float--kpi { left: -20px; }
  .psc--flip .psc__float--stat { left: -20px; } .psc--flip .psc__float--kpi { right: -20px; }
}
/* Tablet y teléfono: texto arriba, panel abajo; las tarjetas flotantes quedan dentro del panel */
@media (max-width: 960px) {
  .psc, .psc--flip { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .psc--flip .psc__text { order: 0; }
  .psc__stage { padding: 56px 20px 64px; border-radius: 28px; }
  .psc__float--stat, .psc--flip .psc__float--stat { top: -18px; right: 16px; left: auto; width: 180px; padding: 12px 14px; }
  .psc__float--kpi, .psc--flip .psc__float--kpi { bottom: -22px; left: 16px; right: auto; width: 196px; padding: 12px 14px; }
  .psc__float b { font-size: 22px; }
  .psc__bars { height: 54px; }
}
@media (max-width: 560px) {
  .psc__stage { padding: 64px 12px 72px; }
  .psc__bar { height: 28px; } .psc__bar span { font-size: 10.5px; padding: 2px 8px; }
  .psc__float--stat, .psc--flip .psc__float--stat { width: 156px; }
  .psc__float--kpi, .psc--flip .psc__float--kpi { width: 172px; }
  .psc__bars { height: 44px; gap: 4px; }
  .psc__shot { width: 620px; }   /* en el teléfono las plataformas usan su vista compacta y se ven más grandes */
}

/* =========================================================
   NOSOTROS · ECOSISTEMA EN TARJETAS APILADAS (showcase.mjs → ecosystemStack)
   Texto fijo a la izquierda; a la derecha, una tarjeta por producto que se queda
   arriba al hacer scroll mientras la siguiente se apila encima.
   ========================================================= */
.stk__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.stk__head { position: sticky; top: 140px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.stk__head .h2 { text-align: left; }
.stk__list { display: flex; flex-direction: column; gap: 28px; }
.stk__card { position: sticky; top: calc(130px + var(--i) * 18px); border-radius: 32px; isolation: isolate; overflow: hidden;
  /* Sin contorno: lo que personaliza cada tarjeta es el degradado de la página de su producto */
  background:
    radial-gradient(60% 45% at 0% 0%, var(--g1) 0%, transparent 100%),
    radial-gradient(55% 45% at 100% 8%, var(--g2) 0%, transparent 100%),
    radial-gradient(55% 40% at 0% 100%, var(--g3) 0%, transparent 100%),
    radial-gradient(60% 45% at 100% 96%, var(--g4) 0%, transparent 100%),
    radial-gradient(closest-side at 70% 70%, color-mix(in srgb, var(--glow) 16%, transparent) 0%, transparent 100%),
    #f8f9fb;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 30px 70px -36px rgba(17, 19, 22, .35), 0 2px 6px rgba(17, 19, 22, .04); }
.stk__card--norux { --g1: #dbe4f7; --g2: #e6ecfb; --g3: #cdd9f5; --g4: #e9e6f8; --glow: #0437ad; }
.stk__card--iomaq { --g1: #fff6cc; --g2: #ffefb3; --g3: #ffe3a1; --g4: #fff9e0; --glow: #ffba00; }
.stk__card--movilistica { --g1: #fff6e4; --g2: #ffe2d2; --g3: #dcebff; --g4: #fff0dc; --glow: #ff743a; }
.stk__card--trayectus { --g1: #e2f1ee; --g2: #f1fbc9; --g3: #d6ece7; --g4: #ecf9d2; --glow: #00594f; }
.stk__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(24px, 2.8vw, 38px); }
.stk__title { font-size: clamp(24px, 2.2vw, 30px); font-weight: 600; line-height: 1.12; letter-spacing: -.035em; color: #111316; margin-top: 6px; }
.stk__text { font-size: 16px; line-height: 1.5; color: #4b5563; max-width: 44ch; }
.stk__media { align-self: stretch; margin-top: 8px; }
.stk__media .psc__win { box-shadow: 0 40px 70px -34px color-mix(in srgb, var(--glow) 45%, rgba(17, 19, 22, .5)), 0 0 0 1px rgba(17, 19, 22, .06); }
.stk__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--psc-ink); }
.stk__link svg { width: 17px; height: 17px; transition: transform .2s ease; }
.stk__link:hover svg { transform: translateX(3px); }
@media (max-width: 960px) {
  .stk__grid { grid-template-columns: minmax(0, 1fr); }
  .stk__head { position: static; }
  .stk__card { top: calc(96px + var(--i) * 12px); }
}
/* Las 4 tarjetas del mismo alto: la plataforma se escala completa dentro de un área fija */
.stk__media .psc__view { place-items: start stretch; }   /* la plataforma ocupa todo el ancho de la ventana y la ventana toma su alto */
.stk__card--trayectus .psc__view { background: #f4f7f6; } .stk__card--movilistica .psc__view { background: #fffaf6; }
/* Nosotros: en computadora las plataformas se dibujan más anchas para que la tarjeta quepa en pantalla al apilarse */
@media (min-width: 961px) { .stk__media .psc__shot { width: 1180px; } .stk__media .psc__shot > * { min-height: 0; } }
@media (min-width: 961px) and (max-height: 820px) { .stk__card { top: calc(92px + var(--i) * 14px); } .stk__head { top: 110px; } }   /* laptops de pantalla baja: la tarjeta completa cabe al quedarse fija */
/* Planes en slider: sin sombra debajo (el slider la recortaba y se veía una sombrita); solo el contorno */
.u .plans-slider .plans > .plan, .u .plans-slider .plans > .plan:hover { box-shadow: none; }
/* Nosotros: el título de la columna fija va en 2–3 renglones (con el tamaño general ocupaba 4) */
@media (min-width: 961px) { .stk__head .h2 { font-size: clamp(30px, 2.4vw + 6px, 40px); } }