/* ═══════════════════════════════════════════════
   DATAPOS · nav + hero inyectados en el template
   Clases prefijadas (dpnav / dpbtn) para no colisionar
═══════════════════════════════════════════════ */

:root {
  --dp-bg: #081021;
  --dp-txt: #eef1fa;
  --dp-sub: #b8c1dc;
  --dp-white: #ffffff;
  --dp-line: rgba(125, 150, 220, 0.18);
  --dp-bg-grad:
    radial-gradient(55% 45% at 85% -5%, rgba(82, 102, 235, 0.22), transparent 65%),
    radial-gradient(45% 38% at 5% 28%, rgba(64, 130, 255, 0.1), transparent 60%),
    radial-gradient(75% 60% at 50% 115%, rgba(52, 92, 225, 0.18), transparent 65%),
    linear-gradient(180deg, #081021 0%, #0b1530 50%, #070d1f 100%);
  /* nav + intro DATAPOS usan la MISMA fuente nativa del template (Inter Tight) */
  --dp-font: var(--font-inter-tight, 'Inter Tight', 'Inter', sans-serif);
}

/* ───── BOTONES (liquid glass) ───── */
.dpbtn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 480; font-size: 0.95rem; font-family: var(--dp-font);
  letter-spacing: 0.01em;
  padding: 11px 22px; border-radius: 32px; border: 1px solid transparent;
  cursor: pointer; transition: background .25s, color .25s, border-color .25s, box-shadow .25s, transform .25s;
  white-space: nowrap; text-decoration: none;
}
.dpbtn--primary::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -20%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.06) 55%, transparent 70%),
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.14) 44%, rgba(255, 255, 255, 0.03) 52%, transparent 60%);
}
.dpbtn--lg { padding: 12px 26px; font-size: 0.95rem; }
.dpbtn--primary {
  /* Liquid Glass azul oscuro (no violeta): navy/azure translúcido */
  background: linear-gradient(180deg, rgba(28, 66, 150, 0.72), rgba(14, 42, 105, 0.78));
  color: var(--dp-white);
  border: 1px solid rgba(150, 195, 255, 0.42);
  box-shadow:
    inset 0 1.5px 1px rgba(220, 240, 255, 0.5),     /* filo de luz superior */
    inset 0 -2px 6px rgba(90, 150, 255, 0.16),      /* reflejo azul inferior */
    inset 0 -1px 1px rgba(0, 6, 24, 0.4),
    0 14px 36px -12px rgba(16, 46, 120, 0.8);
  backdrop-filter: blur(16px) saturate(1.9) brightness(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.9) brightness(1.05);
}
.dpbtn--primary:hover {
  background: linear-gradient(180deg, rgba(38, 82, 175, 0.82), rgba(20, 54, 128, 0.86));
  border-color: rgba(180, 215, 255, 0.58);
  box-shadow:
    inset 0 1.5px 1px rgba(230, 245, 255, 0.6),
    inset 0 -2px 8px rgba(100, 160, 255, 0.2),
    inset 0 -1px 1px rgba(0, 6, 24, 0.35),
    0 18px 44px -12px rgba(20, 56, 140, 0.92);
  transform: translateY(-1px);
}

/* ───── NAV (liquid glass) ───── */
/* marquee de logos: la pista interna mide ~1836px y desbordaba la página (faltaba el clip) */
.logos-marquee-container, .logos-right-marquee-container { overflow: hidden; }
/* imagen de Beneficios: el scale(1.18) la hace más ancha que la pantalla en mobile → sin scale */
@media (max-width: 768px) { #beneficios figure img { transform: none !important; } }
.dpnav-wrap { position: fixed; top: 12px; left: 0; right: 0; z-index: 100; padding: 0 16px; }
.dpnav {
  position: relative;
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 26px;
  padding: 8px 12px 8px 12px; border-radius: 40px;
  /* Liquid Glass (Apple): translúcido con tinte neutro (no se tiñe del fondo).
     saturate moderado para no amplificar fondos brillantes (cielo, etc.) */
  background: rgba(24, 32, 56, 0.26);
  backdrop-filter: blur(26px) saturate(1.35) brightness(1.0);
  -webkit-backdrop-filter: blur(26px) saturate(1.35) brightness(1.0);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.45),    /* filo de luz superior */
    inset 0 -1.5px 3px rgba(255, 255, 255, 0.1),    /* reflejo inferior (curvatura) */
    inset 0 0 30px rgba(255, 255, 255, 0.04),       /* glow interno difuso */
    0 22px 50px -22px rgba(0, 0, 0, 0.7);
  transition: background .3s, border-color .3s, box-shadow .3s;
}
/* veta especular del cristal + lente superior */
.dpnav::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(80% 140% at 12% -40%, rgba(255, 255, 255, 0.22), transparent 55%),
    linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.02) 56%, transparent 66%);
}
/* reflejo brillante curvo en el borde inferior (el "labio" del cristal Apple) */
.dpnav::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 50%;
  border-radius: 0 0 40px 40px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.06));
  mask: radial-gradient(120% 100% at 50% 140%, #000 40%, transparent 70%);
  -webkit-mask: radial-gradient(120% 100% at 50% 140%, #000 40%, transparent 70%);
}
.dpnav.scrolled { background: rgba(16, 22, 44, 0.5);
  backdrop-filter: blur(30px) saturate(1.4) brightness(1.0);
  -webkit-backdrop-filter: blur(30px) saturate(1.4) brightness(1.0);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.5),
    inset 0 -1.5px 3px rgba(255, 255, 255, 0.1),
    inset 0 0 30px rgba(255, 255, 255, 0.04),
    0 26px 56px -22px rgba(0, 0, 0, 0.85); }
/* lente de blur extra sobre el lado izq (logo): más cristal + leve oscurecido
   que se disuelve hacia el centro, para que el logo azul resalte sobre el cielo */
.dpnav__lens {
  display: none; /* reemplazada por la pastilla blanca liquid glass del logo (.dpnav__brand) */
  position: absolute; top: 0; bottom: 0; left: 0; width: min(440px, 60%);
  border-radius: 40px 0 0 40px; pointer-events: none; z-index: 0;
  /* sin backdrop-filter: el velo blanco es estático (no muestrea el contenido que
     scrollea atrás), así no "respira"/crece al pasar las cards brillantes */
  background: linear-gradient(131deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.5) 38%, rgba(255, 255, 255, 0.2) 66%, rgba(255, 255, 255, 0.06) 84%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 26%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 26%, transparent 100%);
}
/* logo dentro de una pastilla blanca "liquid glass" (el wordmark azul se lee perfecto) */
.dpnav__brand {
  position: relative; z-index: 2; overflow: hidden;
  display: inline-flex; align-items: center;
  padding: 9px 18px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.32) 100%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.95),     /* filo de luz superior */
    inset 0 -3px 6px rgba(255, 255, 255, 0.22),       /* reflejo inferior */
    inset 0 0 18px rgba(255, 255, 255, 0.18),         /* glow interno del cristal */
    0 8px 22px -6px rgba(0, 0, 0, 0.5),               /* sombra proyectada */
    0 2px 4px rgba(0, 0, 0, 0.22);
  /* vidrio: muestrea y difumina la nav detrás; brightness para que quede claro */
  -webkit-backdrop-filter: blur(22px) saturate(1.6) brightness(1.4);
  backdrop-filter: blur(22px) saturate(1.6) brightness(1.4);
  transition: transform .25s, box-shadow .25s;
}
/* gloss especular tipo burbuja de cristal (highlight curvo arriba) */
.dpnav__brand::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 2px; height: 44%;
  border-radius: 999px; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  opacity: 0.85;
}
.dpnav__brand > * { position: relative; z-index: 2; }
.dpnav__brand:hover { transform: translateY(-1px); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 1), 0 12px 28px -8px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.22); }
.dpnav__logo { height: 24px; display: block; }
.dpnav__links { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
/* links centrados en el nav (desktop): logo izq · links centro · acciones der */
@media (min-width: 941px) {
  .dpnav__links { position: absolute; left: 50%; transform: translateX(-50%); }
}
.dpnav__links a { padding: 7px 13px; border-radius: 40px; font-size: 0.9rem; color: var(--dp-txt);
  font-family: var(--dp-font); text-decoration: none;
  transition: color .2s, background .2s; }
.dpnav__links a:hover { color: var(--dp-white); background: rgba(205, 221, 255, 0.1); }
.dpnav__actions { display: flex; gap: 16px; align-items: center; margin-left: auto; }
.dpnav__login { font-size: 0.9rem; color: var(--dp-txt); font-family: var(--dp-font); text-decoration: none; }
.dpnav__login:hover { color: var(--dp-sub); }
.dpnav__actions .dpbtn--primary {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.06) 100%);
  color: #fff;
  padding: 8px 20px; border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.5),
    inset 0 -2px 6px rgba(255, 255, 255, 0.12),
    inset 0 0 18px rgba(255, 255, 255, 0.06),
    0 8px 24px -12px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8);
}
.dpnav__actions .dpbtn--primary:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.1) 100%);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.6),
    inset 0 -2px 6px rgba(255, 255, 255, 0.14),
    inset 0 0 18px rgba(255, 255, 255, 0.08),
    0 10px 28px -12px rgba(0, 0, 0, 0.55); }
/* border beam: haz de luz que recorre el borde del botón "Solicitar demo" del nav */
@property --dp-beam-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.dpnav__actions .dpbtn--primary { position: relative; overflow: hidden; isolation: isolate; }
.dpnav__actions .dpbtn--primary::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px;
  pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--dp-beam-angle),
    transparent 0deg, transparent 295deg,
    rgba(118, 145, 242, 0.5) 320deg, #ffffff 348deg, rgba(118, 145, 242, 0.5) 356deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: dp-beam-run 2.6s linear infinite;
}
@keyframes dp-beam-run { to { --dp-beam-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .dpnav__actions .dpbtn--primary::after { animation: none; opacity: 0; } }

.dpnav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0;
  cursor: pointer; padding: 8px; margin-left: auto; }
.dpnav__burger span { width: 22px; height: 2px; background: var(--dp-txt); border-radius: 2px; }

/* ───── HERO INMERSIVO (video + scroll scrub) ───── */
.heroseq { height: calc(var(--vh, 1vh) * 320); position: relative; }
/* negro profundo (como los bordes de la card de services): el fade nunca pasa por gris */
.heroseq__pin { position: sticky; top: 0; height: calc(var(--vh, 1vh) * 100); overflow: hidden;
  background: #070708;
  pointer-events: none; }
/* la primera sección del template entra POR ENCIMA del video mientras se apaga */
.dp-overlap { margin-top: calc(var(--vh, 1vh) * -100); position: relative; z-index: 6;
  will-change: transform, opacity; backface-visibility: hidden; }
/* sin las animaciones GSAP el contenido pierde su stacking context y la figura
   de fondo (absoluta) lo tapa — lo devolvemos arriba */
.dp-overlap .bg-secondary > *:not(figure):not(.absolute) { position: relative; z-index: 1; }
/* full-bleed: la card ocupa toda la pantalla, sin bordes blancos ni radios.
   min-height 100vh: durante el match cut cubre el viewport entero en cualquier
   tamaño de pantalla (sin esa banda del pin + gradientes del marquee asomando) */
.dp-overlap { min-height: calc(var(--vh, 1vh) * 100); }
/* en mobile el pt-[180px] del template dejaba el título demasiado abajo tras el
   match-cut; lo subimos para que entre más arriba en la pantalla */
@media (max-width: 767px) { .dp-overlap { padding-top: 104px !important; } }
/* mobile: 200vh EXACTOS = tramo de scrub de 100vh. Clave: con el solape de -100vh, la
   sección queda en el documento en 100vh = LA MISMA posición que en el layout final
   (.hero-locked: hero 100vh + sección debajo). Así el lock se aplica al instante de
   completar el intro SIN compensar el scroll y SIN mover nada visible (el swap ocurre
   con la sección cubriendo la pantalla y solo cambia geometría tapada). */
@media (max-width: 767px) { .heroseq { height: calc(var(--vh, 1vh) * 200); } }
/* mobile: scroll-snap por sección (como en Nosotros) — el swipe clava en cada
   sección y no se pasa. Proximity (no mandatory) para no romper el video-scrub del hero.
   scroll-behavior: smooth → el snap entra deslizando, no de golpe.
   .heroseq como snap-point → se puede volver arriba al video (si no, el snap de la
   primera sección atrapaba y quedaba en negro con el video ya desvanecido). */
/* mobile: el INTRO usa el layout sticky original (scrub + match-cut hacia la sección).
   OJO: durante el intro el pin queda OSCURO (su fondo base #070708): el video se
   disuelve a negro y la sección oscura se materializa sobre negro → su borde superior
   NO se ve (sin "corte"). El póster (cielo) va SOLO en .hero-locked — si estuviera de
   fondo acá, el dissolve lo revelaba brillante detrás de la sección y el corte quedaba
   marcado. */
@media (max-width: 767px) {
  html { scroll-behavior: smooth; }
  /* sin scroll-anchoring nativo del navegador: el swap del lock no mueve nada, pero si
     Chrome ancla por su cuenta ante el cambio de altura, mete un ajuste visible. */
  html, body { overflow-anchor: none; }
}
/* ── mobile one-shot TERMINADO (hero-nav.js agrega .hero-locked al <html> apenas el
   intro se completa; con heroseq=200vh el swap no mueve NADA del documento → invisible):
   la página pasa a FLUJO NORMAL — hero de 100vh (póster nítido, sin sticky) arriba
   como una sección más, y .dp-overlap debajo sin solapamiento. Ocultamos el <video>
   (evita el FRAME NEGRO que iOS pinta al hacer seek a 0). Se reinicia al recargar. ── */
@media (max-width: 767px) {
  html.hero-locked .heroseq { height: calc(var(--vh, 1vh) * 100); }
  html.hero-locked .heroseq__pin {
    position: relative;   /* ya no sticky: el hero scrollea como parte de la página */
    /* -lg (1672x941, fuente limpia): mucho más nítido que el frame del video mobile
       (608px de alto). Carga DIFERIDA (solo al aplicarse .hero-locked) → 0 costo LCP. */
    /* el chico (ya cacheado: es el poster del <video>) debajo como respaldo mientras
       baja el -lg → nunca se ve el pin oscuro al volver arriba apenas lockeado */
    background-image: url("../images/video/hero-poster-lg.webp"), url("../images/video/hero-poster.webp");
    background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
  }
  html.hero-locked .dp-overlap { margin-top: 0; }
  html.hero-locked .heroseq__video { opacity: 0 !important; }
}
/* ocultar artefactos del template: tab rojo "Pre built demos" + botón de tema */
#open-demo-showcase, #demo-showcase, #theme-toggle { display: none !important; }
/* fondo: ColorBends (canvas WebGL animado, inyectado por js/colorbends.js)
   detrás del contenido. Base negra como fallback si no hay WebGL. */
html .hero-section.dp-overlap {
  position: relative;
  background: #000 !important;
}
.dp-colorbends,
.dp-lightrays {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
/* el contenido del hero de data-visualization queda por encima del canvas de rays */
.hero-section.dp-overlap > .main-container { position: relative; z-index: 1; }
/* sección de cards: ancla el canvas de LightRays y deja el contenido encima */
.dp-service-glass { position: relative; }
.dp-service-glass > .main-container { position: relative; z-index: 1; }

/* ── difuminar los bordes del canvas de rayos para que NO se vea el corte
   entre secciones: la luz se disuelve en el negro en vez de cortar seco ── */
.hero-section.dp-overlap > .dp-lightrays {
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 50%, transparent 94%);
}
.dp-service-glass > .dp-lightrays {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.dp-integrations > .dp-lightrays {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
/* rayos del Process (origen abajo-izq): disolverse en el borde superior para
   fusionarse con la sección de integraciones, sin corte seco */
.dp-process > .dp-lightrays {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 80%, transparent 100%);
}

/* sección de integraciones: ancla el canvas de LightRays y deja el contenido encima */
.dp-integrations { position: relative; }
.dp-integrations > .main-container { position: relative; z-index: 1; }

/* sección "Razones / Valor real": LightRays bottom-right, contenido encima */
.dp-razones { position: relative; }
.dp-razones > .main-container { position: relative; z-index: 1; }
.dp-razones > .dp-lightrays {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
/* fade a negro en el borde inferior del hero → se une con la sección siguiente */
html .hero-section.dp-overlap::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 32vh; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 55%, #000 100%);
}

/* ───── CARDS flotantes del hero en LIQUID GLASS ───── */
.dp-glasscards [class*="dark:bg-black"],
.dp-glasscards [class*="dark:bg-background-9"],
.dp-glasscards [class*="dark:bg-secondary"],
.dp-glasscards [class*="dark:bg-background-7"],
.dp-glasscards [class*="dark:bg-background-5"] {
  position: relative;
  background-color: rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(22px) saturate(1.8);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.28),
    inset 0 -1px 2px rgba(255, 255, 255, 0.06),
    0 18px 44px -18px rgba(0, 0, 0, 0.7);
}
/* las cards internas (Income/Expenses) un poco más sutiles para no duplicar el vidrio */
.dp-glasscards [class*="dark:bg-background-7"],
.dp-glasscards [class*="dark:bg-background-5"] {
  background-color: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(8px) saturate(1.4);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
/* badge "Sara" (ns-img-172.svg): separarlo de la card para que flote arriba-derecha
   como el original, sin pisar el texto */
.dp-glasscards.left-5 .parallax-effect {
  right: -28px;
  top: -14px;
}
/* card "Conciliación exitosa": que crezca a su contenido y el texto entre prolijo */
.dp-glasscards [class*="dark:bg-background-9"] {
  height: auto !important;
  min-height: 6rem;
  justify-content: center;
}
.dp-glasscards [class*="dark:bg-background-9"] > span {
  font-size: 0.82rem;
  line-height: 1.15;
}
.heroseq__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.heroseq__overlay { position: relative; z-index: 2; height: 100%; pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; padding: clamp(130px, 19vh, 250px) 24px 0;
  background:
    radial-gradient(52% 34% at 50% 27%, rgba(4,6,14,0.34) 0%, rgba(4,6,14,0.14) 50%, transparent 72%),
    linear-gradient(180deg, rgba(8,12,26,0.28) 0%, rgba(8,12,26,0.08) 28%, rgba(8,12,26,0) 50%, rgba(8,12,26,0.1) 100%);
  will-change: opacity; }
.heroseq__hint { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  color: var(--dp-sub); font-size: 0.82rem; letter-spacing: 0.02em; font-family: var(--dp-font); }
.dphero__title { font-size: clamp(2.2rem, 3.8vw, 3.8rem); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.08; font-family: var(--dp-font); margin: 0;
  text-shadow: 0 1px 3px rgba(4,6,14,0.85), 0 4px 18px rgba(4,6,14,0.6), 0 8px 40px rgba(4,6,14,0.45); }
.dphero__line1 { display: inline; font-weight: 600; color: var(--dp-white); }
.dphero__line2 { display: inline; color: var(--dp-white); font-weight: 800; }
.dphero__sub { color: var(--dp-txt); font-size: clamp(0.92rem, 1.05vw, 1.05rem); font-weight: 420;
  margin: 14px auto 32px; max-width: 560px; font-family: var(--dp-font); line-height: 1.5;
  text-shadow: 0 1px 2px rgba(6,10,24,0.9), 0 2px 8px rgba(6,10,24,0.75), 0 4px 22px rgba(6,10,24,0.5); }

/* ───── REVEAL GLASS gris ("La información financiera más valiosa...") ─────
   liquid glass neutro estilo Apple: gris esmerilado, sin tinte de color */
.dp-reveal-glass {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(255, 255, 255, 0.55), transparent 65%),
    linear-gradient(180deg, rgba(244, 245, 248, 0.6), rgba(225, 228, 234, 0.5));
  backdrop-filter: blur(24px) saturate(1.3) brightness(1.04);
  -webkit-backdrop-filter: blur(24px) saturate(1.3) brightness(1.04);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.95),       /* filo de luz superior */
    inset 0 -2px 10px rgba(150, 155, 165, 0.1),        /* reflejo gris inferior (curvatura) */
    0 30px 60px -30px rgba(30, 35, 50, 0.16);
}
/* veta especular del cristal */
.dp-reveal-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.4) 50%, transparent 60%);
}
.dp-reveal-glass .split-text-team-title { color: #2a2e38; }  /* texto revelado: gris carbón */
/* frase resaltada en azul navy sólido */
.dp-reveal-glass .dp-hl, .dp-reveal-glass .dp-hl * {
  color: #1c3a8c;
}

/* ───── CHIPS DE LOGOS (marquee de bancos / medios de pago) ───── */
.dp-logo-chip {
  flex: 0 0 auto; width: 84px; height: 84px;
  display: flex; align-items: center; justify-content: center;
  background: #ffffff; border-radius: 50%;
  border: 1px solid rgba(18, 24, 45, 0.06);
  box-shadow: 0 4px 14px -6px rgba(18, 24, 45, 0.15);
}
.dp-logo-chip img {
  width: 48px; height: 48px; object-fit: contain;
  border-radius: 12px;   /* redondea los logos con fondo de color cuadrado */
}

/* ───── PILL DE VIDRIO BLANCO (eyebrow "Be Smart") ───── */
.badge.dp-glass-pill {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 -2px 6px rgba(255, 255, 255, 0.12),
    0 8px 24px -10px rgba(0, 0, 0, 0.4) !important;
}

/* ───── BORDER GLOW que recorre el dashboard del hero (loop) ─────
   Reimplementación vanilla del componente <BorderGlow>: un arco cónico
   (sky → purple → pink) que gira por todo el perímetro de forma continua.
   Capa 1 (__ring): bloom suave desenfocado. Capa 2 (__edge): filo nítido. */
@property --dp-glow-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.dp-dash-glow { position: relative; isolation: isolate; border-radius: 28px; }
.dp-dash-glow > figure {
  position: relative; z-index: 1;
  box-shadow: 0 0 0 1px rgba(170, 190, 255, 0.08);   /* borde tenue constante */
}
.dp-dash-glow__ring,
.dp-dash-glow__edge {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; pointer-events: none;
  /* coneSpread ≈ 25°: arco encendido de ~8° a 48°, el resto transparente.
     Tonos azules: navy → azul periwinkle → blanco (punta brillante).
     +235deg: el cometa arranca en el lado izquierdo y barre hacia la derecha. */
  background: conic-gradient(from calc(var(--dp-glow-angle) + 235deg) at 50% 50%,
    transparent 0deg,
    #1c2b7d 14deg, #7691f2 28deg, #ffffff 42deg,
    transparent 56deg,
    transparent 360deg);
  animation: dp-glow-travel 5s linear infinite;
}
/* bloom: se desborda del marco y se desenfoca (glowRadius 40) */
.dp-dash-glow__ring { inset: -12px; filter: blur(40px); opacity: 0.95; }
/* filo: el MISMO arco recortado a una línea de 1.5px sobre el borde */
.dp-dash-glow__edge {
  inset: -1.5px; padding: 1.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
@keyframes dp-glow-travel { to { --dp-glow-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .dp-dash-glow__ring, .dp-dash-glow__edge { animation: none; opacity: 0.5; }
}

/* ───── TÍTULO del hero en azul (mantiene el shimmer "textAnimate") ───── */
.hero-section.dp-overlap .hero-text-color-1 {
  background-image: linear-gradient(45deg, #7691f2, #ffffff, #7691f2);
}

/* "Core" del Process: gradiente azul→blanco horizontal (izq→der) animado */
.dp-grad-text {
  background-image: linear-gradient(90deg, #5266eb 0%, #7691f2 35%, #aebcff 65%, #ffffff 100%);
  background-repeat: no-repeat;
  background-size: 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: 5s linear infinite textAnimate;
  display: inline-block;
}

/* ───── LÍNEAS del hero: degradé azul que RECORRE hacia abajo en loop ─────
   El template las dibuja con GSAP una sola vez al cargar (se pierde tras el
   intro). Acá el segmento azul baja en bucle continuo, siempre visible. */
.hero-section.dp-overlap [data-hero-line] { overflow: hidden; }
.hero-section.dp-overlap [data-hero-line] > div {
  background: linear-gradient(180deg, transparent 0%, #7691f2 55%, #cdddff 100%) !important;
  will-change: transform, opacity;
  animation: dp-line-travel 3.6s linear infinite;
}
@keyframes dp-line-travel {
  0%   { transform: translate3d(0, -92px, 0); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translate3d(0, 120vh, 0); opacity: 0; }
}
/* leve desfasaje entre líneas para que no bajen todas a la vez */
.hero-section.dp-overlap [data-hero-line]:nth-child(1) > div { animation-delay: 0s; }
.hero-section.dp-overlap [data-hero-line]:nth-child(2) > div { animation-delay: .45s; }
.hero-section.dp-overlap [data-hero-line]:nth-child(3) > div { animation-delay: .9s; }
.hero-section.dp-overlap [data-hero-line]:nth-child(4) > div { animation-delay: 1.35s; }
.hero-section.dp-overlap [data-hero-line]:nth-child(5) > div { animation-delay: .2s; }
.hero-section.dp-overlap [data-hero-line]:nth-child(6) > div { animation-delay: .65s; }
.hero-section.dp-overlap [data-hero-line]:nth-child(7) > div { animation-delay: 1.1s; }
.hero-section.dp-overlap [data-hero-line]:nth-child(8) > div { animation-delay: 1.5s; }
@media (prefers-reduced-motion: reduce) {
  .hero-section.dp-overlap [data-hero-line] > div { animation: none; top: 0; }
}

/* ───── CTAs del hero en LIQUID GLASS ───── */
.hero-section.dp-overlap .dp-glassbtn {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 999px; color: #eef1fa !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(18px) saturate(1.9) brightness(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.9) brightness(1.05);
  transition: background .25s, border-color .25s, box-shadow .25s, transform .25s;
}
/* veta especular del cristal */
.hero-section.dp-overlap .dp-glassbtn::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -20%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.06) 55%, transparent 70%),
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.14) 44%, rgba(255, 255, 255, 0.03) 52%, transparent 60%);
}
.hero-section.dp-overlap .dp-glassbtn > * { position: relative; z-index: 1; }
/* primaria — vidrio azul DATAPOS */
.hero-section.dp-overlap .dp-glassbtn--blue {
  background: linear-gradient(180deg, rgba(40, 90, 190, 0.6), rgba(20, 54, 128, 0.66));
  border-color: rgba(150, 195, 255, 0.42);
  box-shadow:
    inset 0 1.5px 1px rgba(220, 240, 255, 0.5),
    inset 0 -2px 6px rgba(90, 150, 255, 0.16),
    0 16px 40px -14px rgba(16, 46, 120, 0.8);
}
.hero-section.dp-overlap .dp-glassbtn--blue:hover {
  background: linear-gradient(180deg, rgba(54, 108, 210, 0.7), rgba(26, 64, 150, 0.74));
  border-color: rgba(180, 215, 255, 0.58); transform: translateY(-1px);
}
/* secundaria — vidrio neutro translúcido */
.hero-section.dp-overlap .dp-glassbtn--ghost {
  background: rgba(150, 170, 220, 0.08);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.4),
    inset 0 -1.5px 3px rgba(255, 255, 255, 0.08),
    0 14px 34px -16px rgba(0, 0, 0, 0.6);
}
.hero-section.dp-overlap .dp-glassbtn--ghost:hover {
  background: rgba(170, 190, 235, 0.14);
  border-color: rgba(255, 255, 255, 0.3); transform: translateY(-1px);
}

/* ───── GRID de las cards: 3 por fila (desktop), 2 (tablet), 1 (mobile).
   Con justify-center la última fila incompleta queda centrada (3 + 2). ───── */
.dp-card-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.dp-card-col { width: 100%; }
@media (min-width: 768px)  { .dp-card-col { width: calc(50% - 0.75rem); } }
@media (min-width: 1024px) { .dp-card-col { width: calc(33.333% - 1rem); } }

/* ───── CARDS de la sección "Services" en LIQUID GLASS (sobre negro) ───── */
.dp-service-glass [class*="dark:bg-background-5"] {
  position: relative;
  /* Liquid Glass (Apple): lente superior (radial) + sheen vertical translúcido */
  background:
    radial-gradient(125% 80% at 50% -12%, rgba(255, 255, 255, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012) 45%, rgba(255, 255, 255, 0.025)) !important;
  backdrop-filter: blur(30px) saturate(1.7) brightness(1.02);
  -webkit-backdrop-filter: blur(30px) saturate(1.7) brightness(1.02);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.3),       /* filo de luz superior */
    inset 0 -2px 6px rgba(255, 255, 255, 0.05),        /* reflejo inferior (curvatura) */
    inset 0 0 34px rgba(255, 255, 255, 0.025),         /* glow interno difuso */
    0 26px 54px -22px rgba(0, 0, 0, 0.8);
}

/* ───── GLOWCARD: filo azul que sigue el puntero (versión liviana) ─────
   Spotlight con coordenadas LOCALES por card (--gx/--gy en px), sin
   background-attachment:fixed ni recalc global → fluido. Solo la card
   bajo el cursor actualiza sus vars (js/glowcards.js). */
/* spotlight FIJO en el corner superior-derecho, siempre encendido */
.dp-service-glass [data-glow] { --gx: 100%; --gy: 0%; --glow: 1; }
/* filo del borde (máscara border-only, como el glow del dashboard) */
.dp-service-glass [data-glow]::before {
  content: ""; position: absolute; inset: -1px; z-index: 2; pointer-events: none;
  border-radius: 21px; padding: 1.6px;
  background:
    radial-gradient(200px 200px at 100% 0%, #ffffff 0%, #7691f2 32%, #1c2b7d 60%, transparent 72%),
    radial-gradient(200px 200px at 0% 100%, #ffffff 0%, #7691f2 32%, #1c2b7d 60%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: var(--glow); transition: opacity .3s ease;
}
/* halo difuso interior (suave, solo en hover) */
.dp-service-glass [data-glow]::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: 20px;
  background:
    radial-gradient(240px 240px at 100% 0%, rgba(118, 145, 242, 0.18) 0%, transparent 65%),
    radial-gradient(240px 240px at 0% 100%, rgba(118, 145, 242, 0.18) 0%, transparent 65%);
  opacity: var(--glow); transition: opacity .3s ease;
}
/* el contenido de la card por encima del halo */
.dp-service-glass [data-glow] > * { position: relative; z-index: 3; }

/* ───── MOVIMIENTO en hover: la card se eleva + glow más fuerte + ícono crece ───── */
.dp-service-glass [data-glow] {
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}
.dp-service-glass [data-glow]:hover {
  transform: translateY(-7px);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.4),
    inset 0 -2px 6px rgba(255, 255, 255, 0.06),
    inset 0 0 42px rgba(118, 145, 242, 0.1),
    0 36px 66px -24px rgba(0, 0, 0, 0.85);
}
.dp-service-glass [data-glow]::before { transition: opacity .3s ease, filter .35s ease; }
.dp-service-glass [data-glow]:hover::before { filter: brightness(1.35); }
.dp-service-glass [data-glow] svg { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.dp-service-glass [data-glow]:hover svg { transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) {
  .dp-service-glass [data-glow], .dp-service-glass [data-glow] svg { transition: none; }
  .dp-service-glass [data-glow]:hover { transform: none; }
  .dp-service-glass [data-glow]:hover svg { transform: none; }
}

/* ───── BADGES liquid glass azul (sección de integraciones) ───── */
.dp-badge-glass {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px;
  font-family: var(--dp-font); font-size: 0.9rem; font-weight: 500;
  letter-spacing: 0.01em; color: #c4d2ec; white-space: nowrap;
  background: linear-gradient(180deg, rgba(56, 84, 150, 0.16), rgba(28, 46, 92, 0.2));
  border: 1px solid rgba(150, 180, 240, 0.16);
  box-shadow:
    inset 0 1px 1px rgba(220, 235, 255, 0.14),
    0 6px 18px -14px rgba(16, 46, 120, 0.4);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
/* veta especular muy sutil */
.dp-badge-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 70% at 50% -20%, rgba(255, 255, 255, 0.1), transparent 60%);
}
/* puntito azul tenue antes del texto */
.dp-badge-glass::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%; order: -1;
  background: rgba(150, 185, 255, 0.7); box-shadow: 0 0 5px rgba(120, 170, 255, 0.35);
}

/* ───── PROCESO: visual a la izquierda + cards de pasos a la derecha ───── */
.dp-proc { display: flex; flex-direction: column; gap: 3rem; align-items: center; }
.dp-proc__visual { width: 100%; max-width: 478px; }
.dp-proc__visual img { width: 100%; height: auto; display: block; }
.dp-proc__steps { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; max-width: 600px; }
@media (min-width: 1024px) {
  .dp-proc { flex-direction: row; gap: 100px; align-items: center; justify-content: center; }
  .dp-proc__visual { flex: 0 0 auto; }   /* queda capado en 478px como el original */
  .dp-proc__steps { flex: 0 1 596px; }
}
.dp-proc-card {
  display: flex; align-items: flex-start; gap: 1.25rem;
  padding: 1.5rem 1.75rem; border-radius: 20px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(118, 145, 242, 0.1), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18), 0 22px 48px -28px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}
.dp-proc-card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.24), 0 30px 56px -28px rgba(0, 0, 0, 0.9);
}
.dp-proc-num {
  position: relative; overflow: hidden;
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  /* liquid glass azul limpio, sin destello especular */
  background: linear-gradient(180deg, rgba(34, 64, 130, 0.4), rgba(18, 38, 92, 0.5));
  border: 1px solid rgba(140, 175, 235, 0.28);
  box-shadow:
    inset 0 1px 1px rgba(210, 230, 255, 0.22),
    inset 0 -1px 2px rgba(0, 6, 24, 0.3),
    0 10px 26px -14px rgba(16, 46, 120, 0.6);
  backdrop-filter: blur(16px) saturate(1.7);
  -webkit-backdrop-filter: blur(16px) saturate(1.7);
}
/* número con gradiente azul→blanco, por encima del cristal */
.dp-proc-num .dp-num {
  position: relative; z-index: 1;
  font-family: var(--dp-font); font-weight: 700; font-size: 0.95rem;
  background-image: linear-gradient(135deg, #7691f2, #ffffff 55%, #7691f2);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dp-proc-card h3 { font-size: 1.15rem; font-weight: 600; color: #eef1fa; margin: 0; }

/* ───── PASOS "Cómo funciona": tarjetas glass con número marca de agua e ícono ───── */
.dp-steps {
  display: flex; flex-direction: column; gap: 1.5rem;
}
@media (min-width: 768px) {
  .dp-steps { flex-direction: row; }
  .dp-steps .dp-step { flex: 1 1 0; }
}
.dp-step {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 0.85rem;
  padding: 2rem 1.75rem 1.9rem;
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(118, 145, 242, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    0 24px 50px -28px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}
.dp-step:hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.26),
    0 34px 60px -28px rgba(0, 0, 0, 0.9);
}
/* número grande de marca de agua */
.dp-step-no {
  position: absolute; top: 0.5rem; right: 1.1rem; pointer-events: none;
  font-family: var(--dp-font); font-weight: 800; font-size: 3.6rem; line-height: 1;
  letter-spacing: -0.04em; color: rgba(118, 145, 242, 0.16);
}
/* chip del ícono */
.dp-step-ico {
  display: inline-flex; width: 50px; height: 50px; align-items: center; justify-content: center;
  border-radius: 15px; position: relative; z-index: 1;
  background: linear-gradient(180deg, rgba(40, 90, 190, 0.24), rgba(20, 54, 128, 0.3));
  border: 1px solid rgba(150, 195, 255, 0.3);
  box-shadow: inset 0 1px 1px rgba(220, 240, 255, 0.32);
}
.dp-step h5, .dp-step p { position: relative; z-index: 1; }
.dp-step h5 { margin-top: 0.35rem; }

/* ───── Más contraste en el texto de cuerpo de las secciones DATAPOS (sobre negro) ───── */
section[style*="background:#000"] p {
  color: rgb(255 255 255 / 90%) !important;
}

/* offset para que el nav fijo no tape el inicio de la sección al saltar por ancla */
#como-funciona, #beneficios, #integraciones, #descargar { scroll-margin-top: 104px; }
@media (max-width: 767px) { #como-funciona, #beneficios, #integraciones, #descargar { scroll-margin-top: 72px; } }

/* footer al mismo negro que las secciones DATAPOS (el template usa gris/navy) */
footer.footer { background: #000 !important; border-top-color: rgba(255, 255, 255, 0.06) !important; }
/* Aurora CSS en el borde superior del footer (gradiente fluido difuminado) */
footer.footer { overflow: hidden; }
footer.footer > .main-container { position: relative; z-index: 1; }
footer.footer::before {
  content: ""; position: absolute; top: 0; left: -10%; right: -10%; height: 400px;
  z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, #40538c, #162754 30%, #2c5788 55%, #40538c 80%, #162754);
  background-size: 220% 100%;
  filter: blur(85px); opacity: 0.55;
  /* aparece desde transparente arriba → sin corte con la sección negra de arriba */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 44%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 44%, transparent 100%);
  animation: dp-aurora 14s ease-in-out infinite alternate;
}
@keyframes dp-aurora {
  0%   { background-position: 0% 50%; transform: translateY(0); }
  100% { background-position: 100% 50%; transform: translateY(14px); }
}
@media (prefers-reduced-motion: reduce) { footer.footer::before { animation: none; } }

/* ───── SECCIÓN "Process" portada TAL CUAL de ai-agency (clases arbitrarias traducidas) ───── */
.dp-agency-row { display: flex; flex-direction: column; align-items: flex-start; gap: 6rem; }
.dp-agency-head { width: 100%; max-width: 520px; margin: 0 auto; text-align: center; }
.dp-agency-head h2 { max-width: 529px; margin-left: auto; margin-right: auto; }
.dp-agency-head p { max-width: 620px; margin-left: auto; margin-right: auto; }
.dp-agency-cards { width: 100%; }
@media (min-width: 1024px) {
  .dp-agency-row { flex-direction: row; gap: 140px; }
  .dp-agency-head { flex: 1; position: sticky; top: 7rem; max-width: none; margin: 0; text-align: left; }
  .dp-agency-head h2, .dp-agency-head p { margin-left: 0; }
  .dp-agency-cards { flex: 1; }
  .dp-agency-cards .stack-cards__item { max-width: 483px; }
}
/* contenedor de cada card (= p-2.5 rounded-[20px] relative z-[10] overflow-hidden) */
.dp-gbcard { position: relative; z-index: 10; overflow: hidden; border-radius: 20px; padding: 0.625rem; }
/* figura del borde gradiente (= absolute z-[-1] ... select-none pointer-events-none) */
.dp-gb { position: absolute; z-index: -1; height: auto; pointer-events: none; user-select: none; }
.dp-gb img { display: block; }

/* ───── SECCIÓN Process (ai-agency): cards integradas al fondo negro ─────
   En el original la sección y la card comparten el mismo color (bg-5).
   Acá la sección es #000, así que la card también va a #000 → solo se ve el borde. */
.dp-process { background: #000; position: relative; }  /* la sección entera (incluye el padding) → sin franjas grises; ancla el canvas de LightRays */

/* ── FIX nav "se agranda y se achica solo" ──────────────────────────────────
   Dentro de <main> hay elementos animados en bucle que son position:absolute /
   con transform y ESCAPAN al overflow-x:hidden del body, inflando el ancho del
   documento de forma intermitente:
     · .dpint-spin (anillos del orbital de Integraciones) → cuadros con
       border-radius:50% que rotan sin parar: su bounding-box crece/encoge ~√2×
       continuamente (las esquinas que se salen están vacías).
     · .horizontal-marquee-inner (marquee de logos) y .dp-bcard__border.
   Como el nav es position:fixed; left:0; right:0, su ancho sigue al ancho del
   documento → "se agranda y se achica todo el tiempo".
   <main> contiene TODAS esas secciones; el hero (.heroseq) y el footer son
   hermanos de <main>, así que clipear acá NO afecta el scrub del video.
   overflow-x: clip recorta el sangrado horizontal SIN crear scroll-container,
   por lo que el position:sticky de los stack-cards sigue funcionando. */
body > main { overflow-x: clip; }
.dp-process figure.bg-white { background-color: #000 !important; }

/* ───── CARDS con borde gradiente (estilo analytics-and-reporting) ─────
   PNG de borde rotado detrás, recortado por overflow-hidden. Cara interna #0f1217. */
.dp-bcard {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 20px; padding: 8px; background: #000;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.dp-bcard:hover { transform: translateY(-5px); }
.dp-bcard__border {
  position: absolute; top: -95%; left: -85%; width: 800px; height: 800px; margin: 0;
  transform: rotate(82deg); overflow: hidden; pointer-events: none; user-select: none;
}
.dp-bcard__border img { width: 100%; height: 100%; display: block; }
.dp-bcard__face {
  position: relative; z-index: 10; height: 100%;
  border-radius: 14px; padding: 2rem; background: #000;
  display: flex; flex-direction: column; gap: 1.25rem;
}
.dp-bcard__ico { display: inline-flex; }

/* botón "Solicitar demo" de la sección Process: sin la veta de brillo especular */
.dp-process .dpbtn--primary::before { content: none; }
/* botón "Consultar Integración" (sección integraciones): sin la veta de brillo */
.dpint-copy .dpbtn--primary::before { content: none; }

/* ───── RESPONSIVE ───── */
@media (max-width: 940px) {
  .dpnav__links, .dpnav__actions { display: none; }
  .dpnav__burger { display: flex; }
  .dpnav.open .dpnav__links { display: flex; position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; padding: 14px; border-radius: 20px;
    background: rgba(10,15,32,0.96); border: 1px solid var(--dp-line);
    backdrop-filter: blur(18px); }
  .dpnav.open .dpnav__links a { text-align: center; display: block; }
  .dpnav.open .dpnav__mobileonly { display: block; }
  .dpnav.open .dpnav__mobileonly:first-of-type { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--dp-line); }
  .dpnav.open .dpnav__mobiledemo {
    margin-top: 4px; color: #fff;
    background: linear-gradient(180deg, rgba(255,255,255,0.17), rgba(255,255,255,0.06));
    border: 1px solid rgba(255,255,255,0.18);
    -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8);
  }
}
.dpnav__mobileonly { display: none; }

@media (prefers-reduced-motion: reduce) {
  .heroseq { height: calc(var(--vh, 1vh) * 100); }
  .heroseq__hint { display: none; }
}

/* =========================
   Final CTA — ¿Listo para ordenar tu operación?
   ========================= */
.dp-finalcta { padding: 0 0 88px; background: #000; }
@media (min-width: 1024px) { .dp-finalcta { padding-bottom: 100px; } }
.dp-finalcta__inner { max-width: 1440px; margin: 0 auto; padding: 0 24px; }
.dp-finalcta__card {
  position: relative; overflow: hidden; border-radius: 20px;
  padding: clamp(40px, 5vw, 72px) 24px;
  background: linear-gradient(165deg, #000000 0%, #000000 48%, #1C2743 100%);
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.9);
}
.dp-finalcta__glow { position: absolute; margin: 0; pointer-events: none; z-index: 0; }
.dp-finalcta__glow img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dp-finalcta__glow--left  { left: -6%;  bottom: -18%; width: clamp(220px, 26%, 420px); aspect-ratio: 1; transform: rotate(8deg); opacity: 0.9; }
.dp-finalcta__glow--right { right: -6%; top: -22%;    width: clamp(220px, 26%, 420px); aspect-ratio: 1; transform: rotate(-6deg); opacity: 0.95; }
@media (max-width: 767px) { .dp-finalcta__glow { opacity: 0.55 !important; } }
.dp-finalcta__content { position: relative; z-index: 2; max-width: 620px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.dp-finalcta__eyebrow {
  display: inline-flex; align-items: center; margin-bottom: 22px;
  padding: 8px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: .01em; color: rgba(255,255,255,0.92);
  background: radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,0.14), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.dp-finalcta__title {
  color: #fff; font-weight: 600; line-height: 1.08; letter-spacing: -0.01em;
  font-size: clamp(34px, 5vw, 56px); margin: 0 0 18px;
}
.dp-finalcta__title .dot { color: #3b69b0; }
.dp-finalcta__sub {
  color: rgba(255,255,255,0.74); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6;
  max-width: 480px; margin: 0 auto 34px;
}
.dp-finalcta__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 34px; border-radius: 999px;
  font-size: 16px; font-weight: 500; color: #fff; text-decoration: none;
  background: radial-gradient(120% 120% at 50% -40%, rgba(255,255,255,0.16), transparent 56%), linear-gradient(180deg, #1a2742 0%, #060a14 100%);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), inset 0 -3px 8px rgba(0,0,0,0.4), 0 12px 30px -12px rgba(0,0,0,0.8);
  transition: transform .25s ease, box-shadow .25s ease;
}
.dp-finalcta__btn:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -3px 8px rgba(0,0,0,0.4), 0 18px 38px -12px rgba(0,0,0,0.9);
}

/* badge/tag de oferta (dos partes: etiqueta rellena + texto) */
.dp-offertag {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 44px;
  padding: 5px; border-radius: 999px;
  font-size: 0.82rem; line-height: 1;
  background: rgba(67, 123, 233, 0.14);
  border: 1px solid rgba(67, 123, 233, 0.4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.dp-offertag__label {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 999px;
  font-weight: 700; letter-spacing: 0.03em; color: #fff;
  background: linear-gradient(180deg, #4f86ee, #2f61c9);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 12px -4px rgba(47, 97, 201, 0.6);
}
.dp-offertag__text { padding-right: 12px; color: #bcd3ff; font-weight: 500; }
@media (max-width: 480px) {
  .dp-offertag { flex-direction: column; gap: 10px; border-radius: 18px; padding: 8px 10px 11px; text-align: center; }
  .dp-offertag__text { padding-right: 0; }
}

/* patrón de puntos en CSS (reemplaza ns-img-161.svg de 72KB → 0KB, más nítido).
   máscara para que no cubra todo: concentrado arriba-izquierda y se desvanece
   hacia abajo-derecha, como el SVG original. */
.dp-dotgrid {
  background-image: radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1.7px);
  background-size: 30px 30px;
  background-position: 0 0;
  -webkit-mask-image: radial-gradient(135% 130% at 0% 0%, #000 22%, transparent 68%);
  mask-image: radial-gradient(135% 130% at 0% 0%, #000 22%, transparent 68%);
}