/* ============================================================
   downloaderV — ESTILOS PRO (máximo nivel · animaciones)
   ============================================================ */
:root{
  --bg:#FFFFFF;
  --bg-soft:#F7F9FC;
  --ink:#0A0E1A;
  --ink-soft:#5A6478;
  --line:#EDF0F5;
  --card:#FFFFFF;
  --hero-1:#0A0E1A; --hero-2:#0F172A; --hero-3:#070A12;
  --blue:#1A73E8; --blue2:#4F8DF7; --purple:#8B5CF6; --pink:#EC4899; --green:#10B981; --amber:#F59E0B; --cyan:#06B6D4; --indigo:#6366F1;
  --maxw:1200px;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;
  --shadow-sm:0 1px 2px rgba(10,14,26,.04), 0 4px 12px rgba(10,14,26,.04);
  --shadow-md:0 10px 30px -12px rgba(10,14,26,.15);
  --shadow-lg:0 40px 90px -30px rgba(26,115,232,.25), 0 30px 60px -40px rgba(0,0,0,.3);
  --shadow-glow:0 0 0 1px rgba(26,115,232,.1), 0 20px 60px -20px rgba(26,115,232,.35);
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body); background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.6}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}

/* Fondo global con destellos sutiles */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(800px 500px at 12% 8%, rgba(26,115,232,.06), transparent 60%),
    radial-gradient(700px 500px at 88% 22%, rgba(139,92,246,.05), transparent 60%),
    radial-gradient(700px 600px at 50% 100%, rgba(6,182,212,.04), transparent 60%);
}

/* ====== UTILIDADES DE ANIMACIÓN ====== */
.grad-text{
  background:linear-gradient(100deg,#1A73E8,#8B5CF6,#EC4899,#06B6D4,#1A73E8);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradMove 9s linear infinite;
}
@keyframes gradMove{to{background-position:300% 0}}

.float{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes ring{0%{transform:scale(.8);opacity:.7}100%{transform:scale(2.2);opacity:0}}

/* ---------- NAV ---------- */
.nav{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.72); backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid rgba(237,240,245,.8); transition:box-shadow .3s}
.nav.scrolled{box-shadow:0 6px 24px -12px rgba(10,14,26,.12)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:70px}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:.3px}
.brand img{width:34px; height:34px; border-radius:9px; box-shadow:0 4px 14px -4px rgba(26,115,232,.5)}
.brand-dot{width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--blue),#6D28D9); display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-weight:700}
.nav-links{display:flex; align-items:center; gap:30px}
.nav-links a:not(.nav-cta){font-size:13px; font-weight:600; letter-spacing:1px; color:var(--ink-soft); position:relative; transition:color .2s}
.nav-links a:not(.nav-cta)::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--blue),var(--purple)); transition:width .3s}
.nav-links a:not(.nav-cta):hover{color:var(--ink)}
.nav-links a:not(.nav-cta):hover::after{width:100%}
.nav-cta{position:relative; background:linear-gradient(135deg,var(--ink),#1f2937); color:#fff; padding:10px 20px; border-radius:999px; font-size:13px; font-weight:700; overflow:hidden; transition:transform .2s, box-shadow .3s}
.nav-cta::before{content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.4),transparent 70%); transform:translateX(-120%)}
.nav-cta:hover{transform:translateY(-2px); box-shadow:0 12px 28px -10px rgba(10,14,26,.5)}
.nav-cta:hover::before{transform:translateX(120%); transition:transform .7s}
@media(max-width:720px){ .nav-links a:not(.nav-cta){display:none} }

/* ---------- HERO ---------- */
.hero-pad{padding:28px 22px 0}
.hero{position:relative; max-width:var(--maxw); margin:0 auto; border-radius:36px; overflow:hidden; background:linear-gradient(160deg,var(--hero-1),var(--hero-2) 55%,var(--hero-3)); border:1px solid rgba(255,255,255,.07); box-shadow:var(--shadow-lg); isolation:isolate}
/* aurora animada multicapa */
.aurora{position:absolute; inset:-35% -15%; z-index:-1; filter:blur(70px); opacity:.6}
.aurora span{position:absolute; width:50%; height:50%; border-radius:50%; mix-blend-mode:screen; animation:drift 20s ease-in-out infinite}
.a1{background:#1A73E8; top:0%; left:6%}
.a2{background:#8B5CF6; top:25%; right:2%; animation-delay:-7s}
.a3{background:#EC4899; bottom:-5%; left:30%; animation-delay:-14s}
.a4{background:#06B6D4; top:40%; left:40%; width:38%; height:38%; animation-delay:-4s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(10%,8%) scale(1.2)}50%{transform:translate(-8%,5%) scale(.9)}75%{transform:translate(6%,-6%) scale(1.1)}}
/* malla de puntos */
.hero-mesh{position:absolute; inset:0; z-index:-1; opacity:.5; background:radial-gradient(130% 130% at 50% 0%, transparent 50%, rgba(0,0,0,.6) 100%)}
.hero-dots{position:absolute; inset:0; z-index:-1; opacity:.25; background-image:radial-gradient(rgba(255,255,255,.4) 1px, transparent 1px); background-size:34px 34px; mask-image:radial-gradient(70% 60% at 50% 40%, #000, transparent 75%); -webkit-mask-image:radial-gradient(70% 60% at 50% 40%, #000, transparent 75%)}
/* orbes flotantes decorativos */
.orb{position:absolute; border-radius:50%; filter:blur(2px); z-index:-1; opacity:.6}
.orb.o1{width:14px;height:14px;background:#4F8DF7; top:22%; left:14%; box-shadow:0 0 22px 4px rgba(79,141,247,.7)}
.orb.o2{width:9px;height:9px;background:#A78BFA; top:62%; left:20%; box-shadow:0 0 18px 3px rgba(167,139,250,.7)}
.orb.o3{width:11px;height:11px;background:#F472B6; top:30%; right:16%; box-shadow:0 0 20px 4px rgba(244,114,182,.7)}
.orb.o4{width:7px;height:7px;background:#22D3EE; bottom:24%; right:24%; box-shadow:0 0 16px 3px rgba(34,211,238,.7)}

.hero-inner{position:relative; padding:clamp(44px,7vw,100px) clamp(20px,5vw,64px); text-align:center; min-height:min(88vh,860px); display:flex; flex-direction:column; justify-content:center; align-items:center}
.badge-row{position:absolute; top:26px; left:26px; right:26px; display:flex; justify-content:space-between; pointer-events:none}
.glass{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-radius:999px; padding:9px 16px; color:#fff; font-size:11px; font-weight:700; letter-spacing:2px; display:inline-flex; align-items:center; gap:8px; box-shadow:0 8px 30px -10px rgba(0,0,0,.5)}
.live-dot{width:7px; height:7px; border-radius:50%; background:#EF4444; box-shadow:0 0 10px 2px #EF4444; animation:pulse 1.6s ease-in-out infinite}
.hero-pill{margin-bottom:32px; animation:float 6s ease-in-out infinite}
.hero-pill img{width:26px; height:26px; border-radius:7px}
.hero h1{font-family:var(--font-display); font-weight:700; font-size:clamp(40px,7.8vw,92px); line-height:1.0; letter-spacing:-.035em; margin-bottom:24px}
.hero h1 .l1{display:block; background:linear-gradient(180deg,#fff 0%,#E5E7EB 60%,#94A3B8 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero h1 .l2{display:block; background:linear-gradient(100deg,#4F8DF7,#A78BFA,#F472B6,#22D3EE,#4F8DF7); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:gradMove 8s linear infinite}
.hero p.sub{max-width:730px; color:#C7D2E0; font-size:clamp(15px,1.7vw,20px); font-weight:400; margin:0 auto 38px}
.chips{display:flex; flex-wrap:wrap; gap:11px; justify-content:center; margin-bottom:48px}
.chip{display:inline-flex; align-items:center; gap:9px; background:rgba(15,23,42,.5); border:1.5px solid rgba(255,255,255,.15); border-radius:999px; padding:11px 18px; color:#fff; font-size:13px; font-weight:700; transition:transform .25s, border-color .25s, background .25s}
.chip:hover{transform:translateY(-3px); border-color:rgba(255,255,255,.35); background:rgba(15,23,42,.75)}
.chip svg{width:17px; height:17px}
.chip.hl{border-color:rgba(245,158,11,.6); box-shadow:0 8px 30px -8px rgba(245,158,11,.45)}
.c-blue{color:#60A5FA}.c-purple{color:#A78BFA}.c-pink{color:#F472B6}.c-green{color:#34D399}.c-amber{color:#FBBF24}.c-cyan{color:#22D3EE}

/* Botón descarga con brillo */
.dl-btn{position:relative; display:inline-flex; align-items:center; gap:14px; background:#fff; color:var(--ink); padding:17px 32px; border-radius:999px; font-weight:800; font-size:16px; border:none; cursor:pointer; overflow:hidden; transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; box-shadow:0 20px 50px -16px rgba(255,255,255,.5)}
.dl-btn::before{content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(26,115,232,.18),transparent 70%); transform:translateX(-130%)}
.dl-btn:hover{transform:translateY(-4px) scale(1.02); box-shadow:0 30px 70px -18px rgba(255,255,255,.65)}
.dl-btn:hover::before{transform:translateX(130%); transition:transform .8s}
.dl-btn .ic{width:30px; height:30px; display:grid; place-items:center}
.dl-btn .ic svg{width:26px; height:26px}
.dl-btn small{display:block; font-size:11px; font-weight:600; color:var(--ink-soft); letter-spacing:.4px; line-height:1}
.dl-btn b{display:block; font-size:17px; line-height:1.15}

/* Tira de plataformas (marquee) bajo el hero */
.marquee{overflow:hidden; padding:30px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee .track{display:flex; gap:60px; width:max-content; animation:scrollX 28s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes scrollX{to{transform:translateX(-50%)}}
.mq-item{display:inline-flex; align-items:center; gap:11px; font-weight:700; font-size:19px; color:#94A3B8; white-space:nowrap}
.mq-item svg{width:26px; height:26px}

/* ---------- SECCIONES base ---------- */
.section{padding:clamp(70px,9vw,124px) 0}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase}
.sec-head{max-width:740px; margin:0 auto 64px; text-align:center}
.sec-head .eyebrow{color:var(--blue); margin-bottom:16px; display:inline-flex; align-items:center; gap:8px}
.sec-head .eyebrow::before{content:""; width:24px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--blue),var(--purple))}
.sec-head .eyebrow::after{content:""; width:24px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--purple),var(--blue))}
.sec-head h2{font-family:var(--font-display); font-weight:700; font-size:clamp(32px,4.8vw,58px); letter-spacing:-.025em; line-height:1.06}
.sec-head p{color:var(--ink-soft); font-size:clamp(15px,1.6vw,18px); margin-top:18px}
.sec-soft{background:linear-gradient(180deg,var(--bg-soft),#fff)}
.sec-dark{position:relative; background:linear-gradient(180deg,#0A0E1A,#070A12); color:#fff; overflow:hidden}
.sec-dark::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(600px 400px at 15% 10%, rgba(26,115,232,.14), transparent 60%), radial-gradient(600px 400px at 85% 90%, rgba(139,92,246,.12), transparent 60%)}
.sec-dark>*{position:relative}
.sec-dark .sec-head h2{color:#fff}
.sec-dark .sec-head .eyebrow{color:#60A5FA}
.sec-dark .sec-head p{color:#94A3B8}

/* ---------- FEATURE CARDS (con brillo + borde animado) ---------- */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media(max-width:920px){ .features{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .features{grid-template-columns:1fr} }
.feat{position:relative; background:var(--card); border:1px solid var(--line); border-radius:26px; padding:34px 30px; overflow:hidden; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s}
.feat::after{content:""; position:absolute; top:0; left:-60%; width:50%; height:100%; background:linear-gradient(110deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg); opacity:0; transition:opacity .2s}
.feat:hover{transform:translateY(-8px); box-shadow:var(--shadow-glow); border-color:transparent}
.feat:hover::after{opacity:1; animation:shine 1s ease}
@keyframes shine{to{left:130%}}
.feat .glow{position:absolute; width:240px; height:240px; right:-80px; top:-80px; border-radius:50%; opacity:0; transition:opacity .4s; filter:blur(16px)}
.feat:hover .glow{opacity:.2}
.feat .ico{position:relative; width:58px; height:58px; border-radius:17px; display:grid; place-items:center; margin-bottom:24px; transition:transform .35s}
.feat:hover .ico{transform:scale(1.08) rotate(-4deg)}
.feat .ico::after{content:""; position:absolute; inset:0; border-radius:17px; box-shadow:inset 0 1px 1px rgba(255,255,255,.4)}
.feat .ico svg{width:28px; height:28px; color:#fff}
.feat h3{font-family:var(--font-display); font-weight:600; font-size:21px; letter-spacing:-.01em; margin-bottom:11px; line-height:1.15}
.feat p{color:var(--ink-soft); font-size:14.5px}
.sec-dark .feat{background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.09)}
.sec-dark .feat h3{color:#fff}
.sec-dark .feat p{color:#94A3B8}
.sec-dark .feat::after{background:linear-gradient(110deg,transparent,rgba(255,255,255,.12),transparent)}
.tag{position:absolute; top:24px; right:24px; font-size:10px; font-weight:800; letter-spacing:1px; padding:6px 11px; border-radius:999px; text-transform:uppercase; color:#fff; box-shadow:0 6px 16px -6px rgba(0,0,0,.4)}
.bg-blue{background:linear-gradient(135deg,#1A73E8,#0D47A1)}
.bg-purple{background:linear-gradient(135deg,#8B5CF6,#6D28D9)}
.bg-pink{background:linear-gradient(135deg,#EC4899,#9D174D)}
.bg-green{background:linear-gradient(135deg,#10B981,#047857)}
.bg-amber{background:linear-gradient(135deg,#F59E0B,#B45309)}
.bg-cyan{background:linear-gradient(135deg,#06B6D4,#0E7490)}
.bg-indigo{background:linear-gradient(135deg,#6366F1,#4338CA)}
.gl-blue{background:#1A73E8}.gl-purple{background:#8B5CF6}.gl-pink{background:#EC4899}.gl-green{background:#10B981}.gl-amber{background:#F59E0B}.gl-cyan{background:#06B6D4}

/* ---------- SPLIT ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center}
@media(max-width:880px){ .split{grid-template-columns:1fr; gap:40px} }
.split.rev .visual{order:-1}
@media(max-width:880px){ .split.rev .visual{order:0} }
.split h2{font-family:var(--font-display); font-weight:700; font-size:clamp(30px,4.2vw,50px); letter-spacing:-.025em; line-height:1.06; margin:16px 0 20px}
.split p.lead{font-size:clamp(15px,1.6vw,18px); color:var(--ink-soft); max-width:520px}
.sec-dark .split p.lead{color:#94A3B8}

/* ---------- PLATAFORMAS chips ---------- */
.pchips{display:flex; flex-wrap:wrap; gap:11px; margin-top:26px}
.pchip{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; font-size:13px; font-weight:700; border:1px solid var(--line); background:#fff; color:#1f2937; transition:transform .2s, box-shadow .2s}
.pchip:hover{transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.sec-dark .pchip{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); color:#E2E8F0}
.pchip.more{background:linear-gradient(135deg,var(--blue),#6D28D9); color:#fff; border:none; box-shadow:0 10px 24px -10px rgba(26,115,232,.6)}

/* ---------- MOCKUP ---------- */
.mock{background:#0D1424; border:1px solid rgba(255,255,255,.1); border-radius:24px; overflow:hidden; box-shadow:0 50px 100px -34px rgba(0,0,0,.6); transition:transform .4s}
.mock:hover{transform:translateY(-6px)}
.mock-top{display:flex; align-items:center; gap:7px; padding:15px 17px; border-bottom:1px solid rgba(255,255,255,.07)}
.dot{width:11px; height:11px; border-radius:50%}
.dot.r{background:#FF5F57}.dot.y{background:#FEBC2E}.dot.g{background:#28C840}
.mock-label{margin-left:10px; color:rgba(255,255,255,.5); font-size:11px; font-weight:600}
.mock-body{padding:24px}
.dlbar{background:rgba(255,255,255,.06); border-radius:16px; padding:20px; color:#fff}
.dlbar .row{display:flex; justify-content:space-between; align-items:center; font-size:13px; margin-bottom:12px}
.dlbar .pct{font-family:var(--font-display); font-weight:700; color:#34D399}
.bar{height:11px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden; position:relative}
.bar i{display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#1A73E8,#22D3EE,#34D399); background-size:200% 100%; transition:width 1.8s cubic-bezier(.2,.8,.2,1); animation:gradMove 3s linear infinite}
.dlbar.in .bar i{width:78%}
.quality-tags{display:flex; gap:8px; margin-top:18px; flex-wrap:wrap}
.qtag{font-size:11px; font-weight:700; padding:7px 12px; border-radius:9px; background:rgba(255,255,255,.08); color:#E2E8F0}
.qtag.max{background:linear-gradient(135deg,#F59E0B,#B45309); color:#fff}

/* ---------- STEPS ---------- */
.steps{display:grid; gap:18px}
.step{position:relative; display:flex; gap:20px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:26px; overflow:hidden; transition:transform .3s, box-shadow .3s, border-color .3s}
.step::after{content:""; position:absolute; top:0; left:-60%; width:45%; height:100%; background:linear-gradient(110deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-18deg); opacity:0}
.step:hover{transform:translateX(6px); box-shadow:var(--shadow-md); border-color:transparent}
.step:hover::after{opacity:1; animation:shine 1s ease}
.sec-dark .step{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1)}
.sec-dark .step::after{background:linear-gradient(110deg,transparent,rgba(255,255,255,.12),transparent)}
.step .num{flex:none; width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:18px; color:#fff; box-shadow:0 8px 20px -8px rgba(0,0,0,.4)}
.step h4{font-family:var(--font-display); font-weight:600; font-size:17px; margin-bottom:6px}
.step p{color:var(--ink-soft); font-size:14px}
.sec-dark .step h4{color:#fff}
.sec-dark .step p{color:#94A3B8}

/* ---------- WARNING ---------- */
.warn{display:flex; gap:16px; align-items:flex-start; background:linear-gradient(135deg,rgba(245,158,11,.12),rgba(245,158,11,.04)); border:1.5px solid rgba(245,158,11,.4); border-radius:20px; padding:26px; margin-top:30px; box-shadow:0 20px 50px -30px rgba(245,158,11,.4)}
.warn .wi{flex:none; width:42px; height:42px; border-radius:13px; background:linear-gradient(135deg,#F59E0B,#B45309); display:grid; place-items:center; color:#fff; animation:pulse 2.4s ease-in-out infinite}
.warn b{display:block; font-family:var(--font-display); font-size:16px; margin-bottom:6px}
.warn p{font-size:14px; color:var(--ink-soft)}
.sec-dark .warn p{color:#CBD5E1}

/* ---------- STATS (con cuenta animada) ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:60px}
@media(max-width:760px){ .stats{grid-template-columns:repeat(2,1fr)} }
.stat{position:relative; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:30px; text-align:center; overflow:hidden; transition:transform .3s, box-shadow .3s}
.stat:hover{transform:translateY(-5px); box-shadow:var(--shadow-md)}
.stat::before{content:""; position:absolute; top:-40px; left:50%; transform:translateX(-50%); width:120px; height:80px; background:radial-gradient(circle,rgba(26,115,232,.18),transparent 70%); opacity:0; transition:opacity .3s}
.stat:hover::before{opacity:1}
.sec-dark .stat{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1)}
.stat .n{font-family:var(--font-display); font-weight:700; font-size:38px; letter-spacing:-.02em; background:linear-gradient(135deg,#1A73E8,#8B5CF6); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat .l{color:var(--ink-soft); font-size:13px; font-weight:600; margin-top:6px}
.sec-dark .stat .l{color:#94A3B8}

/* ---------- OS cards ---------- */
.os-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:8px}
@media(max-width:760px){ .os-grid{grid-template-columns:repeat(2,1fr)} }
.os{position:relative; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:28px; text-align:center; overflow:hidden; transition:transform .3s, box-shadow .3s}
.os:hover{transform:translateY(-6px); box-shadow:var(--shadow-md)}
.sec-dark .os{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1)}
.os .osic{width:52px; height:52px; margin:0 auto 18px; border-radius:15px; display:grid; place-items:center; background:linear-gradient(135deg,#F1F5F9,#E2E8F0); color:#0F172A; transition:transform .3s}
.sec-dark .os .osic{background:rgba(255,255,255,.08); color:#fff}
.os:hover .osic{transform:scale(1.1)}
.os h4{font-family:var(--font-display); font-weight:600; font-size:17px; margin-bottom:6px}
.sec-dark .os h4{color:#fff}
.os .badge{font-size:11px; font-weight:700; padding:5px 12px; border-radius:999px; display:inline-block; margin-bottom:9px}
.badge-ok{background:rgba(16,185,129,.14); color:#10B981}
.badge-soon{background:rgba(148,163,184,.2); color:#94A3B8}
.os small{color:var(--ink-soft); font-size:12.5px; display:block}
.sec-dark .os small{color:#94A3B8}

/* ---------- EDITOR ---------- */
.editor{background:#0A0E1A; border:1px solid rgba(255,255,255,.1); border-radius:22px; overflow:hidden; box-shadow:0 50px 100px -34px rgba(0,0,0,.6); transition:transform .4s}
.editor:hover{transform:translateY(-6px) scale(1.01)}
.editor .scr{aspect-ratio:16/10; background:radial-gradient(circle at 30% 30%,#1e293b,#0a0e1a); position:relative; display:grid; place-items:center; overflow:hidden}
.editor .scr::before{content:""; position:absolute; inset:0; background:conic-gradient(from 0deg at 50% 50%, rgba(26,115,232,.15), rgba(139,92,246,.12), rgba(236,72,153,.12), rgba(26,115,232,.15)); animation:spin 18s linear infinite; opacity:.5}
.editor .play{position:relative; width:66px; height:66px; border-radius:50%; background:rgba(255,255,255,.16); display:grid; place-items:center; backdrop-filter:blur(8px)}
.editor .play::before{content:""; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(255,255,255,.3); animation:ring 2.4s ease-out infinite}
.editor .play svg{width:28px; height:28px; color:#fff; margin-left:4px}
.editor .scrtag{position:absolute; top:14px; left:14px; font-size:10px; font-weight:700; letter-spacing:1px; color:#fff; background:rgba(0,0,0,.45); padding:6px 11px; border-radius:9px; z-index:2}
.editor .scrtime{position:absolute; bottom:14px; right:14px; font-size:11px; color:#fff; background:rgba(0,0,0,.45); padding:6px 11px; border-radius:9px; z-index:2}
.timeline{padding:18px; background:#0D1424; border-top:1px solid rgba(255,255,255,.07)}
.track2{display:flex; align-items:center; gap:8px; margin-bottom:9px}
.track2 .tl{width:46px; font-size:10px; color:rgba(255,255,255,.5); font-weight:600}
.track2 .clips{flex:1; display:flex; gap:5px}
.clip{height:24px; border-radius:7px; flex:1; box-shadow:inset 0 1px 1px rgba(255,255,255,.25)}

/* ---------- PHONE ---------- */
.phones{display:flex; gap:24px; justify-content:center; flex-wrap:wrap}
.phone{width:230px; background:#0A0E1A; border:9px solid #1e293b; border-radius:42px; overflow:hidden; box-shadow:0 50px 100px -34px rgba(0,0,0,.6); transition:transform .4s}
.phone:hover{transform:translateY(-8px) rotate(-1deg)}
.phone .pscreen{aspect-ratio:9/19; position:relative; background:linear-gradient(180deg,#111827,#0a0e1a); color:#fff; padding:18px 15px; font-size:12px}
.phone .notch{position:absolute; top:0; left:50%; transform:translateX(-50%); width:84px; height:20px; background:#1e293b; border-radius:0 0 16px 16px}
.phone .ptime{text-align:center; font-weight:700; margin-bottom:16px; padding-top:10px}
.notif{background:rgba(255,255,255,.08); border-radius:16px; padding:13px; margin-bottom:11px; border:1px solid rgba(255,255,255,.06)}
.notif .nt{display:flex; align-items:center; gap:8px; font-size:11px; color:#94A3B8; margin-bottom:7px}
.notif .nt b{color:#fff}
.notif .nb{font-size:12px; font-weight:700}
.mini-input{display:flex; gap:6px; margin-top:9px}
.mini-input .mi{flex:1; background:rgba(255,255,255,.06); border-radius:9px; padding:8px 10px; font-size:10px; color:#94A3B8}
.mini-input .mb{background:linear-gradient(135deg,#10B981,#047857); color:#fff; border-radius:9px; padding:8px 12px; font-size:10px; font-weight:700}
.ok-card{background:rgba(16,185,129,.15); border:1px solid rgba(16,185,129,.3); border-radius:13px; padding:13px; margin-top:11px}
.ok-card .okt{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:#34D399; margin-bottom:4px}
.ok-card small{color:#94A3B8; font-size:10px}

/* ---------- WAVEFORM ---------- */
.wave{display:flex; align-items:center; gap:4px; height:88px; justify-content:center; padding:22px 0}
.wave i{width:5px; border-radius:999px; background:linear-gradient(180deg,#C4B5FD,#8B5CF6); animation:waveA 1.1s ease-in-out infinite}
@keyframes waveA{0%,100%{height:14px}50%{height:58px}}

/* ---------- VOICE rows ---------- */
.vrow{display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:15px 20px; margin-bottom:11px; transition:transform .25s, box-shadow .25s}
.vrow:hover{transform:translateX(6px); box-shadow:var(--shadow-md)}
.vrow .vplay{width:40px; height:40px; flex:none; border-radius:50%; background:linear-gradient(135deg,#8B5CF6,#6D28D9); display:grid; place-items:center; color:#fff; box-shadow:0 8px 20px -8px rgba(139,92,246,.6)}
.vrow .vmeta b{font-family:var(--font-display); font-weight:600; font-size:14px}
.vrow .vmeta small{display:block; color:var(--ink-soft); font-size:12px}
.vrow .vbadge{margin-left:auto; font-size:10px; font-weight:700; padding:5px 10px; border-radius:999px; background:rgba(139,92,246,.15); color:#8B5CF6}

/* ---------- CHANGELOG ---------- */
.changelog{max-width:780px; margin:0 auto}
.clog{display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--line); transition:padding-left .25s}
.clog:hover{padding-left:8px}
.sec-dark .clog{border-color:rgba(255,255,255,.08)}
.clog .cdot{position:relative; flex:none; width:12px; height:12px; border-radius:50%; background:#10B981; margin-top:6px; box-shadow:0 0 12px 2px rgba(16,185,129,.6)}
.clog .cdot::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid rgba(16,185,129,.4); animation:ring 2.6s ease-out infinite}
.clog .cmeta b{font-weight:600; font-size:15px}
.sec-dark .clog .cmeta b{color:#fff}
.clog .cmeta small{display:block; color:var(--ink-soft); font-size:12.5px; margin-top:3px}
.sec-dark .clog .cmeta small{color:#94A3B8}

/* ---------- CHAT ---------- */
.chat{max-width:460px; background:var(--card); border:1px solid var(--line); border-radius:24px; overflow:hidden; box-shadow:0 50px 100px -40px rgba(10,14,26,.35)}
.chat .chead{display:flex; align-items:center; gap:12px; padding:20px; border-bottom:1px solid var(--line)}
.chat .cav{width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#1A73E8,#6D28D9); display:grid; place-items:center; color:#fff; font-weight:700; box-shadow:0 8px 20px -8px rgba(26,115,232,.6)}
.chat .chead b{font-size:15px}
.chat .chead small{display:flex; align-items:center; gap:6px; color:#10B981; font-size:12px; font-weight:600}
.chat .chead small::before{content:""; width:7px; height:7px; border-radius:50%; background:#10B981; box-shadow:0 0 8px 1px #10B981; animation:pulse 1.8s ease-in-out infinite}
.chat .cbody{padding:20px; display:flex; flex-direction:column; gap:13px; background:linear-gradient(180deg,#F8FAFC,#fff)}
.msg{max-width:82%; padding:12px 16px; border-radius:18px; font-size:13.5px; line-height:1.5; animation:msgIn .5s ease both}
@keyframes msgIn{from{opacity:0; transform:translateY(8px)}}
.msg.them{background:#fff; border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:5px; box-shadow:var(--shadow-sm)}
.msg.you{background:linear-gradient(135deg,#1A73E8,#1557B0); color:#fff; align-self:flex-end; border-bottom-right-radius:5px; box-shadow:0 8px 20px -10px rgba(26,115,232,.6)}
.chat .cinput{padding:15px 20px; border-top:1px solid var(--line); color:#94A3B8; font-size:13px}

/* ---------- CTA ---------- */
.cta{position:relative; text-align:center; background:linear-gradient(160deg,#0A0E1A,#070A12); border-radius:36px; padding:clamp(60px,8vw,108px) 24px; color:#fff; overflow:hidden}
.cta::before{content:""; position:absolute; inset:-40% -10%; background:radial-gradient(circle at 30% 30%, rgba(26,115,232,.25), transparent 55%), radial-gradient(circle at 70% 70%, rgba(139,92,246,.22), transparent 55%); animation:drift 16s ease-in-out infinite; opacity:.8}
.cta>*{position:relative}
.cta h2{font-family:var(--font-display); font-weight:700; font-size:clamp(32px,5vw,62px); letter-spacing:-.025em; margin-bottom:20px; line-height:1.04}
.cta h2 .g{background:linear-gradient(100deg,#4F8DF7,#A78BFA,#F472B6,#22D3EE,#4F8DF7); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:gradMove 8s linear infinite}
.cta p{color:#C7D2E0; max-width:560px; margin:0 auto 38px; font-size:17px}
.cta-btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:32px}
.btn-ghost{display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff; padding:17px 28px; border-radius:999px; font-weight:700; cursor:pointer; transition:background .25s, transform .25s}
.btn-ghost:hover{background:rgba(255,255,255,.16); transform:translateY(-2px)}
.cta-feats{display:flex; gap:24px; justify-content:center; flex-wrap:wrap; color:#94A3B8; font-size:13px; font-weight:600}
.cta-feats span{display:inline-flex; align-items:center; gap:7px}
.cta-feats span::before{content:"✓"; color:#34D399; font-weight:800}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line); padding:44px 0; margin-top:0}
.foot-inner{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center}
footer .brand{font-size:15px}
footer small{color:var(--ink-soft); font-size:13px}
.foot-links{display:flex; gap:22px}
.foot-links a{font-size:13px; color:var(--ink-soft); font-weight:600; transition:color .2s}
.foot-links a:hover{color:var(--ink)}

/* ---------- REVEAL ---------- */
.reveal{opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.09s}.reveal.d2{transition-delay:.18s}.reveal.d3{transition-delay:.27s}
.reveal.scale{transform:translateY(30px) scale(.96)}
.reveal.scale.in{transform:none}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important}
  .reveal{transition:none; opacity:1; transform:none}
  html{scroll-behavior:auto}
  .bar i{width:78%}
  .grad-text,.hero h1 .l2,.cta h2 .g{color:#1A73E8}
  .sec-dark .grad-text,.hero h1 .l2,.cta h2 .g{color:#60A5FA}
}

/* ============================================================
   CAPA ULTRA — más modernización y animaciones
   ============================================================ */

/* Barra de progreso de scroll */
.scroll-progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:100; background:linear-gradient(90deg,#1A73E8,#8B5CF6,#EC4899,#06B6D4); box-shadow:0 0 12px rgba(26,115,232,.6); transition:width .1s linear}

/* Textura sutil (grano) para acabado premium */
.grain{position:fixed; inset:0; z-index:99; pointer-events:none; opacity:.025; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Foco de luz que sigue el ratón en secciones oscuras */
.spotlight{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .4s; background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(79,141,247,.14), transparent 60%)}
.sec-dark:hover .spotlight{opacity:1}

/* Brillo interior que sigue al cursor dentro de tarjetas */
.feat,.os,.stat,.step{--mx:50%; --my:50%}
.feat .sheen,.os .sheen,.stat .sheen,.step .sheen{position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s; background:radial-gradient(240px circle at var(--mx) var(--my), rgba(26,115,232,.12), transparent 55%)}
.feat:hover .sheen,.os:hover .sheen,.stat:hover .sheen,.step:hover .sheen{opacity:1}
.sec-dark .feat .sheen,.sec-dark .os .sheen,.sec-dark .step .sheen{background:radial-gradient(240px circle at var(--mx) var(--my), rgba(79,141,247,.16), transparent 55%)}

/* Tilt 3D */
.tilt{transform-style:preserve-3d; transition:transform .25s cubic-bezier(.2,.8,.2,1)}

/* Anillo pulsante alrededor del botón de descarga */
.dl-btn{isolation:isolate}
.dl-btn::after{content:""; position:absolute; inset:-3px; border-radius:999px; background:linear-gradient(135deg,#1A73E8,#8B5CF6,#EC4899); z-index:-1; opacity:.0; filter:blur(10px); animation:glowPulse 3s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.35; transform:scale(1)}50%{opacity:.7; transform:scale(1.04)}}

/* Botón magnético (lo mueve el JS) */
.magnetic{transition:transform .2s cubic-bezier(.2,.8,.2,1)}

/* Borde con degradado animado para elementos destacados */
.chip.hl{position:relative; background-clip:padding-box}
.chip.hl::before{content:""; position:absolute; inset:-1.5px; border-radius:999px; z-index:-1; background:conic-gradient(from var(--ang,0deg), #F59E0B, #EC4899, #8B5CF6, #1A73E8, #F59E0B); animation:rotateBorder 4s linear infinite}
@property --ang{syntax:'<angle>'; initial-value:0deg; inherits:false}
@keyframes rotateBorder{to{--ang:360deg}}

/* La pastilla "+plataformas" con borde animado */
.pchip.more{position:relative; z-index:0}
.pchip.more::before{content:""; position:absolute; inset:-2px; border-radius:999px; z-index:-1; background:conic-gradient(from var(--ang,0deg), #1A73E8, #06B6D4, #8B5CF6, #1A73E8); animation:rotateBorder 5s linear infinite; filter:blur(1px)}

/* Aparición con desenfoque para titulares grandes */
.blurin{opacity:0; filter:blur(12px); transform:translateY(24px); transition:opacity .9s ease, filter .9s ease, transform .9s cubic-bezier(.2,.8,.2,1)}
.blurin.in{opacity:1; filter:blur(0); transform:none}

/* Iconos de funciones con anillo giratorio sutil al hover */
.feat .ico::before{content:""; position:absolute; inset:-5px; border-radius:21px; background:conic-gradient(from 0deg, transparent, rgba(255,255,255,.5), transparent); opacity:0; transition:opacity .3s; animation:spin 3s linear infinite}
.feat:hover .ico::before{opacity:.6}

/* Hover de botón fantasma con borde brillante */
.btn-ghost{position:relative; overflow:hidden}
.btn-ghost::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25),transparent 70%); transform:translateX(-130%)}
.btn-ghost:hover::after{transform:translateX(130%); transition:transform .8s}

@media (prefers-reduced-motion: reduce){
  .scroll-progress,.dl-btn::after,.chip.hl::before,.pchip.more::before,.feat .ico::before{animation:none}
  .blurin{filter:none; opacity:1; transform:none}
}
@media (hover:none){
  /* En móvil desactivamos efectos de cursor (rendimiento) */
  .spotlight,.feat .sheen,.os .sheen,.stat .sheen,.step .sheen{display:none}
}

/* ============================================================
   v3 — Iconos premium · barra roja · teléfono y chat reales
   ============================================================ */

/* ---- Blanco nivel Google: más profundidad ---- */
body{background:#FCFDFE}
body::before{
  background:
    radial-gradient(900px 560px at 10% 6%, rgba(26,115,232,.07), transparent 62%),
    radial-gradient(820px 560px at 90% 18%, rgba(139,92,246,.06), transparent 62%),
    radial-gradient(760px 620px at 50% 102%, rgba(6,182,212,.05), transparent 62%),
    linear-gradient(180deg,#FFFFFF,#FAFCFE);
}
.sec-soft{background:linear-gradient(180deg,#F6F9FD,#FFFFFF); position:relative}

/* ---- Barra de progreso ROJA con punto brillante ---- */
.scroll-progress{height:4px; background:linear-gradient(90deg,#B00610,#FF1A1A 60%,#FF3B3B); box-shadow:0 0 16px rgba(255,26,26,.85), 0 0 4px rgba(255,26,26,.9)}
.scroll-progress::after{content:""; position:absolute; right:-1px; top:50%; transform:translateY(-50%); width:10px; height:10px; border-radius:50%; background:#FF2D2D; box-shadow:0 0 16px 4px rgba(255,45,45,.95), 0 0 4px 1px #FF5A5A}

/* ---- ICONOS DE FUNCIONES: estilo premium (sin look juguete) ---- */
.feat .ico{
  position:relative; width:56px; height:56px; border-radius:17px; display:grid; place-items:center; margin-bottom:24px;
  background:linear-gradient(160deg,#FFFFFF,#EFF3F9);
  border:1px solid #E7ECF3;
  box-shadow:inset 0 1px 0 #fff, 0 12px 26px -14px rgba(10,14,26,.22);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.feat:hover .ico{transform:translateY(-3px) scale(1.05) rotate(-3deg); box-shadow:inset 0 1px 0 #fff, 0 20px 36px -16px rgba(10,14,26,.3)}
.feat .ico svg{width:27px; height:27px; color:inherit; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.ic-blue{color:#1A73E8}.ic-purple{color:#8B5CF6}.ic-pink{color:#EC4899}.ic-green{color:#10B981}.ic-amber{color:#F59E0B}.ic-cyan{color:#06B6D4}.ic-indigo{color:#6366F1}
/* anillo giratorio premium del icono al hover (sustituye el antiguo) */
.feat .ico::before{content:""; position:absolute; inset:-1px; border-radius:18px; padding:1px; background:conic-gradient(from var(--ang,0deg), transparent, currentColor, transparent 60%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .35s; animation:rotateBorder 4s linear infinite}
.feat:hover .ico::before{opacity:.55}
/* Iconos en secciones oscuras */
.sec-dark .feat .ico{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 14px 30px -16px rgba(0,0,0,.6)}
.sec-dark .ic-blue{color:#60A5FA}.sec-dark .ic-purple{color:#A78BFA}.sec-dark .ic-pink{color:#F472B6}.sec-dark .ic-green{color:#34D399}.sec-dark .ic-amber{color:#FBBF24}.sec-dark .ic-cyan{color:#22D3EE}

/* refinar todos los SVG de línea (chips, etc.) */
.chip svg,.pchip svg,.step svg,.os svg{stroke-linecap:round; stroke-linejoin:round}

/* ---- ICONOS DE SISTEMAS modernos con color ---- */
.os .osic.os-and{background:linear-gradient(160deg,rgba(16,185,129,.14),rgba(16,185,129,.05)); color:#10B981}
.os .osic.os-win{background:linear-gradient(160deg,rgba(26,115,232,.14),rgba(26,115,232,.05)); color:#1A73E8}
.os .osic.os-apple{background:linear-gradient(160deg,rgba(226,232,240,.9),rgba(241,245,249,.7)); color:#0A0E1A}
.sec-dark .os .osic.os-and{background:rgba(16,185,129,.16); color:#34D399}
.sec-dark .os .osic.os-win{background:rgba(26,115,232,.18); color:#60A5FA}
.sec-dark .os .osic.os-apple{background:rgba(255,255,255,.1); color:#F1F5F9}

/* ============================================================
   TELÉFONO REALISTA
   ============================================================ */
.phone{position:relative; width:248px; background:#05070D; border:3px solid #2A3142; border-radius:46px; padding:9px; box-shadow:0 60px 110px -36px rgba(0,0,0,.7), inset 0 0 0 2px #0d1220, 0 0 0 1px rgba(255,255,255,.04); transition:transform .45s}
.phone:hover{transform:translateY(-10px) rotate(-1.2deg)}
.phone .pbtn{position:absolute; background:#222a3a; border-radius:3px}
.phone .pbtn.pwr{right:-5px; top:140px; width:3px; height:58px}
.phone .pbtn.vu{left:-5px; top:120px; width:3px; height:36px}
.phone .pbtn.vd{left:-5px; top:166px; width:3px; height:36px}
.phone .pscreen{aspect-ratio:9/19.5; position:relative; background:linear-gradient(180deg,#0E1628,#0a0e1a 60%,#0b1020); color:#fff; padding:0 14px 16px; font-size:12px; border-radius:38px; overflow:hidden}
.phone .pill{position:absolute; top:9px; left:50%; transform:translateX(-50%); width:78px; height:20px; background:#000; border-radius:999px; z-index:3}
.phone .pstatus{display:flex; justify-content:space-between; align-items:center; padding:13px 6px 0; font-weight:700; font-size:13px}
.phone .pstat-ic{display:inline-flex; gap:6px; align-items:center; color:#fff}
.phone .pdate{text-align:center; color:#94A3B8; font-size:11px; margin:14px 0 16px; font-weight:600}
.notif{background:rgba(255,255,255,.09); border-radius:18px; padding:13px; margin-bottom:11px; border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(6px); box-shadow:0 12px 30px -14px rgba(0,0,0,.6)}
.notif .nt{display:flex; align-items:center; gap:7px; font-size:11px; color:#94A3B8; margin-bottom:8px}
.notif .nt .napp{width:20px; height:20px; border-radius:6px; overflow:hidden; background:#1A73E8; display:grid; place-items:center; flex:none}
.notif .nt .napp img{width:100%; height:100%; object-fit:cover}
.notif .nt b{color:#fff; font-size:12px}
.notif .nt .nago{color:#64748B}
.notif .nb{font-size:13px; font-weight:700; margin-bottom:2px}
.mini-input{display:flex; gap:6px; margin-top:10px}
.mini-input .mi{flex:1; background:rgba(255,255,255,.07); border-radius:10px; padding:9px 11px; font-size:10px; color:#94A3B8; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.mini-input .mb{background:linear-gradient(135deg,#10B981,#047857); color:#fff; border-radius:10px; padding:9px 14px; font-size:10px; font-weight:700; box-shadow:0 8px 18px -8px rgba(16,185,129,.7)}
.ok-card{background:rgba(16,185,129,.15); border:1px solid rgba(16,185,129,.3); border-radius:14px; padding:13px; box-shadow:0 12px 30px -16px rgba(16,185,129,.5)}
.ok-card .okt{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:#34D399; margin-bottom:4px}
.ok-card small{color:#94A3B8; font-size:10px}

/* ============================================================
   CHAT ESPECTACULAR (estilo messenger móvil)
   ============================================================ */
.chat{max-width:430px; background:#fff; border:1px solid var(--line); border-radius:34px; overflow:hidden; box-shadow:0 60px 120px -44px rgba(10,14,26,.4), 0 0 0 1px rgba(10,14,26,.02)}
.chat .cstatus{display:flex; justify-content:space-between; align-items:center; padding:12px 24px 6px; font-size:13px; font-weight:700; color:#0A0E1A; background:#fff}
.chat .cstatus .cstat-ic{display:inline-flex; gap:6px; align-items:center; color:#0A0E1A}
.chat .chead{display:flex; align-items:center; gap:13px; padding:12px 20px 16px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fff,#FBFDFF)}
.chat .cav{position:relative; width:46px; height:46px; border-radius:50%; overflow:hidden; background:linear-gradient(135deg,#1A73E8,#6D28D9); display:grid; place-items:center; color:#fff; font-weight:700; flex:none; box-shadow:0 8px 20px -8px rgba(26,115,232,.6)}
.chat .cav img{width:100%; height:100%; object-fit:cover}
.chat .cav::after{content:""; position:absolute; right:1px; bottom:1px; width:11px; height:11px; border-radius:50%; background:#22C55E; border:2px solid #fff; box-shadow:0 0 8px 1px rgba(34,197,94,.7); animation:pulse 1.8s ease-in-out infinite}
.chat .chead-meta{flex:1}
.chat .chead-meta b{font-size:15px; display:block}
.chat .chead-meta small{color:#10B981; font-size:12px; font-weight:600}
.chat .chead-actions{color:#94A3B8}
.chat .cbody{padding:20px 18px; display:flex; flex-direction:column; gap:6px; background:linear-gradient(180deg,#F4F7FB,#FBFCFE); max-height:none}
.chat .cday{align-self:center; font-size:11px; font-weight:700; color:#94A3B8; background:rgba(148,163,184,.14); padding:5px 13px; border-radius:999px; margin:2px 0 10px}
.mrow{display:flex; align-items:flex-end; gap:9px; margin-bottom:6px}
.mrow.you{justify-content:flex-end}
.mrow .mav{width:30px; height:30px; border-radius:50%; overflow:hidden; flex:none; background:linear-gradient(135deg,#1A73E8,#6D28D9); display:grid; place-items:center; color:#fff; font-size:11px; font-weight:700}
.mrow .mav img{width:100%; height:100%; object-fit:cover}
.mwrap{display:flex; flex-direction:column; max-width:78%}
.mrow.you .mwrap{align-items:flex-end}
.msg{padding:12px 16px; border-radius:20px; font-size:13.5px; line-height:1.5; animation:msgIn .5s ease both}
.msg.them{background:#fff; border:1px solid #EBEFF5; color:#0A0E1A; border-bottom-left-radius:6px; box-shadow:0 4px 14px -8px rgba(10,14,26,.15)}
.msg.you{background:linear-gradient(135deg,#1A73E8,#1557B0); color:#fff; border-bottom-right-radius:6px; box-shadow:0 10px 24px -12px rgba(26,115,232,.7)}
.mtime{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; color:#94A3B8; margin:5px 4px 0; font-weight:600}
.typing{display:inline-flex; gap:5px; align-items:center; background:#fff; border:1px solid #EBEFF5; padding:14px 16px; border-radius:20px; border-bottom-left-radius:6px; box-shadow:0 4px 14px -8px rgba(10,14,26,.15)}
.typing span{width:7px; height:7px; border-radius:50%; background:#C7D0DE; animation:typing 1.3s ease-in-out infinite}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{transform:translateY(0); opacity:.5}30%{transform:translateY(-5px); opacity:1}}
.chat .cinput{display:flex; align-items:center; justify-content:space-between; padding:14px 16px 16px; border-top:1px solid var(--line); color:#94A3B8; font-size:13px; background:#fff}
.chat .csend{width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#1A73E8,#1557B0); display:grid; place-items:center; color:#fff; box-shadow:0 8px 18px -8px rgba(26,115,232,.7)}

@media (prefers-reduced-motion: reduce){
  .scroll-progress::after,.chat .cav::after,.typing span,.feat .ico::before{animation:none}
}

/* ============================================================
   v4 — chat avatares · aviso rojo · pasos · FAQ
   ============================================================ */

/* ---- Avatar de cabecera del chat (más grande y bien encajado) ---- */
.chat .cav{width:56px; height:56px; background:#fff; border:1px solid #EAEEF4}
.chat .cav img{width:100%; height:100%; object-fit:cover; transform:scale(1.16)}
.chat .cav::after{width:13px; height:13px; right:0; bottom:0}

/* ---- Avatares dentro de los mensajes ---- */
.mrow .mav{width:32px; height:32px; overflow:hidden; box-shadow:0 4px 10px -4px rgba(10,14,26,.3)}
.mrow .mav.mav-user{background:#6366F1}
.mrow .mav.mav-dv{background:#fff; border:1px solid #EAEEF4}
.mrow .mav.mav-dv img{transform:scale(1.16)}
.mrow .mav img{width:100%; height:100%; object-fit:cover}
.mrow.you{align-items:flex-end}

/* ---- Chat aún más moderno ---- */
.chat{border-radius:36px; box-shadow:0 70px 130px -46px rgba(10,14,26,.45), 0 0 0 1px rgba(10,14,26,.02)}
.chat .chead{padding:14px 22px 18px}
.chat .cbody{gap:7px; padding:22px 18px}
.msg{border-radius:22px}
.msg.them{box-shadow:0 6px 18px -10px rgba(10,14,26,.18)}
.msg.you{box-shadow:0 12px 28px -12px rgba(26,115,232,.65)}
.chat .cinput span:first-child{flex:1}

/* ============================================================
   AVISO ROJO llamativo (Creator Studio ANTES)
   ============================================================ */
.warn{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, #FFF1F1, #FFE4E6);
  border:1.5px solid rgba(239,68,68,.45);
  box-shadow:0 24px 60px -28px rgba(239,68,68,.55), inset 0 1px 0 rgba(255,255,255,.6);
}
.warn::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px circle at 0% 0%, rgba(239,68,68,.14), transparent 60%);
}
.warn::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg,#EF4444,#DC2626);
}
.warn .wi{
  background:linear-gradient(135deg,#EF4444,#B91C1C);
  box-shadow:0 10px 24px -8px rgba(239,68,68,.7);
  animation:warnPulse 1.8s ease-in-out infinite;
}
@keyframes warnPulse{0%,100%{transform:scale(1); box-shadow:0 10px 24px -8px rgba(239,68,68,.7)}50%{transform:scale(1.08); box-shadow:0 14px 30px -8px rgba(239,68,68,.9)}}
.warn b{color:#B91C1C; font-size:17px}
.warn p{color:#7F1D1D}
.sec-dark .warn{background:linear-gradient(135deg, rgba(239,68,68,.16), rgba(220,38,38,.08)); border-color:rgba(239,68,68,.5)}
.sec-dark .warn b{color:#FCA5A5}
.sec-dark .warn p{color:#FECACA}

/* ============================================================
   PASOS / NÚMEROS más modernos (con línea de tiempo)
   ============================================================ */
.steps{position:relative}
.step .num{
  position:relative; border-radius:15px;
  box-shadow:0 10px 22px -8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.4);
}
.step .num::after{
  content:""; position:absolute; inset:-2px; border-radius:17px;
  background:inherit; filter:blur(8px); opacity:.45; z-index:-1;
}
.step{border-radius:22px}
.step:hover .num{transform:scale(1.06)}
.step .num{transition:transform .3s}

/* ============================================================
   FAQ (acordeón animado)
   ============================================================ */
.faq{max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:14px}
.faq-item{background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; transition:box-shadow .3s, border-color .3s}
.faq-item.open{box-shadow:var(--shadow-md); border-color:transparent}
.faq-q{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 24px; cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:17px; user-select:none}
.faq-q .plus{flex:none; width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,#1A73E8,#6D28D9); color:#fff; transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.faq-item.open .plus{transform:rotate(135deg)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.2,.8,.2,1)}
.faq-a-inner{padding:0 24px 24px; color:var(--ink-soft); font-size:15px; line-height:1.65}

@media (prefers-reduced-motion: reduce){
  .warn .wi{animation:none}
}

/* ============================================================
   v5 — TELÉFONO ANIMADO (mini-vídeo por código)
   ============================================================ */
.phone .pscreen{padding:0; overflow:hidden}
.phone .pstatus{position:relative; z-index:6; padding:13px 18px 0}
.phone .pill{z-index:7}

/* Pantalla de inicio */
.phome{position:absolute; left:0; right:0; top:54px; bottom:0; display:flex; flex-direction:column; align-items:center; padding-top:44px; text-align:center; z-index:1; transition:opacity .5s ease, transform .5s ease}
.phome-time{font-size:48px; font-weight:800; letter-spacing:-1.5px; line-height:1; text-shadow:0 2px 20px rgba(0,0,0,.4)}
.phome-date{font-size:12px; color:#9FB0C8; margin-top:6px; font-weight:600}
.phome-grab{margin-top:34px}
.phome-grab span{display:block; width:38px; height:4px; border-radius:999px; background:rgba(255,255,255,.45); animation:grab 1.8s ease-in-out infinite}
@keyframes grab{0%,100%{transform:translateY(0); opacity:.5}50%{transform:translateY(4px); opacity:1}}
.phome-hint{font-size:10px; color:#64748B; margin-top:11px; font-weight:600}

/* Cortina oscura al bajar la notificación */
.pshade{position:absolute; top:0; left:0; right:0; height:250px; background:linear-gradient(180deg, rgba(6,9,17,.96), rgba(6,9,17,.5) 65%, transparent); opacity:0; transition:opacity .45s ease; z-index:2; pointer-events:none}

/* Notificación que baja */
.pnotif{position:absolute; top:48px; left:12px; right:12px; z-index:3; background:rgba(26,32,46,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:13px; box-shadow:0 26px 54px -18px rgba(0,0,0,.75); transform:translateY(-150%); opacity:0; transition:transform .55s cubic-bezier(.2,.9,.25,1), opacity .4s ease}
.pnotif .nt{display:flex; align-items:center; gap:7px; font-size:11px; color:#94A3B8; margin-bottom:7px}
.pnotif .nt .napp{width:20px; height:20px; border-radius:6px; overflow:hidden; background:#1A73E8; display:grid; place-items:center; flex:none}
.pnotif .nt .napp img{width:100%; height:100%; object-fit:cover}
.pnotif .nt b{color:#fff; font-size:12px}
.pnotif .nt .nago{color:#64748B}
.pnotif .nb{font-size:13px; font-weight:700; margin-bottom:9px; color:#fff}
.pnotif .mini-input{display:flex; gap:6px; align-items:stretch}
.pnotif .mi{flex:1; background:rgba(255,255,255,.08); border-radius:10px; padding:9px 11px; display:flex; align-items:center; min-height:34px; overflow:hidden}
.plink{font-size:10px; color:#cbd5e1; white-space:nowrap; font-family:ui-monospace,monospace}
.pcaret{width:1.5px; height:12px; background:#34D399; margin-left:1px; opacity:0; flex:none}
.phone.s-type .pcaret{opacity:1; animation:caret .7s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.ppaste{display:flex; align-items:center; background:linear-gradient(135deg,#10B981,#047857); color:#fff; border-radius:10px; padding:0 14px; font-size:10px; font-weight:700; box-shadow:0 8px 18px -8px rgba(16,185,129,.7); transition:transform .15s ease, filter .15s ease}
.phone.s-paste .ppaste{transform:scale(.9); filter:brightness(1.25)}

/* Barra de descarga dentro de la notificación */
.pbar{height:7px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; margin-top:11px; opacity:0; transition:opacity .3s ease}
.pbar i{display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#10B981,#34D399,#10B981); background-size:200% 100%; animation:gradMove 2s linear infinite; transition:width 1.6s linear}
.pbar-lbl{display:flex; justify-content:space-between; font-size:10px; color:#94A3B8; margin-top:6px; opacity:0; transition:opacity .3s ease; font-weight:600}
.pbar-lbl .ppct{color:#34D399}
.phone.s-down .pbar, .phone.s-down .pbar-lbl{opacity:1}
.phone.s-down .pbar i{width:100%}
.phone.s-open .phome{opacity:.28; transform:scale(.96)}
.phone.s-open .pshade{opacity:1}
.phone.s-open .pnotif{transform:translateY(0); opacity:1}

/* Aviso de descarga completada */
.pdone{position:absolute; left:12px; right:12px; bottom:18px; z-index:4; display:flex; align-items:center; gap:11px; background:linear-gradient(135deg,#10B981,#059669); border-radius:16px; padding:13px 14px; box-shadow:0 26px 54px -18px rgba(16,185,129,.75); transform:translateY(26px) scale(.95); opacity:0; transition:transform .55s cubic-bezier(.2,.9,.25,1), opacity .4s ease}
.pdone-ic{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.22); display:grid; place-items:center; flex:none; animation:donePop .5s ease both}
@keyframes donePop{0%{transform:scale(.4)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.pdone-tx b{display:block; font-size:13.5px; color:#fff; line-height:1.2}
.pdone-tx small{font-size:10.5px; color:rgba(255,255,255,.88)}
.pdone-tx small b{display:inline; font-weight:800; color:#fff}
.phone.s-done .pdone{transform:translateY(0) scale(1); opacity:1}

.phone.s-close .pnotif{transform:translateY(-150%); opacity:0}
.phone.s-close .pdone{transform:translateY(26px); opacity:0}
.phone.s-close .pshade{opacity:0}
.phone.s-close .phome{opacity:1; transform:none}

/* ============================================================
   v6 — FOOTER MODERNO (con crédito a TROLLANA)
   ============================================================ */
footer{position:relative; border-top:1px solid var(--line); padding:0; margin-top:0; overflow:hidden; background:linear-gradient(180deg,#FBFCFE,#F4F7FB)}
.foot-glow{position:absolute; top:-1px; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,#1A73E8,#8B5CF6,#EC4899,transparent); opacity:.7}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding:60px 22px 40px; position:relative; z-index:2}
@media(max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr; gap:34px} }
@media(max-width:480px){ .foot-grid{grid-template-columns:1fr 1fr} }
.foot-brand{max-width:340px}
@media(max-width:860px){ .foot-brand{grid-column:1 / -1; max-width:none} }
.foot-brand .brand{font-size:18px; margin-bottom:14px}
.foot-brand p{color:var(--ink-soft); font-size:13.5px; line-height:1.6; margin-bottom:16px}
.foot-maker{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--ink-soft); background:#fff; border:1px solid var(--line); padding:8px 14px; border-radius:999px; box-shadow:var(--shadow-sm)}
.foot-maker b{background:linear-gradient(135deg,#1A73E8,#8B5CF6,#EC4899); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; letter-spacing:.5px}
.foot-col h5{font-family:var(--font-display); font-size:13px; font-weight:600; margin-bottom:16px; color:var(--ink)}
.foot-col a{display:block; font-size:13.5px; color:var(--ink-soft); font-weight:500; padding:6px 0; transition:color .2s, transform .2s}
.foot-col a:hover{color:var(--blue); transform:translateX(3px)}
.foot-bar{border-top:1px solid var(--line); position:relative; z-index:2; background:rgba(255,255,255,.5)}
.foot-bar-inner{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; padding:20px 22px}
.foot-bar small{color:var(--ink-soft); font-size:12.5px}
.foot-bar small b{color:var(--ink); font-weight:700}
.foot-made .heart{color:#EC4899; animation:heart 1.4s ease-in-out infinite; display:inline-block}
@keyframes heart{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.foot-watermark{position:absolute; bottom:-26px; left:50%; transform:translateX(-50%); font-family:var(--font-display); font-weight:700; font-size:clamp(70px,16vw,200px); letter-spacing:-.04em; line-height:1; color:rgba(10,14,26,.035); white-space:nowrap; z-index:1; pointer-events:none; user-select:none}

@media (prefers-reduced-motion: reduce){ .foot-glow,.foot-made .heart{animation:none} }

/* ============================================================
   v7 — gesto del dedo deslizando + dock de la home
   ============================================================ */
.phome-dock{position:absolute; bottom:20px; left:0; right:0; display:flex; justify-content:center; gap:14px}
.phome-dock span{width:30px; height:30px; border-radius:9px; box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px -6px rgba(0,0,0,.5)}
.phome-dock span:nth-child(1){background:linear-gradient(135deg,#1A73E8,#4F8DF7)}
.phome-dock span:nth-child(2){background:linear-gradient(135deg,#EC4899,#F472B6)}
.phome-dock span:nth-child(3){background:linear-gradient(135deg,#10B981,#34D399)}
.phome-dock span:nth-child(4){background:linear-gradient(135deg,#F59E0B,#FBBF24)}

/* Dedo (gesto táctil que arrastra la notificación) */
.pfinger{position:absolute; left:50%; top:6px; transform:translateX(-50%); z-index:8; opacity:0; pointer-events:none}
.pf-dot{position:relative; display:block; width:34px; height:34px; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, rgba(255,255,255,.96), rgba(255,255,255,.55) 60%, rgba(255,255,255,.22));
  box-shadow:0 8px 20px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.55)}
.pf-ring{position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(255,255,255,.55)}
.pf-trail{position:absolute; left:50%; bottom:36px; transform:translateX(-50%); width:3px; height:0; border-radius:999px; background:linear-gradient(180deg, transparent, rgba(255,255,255,.55)); opacity:0}
.phone.s-open .pfinger{animation:swipe 1s cubic-bezier(.45,0,.2,1) forwards}
.phone.s-open .pf-ring{animation:pfRing 1s ease-out forwards}
.phone.s-open .pf-trail{animation:pfTrail 1s ease forwards}
@keyframes swipe{
  0%{top:2px; opacity:0; transform:translateX(-50%) scale(.8)}
  16%{opacity:1; transform:translateX(-50%) scale(1)}
  62%{top:196px; opacity:1; transform:translateX(-50%) scale(1)}
  100%{top:230px; opacity:0; transform:translateX(-50%) scale(.88)}
}
@keyframes pfRing{0%{transform:scale(.55); opacity:.85}40%{opacity:.45}100%{transform:scale(1.7); opacity:0}}
@keyframes pfTrail{0%,12%{opacity:0; height:0}34%{opacity:.6; height:34px}100%{opacity:0; height:54px}}

@media (prefers-reduced-motion: reduce){ .pfinger{display:none} }

/* ============================================================
   v8 — CARRUSEL DE CHATS + captura de pantalla
   ============================================================ */
.chat-carousel{max-width:440px; margin:0 auto; position:relative}
.chat-track{position:relative; max-width:440px; margin:0 auto}
.chat-slide{transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1)}
.chat-slide:not(.active){position:absolute; top:0; left:0; right:0; opacity:0; transform:translateX(38px) scale(.985); pointer-events:none}
.chat-slide.active{position:relative; opacity:1; transform:none; z-index:1}

.chat-dots{display:flex; gap:8px; justify-content:center; margin-top:24px; position:relative; z-index:2}
.chat-dots button{width:9px; height:9px; border-radius:999px; background:#D7DEE8; border:none; cursor:pointer; padding:0; transition:width .35s cubic-bezier(.2,.8,.2,1), background .35s}
.chat-dots button.active{width:28px; background:linear-gradient(90deg,#1A73E8,#8B5CF6)}
.chat-dots button:hover{background:#9FB0C8}
.chat-dots button.active:hover{background:linear-gradient(90deg,#1A73E8,#8B5CF6)}

/* Captura (screenshot) dentro del chat */
.shot{width:210px; max-width:100%; background:#0F1626; border:1px solid rgba(255,255,255,.09); border-radius:15px; overflow:hidden; box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.shot-top{display:flex; align-items:center; gap:7px; padding:9px 12px; background:rgba(255,255,255,.05); font-size:11px; font-weight:700; color:#cbd5e1; border-bottom:1px solid rgba(255,255,255,.07)}
.shot-app{width:18px; height:18px; border-radius:5px; background:#000; display:grid; place-items:center}
.shot-body{padding:20px 14px; text-align:center}
.shot-err{width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,#EF4444,#B91C1C); display:grid; place-items:center; margin:0 auto 11px; box-shadow:0 12px 26px -8px rgba(239,68,68,.65); animation:warnPulse 1.9s ease-in-out infinite}
.shot-body b{display:block; color:#fff; font-size:13px; margin-bottom:3px}
.shot-body small{color:#94A3B8; font-size:11px}

@media (prefers-reduced-motion: reduce){ .shot-err{animation:none} }

/* ============================================================
   v9 — PANTALLA "OPCIONES DE DESCARGA" (mockup de la app)
   ============================================================ */
.dvphone{position:relative; width:min(316px,88vw); margin:0 auto; background:#0B0E14; border:3px solid #2A3142; border-radius:46px; padding:9px; box-shadow:0 60px 110px -36px rgba(0,0,0,.6), inset 0 0 0 2px #0d1220, 0 0 0 1px rgba(255,255,255,.04)}
.dvphone .pbtn{position:absolute; background:#222a3a; border-radius:3px}
.dvphone .pbtn.pwr{right:-5px; top:150px; width:3px; height:60px}
.dvphone .pbtn.vu{left:-5px; top:128px; width:3px; height:38px}
.dvphone .pbtn.vd{left:-5px; top:176px; width:3px; height:38px}
.dvp-screen{position:relative; background:#F4F6F8; border-radius:38px; overflow:hidden; color:#0A0E1A; font-family:var(--font-body)}
.dvp-status{display:flex; justify-content:space-between; align-items:center; padding:12px 20px 4px; font-weight:700; font-size:13px; background:#fff}
.dvp-st-ic{display:inline-flex; gap:5px; align-items:center; color:#0A0E1A}
.dvp-head{display:flex; align-items:center; gap:13px; padding:8px 16px 14px; background:#fff; border-bottom:1px solid #EEF0F4; position:sticky; top:0; z-index:5}
.dvp-back{width:34px; height:34px; border-radius:50%; background:#F1F3F6; display:grid; place-items:center; color:#0A0E1A; flex:none}
.dvp-head b{font-size:16.5px; font-weight:800}
.dvp-body{padding:14px; display:flex; flex-direction:column; gap:12px}

.dvp-thumb{height:120px; border-radius:14px; background:linear-gradient(135deg,#3B2A6B,#5B3AA0 70%,#7C3AED); position:relative; display:grid; place-items:center; box-shadow:0 10px 24px -12px rgba(91,58,160,.55)}
.dvp-dur{position:absolute; right:10px; bottom:10px; background:rgba(0,0,0,.72); color:#fff; font-size:11px; font-weight:700; padding:4px 9px; border-radius:8px}
.dvp-play{width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.2); display:grid; place-items:center; backdrop-filter:blur(4px)}
.dvp-title{font-weight:800; font-size:15px; line-height:1.3}

.dvp-label{display:flex; align-items:center; gap:7px; font-size:10.5px; font-weight:800; letter-spacing:1px; color:#9AA3B2; text-transform:uppercase; margin-top:4px}
.dvp-grid2{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.dvp-opt{display:flex; align-items:center; gap:9px; background:#fff; border:1.5px solid #EAEEF3; border-radius:13px; padding:13px 12px; font-size:13px; font-weight:700; color:#384152}
.dvp-opt .dvp-oic{color:#5A6478; display:grid; place-items:center; flex:none}
.dvp-opt .dvp-tick{margin-left:auto; width:20px; height:20px; border-radius:50%; border:1.5px solid #D3DAE3; display:grid; place-items:center; flex:none}
.dvp-opt .dvp-tick svg{opacity:0}
.dvp-opt.on{border-color:#1A73E8; background:#F4F8FF; color:#1A73E8}
.dvp-opt.on .dvp-oic{color:#1A73E8}
.dvp-opt.on .dvp-tick{background:#1A73E8; border-color:#1A73E8}
.dvp-opt.on .dvp-tick svg{opacity:1}

.dvp-autosub{display:flex; align-items:flex-start; gap:12px; background:linear-gradient(135deg,#FFF1E6,#FFF8F2); border:1.5px solid rgba(249,115,22,.42); border-radius:16px; padding:14px; box-shadow:0 16px 38px -18px rgba(249,115,22,.5)}
.dvp-autoic{position:relative; width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,#FB923C,#F97316,#EA580C); display:grid; place-items:center; flex:none; box-shadow:0 10px 22px -8px rgba(249,115,22,.65)}
.dvp-spark{position:absolute; top:-4px; right:-4px; color:#fff; font-size:12px; text-shadow:0 0 7px rgba(255,180,80,.9)}
.dvp-auto-meta{flex:1}
.dvp-tags{display:flex; gap:7px; align-items:center; margin-bottom:5px}
.dvp-tags b{background:linear-gradient(135deg,#FBBF24,#F97316); color:#fff; font-size:9px; font-weight:800; padding:3px 8px; border-radius:6px; letter-spacing:.5px}
.dvp-tags i{font-style:normal; font-size:9px; font-weight:800; color:#9AA3B2; letter-spacing:1px}
.dvp-auto-meta strong{display:block; font-size:15px; font-weight:800; background:linear-gradient(135deg,#EA580C,#B45309); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:3px}
.dvp-auto-meta small{font-size:11.5px; color:#6B7280; line-height:1.45}
.dvp-toggle{width:50px; height:28px; border-radius:999px; background:#D3DAE3; position:relative; flex:none}
.dvp-toggle i{position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.3); transition:transform .3s}
.dvp-toggle.on{background:linear-gradient(135deg,#FBBF24,#F97316)}
.dvp-toggle.on i{transform:translateX(22px)}

.dvp-styles{background:#fff; border:1.5px solid #EFF2F6; border-radius:16px; padding:14px}
.dvp-styles-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:3px}
.dvp-pal{display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:800}
.dvp-styles-top small{font-size:11px; color:#9AA3B2; font-weight:700}
.dvp-styles-sub{display:block; font-size:11px; color:#6B7280; margin-bottom:11px}
.dvp-style-row,.dvp-style-names{display:flex; gap:9px; overflow:hidden}
.dvp-style{flex:none; width:122px; height:74px; border-radius:12px; background:linear-gradient(160deg,#26262B,#3A3A42); display:grid; place-items:center; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.ex{font-weight:800; font-size:16px; color:#fff; display:inline-flex; align-items:center; gap:4px}
.ex-pop b{color:#EC4899; font-size:13px}
.ex-red{color:#fff; -webkit-text-stroke:1.4px #EF4444; paint-order:stroke fill}
.ex-holo{background:linear-gradient(90deg,#C084FC,#22D3EE,#F472B6); -webkit-background-clip:text; background-clip:text; color:transparent}
.ex-fire{color:#FBBF24}
.ex-glitch{color:#fff; text-shadow:1.4px 0 #EF4444,-1.4px 0 #06B6D4}
.dvp-style-names{margin-top:7px}
.dvp-style-names span{width:122px; flex:none; text-align:center; font-size:10.5px; color:#6B7280; font-weight:600}

.dvp-lang{display:flex; align-items:center; gap:11px; background:#fff; border:1.5px solid #EFF2F6; border-radius:14px; padding:13px}
.dvp-lang-ic{width:34px; height:34px; border-radius:10px; background:#EAF2FE; display:grid; place-items:center; flex:none}
.dvp-lang-tx{flex:1}
.dvp-lang-tx b{display:block; font-size:13px; font-weight:700}
.dvp-lang-tx small{font-size:11px; color:#6B7280}
.dvp-lang-val{display:inline-flex; align-items:center; gap:5px; background:#F1F5FF; color:#1A73E8; font-size:12px; font-weight:700; padding:7px 12px; border-radius:999px; border:1px solid rgba(26,115,232,.2); flex:none}

.dvp-dlbtn{display:flex; align-items:center; gap:13px; background:linear-gradient(135deg,#1A73E8,#1557B0); border-radius:18px; padding:15px 16px; color:#fff; box-shadow:0 22px 44px -18px rgba(26,115,232,.7); margin-top:2px}
.dvp-q{width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.2); display:grid; place-items:center; font-weight:800; font-size:14px; flex:none}
.dvp-dl-tx{flex:1}
.dvp-dl-tx b{display:block; font-size:14px; font-weight:800}
.dvp-dl-tx small{font-size:10px; color:rgba(255,255,255,.82)}
.dvp-dl-ic{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.2); display:grid; place-items:center; flex:none}

@media(max-width:880px){ #opciones .visual{margin-top:8px} }

/* ============================================================
   v10 — DEMO DE SUBTÍTULOS (monitor PC + teléfono) por código
   ============================================================ */
/* Mostrar monitor en escritorio, teléfono en móvil (por tamaño de pantalla) */
.demo-mobile{display:none}
.demo-desktop{display:block}
@media(max-width:880px){ .demo-desktop{display:none} .demo-mobile{display:block} }

/* ---------- MONITOR (Windows) ---------- */
.monitor{width:100%; max-width:560px; margin:0 auto}
.mon-bezel{background:#0B0E14; border-radius:16px; padding:9px; box-shadow:0 50px 100px -34px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05)}
.app-win{background:#F4F6F8; border-radius:9px; overflow:hidden}
.aw-bar{display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:#fff; border-bottom:1px solid #ECEFF3}
.aw-logo{display:flex; align-items:center; gap:7px; font-weight:800; font-size:12px}
.aw-logo img{width:18px; height:18px; border-radius:5px}
.aw-dots{display:flex; gap:6px}
.aw-dots i{width:11px; height:11px; border-radius:50%; background:#E2E6EC}
.aw-sub{display:flex; align-items:center; gap:9px; padding:9px 14px; font-weight:800; font-size:14px; background:#fff; border-bottom:1px solid #ECEFF3}
.aw-back{width:28px; height:28px; border-radius:50%; background:#F1F3F6; display:grid; place-items:center; flex:none}
.aw-body{display:flex; gap:12px; padding:12px}
.aw-video{flex:1.5; min-width:0}
.aw-side{flex:1; display:flex; flex-direction:column; gap:9px; min-width:0}
.aw-side-lbl{font-size:10px; font-weight:800; letter-spacing:1px; color:#9AA3B2; text-transform:uppercase}
.aw-chips{display:flex; flex-wrap:wrap; gap:6px}
.awchip{font-size:10px; font-weight:700; color:#475569; background:#fff; border:1px solid #E7ECF3; padding:5px 9px; border-radius:999px}
.awchip.ex-pop{border-color:rgba(236,72,153,.4); color:#DB2777}
.awchip.ex-fire{border-color:rgba(249,115,22,.4); color:#EA580C}
.aw-lang{display:flex; justify-content:space-between; align-items:center; background:#fff; border:1px solid #EFF2F6; border-radius:11px; padding:8px 11px; font-size:11px; color:#6B7280; font-weight:600}
.aw-lang b{color:#1A73E8; background:#F1F5FF; padding:4px 10px; border-radius:999px; border:1px solid rgba(26,115,232,.2)}
.mon-neck{width:64px; height:24px; background:linear-gradient(#1a2030,#10141d); margin:0 auto; border-radius:0 0 5px 5px}
.mon-foot{width:170px; height:12px; background:linear-gradient(#11151f,#0b0e14); margin:0 auto; border-radius:8px; box-shadow:0 20px 32px -16px rgba(0,0,0,.6)}

/* ---------- TELÉFONO (Android) compacto ---------- */
.dphone{position:relative; width:min(300px,86vw); margin:0 auto; background:#0B0E14; border:3px solid #2A3142; border-radius:44px; padding:9px; box-shadow:0 56px 100px -36px rgba(0,0,0,.6), inset 0 0 0 2px #0d1220}
.dphone .pbtn{position:absolute; background:#222a3a; border-radius:3px}
.dphone .pbtn.pwr{right:-5px; top:140px; width:3px; height:56px}
.dphone .pbtn.vu{left:-5px; top:120px; width:3px; height:34px}
.dphone .pbtn.vd{left:-5px; top:164px; width:3px; height:34px}
.dph-screen{background:#F4F6F8; border-radius:36px; overflow:hidden; color:#0A0E1A}
.dph-status{display:flex; justify-content:space-between; align-items:center; padding:12px 20px 4px; font-weight:700; font-size:13px; background:#fff}
.dph-st-ic{display:inline-flex; gap:5px; align-items:center; color:#0A0E1A}
.dph-head{display:flex; align-items:center; gap:12px; padding:8px 16px 13px; background:#fff; border-bottom:1px solid #EEF0F4}
.dph-back{width:32px; height:32px; border-radius:50%; background:#F1F3F6; display:grid; place-items:center; flex:none}
.dph-head b{font-size:16px; font-weight:800}
.dph-body{padding:13px; display:flex; flex-direction:column; gap:11px}

/* ---------- Tarjetas compactas reutilizadas ---------- */
.dvp-autosub.awc{padding:11px; gap:10px; border-radius:14px; align-items:center}
.dvp-autosub.awc .dvp-autoic{width:40px; height:40px; border-radius:12px}
.dvp-autosub.awc .dvp-auto-meta strong{font-size:12.5px; margin-bottom:0}
.dvp-autosub.awc .dvp-tags{margin-bottom:3px}
.dvp-autosub.awc .dvp-tags b{font-size:8.5px; padding:2px 6px}
.dvp-autosub.awc .dvp-toggle{width:44px; height:25px}
.dvp-autosub.awc .dvp-toggle i{width:19px; height:19px}
.dvp-autosub.awc .dvp-toggle.on i{transform:translateX(19px)}
.dvp-dlbtn.awdl{padding:12px 13px; gap:11px; border-radius:15px}
.aw-side .dvp-dlbtn.awdl{margin-top:auto}
.dvp-dlbtn.awdl .dvp-q{width:38px; height:38px; font-size:13px; border-radius:11px}
.dvp-dlbtn.awdl .dvp-dl-tx b{font-size:13px}
.dvp-dlbtn.awdl .dvp-dl-tx small{font-size:9.5px}
.dvp-dlbtn.awdl .dvp-dl-ic{width:34px; height:34px}

/* ============================================================
   SUBDEMO — vídeo con activación de subtítulos (animado)
   ============================================================ */
.subdemo{position:relative; width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#0a0a12; box-shadow:0 16px 36px -18px rgba(0,0,0,.55); isolation:isolate}
.dph-video .subdemo{aspect-ratio:16/10}
.sd-scene{position:absolute; inset:0; background:linear-gradient(125deg,#6D28D9,#DB2777 48%,#F97316); transform:scale(1.02)}
.sd-scene::before{content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 28% 18%, rgba(255,255,255,.28), transparent 58%)}
.sd-scene::after{content:""; position:absolute; inset:0; background:radial-gradient(70% 60% at 72% 86%, rgba(0,0,0,.4), transparent 70%)}
.subdemo.is-playing .sd-scene{animation:sceneZoom 7s ease-in-out infinite alternate}
@keyframes sceneZoom{from{transform:scale(1.03)}to{transform:scale(1.13) translate(-2%,-1%)}}
.sd-vig{position:absolute; inset:0; box-shadow:inset 0 0 70px rgba(0,0,0,.45); pointer-events:none; z-index:2}

.sd-top{position:absolute; top:10px; left:11px; right:11px; display:flex; justify-content:space-between; align-items:center; z-index:3}
.sd-cc{font-size:10px; font-weight:800; color:#fff; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.35); padding:3px 7px; border-radius:6px; opacity:.4; transition:opacity .4s, background .4s, border-color .4s}
.subdemo.is-proc .sd-cc,.subdemo.is-playing .sd-cc{opacity:1; background:linear-gradient(135deg,#1A73E8,#6D28D9); border-color:transparent}
.sd-rec{display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; color:#fff; background:rgba(0,0,0,.42); padding:3px 8px; border-radius:6px; opacity:0; transition:opacity .4s}
.subdemo.is-playing .sd-rec{opacity:1}
.sd-rec i{width:6px; height:6px; border-radius:50%; background:#EF4444; box-shadow:0 0 8px #EF4444; animation:pulse 1.4s infinite}

.sd-center{position:absolute; inset:0; display:grid; place-items:center; z-index:4}
.sd-btn{display:inline-flex; align-items:center; gap:9px; background:#fff; color:#1A73E8; font-weight:800; font-size:13px; border:none; border-radius:999px; padding:11px 20px; cursor:pointer; box-shadow:0 16px 32px -10px rgba(0,0,0,.55); transition:transform .25s, opacity .3s}
.subdemo:not(.is-proc):not(.is-playing) .sd-btn{animation:btnTap 2.4s ease-in-out infinite}
@keyframes btnTap{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.subdemo.is-proc .sd-btn,.subdemo.is-playing .sd-btn{opacity:0; transform:scale(.88); pointer-events:none}
.sd-proc{position:absolute; inset:0; display:flex; flex-direction:column; gap:11px; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; z-index:4}
.subdemo.is-proc .sd-proc{opacity:1}
.sd-spin{width:30px; height:30px; border-radius:50%; border:3px solid rgba(255,255,255,.3); border-top-color:#fff; animation:spin .8s linear infinite}
.sd-proc-tx{color:#fff; font-weight:700; font-size:12px; text-shadow:0 1px 4px rgba(0,0,0,.6)}

.sd-cap-wrap{position:absolute; left:0; right:0; bottom:15px; text-align:center; padding:0 14px; z-index:3; min-height:24px}
.sd-cap{display:inline-block; font-weight:800; font-size:16px; color:#fff; line-height:1.25; letter-spacing:.2px; text-shadow:0 2px 10px rgba(0,0,0,.85), 0 0 3px rgba(0,0,0,.9); -webkit-text-stroke:.6px rgba(0,0,0,.35); paint-order:stroke fill; padding:2px 6px}
.demo-desktop .sd-cap{font-size:17px}
.sd-cap.pop{animation:capPop .45s cubic-bezier(.2,.9,.25,1)}
@keyframes capPop{0%{opacity:0; transform:translateY(9px) scale(.9)}100%{opacity:1; transform:none}}
.sd-bar{position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.18); z-index:3}
.sd-bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,#1A73E8,#22D3EE,#34D399)}
.subdemo.is-playing .sd-bar i{width:100%; transition:width 5.4s linear}

@media (prefers-reduced-motion: reduce){
  .sd-scene,.sd-btn,.sd-cap.pop,.sd-rec i{animation:none}
}

/* ============================================================
   v11 — escena realista de creadora + subtítulos CapCut Pro
   ============================================================ */
.sd-scene{background:radial-gradient(120% 90% at 50% 18%, #241a44 0%, #140f28 55%, #0c0818 100%); transform:none; overflow:hidden}
.sd-scene::before,.sd-scene::after{content:none}
/* bokeh de estudio */
.sd-bokeh{position:absolute; border-radius:50%; filter:blur(10px); opacity:.55; mix-blend-mode:screen}
.sd-bokeh.sb1{width:30%; aspect-ratio:1; background:#F59E0B; top:8%; left:4%; animation:sdDrift 11s ease-in-out infinite}
.sd-bokeh.sb2{width:22%; aspect-ratio:1; background:#EC4899; bottom:6%; left:10%; animation:sdDrift 13s ease-in-out infinite -3s}
.sd-bokeh.sb3{width:26%; aspect-ratio:1; background:#22D3EE; top:12%; right:6%; animation:sdDrift 12s ease-in-out infinite -6s}
.sd-bokeh.sb4{width:18%; aspect-ratio:1; background:#8B5CF6; bottom:10%; right:8%; animation:sdDrift 10s ease-in-out infinite -2s}
.sd-bokeh.sb5{width:12%; aspect-ratio:1; background:#34D399; top:42%; left:28%; opacity:.4; animation:sdDrift 14s ease-in-out infinite -8s}
.sd-bokeh.sb6{width:9%; aspect-ratio:1; background:#FBBF24; top:60%; right:30%; opacity:.45; animation:sdDrift 9s ease-in-out infinite -5s}
@keyframes sdDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8%,-6%) scale(1.12)}}
/* aro de luz (key light) */
.sd-ring{position:absolute; top:-12%; left:50%; transform:translateX(-50%); width:54%; aspect-ratio:1; border-radius:50%; border:5px solid rgba(255,255,255,.10); box-shadow:0 0 50px rgba(255,255,255,.10), inset 0 0 40px rgba(255,255,255,.06); z-index:0; animation:sdRingPulse 5s ease-in-out infinite}
@keyframes sdRingPulse{0%,100%{opacity:.7}50%{opacity:1}}
/* persona */
.sd-person{position:absolute; inset:0; width:100%; height:100%; z-index:1; animation:sdFloat 5.5s ease-in-out infinite; filter:drop-shadow(0 14px 24px rgba(0,0,0,.45))}
@keyframes sdFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.sd-eyes{transform-box:fill-box; transform-origin:center; animation:sdBlink 4.6s infinite}
@keyframes sdBlink{0%,92%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}96%{transform:scaleY(1)}}
.sd-mouth{transform-box:fill-box; transform-origin:center}
.subdemo.is-playing .sd-mouth{animation:sdTalk .3s ease-in-out infinite alternate}
@keyframes sdTalk{0%{transform:scaleY(.7)}100%{transform:scaleY(1.6)}}
.sd-rimline{animation:sdRimGlow 3.2s ease-in-out infinite}
@keyframes sdRimGlow{0%,100%{opacity:.4}50%{opacity:.75}}
/* barrido de luz al reproducir */
.sd-scan{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.06) 50%, transparent 65%); background-size:250% 100%}
.subdemo.is-playing .sd-scan{opacity:1; animation:sdScan 4.5s linear infinite}
@keyframes sdScan{from{background-position:120% 0}to{background-position:-120% 0}}

/* sincronizar barra con el habla */
.subdemo.is-playing .sd-bar i{transition:width 4.8s linear}

/* ---------- SUBTÍTULOS CAPCUT PRO ---------- */
.sd-cap-wrap{bottom:18px}
.sd-cap{display:inline-flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 7px; font-family:var(--font-display); line-height:1.08; max-width:92%; margin:0 auto}
.sd-cap .w{display:inline-block; font-weight:800; font-size:19px; color:#fff; letter-spacing:.3px;
  text-shadow:0 3px 10px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.6);
  -webkit-text-stroke:.7px rgba(0,0,0,.28); paint-order:stroke fill;
  padding:1px 5px; border-radius:9px; opacity:0; transform:translateY(12px) scale(.7) rotate(-3deg);
  animation:wIn .4s cubic-bezier(.18,1.5,.4,1) forwards;
  transition:background .25s ease, color .25s ease, box-shadow .25s ease, -webkit-text-stroke .25s ease}
@keyframes wIn{60%{transform:translateY(0) scale(1.14) rotate(1.5deg)}100%{opacity:1; transform:none}}
.sd-cap .w.hot{color:#11270B; background:linear-gradient(135deg,#C6FF49,#34E6A6); box-shadow:0 8px 20px -6px rgba(52,230,166,.6), inset 0 1px 0 rgba(255,255,255,.55); -webkit-text-stroke:0}
.demo-desktop .sd-cap .w{font-size:21px}

@media (prefers-reduced-motion: reduce){
  .sd-bokeh,.sd-ring,.sd-person,.sd-eyes,.sd-mouth,.sd-rimline,.sd-scan,.sd-cap .w{animation:none}
}

/* ============================================================
   v12 — Soporte pro · Modales · Footer equipo
   ============================================================ */
/* ---- Footer texto de equipo ---- */
.foot-team{font-size:12px; color:var(--ink-soft); line-height:1.6; margin-top:14px; max-width:350px; opacity:.9}
.foot-legal a{color:var(--ink-soft); font-weight:600}
.foot-legal a:hover{color:var(--ink)}
.foot-col a[data-modal]{cursor:pointer}

/* ---- Sección Soporte ---- */
.support-panel{position:relative; display:grid; grid-template-columns:1.3fr 1fr; gap:30px; align-items:center; background:linear-gradient(150deg,#0A0E1A,#0F172A 60%,#0a0e1a); border-radius:28px; padding:40px; overflow:hidden; box-shadow:var(--shadow-lg); margin-bottom:22px}
@media(max-width:820px){ .support-panel{grid-template-columns:1fr; gap:24px; padding:26px} }
.sp-glow{position:absolute; inset:-40% -10%; background:radial-gradient(circle at 25% 30%, rgba(26,115,232,.22), transparent 55%), radial-gradient(circle at 80% 80%, rgba(139,92,246,.18), transparent 55%); animation:drift 16s ease-in-out infinite; pointer-events:none}
.sp-left,.sp-right{position:relative; z-index:1}
.sp-badge{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:#34D399; background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.3); padding:7px 14px; border-radius:999px; margin-bottom:18px}
.sp-dot{width:8px; height:8px; border-radius:50%; background:#10B981; box-shadow:0 0 10px 1px #10B981; animation:pulse 1.8s infinite}
.sp-left h3{font-family:var(--font-display); font-weight:700; font-size:clamp(22px,3vw,30px); color:#fff; letter-spacing:-.02em; margin-bottom:12px; line-height:1.15}
.sp-left p{color:#94A3B8; font-size:15px; line-height:1.6; max-width:450px; margin-bottom:24px}
.sp-actions{display:flex; gap:13px; flex-wrap:wrap; align-items:center}
.sp-cta{box-shadow:0 18px 40px -16px rgba(255,255,255,.4)}
.sp-ghost{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff}
.sp-ghost:hover{background:rgba(255,255,255,.16)}
.sp-status{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:20px; backdrop-filter:blur(6px)}
.sps-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; color:#fff; font-weight:700; font-size:14px}
.sps-ok{display:inline-flex; align-items:center; gap:7px; font-size:12px; color:#34D399; font-weight:700}
.sps-row{display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-top:1px solid rgba(255,255,255,.07)}
.sps-name{display:flex; align-items:center; gap:9px; color:#CBD5E1; font-size:13px; font-weight:600}
.sps-pill{font-size:11px; font-weight:700; color:#34D399; background:rgba(16,185,129,.14); padding:5px 11px; border-radius:999px}
.sps-foot{display:flex; align-items:center; gap:7px; margin-top:12px; padding-top:14px; border-top:1px solid rgba(255,255,255,.07); color:#64748B; font-size:12px; font-weight:600}
.support-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:760px){ .support-steps{grid-template-columns:1fr} }
.sup-card{position:relative; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:28px; overflow:hidden; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s}
.sup-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-glow); border-color:transparent}
.sup-ic{width:52px; height:52px; border-radius:15px; display:grid; place-items:center; margin-bottom:18px; color:#fff; box-shadow:0 12px 26px -10px rgba(10,14,26,.4)}
.sup-ic.blue{background:linear-gradient(135deg,#1A73E8,#0D47A1)}
.sup-ic.purple{background:linear-gradient(135deg,#8B5CF6,#6D28D9)}
.sup-ic.green{background:linear-gradient(135deg,#10B981,#047857)}
.sup-card h4{font-family:var(--font-display); font-weight:600; font-size:16.5px; margin-bottom:9px}
.sup-card p{color:var(--ink-soft); font-size:14px; line-height:1.55}

/* ---- MODALES ---- */
.modal-root{position:fixed; inset:0; z-index:200; display:none}
.modal-root.open{display:block}
.modal-backdrop{position:absolute; inset:0; background:rgba(10,14,26,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transition:opacity .3s}
.modal-root.open .modal-backdrop{opacity:1}
.modal{position:absolute; left:50%; top:50%; transform:translate(-50%,-46%) scale(.96); width:min(560px,92vw); max-height:86vh; overflow-y:auto; background:#fff; border-radius:24px; box-shadow:0 60px 120px -30px rgba(10,14,26,.5); padding:30px; opacity:0; transition:opacity .3s ease, transform .38s cubic-bezier(.2,.9,.25,1); display:none}
.modal.show{display:block}
.modal-root.open .modal.show{opacity:1; transform:translate(-50%,-50%) scale(1)}
.modal-x{position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%; border:none; background:#F1F3F6; color:#5A6478; display:grid; place-items:center; cursor:pointer; transition:background .2s; z-index:2}
.modal-x:hover{background:#E5E9F0}
.modal-head{display:flex; align-items:center; gap:14px; margin-bottom:18px; padding-right:34px}
.modal-ic{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; color:#fff; flex:none; box-shadow:0 12px 26px -10px rgba(10,14,26,.4)}
.modal-ic.blue{background:linear-gradient(135deg,#1A73E8,#0D47A1)}
.modal-ic.amber{background:linear-gradient(135deg,#F59E0B,#B45309)}
.modal-ic.green{background:linear-gradient(135deg,#10B981,#047857)}
.modal-ic.purple{background:linear-gradient(135deg,#8B5CF6,#6D28D9)}
.modal-head h3{font-family:var(--font-display); font-weight:700; font-size:20px; line-height:1.2}
.modal-sub{font-size:12.5px; color:var(--ink-soft)}
.modal-body{color:var(--ink-soft); font-size:14.5px; line-height:1.65}
.modal-body h4{color:var(--ink); font-family:var(--font-display); font-weight:600; font-size:15px; margin:18px 0 7px}
.modal-body p{margin-bottom:10px}
.modal-body a{color:var(--blue); font-weight:600}
.modal-list{list-style:none; margin:8px 0; display:flex; flex-direction:column; gap:8px}
.modal-list li{position:relative; padding-left:24px; font-size:14px}
.modal-list li::before{content:""; position:absolute; left:0; top:6px; width:14px; height:14px; border-radius:5px; background:linear-gradient(135deg,#1A73E8,#6D28D9)}
.modal-cta{margin-top:20px}
.modal-cta .dl-btn{background:linear-gradient(135deg,#1A73E8,#1557B0); box-shadow:0 16px 34px -14px rgba(26,115,232,.6)}
.modal-cta .dl-btn .ic svg{stroke:#fff}
.modal-cta .dl-btn small{color:rgba(255,255,255,.82)}
.modal-cta .dl-btn b{color:#fff}
.modal-cta .dl-btn::after{display:none}
.modal-foot-note{margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:13px}
.news{display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line)}
.news-tag{flex:none; font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:5px 10px; border-radius:999px; background:#EEF2F7; color:#64748B}
.news-tag.new{background:linear-gradient(135deg,#1A73E8,#6D28D9); color:#fff}
.news b{display:block; font-size:14.5px; color:var(--ink); margin-bottom:3px}
.news p{font-size:13px; color:var(--ink-soft); line-height:1.5}

@media (prefers-reduced-motion: reduce){ .sp-glow,.sp-dot{animation:none} }

/* ============================================================
   v13 — Reportar fallo: tutorial + correo preparado
   ============================================================ */
.rep-steps{list-style:none; display:flex; flex-direction:column; gap:14px; margin:18px 0 4px}
.rep-steps li{display:flex; gap:14px; align-items:flex-start}
.rs-n{flex:none; width:30px; height:30px; border-radius:10px; background:linear-gradient(135deg,#1A73E8,#6D28D9); color:#fff; font-weight:800; font-size:14px; display:grid; place-items:center; box-shadow:0 8px 18px -8px rgba(26,115,232,.6); font-family:var(--font-display)}
.rep-steps li>div{flex:1}
.rep-steps li b{display:block; color:var(--ink); font-size:14.5px; font-weight:700; margin-bottom:2px}
.rep-steps li span{font-size:13px; color:var(--ink-soft); line-height:1.45}

.mail-preview{background:#F7F9FC; border:1px solid var(--line); border-radius:16px; padding:16px; margin:20px 0; font-size:13px}
.mp-row{display:flex; gap:10px; align-items:baseline; padding:3px 0}
.mp-row span{flex:none; width:54px; color:var(--ink-soft); font-weight:600; font-size:12px}
.mp-row b{color:var(--ink); font-weight:700; word-break:break-word}
.mp-divider{height:1px; background:var(--line); margin:10px 0}
.mp-body{color:var(--ink-soft); line-height:1.95; font-size:12.5px}

.modal-actions{margin-top:22px}
.ma-primary{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; background:linear-gradient(135deg,#1A73E8,#1557B0); color:#fff; font-family:var(--font-display); font-weight:700; font-size:15.5px; padding:15px 20px; border-radius:14px; box-shadow:0 18px 38px -14px rgba(26,115,232,.6); transition:transform .2s ease, box-shadow .2s ease}
.ma-primary:hover{transform:translateY(-2px); box-shadow:0 24px 46px -14px rgba(26,115,232,.72)}
.ma-primary svg{stroke:#fff}
.ma-alt{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:11px}
.ma-btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; background:#fff; border:1.5px solid var(--line); color:var(--ink); font-weight:700; font-size:12.5px; padding:11px 8px; border-radius:11px; cursor:pointer; transition:border-color .2s ease, background .2s ease, color .2s ease; font-family:inherit; text-decoration:none}
.ma-btn:hover{border-color:#C7D2E0; background:#F7F9FC}
.ma-btn svg{flex:none; opacity:.75}
.ma-btn.copied{border-color:#10B981; background:#ECFDF5; color:#059669}
.ma-btn.copied svg{opacity:1; stroke:#059669}
.ma-note{display:block; text-align:center; margin-top:12px; font-size:12px; color:var(--ink-soft)}
@media(max-width:480px){ .ma-alt{grid-template-columns:1fr 1fr} .ma-alt .ma-btn:first-child{grid-column:1 / -1} }

/* fix especificidad: el texto de los enlaces de acción no debe heredar el azul de .modal-body a */
.modal-body .ma-primary{color:#fff}
.modal-body .ma-primary svg{stroke:#fff}
.modal-body .ma-btn{color:var(--ink); text-decoration:none}
.modal-body .ma-btn svg{stroke:currentColor}
.modal-body .ma-btn.copied{color:#059669}

/* ============================================================
   v15 — Pulido fino para Android (solo móvil; PC intacto)
   ============================================================ */
@media(max-width:600px){
  /* ritmo vertical más ajustado */
  .section{padding:56px 0}
  .sec-head{margin-bottom:34px}
  .sec-head .lead, .sec-head p{font-size:15px}

  /* héroe: el logo no debe solaparse con las insignias PREVIEW/8K (badge-row absoluta) */
  .hero-inner{padding-top:78px}
  .badge-row{top:20px; left:18px; right:18px}
  .hero-pill{margin-bottom:24px}

  /* tarjetas feature más cohesionadas y elegantes */
  .features{gap:14px}
  .feat{padding:24px 22px; border-radius:22px}
  .feat .ico{width:50px; height:50px; border-radius:14px; margin-bottom:15px}
  .feat .ico svg{width:25px; height:25px}
  .feat h3{font-size:19px; margin-bottom:7px}
  .feat p{font-size:14px; line-height:1.55}

  /* steps un poco más compactos */
  .step{padding:22px 20px}

  /* títulos grandes: que no se desborden y respiren */
  h1{line-height:1.1}
  .section h2{line-height:1.14}
}

/* pantallas muy estrechas */
@media(max-width:380px){
  .wrap{padding-left:18px; padding-right:18px}
  .feat{padding:22px 18px}
}

/* ============================================================
   ICONOS MODERNOS · Material Symbols Rounded (Google)
   + micro-interacciones (relleno al hover, "pop" al entrar)
   ============================================================ */
.material-symbols-rounded{
  font-family:'Material Symbols Rounded';
  font-weight:normal; font-style:normal; line-height:1;
  letter-spacing:normal; text-transform:none; white-space:nowrap;
  word-wrap:normal; direction:ltr; display:inline-block; vertical-align:middle;
  -webkit-font-feature-settings:'liga'; font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  user-select:none;
  font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 40;
  transition:font-variation-settings .35s cubic-bezier(.2,.8,.2,1), transform .35s cubic-bezier(.2,.8,.2,1), color .25s;
}

/* --- Chips del hero: rellenan + escalan al pasar el cursor --- */
.chip .material-symbols-rounded{font-size:20px}
.chip:hover .material-symbols-rounded{font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 40; transform:scale(1.12)}

/* --- pchips (línea): se quedan en contorno (hay globo) --- */
.pchip .material-symbols-rounded{font-size:17px}
.pchip:hover .material-symbols-rounded{transform:scale(1.1)}

/* --- ICONOS DE FUNCIONES: contenedor tonal + relleno al hover --- */
.feat .ico .material-symbols-rounded{font-size:30px; color:inherit; font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 40}
.feat:hover .ico .material-symbols-rounded{font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 40}

/* Contenedores tonales por color (sustituyen el blanco-gris genérico) */
.feat .ico.ic-blue  {background:linear-gradient(160deg,rgba(26,115,232,.16),rgba(26,115,232,.04)); border-color:rgba(26,115,232,.18)}
.feat .ico.ic-amber {background:linear-gradient(160deg,rgba(245,158,11,.18),rgba(245,158,11,.05)); border-color:rgba(245,158,11,.20)}
.feat .ico.ic-green {background:linear-gradient(160deg,rgba(16,185,129,.16),rgba(16,185,129,.04)); border-color:rgba(16,185,129,.18)}
.feat .ico.ic-purple{background:linear-gradient(160deg,rgba(139,92,246,.16),rgba(139,92,246,.05)); border-color:rgba(139,92,246,.20)}
.feat .ico.ic-pink  {background:linear-gradient(160deg,rgba(236,72,153,.16),rgba(236,72,153,.05)); border-color:rgba(236,72,153,.20)}
.feat .ico.ic-cyan  {background:linear-gradient(160deg,rgba(6,182,212,.16),rgba(6,182,212,.05)); border-color:rgba(6,182,212,.18)}
/* Variante en secciones oscuras */
.sec-dark .feat .ico.ic-blue  {background:rgba(26,115,232,.18); border-color:rgba(96,165,250,.28)}
.sec-dark .feat .ico.ic-amber {background:rgba(245,158,11,.18); border-color:rgba(251,191,36,.28)}
.sec-dark .feat .ico.ic-green {background:rgba(16,185,129,.18); border-color:rgba(52,211,153,.28)}
.sec-dark .feat .ico.ic-purple{background:rgba(139,92,246,.20); border-color:rgba(167,139,250,.30)}
.sec-dark .feat .ico.ic-pink  {background:rgba(236,72,153,.20); border-color:rgba(244,114,182,.30)}
.sec-dark .feat .ico.ic-cyan  {background:rgba(6,182,212,.18); border-color:rgba(34,211,238,.28)}

/* "Pop" del icono cuando la tarjeta entra en pantalla */
.feat.in .ico{animation:icoPop .58s cubic-bezier(.2,1.5,.35,1)}
@keyframes icoPop{0%{transform:scale(.4) rotate(-10deg)}55%{transform:scale(1.1) rotate(4deg)}100%{transform:none}}

/* --- Iconos sólidos (blanco sobre degradado): rellenos por defecto --- */
.sup-ic .material-symbols-rounded   {font-size:26px; font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 40}
.modal-ic .material-symbols-rounded {font-size:26px; font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 40}
.warn .wi .material-symbols-rounded {font-size:26px; font-variation-settings:'FILL' 1,'wght' 650,'GRAD' 0,'opsz' 40}
.vrow .vplay .material-symbols-rounded{font-size:20px; margin-left:2px; font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 40}
.sup-card:hover .sup-ic .material-symbols-rounded{transform:scale(1.1)}
.vrow:hover .vplay .material-symbols-rounded{transform:scale(1.12)}

/* --- Iconos de UI (contorno) --- */
.modal-x .material-symbols-rounded   {font-size:22px}
.sps-name .material-symbols-rounded  {font-size:19px; font-variation-settings:'FILL' 0,'wght' 600,'GRAD' 0,'opsz' 40}
.sps-foot .material-symbols-rounded  {font-size:16px}
.dl-btn .ic .material-symbols-rounded{font-size:24px; font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 40}
.faq-q .plus .material-symbols-rounded{font-size:19px; font-variation-settings:'FILL' 0,'wght' 650,'GRAD' 0,'opsz' 40}

@media (prefers-reduced-motion: reduce){
  .feat.in .ico{animation:none}
  .material-symbols-rounded{transition:none}
}

/* ============================================================
   v16 — PULIDO PREMIUM GLOBAL
   Capa puramente ADITIVA: solo refina el acabado.
   No modifica ninguna sección, ningún mockup ni la lógica JS.
   ============================================================ */

/* ---- Render global más fino y de mayor calidad ---- */
html{ scroll-padding-top:86px; }                 /* las anclas no quedan ocultas bajo la barra fija (clave en móvil) */
*{ -webkit-tap-highlight-color:transparent; }     /* sin destello azulado al tocar en Android = acabado más limpio */
body{ text-rendering:optimizeLegibility; -moz-osx-font-smoothing:grayscale; font-kerning:normal; }

/* ---- Equilibrado tipográfico: cortes de línea elegantes en titulares y textos ---- */
h1, h2, h3, h4,
.sec-head h2, .split h2, .cta h2, .modal-head h3{ text-wrap:balance; }
.hero p.sub, p.lead, .sec-head p, .cta p, .feat p, .modal-body p, .sup-card p{ text-wrap:pretty; }

/* ---- Selección de texto con color de marca ---- */
::selection{ background:rgba(26,115,232,.20); color:#0A0E1A; }
.sec-dark ::selection, .hero ::selection, .cta ::selection{ background:rgba(96,165,250,.32); color:#fff; }

/* ---- Foco accesible (solo teclado): anillo limpio que no molesta con el ratón ---- */
:focus:not(:focus-visible){ outline:none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
.chip:focus-visible, .pchip:focus-visible, .dl-btn:focus-visible, .nav-cta:focus-visible,
.btn-ghost:focus-visible, .ma-primary:focus-visible, .ma-btn:focus-visible,
.modal-x:focus-visible{
  outline:2.5px solid rgba(26,115,232,.6); outline-offset:3px;
}
.sec-dark a:focus-visible, .sec-dark button:focus-visible,
.hero button:focus-visible, .cta button:focus-visible{ outline-color:rgba(125,182,255,.9); }

/* ---- Micro-interacción al pulsar: feedback táctil en Android y clic en PC ---- */
.dl-btn:active{ transform:translateY(-1px) scale(.985); }
.nav-cta:active{ transform:scale(.96); }
.btn-ghost:active, .ma-primary:active{ transform:translateY(0) scale(.98); }
.chip:active, .pchip:active{ transform:scale(.95); }
.feat:active, .os:active, .stat:active, .sup-card:active{ transform:translateY(-2px) scale(.995); }
.vrow:active{ transform:translateX(4px) scale(.996); }
.foot-col a:active{ transform:translateX(3px); }
/* estos no traían transición de transform: se la damos para que el "press" sea suave */
.ma-btn{ transition:transform .18s cubic-bezier(.2,.8,.2,1), border-color .2s ease, background .2s ease, color .2s ease; }
.ma-btn:active{ transform:scale(.94); }
.modal-x{ transition:transform .18s cubic-bezier(.2,.8,.2,1), background .2s ease; }
.modal-x:active{ transform:scale(.92); }

/* ---- Botón de descarga: acabado un punto más premium (sutil, no cambia su comportamiento) ---- */
.dl-btn{ background-image:linear-gradient(180deg,#FFFFFF 0%,#EEF3FB 100%); }
.dl-btn b{ letter-spacing:-.01em; }

/* ---- Profundidad táctil sutil en pastillas e iconos de sistema ---- */
.pchip{ box-shadow:inset 0 1px 0 rgba(255,255,255,.7); }
.sec-dark .pchip{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.os .osic{ box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 10px 22px -16px rgba(10,14,26,.4); }
.sec-dark .os .osic{ box-shadow:inset 0 1px 0 rgba(255,255,255,.1); }

/* ---- Barra de navegación: realce más fino y elegante al hacer scroll ---- */
.nav.scrolled{ background:rgba(255,255,255,.82); box-shadow:0 1px 0 rgba(10,14,26,.05), 0 10px 30px -16px rgba(10,14,26,.18); }

/* ---- Scrollbar premium (solo escritorio; en móvil se respeta la nativa) ---- */
@media (hover:hover) and (pointer:fine){
  *{ scrollbar-width:thin; scrollbar-color:rgba(120,135,160,.55) transparent; }
  ::-webkit-scrollbar{ width:11px; height:11px; }
  ::-webkit-scrollbar-track{ background:transparent; }
  ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#9AA7BC,#7C8AA3); border:3px solid transparent; background-clip:padding-box; border-radius:999px; }
  ::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#7C8AA3,#5E6E8A); background-clip:padding-box; }
}

/* ---- Respeto a "prefers-reduced-motion": el press no debe dar saltos ---- */
@media (prefers-reduced-motion: reduce){
  .dl-btn:active, .nav-cta:active, .btn-ghost:active, .ma-primary:active,
  .chip:active, .pchip:active, .feat:active, .os:active, .stat:active, .sup-card:active,
  .vrow:active, .ma-btn:active, .modal-x:active, .foot-col a:active{ transform:none; }
}