/* Nexovant · capa visual v2 (paleta del logo: azul marino + azul cielo) */
:root{--bg:#070c18;--panel:#0d1526;--panel-2:#111c33;--line:rgba(170,200,255,.12);--text:#eef3ff;--muted:#a3b0c8;--mint:#5cb8f5;--mint-2:#3d8fe0;--accent-2:#8b7bff;--grad:linear-gradient(120deg,#5cb8f5 0%,#7d9bff 55%,#a48bff 100%);--radius:16px;--shadow:0 20px 50px -20px rgba(0,0,0,.6)}
body{font-size:16px;line-height:1.65;background:radial-gradient(1200px 600px at 85% -10%,rgba(61,143,224,.18),transparent 60%),radial-gradient(900px 500px at -10% 30%,rgba(139,123,255,.10),transparent 60%),var(--bg);background-attachment:fixed}
.ambient{display:none}
.topbar{position:sticky;top:0;z-index:50;height:74px;background:rgba(7,12,24,.72);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line);width:100%;padding-inline:max(32px,calc((100% - 1160px)/2))}
.brand-logo{border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.15),0 8px 24px -8px rgba(92,184,245,.5)}
.nav{gap:28px;font-size:14px;color:var(--muted)}
.nav a{position:relative;padding:6px 0;transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav a:hover{color:var(--text)}.nav a:hover::after{transform:scaleX(1)}
.top-cta{border-radius:999px;padding:10px 18px;font-size:13px;font-weight:600;border:1px solid rgba(92,184,245,.4);transition:background .2s,border-color .2s}
.top-cta:hover{background:rgba(92,184,245,.12);border-color:var(--mint)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:12px;letter-spacing:.14em}
.hero h1{letter-spacing:-.045em;font-weight:700}
.hero h1 span,h2 em{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal}
.hero-lede{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:34ch}
h2{letter-spacing:-.035em}
.section-index{font-size:12px;letter-spacing:.16em;color:var(--mint)}
.button{font-size:15px;gap:12px;border-radius:999px}
.button-primary{background:var(--grad);color:#06101f;padding:15px 26px;border-radius:999px;box-shadow:0 12px 30px -10px rgba(92,184,245,.6);transition:transform .2s,box-shadow .2s,filter .2s}
.button-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(125,155,255,.75);filter:brightness(1.05)}
.text-link,.card-link{font-size:14px;font-weight:600;color:var(--mint)}
.service-card,.pricing-card,.account-card,.studio-panel,.step,.omx-card{border-radius:var(--radius);border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.01));box-shadow:var(--shadow);transition:transform .3s ease,border-color .3s,box-shadow .3s}
.service-card:hover,.pricing-card:hover,.omx-card:hover{transform:translateY(-4px);border-color:rgba(92,184,245,.45);box-shadow:0 30px 60px -25px rgba(61,143,224,.45)}
.service-card p,.step p,.intro-content p,.method-heading p{font-size:15px;color:var(--muted)}
.service-card h3{font-size:24px;letter-spacing:-.02em}
.step{padding:22px}.steps{gap:18px}
.pricing-card.featured{border-color:rgba(139,123,255,.55);background:linear-gradient(160deg,rgba(125,155,255,.14),rgba(255,255,255,.02))}
textarea,input,select{border-radius:12px!important;border:1px solid var(--line)!important;background:rgba(5,10,22,.7)!important;color:var(--text)!important;font-size:15px!important;transition:border-color .2s,box-shadow .2s}
textarea:focus,input:focus{border-color:var(--mint)!important;box-shadow:0 0 0 4px rgba(92,184,245,.18);outline:none}
textarea:disabled,input:disabled{opacity:.55;cursor:not-allowed}
.web-login-note{border-radius:12px;border-left:3px solid var(--mint);background:rgba(92,184,245,.08);font-size:14px;color:var(--text)}
.gate-cta{display:inline-block;margin-left:6px;padding:6px 14px;border-radius:999px;background:var(--grad);color:#06101f!important;font-weight:700}
form.is-locked .prompt-chips button{opacity:.5;pointer-events:none}
.footer{border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.footer-legal a:hover{color:var(--text)}
.closing-mark{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Omnexia */
.omx{padding-block:90px}.omx-head{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:34px}
.omx-head h2{font-size:clamp(34px,4.4vw,54px);line-height:1.08;margin:14px 0 0}.omx-head p{color:var(--muted);font-size:17px}
.omx-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.omx-card{padding:28px;position:relative;overflow:hidden}
.omx-card h3{font-size:24px;margin:14px 0 8px;letter-spacing:-.02em}.omx-card p,.omx-card li{color:var(--muted);font-size:15px}
.omx-card ul{padding-left:18px;margin:14px 0 22px}.omx-card li{margin:6px 0}
.omx-tag{display:inline-block;font-size:11px;letter-spacing:.14em;padding:5px 10px;border-radius:999px;border:1px solid var(--line);color:var(--mint)}
.omx-tag.soon{color:#c9b8ff;border-color:rgba(164,139,255,.4)}
.omx-card img{width:56px;height:56px;border-radius:14px;object-fit:cover;float:right}
.omx-hero{padding-block:70px 30px}.omx-hero h1{font:700 clamp(42px,6vw,72px)/1.05 var(--display);letter-spacing:-.045em;margin:18px 0}
.omx-hero p{font-size:19px;color:var(--muted);max-width:52ch}.omx-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.button-ghost{padding:14px 22px;border:1px solid var(--line);color:var(--text)}.button-ghost:hover{border-color:var(--mint)}
.preview-unavailable{max-width:620px;margin:12vh auto;text-align:center;padding:44px 32px}
/* animaciones suaves */
@media (prefers-reduced-motion:no-preference){
 .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
 .reveal.is-visible{opacity:1;transform:none}
 .hero-copy>*{animation:rise .8s ease both}.hero-copy>*:nth-child(2){animation-delay:.08s}.hero-copy>*:nth-child(3){animation-delay:.16s}.hero-copy>*:nth-child(4){animation-delay:.24s}
 @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}
@media(max-width:850px){.topbar{padding-inline:20px;height:66px}.omx-head,.omx-grid{grid-template-columns:1fr}.omx{padding-block:60px}.wrap{width:calc(100% - 40px)}.hero h1{letter-spacing:-.04em}.nav.nav-open{background:rgba(7,12,24,.97);backdrop-filter:blur(14px);border-radius:0 0 16px 16px}}
@media(max-width:560px){.hero h1{font-size:clamp(42px,12vw,56px)}.button-primary{width:100%}.hero-actions{flex-wrap:wrap;gap:16px}.service-card h3{font-size:21px}}
.hero-art,.service-graphic{filter:hue-rotate(55deg) saturate(1.15)}
@media(max-width:560px){.hero-art{display:none}}
.button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;filter:grayscale(.4)}
/* ===== Paleta v3: verde Nexovant (#3EF0B0, brillo de su mascota) y azul Omnexia (#25BCF6, de la osa) ===== */
:root{--nx:#3ef0b0;--nx-2:#1fc996;--omx:#25bcf6;--omx-2:#3d7bf5;--mint:var(--nx);--mint-2:var(--nx-2);--grad:linear-gradient(120deg,#3ef0b0 0%,#2fd6c8 60%,#25bcf6 100%);--grad-omx:linear-gradient(120deg,#25bcf6 0%,#3d7bf5 100%)}
body{background:radial-gradient(1100px 560px at 85% -10%,rgba(62,240,176,.13),transparent 60%),radial-gradient(900px 500px at -10% 35%,rgba(37,188,246,.10),transparent 60%),var(--bg)}
.omx .section-index,.omx-hero .section-index,.omx-tag{color:var(--omx)}
.omx em,.omx-hero h1 span{background:var(--grad-omx)!important;-webkit-background-clip:text!important;background-clip:text!important}
.omx .button-primary,.omx-hero .button-primary,.omx-scope .button-primary{background:var(--grad-omx);box-shadow:0 12px 30px -10px rgba(37,188,246,.6)}
.omx-card:hover{border-color:rgba(37,188,246,.5);box-shadow:0 30px 60px -25px rgba(37,188,246,.4)}
.hero-art,.service-graphic{filter:none}
/* Mascota */
.mascot{display:flex;flex-direction:column;align-items:center;gap:14px;--glow:var(--nx)}
.mascot-omnexia{--glow:var(--omx)}
.mascot-figure{position:relative;width:min(240px,60vw)}
.mascot-figure img{position:relative;width:100%;height:auto;display:block;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.mascot-glow{position:absolute;inset:18% 10% 0;border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent);opacity:.28;filter:blur(24px)}
.mascot-ui{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:340px;text-align:center}
.mascot-play,.mascot-stop{border:1px solid color-mix(in srgb,var(--glow) 55%,transparent);background:color-mix(in srgb,var(--glow) 12%,transparent);color:var(--text);border-radius:999px;padding:9px 16px;font-weight:600;font-size:14px;cursor:pointer}
.mascot-play:hover,.mascot-stop:hover{background:color-mix(in srgb,var(--glow) 22%,transparent)}
.mascot-subs{flex-basis:100%;margin:4px 0 0;padding:10px 14px;border-radius:12px;background:rgba(5,10,22,.85);border:1px solid var(--line);font-size:15px;line-height:1.45;min-height:3em}
.mascot[data-compact] .mascot-figure{width:96px}.mascot[data-compact] .mascot-ui{max-width:260px}
.mascot-corner{position:fixed;right:18px;bottom:18px;z-index:60;padding:10px;border-radius:20px;background:rgba(7,12,24,.8);backdrop-filter:blur(10px);border:1px solid var(--line)}
.mascot-corner .mascot-play,.mascot-corner .mascot-stop{font-size:12px;padding:7px 12px}
.hero .mascot{position:absolute;right:4%;top:120px}
.omx-mascot{display:flex;justify-content:center;margin:30px 0}
@media (prefers-reduced-motion:no-preference){
 .mascot-figure{animation:m-float 4.5s ease-in-out infinite}
 .mascot-figure img{animation:m-wave 6s ease-in-out infinite;transform-origin:50% 90%}
 .mascot-glow{animation:m-pulse 3.2s ease-in-out infinite}
 .mascot.is-talking .mascot-glow{animation:m-talk .45s ease-in-out infinite alternate}
 @keyframes m-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
 @keyframes m-wave{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-5deg)}82%{transform:rotate(4deg)}88%{transform:rotate(-3deg)}94%{transform:rotate(1deg)}}
 @keyframes m-pulse{0%,100%{opacity:.22;transform:scale(1)}50%{opacity:.4;transform:scale(1.06)}}
 @keyframes m-talk{from{opacity:.35;transform:scale(1)}to{opacity:.75;transform:scale(1.14)}}
}
.mascot.is-talking .mascot-glow{opacity:.6}
@media(max-width:980px){.hero .mascot{position:static;margin:30px auto 0}.hero-art{display:none}}
@media(max-width:560px){.mascot-corner{right:10px;bottom:10px;padding:6px}.mascot-corner .mascot-ui{display:none}.mascot-corner .mascot-figure{width:60px}}
.hero .mascot,.hero-mascot{position:static;align-self:center;justify-self:center}
.omx-hero h1 span{color:transparent}
@media(max-width:850px){.omx-hero{grid-template-columns:1fr!important}}
@media(min-width:851px) and (max-width:1180px){.nav{gap:16px;font-size:13px}.top-cta{padding:9px 13px}}
@media(max-width:850px){.nav.nav-open{background:#0a1222!important;box-shadow:0 20px 40px rgba(0,0,0,.5);z-index:70}}
.addon-card{margin-top:20px;border-color:rgba(37,188,246,.35)}
.addon-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:28px;align-items:center}
.addon-price{font-size:15px;color:var(--muted)}.addon-price b{font:700 26px var(--display);color:var(--omx);margin-right:6px}
.addon-video{margin:0}.addon-video video{width:100%;height:auto;aspect-ratio:16/9;border-radius:14px;background:#000;border:1px solid var(--line)}
.addon-video figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.webstudio{padding-block:80px}.webstudio-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:30px}
.webstudio-head h2{font-size:clamp(32px,4vw,50px);line-height:1.1;margin:14px 0 0}.webstudio-head p{color:var(--muted);font-size:17px}
.showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.showcase a{display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--panel);transition:transform .3s,border-color .3s}
.showcase a:hover{transform:translateY(-4px);border-color:rgba(62,240,176,.5)}
.showcase img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
.showcase span{display:flex;justify-content:space-between;padding:14px 16px;font-weight:600}.showcase small{color:var(--muted);font-weight:400}
.omx-band{background:linear-gradient(180deg,rgba(37,188,246,.07),transparent 70%);border-top:1px solid rgba(37,188,246,.18)}
@media(max-width:850px){.addon-grid,.webstudio-head,.showcase{grid-template-columns:1fr}}
@media(min-width:851px){.pricing-grid-two{grid-template-columns:repeat(3,1fr)}}
.omx-intro{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;margin:10px 0 30px}
.omx-intro-single{grid-template-columns:1fr;justify-items:center}
.omx-video{margin:0;justify-self:center;max-width:360px;width:100%}.omx-video video{width:100%;height:auto;aspect-ratio:512/576;border-radius:16px;border:1px solid rgba(37,188,246,.35);background:#000;box-shadow:0 20px 50px -20px rgba(37,188,246,.4)}
.omx-video figcaption{font-size:13px;color:var(--muted);margin-top:8px;text-align:center}
@media(max-width:850px){.omx-intro{grid-template-columns:1fr}}
@media(min-width:851px){.pricing-grid-two{grid-template-columns:repeat(2,1fr)}}
.mascot-corner-omx{border-color:rgba(37,188,246,.35)}
.mascot-corner .mascot-subs{position:absolute;right:0;bottom:calc(100% + 10px);width:min(320px,80vw);text-align:left;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.mascot-corner .mascot-ui{position:relative}
@media(max-width:560px){.mascot-corner .mascot-ui{display:flex}.mascot-corner .mascot-play,.mascot-corner .mascot-stop{font-size:0;padding:8px 10px}.mascot-corner .mascot-play span,.mascot-corner .mascot-stop span{font-size:13px}}
@media(max-width:560px){.mascot-corner .mascot[data-compact] .mascot-figure{width:58px}.mascot-corner .mascot{gap:6px}}
