:root{
  --mgi-bg:#071018;
  --mgi-bg-2:#0f1b28;
  --mgi-card:#101d2b;
  --mgi-soft:#f4f1fb;
  --mgi-ink:#f8fafc;
  --mgi-text:#162033;
  --mgi-muted:#7a8495;
  --mgi-line:rgba(255,255,255,.14);
  --mgi-purple:#a43df4;
  --mgi-purple-2:#7b2cff;
  --mgi-cyan:#82f7ff;
  --mgi-lime:#d7ff6a;
  --mgi-white:#fff;
  --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#fff;
  color:var(--mgi-text);
}
h1,h2,h3,.brand-mark{font-family:"Space Grotesk",sans-serif}
a{color:inherit}
.mgi-nav{
  position:sticky;top:0;z-index:80;
  background:rgba(7,16,24,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.navbar{--bs-navbar-color:rgba(255,255,255,.7);--bs-navbar-hover-color:#fff;--bs-navbar-active-color:#fff}
.navbar-toggler{filter:invert(1)}
.brand-mark{
  display:grid;place-items:center;
  width:54px;height:54px;border-radius:17px;
  background:linear-gradient(135deg,var(--mgi-purple),#fff 120%);
  color:#fff;font-weight:800;font-size:1.05rem;letter-spacing:.04em;
  box-shadow:0 12px 35px rgba(164,61,244,.35);
}
.brand-copy{color:#fff;line-height:1.05}
.brand-copy small{display:block;color:rgba(255,255,255,.58);font-size:.72rem;margin-top:.25rem}
.nav-link{font-size:.82rem;text-transform:uppercase;letter-spacing:.12em}
.mgi-signal{height:3px;background:#202b37;overflow:hidden}
.mgi-signal span{display:block;width:35%;height:100%;background:linear-gradient(90deg,transparent,var(--mgi-purple),var(--mgi-cyan),transparent);animation:scan 2.6s linear infinite}
@keyframes scan{from{transform:translateX(-120%)}to{transform:translateX(360%)}}

.hero{
  position:relative;
  min-height:calc(100vh - 78px);
  display:flex;align-items:center;
  padding:6rem 0;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(164,61,244,.55), transparent 28%),
    radial-gradient(circle at 88% 10%, rgba(130,247,255,.23), transparent 28%),
    linear-gradient(135deg,#071018 0%,#142131 55%,#384351 100%);
  color:#fff;
}
.hero:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(7,16,24,.15),rgba(7,16,24,.8)), url("../img/mgi-promo.jpg") center/cover no-repeat;
  opacity:.16;filter:blur(8px) saturate(1.2);transform:scale(1.04);
}
.hero-grid{
  position:absolute;inset:0;z-index:1;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 85%);
}
.hero .container{z-index:2}
.eyebrow{color:rgba(255,255,255,.72);letter-spacing:.17em;text-transform:uppercase;font-size:.8rem}
.eyebrow span{background:linear-gradient(90deg,var(--mgi-purple),#dd9fff);padding:.3rem .55rem;border-radius:8px;color:#fff;font-weight:800}
.hero h1{font-size:clamp(3.2rem,8vw,7.2rem);line-height:.92;letter-spacing:-.08em;font-weight:800;margin-bottom:1.25rem}
.hero-lead{font-size:clamp(1.25rem,2vw,1.7rem);max-width:760px;line-height:1.25}
.hero-text{max-width:720px;color:rgba(255,255,255,.75);font-size:1rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.5rem 0}
.btn{border-radius:999px;font-weight:700}
.btn-mgi-primary{
  background:linear-gradient(135deg,var(--mgi-purple),var(--mgi-purple-2));
  border:0;color:#fff!important;
  box-shadow:0 15px 35px rgba(164,61,244,.28);
}
.btn-mgi-primary:hover{transform:translateY(-1px);box-shadow:0 20px 45px rgba(164,61,244,.38)}
.btn-mgi-ghost{border:1px solid rgba(255,255,255,.24);color:#fff;background:rgba(255,255,255,.06)}
.btn-mgi-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.12)}
.hero-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;max-width:620px;margin-top:2rem}
.hero-kpis div{padding:1rem;border:1px solid rgba(255,255,255,.15);border-radius:20px;background:rgba(255,255,255,.06);backdrop-filter:blur(12px)}
.hero-kpis strong{display:block;font-size:1.1rem}
.hero-kpis span{display:block;color:rgba(255,255,255,.62);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em}
.promo-card{position:relative;border-radius:32px;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);box-shadow:0 25px 90px rgba(0,0,0,.42);transform:rotate(1.5deg)}
.promo-card img{display:block;width:100%;height:auto}
.promo-glass{position:absolute;left:20px;right:20px;bottom:20px;display:flex;gap:.8rem;align-items:center;padding:1rem;border-radius:20px;background:rgba(7,16,24,.72);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.14)}
.promo-glass small{display:block;color:rgba(255,255,255,.66)}
.pulse-dot{width:12px;height:12px;border-radius:50%;background:var(--mgi-cyan);box-shadow:0 0 0 0 rgba(130,247,255,.5);animation:pulse 1.8s infinite}
@keyframes pulse{to{box-shadow:0 0 0 16px rgba(130,247,255,0)}}

.section{padding:5.4rem 0}
.section-dark{background:var(--mgi-bg);color:#fff}
.section-soft{background:linear-gradient(180deg,#faf8ff,#f3f7fb)}
.section-heading{max-width:820px;margin-bottom:2.4rem}
.section-heading span,.label{display:inline-block;text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;color:var(--mgi-purple);font-weight:800;margin-bottom:.5rem}
.section-heading h2{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.045em;line-height:1}
.section-heading p{color:var(--mgi-muted);font-size:1.02rem}
.section-dark .section-heading p,.section-dark .feature-card p{color:rgba(255,255,255,.64)}
.feature-card{height:100%;padding:2rem;border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12)}
.feature-card i{font-size:1.6rem;color:var(--mgi-cyan);margin-bottom:1.2rem}
.feature-card h3{font-size:1.35rem}
.story-card,.terminal-card,.contact-card{border-radius:var(--radius);padding:2rem;border:1px solid rgba(16,29,43,.1);background:#fff;box-shadow:0 22px 60px rgba(16,29,43,.08)}
.story-card h2{font-size:2.25rem;letter-spacing:-.04em}
.story-card p{color:var(--mgi-muted)}
.terminal-card{background:#0b1320;color:#d7e2f0;padding:0;overflow:hidden}
.terminal-top{display:flex;align-items:center;gap:.45rem;padding:.9rem 1rem;border-bottom:1px solid rgba(255,255,255,.08);background:#0f1a2a}
.terminal-top span{width:11px;height:11px;border-radius:50%;background:#ff5f57}.terminal-top span:nth-child(2){background:#ffbd2e}.terminal-top span:nth-child(3){background:#28c840}
.terminal-top em{margin-left:.5rem;color:rgba(255,255,255,.45);font-style:normal;font-size:.85rem}
.terminal-body{padding:1.5rem}
.terminal-body p{margin:.55rem 0;color:#cfe3f6}.terminal-body b{color:var(--mgi-cyan)}

.module-toolbar{display:flex;gap:.75rem;align-items:center;justify-content:space-between;margin-bottom:1rem}
.search-wrap{position:relative;flex:1}
.search-wrap i{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:#8792a2}
.search-wrap input{width:100%;border:1px solid #dfe6ef;border-radius:999px;padding:.8rem 1rem .8rem 2.6rem;outline:none}
.search-wrap input:focus{border-color:var(--mgi-purple);box-shadow:0 0 0 4px rgba(164,61,244,.12)}
.mgi-accordion .accordion-item{border:0;border-radius:18px!important;margin-bottom:.8rem;overflow:hidden;box-shadow:0 12px 38px rgba(16,29,43,.07)}
.mgi-accordion .accordion-button{font-weight:800;color:#172033}
.mgi-accordion .accordion-button:not(.collapsed){background:#fff;color:var(--mgi-purple);box-shadow:none}
.accordion-body{color:#667085}

.prof-card{height:100%;border-radius:24px;padding:1.15rem;background:#fff;border:1px solid #e8edf5;box-shadow:0 18px 48px rgba(16,29,43,.07);transition:transform .2s ease,box-shadow .2s ease}
.prof-card:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(16,29,43,.12)}
.prof-head{display:flex;gap:1rem;align-items:center;margin-bottom:.9rem}
.prof-photo{width:74px;height:74px;border-radius:22px;object-fit:cover;background:linear-gradient(135deg,var(--mgi-purple),#172033);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.25rem;flex:0 0 auto}
.prof-card h3{font-size:1.1rem;margin:0}
.prof-card p{font-size:.9rem;color:var(--mgi-muted);margin:0}
.contact-section{background:var(--mgi-bg);color:#fff}
.contact-card{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;background:linear-gradient(135deg,rgba(164,61,244,.2),rgba(130,247,255,.08));border-color:rgba(255,255,255,.14);box-shadow:none}
.contact-card p{color:rgba(255,255,255,.68);max-width:760px}.contact-card a{color:#fff}
.footer{padding:1.4rem 0;background:#071018;color:rgba(255,255,255,.58);font-size:.88rem}
.footer a{color:#fff;text-decoration:none}
.mgi-modal{border:0;border-radius:24px;overflow:hidden}
.form-control{border-radius:14px;border-color:#dfe6ef;padding:.75rem .9rem}
.form-control:focus{border-color:var(--mgi-purple);box-shadow:0 0 0 4px rgba(164,61,244,.12)}

.mgi-chat-launcher{position:fixed;right:24px;bottom:24px;z-index:100;width:62px;height:62px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--mgi-purple),var(--mgi-cyan));color:#fff;box-shadow:0 18px 55px rgba(7,16,24,.35);font-size:1.35rem}
.mgi-chat-panel{position:fixed;right:24px;bottom:98px;z-index:101;width:390px;max-width:calc(100vw - 32px);max-height:70vh;display:none;flex-direction:column;background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 25px 80px rgba(7,16,24,.35);border:1px solid #e6edf5}
.mgi-chat-panel.open{display:flex}
.mgi-chat-panel.full{top:86px;bottom:18px;width:min(560px,calc(100vw - 32px));max-height:none}
.chat-header{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem;border-bottom:1px solid #eef2f7;background:#fbfdff}
.chat-title-wrap{display:flex;gap:.75rem;align-items:center}.chat-title-wrap small{display:block;color:#7a8495;font-size:.78rem}
.chat-avatar{width:40px;height:40px;border-radius:15px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--mgi-purple),#172033);font-weight:800}
.chat-icon-btn{border:0;background:transparent;color:#7a8495}
.chat-body{padding:1rem;overflow:auto;flex:1;background:linear-gradient(180deg,#fff,#f8fbff)}
.chat-msg{margin-bottom:.75rem}.chat-msg.user{text-align:right}
.chat-bubble{display:inline-block;max-width:86%;padding:.65rem .85rem;border-radius:17px;font-size:.9rem;line-height:1.35}
.chat-msg.bot .chat-bubble{background:#eef3f8;color:#1c2737;border-bottom-left-radius:5px}
.chat-msg.user .chat-bubble{background:#142131;color:#fff;border-bottom-right-radius:5px}
.chat-footer{padding:.75rem;border-top:1px solid #eef2f7;background:#fff}
.chat-disclaimer{font-size:.73rem;color:#7a8495;border:1px solid #eef2f7;background:#fafcff;border-radius:14px;padding:.55rem;margin-bottom:.5rem}
.chat-disclaimer a{color:#172033}
.chat-suggestions{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.55rem}
.chat-suggestions button{border:1px solid #e1e8f0;border-radius:999px;background:#fff;color:#667085;font-size:.75rem;padding:.35rem .55rem}
.chat-form{display:flex;gap:.45rem}.chat-form input{border-radius:999px}.chat-form .btn{width:46px;display:grid;place-items:center}
.chat-teaser{position:fixed;right:92px;bottom:38px;z-index:99;display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid #e6edf5;border-radius:999px;padding:.55rem .75rem;box-shadow:0 16px 42px rgba(7,16,24,.18);font-size:.85rem;opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s}
.chat-teaser.show{opacity:1;transform:translateY(0);pointer-events:auto}.chat-teaser button{border:0;background:transparent;color:#8792a2;font-size:1rem}
@media (max-width:991.98px){.hero{padding:4rem 0}.promo-card{transform:none}.hero-kpis{grid-template-columns:1fr}.contact-card{display:block}.contact-card .btn{margin-top:1rem}}
@media (max-width:575.98px){.section{padding:3.8rem 0}.module-toolbar{display:block}.module-toolbar .btn{margin-top:.75rem}.mgi-chat-panel,.mgi-chat-panel.full{top:72px;left:10px;right:10px;bottom:86px;width:auto;max-width:none;max-height:none}.chat-teaser{right:88px;max-width:220px}.hero h1{font-size:3.5rem}}


/* =========================================================
   FIX CHATBOT MGI - encabezado + avatar
   Pegar al final de assets/css/styles.css
========================================================= */

.mgi-chat-panel{
  width: min(470px, calc(100vw - 24px));
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 28px 70px rgba(8,15,35,.35);
  background: #ffffff;
}

.chat-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px;
  background:
    radial-gradient(circle at 15% 20%, rgba(168,85,247,.45), transparent 32%),
    linear-gradient(135deg, #192f3a 0%, #271642 52%, #6d28d9 100%);
  color:#ffffff;
  border-bottom:1px solid rgba(255,255,255,.14);
}

.chat-title-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.chat-title-wrap strong{
  display:block;
  color:#ffffff;
  font-size:1rem;
  font-weight:800;
  line-height:1.05;
  letter-spacing:.01em;
}

.chat-title-wrap small{
  display:block;
  color:rgba(255,255,255,.78);
  font-size:.82rem;
  margin-top:4px;
}

.chat-avatar{
  width:46px;
  height:46px;
  min-width:46px;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111827;
  border:2px solid rgba(255,255,255,.55);
  box-shadow:0 10px 26px rgba(109,40,217,.38);
}

.chat-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.chat-icon-btn{
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  color:#ffffff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:.2s ease;
}

.chat-icon-btn:hover{
  background:rgba(255,255,255,.20);
  color:#ffffff;
}

.chat-body{
  background:#f8fbff;
}

.chat-msg.bot .chat-bubble{
  background:#edf3f8;
  color:#08213b;
  border-radius:18px 18px 18px 6px;
}

.chat-footer{
  background:#ffffff;
  border-top:1px solid #e7edf5;
}

.chat-disclaimer{
  background:#f8fbff;
  border:1px solid #dbe6f2;
  border-radius:16px;
  color:#65758d;
}

.chat-suggestions button{
  border:1px solid #dbe6f2;
  background:#ffffff;
  color:#50627a;
  border-radius:999px;
  padding:8px 12px;
}

.chat-form{
  display:flex;
  align-items:center;
  gap:10px;
}

.chat-form .form-control{
  min-height:58px;
  border-radius:999px;
  border:1px solid #dbe6f2;
  padding-left:18px;
  box-shadow:none;
}

.chat-form .btn{
  width:60px;
  height:60px;
  border-radius:50%;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* =========================================================
   BOTÓN CERRADO DEL CHAT CON AVATAR
========================================================= */

#chatLauncher.mgi-chat-launcher{
  width: 72px !important;
  height: 72px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 3px solid rgba(255,255,255,.78) !important;
  background: linear-gradient(135deg, #a43df4, #82f7ff) !important;
  box-shadow:
    0 18px 55px rgba(7,16,24,.38),
    0 0 0 8px rgba(164,61,244,.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#chatLauncher.mgi-chat-launcher img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 50% !important;
}

#chatLauncher.mgi-chat-launcher:hover{
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow:
    0 22px 65px rgba(7,16,24,.44),
    0 0 0 10px rgba(164,61,244,.16) !important;
}