/* =====================================================================
   OkApp — vitrina v2: profundidad, color y movimiento (sobre site.css).
   Ritmo claro / oscuro / color, ondas y diagonales, cristal, textura,
   marquee, mockups reales, CTA final. Respeta prefers-reduced-motion.
   ===================================================================== */
:root{--deep:#14032f;--deep-2:#1d0750;--glass:rgba(255,255,255,.08);--glass-b:rgba(255,255,255,.16);--on-dark:rgba(255,255,255,.84);--cyan:#03D3FE;--coral:#FE6F5B;--wave:56px}

/* Textura: grano (SVG) y rejilla de puntos */
.grain::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.dots{background-image:radial-gradient(rgba(56,1,138,.13) 1.2px,transparent 1.3px);background-size:22px 22px}

/* Blobs difuminados (decoración) */
.blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.blobs i{position:absolute;width:var(--s,360px);height:var(--s,360px);border-radius:50%;filter:blur(70px);opacity:var(--o,.35);background:var(--c,#03D3FE);animation:drift 22s ease-in-out infinite;animation-delay:var(--d,0s)}
.wrap,.fx-in,.hero-in{position:relative;z-index:1}

/* Temas de sección */
.theme-light{position:relative;background:#fbfbff}
.theme-tint{position:relative;background:linear-gradient(180deg,#f3eeff,#eef6ff)}
.theme-dark{position:relative;color:#fff;background:radial-gradient(900px 500px at 85% 0%,rgba(29,148,220,.35),transparent 60%),radial-gradient(700px 500px at 0% 100%,rgba(254,111,91,.18),transparent 60%),linear-gradient(160deg,var(--deep) 0%,#2a0270 55%,#163c86 100%)}
.theme-color{position:relative;color:#fff;background:linear-gradient(135deg,#38018A 0%,#4b1fb0 40%,#1660b5 100%)}
.theme-warm{position:relative;color:#fff;background:radial-gradient(700px 400px at 100% 0%,rgba(254,111,91,.45),transparent 60%),linear-gradient(150deg,#38018A 0%,#6a1b9a 55%,#8e2a7e 100%)}
.theme-dark h2,.theme-dark h3,.theme-color h2,.theme-color h3,.theme-warm h2,.theme-warm h3{color:#fff}
.theme-dark p,.theme-dark .sub,.theme-color p,.theme-color .sub,.theme-warm p,.theme-warm .sub,.theme-dark .fx-copy p{color:var(--on-dark)}
.theme-dark .kicker,.theme-color .kicker,.theme-warm .kicker{color:#9fe9ff}
.theme-dark .checks li,.theme-warm .checks li{color:#fff}
.theme-dark .checks .ico,.theme-color .checks .ico,.theme-warm .checks .ico,.fx.theme-dark .checks .ico{color:var(--cyan)}
.theme-dark .demo-try{color:#9fe9ff}
.theme-dark .fine,.theme-warm .fine{color:var(--on-dark)}
.theme-dark .fx-ico,.theme-warm .fx-ico{background:rgba(255,255,255,.12);border:1px solid var(--glass-b);box-shadow:0 14px 30px -14px rgba(3,211,254,.6)}

/* Separadores: onda arriba (máscara) o diagonal; la sección se monta sobre la anterior */
.shape-wave{margin-top:calc(var(--wave) * -1);padding-top:calc(var(--wave) + 64px);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath d='M0 56V28C180 4 360 0 540 14s360 40 540 36 270-26 360-36v42z'/%3E%3C/svg%3E") top/100% var(--wave) no-repeat,linear-gradient(#000,#000) 0 calc(var(--wave) - 1px)/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath d='M0 56V28C180 4 360 0 540 14s360 40 540 36 270-26 360-36v42z'/%3E%3C/svg%3E") top/100% var(--wave) no-repeat,linear-gradient(#000,#000) 0 calc(var(--wave) - 1px)/100% 100% no-repeat}
.shape-tilt{margin-top:calc(var(--wave) * -1);padding-top:calc(var(--wave) + 64px);clip-path:polygon(0 var(--wave),100% 0,100% 100%,0 100%)}
.shape-tilt-r{margin-top:calc(var(--wave) * -1);padding-top:calc(var(--wave) + 64px);clip-path:polygon(0 0,100% var(--wave),100% 100%,0 100%)}
.fx.shape-wave,.fx.shape-tilt,.fx.shape-tilt-r{padding-top:calc(var(--wave) + 56px)}
.section,.fx{position:relative}

/* Hero: mesh gradient animado (solo transform) y dispositivos en 3D */
.hero{background:var(--deep);padding-bottom:110px}
.hero-bg{background:linear-gradient(160deg,#1a0442 0%,#2a0270 45%,#163c86 100%)}
.mesh{position:absolute;inset:-20%;z-index:0;pointer-events:none}
.mesh span{position:absolute;border-radius:50%;filter:blur(80px);opacity:.6;will-change:transform}
.mesh span:nth-child(1){width:55%;height:55%;left:45%;top:5%;background:#1D94DC;animation:mesh1 18s ease-in-out infinite alternate}
.mesh span:nth-child(2){width:45%;height:50%;left:5%;top:35%;background:#6b1fd6;animation:mesh2 22s ease-in-out infinite alternate}
.mesh span:nth-child(3){width:30%;height:30%;left:60%;top:55%;background:#03D3FE;opacity:.35;animation:mesh3 16s ease-in-out infinite alternate}
.mesh span:nth-child(4){width:28%;height:28%;left:15%;top:0;background:#FE6F5B;opacity:.25;animation:mesh2 26s ease-in-out infinite alternate-reverse}
@keyframes mesh1{to{transform:translate(-18%,12%) scale(1.15)}}
@keyframes mesh2{to{transform:translate(20%,-10%) scale(.9)}}
@keyframes mesh3{to{transform:translate(-25%,-20%) scale(1.2)}}
.hero .grid-lines{opacity:.6}
.devices{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:1.18;perspective:1400px}
.tablet,.phone-real{position:absolute;border-radius:26px;background:#0b0618;box-shadow:0 50px 90px -40px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08) inset}
.tablet{left:0;top:6%;width:82%;aspect-ratio:1.44;padding:10px;border-radius:24px;transform:rotateY(14deg) rotateX(6deg) rotateZ(-2deg);transform-origin:left center}
.tablet img,.phone-real img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:15px;background:#fff}
.phone-real{right:2%;bottom:0;width:34%;aspect-ratio:.46;padding:8px;border-radius:30px;transform:rotateY(-12deg) rotateX(4deg) rotateZ(3deg)}
.phone-real img{border-radius:23px}
.phone-real::before{content:"";position:absolute;left:50%;top:13px;width:30%;height:5%;max-height:16px;border-radius:9px;background:#0b0618;transform:translateX(-50%);z-index:1}
.devices .tilt-wrap{position:absolute;inset:0;transform-style:preserve-3d;animation:float 8s ease-in-out infinite}
.devices .float-card{z-index:2}
@keyframes float{50%{transform:translateY(-12px) rotateX(2deg)}}
.phone-solo{position:relative;width:min(280px,72vw);aspect-ratio:.46;margin:0 auto;padding:9px;border-radius:38px;background:#0b0618;box-shadow:0 50px 90px -40px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08) inset;transform:perspective(1200px) translateY(var(--py,0px)) rotateY(-10deg) rotateX(4deg)}
.phone-solo img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:30px;background:#fff}
.tablet-solo{position:relative;width:100%;max-width:560px;aspect-ratio:1.44;margin:0 auto;padding:10px;border-radius:24px;background:#0b0618;box-shadow:0 50px 90px -40px rgba(0,0,0,.7);transform:perspective(1400px) translateY(var(--py,0px)) rotateY(-12deg) rotateX(5deg)}
.tablet-solo img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left;border-radius:15px;background:#fff}
@media (min-width:1024px){.hero{padding-bottom:150px}}

/* Marquee de sectores */
.marquee{position:relative;overflow:hidden;padding:20px 0;background:linear-gradient(90deg,#38018A,#1660b5);color:#fff;z-index:2}
.marquee-track{display:flex;width:max-content;animation:marquee 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee ul{display:flex;gap:14px;margin:0;padding:0 7px;list-style:none}
.marquee li{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);font-weight:700;white-space:nowrap}
.marquee li .ico{color:var(--cyan)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Cifras animadas */
.stats-band{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:28px 0 8px}
@media (min-width:900px){.stats-band{grid-template-columns:repeat(4,1fr)}}
.stat-tile{position:relative;padding:20px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px -30px rgba(56,1,138,.45);overflow:hidden}
.stat-tile b{display:block;font-size:clamp(1.9rem,6vw,2.6rem);font-weight:800;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-tile span{display:block;margin-top:6px;color:var(--muted);font-weight:600;font-size:.9rem}

/* Cristal: tarjetas translúcidas sobre secciones de color */
.glass{background:var(--glass);border:1px solid var(--glass-b);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff}
.theme-dark .timeline li,.theme-dark .feature,.theme-dark .ap-mods li,.theme-color .feature,.theme-warm .sh-steps li span{background:var(--glass);border:1px solid var(--glass-b);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff}
.theme-dark .timeline li p,.theme-dark .feature p{color:var(--on-dark)}
.theme-dark .t-num{color:rgba(255,255,255,.12)}
.theme-dark .t-ico,.theme-dark .feature-ico{background:rgba(255,255,255,.12);color:var(--cyan);box-shadow:none}
.theme-dark .ap-mods .ico{color:var(--cyan)}
.lift{position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.lift::after{content:"";position:absolute;inset:-40% auto -40% -60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg) translateX(0);transition:transform .9s var(--ease);pointer-events:none}
.lift:hover{transform:translateY(-8px);box-shadow:0 26px 50px -26px rgba(3,211,254,.55);border-color:rgba(3,211,254,.5)}
.lift:hover::after{transform:skewX(-18deg) translateX(420%)}
.theme-light .lift:hover{box-shadow:0 26px 50px -26px rgba(56,1,138,.45);border-color:rgba(56,1,138,.3)}

/* Botones: degradado con brillo que recorre al pasar el ratón */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .8s var(--ease);z-index:-1}
.btn-primary:hover::after{left:120%}
.btn-primary:hover{box-shadow:0 18px 40px -14px rgba(3,211,254,.6)}
.btn-light{box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}

/* Iconos que se dibujan al aparecer */
.reveal .draw svg *{stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1) .2s}
.reveal.in .draw svg *{stroke-dashoffset:0}

/* Funcionalidades */
.fx{padding:84px 0}
.fx-copy h2{font-size:clamp(1.6rem,4.6vw,2.4rem)}
.theme-light .fx-art .fx-blob{box-shadow:0 40px 80px -30px rgba(56,1,138,.6)}
.illus{display:block;width:min(420px,88vw);height:auto;margin:0 auto;border-radius:28px}
.fx-index a{box-shadow:0 10px 24px -20px rgba(56,1,138,.6)}

/* OkApp Tessere (para los clientes) */
.shoppers.theme-warm .sh-steps li{color:#fff}
.shoppers.theme-warm .sh-steps li span{background:#fff;color:var(--p)}
.shoppers.theme-warm .fine{color:var(--on-dark)}
.shoppers.theme-warm .fine .ico{color:var(--cyan)}

/* Precios y planes */
.plan.featured{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(56,1,138,.55)}
.plan.featured::before{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;background:var(--grad);filter:blur(18px);opacity:.35}
.plans .plan{isolation:isolate}

/* Tarjetas blancas dentro de secciones oscuras: texto oscuro (contraste AA) */
.theme-dark .plan,.theme-dark .example,.theme-dark .faq details,.theme-dark .modules,.theme-dark .contact-form{color:var(--text)}
.theme-dark .plan h3,.theme-dark .example strong,.theme-dark .plan .price,.theme-dark .faq summary{color:var(--ink)}
.theme-dark .plan p,.theme-dark .plan-desc,.theme-dark .example small,.theme-dark .faq details p{color:var(--muted)}
.theme-dark .plan li.off{color:#8d88a6}
.theme-dark .example .ex-go{color:#1576b8}

/* CTA final a todo color */
.cta-final{position:relative;overflow:hidden;text-align:center;padding:96px 0 110px}
.cta-final h2{font-size:clamp(2rem,6.2vw,3.4rem);max-width:18ch;margin:0 auto .4em}
.cta-final p{max-width:40rem;margin:0 auto 26px;font-size:1.1rem}
.cta-final .cta-row{justify-content:center}
.cta-final .trust{justify-content:center;color:#fff}
.btn-outline-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.btn-outline-light:hover{background:rgba(255,255,255,.12)}

/* Parallax (lo mueve site.js) */
.devices,.fx-art,.illus{transform:translateY(var(--py,0px))}
[data-parallax]{will-change:transform}

/* Pie oscuro con onda */
.foot{position:relative}

@media (prefers-reduced-motion:reduce){
  .mesh span,.blobs i,.marquee-track,.devices .tilt-wrap{animation:none!important}
  .marquee-track{flex-wrap:wrap;width:auto}.marquee ul[aria-hidden]{display:none}
  .reveal .draw svg *{stroke-dasharray:none;stroke-dashoffset:0}
  [data-parallax]{--py:0px!important}
}