/* =========================================================
   AAI Software · estilo compartido del sitio
   ========================================================= */
:root{
  --bg:#ffffff; --bg-soft:#f6f7fb; --ink:#0f172a; --ink-2:#334155; --muted:#64748b;
  --line:#e6e8ef; --brand:#0b5ed7; --brand-2:#22c55e; --ai:#7c3aed;
  --night:#070b1a; --night-2:#0e1430;
  --radius:18px; --shadow:0 10px 30px rgba(15,23,42,.07);
  --head:"Space Grotesk", Inter, system-ui, sans-serif;
  --body:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ink-muted:var(--muted);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; display:flex; flex-direction:column; min-height:100vh}
main{flex:1 0 auto}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
h1,h2,h3,h4{font-family:var(--head); letter-spacing:-.02em; line-height:1.15; margin:0}
p{margin:0 0 .9em}
.wrap{max-width:1180px; margin:0 auto; padding:0 20px}
.narrow{max-width:760px}
section{padding:88px 0}
.section-sm{padding:56px 0}
.eyebrow{display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin-bottom:14px}
.section-head{max-width:640px; margin-bottom:40px}
.section-head h2{font-size:clamp(28px,3.4vw,40px)}
.section-head p{color:var(--muted); margin:12px 0 0; font-size:1.05rem}
.muted{color:var(--muted)}
.soft{background:var(--bg-soft)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; font-weight:600; font-size:.95rem; line-height:1.2; padding:12px 18px; border-radius:12px; border:1px solid transparent; transition:transform .15s, box-shadow .15s, background .15s; cursor:pointer; white-space:nowrap; text-decoration:none}
.btn:hover{transform:translateY(-1px); text-decoration:none}
.btn-primary{background:linear-gradient(90deg,var(--brand),#2563eb); color:#fff; box-shadow:0 8px 20px rgba(11,94,215,.25)}
.btn-ghost{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.22)}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-line{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-line:hover{border-color:#cbd5e1}
.btn-dark{background:#0f172a; color:#fff}
.btn-dark:hover{background:#1e293b}
.btn-block{display:flex; width:100%}
.btn svg{width:18px; height:18px; flex:none}
.btn-row{display:flex; flex-wrap:wrap; gap:12px}

/* ---------- Nav ---------- */
.topbar{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line)}
.topbar-inner{max-width:1180px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; position:relative}
.brand img{height:30px; width:auto}
.nav-links{display:flex; align-items:center; gap:4px; margin:0; padding:0; list-style:none}
.nav-link{display:block; padding:8px 12px; border-radius:10px; font-weight:500; font-size:.95rem; color:var(--ink-2)}
.nav-link:hover{background:var(--bg-soft); color:var(--ink); text-decoration:none}
.nav-link.active{color:var(--brand)}
.nav-cta{margin-left:8px}
.burger{display:none; border:1px solid var(--line); background:#fff; border-radius:10px; padding:8px 12px; cursor:pointer; font-weight:600; color:var(--ink); font-family:inherit}
@media (max-width: 980px){
  .burger{display:block}
  .nav-links{position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid var(--line); padding:12px 20px 18px; flex-direction:column; align-items:stretch; gap:4px; display:none; box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .nav-cta{margin:6px 0 0}
  .nav-cta .btn{width:100%}
}
/* Sin JavaScript (o bloqueado): el menú se muestra igual en móvil */
html:not(.js) .burger{display:none}
@media (max-width: 980px){ html:not(.js) .nav-links{position:static; display:flex; flex-wrap:wrap; flex-direction:row; box-shadow:none; border:0; padding:0} html:not(.js) .topbar-inner{flex-wrap:wrap} }

/* ---------- Home hero ---------- */
.hero{position:relative; overflow:hidden; background:radial-gradient(1200px 600px at 75% 40%, #1b2a6b 0%, transparent 60%), radial-gradient(800px 500px at 10% 100%, #2a1060 0%, transparent 60%), var(--night); color:#fff; padding:96px 0 104px}
.hero::before{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(ellipse at 60% 40%, #000 30%, transparent 75%); mask-image:radial-gradient(ellipse at 60% 40%, #000 30%, transparent 75%); pointer-events:none}
.hero-grid{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center}
.hero .eyebrow{color:#93c5fd}
.hero h1{font-size:clamp(38px,5.6vw,66px); font-weight:700}
.grad{background:linear-gradient(90deg,#60a5fa,#a78bfa 50%,#4ade80); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-lead{font-size:1.15rem; color:#cbd5e1; max-width:520px; margin:22px 0 32px}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px}
.hero-stats{display:flex; gap:32px; margin-top:44px; flex-wrap:wrap}
.hero-stats div{font-size:.88rem; color:#94a3b8}
.hero-stats strong{display:block; font-family:var(--head); font-size:1.5rem; color:#fff}
.ai-visual{position:relative; aspect-ratio:1/1; max-width:520px; margin-left:auto; width:100%}
.ai-visual svg{width:100%; height:100%; overflow:visible}
.pulse{animation:pulse 3.2s ease-in-out infinite}
.pulse.d2{animation-delay:.8s} .pulse.d3{animation-delay:1.6s} .pulse.d4{animation-delay:2.4s}
@keyframes pulse{0%,100%{opacity:.35} 50%{opacity:1}}
.orbit{transform-origin:260px 260px; animation:spin 40s linear infinite}
.orbit.rev{animation-direction:reverse; animation-duration:60s}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.pulse,.orbit{animation:none}}

/* ---------- Inner page hero ---------- */
.page-hero{position:relative; overflow:hidden; background:radial-gradient(900px 420px at 85% 0%, #1b2a6b 0%, transparent 65%), radial-gradient(600px 360px at 0% 100%, #2a1060 0%, transparent 60%), var(--night); color:#fff; padding:64px 0 60px}
.page-hero::before{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(ellipse at 70% 30%, #000 25%, transparent 75%); mask-image:radial-gradient(ellipse at 70% 30%, #000 25%, transparent 75%); pointer-events:none}
.page-hero .wrap{position:relative}
.page-hero .eyebrow{color:#93c5fd}
.page-hero h1{font-size:clamp(32px,4.4vw,52px); font-weight:700; max-width:820px}
.page-hero p{color:#cbd5e1; font-size:1.1rem; max-width:640px; margin:16px 0 0}
.page-hero .btn-row{margin-top:28px}
.page-hero a:not(.btn){color:#93c5fd}

/* ---------- Cards & layout ---------- */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow)}
.card > h2, .card > h3{margin-bottom:14px}
.card h2{font-size:1.35rem}
.card h3{font-size:1.1rem}
.layout{display:grid; grid-template-columns:1fr 400px; gap:32px; align-items:start}
.layout.even{grid-template-columns:1fr 1fr}
.stack{display:grid; gap:20px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.overlap{margin-top:-36px; position:relative; z-index:2; padding-top:0}
.center-wrap{max-width:520px; margin:0 auto}

/* ---------- Products ---------- */
.products{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.product{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s}
.product:hover{transform:translateY(-3px); box-shadow:0 18px 40px rgba(15,23,42,.10)}
.product.featured{background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,var(--brand),var(--ai),var(--brand-2)) border-box; border:1.5px solid transparent}
.p-icon{width:52px; height:52px; border-radius:14px; display:grid; place-items:center; color:#fff; font-family:var(--head); font-weight:700; font-size:1.05rem; margin-bottom:20px; flex:none}
.p-icon.sm{width:40px; height:40px; border-radius:11px; font-size:.9rem; margin:0}
.p-icon.aai{background:linear-gradient(135deg,#0b5ed7,#7c3aed)}
.p-icon.light{background:linear-gradient(135deg,#22c55e,#0ea5e9)}
.p-icon.manta{background:linear-gradient(135deg,#0f172a,#7c3aed)}
.p-icon.doc{background:linear-gradient(135deg,#0ea5e9,#0b5ed7)}
.p-icon.key{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.p-icon.tok{background:linear-gradient(135deg,#7c3aed,#ec4899)}
.product h3{font-size:1.45rem}
.p-tag{font-size:.85rem; color:var(--muted); margin:4px 0 14px}
.product p.desc{color:var(--ink-2); margin:0 0 18px}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:24px}
.chip, .badge{display:inline-block; font-size:.78rem; font-weight:500; padding:4px 10px; border-radius:999px; background:var(--bg-soft); color:var(--ink-2); border:1px solid var(--line)}
.p-actions{margin-top:auto; display:grid; gap:10px}
.p-link{font-size:.9rem; font-weight:500; text-align:center; color:var(--muted)}
.p-link:hover{color:var(--brand)}
.ribbon{position:absolute; top:18px; right:18px; font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ai); background:#f3e8ff; padding:4px 10px; border-radius:999px}

/* Compact resource rows (downloads, quick access) */
.res{display:flex; align-items:center; gap:16px; padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:16px}
.res + .res{margin-top:12px}
.res-body{flex:1; min-width:0}
.res-body h3{font-size:1.05rem; margin:0}
.res-body p{margin:2px 0 0; color:var(--muted); font-size:.9rem}
@media (max-width:640px){ .res{flex-wrap:wrap} .res .btn{width:100%} }

/* ---------- Services ---------- */
.services{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.service{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px}
.s-ico{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:#eef4ff; color:var(--brand); margin-bottom:18px}
.s-ico svg{width:22px; height:22px}
.service h3{font-size:1.12rem; margin-bottom:8px}
.service p{margin:0; color:var(--muted); font-size:.95rem}
.band{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:28px; padding:24px 28px; border-radius:var(--radius); background:var(--night); color:#fff; flex-wrap:wrap}
.band p{margin:0; font-family:var(--head); font-size:1.25rem}

/* ---------- Showcase / lists ---------- */
.showcase{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center}
.showcase > a, .showcase > .media{justify-self:center; width:100%; max-width:400px}
.shot{border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--line)}
.checks{list-style:none; padding:0; margin:20px 0 24px; display:grid; gap:12px}
.checks li{display:flex; gap:12px; align-items:flex-start; color:var(--ink-2)}
.checks li::before{content:""; flex:none; width:20px; height:20px; margin-top:3px; border-radius:50%; background:#dcfce7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2316a34a'%3E%3Cpath d='M8.1 13.3 4.8 10l-1.1 1.1 4.4 4.4 8.5-8.5-1.1-1.1z'/%3E%3C/svg%3E") center/14px no-repeat}
.steps{list-style:none; padding:0; margin:16px 0; counter-reset:s; display:grid; gap:14px}
.steps li{counter-increment:s; display:grid; grid-template-columns:32px 1fr; gap:12px; color:var(--ink-2)}
.steps li::before{content:counter(s); width:28px; height:28px; border-radius:8px; background:#eef4ff; color:var(--brand); font-weight:700; font-size:.85rem; display:grid; place-items:center; font-family:var(--head)}

/* ---------- Forms ---------- */
.form-modern form, form.form{display:grid; gap:12px}
.form-modern input:not([type=submit]):not([type=hidden]), .form-modern select, .form-modern textarea,
form.form input:not([type=submit]):not([type=hidden]), form.form select, form.form textarea{width:100%; padding:.8rem 1rem; border-radius:12px; border:1px solid var(--line); background:var(--bg-soft); color:var(--ink); font:inherit; transition:border .15s, box-shadow .15s, background .15s}
.form-modern input:focus, .form-modern select:focus, .form-modern textarea:focus,
form.form input:focus, form.form select:focus, form.form textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(11,94,215,.12); background:#fff}
.form-modern label, form.form label{font-size:.88rem; font-weight:600; color:var(--ink-2); display:block; margin-bottom:6px}
.form-modern button[type=submit], .form-modern input[type=submit],
form.form button[type=submit], form.form input[type=submit]{background:linear-gradient(90deg,var(--brand),#2563eb); border:none; color:#fff; font:inherit; font-weight:600; padding:.85rem 1.2rem; border-radius:12px; cursor:pointer; margin-top:4px; box-shadow:0 8px 20px rgba(11,94,215,.2)}
.form-modern button[type=submit]:hover, .form-modern input[type=submit]:hover,
form.form button[type=submit]:hover, form.form input[type=submit]:hover{filter:brightness(.96)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:6px}
.hint{font-size:.9rem; color:var(--muted)}

/* Auth tabs */
.auth{background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:8px 24px 26px}
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin:0 -24px 22px; padding:0 16px; overflow-x:auto}
.tab{background:none; border:0; font:inherit; font-weight:600; font-size:.92rem; color:var(--muted); padding:14px 10px 12px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap}
.tab[aria-selected="true"]{color:var(--ink); border-color:var(--brand)}
html:not(.js) .tabs{display:none}
html:not(.js) .panel + .panel{margin-top:26px; padding-top:22px; border-top:1px solid var(--line)}
.panel h2{font-size:1.25rem; margin-bottom:14px}
.panel[hidden]{display:none}

/* ---------- Messages ---------- */
.msg, .error, .success, .notice{margin:0 0 16px; padding:.8rem 1rem; border-radius:12px; font-weight:500}
.msg p, .error p, .success p{margin:0}
.msg.err, .error{background:#fee2e2; color:#991b1b; border:1px solid #fecaca}
.msg.ok, .success{background:#dcfce7; color:#065f46; border:1px solid #bbf7d0}
.notice{background:#eef4ff; color:#1e3a8a; border:1px solid #dbe6ff}
.notice:empty{display:none}
.notice h1{font-size:1.05rem; font-family:var(--body); letter-spacing:0; font-weight:600; margin:0}

/* ---------- Profile ---------- */
.greeting{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:22px 26px; border-radius:var(--radius); background:linear-gradient(135deg,#eef4ff,#f5f0ff); border:1px solid #e3e8fb; font-family:var(--head); font-size:1.35rem; font-weight:600; margin-bottom:20px}
.license-expiry{font-family:var(--body); font-size:.9rem; font-weight:500; color:var(--ink-2); background:#fff; border:1px solid var(--line); padding:6px 12px; border-radius:999px}
.license-expiry:empty{display:none}
.details{display:grid}
.detail-row{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line)}
.detail-row:last-child{border-bottom:0}
.detail-row strong{font-weight:500; color:var(--muted)}
.detail-row span{font-weight:600; text-align:right; word-break:break-word}
.link-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px}

/* ---------- Pricing ---------- */
.price-card{display:grid; grid-template-columns:1.2fr 1fr; overflow:hidden; padding:0}
.price-card > div{padding:32px}
.price-side{background:linear-gradient(160deg,#f5f8ff,#f7f2ff); border-left:1px solid var(--line); display:flex; flex-direction:column; justify-content:center}
.price{font-family:var(--head); font-size:3rem; font-weight:700; letter-spacing:-.03em; line-height:1}
.price span{font-size:1rem; font-weight:500; color:var(--muted); letter-spacing:0}
.pay-list{display:grid; gap:14px}
.pay-item{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:18px 20px; border:1px solid var(--line); border-radius:16px; background:#fff}
.pay-item h3{font-size:1.02rem; margin:0}
.paypal-form{display:inline-grid; justify-items:center; gap:.5rem}
.paypal-form img{max-width:180px}
.secure{font-size:.85rem; color:var(--muted); margin-top:14px}
/* Botones de PayPal (clases pp-XXXX) */
input[class^="pp-"], .buy-btn{text-align:center; border:none; border-radius:999px; min-width:11.6rem; padding:0 2rem; height:2.75rem; font-weight:700; background:#FFD140; color:#000; font-family:inherit; font-size:1rem; line-height:1.25rem; cursor:pointer}
input[class^="pp-"]:hover, .buy-btn:hover{filter:brightness(.97)}
.buy-btn{width:100%; background:linear-gradient(90deg,var(--brand),#2563eb); color:#fff; border-radius:12px; height:3rem}

/* ---------- Status page ---------- */
.status{text-align:center}
.status-ico{width:72px; height:72px; border-radius:50%; margin:0 auto 20px; display:grid; place-items:center; background:#dcfce7; color:#16a34a; font-size:2rem; font-weight:700}
.status h2.date{font-size:1.8rem; color:var(--brand); margin:6px 0 18px}

/* ---------- Manual ---------- */
.toc{position:sticky; top:84px; display:grid; gap:2px}
.toc a{display:block; padding:7px 12px; border-radius:10px; color:var(--ink-2); font-size:.92rem}
.toc a:hover{background:var(--bg-soft); text-decoration:none; color:var(--ink)}
.manual{display:grid; grid-template-columns:240px 1fr; gap:40px; align-items:start}
.lesson{scroll-margin-top:84px; padding:0 0 40px; margin:0 0 40px; border-bottom:1px solid var(--line)}
.lesson:last-child{border-bottom:0}
.lesson h2{font-size:1.5rem; margin-bottom:12px}
.lesson p{color:var(--ink-2)}
.lesson video{width:100%; border-radius:14px; background:#000; margin-top:16px; box-shadow:var(--shadow)}

/* ---------- Footer ---------- */
.site-footer{background:var(--night); color:#94a3b8; padding:48px 0 32px; font-size:.92rem; margin-top:auto}
.foot{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap}
.foot img{height:26px; filter:invert(1); mix-blend-mode:screen; margin-bottom:12px}
.foot a{color:#cbd5e1} .foot a:hover{color:#fff}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.foot h4{color:#fff; font-size:.95rem; margin:0 0 10px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08); margin-top:32px; padding-top:20px; font-size:.82rem}

.whatsapp-float{position:fixed; bottom:20px; right:20px; background:#25D366; width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.25); z-index:9999; transition:transform .3s}
.whatsapp-float:hover{transform:scale(1.08)}
.whatsapp-float img{width:32px; height:32px}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .products, .grid-3{grid-template-columns:1fr; max-width:560px}
  .services{grid-template-columns:repeat(2,1fr)}
  .showcase, .layout, .layout.even, .manual{grid-template-columns:1fr; gap:32px}
  .toc{position:static; display:flex; flex-wrap:wrap; gap:6px}
  .toc a{background:var(--bg-soft)}
  .price-card{grid-template-columns:1fr}
  .price-side{border-left:0; border-top:1px solid var(--line)}
}
@media (max-width: 760px){
  section{padding:64px 0}
  .hero{padding:64px 0 72px}
  .page-hero{padding:48px 0 52px}
  .hero-grid{grid-template-columns:1fr}
  .ai-visual{max-width:340px; margin:0 auto}
  .hero-stats{gap:20px; margin-top:32px}
  .hero-stats strong{font-size:1.1rem}
  .services, .grid-2, .form-grid{grid-template-columns:1fr}
  .card:not(.price-card), .price-card > div{padding:22px}
  .layout > .auth{order:-1}
  .greeting{font-size:1.15rem; padding:18px 20px}
}