*{box-sizing:border-box}html{scroll-behavior:smooth}
/* Tema claro profesional estilo apps grandes: blanco suave que no cansa la vista */
body{background:#F3F6FB;font-family:system-ui,Segoe UI,Roboto,Arial;margin:0;overflow-x:hidden;color:#16233B}
/* Overrides de utilidades Tailwind usadas en el HTML para el tema claro */
.text-white{color:#16233B!important}
.text-slate-300{color:#3E4C63!important}
.text-slate-400{color:#64748B!important}
.text-neon{color:#06A3C6!important}
.text-cyan-300{color:#0881A8!important}
/* Fondo animado claro: auroras pastel suaves */
.bg-glow{position:fixed;inset:-20%;pointer-events:none;z-index:0;
 background:
  radial-gradient(38rem 22rem at 15% 8%,rgba(6,163,198,.12),transparent 60%),
  radial-gradient(42rem 24rem at 88% 12%,rgba(124,58,237,.12),transparent 60%),
  radial-gradient(36rem 22rem at 50% 100%,rgba(255,45,120,.08),transparent 60%),
  radial-gradient(30rem 20rem at 85% 85%,rgba(0,180,120,.08),transparent 60%);
 animation:aurora 18s ease-in-out infinite alternate}
@keyframes aurora{0%{transform:translate3d(-2%,-1%,0) scale(1)}50%{transform:translate3d(2%,2%,0) scale(1.06)}100%{transform:translate3d(-1%,1%,0) scale(1.03)}}
.bg-stars{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
 background-image:radial-gradient(1.5px 1.5px at 12% 22%,#B9C6DD,transparent),radial-gradient(1px 1px at 68% 8%,#8FD4E8,transparent),radial-gradient(1.5px 1.5px at 84% 34%,#B9C6DD,transparent),radial-gradient(1px 1px at 32% 66%,#C4B5FD,transparent),radial-gradient(1.5px 1.5px at 55% 82%,#B9C6DD,transparent),radial-gradient(1px 1px at 8% 78%,#8FD4E8,transparent);
 animation:twinkle 5s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.3}50%{opacity:.6}}
.card{position:relative;background:#FFFFFF;border:1px solid #E4EAF4;border-radius:20px;box-shadow:0 8px 30px rgba(30,50,90,.08)}
.card.glow{border:1px solid rgba(6,163,198,.35);box-shadow:0 0 0 1px rgba(6,163,198,.15),0 12px 44px rgba(6,163,198,.12)}
.logo{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-weight:900;background:linear-gradient(135deg,#06A3C6,#7C3AED);color:#fff}
.grad-text{background:linear-gradient(90deg,#0891B2,#7C3AED);-webkit-background-clip:text;background-clip:text;color:transparent}
.input{background:#F6F9FC;border:1px solid #D9E2EF;border-radius:12px;padding:12px 14px;width:100%;color:#16233B;outline:none;font-size:15px}
.input:focus{border-color:#06A3C6;background:#fff}
.input::placeholder{color:#94A3B8}
textarea.input{resize:vertical}select.input{appearance:none}
.btn-primary{background:linear-gradient(135deg,#06A3C6,#7C3AED);color:#fff;font-weight:800;border-radius:12px;padding:12px 18px;border:0;cursor:pointer;font-size:15px;text-decoration:none;display:inline-block;transition:transform .12s ease,box-shadow .2s ease,filter .2s ease}
.btn-primary:hover{filter:brightness(1.07);box-shadow:0 6px 22px rgba(6,163,198,.35)}
.btn-primary:active{transform:scale(.98)}.btn-primary:disabled{cursor:wait}
.btn-big{padding:14px 28px;font-size:17px}.btn-sm{padding:8px 14px;font-size:13px}
.btn-ghost{background:#EDF2F8;border:1px solid #D9E2EF;border-radius:12px;padding:12px 14px;font-size:14px;color:#16233B;cursor:pointer;text-decoration:none;display:inline-block}
.btn-ghost:hover{background:#E2EAF4}
.badge{display:inline-block;font-size:11px;padding:4px 10px;border-radius:999px;background:#EDF2F8;border:1px solid #D9E2EF;color:#3E4C63}
.badge.on{background:linear-gradient(135deg,#06A3C6,#7C3AED);color:#fff;font-weight:800;border-color:transparent}
.tabbar{position:fixed;bottom:0;left:0;right:0;display:flex;gap:4px;justify-content:space-around;background:rgba(255,255,255,.94);border-top:1px solid #E4EAF4;padding:10px 6px calc(10px + env(safe-area-inset-bottom));z-index:50}
.tabbar a{display:flex;flex-direction:column;align-items:center;font-size:18px;color:#8A97AD;text-decoration:none;min-width:64px}
.tabbar a span{font-size:11px}.tabbar a.active{color:#06A3C6}
#queueList li,#history li{background:#F6F9FC;border:1px solid #E4EAF4;border-radius:10px;padding:8px 10px;list-style:none;color:#16233B}#queueList,#history{padding:0}
/* ---- PRO layout ---- */
.wrap{max-width:64rem;margin:0 auto;padding:0 1rem;position:relative;z-index:1}
.topbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid #E4EAF4;padding:.7rem 0}
.hero{margin-top:1.25rem;padding:2.2rem 1.5rem;text-align:center;animation:fadeUp .5s ease both}
.hero h1{font-size:clamp(1.7rem,5vw,2.8rem);font-weight:900;margin:.8rem 0 .4rem;line-height:1.15;color:#101B2E}
.hero .sub{color:#5B6B84;margin:0 auto;max-width:34rem}
.trust{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;font-size:12px;color:#0E7490}
.trust span{background:rgba(6,163,198,.09);border:1px solid rgba(6,163,198,.3);border-radius:999px;padding:4px 12px}
.platforms{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin:1.2rem 0}
.plat{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:14px;border:1px solid #D9E2EF;background:#F6F9FC;color:#3E4C63;cursor:pointer;font-size:14px;font-weight:600;transition:transform .15s}
.plat:hover{transform:translateY(-2px)}
.plat svg{width:22px;height:22px;fill:currentColor}
.plat-fb{color:#1877F2;border-color:rgba(24,119,242,.4)}
.plat-fb.on{background:#1877F2;color:#fff;border-color:transparent}
.plat-ig{color:#D62976;border-color:rgba(214,41,118,.35)}
.plat-ig.on{background:linear-gradient(45deg,#FEDA75,#FA7E1E,#D62976,#962FBF);color:#fff;border-color:transparent}
.plat-tt{color:#111;border-color:#CBD5E1}
.plat-tt.on{background:#111;color:#00F2EA;box-shadow:2px 2px 0 #FE2C55;border-color:transparent}
.plat-yt{color:#E11D1D;border-color:rgba(255,0,0,.3)}
.plat-yt.on{background:#FF0000;color:#fff;border-color:transparent}
.plat-ax{color:#EA580C;border-color:rgba(255,90,0,.35)}
.plat-ax.on{background:#FF5A00;color:#fff;border-color:transparent}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#result:not(.hidden){animation:fadeUp .35s ease both}
.plat.on{animation:floaty 2.6s ease-in-out infinite}
.dlbox{max-width:40rem;margin:0 auto}
.dlbox .input{padding:15px 18px;font-size:16px;border-radius:14px}
.dlrow{display:flex;gap:.5rem;margin-top:.6rem;justify-content:center;flex-wrap:wrap}
.dlrow2{display:flex;gap:.8rem;margin-top:.7rem;align-items:center;justify-content:center;flex-wrap:wrap}
.dlrow2 .input{max-width:22rem}
.status{min-height:1.4rem;font-size:14px;color:#3E4C63;margin-top:.8rem}
.h2{font-size:1.5rem;font-weight:800;color:#101B2E}
.step{padding:1.4rem;text-align:center}
.stepnum{width:40px;height:40px;margin:0 auto .6rem;border-radius:12px;display:grid;place-items:center;font-weight:900;font-size:18px;background:linear-gradient(135deg,#06A3C6,#7C3AED);color:#fff}
.step h3{font-weight:800;margin:.2rem 0;color:#101B2E}
.step p{color:#5B6B84;font-size:14px;margin:0}
.cmp{width:100%;border-collapse:collapse;font-size:14px;min-width:560px;color:#16233B}
.cmp th,.cmp td{padding:.7rem .9rem;border-bottom:1px solid #E8EEF6;text-align:left}
.cmp th{color:#64748B;font-size:12px;text-transform:uppercase}
.cmp .me{color:#0891B2;font-weight:800}
.faq{padding:0}
.faq summary{padding:1rem 1.2rem;cursor:pointer;font-weight:700;list-style:none;color:#101B2E}
.faq summary::-webkit-details-marker{display:none}
.faq p{padding:0 1.2rem 1rem;color:#5B6B84;font-size:14px;margin:0}
.cta{text-align:center;padding:2.2rem 1.5rem}
.cta h2{font-size:1.6rem;font-weight:900;margin:0 0 .3rem;color:#101B2E}
.cta p{color:#5B6B84;margin:0 0 1.2rem}
.footer{border-top:1px solid #E4EAF4;margin-top:2.5rem;padding:1.2rem 0 5.5rem}
#dlBar{position:relative;overflow:hidden}
#dlBar::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);animation:shine 1.4s linear infinite}
@keyframes shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media(max-width:640px){.hero{padding:1.6rem 1rem}.dlrow .btn-primary{flex:1}}
@media(prefers-reduced-motion:reduce){.bg-glow,.bg-stars,.plat.on,#dlBar::after{animation:none}}