:root{--bg:#010b19;--bg2:#03162c;--panel:#06182e;--panel2:#081e39;--line:rgba(63,132,205,.25);--text:#f4f8ff;--muted:#aab9cc;--blue:#168cff;--cyan:#31bdff;--yellow:#ffd400;--green:#36d89a;--red:#ff5f68;--orange:#ffb21d;--purple:#8f66ff;--shadow:0 24px 70px rgba(0,0,0,.32)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.container{width:min(1490px,calc(100% - 48px));margin:auto}.site-header{height:90px;background:rgba(1,12,27,.96);border-bottom:1px solid rgba(74,136,201,.2);position:sticky;top:0;z-index:30;backdrop-filter:blur(18px)}.header-inner{height:100%;display:flex;align-items:center;gap:36px}.brand{margin-right:auto;display:flex;align-items:center}.brand img{width:205px;height:70px;object-fit:contain;object-position:left center;mix-blend-mode:screen}.nav{display:flex;align-self:stretch;gap:30px}.nav a{position:relative;display:flex;align-items:center;gap:8px;color:#d6dfec;text-decoration:none;font-size:15px;font-weight:600}.nav a:hover,.nav a.active{color:#fff}.nav a.active:after{content:"";position:absolute;bottom:0;left:4px;right:4px;height:2px;background:var(--blue);box-shadow:0 0 12px var(--blue)}.outline-button{border:1px solid #168cff;border-radius:23px;padding:13px 22px;color:#fff;text-decoration:none;font-weight:750;min-width:184px;text-align:center;box-shadow:inset 0 0 18px rgba(22,140,255,.06)}.outline-button b{margin-left:10px}.hero{min-height:335px;position:relative;overflow:hidden;background:radial-gradient(circle at 75% 40%,rgba(21,125,247,.18),transparent 28%),linear-gradient(90deg,#021023 0%,#031833 55%,#03142c 100%);border-bottom:1px solid rgba(69,134,205,.2)}.grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(70,139,208,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(70,139,208,.055) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(90deg,#000,transparent 90%)}.hero-grid{min-height:335px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;position:relative;z-index:2}.hero-copy{padding-left:22px}.eyebrow,.section-kicker,.small-label{color:#58b8ff;font-size:13px;letter-spacing:3px;font-weight:850}.hero h1{font-size:64px;line-height:.98;margin:21px 0 24px;letter-spacing:-2px}.hero h1 span{display:block;color:var(--blue)}.hero p{font-size:19px;line-height:1.65;color:#c0ccdc;max-width:660px;margin:0}.hero-visual{height:285px;position:relative}.monitor{position:absolute;right:115px;bottom:35px;width:360px;height:190px;border:2px solid #168cff;border-radius:18px;transform:rotate(-3deg);background:linear-gradient(145deg,rgba(9,38,73,.96),rgba(2,13,29,.95));box-shadow:0 0 50px rgba(22,140,255,.18)}.monitor-bar{height:34px;border-bottom:1px solid rgba(66,151,235,.3);padding:12px 16px;display:flex;gap:7px}.monitor-bar i{width:8px;height:8px;border-radius:50%;background:#4b90d3}.monitor-body{height:calc(100% - 34px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.monitor-body strong{font-size:23px}.monitor-body span{color:#b8c7da}.monitor-body span i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green);margin-right:8px}.pulse-line{height:26px;width:135px;background:linear-gradient(90deg,transparent 0 8%,#1bb8ff 8% 12%,transparent 12% 22%,#1bb8ff 22% 30%,transparent 30% 42%,#1bb8ff 42% 50%,transparent 50% 62%,#1bb8ff 62% 72%,transparent 72%);clip-path:polygon(0 55%,10% 55%,16% 20%,23% 86%,32% 42%,45% 55%,100% 55%,100% 62%,43% 62%,33% 50%,23% 100%,15% 37%,11% 62%,0 62%)}.orbit{position:absolute;border:1px dashed rgba(35,156,255,.32);border-radius:50%}.orbit-one{width:460px;height:220px;right:54px;bottom:20px}.orbit-two{width:315px;height:315px;right:120px;bottom:-38px}.float-icon{position:absolute;width:58px;height:58px;border:1px solid #168cff;background:rgba(5,30,58,.82);border-radius:14px;display:grid;place-items:center;color:#35bcff;font-size:25px;box-shadow:0 0 30px rgba(22,140,255,.12)}.icon-cloud{right:65px;top:25px}.icon-shield{right:500px;top:110px}.icon-signal{right:30px;bottom:35px}.status-area{padding:34px 0 70px;background:radial-gradient(circle at 50% 0,rgba(10,78,148,.11),transparent 28%),linear-gradient(180deg,#031328,#020c19)}.general-status{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;padding:25px 28px;border:1px solid rgba(54,216,154,.42);border-radius:14px;background:linear-gradient(90deg,rgba(20,83,69,.38),rgba(5,26,49,.96));box-shadow:var(--shadow)}.status-check{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#53e3a9,#1e9d6c);font-size:32px;font-weight:900;box-shadow:0 0 28px rgba(54,216,154,.22)}.general-copy h2{margin:6px 0;font-size:24px;color:#66e8af}.general-copy p{margin:0;color:#c3cfde}.last-update{border-left:1px solid rgba(101,151,201,.22);padding-left:30px;min-width:250px}.last-update span{display:block;color:#8fa5bf;font-size:13px;margin-bottom:5px}.last-update strong{font-size:16px}.legend{display:flex;gap:25px;align-items:center;padding:18px 6px;color:#b9c7d8;font-size:13px}.legend span{display:flex;align-items:center;gap:8px}.legend i,.section-summary i{width:9px;height:9px;border-radius:50%;display:inline-block}.legend .ok,.section-summary i{background:var(--green);box-shadow:0 0 10px rgba(54,216,154,.55)}.legend .warn{background:var(--orange)}.legend .down{background:var(--red)}.legend .dev{background:var(--purple)}.service-section{margin-top:22px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin:0 5px 14px}.section-heading h2{margin:6px 0 0;font-size:28px}.section-summary{color:#9fb0c4;font-size:13px;display:flex;align-items:center;gap:8px}.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.service-card{min-height:112px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:18px 20px;border:1px solid var(--line);border-radius:13px;background:linear-gradient(145deg,rgba(8,31,59,.96),rgba(3,17,34,.98));box-shadow:0 12px 35px rgba(0,0,0,.16);transition:.2s}.service-card:hover{border-color:rgba(41,155,255,.55);transform:translateY(-2px);box-shadow:0 18px 45px rgba(0,0,0,.25),0 0 25px rgba(22,140,255,.08)}.service-icon{width:55px;height:55px;border-radius:12px;border:1px solid rgba(51,142,231,.35);background:linear-gradient(145deg,#0c3764,#06182f);display:grid;place-items:center;color:#65c0ff;font-size:19px;font-weight:900;overflow:hidden}.service-icon.image-icon{background:#07182e}.service-icon.image-icon.white{background:#f7fbff}.service-icon img{width:100%;height:100%;object-fit:contain;padding:7px}.service-icon.sap{background:linear-gradient(145deg,#1aa5ef,#105ab4);color:white}.service-icon.gem{color:#34e0bc}.service-icon.document{font-size:28px}.service-icon.fortinet{color:#ff4d4d;font-size:29px}.service-icon.microsoft{grid-template-columns:repeat(2,15px);grid-template-rows:repeat(2,15px);gap:3px}.service-icon.microsoft span:nth-child(1){background:#f35325}.service-icon.microsoft span:nth-child(2){background:#81bc06}.service-icon.microsoft span:nth-child(3){background:#05a6f0}.service-icon.microsoft span:nth-child(4){background:#ffba08}.service-icon.api{font-size:14px;letter-spacing:1px}.service-copy h3{margin:0 0 7px;font-size:17px}.service-copy p{margin:0;color:#aebdd0;line-height:1.45;font-size:14px}.status-pill{white-space:nowrap;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800}.operational{color:#63eab1;background:rgba(34,145,101,.2);border:1px solid rgba(54,216,154,.18)}.development{color:#bda9ff;background:rgba(111,79,213,.2);border:1px solid rgba(143,102,255,.2)}.featured-dev{border-color:rgba(143,102,255,.32)}.country-pills{display:flex;gap:6px;margin-top:10px}.country-pills span{font-size:10px;font-weight:800;padding:4px 7px;border-radius:999px;background:rgba(21,109,194,.19);border:1px solid rgba(72,147,221,.25);color:#a7cdf1}.support-cta{margin-top:28px;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:25px 28px;border:1px solid rgba(28,134,240,.36);border-radius:14px;background:linear-gradient(90deg,rgba(7,62,115,.42),rgba(4,20,39,.95));box-shadow:var(--shadow)}.support-symbol{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#168cff;font-size:26px;font-weight:900;box-shadow:0 0 22px rgba(22,140,255,.25)}.support-cta h2{margin:6px 0 5px;font-size:22px}.support-cta p{margin:0;color:#b7c5d6}.support-cta a{min-width:205px;text-align:center;text-decoration:none;color:white;font-weight:800;border:1px solid #168cff;border-radius:9px;padding:15px 18px;background:linear-gradient(90deg,#0f6ee3,#168cff);box-shadow:0 10px 28px rgba(15,110,227,.25)}.support-cta a b{margin-left:10px}.site-footer{border-top:1px solid rgba(67,128,190,.22);background:#010812;color:#7f94ac;font-size:12px}.site-footer .container{height:72px;display:flex;align-items:center;justify-content:space-between}@media(max-width:1100px){.nav{display:none}.hero h1{font-size:54px}.monitor{right:45px}.service-grid{grid-template-columns:1fr}.regional-card{min-height:132px}}@media(max-width:760px){.container{width:min(100% - 24px,1490px)}.site-header{height:74px}.brand img{width:165px;height:58px}.outline-button{display:none}.hero{min-height:auto}.hero-grid{min-height:360px;grid-template-columns:1fr}.hero-copy{padding:55px 5px}.hero h1{font-size:46px}.hero-visual{display:none}.general-status{grid-template-columns:auto 1fr;padding:20px}.last-update{grid-column:1/-1;border-left:0;border-top:1px solid rgba(101,151,201,.22);padding:14px 0 0}.legend{overflow:auto;white-space:nowrap}.section-heading{align-items:start;gap:15px}.section-summary{display:none}.service-card{grid-template-columns:auto 1fr;min-height:130px}.status-pill{grid-column:2}.support-cta{grid-template-columns:auto 1fr}.support-cta a{grid-column:1/-1}.site-footer .container{height:85px;flex-direction:column;justify-content:center;gap:7px}}

/* Logo igual al portal principal */
.brand {
  width: 168px;
  display: inline-flex;
  flex-direction: column;
  line-height: .82;
  font-style: italic;
  letter-spacing: .08em;
  flex-shrink: 0;
}

.logo-misol {
  display: block;
  width: auto;
  height: 58px;
  object-fit: contain;
}

@media (max-width: 620px) {
  .brand {
    width: 138px;
  }

  .logo-misol {
    height: 45px;
  }
}

/* Menú igual al portal principal */
.main-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.main-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 29px 17px;
  color: #c7d2e4;
  font-size: .93rem;
}

.main-nav a:hover,
.main-nav a.active {
  color: #fff;
}

.main-nav a.active::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #168cff, transparent);
  box-shadow: 0 0 14px #168cff;
}

@media (max-width: 900px) {
  .main-nav {
    display: none;
  }
}

/* Menú idéntico al Portal Tecnológico */
.main-nav a,
.main-nav a:visited {
  color: #c7d2e4;
  font-family: inherit;
  font-size: .93rem;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
}

.main-nav a:hover,
.main-nav a.active {
  color: #ffffff;
  text-decoration: none;
}

.main-nav a svg {
  width: 17px;
  height: 17px;
  stroke-width: 2;
  flex-shrink: 0;
}

/* Mostrar Portal Tecnológico en móvil */
@media (max-width: 760px) {
  .site-header .outline-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: auto;
    width: auto;
    padding: 9px 12px;
    font-size: .72rem;
    border-radius: 14px;
    white-space: nowrap;
  }

  .site-header .header-inner {
    justify-content: space-between;
    gap: 10px;
  }

  .site-header .brand {
    margin-right: 0;
    width: 138px;
  }

  .site-header .logo-misol {
    max-width: 138px;
    height: 45px;
  }
}

@media (max-width: 380px) {
  .site-header .outline-button {
    padding: 8px 9px;
    font-size: .66rem;
  }

  .site-header .brand {
    width: 120px;
  }

  .site-header .logo-misol {
    max-width: 120px;
  }
}

/* =========================================================
   GRUPO MISOL — HEADER UNIFICADO V1
   Referencia: Portal Tecnológico
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  height: auto;
  min-height: 86px;
  border-bottom: 1px solid rgba(111, 168, 255, .12);
  background: rgba(2, 13, 30, .82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.site-header .container.header-inner {
  width: min(calc(100% - 44px), 1480px);
  max-width: 1480px;
  height: 86px;
  min-height: 86px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-header .brand {
  flex: 0 0 168px;
  width: 168px;
  height: 86px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.site-header .brand img,
.site-header .logo-misol {
  display: block;
  width: auto;
  height: 58px;
  max-width: 168px;
  max-height: 58px;
  margin: 0;
  object-fit: contain;
  object-position: left center;
  mix-blend-mode: normal;
}

.site-header .main-nav {
  flex: 1 1 auto;
  height: 86px;
  margin: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
}

.site-header .main-nav a {
  position: relative;
  height: 86px;
  margin: 0;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #c7d2e4;
  font-size: .93rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

.site-header .main-nav a svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.site-header .main-nav a:hover,
.site-header .main-nav a.active {
  color: #fff;
}

.site-header .main-nav a.active::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #168fff, transparent);
  box-shadow: 0 0 14px #168fff;
}

.site-header .outline-button {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 48px;
  height: 48px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid #168fff;
  border-radius: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  background: transparent;
  box-shadow: inset 0 0 24px rgba(0, 120, 255, .08);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

.site-header .outline-button:hover {
  background: rgba(20, 136, 255, .12);
  border-color: #45a7ff;
}

.site-header .outline-button b {
  margin-left: 0;
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 900px) {
  .site-header .container.header-inner {
    width: calc(100% - 44px);
    height: 78px;
    min-height: 78px;
  }

  .site-header .brand {
    flex-basis: 150px;
    width: 150px;
    height: 78px;
  }

  .site-header .brand img,
  .site-header .logo-misol {
    height: 52px;
    max-width: 150px;
  }

  .site-header .main-nav {
    display: none;
  }
}

@media (max-width: 620px) {
  .site-header {
    min-height: 72px;
  }

  .site-header .container.header-inner {
    width: calc(100% - 28px);
    height: 72px;
    min-height: 72px;
    gap: 10px;
  }

  .site-header .brand {
    flex-basis: 138px;
    width: 138px;
    height: 72px;
  }

  .site-header .brand img,
  .site-header .logo-misol {
    height: 45px;
    max-width: 138px;
  }

  .site-header .outline-button {
    min-height: 42px;
    height: 42px;
    padding: 0 14px;
    border-radius: 22px;
    font-size: 12px;
  }
}

/* Centrar verticalmente el logo */
.site-header .brand{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    height:100%;
    align-self:center;
}

.site-header .brand img,
.site-header .logo-misol{
    display:block;
    align-self:center;
    vertical-align:middle;
    margin:0;
}


/* Corrección definitiva del logo */
.site-header .brand{
    width:168px !important;
    height:86px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
}

.site-header .brand img,
.site-header .logo-misol{
    width:auto !important;
    height:58px !important;
    max-height:58px !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:translateY(12px) !important;
}