/*
 * POS360 — capa visual 2026 (movimiento + ecosistema). Se suma a styles.v20260922.css sin reemplazarlo.
 * Author: SIVOL® - Aldo Frias - Argentina
 * Si algo falla, borrar el <link> de esta hoja y el sitio vuelve a verse como antes.
 */
:root {
  --px-grad: linear-gradient(135deg, #21d4f4, #55f1c8);
  --px-glass: rgba(255, 255, 255, .08);
  --px-glass-line: rgba(255, 255, 255, .2);
}

/* ---------- barra de progreso + encabezado ---------- */
.scroll-progress, .px-progress { position: fixed; top: 0; left: 0; z-index: 80; width: 100%; height: 3px; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #21d4f4, #0ebc83); pointer-events: none; }
.site-header { transition: background .3s, box-shadow .3s; }
.site-header.px-scrolled { background: rgba(4, 16, 30, .94); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.menu a:not(.nav-cta) { position: relative; }
.menu a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--px-grad); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.menu a:not(.nav-cta):hover::after { transform: scaleX(1); }
.menu .nav-cta { background: var(--px-grad); box-shadow: 0 8px 22px rgba(33, 212, 244, .3); }

/* ---------- botones con brillo ---------- */
.button { position: relative; overflow: hidden; }
.button::after { content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transition: left .6s; }
.button:hover::after { left: 130%; }
.hero .button-primary { animation: px-pulse 3.2s ease-in-out infinite; }
@keyframes px-pulse { 0%, 100% { box-shadow: 0 13px 34px rgba(33, 212, 244, .26); } 50% { box-shadow: 0 13px 46px rgba(33, 212, 244, .55), 0 0 0 7px rgba(33, 212, 244, .08); } }

/* ---------- portada ---------- */
.hero { isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: -20%; z-index: -1; background: conic-gradient(from 0deg at 70% 30%, rgba(33, 212, 244, .16), rgba(14, 188, 131, .12), rgba(8, 124, 193, .18), rgba(33, 212, 244, .16)); filter: blur(70px); animation: px-spin 40s linear infinite; }
@keyframes px-spin { to { transform: rotate(360deg); } }
.hero .hero-glow-one { animation: px-drift-a 13s ease-in-out infinite alternate; }
.hero .hero-glow-two { animation: px-drift-b 16s ease-in-out infinite alternate; }
@keyframes px-drift-a { to { transform: translate(-80px, 60px) scale(1.25); } }
@keyframes px-drift-b { to { transform: translate(100px, -60px) scale(1.2); } }
.hero h1 { text-wrap: balance; }
.hero h1 em { background: linear-gradient(90deg, #7ff0ff, #55f1c8, #7ff0ff); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: px-shine 7s linear infinite; }
@keyframes px-shine { to { background-position: 200% 0; } }
.px-rotator-line { display: flex; flex-wrap: wrap; gap: .4em; align-items: baseline; margin: -4px 0 18px; color: #e6f6fb; font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 700; }
.px-rotator { position: relative; display: inline-block; min-width: 4ch; padding: 0 .3em; border-radius: 8px; background: rgba(33, 212, 244, .16); color: #7ff0ff; transition: opacity .35s, transform .35s; }
.px-rotator.px-out { opacity: 0; transform: translateY(8px); }
.px-rotator::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -.12em; background: #7ff0ff; animation: px-blink 1s steps(1) infinite; }
@keyframes px-blink { 50% { opacity: 0; } }
.hero-media { perspective: 900px; }
.hero-media .hero-photo { transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform .25s ease-out; will-change: transform; }
.px-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--px-glass-line); border-radius: 14px; background: rgba(5, 22, 41, .82); color: #fff; font-size: .82rem; font-weight: 700; backdrop-filter: blur(12px); box-shadow: 0 16px 34px rgba(0, 0, 0, .28); animation: px-bob 5s ease-in-out infinite; }
.px-float b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--px-grad); font-size: .95rem; }
.px-float.f1 { top: 4%; left: -6%; }
.px-float.f2 { top: 30%; right: -7%; animation-delay: -1.2s; }
.px-float.f3 { bottom: 24%; left: -9%; animation-delay: -2.4s; }
.px-float.f4 { bottom: 4%; right: -3%; animation-delay: -3.4s; }
@keyframes px-bob { 50% { transform: translateY(-10px); } }

/* ---------- cinta de ecosistema (reemplaza la franja estática) ---------- */
.px-marquee { overflow: hidden; padding: 16px 0; 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); }
.px-marquee-track { display: inline-flex; gap: 14px; padding-left: 14px; animation: px-marquee 46s linear infinite; }
.px-marquee:hover .px-marquee-track { animation-play-state: paused; }
.px-marquee-track span { padding: 9px 18px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(255, 255, 255, .05); color: #dff3fa; font-size: .88rem; font-weight: 700; }
@keyframes px-marquee { to { transform: translateX(-50%); } }

/* ---------- títulos y tarjetas ---------- */
.section-heading h2 { text-wrap: balance; }
.px-grad { background: linear-gradient(90deg, #087cc1, #0ebc83); -webkit-background-clip: text; background-clip: text; color: transparent; }
.feature-card, .px-tile, .stat, .pillar { position: relative; overflow: hidden; transition: transform .3s, box-shadow .3s, border-color .3s; }
.feature-card::before, .px-tile::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(33, 212, 244, .16), transparent 60%); transition: opacity .3s; pointer-events: none; }
.feature-card:hover::before, .px-tile:hover::before { opacity: 1; }
.feature-card > *, .px-tile > * { position: relative; z-index: 1; }
.feature-card:hover { transform: translateY(-6px); border-color: #9ecedf; box-shadow: 0 22px 44px rgba(8, 124, 193, .16); }
.feature-icon { transition: transform .35s; }
.feature-card:hover .feature-icon { transform: rotate(-8deg) scale(1.12); }

/* ---------- sección ecosistema (bento) ---------- */
.px-eco { position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle at 15% 0%, rgba(33, 212, 244, .16), transparent 40%), radial-gradient(circle at 90% 100%, rgba(14, 188, 131, .16), transparent 40%), linear-gradient(160deg, #041426, #07304d 70%, #064a64); }
.px-eco .section-heading h2 { color: #fff; }
.px-eco .section-heading > p:last-child { color: #bcd8e6; }
.px-eco .eyebrow { color: var(--cyan); }
.px-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.px-tile { display: flex; flex-direction: column; gap: 10px; padding: 26px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 22px; background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); backdrop-filter: blur(6px); }
.px-tile:hover { transform: translateY(-6px); border-color: rgba(33, 212, 244, .55); box-shadow: 0 24px 50px rgba(0, 0, 0, .35); }
.px-tile h3 { margin: 0; font-size: 1.3rem; }
.px-tile p { margin: 0; color: #c2dcea; font-size: .96rem; }
.px-tile .tag { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--px-grad); color: #03273c; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.px-tile.t-big { grid-column: span 4; }
.px-tile.t-mid { grid-column: span 2; }
.px-tile.t-third { grid-column: span 3; }
.px-tile ul { margin: 4px 0 0; padding-left: 1.1em; color: #d6ebf4; font-size: .94rem; }
.px-tile li { margin-bottom: 5px; }
.px-big-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; align-items: center; }
/* chat animado de muestra */
.px-chat { display: flex; flex-direction: column; gap: 9px; padding: 16px; border-radius: 18px; background: rgba(2, 12, 24, .55); border: 1px solid rgba(255, 255, 255, .12); }
.px-chat .bar { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: #9fd8ea; font-size: .78rem; font-weight: 700; }
.px-chat .dot { width: 8px; height: 8px; border-radius: 50%; background: #0ebc83; box-shadow: 0 0 0 0 rgba(14, 188, 131, .7); animation: px-ping 2s infinite; }
@keyframes px-ping { 70% { box-shadow: 0 0 0 9px rgba(14, 188, 131, 0); } 100% { box-shadow: 0 0 0 0 rgba(14, 188, 131, 0); } }
.px-msg { max-width: 82%; padding: 8px 12px; border-radius: 14px; font-size: .85rem; opacity: 0; transform: translateY(8px); animation: px-msg 12s infinite; }
.px-msg.c { align-self: flex-start; background: rgba(255, 255, 255, .14); color: #fff; border-bottom-left-radius: 4px; }
.px-msg.s { align-self: flex-end; background: #0ebc83; color: #02261b; font-weight: 600; border-bottom-right-radius: 4px; }
.px-msg:nth-of-type(2) { animation-delay: 0s; }
.px-msg:nth-of-type(3) { animation-delay: 1.6s; }
.px-msg:nth-of-type(4) { animation-delay: 3.2s; }
.px-msg:nth-of-type(5) { animation-delay: 4.8s; }
@keyframes px-msg { 0% { opacity: 0; transform: translateY(8px); } 6%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-4px); } }
/* flujo conectado */
.px-flow { display: flex; flex-direction: column; gap: 8px; }
.px-flow span { position: relative; padding: 8px 12px 8px 34px; border-radius: 10px; background: rgba(255, 255, 255, .07); color: #e6f6fb; font-size: .86rem; font-weight: 700; }
.px-flow span::before { content: ""; position: absolute; left: 12px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #21d4f4; animation: px-step 6s infinite; }
.px-flow span:nth-child(2)::before { animation-delay: 1s; }
.px-flow span:nth-child(3)::before { animation-delay: 2s; }
.px-flow span:nth-child(4)::before { animation-delay: 3s; }
.px-flow span:nth-child(5)::before { animation-delay: 4s; }
@keyframes px-step { 0%, 100% { background: #21d4f4; transform: scale(1); } 12% { background: #55f1c8; transform: scale(1.6); box-shadow: 0 0 14px #55f1c8; } 30% { background: #21d4f4; transform: scale(1); box-shadow: none; } }
.px-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-top: 28px; }
.px-stats .stat { padding: 18px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; background: rgba(255, 255, 255, .06); text-align: center; }
.px-stats .stat strong { display: block; background: var(--px-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.05; }
.px-stats .stat span { display: block; margin-top: 6px; color: #bcd8e6; font-size: .88rem; }

/* ---------- otras secciones ---------- */
.demo-cta { position: relative; overflow: hidden; }
.demo-cta::before { content: ""; position: absolute; inset: -30%; background: conic-gradient(from 90deg, rgba(33, 212, 244, .14), transparent 30%, rgba(14, 188, 131, .14) 60%, transparent); animation: px-spin 50s linear infinite reverse; pointer-events: none; }
.demo-cta > * { position: relative; }
.visual-card { transition: transform .4s, box-shadow .4s; }
.visual-card:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 30px 60px rgba(2, 22, 43, .22); }
.reveal { will-change: opacity, transform; }
.px-stagger > .reveal:nth-child(2) { transition-delay: .07s; }
.px-stagger > .reveal:nth-child(3) { transition-delay: .14s; }
.px-stagger > .reveal:nth-child(4) { transition-delay: .21s; }
.px-stagger > .reveal:nth-child(5) { transition-delay: .28s; }
.px-stagger > .reveal:nth-child(6) { transition-delay: .35s; }

@media (max-width: 980px) {
  .px-bento { grid-template-columns: 1fr 1fr; }
  .px-tile.t-big, .px-tile.t-third { grid-column: span 2; }
  .px-tile.t-mid { grid-column: span 1; }
  .px-big-grid { grid-template-columns: 1fr; }
  .px-float.f1 { left: 0; } .px-float.f2 { right: 0; } .px-float.f3 { left: 0; } .px-float.f4 { right: 0; }
}
@media (max-width: 640px) {
  .px-bento { grid-template-columns: 1fr; }
  .px-tile.t-big, .px-tile.t-third, .px-tile.t-mid { grid-column: span 1; }
  .px-float { display: none; }
  .px-marquee-track { animation-duration: 32s; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .demo-cta::before, .hero .hero-glow-one, .hero .hero-glow-two, .hero h1 em, .px-float, .px-marquee-track, .px-msg, .px-flow span::before, .px-chat .dot, .hero .button-primary, .px-rotator::after { animation: none !important; }
  .px-msg { opacity: 1; transform: none; }
  .hero-media .hero-photo, .feature-card, .px-tile, .visual-card { transition: none; transform: none !important; }
  .button::after { display: none; }
}

.section-actions { display: flex; justify-content: center; margin-top: 30px; }