:root{--cyan:#00d9ff;--accent:#f33bd4;--dark:#020b11;--muted:#a9bbc3;--line:#352044}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--dark);color:#fff;font-family:Arial,sans-serif;line-height:1.5}
.accent{color:var(--accent);font-style:normal}

.header{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;position:sticky;top:0;z-index:20;background:rgba(2,11,17,.95);border-bottom:1px solid var(--line)}
.logo{font-size:28px;font-weight:900;color:#fff;text-decoration:none;font-style:italic}
.logo span,.tag,.intro>span,.audience>div>span,.cta span.label,.logo small{color:var(--cyan)}
.logo small{display:block;font-size:8px;letter-spacing:7px;text-align:center}
nav{display:flex;gap:22px}
nav a{color:#fff;text-decoration:none;font-size:13px}
.btn{display:inline-block;background:var(--cyan);color:#001016;padding:14px 22px;text-decoration:none;font-weight:900;border-radius:5px;border:0;font-size:16px;cursor:pointer;font-family:inherit}
.outline{display:inline-block;border:1px solid #fff;color:#fff;padding:13px 24px;text-decoration:none;border-radius:5px}
#menuBtn{display:none;background:none;border:0;color:#fff;font-size:28px;cursor:pointer}

.hero{min-height:640px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;padding:70px 7%;background:radial-gradient(circle at 75% 40%,color-mix(in srgb,var(--accent) 35%,#020b11),transparent 30%),radial-gradient(circle at 65% 25%,#073f64,transparent 35%)}
.hero h1{font-size:clamp(55px,8vw,105px);line-height:.86;margin:15px 0}
.hero h2{font-size:clamp(27px,4vw,47px);line-height:1.1;margin:0}
.hero p,.intro p{max-width:620px;color:#d0dce1;font-size:18px}
.actions{display:flex;gap:14px;margin-top:28px}
.hero-art{font-size:clamp(90px,14vw,200px);font-weight:900;text-align:center;color:var(--accent);text-shadow:0 0 35px color-mix(in srgb,var(--accent) 45%,transparent)}
.hero-art small{display:block;font-size:16px;font-weight:400;color:var(--cyan);letter-spacing:2px;text-shadow:none}

.highlights{display:grid;grid-template-columns:repeat(4,1fr);padding:30px 7%;border-block:1px solid var(--line)}
.highlights div{text-align:center;font-size:28px;color:var(--accent)}
.highlights b{display:block;color:#fff;font-size:13px;margin-top:7px}

.section{padding:85px 7%;display:grid;grid-template-columns:.8fr 1.2fr;gap:65px;border-bottom:1px solid var(--line)}
.alt{background:#07101a}
.intro h2,.audience h2,.cta h2{font-size:clamp(40px,5vw,70px);line-height:.95;margin:12px 0}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.cards article{padding:24px;background:linear-gradient(145deg,#0d1420,#050b12);border:1px solid color-mix(in srgb,var(--accent) 35%,#0b1020);border-radius:7px}
.cards p,.modules p{color:var(--muted)}
.modules article{display:flex;gap:18px;padding:15px 0;border-bottom:1px solid #49264d}
.modules b{min-width:48px;height:34px;border-radius:18px;background:var(--accent);color:#10020d;display:flex;align-items:center;justify-content:center}
.modules h3,.modules p{margin:0 0 5px}

.audience{padding:75px 7%;display:grid;grid-template-columns:1fr 1fr;gap:60px;background:#07101a}
.audience ul{list-style:none;padding:0}
.audience li{padding:10px 0;border-bottom:1px solid #49264d}

.cta{padding:70px 7%;display:flex;align-items:center;justify-content:space-between;gap:30px;background:radial-gradient(circle at 80%,color-mix(in srgb,var(--accent) 35%,#020b11),transparent 30%)}
.cta span.label{font-weight:700}
.lead-form{display:grid;gap:10px;min-width:min(100%,360px)}
.lead-form input{padding:14px;border-radius:5px;border:1px solid #2a4552;background:#07151d;color:#fff;font-size:16px;font-family:inherit}
.lead-form input:focus{outline:2px solid var(--cyan)}
.lead-form .hp{position:absolute;left:-9999px}
.notice{padding:12px 14px;border-radius:5px;font-size:15px}
.notice.ok{background:#0b3a2a;color:#9ff0c8}
.notice.err{background:#4a1522;color:#ffb3c1}

footer{padding:40px 7%;display:flex;justify-content:space-between;align-items:center;color:#9eb1ba}

/* Página inicial */
.catalog{padding:70px 7%}
.catalog h1{font-size:clamp(36px,5vw,64px);margin:0 0 10px}
.catalog .cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-top:30px}
.catalog a.card{color:inherit;text-decoration:none;display:block;transition:transform .15s}
.catalog a.card:hover{transform:translateY(-3px)}
.catalog .more{color:var(--cyan);font-weight:700}

@media(max-width:900px){
 nav{display:none;position:absolute;top:80px;left:0;right:0;flex-direction:column;background:#031019;padding:25px}
 nav.active{display:flex}
 .header>.btn{display:none}
 #menuBtn{display:block}
 .hero,.section,.audience{grid-template-columns:1fr}
 .highlights{grid-template-columns:1fr 1fr;gap:25px}
}
@media(max-width:600px){
 .cards{grid-template-columns:1fr}
 .hero h1{font-size:55px}
 .actions,.cta,footer{flex-direction:column;align-items:flex-start}
 .lead-form{width:100%}
}