
:root{
  --bg:#07070a;--surface:#111118;--surface2:#171725;--text:#f3f4f7;--muted:#b7b8c3;
  --brand:#5320c9;--brand2:#7b5cff;--line:#2b2b38;--ok:#25d366;--max:1180px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none} img{max-width:100%;height:auto;display:block}
.site-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:8px max(18px,calc((100vw - var(--max))/2));background:rgba(255,255,255,.98);border-bottom:1px solid #ddd}
.brand img{width:176px;height:76px;object-fit:contain}.nav{display:flex;align-items:center;gap:20px;color:#111;font-weight:650}.nav a,.nav button{font:inherit;background:none;border:0;cursor:pointer}.nav-drop{position:relative}.drop-menu{display:none;position:absolute;top:100%;left:0;min-width:240px;background:#fff;border:1px solid #ddd;box-shadow:0 12px 35px #0002}.drop-menu a{display:block;padding:11px 14px}.nav-drop:hover .drop-menu,.nav-drop:focus-within .drop-menu{display:block}
.menu-toggle{display:none;background:none;border:0;font-size:26px}
.hero{min-height:72vh;display:grid;place-items:center;text-align:center;padding:72px 20px;background:linear-gradient(90deg,#050509dd,#05050988),url('assets/hero-integracion.webp') center/cover}
.hero-inner{max-width:900px}.eyebrow{text-transform:uppercase;letter-spacing:.18em;color:#cbbdff;font-weight:700}.hero h1{font-size:clamp(2.3rem,6vw,5.2rem);line-height:1.02;margin:.25em 0}.lead{font-size:clamp(1.05rem,2.2vw,1.35rem);color:#ddd}.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px}.btn{display:inline-flex;padding:13px 20px;border-radius:10px;background:var(--brand);color:#fff;font-weight:750}.btn.alt{background:transparent;border:1px solid #aaa}
.section{padding:72px 20px}.wrap{max-width:var(--max);margin:auto}.section h2{font-size:clamp(1.8rem,4vw,3rem);margin:0 0 12px}.section-intro{max-width:800px;color:var(--muted);margin-bottom:30px}
.grid-3,.grid-4,.service-grid{display:grid;gap:20px}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}.service-grid{grid-template-columns:repeat(3,1fr)}
.card{background:linear-gradient(180deg,var(--surface2),var(--surface));border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.2s transform,.2s border-color}.card:hover{transform:translateY(-4px);border-color:#6549c8}.card img{width:100%;height:220px;object-fit:cover}.card-body{padding:22px}.card h3{margin:0 0 9px;font-size:1.35rem}.card p{color:var(--muted);margin:.35em 0}.text-link{color:#baa9ff;font-weight:700}
.band{background:#0f0f18}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.stat{padding:24px;background:#151523;border-radius:14px;border:1px solid var(--line)}.stat strong{display:block;font-size:2rem;color:#c2b5ff}
.page-hero{padding:90px 20px 60px;background:radial-gradient(circle at 80% 20%,#3b1480 0,transparent 35%),#0a0a10}.page-hero .wrap{max-width:950px}.page-hero h1{font-size:clamp(2.2rem,5vw,4.5rem);line-height:1.05;margin:.2em 0}
.icon{font-size:2rem}.service-item{padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:14px}.service-item h3{margin:.3rem 0}.service-item p{color:var(--muted)}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}.panel{padding:28px;border:1px solid var(--line);background:var(--surface);border-radius:18px}
blockquote{margin:0;padding:18px 22px;border-left:4px solid var(--brand2);background:#12121c}
form{display:grid;gap:14px}label{font-weight:700}input,select,textarea{width:100%;padding:13px;border:1px solid #414152;border-radius:9px;background:#0d0d14;color:#fff;font:inherit}textarea{min-height:160px}button[type=submit]{border:0;cursor:pointer}
.notice{padding:16px;border-left:4px solid var(--brand2);background:#141420;color:#d8d8e1}
.site-footer{padding:48px 20px 24px;background:#fff;color:#17171b}.footer-grid{max-width:var(--max);margin:auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}.site-footer a{text-decoration:underline}.copyright{max-width:var(--max);margin:28px auto 0;border-top:1px solid #ddd;padding-top:16px;color:#555}
.wa-float{position:fixed;right:22px;bottom:22px;z-index:40;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:#fff;font-weight:900;box-shadow:0 8px 30px #0007}
.article-card{padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.article-card time{color:#aaa;font-size:.9rem}
.breadcrumb{color:#bbb;font-size:.92rem;margin-bottom:14px}
ul.clean{padding-left:1.2rem}.legal h2{margin-top:2rem}.legal p,.legal li{color:#d1d1d8}
@media(max-width:900px){.grid-3,.grid-4,.service-grid,.stats,.two-col,.footer-grid{grid-template-columns:1fr 1fr}.nav{display:none;position:absolute;top:92px;left:0;right:0;background:#fff;padding:18px;flex-direction:column;align-items:flex-start}.nav.open{display:flex}.menu-toggle{display:block}.drop-menu{position:static;box-shadow:none;border:0}}
@media(max-width:620px){.grid-3,.grid-4,.service-grid,.stats,.two-col,.footer-grid{grid-template-columns:1fr}.hero{min-height:65vh}.brand img{width:145px;height:68px}.nav{top:84px}}
