/* ===========================
   VARIABLES
   =========================== */
:root {
  /* ── Brand ─────────────────────────────── */
  --color-primary:         #0f2d5e;
  --color-primary-light:   #1a4080;
  --color-secondary:       #0078d4;
  --color-secondary-light: #2b95f5;
  --color-accent:          #00a651;
  --color-accent-light:    #00c961;
  --color-purple:          #7c3aed;
  --color-purple-light:    #a855f7;
  --color-cyan:            #06b6d4;
  --color-white:           #ffffff;

  /* ── Legacy neutrals (backward compat) ─── */
  --color-gray-light: #f5f7fa;
  --color-gray-mid:   #e2e8f0;
  --color-gray-dark:  #64748b;
  --color-text:       #0f172a;

  /* ── Text ──────────────────────────────── */
  --color-text-dark:  #0f172a;
  --color-text-light: #94a3b8;
  --color-text-muted: #64748b;

  /* ── Backgrounds ───────────────────────── */
  --bg-dark:   #060d1a;
  --bg-dark-2: #0a1628;
  --bg-dark-3: #0f2040;
  --bg-light:  #f8fafc;
  --bg-card:   rgba(255,255,255,0.04);

  /* ── Glassmorphism ─────────────────────── */
  --glass-bg:           rgba(255,255,255,0.05);
  --glass-border:       rgba(255,255,255,0.10);
  --glass-bg-light:     rgba(255,255,255,0.80);
  --glass-border-light: rgba(255,255,255,0.60);

  /* ── Gradients ─────────────────────────── */
  --gradient-hero:   linear-gradient(135deg, #060d1a 0%, #0f2d5e 50%, #0a1a40 100%);
  --gradient-blue:   linear-gradient(135deg, #0078d4 0%, #005a9e 100%);
  --gradient-ai:     linear-gradient(135deg, #1a0a3e 0%, #7c3aed 50%, #0078d4 100%);
  --gradient-accent: linear-gradient(135deg, #0078d4 0%, #06b6d4 100%);
  --gradient-green:  linear-gradient(135deg, #00a651 0%, #06b6d4 100%);
  --gradient-text:   linear-gradient(135deg, #ffffff 0%, #93c5fd 100%);

  /* ── Shadows ───────────────────────────── */
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.15);
  --shadow-md:     0 8px 32px rgba(0,0,0,0.25);
  --shadow-lg:     0 20px 60px rgba(0,0,0,0.35);
  --shadow-blue:   0 8px 32px rgba(0,120,212,0.30);
  --shadow-purple: 0 8px 32px rgba(124,58,237,0.30);
  --shadow-glow:   0 0 40px rgba(0,120,212,0.20);
  --shadow:        0 2px 12px rgba(0,0,0,.15);

  /* ── Layout ────────────────────────────── */
  --font-base:      'Inter', sans-serif;
  --container-max:  1200px;
  --container-pad:  1.5rem;
  --header-height:  72px;

  /* ── Radius ────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius:    8px;

  /* ── Transitions ───────────────────────── */
  --transition:        all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===========================
   RESET
   =========================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-height);
}

body {
  font-family: var(--font-base);
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  background: var(--bg-dark);
  overflow-x: hidden;
}

/* Reusable presentation helpers kept in CSS for strict CSP compatibility. */
.img--contain { object-fit: contain; }
.address--normal { font-style: normal; }
.section--footer-spacing { padding: 60px 0 100px; }
.section-label--light { color: rgba(255,255,255,.6); background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); }
.contact-map__header { margin-bottom: 2rem; text-align: center; }
.contact-map__title { margin-top: .375rem; color: var(--color-primary); font-size: clamp(1.375rem,3vw,2rem); font-weight: 700; }
.contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.ai-assist__visual--clipped { overflow: hidden; padding: 0; line-height: 0; }
.cases-section__title { margin: .375rem 0 0; color: var(--color-white); font-size: clamp(1.5rem,3vw,2.25rem); font-weight: 700; }

img, svg { display: block; max-width: 100%; }
a        { color: inherit; text-decoration: none; }
ul, ol   { list-style: none; }
button   { cursor: pointer; font: inherit; background: none; border: none; }

/* ===========================
   CANVAS — PARTICLES
   =========================== */
#particles-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ===========================
   KEYFRAME ANIMATIONS
   =========================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,120,212,0.4); }
  50%       { box-shadow: 0 0 0 12px rgba(0,120,212,0); }
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes blobFloat {
  0%   { transform: translate(0px, 0px) scale(1); }
  25%  { transform: translate(20px, -30px) scale(1.04); }
  50%  { transform: translate(-15px, 20px) scale(0.97); }
  75%  { transform: translate(25px, 10px) scale(1.02); }
  100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===========================
   [data-animate] — ANIMATION SYSTEM
   =========================== */
[data-animate] {
  opacity: 0;
  will-change: opacity, transform;
}
[data-animate="up"] {
  transform: translateY(60px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="left"] {
  transform: translateX(-60px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="right"] {
  transform: translateX(60px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="scale"] {
  transform: scale(0.85);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="fade"] {
  transition: opacity 1.2s ease;
}

[data-animate].is-visible {
  opacity: 1;
  transform: none !important;
}

[data-delay="1"] { transition-delay: 0.08s; }
[data-delay="2"] { transition-delay: 0.16s; }
[data-delay="3"] { transition-delay: 0.24s; }
[data-delay="4"] { transition-delay: 0.32s; }
[data-delay="5"] { transition-delay: 0.40s; }
[data-delay="6"] { transition-delay: 0.48s; }

/* ===========================
   HERO BLOBS
   =========================== */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.hero-blob-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle at center, rgba(0,120,212,0.35) 0%, transparent 70%);
  top: -150px; right: -100px;
  animation: blobFloat 10s ease-in-out infinite;
}
.hero-blob-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle at center, rgba(124,58,237,0.25) 0%, transparent 70%);
  bottom: -100px; left: -80px;
  animation: blobFloat 13s ease-in-out infinite reverse;
}
.hero-blob-3 {
  width: 350px; height: 350px;
  background: radial-gradient(circle at center, rgba(6,182,212,0.20) 0%, transparent 70%);
  top: 40%; left: 35%;
  animation: blobFloat 8s ease-in-out infinite;
  animation-delay: -4s;
}

/* ===========================
   ANIMATION UTILITIES (legacy — kept for inner pages)
   =========================== */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.animate-on-scroll.animated { opacity: 1; transform: translateY(0); }

.animate-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.animate-left.animated { opacity: 1; transform: translateX(0); }

.animate-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.animate-right.animated { opacity: 1; transform: translateX(0); }

.animate-delay-1 { transition-delay: 0.1s; }
.animate-delay-2 { transition-delay: 0.2s; }
.animate-delay-3 { transition-delay: 0.3s; }
.animate-delay-4 { transition-delay: 0.4s; }
.animate-delay-5 { transition-delay: 0.5s; }

/* ===========================
   UTILITIES
   =========================== */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.sr-only--focusable:focus {
  position: static; width: auto; height: auto;
  clip: auto; white-space: normal;
}

/* ===========================
   BUTTONS
   =========================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: .9375rem;
  transition: background-color var(--transition), color var(--transition),
              box-shadow var(--transition), transform var(--transition),
              border-color var(--transition);
  white-space: nowrap;
}

.btn--primary {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary-light) 100%);
  color: var(--color-white);
  box-shadow: var(--shadow-blue);
}
.btn--primary:hover {
  background: linear-gradient(135deg, #006abd 0%, var(--color-primary) 100%);
  box-shadow: 0 12px 40px rgba(0,120,212,0.4);
  transform: translateY(-2px);
}

.btn--outline {
  border: 2px solid var(--color-secondary);
  color: var(--color-secondary);
}
.btn--outline:hover {
  background-color: var(--color-secondary);
  color: var(--color-white);
  transform: translateY(-2px);
}

/* ===========================
   HEADER / NAV — dark glassmorphism
   =========================== */
.header {
  position: fixed;
  top: clamp(0.75rem, 1.5vw, 1.35rem);
  left: 50%;
  width: min(calc(100% - 2rem), 1180px);
  z-index: 1000;
  height: auto;
  background: transparent;
  border-bottom: 0;
  transform: translateX(-50%);
  transition: width 0.25s ease;
}

.header.scrolled {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 1.8vw, 1.6rem);
  width: 100%;
  max-width: none;
  min-height: 58px;
  height: auto;
  padding: 0.45rem 0.58rem 0.45rem 1rem;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.045)),
    rgba(7,12,28,0.38);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.24),
    inset 0 -1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.header.scrolled .nav {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.055)),
    rgba(5,10,22,0.48);
  border-color: rgba(255,255,255,0.24);
  box-shadow:
    0 24px 70px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(255,255,255,0.08);
}

.nav__logo img {
  height: 42px;
  width: 162px;
  object-fit: contain;
  mix-blend-mode: screen;
  transition: transform var(--transition);
}

.nav__logo {
  width: 162px;
  height: 42px;
  flex: 0 0 162px;
  display: inline-flex;
  align-items: center;
  overflow: visible;
  color: transparent;
  font-size: 0;
  line-height: 0;
}

.nav__logo:hover img { transform: scale(1.05); }

.nav__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.55rem, 1.35vw, 1.65rem);
  margin-left: auto;
}

/* Nav links — always white (dark bg in both states) */
.nav__menu > li > a,
.nav__menu > li > .nav__dropdown-toggle {
  display: flex;
  align-items: center;
  gap: .28rem;
  padding: .46rem .68rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 800;
  color: rgba(255,255,255,0.80);
  position: relative;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.nav__menu > li > a::after {
  content: '';
  position: absolute;
  bottom: .18rem;
  left: .82rem;
  right: .82rem;
  height: 2px;
  background: linear-gradient(90deg, #06b6d4, #00a651);
  transform: scaleX(0);
  transition: transform var(--transition);
  border-radius: 1px;
}

.nav__menu > li > a:hover { color: #fff; background-color: rgba(255,255,255,0.08); transform: translateY(-1px); }
.nav__menu > li > a:hover::after { transform: scaleX(1); }
.nav__menu > li > a[aria-current="page"] { color: #fff; font-weight: 900; }
.nav__menu > li > a[aria-current="page"]::after { transform: scaleX(1); }
.nav__menu > li > .nav__dropdown-toggle:hover { color: #fff; background-color: rgba(255,255,255,0.08); transform: translateY(-1px); }

/* Dropdown — dark glass */
.nav__item--dropdown { position: relative; }

.nav__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + .85rem);
  left: 0;
  min-width: 230px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.04)),
    rgba(6,13,26,0.72);
  backdrop-filter: blur(24px) saturate(165%);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.26),
    inset 0 1px 0 rgba(255,255,255,0.18);
  padding: .48rem;
  z-index: 200;
}

.nav__dropdown--open {
  display: block;
  animation: dropdownFadeIn 0.2s ease forwards;
}

.nav__dropdown li a,
.nav__dropdown li .nav__dropdown-toggle {
  display: block;
  width: 100%;
  text-align: left;
  padding: .62rem .78rem;
  font-size: .9rem;
  color: rgba(255,255,255,0.78);
  border-radius: 12px;
  white-space: nowrap;
  transition: background-color var(--transition), color var(--transition);
}

.nav__dropdown li a:hover,
.nav__dropdown li .nav__dropdown-toggle:hover {
  background-color: rgba(255,255,255,0.08);
  color: #fff;
}

.nav__dropdown li a[aria-current="page"] {
  color: var(--color-secondary-light);
  font-weight: 600;
}

/* Sub-dropdown */
/* Navbar CTA — pill + glow */
.nav__cta {
  min-height: 38px;
  margin-left: .25rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #dffbff !important;
  background: rgba(6,182,212,0.09) !important;
  border: 1px solid rgba(6,182,212,0.70) !important;
  border-radius: 999px !important;
  padding: 0 1.05rem !important;
  box-shadow: 0 0 28px rgba(6,182,212,0.14);
  font-weight: 800;
  white-space: nowrap;
  animation: none;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.nav__cta:hover {
  transform: translateY(-1px) !important;
  background: rgba(6,182,212,0.15) !important;
  border-color: rgba(0,166,81,0.80) !important;
  box-shadow: 0 0 30px rgba(6,182,212,0.18) !important;
}

/* Hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 6px;
  margin-left: auto;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  transition: background-color var(--transition);
}

.nav__hamburger:hover { background-color: rgba(255,255,255,0.10); }

.nav__hamburger span {
  display: block;
  height: 2px;
  background-color: rgba(255,255,255,0.85);
  border-radius: 2px;
  transition: transform 250ms ease, opacity 250ms ease;
}

.nav__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===========================
   FOOTER
   =========================== */
.footer {
  background-color: var(--bg-dark);
  color: var(--color-white);
  padding-top: 4.5rem;
  border-top: 1px solid rgba(255,255,255,.06);
  position: relative;
  z-index: 1;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 3rem;
  padding-bottom: 3rem;
}

.footer__col-title {
  font-size: .8125rem;
  font-weight: 700;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 1.25rem;
}

.footer__brand img {
  height: 34px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .88;
  margin-bottom: 1rem;
}

.footer__brand p {
  font-size: .875rem;
  color: rgba(255,255,255,.55);
  max-width: 280px;
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

/* Social icon circles */
.footer__social-icons {
  display: flex;
  gap: .625rem;
}

.footer__social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.65);
  font-size: .875rem;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.footer__social-icons a:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
  transform: translateY(-3px);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

.footer__links a {
  font-size: .875rem;
  color: rgba(255,255,255,.55);
  transition: color 0.25s ease, padding-left 0.2s ease;
}

.footer__links a:hover {
  color: var(--color-white);
  padding-left: .375rem;
}

.footer__contact p,
.footer__contact a {
  font-size: .875rem;
  color: rgba(255,255,255,.55);
  line-height: 2;
  transition: color 0.25s ease;
  display: block;
}

.footer__contact a:hover { color: var(--color-secondary); }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-block: 1.25rem;
  font-size: .8125rem;
  color: rgba(255,255,255,.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ===========================
   RESPONSIVE — MOBILE NAV
   =========================== */
@media (max-width: 900px) {
  .header {
    top: 0.7rem;
    width: min(calc(100% - 1rem), 720px);
  }

  .nav {
    min-height: 56px;
    padding: 0.45rem 0.52rem 0.45rem 0.85rem;
  }

  .nav__logo img {
    width: 153px;
    height: 42px;
  }

  .nav__logo {
    width: 153px;
    height: 42px;
    flex-basis: 153px;
  }

  .nav__hamburger { display: flex; }
  .nav__cta       { display: none; }

  .nav__menu {
    position: fixed;
    top: calc(var(--header-height) + 0.65rem);
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
    height: calc(100svh - var(--header-height) - 1.15rem);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: .75rem;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.04)),
      rgba(6,13,26,0.86);
    backdrop-filter: blur(24px) saturate(165%);
    -webkit-backdrop-filter: blur(24px) saturate(165%);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.16);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease;
    z-index: 99;
  }

  .nav__menu--open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav__menu > li > a,
  .nav__menu > li > .nav__dropdown-toggle {
    padding: .875rem 1rem;
    border-radius: 14px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    font-size: 1rem;
    color: rgba(255,255,255,.85);
    white-space: normal;
  }

  .nav__menu > li > a:hover,
  .nav__menu > li > .nav__dropdown-toggle:hover {
    color: var(--color-white);
    background: rgba(255,255,255,.05);
  }

  .nav__dropdown {
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: .25rem 0 .35rem .75rem;
    background: rgba(255,255,255,.04);
    box-shadow: none;
  }

  .nav-open { overflow: hidden; }
}

/* ===========================
   SECTION UTILITIES
   =========================== */
.section { padding: 100px 0; position: relative; z-index: 1; }
.section--alt { background-color: var(--color-gray-light); }

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 3.5rem;
}

.section-header h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--color-white);
  margin-top: .375rem;
  line-height: 1.2;
}

.section-label {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: .07em;
}

.section-label--white { color: rgba(255,255,255,.65); }

.section-desc {
  margin-top: .875rem;
  font-size: 1rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
}

/* ===========================
   DARK / LIGHT SECTION UTILS
   =========================== */
.section-dark {
  background: transparent;
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}
.section-dark::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0,120,212,0.08) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(60px);
  top: -100px;
  right: -50px;
  pointer-events: none;
  z-index: 0;
}
.section-dark > .container { position: relative; z-index: 1; }

.section-dark .section-header h2 {
  color: var(--color-white);
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-dark .section-label { color: rgba(255,255,255,.55); }
.section-dark .section-desc  { color: rgba(255,255,255,.65); }

.section-light {
  background: linear-gradient(
    to bottom,
    rgba(248,250,252,0) 0%,
    rgba(248,250,252,1) 8%,
    rgba(248,250,252,1) 92%,
    rgba(248,250,252,0) 100%
  );
}

/* ===========================
   SECTION FLOW TRANSITIONS
   =========================== */
.section-flow-down::after {
  content: '';
  display: block;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--bg-light));
  margin-top: -60px;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.section-flow-up::before {
  content: '';
  display: block;
  height: 120px;
  background: linear-gradient(to bottom, var(--bg-light), transparent);
  margin-bottom: -60px;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* ===========================
   CARD: GLASSMORPHISM (dark bg)
   =========================== */
.card-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}
.card-glass:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-blue);
  border-color: rgba(0,120,212,.35);
}

/* ===========================
   CARD: ELEVATED (light bg)
   =========================== */
.card-elevated {
  background: var(--color-white);
  border: 1px solid var(--color-gray-mid);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}
.card-elevated:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(0,120,212,.25);
}

/* ===========================
   HERO
   =========================== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 80px;
  background: #060d1a;
  position: relative;
  overflow: hidden;
  color: var(--color-white);
  z-index: 1;
}

.hero::before {
  content: '';
  position: absolute;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle,
    rgba(0,100,200,0.18) 0%, transparent 65%);
  border-radius: 50%;
  top: -100px;
  left: -200px;
  pointer-events: none;
  animation: blobFloat 12s ease-in-out infinite;
  z-index: 0;
}

.hero::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle,
    rgba(0,180,255,0.10) 0%, transparent 65%);
  border-radius: 50%;
  bottom: -100px;
  right: 0;
  pointer-events: none;
  animation: blobFloat 15s ease-in-out infinite reverse;
  z-index: 0;
}

.hero-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,120,212,0.12);
  border: 1px solid rgba(0,120,212,0.30);
  border-radius: 50px;
  padding: 8px 16px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
  width: fit-content;
}

.badge-dot {
  width: 8px;
  height: 8px;
  background: #00a651;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.8); }
}

.hero-title {
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  font-weight: 900;
  line-height: 1.08;
  color: white;
  letter-spacing: -0.02em;
}

.hero-title-highlight {
  background: linear-gradient(135deg, #2b95f5, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
  max-width: 500px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #0078d4, #005a9e);
  color: white;
  padding: 14px 28px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,120,212,0.35);
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,120,212,0.50);
}
.btn-primary svg { transition: transform 0.3s ease; }
.btn-primary:hover svg { transform: translateX(4px); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: rgba(255,255,255,0.80);
  padding: 14px 28px;
  border-radius: 50px;
  border: 1.5px solid rgba(255,255,255,0.20);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.40);
  color: white;
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 8px;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-stat strong {
  font-size: 1.3rem;
  font-weight: 800;
  color: white;
}
.hero-stat span {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.50);
}

.hero-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.12);
}

/* COLUMNA DERECHA — Ecosistema MKS */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 520px;
}

.hero-visual::before {
  content: '';
  position: absolute;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle,
    rgba(0,120,212,0.20) 0%, transparent 70%);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.hero-ecosystem {
  position: relative;
  z-index: 1;
  width: min(100%, 500px);
  aspect-ratio: 1;
  box-shadow:
    inset 0 0 70px rgba(0,120,212,0.08),
    0 25px 80px rgba(0,0,0,0.35);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}

.hero-ecosystem::before,
.hero-ecosystem::after {
  content: '';
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.hero-ecosystem::before {
  inset: 10%;
  background:
    linear-gradient(135deg, rgba(0,120,212,0.22), transparent 42%),
    radial-gradient(circle at 66% 32%, rgba(6,182,212,0.18), transparent 34%),
    rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
}

.hero-ecosystem::after {
  inset: -6%;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(43,149,245,0.20) 50%, transparent 50.2%),
    linear-gradient(0deg, transparent 49.8%, rgba(6,182,212,0.16) 50%, transparent 50.2%);
  opacity: 0.7;
  mask-image: radial-gradient(circle, #000 0 58%, transparent 72%);
}

.hero-ecosystem__orbit {
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 50%;
  pointer-events: none;
}

.hero-ecosystem__orbit--inner {
  inset: 24%;
  border-color: rgba(6,182,212,0.18);
  border-style: dashed;
  animation: heroOrbitSpin 26s linear infinite;
}

.hero-ecosystem__orbit--outer {
  border-color: rgba(43,149,245,0.18);
  animation: heroOrbitSpin 34s linear infinite reverse;
}

.hero-ecosystem__core {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: min(58%, 280px);
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  text-align: center;
  background: rgba(6,13,26,0.84);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 30px 26px;
  backdrop-filter: blur(18px);
  box-shadow:
    0 22px 55px rgba(0,0,0,0.38),
    0 0 36px rgba(0,120,212,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.hero-ecosystem__core img {
  width: 150px;
  height: auto;
  object-fit: contain;
}

.hero-ecosystem__core span {
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary-light);
}

.hero-ecosystem__core strong {
  max-width: 230px;
  font-size: 1rem;
  line-height: 1.35;
  color: rgba(255,255,255,0.92);
}

.hero-solution-node {
  position: absolute;
  z-index: 4;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon copy";
  column-gap: 10px;
  align-items: center;
  width: 178px;
  min-height: 78px;
  padding: 12px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 14px;
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.26);
  transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}

.hero-solution-node:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(0,120,212,0.38);
}

.hero-solution-node__icon {
  grid-area: icon;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary-light);
  background: rgba(0,120,212,0.16);
  border: 1px solid rgba(0,120,212,0.20);
  border-radius: 12px;
}

.hero-solution-node span {
  grid-area: title;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 750;
  color: rgba(255,255,255,0.92);
  line-height: 1.18;
}

.hero-solution-node small {
  grid-area: copy;
  min-width: 0;
  font-size: 0.67rem;
  color: rgba(255,255,255,0.48);
  line-height: 1.25;
}

.hero-solution-node--work {
  top: 9%;
  left: 6%;
}

.hero-solution-node--cloud {
  top: 16%;
  right: 2%;
}

.hero-solution-node--security {
  bottom: 18%;
  left: 0;
}

.hero-solution-node--ai {
  right: 8%;
  bottom: 10%;
}

.hero-solution-node--security .hero-solution-node__icon {
  color: var(--color-accent-light);
  background: rgba(0,166,81,0.16);
  border-color: rgba(0,166,81,0.22);
}

.hero-solution-node--ai .hero-solution-node__icon {
  color: var(--color-cyan);
  background: rgba(6,182,212,0.16);
  border-color: rgba(6,182,212,0.22);
}

.hero-ecosystem__path {
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  max-width: 96%;
  padding: 10px 14px;
  background: rgba(6,13,26,0.78);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.28);
}

.hero-ecosystem__path span {
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.74);
  white-space: nowrap;
}

.hero-ecosystem__path i {
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, rgba(43,149,245,0.18), rgba(6,182,212,0.85));
}

@keyframes heroOrbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ecosystem,
  .hero-ecosystem__orbit {
    animation: none;
  }
}

/* Visible keyboard focus across light and dark sections. */
*:focus-visible {
  outline: 3px solid #2b95f5 !important;
  outline-offset: 3px !important;
}

@media (max-width: 1100px) {
  .hero-ecosystem {
    width: min(100%, 480px);
  }

  .hero-solution-node {
    width: 166px;
  }
}

@media (max-width: 968px) {
  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-badge    { margin: 0 auto; }
  .hero-subtitle { max-width: 100%; }
  .hero-actions  { justify-content: center; }
  .hero-stats    { justify-content: center; }
  .hero-visual {
    min-height: 480px;
  }

  .hero-ecosystem {
    width: min(100%, 460px);
  }
}

@media (max-width: 480px) {
  .hero-title  { font-size: 2.2rem; }
  .hero-visual {
    display: flex;
    min-height: 0;
    margin-top: 8px;
  }

  .hero-ecosystem {
    width: 100%;
    aspect-ratio: auto;
    display: grid;
    gap: 10px;
    border-radius: 0;
    box-shadow: none;
    animation: none;
  }

  .hero-ecosystem::before,
  .hero-ecosystem::after,
  .hero-ecosystem__orbit {
    display: none;
  }

  .hero-ecosystem__core,
  .hero-solution-node,
  .hero-ecosystem__path {
    position: static;
    transform: none;
  }

  .hero-ecosystem__core {
    width: 100%;
    min-height: 0;
    padding: 22px 18px;
  }

  .hero-ecosystem__core img {
    width: 132px;
  }

  .hero-solution-node {
    width: 100%;
    min-height: 70px;
    text-align: left;
  }

  .hero-ecosystem__path {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    border-radius: 14px;
  }

  .hero-ecosystem__path i {
    display: none;
  }
}

.site-back-to-top {
  position: fixed;
  right: clamp(1rem, 2vw, 1.5rem);
  bottom: clamp(1rem, 2vw, 1.5rem);
  z-index: 90;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(6,182,212,0.46);
  border-radius: 999px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05)),
    rgba(7,12,28,0.52);
  box-shadow:
    0 18px 48px rgba(0,0,0,0.34),
    0 0 28px rgba(6,182,212,0.16),
    inset 0 1px 0 rgba(255,255,255,0.18);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease,
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.site-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-back-to-top:hover {
  border-color: rgba(43,149,245,0.72);
  box-shadow:
    0 22px 54px rgba(0,0,0,0.40),
    0 0 34px rgba(6,182,212,0.24),
    0 0 22px rgba(43,149,245,0.16);
  transform: translateY(-3px);
}

.btn--outline-white {
  border: 1.5px solid rgba(255,255,255,.30);
  color: var(--color-white);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  border-radius: 50px;
  padding: 14px 36px;
  font-size: 1rem;
  font-weight: 500;
}
.btn--outline-white:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.55);
  transform: translateY(-2px);
}

/* ===========================
   ABOUT / QUIÉNES SOMOS
   =========================== */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 5rem;
  align-items: center;
}

.about__text .section-label { margin-bottom: .5rem; }

.about__text h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--color-white);
  margin: .375rem 0 1.25rem;
  line-height: 1.2;
}

.about__text p {
  color: rgba(255,255,255,0.70);
  font-size: 1rem;
  line-height: 1.85;
  margin-bottom: 2rem;
}

.stat-card {
  --stat-glow-x: 50%;
  --stat-glow-y: 50%;
  --stat-glow-opacity: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 16%, rgba(6,182,212,.14), transparent 40%),
    radial-gradient(circle at 84% 92%, rgba(43,149,245,.10), transparent 44%),
    linear-gradient(145deg, rgba(0,120,212,.34) 0%, rgba(0,90,158,.24) 48%, rgba(15,45,94,.32) 100%);
  color: var(--color-white);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  padding: 3rem 2rem;
  text-align: center;
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  box-shadow:
    0 20px 60px rgba(15,45,94,.18),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -28px 60px rgba(0,90,158,.16);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.stat-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--stat-glow-opacity);
  background:
    radial-gradient(180px circle at var(--stat-glow-x) var(--stat-glow-y),
      rgba(6,182,212,.95),
      rgba(0,120,212,.78) 36%,
      rgba(255,255,255,.38) 52%,
      transparent 70%);
  filter: drop-shadow(0 0 18px rgba(0,120,212,.46));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity .18s ease;
}

.stat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(125deg, rgba(255,255,255,.16), rgba(255,255,255,.045) 22%, transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 42%, rgba(6,182,212,.035));
  opacity: .58;
}

.stat-card:hover {
  background:
    radial-gradient(circle at 18% 16%, rgba(6,182,212,.18), transparent 40%),
    radial-gradient(circle at 84% 92%, rgba(43,149,245,.13), transparent 44%),
    linear-gradient(145deg, rgba(0,120,212,.42) 0%, rgba(0,90,158,.30) 48%, rgba(15,45,94,.38) 100%);
  border-color: rgba(0,120,212,.45);
  box-shadow:
    var(--shadow-blue),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -30px 64px rgba(0,90,158,.18);
  transform: translateY(-3px);
}

.stat-card > span {
  position: relative;
  z-index: 2;
}

.stat-card__number {
  display: block;
  font-size: 5.5rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: .375rem;
}

.stat-card__label {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  margin-bottom: 1.5rem;
}

.stat-card__divider {
  display: block;
  width: 36px;
  height: 2px;
  background: rgba(255,255,255,.25);
  margin: 0 auto 1.5rem;
}

.stat-card__sub {
  display: block;
  font-size: .875rem;
  color: rgba(255,255,255,.55);
  line-height: 1.6;
}

/* ===========================
   SOLUTIONS
   =========================== */
.solutions__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.sol-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-mid);
  border-radius: var(--radius-md);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: .875rem;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.sol-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-8px);
  border-color: var(--color-secondary);
}

.sol-card:hover .sol-card__icon { color: var(--color-secondary); }

.sol-card__icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, rgba(0,120,212,.1) 0%, rgba(15,45,94,.07) 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  flex-shrink: 0;
}

.sol-card h3 {
  font-size: 1.075rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.3;
}

.sol-card p {
  font-size: .9rem;
  color: var(--color-gray-dark);
  line-height: 1.75;
  flex: 1;
}

.sol-card__link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-secondary);
  margin-top: .5rem;
  transition: gap var(--transition);
}

.sol-card:hover .sol-card__link { gap: .625rem; }

/* Sol-card on dark background (combined with .card-glass) */
.sol-card.card-glass {
  background: var(--glass-bg);
  border-color: var(--glass-border);
}
.sol-card.card-glass h3 { color: var(--color-white); }
.sol-card.card-glass p  { color: rgba(255,255,255,.65); }
.sol-card.card-glass .sol-card__icon {
  background: rgba(0,120,212,.15);
  color: var(--color-secondary-light);
}
.sol-card.card-glass .sol-card__link { color: var(--color-secondary-light); }
.sol-card.card-glass:hover {
  border-color: rgba(0,120,212,.45);
  box-shadow: var(--shadow-blue);
}

/* ===========================
   COUNTERS
   =========================== */
.counters {
  background: rgba(255,255,255,0.02);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.counters::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 20% 50%, rgba(0,120,212,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 80% 50%, rgba(124,58,237,0.07) 0%, transparent 60%);
  pointer-events: none;
}

.counters__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
  color: var(--color-white);
  position: relative;
  z-index: 1;
}

.counter-item__number {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .0625rem;
  margin-bottom: .625rem;
}

.counter__number {
  font-size: clamp(3rem, 5.5vw, 4.5rem);
  font-weight: 900;
  line-height: 1;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.counter__prefix {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.counter-item__label {
  font-size: 1rem;
  color: rgba(255,255,255,.6);
  font-weight: 500;
  letter-spacing: .01em;
}

/* ===========================
   AI ASSIST
   =========================== */
.ai-assist {
  background: linear-gradient(135deg,
    rgba(15,45,94,0.6) 0%,
    rgba(100,30,150,0.3) 50%,
    rgba(10,20,50,0.6) 100%);
  color: var(--color-white);
  overflow: hidden;
  z-index: 1;
}

.ai-assist__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4rem;
  align-items: center;
}

.ai-assist__content .section-label { color: rgba(255,255,255,.6); margin-bottom: 1rem; }

.ai-assist__content h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  margin-bottom: 1.25rem;
  line-height: 1.2;
}

.ai-assist__content p {
  font-size: 1rem;
  color: rgba(255,255,255,.78);
  line-height: 1.85;
  max-width: 580px;
  margin-bottom: 2rem;
}

.badge--new {
  display: inline-block;
  padding: .3rem .875rem;
  background: var(--color-accent);
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--color-white);
  margin-bottom: 1.25rem;
}

/* Mismo tamaño visual que el logo del callout en inteligencia-artificial.html */
.ai-assist__logo {
  width: min(320px, 100%);
  height: auto;
  object-fit: contain;
  display: block;
}

/* ===========================
   PARTNERS / LOGOS
   =========================== */
.logos-grid {
  display: grid;
  gap: 1.25rem;
}

.partners .logos-grid { grid-template-columns: repeat(4, 1fr); }
.clients  .logos-grid { grid-template-columns: repeat(6, 1fr); }

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1.5rem;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  min-height: 90px;
  transition: opacity var(--transition);
}

.partner-logo {
  height: 36px;
  width: 100%;
  max-width: 140px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.45;
  transition: filter var(--transition), opacity var(--transition), transform var(--transition);
}

.logo-item:hover .partner-logo {
  filter: none;
  opacity: 1;
  transform: scale(1.1);
}

.logo-placeholder {
  height: 80px;
  border: 2px dashed var(--color-gray-mid);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-gray-dark);
  padding: .5rem;
  text-align: center;
  transition: border-color var(--transition), background-color var(--transition);
}

.logo-placeholder:hover {
  border-color: var(--color-secondary);
  background-color: rgba(0,120,212,.04);
}

/* ===========================
   LOGOS MARQUEE
   =========================== */
.logos-marquee,
.logos-track-wrapper {
  overflow: hidden;
  padding-block: 0.75rem;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.logos-track {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: max-content;
  animation: marqueeScroll 40s linear infinite;
}

.logos-track:hover { animation-play-state: paused; }

.partners .logos-track-wrapper {
  padding: 1rem 1.35rem;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.075)),
    rgba(8,16,30,0.58);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.20);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.logos-track .logo-item {
  flex: 0 0 auto;
  width: 170px;
  min-height: 80px;
}

/* Direct img in logos-track (no .logo-item wrapper) */
.logos-track img {
  height: 36px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.45;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.partners .logos-track img {
  opacity: 0.62;
}

.logos-track img:hover {
  filter: none;
  opacity: 1;
  transform: scale(1.1);
}

/* .logo-item variant: also inverted on dark */
.logos-track .partner-logo {
  filter: brightness(0) invert(1);
  opacity: 0.45;
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.logos-track .logo-item:hover .partner-logo,
.logos-track--inverted .logo-item:hover .partner-logo {
  filter: none;
  opacity: 1;
  transform: scale(1.1);
}

/* ===========================
   CLIENTS / CASES
   =========================== */
.clients .logos-grid { grid-template-columns: repeat(6, 1fr); margin-bottom: 3rem; }

.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.case-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-mid);
  border-left: 4px solid var(--color-secondary);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.case-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-6px);
}

.case-card__tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .2rem .75rem;
  border-radius: 100px;
  margin-bottom: .75rem;
}

.case-card__tag--modernwork { background: rgba(0,120,212,.1);  color: #005ea3; border-left-color: #0078d4; }
.case-card__tag--infra      { background: rgba(0,166,81,.1);   color: #006b30; }
.case-card__tag--cloud      { background: rgba(0,120,212,.1);  color: #005ea3; }
.case-card__tag--cyber      { background: rgba(220,38,38,.1);  color: #b91c1c; }
.case-card__tag--endpoints  { background: rgba(234,88,12,.1);  color: #c2540a; }
.case-card__tag--servicios  { background: rgba(92,45,145,.1);  color: #4a1d7a; }

.case-card__client {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* ===========================
   CASOS DE ÉXITO CAROUSEL
   =========================== */
.casos-carousel {
  position: relative;
  overflow: hidden;
  margin-top: 48px;
}

.casos-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.caso-card {
  min-width: 100%;
  display: flex;
  gap: 48px;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 48px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.caso-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 200px;
}

.caso-logo {
  max-height: 80px;
  max-width: 160px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.caso-logo--color {
  filter: none;
  opacity: 1;
}

.caso-categoria {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-secondary-light);
  background: rgba(0,120,212,0.15);
  border: 1px solid rgba(0,120,212,0.30);
  border-radius: 50px;
  padding: 4px 12px;
  text-transform: uppercase;
}

.caso-right { flex: 1; }

.caso-right h3 {
  font-size: 1.8rem;
  font-weight: 800;
  color: white;
  margin-bottom: 4px;
}

.caso-producto {
  color: var(--color-secondary-light);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.caso-desc {
  color: rgba(255,255,255,0.70);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 20px;
}

.caso-keyphrase {
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255,255,255,0.90);
  font-style: italic;
  border-left: 3px solid var(--color-secondary);
  padding-left: 16px;
}

.casos-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
}

.casos-prev, .casos-next {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: white;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.4rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.casos-prev:hover, .casos-next:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}

.casos-dots { display: flex; gap: 8px; }

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  background: var(--color-secondary);
  width: 24px;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .caso-card {
    flex-direction: column;
    padding: 32px 24px;
    gap: 24px;
  }
  .caso-left { min-width: unset; flex-direction: row; }
}

/* ===========================
   CONTACT SECTION
   =========================== */
.contact-section {
  background: transparent;
  color: var(--color-white);
  z-index: 1;
}

.contact-section__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 5rem;
  align-items: start;
}

.contact-section__info h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  margin: .5rem 0 2rem;
  line-height: 1.2;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.contact-list__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.contact-list__icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: rgba(255,255,255,.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  flex-shrink: 0;
}

.contact-list__item a,
.contact-list__item address {
  font-size: .9375rem;
  color: rgba(255,255,255,.78);
  line-height: 1.85;
  transition: color var(--transition);
}

.contact-list__item a:hover { color: var(--color-white); }

.contact-section__social {
  display: flex;
  gap: .625rem;
}

.contact-section__social a {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.7);
  transition: background-color var(--transition), color var(--transition);
}

.contact-section__social a:hover {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

/* Form */
.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }

.form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.form__group { display: flex; flex-direction: column; gap: .375rem; }

.form__group label {
  font-size: .875rem;
  font-weight: 500;
  color: rgba(255,255,255,.78);
}

.form__group label span { color: var(--color-secondary); }

.form__group input,
.form__group select,
.form__group textarea {
  padding: .75rem 1rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  color: var(--color-white);
  font-family: var(--font-base);
  font-size: .9375rem;
  transition: border-color var(--transition), background var(--transition);
  -webkit-appearance: none;
}

.form__group input::placeholder,
.form__group textarea::placeholder { color: rgba(255,255,255,.28); }

.form__group input:focus,
.form__group select:focus,
.form__group textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  background: rgba(255,255,255,.1);
}

.form__group select option { background: #0a1f3d; color: var(--color-white); }

.form__group textarea { resize: vertical; min-height: 120px; }

.btn--full { width: 100%; justify-content: center; }

.form__success {
  padding: 1rem 1.25rem;
  background: rgba(0,166,81,.15);
  border: 1px solid rgba(0,166,81,.4);
  border-radius: var(--radius);
  color: #5de3a0;
  font-size: .9375rem;
  text-align: center;
}

.form__error {
  padding: 1rem 1.25rem;
  background: rgba(220,38,38,.14);
  border: 1px solid rgba(248,113,113,.42);
  border-radius: var(--radius);
  color: #fca5a5;
  font-size: .9375rem;
  text-align: center;
}

.contact-form button[type="submit"]:disabled {
  cursor: wait;
  opacity: .7;
}

/* ===========================
   RESPONSIVE — HOMEPAGE SECTIONS
   =========================== */
@media (max-width: 1024px) {
  .solutions__grid       { grid-template-columns: repeat(2, 1fr); }
  .partners .logos-grid  { grid-template-columns: repeat(3, 1fr); }
  .clients  .logos-grid  { grid-template-columns: repeat(3, 1fr); }
  .footer__grid          { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}

@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .counters__grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; }
  .ai-assist__grid { grid-template-columns: 1fr; }
  .ai-assist__visual { display: none; }
  .contact-section__grid { grid-template-columns: 1fr; gap: 3rem; }
  .cases-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .section { padding: 3.5rem 0; }
  .counters { padding: 3.5rem 0; }
  .solutions__grid { grid-template-columns: 1fr; }
  .partners .logos-grid { grid-template-columns: repeat(2, 1fr); }
  .clients  .logos-grid { grid-template-columns: repeat(2, 1fr); }
  .cases-grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__bottom { flex-direction: column; text-align: center; gap: .5rem; }
}

/* ===========================
   PAGE HERO (inner pages)
   =========================== */
.page-hero {
  background: var(--gradient-hero);
  color: var(--color-white);
  padding: calc(var(--header-height) + 4rem) 0 4.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,120,212,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 100% 100%, rgba(124,58,237,0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin-inline: auto;
}

.page-hero__title {
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
  margin: .75rem 0 1.25rem;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: rgba(255,255,255,.65);
  line-height: 1.75;
  max-width: 560px;
  margin: 0 auto;
}

/* ===========================
   ABOUT LOGO BOX
   =========================== */
.about__logo-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-light);
  border: 1px solid var(--color-gray-mid);
  border-radius: 20px;
  padding: 3rem 2rem;
  gap: 2rem;
}

.about__logo-box img {
  width: 180px;
  height: auto;
  object-fit: contain;
}

.partner-badge {
  text-align: center;
  padding: 1rem 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-mid);
  border-radius: 10px;
  width: 100%;
}

.partner-badge__label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .25rem;
}

.partner-badge__title {
  display: block;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* ===========================
   SECTION SUBTITLE
   =========================== */
.section-subtitle {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
}

/* ===========================
   BADGE VALOR (Valores chips)
   =========================== */
.badge-valor {
  display: inline-block;
  padding: 4px 14px;
  background: rgba(0,120,212,0.15);
  border: 1px solid rgba(0,120,212,0.35);
  border-radius: 50px;
  font-size: 0.80rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
}

/* ===========================
   NOSOTROS — LAYOUT HELPERS
   =========================== */
.nosotros-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.nosotros-2col--wide {
  grid-template-columns: 1fr 1.2fr;
}

.nosotros-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.nosotros-card {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nosotros-card h3 {
  color: white;
  font-size: 1.1rem;
  font-weight: 700;
}

.nosotros-card p {
  color: rgba(255,255,255,0.65);
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0;
}

.nosotros-card--wide {
  width: calc(33.33% - 12px);
  max-width: 360px;
}

@media (max-width: 900px) {
  .nosotros-2col,
  .nosotros-2col--wide { grid-template-columns: 1fr; gap: 40px; }
  .nosotros-3col        { grid-template-columns: 1fr; }
  .nosotros-card--wide  { width: 100%; max-width: 100%; }
}

/* ===========================
   DESIGNACIONES MICROSOFT
   =========================== */
.designaciones-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.designacion-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  transition: all 0.3s ease;
}

.designacion-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(0,120,212,0.35);
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.designacion-logo {
  width: 180px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.designacion-desc {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.60);
  line-height: 1.65;
  text-align: center;
}

@media (max-width: 768px) {
  .designaciones-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
    margin: 48px auto 0;
  }
}

/* ===========================
   PILARES — TRANSFORMACIÓN DIGITAL
   =========================== */
.pilares-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1000px;
  margin: 0 auto;
}

.pilar-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.pilar-circle {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(0,120,212,0.40);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2b95f5;
  transition: all 0.3s ease;
  position: relative;
}

.pilar-circle::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(0,120,212,0.15);
}

.pilar-step:hover .pilar-circle {
  background: rgba(0,120,212,0.15);
  border-color: #0078d4;
  transform: scale(1.08);
  box-shadow: 0 0 30px rgba(0,120,212,0.30);
}

.pilar-label {
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  font-size: 0.95rem;
}

.pilar-connector {
  flex: 1;
  height: 2px;
  margin-top: -28px;
  background: linear-gradient(90deg,
    rgba(0,120,212,0.40) 0%,
    rgba(0,120,212,0.15) 50%,
    rgba(0,120,212,0.40) 100%);
  position: relative;
  min-width: 30px;
}

.pilar-connector::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  background: #0078d4;
  border-radius: 50%;
  transform: translateY(-50%);
  animation: connectorPulse 3s ease-in-out infinite;
}

@keyframes connectorPulse {
  0%, 100% { left: 0; opacity: 0; }
  50%       { left: 100%; opacity: 1; }
}

/* ===========================
   MADUREZ DE TI — ESCALERA
   =========================== */
.madurez-stairs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.madurez-step {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 4px solid rgba(0,120,212,0.30);
  border-radius: 16px;
  padding: 20px 24px;
  transition: all 0.3s ease;
}

.madurez-step-1 {
  margin-left: 0;
  opacity: 0.60;
  border-left: 4px solid rgba(0,120,212,0.25);
}
.madurez-step-2 {
  margin-left: 30px;
  opacity: 0.75;
  border-left: 4px solid rgba(0,120,212,0.45);
}
.madurez-step-3 {
  margin-left: 60px;
  opacity: 0.88;
  border-left: 4px solid rgba(0,120,212,0.70);
}
.madurez-step-4 {
  margin-left: 90px;
  opacity: 1;
  background: rgba(0,120,212,0.10);
  border-color: rgba(0,120,212,0.35);
  border-left: 4px solid #0078d4;
  box-shadow: 0 0 20px rgba(0,120,212,0.10);
}

.madurez-step:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(0,120,212,0.40);
  border-left-color: #0078d4;
  transform: translateX(4px);
}

.madurez-step-content {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.madurez-num {
  font-size: 1.8rem;
  font-weight: 800;
  color: #2b95f5;
  line-height: 1;
  flex-shrink: 0;
}

.madurez-step h4 {
  color: white;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.madurez-step p {
  color: rgba(255,255,255,0.65);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  .pilares-flow {
    flex-direction: column;
  }
  .pilar-connector {
    width: 2px;
    height: 30px;
    min-width: unset;
  }
  .madurez-step-1,
  .madurez-step-2,
  .madurez-step-3,
  .madurez-step-4 { margin-left: 0; }
}

/* ===========================
   COUNTERS — 3-COL VARIANT
   =========================== */
.counters__grid--3col { grid-template-columns: repeat(3, 1fr); }

/* ===========================
   MISSION / VISION / VALUES
   =========================== */
.mvv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.mvv-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-mid);
  border-radius: 12px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: box-shadow var(--transition);
}

.mvv-card:hover { box-shadow: 0 10px 36px rgba(0,0,0,.08); }

.mvv-card__icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, rgba(0,120,212,.1) 0%, rgba(15,45,94,.07) 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  flex-shrink: 0;
}

.mvv-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary);
}

.mvv-card p {
  font-size: .9rem;
  color: var(--color-gray-dark);
  line-height: 1.75;
  flex: 1;
}

.values-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .25rem;
}

.value-chip {
  padding: .3rem .875rem;
  background: rgba(0,120,212,.08);
  border: 1px solid rgba(0,120,212,.2);
  border-radius: 100px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-secondary);
}

/* ===========================
   WHY MKS (5-card 3+2 grid)
   =========================== */
.why-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
}

.why-card { grid-column: span 2; }
.why-card:nth-child(4) { grid-column: 2 / 4; }
.why-card:nth-child(5) { grid-column: 4 / 6; }

/* ===========================
   CTA BAND
   =========================== */
.cta-band {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 15% 65%, rgba(0,120,212,.16) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 85% 20%, rgba(0,166,81,.1) 0%, transparent 50%);
  pointer-events: none;
}

.cta-band__inner {
  position: relative;
  z-index: 1;
}

.cta-band h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  margin-bottom: .875rem;
}

.cta-band p {
  font-size: 1.0625rem;
  color: rgba(255,255,255,.78);
  margin-bottom: 2.5rem;
}

/* ===========================
   RESPONSIVE — NOSOTROS PAGE
   =========================== */
@media (max-width: 1024px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .why-card,
  .why-card:nth-child(4),
  .why-card:nth-child(5) { grid-column: span 1; }
}

@media (max-width: 900px) {
  .counters__grid--3col { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .counters__grid--3col { grid-template-columns: 1fr; }
  .mvv-grid             { grid-template-columns: 1fr; }
  .why-grid             { grid-template-columns: 1fr; }
}

/* ===========================
   SOLUTIONS 4-COL GRID
   =========================== */
.solutions__grid--4col { grid-template-columns: repeat(4, 1fr); }

/* ===========================
   CANAL CERTIFICADO
   =========================== */
.cert-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 5rem;
  align-items: center;
}

.cert__text .section-label { margin-bottom: .5rem; }

.cert__text h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--color-primary);
  margin: .375rem 0 1.25rem;
  line-height: 1.2;
}

.cert__text p {
  color: var(--color-gray-dark);
  font-size: 1rem;
  line-height: 1.85;
}

.cert-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border: 1px solid var(--color-gray-mid);
  border-radius: 20px;
  padding: 3rem 2rem;
  box-shadow: var(--shadow);
}

.cert-logo-box img {
  width: 200px;
  height: auto;
  object-fit: contain;
}

/* ===========================
   SUCCESS CASE
   =========================== */
.success-case {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

.success-case::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 70%, rgba(0,120,212,.18) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 80% 20%, rgba(0,166,81,.1) 0%, transparent 50%);
  pointer-events: none;
}

.success-card {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 3rem;
}

.success-card__badge {
  display: inline-block;
  padding: .35rem 1rem;
  background: var(--color-accent);
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--color-white);
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.success-card__quote-mark {
  display: block;
  font-size: 5rem;
  line-height: .85;
  color: var(--color-secondary);
  opacity: .4;
  font-family: Georgia, serif;
  margin-bottom: .25rem;
  user-select: none;
}

.success-card__text {
  font-size: clamp(1rem, 2vw, 1.175rem);
  color: rgba(255,255,255,.9);
  line-height: 1.8;
  margin-bottom: 2.5rem;
}

.success-card__footer {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.1);
  flex-wrap: wrap;
}

.success-card__logo-wrap {
  padding: .625rem 1.25rem;
  background: var(--color-white);
  border-radius: var(--radius);
  flex-shrink: 0;
}

.success-card__logo {
  height: 36px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  display: block;
}

.success-card__meta { display: flex; flex-direction: column; gap: .2rem; }

.success-card__client { font-size: 1rem; font-weight: 700; }

.success-card__solution { font-size: .875rem; color: rgba(255,255,255,.55); }

/* ===========================
   CTA LIGHT (white bg)
   =========================== */
.cta-light { padding: 5rem 0; text-align: center; }

.cta-light h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: .875rem;
}

.cta-light p {
  font-size: 1.0625rem;
  color: var(--color-gray-dark);
  margin-bottom: 2.5rem;
}

.cta-light__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* ===========================
   RESPONSIVE — MODERNWORK PAGE
   =========================== */
@media (max-width: 1024px) {
  .solutions__grid--4col { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .cert-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 640px) {
  .solutions__grid--4col { grid-template-columns: 1fr; }
  .success-card { padding: 2rem 1.5rem; }
}

/* ===========================
   BENEFITS GRID
   =========================== */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.benefit-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .875rem;
  padding: 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-mid);
  border-radius: 12px;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.benefit-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.09);
  transform: translateY(-2px);
  border-color: rgba(0,120,212,.25);
}

.benefit-card__icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(0,120,212,.1) 0%, rgba(15,45,94,.07) 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  flex-shrink: 0;
}

.benefit-card h3 {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.35;
}

/* ===========================
   RESPONSIVE — INFRA PAGE
   =========================== */
@media (max-width: 1024px) {
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .benefits-grid { grid-template-columns: 1fr; }
}

/* ===========================
   SERVICES LIST (ENDPOINTS)
   =========================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  max-width: 900px;
  margin: 0 auto;
}

.services-grid > *:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: calc((100% - 1.25rem) / 2);
}

.service-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-mid);
  border-radius: 12px;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}

.service-item:hover {
  box-shadow: var(--shadow);
  border-color: rgba(0,120,212,.25);
  transform: translateY(-2px);
}

.service-item__icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: linear-gradient(135deg, rgba(0,120,212,.1) 0%, rgba(15,45,94,.07) 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  flex-shrink: 0;
}

.service-item h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.35;
}

/* ===========================
   RESPONSIVE — ENDPOINTS PAGE
   =========================== */
@media (max-width: 640px) {
  .services-grid {
    grid-template-columns: 1fr;
    max-width: none;
  }
  .services-grid > *:last-child:nth-child(odd) {
    grid-column: span 1;
    max-width: none;
  }
}

/* ===========================
   PAGE INTRO (ciberseguridad)
   =========================== */
.page-intro {
  max-width: 740px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.0625rem;
  color: var(--color-gray-dark);
  line-height: 1.85;
}

/* ===========================
   LOGOS GRID — 5-COL VARIANT
   =========================== */
.logos-grid--5col { grid-template-columns: repeat(5, 1fr); }

/* ===========================
   RESPONSIVE — CIBERSEGURIDAD
   =========================== */
@media (max-width: 1024px) {
  .logos-grid--5col { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .logos-grid--5col { grid-template-columns: repeat(2, 1fr); }
}

/* ===========================
   METHODOLOGY TIMELINE
   =========================== */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: var(--color-gray-mid);
  z-index: 0;
}

.timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1.25rem;
  position: relative;
  z-index: 1;
}

.timeline-step__circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-secondary);
  color: var(--color-white);
  font-size: 1.375rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 16px rgba(0,120,212,.28);
  flex-shrink: 0;
}

.timeline-step__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline-step__icon {
  color: var(--color-secondary);
  margin-bottom: .875rem;
}

.timeline-step h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: .5rem;
}

.timeline-step p {
  font-size: .875rem;
  color: var(--color-gray-dark);
  line-height: 1.65;
}

/* ===========================
   PARTNER TABS
   =========================== */
.tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-bottom: 2.5rem;
}

.tab-btn {
  padding: .5rem 1.25rem;
  border: 2px solid var(--color-gray-mid);
  border-radius: 100px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-gray-dark);
  background: transparent;
  transition: border-color var(--transition), color var(--transition), background-color var(--transition);
}

.tab-btn:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.tab-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.tab-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
}

.tab-logos .logo-item { flex: 0 0 200px; }

.tab-logos .partner-logo--hornet-tab {
  height: 45px;
  max-width: 175px;
}

/* ===========================
   RESPONSIVE — SERVICIOS PAGE
   =========================== */
@media (max-width: 640px) {
  .timeline { grid-template-columns: 1fr; gap: 2rem; }
  .timeline::before { display: none; }
  .timeline-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 1.25rem;
    padding: 0;
  }
  .timeline-step__circle { margin-bottom: 0; }
  .timeline-step__body { align-items: flex-start; }
  .tab-logos .logo-item { flex: 0 0 160px; }
}

/* ===========================
   CONTACT PAGE — LIGHT LAYOUT
   =========================== */
.contact-page__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}

.contact-info h2 {
  font-size: clamp(1.375rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: .875rem;
  line-height: 1.2;
}

.contact-info > p {
  font-size: .9375rem;
  color: var(--color-gray-dark);
  line-height: 1.85;
  margin-bottom: 2rem;
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.contact-info-list__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.contact-info-list__icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: linear-gradient(135deg, rgba(0,120,212,.1) 0%, rgba(15,45,94,.07) 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  flex-shrink: 0;
}

.contact-info-list__body { display: flex; flex-direction: column; }

.contact-info-list__label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .3rem;
}

.contact-info-list__text,
.contact-info-list__text a {
  font-size: .9375rem;
  color: var(--color-gray-dark);
  line-height: 1.85;
  font-style: normal;
  transition: color var(--transition);
}

.contact-info-list__text a:hover { color: var(--color-secondary); }

.contact-social-light {
  display: flex;
  gap: .625rem;
  flex-wrap: wrap;
}

.contact-social-light a {
  width: 40px;
  height: 40px;
  background: var(--color-gray-light);
  border: 1px solid var(--color-gray-mid);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.contact-social-light a:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}

/* Form panel */
.contact-form-panel {
  background: var(--color-gray-light);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 4px 28px rgba(0,0,0,.07);
}

.contact-form-panel h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
}

/* Light form field overrides */
.form--light .form__group label {
  color: var(--color-primary);
  font-weight: 600;
}

.form--light .form__group label span { color: #c00; }

.form--light .form__group input,
.form--light .form__group select,
.form--light .form__group textarea {
  background: var(--color-white);
  border: 1.5px solid var(--color-gray-mid);
  color: var(--color-text);
}

.form--light .form__group input::placeholder,
.form--light .form__group textarea::placeholder { color: #aaa; }

.form--light .form__group input:focus,
.form--light .form__group select:focus,
.form--light .form__group textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  background: var(--color-white);
  box-shadow: 0 0 0 3px rgba(0,120,212,.12);
}

.form--light .form__group select option {
  background: var(--color-white);
  color: var(--color-text);
}

.form--light .form__success {
  background: rgba(0,166,81,.1);
  border-color: rgba(0,166,81,.35);
  color: #1a7a42;
}

.form--light .form__error {
  background: rgba(220,38,38,.08);
  border-color: rgba(220,38,38,.3);
  color: #a71919;
}

/* Validation error */
.field--error {
  border-color: #c00 !important;
  box-shadow: none !important;
}

.field-error {
  font-size: .8125rem;
  color: #c00;
  margin-top: .125rem;
}

/* Dark button */
.btn--dark {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn--dark:hover {
  background-color: #0d2550;
  box-shadow: 0 4px 16px rgba(15,45,94,.35);
}

/* Map */
.contact-map__address {
  text-align: center;
  font-size: .9375rem;
  color: var(--color-gray-dark);
  margin-bottom: 1.25rem;
  font-style: normal;
}

.contact-map__embed {
  width: 100%;
  height: 450px;
  border: none;
  border-radius: 12px;
  display: block;
}

/* ===========================
   RESPONSIVE — CONTACT PAGE
   =========================== */
@media (max-width: 900px) {
  .contact-page__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-form-panel { order: -1; }
}

@media (max-width: 640px) {
  .contact-form-panel { padding: 1.75rem 1.25rem; }
  .contact-map__embed { height: 300px; }
}

/* ===========================
   REDUCED MOTION
   =========================== */
@media (prefers-reduced-motion: reduce) {
  #particles-canvas { display: none; }

  .hero-blob,
  .hero-blob-1,
  .hero-blob-2,
  .hero-blob-3 { animation: none; }

  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Legacy classes */
  .animate-on-scroll,
  .animate-left,
  .animate-right {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .logos-track { animation: none; }

  .btn,
  .sol-card,
  .card-glass,
  .card-elevated,
  .case-card {
    transition: none;
  }
}

/* ─── CTA gradient card ──────────────────────────────────────────────────────── */
.cta-card-gradient {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 80px 60px;
  background:
    radial-gradient(circle at 13% 88%, rgba(0,120,212,0.30), transparent 35%),
    radial-gradient(circle at 88% 12%, rgba(43,149,245,0.24), transparent 28%),
    linear-gradient(135deg, rgba(5,12,26,0.96), rgba(7,17,42,0.9)) !important;
  border: 1px solid rgba(43,149,245,0.22);
  border-radius: 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.cta-card-gradient h2 {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: white;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  line-height: 1.2;
}

.cta-card-gradient p {
  color: rgba(255,255,255,0.65);
  font-size: 1.1rem;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}

.cta-card-gradient .btn-primary {
  position: relative;
  z-index: 1;
  font-size: 1rem;
  padding: 16px 36px;
}

.cta-card-gradient::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(6,182,212,0.36) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

.cta-card-gradient::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(43,149,245,0.28) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
/* ===========================
   NOSOTROS — REFERENCE REDESIGN
   =========================== */
.border-glow-card {
  --edge-proximity: 0;
  --edge-light-opacity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 28;
  --glow-color: rgba(190,235,255,0.95);
  --glow-color-60: rgba(125,211,252,0.60);
  --glow-color-50: rgba(6,182,212,0.50);
  --glow-color-40: rgba(125,211,252,0.38);
  --glow-color-30: rgba(43,149,245,0.26);
  --glow-color-20: rgba(6,182,212,0.16);
  --glow-color-10: rgba(43,149,245,0.08);
  --cone-spread: 12;
  isolation: isolate;
  border-radius: 24px;
}

.cta-card-gradient.border-glow-card {
  background:
    radial-gradient(circle at 18% 16%, rgba(6,182,212,0.16), transparent 38%),
    radial-gradient(circle at 84% 92%, rgba(43,149,245,0.12), transparent 42%),
    linear-gradient(145deg, rgba(0,120,212,0.28) 0%, rgba(0,90,158,0.18) 48%, rgba(8,21,46,0.92) 100%) !important;
  border-color: rgba(125,211,252,0.32);
  overflow: visible;
  box-shadow:
    0 24px 70px rgba(0,0,0,0.52),
    0 0 32px rgba(6,182,212,0.12);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.cta-card-gradient.border-glow-card:hover {
  border-color: rgba(125,211,252,0.38);
}

.cta-card-gradient.border-glow-card::before,
.cta-card-gradient.border-glow-card::after {
  display: none;
}

.border-glow-card::before,
.border-glow-card::after {
  z-index: 0;
}

.border-glow-card > .edge-light {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: var(--edge-light-opacity);
  transition: opacity 0.22s ease-out;
  mix-blend-mode: plus-lighter;
  mask-image: conic-gradient(
    from var(--cursor-angle) at center,
    black 0 calc(var(--cone-spread) * 1%),
    transparent calc((var(--cone-spread) + 8) * 1%) calc((100 - var(--cone-spread) - 8) * 1%),
    black calc((100 - var(--cone-spread)) * 1%) 100%
  );
  -webkit-mask-image: conic-gradient(
    from var(--cursor-angle) at center,
    black 0 calc(var(--cone-spread) * 1%),
    transparent calc((var(--cone-spread) + 8) * 1%) calc((100 - var(--cone-spread) - 8) * 1%),
    black calc((100 - var(--cone-spread)) * 1%) 100%
  );
}

.border-glow-card:not(:hover) > .edge-light {
  opacity: 0;
  transition: opacity 0.55s ease-in-out;
}

.border-glow-card > .edge-light::before,
.border-glow-card > .edge-light::after {
  content: "";
  position: absolute;
  border-radius: inherit;
}

.border-glow-card > .edge-light::before {
  inset: 0;
  box-shadow:
    inset 0 0 0 1px var(--glow-color),
    inset 0 0 2px 0 var(--glow-color-60),
    0 0 8px 0 var(--glow-color-50),
    0 0 18px 1px var(--glow-color-30),
    0 0 34px 2px var(--glow-color-10);
}

.border-glow-card > .edge-light::after {
  inset: 0;
  padding: 1px;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,250,218,0.95), transparent 22%),
    radial-gradient(circle at 72% 20%, rgba(125,211,252,0.72), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.82), rgba(6,182,212,0.42), rgba(43,149,245,0.22));
  opacity: 1;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.border-glow-card h2,
.border-glow-card p,
.border-glow-card .btn-primary {
  z-index: 2;
}

.nosotros-hero {
  min-height: 100vh;
  padding: 150px 0 110px;
  background: #060d1a;
  text-align: center;
}

.nosotros-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.nosotros-hero .hero-badge { margin: 0 auto; }
.nosotros-hero .hero-title {
  max-width: 900px;
  margin: 1.5rem auto 0;
  text-align: center;
  font-size: clamp(3rem, 7vw, 5.35rem);
  letter-spacing: -0.04em;
}
.nosotros-hero .hero-subtitle {
  max-width: 760px;
  margin: 1.25rem auto 0;
  text-align: center;
  color: rgba(255,255,255,0.68);
}

.nosotros-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  width: 100%;
  max-width: 980px;
  margin-top: 64px;
}

.nosotros-metric {
  --metric-glow-x: 50%;
  --metric-glow-y: 50%;
  --metric-glow-opacity: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 138px;
  padding: 24px 20px;
  background: linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}

.nosotros-metric::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--metric-glow-opacity);
  background:
    radial-gradient(180px circle at var(--metric-glow-x) var(--metric-glow-y),
      rgba(6,182,212,.95),
      rgba(0,120,212,.78) 36%,
      rgba(255,255,255,.38) 52%,
      transparent 70%);
  filter: drop-shadow(0 0 18px rgba(0,120,212,.46));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity .18s ease;
}

.nosotros-metric:hover {
  border-color: rgba(0,120,212,.45);
  box-shadow: var(--shadow-blue);
  transform: translateY(-6px);
  background: linear-gradient(145deg, rgba(255,255,255,0.07), rgba(0,120,212,0.08));
}

.nosotros-metric > * {
  position: relative;
  z-index: 2;
}

.nosotros-metric__number {
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-size: clamp(2.3rem, 4vw, 3.2rem);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #2b95f5, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nosotros-metric p {
  margin: 12px 0 0;
  color: rgba(255,255,255,0.62);
  font-size: 0.84rem;
  font-weight: 600;
}

.nosotros-section {
  background: transparent;
  padding: 110px 0;
}

.nosotros-section__head {
  max-width: 820px;
  margin: 0 auto 58px;
  text-align: center;
}

.nosotros-section__head h2 {
  margin: 20px 0 0;
  color: #fff;
  font-size: clamp(2.35rem, 5vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.nosotros-section__head .section-subtitle {
  max-width: 760px;
  margin: 18px auto 0;
}

.reference-grid,
.designaciones-grid,
.feature-grid {
  position: relative;
  z-index: 1;
}

.reference-grid {
  align-items: stretch;
}

.reference-card {
  position: relative;
  min-height: 100%;
  padding: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
  transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
}

.reference-grid .reference-card {
  min-height: 100%;
}

.reference-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0,120,212,0.35);
  background: linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
  box-shadow: 0 24px 60px rgba(0,0,0,0.35), 0 0 34px rgba(0,120,212,0.10);
}

.reference-card__visual {
  height: 210px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 95%, rgba(6,182,212,0.34), transparent 32%),
    radial-gradient(circle at 94% 8%, rgba(249,115,22,0.25), transparent 24%),
    linear-gradient(135deg, rgba(0,120,212,0.12), rgba(124,58,237,0.08) 48%, rgba(255,255,255,0.02));
}

.reference-card__visual--mission { background: radial-gradient(circle at 13% 88%, rgba(6,182,212,0.34), transparent 35%), radial-gradient(circle at 88% 12%, rgba(0,120,212,0.28), transparent 28%), linear-gradient(135deg, rgba(5,12,26,0.96), rgba(7,18,43,0.9)); }
.reference-card__visual--vision { background: radial-gradient(circle at 13% 88%, rgba(43,149,245,0.30), transparent 35%), radial-gradient(circle at 88% 12%, rgba(6,182,212,0.26), transparent 28%), linear-gradient(135deg, rgba(5,12,26,0.96), rgba(4,22,36,0.9)); }
.reference-card__visual--values { background: radial-gradient(circle at 13% 88%, rgba(0,120,212,0.30), transparent 35%), radial-gradient(circle at 88% 12%, rgba(43,149,245,0.24), transparent 28%), linear-gradient(135deg, rgba(5,12,26,0.96), rgba(7,17,42,0.9)); }

.reference-icon {
  stroke: #06b6d4;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(6,182,212,0.42)) drop-shadow(10px 0 16px rgba(0,120,212,0.22));
}

.reference-card__visual--cyan { background: radial-gradient(circle at 12% 90%, rgba(6,182,212,0.36), transparent 34%), radial-gradient(circle at 94% 9%, rgba(43,149,245,0.25), transparent 25%), linear-gradient(135deg, rgba(5,12,26,0.95), rgba(4,10,24,0.85)); }
.reference-card__visual--purple { background: radial-gradient(circle at 12% 90%, rgba(0,120,212,0.30), transparent 34%), radial-gradient(circle at 94% 9%, rgba(124,58,237,0.34), transparent 26%), linear-gradient(135deg, rgba(5,12,26,0.95), rgba(13,7,32,0.9)); }
.reference-card__visual--blue { background: radial-gradient(circle at 12% 90%, rgba(6,182,212,0.24), transparent 34%), radial-gradient(circle at 94% 9%, rgba(0,120,212,0.32), transparent 26%), linear-gradient(135deg, rgba(5,12,26,0.95), rgba(7,17,42,0.9)); }

.reference-card--cert h3,
.values-card h3 {
  color: #fff;
  font-size: 1.55rem;
  line-height: 1.15;
  margin: 0 14px 12px;
}

.reference-card--cert .designacion-desc,
.values-card p {
  margin: 0 14px 10px;
  color: rgba(255,255,255,0.68);
  font-size: 1rem;
  line-height: 1.75;
}

.reference-card--cert .designacion-logo {
  width: min(360px, 100%);
  filter: drop-shadow(0 16px 28px rgba(0,0,0,0.35));
  transform: scale(1.08);
}

.reference-shape { display: block; position: relative; }
.reference-shape--sphere {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), rgba(6,182,212,0.88) 26%, rgba(5,17,36,0.92) 58%, rgba(249,115,22,0.92) 100%);
  box-shadow: 0 0 28px rgba(6,182,212,0.28), 18px 0 24px rgba(249,115,22,0.16);
}
.reference-shape--triangle {
  width: 0;
  height: 0;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
  border-bottom: 92px solid rgba(5,17,36,0.9);
  filter: drop-shadow(0 0 3px #06b6d4) drop-shadow(0 0 12px rgba(249,115,22,0.28));
}
.reference-shape--square {
  width: 92px;
  height: 92px;
  border-radius: 24px;
  border: 2px solid rgba(6,182,212,0.75);
  box-shadow: 9px 0 0 rgba(249,115,22,0.55), 0 0 24px rgba(6,182,212,0.25);
}

.values-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 14px 10px;
}

.values-list div {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 10px;
}

.values-list span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #06b6d4;
  background: rgba(6,182,212,0.10);
}

.values-list strong { color: #fff; font-size: .94rem; }
.values-list p { grid-column: 2; margin: 2px 0 0; font-size: .82rem; line-height: 1.5; color: rgba(255,255,255,0.55); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature-card {
  min-height: 178px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,0.045), rgba(124,58,237,0.055));
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0,120,212,0.34);
  background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(0,120,212,0.08));
}

.feature-card__icon {
  width: 34px;
  height: 34px;
  color: #fff;
  flex: 0 0 auto;
}

.feature-card h3 {
  color: #fff;
  font-size: 1.12rem;
  line-height: 1.25;
  margin: 0 0 10px;
}

.feature-card p {
  margin: 0;
  color: rgba(255,255,255,0.64);
  font-size: .92rem;
  line-height: 1.65;
}

.pilares-flow {
  padding: 34px 36px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,0.025), rgba(0,120,212,0.035));
}

.pilar-circle {
  background: radial-gradient(circle at 45% 30%, rgba(43,149,245,0.18), rgba(255,255,255,0.03));
  border-color: rgba(6,182,212,0.34);
  color: #06b6d4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 0 26px rgba(0,120,212,0.10);
}

.pilar-connector {
  background: linear-gradient(90deg, rgba(0,120,212,0.12), rgba(6,182,212,0.48), rgba(124,58,237,0.18));
}

.maturity-panel {
  display: grid;
  grid-template-columns: .9fr 1.25fr;
  gap: 42px;
  align-items: center;
  padding: 32px;
  border: 1px solid rgba(255,255,255,0.085);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,0.035), rgba(124,58,237,0.05));
  overflow: hidden;
}

.maturity-panel__intro {
  padding: 18px;
}

.maturity-panel__eyebrow {
  display: inline-flex;
  margin-bottom: 18px;
  color: #06b6d4;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.maturity-panel__intro h3 {
  color: #fff;
  font-size: clamp(1.65rem, 3vw, 2.55rem);
  line-height: 1.12;
  margin: 0 0 16px;
}

.maturity-panel__intro p {
  color: rgba(255,255,255,0.63);
  line-height: 1.75;
  margin: 0 0 28px;
}

.madurez-step {
  background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.madurez-step h4 span {
  color: rgba(255,255,255,0.52);
  font-weight: 400;
  font-size: .85rem;
}

.nosotros-section--cta { padding-top: 60px; }

@media (max-width: 1024px) {
  .nosotros-metrics,
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .maturity-panel { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .nosotros-hero { padding: 130px 0 80px; }
  .nosotros-metrics,
  .feature-grid,
  .designaciones-grid,
  .nosotros-3col { grid-template-columns: 1fr; }
  .nosotros-section { padding: 76px 0; }
  .reference-card__visual { height: 170px; }
  .pilares-flow { padding: 28px 22px; }
  .pilar-connector { margin-top: 0; }
  .maturity-panel { padding: 22px; }
  .maturity-panel__intro { padding: 0; }
}

@media (max-width: 520px) {
  .nosotros-hero .hero-title { font-size: 2.55rem; }
  .nosotros-metric { min-height: 124px; }
  .feature-card { padding: 22px; }
  .cta-card-gradient { padding: 58px 28px; }
}

/* ===========================
   MODERNWORK PAGE REFINEMENTS
   =========================== */
.modernwork-hero {
  min-height: calc(100vh - 20px);
  padding: calc(var(--header-height) + 5rem) 0 6rem;
  background: #060d1a;
}

.modernwork-hero::before {
  background:
    radial-gradient(ellipse 58% 42% at 50% 55%, rgba(43,149,245,0.28) 0%, transparent 66%),
    radial-gradient(ellipse 40% 30% at 50% 38%, rgba(6,182,212,0.2) 0%, transparent 72%);
}

.modernwork-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(255,255,255,0.05) 0%, transparent 55%);
  pointer-events: none;
}

.modernwork-hero__inner {
  max-width: 920px;
}

.modernwork-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(3,8,18,0.62);
  border-radius: 999px;
  padding: 8px 14px;
  color: rgba(255,255,255,0.88);
  font-size: 0.9rem;
  font-weight: 500;
}

.modernwork-hero__badge span {
  background: linear-gradient(135deg, #0078d4, #2b95f5);
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 700;
  font-size: 0.78rem;
}

.modernwork-hero__title {
  font-size: clamp(2.5rem, 6vw, 5.2rem);
  line-height: 1.04;
  margin-top: 1rem;
}

.modernwork-hero__subtitle {
  max-width: 720px;
  color: rgba(255,255,255,0.78);
}

.modernwork-hero__actions {
  justify-content: center;
  margin-top: 1.5rem;
}

.modernwork-cert .section-label {
  color: rgba(255,255,255,0.78);
}

.modernwork-cert .cert__text h2 {
  color: #fff;
}

.modernwork-cert .cert__text p {
  color: rgba(255,255,255,0.74);
}

.modernwork-cert__grid {
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
}

.modernwork-cert__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
}

.modernwork-cert__logo img {
  width: min(360px, 100%);
  height: auto;
  border-radius: 12px;
}

.modernwork-success {
  max-width: 840px;
  margin: 0 auto;
  border-color: rgba(0,120,212,0.2);
}

.modernwork-success .success-card__text {
  margin-top: 0.5rem;
}

.modernwork-success__logo {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
}

.modernwork-cta-actions {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .modernwork-cert__grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

/* ===========================
   INFRAESTRUCTURA PAGE
   =========================== */
.infra-hero {
  min-height: calc(100vh - 20px);
  padding: calc(var(--header-height) + 5rem) 0 6rem;
  background: #060d1a;
}

.infra-hero::before {
  background:
    radial-gradient(ellipse 58% 42% at 50% 55%, rgba(0,120,212,0.30) 0%, transparent 66%),
    radial-gradient(ellipse 40% 30% at 50% 38%, rgba(6,182,212,0.22) 0%, transparent 72%);
  animation: infraHeroPulse 8s ease-in-out infinite;
  transform-origin: center;
}

.infra-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 50%, rgba(255,255,255,0.05) 0%, transparent 55%);
  pointer-events: none;
  animation: infraHeroPulseSoft 10s ease-in-out infinite;
  transform-origin: center;
}

.infra-hero__inner {
  max-width: 920px;
}

.infra-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(3,8,18,0.62);
  border-radius: 999px;
  padding: 8px 14px;
  color: rgba(255,255,255,0.88);
  font-size: 0.9rem;
  font-weight: 500;
}

.infra-hero__badge span {
  background: linear-gradient(135deg, #0078d4, #2b95f5);
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 700;
  font-size: 0.78rem;
}

.infra-hero__title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.04;
  margin-top: 1rem;
}

.infra-hero__subtitle {
  max-width: 740px;
  color: rgba(255,255,255,0.78);
}

.infra-hero__actions {
  justify-content: center;
  margin-top: 1.5rem;
}

.infra-cert .section-label {
  color: rgba(255,255,255,0.78);
}

.infra-cert .cert__text h2 {
  color: #fff;
}

.infra-cert .cert__text p {
  color: rgba(255,255,255,0.74);
}

.infra-cert__grid {
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
}

.infra-cert__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
}

.infra-cert__logo img {
  width: min(360px, 100%);
  height: auto;
  border-radius: 12px;
}

.infra-success {
  max-width: 840px;
  margin: 0 auto;
  border-color: rgba(0,120,212,0.2);
}

.infra-success__logo {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
}

.infra-cta-actions {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

@keyframes infraHeroPulse {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.95;
  }
  25% {
    transform: translate3d(10px, -6px, 0) scale(1.05);
    opacity: 1;
  }
  50% {
    transform: translate3d(-8px, 8px, 0) scale(1.03);
    opacity: 0.92;
  }
  75% {
    transform: translate3d(8px, 4px, 0) scale(1.06);
    opacity: 1;
  }
}

@keyframes infraHeroPulseSoft {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.65;
  }
  25% {
    transform: translate3d(-6px, 6px, 0) scale(1.02);
    opacity: 0.82;
  }
  50% {
    transform: translate3d(7px, -5px, 0) scale(1.04);
    opacity: 0.9;
  }
  75% {
    transform: translate3d(-5px, -4px, 0) scale(1.02);
    opacity: 0.78;
  }
}

@media (max-width: 900px) {
  .infra-cert__grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

/* ===========================
   INTELIGENCIA ARTIFICIAL PAGE
   =========================== */
.ai-hero {
  min-height: calc(100vh - 20px);
  padding: calc(var(--header-height) + 5rem) 0 6rem;
  background: #060d1a;
}

.ai-hero::before {
  background:
    radial-gradient(ellipse 58% 42% at 50% 55%, rgba(43,149,245,0.30) 0%, transparent 66%),
    radial-gradient(ellipse 40% 30% at 50% 38%, rgba(6,182,212,0.25) 0%, transparent 72%),
    radial-gradient(ellipse 30% 24% at 70% 28%, rgba(124,58,237,0.18) 0%, transparent 75%);
  animation: aiHeroPulse 10s ease-in-out infinite;
}

.ai-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(255,255,255,0.04) 0%, transparent 55%);
  pointer-events: none;
  animation: aiHeroPulseSoft 13s ease-in-out infinite;
}

.ai-hero__inner {
  max-width: 980px;
}

.ai-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(3,8,18,0.62);
  border-radius: 999px;
  padding: 8px 14px;
  color: rgba(255,255,255,0.88);
  font-size: 0.9rem;
  font-weight: 500;
}

.ai-hero__badge span {
  background: linear-gradient(135deg, #0078d4, #2b95f5);
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 700;
  font-size: 0.78rem;
}

.ai-hero__title {
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1.04;
  margin-top: 1rem;
}

.ai-hero__subtitle {
  max-width: 760px;
  color: rgba(255,255,255,0.78);
}

.ai-hero__actions {
  justify-content: center;
  margin-top: 1.5rem;
}

.ai-tools-grid .sol-card[data-animate="up"] {
  transform: translateY(96px);
  transition: opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-cert .section-label {
  color: rgba(255,255,255,0.78);
}

.ai-cert .cert__text h2 {
  color: #fff;
}

.ai-cert .cert__text p {
  color: rgba(255,255,255,0.74);
}

.ai-cert__grid {
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
}

.ai-cert__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
}

.ai-cert__logo img {
  width: min(360px, 100%);
  height: auto;
  border-radius: 12px;
}

.ai-assist-callout__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
  align-items: center;
}

.ai-assist-callout__content .section-label {
  color: rgba(255,255,255,0.78);
}

.ai-assist-callout__content p {
  color: rgba(255,255,255,0.74);
  line-height: 1.8;
  margin: 1rem 0 1.5rem;
}

.ai-assist-callout__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
}

.ai-assist-callout__visual img {
  width: min(320px, 100%);
  height: auto;
  object-fit: contain;
}

.ai-success {
  max-width: 860px;
  margin: 0 auto;
  border-color: rgba(43,149,245,0.24);
}

.ai-success__logo {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
}

.ai-cta-actions {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

@keyframes aiHeroPulse {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50% { transform: scale(1.05); opacity: 1; }
}

@keyframes aiHeroPulseSoft {
  0%, 100% { transform: scale(1); opacity: 0.72; }
  50% { transform: scale(1.03); opacity: 0.9; }
}

@media (max-width: 900px) {
  .ai-cert__grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .ai-assist-callout__grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

/* ===========================
   ENDPOINTS PAGE
   =========================== */
.endpoints-hero {
  min-height: calc(100vh - 20px);
  padding: calc(var(--header-height) + 5rem) 0 6rem;
  background: #060d1a;
}

.endpoints-hero::before {
  background:
    radial-gradient(ellipse 58% 42% at 50% 55%, rgba(0,120,212,0.30) 0%, transparent 66%),
    radial-gradient(ellipse 40% 30% at 50% 38%, rgba(6,182,212,0.2) 0%, transparent 72%);
}

.endpoints-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 50%, rgba(255,255,255,0.05) 0%, transparent 55%);
  pointer-events: none;
}

.endpoints-hero__inner {
  max-width: 920px;
}

.endpoints-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(3,8,18,0.62);
  border-radius: 999px;
  padding: 8px 14px;
  color: rgba(255,255,255,0.88);
  font-size: 0.9rem;
  font-weight: 500;
}

.endpoints-hero__badge span {
  background: linear-gradient(135deg, #0078d4, #2b95f5);
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 700;
  font-size: 0.78rem;
}

.endpoints-hero__title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.04;
  margin-top: 1rem;
}

.endpoints-hero__subtitle {
  max-width: 740px;
  color: rgba(255,255,255,0.78);
}

.endpoints-hero__actions {
  justify-content: center;
  margin-top: 1.5rem;
}

.endpoints-benefits .sol-card {
  min-height: 100%;
}

.endpoints-benefits .solutions__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 900px;
  margin-inline: auto;
}

.endpoints-cert .section-label {
  color: rgba(255,255,255,0.78);
}

.endpoints-cert .cert__text h2 {
  color: #fff;
}

.endpoints-cert .cert__text p {
  color: rgba(255,255,255,0.74);
}

.endpoints-cert__grid {
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
}

.endpoints-cert__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
}

.endpoints-cert__logo img {
  width: min(360px, 100%);
  height: auto;
  border-radius: 12px;
}

.endpoints-success {
  max-width: 840px;
  margin: 0 auto;
  border-color: rgba(0,120,212,0.2);
}

.endpoints-success__logo {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
}

.endpoints-cta-actions {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .endpoints-cert__grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

/* ===========================
   CIBERSEGURIDAD PAGE
   =========================== */
.ciber-hero {
  min-height: 78vh;
  padding: calc(var(--header-height) + 4rem) 0 4rem;
  background: #060d1a;
}

.ciber-hero::before {
  background:
    radial-gradient(ellipse 58% 42% at 48% 56%, rgba(0,120,212,0.28) 0%, transparent 66%),
    radial-gradient(ellipse 40% 30% at 62% 40%, rgba(6,182,212,0.2) 0%, transparent 72%);
}

.ciber-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 50%, rgba(255,255,255,0.045) 0%, transparent 55%);
  pointer-events: none;
}

.ciber-hero__inner {
  max-width: 920px;
}

.ciber-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(3,8,18,0.62);
  border-radius: 999px;
  padding: 8px 14px;
  color: rgba(255,255,255,0.88);
  font-size: 0.9rem;
  font-weight: 500;
}

.ciber-hero__badge span {
  background: linear-gradient(135deg, #0078d4, #2b95f5);
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 700;
  font-size: 0.78rem;
}

.ciber-hero__title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.04;
  margin-top: 1rem;
}

.ciber-hero__subtitle {
  max-width: 740px;
  color: rgba(255,255,255,0.78);
}

.ciber-hero__actions {
  justify-content: center;
  margin-top: 1.5rem;
}

.ciber-partners .logos-track-wrapper {
  margin-top: 2.6rem;
}

.ciber-success {
  max-width: 860px;
  margin: 0 auto;
  border-color: rgba(0,120,212,0.2);
}

.ciber-success__logo {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
}

.ciber-cta-actions {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.ciber-cta-card {
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}

.ciber-cta-card:hover {
  border-color: rgba(0,120,212,.45);
  box-shadow:
    var(--shadow-blue),
    0 24px 70px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.12);
  transform: translateY(-6px);
}

/* ===========================
   SERVICIOS PROFESIONALES PAGE
   =========================== */
.servicios-hero {
  min-height: calc(100vh - 20px);
  padding: calc(var(--header-height) + 5rem) 0 6rem;
  background: #060d1a;
}

.servicios-hero::before {
  background:
    radial-gradient(ellipse 58% 44% at 50% 55%, rgba(0,120,212,0.28) 0%, transparent 66%),
    radial-gradient(ellipse 40% 30% at 64% 38%, rgba(6,182,212,0.18) 0%, transparent 72%);
}

.servicios-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 50%, rgba(255,255,255,0.04) 0%, transparent 55%);
  pointer-events: none;
}

.servicios-hero__inner {
  max-width: 940px;
}

.servicios-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(3,8,18,0.62);
  border-radius: 999px;
  padding: 8px 14px;
  color: rgba(255,255,255,0.88);
  font-size: 0.9rem;
  font-weight: 500;
}

.servicios-hero__badge span {
  background: linear-gradient(135deg, #0078d4, #2b95f5);
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 700;
  font-size: 0.78rem;
}

.servicios-hero__title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.04;
  margin-top: 1rem;
}

.servicios-hero__subtitle {
  max-width: 760px;
  color: rgba(255,255,255,0.78);
}

.servicios-hero__actions {
  justify-content: center;
  margin-top: 1.5rem;
}

.servicios-beneficios .sol-card {
  min-height: 100%;
}

.servicios-beneficios .sol-card[data-animate="left"],
.servicios-beneficios .sol-card[data-animate="right"] {
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}

.servicios-beneficios .sol-card[data-delay="1"] {
  transition-delay: 0.08s;
}

.servicios-beneficios .sol-card[data-delay="2"] {
  transition-delay: 0.2s;
}

.servicios-beneficios .sol-card[data-animate].is-visible:hover {
  transform: translateY(-8px) !important;
}

.servicios-pilares .section-header {
  margin-bottom: 1.75rem;
}

.pilares-orbit {
  --orbit-core-x: 0px;
  --orbit-core-y: 0px;
  --orbit-ring-x: 0px;
  --orbit-ring-y: 0px;
  --orbit-link-x: 0px;
  --orbit-link-y: 0px;
  --orbit-node-x: 0px;
  --orbit-node-y: 0px;
  --node-radius: 300px;
  position: relative;
  min-height: 800px;
  overflow: visible;
}

.pilares-orbit__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 460px;
  height: 460px;
  transform: translate(calc(-50% + var(--orbit-ring-x)), calc(-50% + var(--orbit-ring-y)));
  border-radius: 50%;
  border: 2px solid rgba(43,149,245,0.45);
  box-shadow:
    0 0 0 18px rgba(0,120,212,0.08),
    0 0 70px rgba(6,182,212,0.12);
  transition: transform 0.35s ease-out;
}

.pilares-orbit__ring::before {
  content: "";
  position: absolute;
  inset: 56px;
  border-radius: 50%;
  border: 1px solid rgba(43,149,245,0.16);
  box-shadow: 0 0 32px rgba(6,182,212,0.08);
  opacity: 0.7;
  pointer-events: none;
}

.pilares-orbit__ring::after {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1px solid rgba(6,182,212,0.18);
  box-shadow: inset 0 0 30px rgba(43,149,245,0.08);
  animation: orbitSpinReverse 32s linear infinite;
  pointer-events: none;
}

.pilares-orbit__core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 250px;
  height: 250px;
  transform: translate(calc(-50% + var(--orbit-core-x)), calc(-50% + var(--orbit-core-y)));
  border-radius: 50%;
  border: 10px solid #f3f8ff;
  background: linear-gradient(165deg, rgba(9,20,38,0.96), rgba(5,12,24,0.95));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 28px 55px rgba(0,0,0,0.42);
  z-index: 5;
  transition: transform 0.35s ease-out;
}

.pilares-orbit__glow {
  position: absolute;
  inset: -34px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43,149,245,0.32) 0%, transparent 72%);
  filter: blur(20px);
  animation: orbitPulse 3.6s ease-in-out infinite, orbitGlowDrift 7s ease-in-out infinite;
}

.pilares-orbit__core img {
  width: 164px;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.pilar-link {
  --a: 0deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 225px;
  height: 3px;
  transform-origin: 0 50%;
  transform: translate(var(--orbit-link-x), var(--orbit-link-y)) rotate(var(--a));
  background: linear-gradient(90deg, rgba(0,120,212,0.45), rgba(43,149,245,0.28), rgba(6,182,212,0.08));
  box-shadow: 0 0 18px rgba(43,149,245,0.18);
  z-index: 1;
  overflow: hidden;
  transition: transform 0.35s ease-out;
}

.pilar-link::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -35%;
  width: 34%;
  height: 7px;
  background: linear-gradient(90deg, transparent, rgba(6,182,212,0.95), transparent);
  filter: blur(1px);
  animation: connectorFlow 2.8s ease-out infinite;
}

.pilar-link--1 { --a: -120deg; }
.pilar-link--2 { --a: -60deg; }
.pilar-link--3 { --a: 0deg; }
.pilar-link--4 { --a: 60deg; }
.pilar-link--5 { --a: 120deg; }
.pilar-link--6 { --a: 180deg; }

.pilar-node {
  --a: 0deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 210px;
  transform: translate(calc(-50% + var(--orbit-node-x)), calc(-50% + var(--orbit-node-y))) rotate(var(--a)) translate(var(--node-radius)) rotate(calc(var(--a) * -1));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 4;
  transition: transform 0.35s ease-out;
}

.pilar-node__circle {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  border: 12px solid #f3f8ff;
  background: linear-gradient(145deg, var(--tone-a), var(--tone-b));
  box-shadow:
    0 18px 34px rgba(0,0,0,0.35),
    0 0 34px rgba(43,149,245,0.16);
  color: #eff7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: nodeFloat 5.4s ease-in-out infinite;
}

.pilar-node__circle svg {
  filter: drop-shadow(0 0 10px rgba(6,182,212,0.28));
}

.pilar-node__label {
  position: absolute;
  margin: 0;
  color: rgba(255,255,255,0.94);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  max-width: 176px;
}

.pilar-node--1 { --a: -120deg; --tone-a: #0078d4; --tone-b: #0f2d5e; }
.pilar-node--2 { --a: -60deg; --tone-a: #2b95f5; --tone-b: #0078d4; }
.pilar-node--3 { --a: 0deg; --tone-a: #06b6d4; --tone-b: #0078d4; }
.pilar-node--4 { --a: 60deg; --tone-a: #0f2d5e; --tone-b: #060d1a; }
.pilar-node--5 { --a: 120deg; --tone-a: #0078d4; --tone-b: #0a1a40; }
.pilar-node--6 { --a: 180deg; --tone-a: #2b95f5; --tone-b: #0f2d5e; }

.pilar-node--2 .pilar-node__circle { animation-delay: -0.8s; }
.pilar-node--3 .pilar-node__circle { animation-delay: -1.6s; }
.pilar-node--4 .pilar-node__circle { animation-delay: -2.4s; }
.pilar-node--5 .pilar-node__circle { animation-delay: -3.2s; }
.pilar-node--6 .pilar-node__circle { animation-delay: -4s; }

.pilar-node--1 .pilar-node__label,
.pilar-node--6 .pilar-node__label {
  right: calc(100% + 24px);
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
}

.pilar-node--2 .pilar-node__label,
.pilar-node--3 .pilar-node__label,
.pilar-node--4 .pilar-node__label {
  left: calc(100% + 24px);
  top: 50%;
  transform: translateY(-50%);
  text-align: left;
}

.pilar-node--5 .pilar-node__label {
  right: calc(100% + 24px);
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
}

@media (max-width: 1120px) {
  .pilares-orbit {
    min-height: 730px;
  }

  .pilares-orbit__ring {
    width: 400px;
    height: 400px;
  }

  .pilares-orbit__core {
    width: 220px;
    height: 220px;
  }

  .pilares-orbit__core img {
    width: 148px;
  }

  .pilar-link {
    width: 196px;
  }

  .pilar-node {
    width: 190px;
    --node-radius: 260px;
  }

  .pilar-node__circle {
    width: 132px;
    height: 132px;
  }

  .pilar-node__label {
    font-size: 0.9rem;
    max-width: 164px;
  }
}

@keyframes nodeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes orbitPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.07); }
}

@keyframes orbitGlowDrift {
  0%, 100% { background-position: 50% 50%; }
  50% { background-position: 58% 44%; }
}

@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes orbitSpinReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes connectorFlow {
  0% { transform: translateX(0); opacity: 0; }
  16% { opacity: 1; }
  74% { opacity: 1; }
  100% { transform: translateX(390%); opacity: 0; }
}

@keyframes deliveryFlow {
  0% { transform: translateX(-115%); opacity: 0; }
  14% { opacity: 0.95; }
  78% { opacity: 0.95; }
  100% { transform: translateX(520%); opacity: 0; }
}

.servicios-tabs-nav {
  margin-bottom: 2rem;
}

.servicios-tabs-nav .tab-btn {
  border-color: rgba(255,255,255,0.12);
  background: rgba(7,14,28,0.8);
  color: rgba(255,255,255,0.65);
}

.servicios-tabs-nav .tab-btn.active {
  background: linear-gradient(135deg, rgba(0,120,212,0.35), rgba(6,182,212,0.22));
  border-color: rgba(43,149,245,0.42);
  color: #fff;
}

.servicios-partners .tab-panel {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background: rgba(255,255,255,0.02);
  padding: 1.2rem;
}

.servicios-success {
  max-width: 860px;
  margin: 0 auto;
  border-color: rgba(0,120,212,0.2);
}

.servicios-success__logo {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
}

.servicios-roadmap__frame {
  position: relative;
}

.m365-roadmap {
  --roadmap-line-y: 88%;
  min-height: 610px;
  padding: 2.25rem 1.25rem;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.m365-roadmap__glow,
.m365-roadmap__track {
  position: absolute;
  pointer-events: none;
  transition: transform 0.35s ease-out;
}

.m365-roadmap__glow {
  width: 360px;
  height: 220px;
  border-radius: 50%;
  filter: blur(38px);
  opacity: 0.58;
}

.m365-roadmap__glow--one {
  top: 10%;
  left: 8%;
  background: radial-gradient(circle, rgba(6,182,212,0.22), transparent 70%);
  animation: roadmapGlowFloat 8s ease-in-out infinite;
}

.m365-roadmap__glow--two {
  right: 8%;
  bottom: 10%;
  background: radial-gradient(circle, rgba(43,149,245,0.18), transparent 70%);
  animation: roadmapGlowFloat 9s ease-in-out infinite reverse;
}

.m365-roadmap__track {
  left: 6%;
  right: 6%;
  top: var(--roadmap-line-y);
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,120,212,0.38), rgba(43,149,245,0.8), rgba(6,182,212,0.72), rgba(0,120,212,0.42));
  box-shadow: 0 0 24px rgba(43,149,245,0.34);
  overflow: hidden;
}

.m365-roadmap__track::after {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  bottom: -2px;
  width: 18%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
  filter: blur(4px);
  animation: roadmapLightRun 4.6s linear infinite;
}

.m365-roadmap-card {
  --card-color: #0078d4;
  --card-top: 22%;
  --card-height: 320px;
  position: absolute;
  top: var(--card-top);
  width: 12.8%;
  height: var(--card-height);
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025));
  color: rgba(255,255,255,0.78);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 20px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 34px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
  transform-origin: 50% 50%;
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, z-index 0s;
  z-index: 2;
  animation: roadmapCardFloat 7s ease-in-out infinite;
}

.m365-roadmap-card:hover {
  animation: none;
  transform: translateY(-42px) scale(1.28);
  z-index: 50;
  border-color: rgba(43,149,245,0.46);
  box-shadow: 0 36px 70px rgba(0,0,0,0.44), 0 0 36px rgba(6,182,212,0.18), inset 0 1px 0 rgba(255,255,255,0.14);
}

.m365-roadmap-card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 6px;
  height: calc(var(--roadmap-line-y) - var(--card-top) - var(--card-height) + 4px);
  min-height: 36px;
  transform: translateX(-50%);
  background: var(--card-color);
  box-shadow: 0 0 16px rgba(43,149,245,0.28);
  z-index: -1;
}

.m365-roadmap-card::after {
  display: none;
}

.m365-roadmap-card__head {
  height: 86px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem; /* separación uniforme texto-icono en todas las tarjetas */
  padding: 0.75rem 0.85rem;
  background: linear-gradient(135deg, var(--card-color), rgba(6,182,212,0.18));
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: #fff;
}

.m365-roadmap-card h3 {
  margin: 0;
  color: #fff;
  font-size: 0.98rem;
  line-height: 1.25;
  font-weight: 800;
  min-width: 0;
  max-width: 100%;
}

.m365-roadmap-card ul {
  margin: 0;
  padding: 0.85rem 0.85rem 1rem;
  font-size: 0.82rem;
  line-height: 1.36;
  color: rgba(255,255,255,0.68);
  list-style: none;
}

.m365-roadmap-card li + li {
  margin-top: 0.25rem;
}

.m365-roadmap-card li {
  position: relative;
  padding-left: 1rem;
}

.m365-roadmap-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #06b6d4;
  box-shadow: 0 0 10px rgba(6,182,212,0.45);
}

.m365-roadmap-card__icon,
.m365-roadmap-card__brand {
  flex-shrink: 0;
  color: rgba(255,255,255,0.92);
}

.m365-roadmap-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
}

.m365-roadmap-card__icon svg {
  display: block;
  max-width: 30px;
}

.m365-roadmap-card__brand {
  font-weight: 900;
  letter-spacing: 0.03em;
  font-size: 0.9rem;
}

.m365-roadmap-card--kit { --card-color: #0078d4; left: 2%; animation-delay: -0.3s; }
.m365-roadmap-card--mig { --card-color: #2b95f5; left: 16.2%; animation-delay: -1.1s; }
.m365-roadmap-card--assess { --card-color: #0078d4; left: 30.4%; animation-delay: -1.8s; }
.m365-roadmap-card--sec { --card-color: #06b6d4; left: 44.6%; animation-delay: -2.6s; }
.m365-roadmap-card--baas { --card-color: #2b95f5; left: 58.8%; animation-delay: -3.4s; }
.m365-roadmap-card--adop { --card-color: #0078d4; left: 73%; animation-delay: -4.2s; }
.m365-roadmap-card--poliza { --card-color: #0f2d5e; left: 87.2%; animation-delay: -5s; }

.servicios-metrics-section {
  padding: 34px 0 84px;
}

.servicios-metrics-section .nosotros-metrics {
  margin: 0 auto;
}

@media (max-width: 1180px) {
  .m365-roadmap {
    --roadmap-line-y: 89%;
    min-height: 600px;
    padding-inline: 0.9rem;
  }

  .m365-roadmap-card {
    width: 12.8%;
    --card-height: 310px;
  }

  .m365-roadmap-card h3 {
    font-size: 0.86rem;
  }

  .m365-roadmap-card ul {
    font-size: 0.74rem;
    padding-left: 1.25rem;
  }

  .m365-roadmap-card:hover {
    transform: translateY(-34px) scale(1.22);
  }
}

@keyframes roadmapFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.012);
  }
}

@keyframes roadmapCardFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

@keyframes roadmapLightRun {
  from {
    transform: translateX(0);
    opacity: 0;
  }
  18%, 78% {
    opacity: 1;
  }
  to {
    transform: translateX(720%);
    opacity: 0;
  }
}

@keyframes roadmapGlowFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(18px, -14px) scale(1.08);
  }
}

.servicios-cta-actions {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ===========================
   SERVICIOS PROFESIONALES - PROCESS
   =========================== */
.section-process .section-desc {
  max-width: 760px;
  margin: 0.9rem auto 0;
}

.delivery-process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: start;
  padding: clamp(2.8rem, 6vw, 4.5rem) 0 1rem;
  overflow: visible;
  isolation: isolate;
}

.delivery-process::before {
  content: "";
  position: absolute;
  inset: 0 -4%;
  z-index: -2;
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 18%, rgba(43,149,245,0.12), transparent 32%),
    radial-gradient(circle at 86% 26%, rgba(6,182,212,0.10), transparent 34%),
    linear-gradient(180deg, rgba(4,12,27,0.12), rgba(4,12,27,0));
  pointer-events: none;
}

.delivery-process__glow,
.delivery-process__line {
  pointer-events: none;
}

.delivery-process__glow {
  position: absolute;
  width: 360px;
  height: 220px;
  border-radius: 50%;
  filter: blur(42px);
  opacity: 0.42;
  pointer-events: none;
  z-index: -1;
}

.delivery-process__glow--one {
  left: 2%;
  top: 8%;
  background: radial-gradient(circle, rgba(43,149,245,0.24), transparent 68%);
  animation: roadmapGlowFloat 8s ease-in-out infinite;
}

.delivery-process__glow--two {
  right: 2%;
  top: 12%;
  background: radial-gradient(circle, rgba(6,182,212,0.18), transparent 70%);
  animation: roadmapGlowFloat 9s ease-in-out infinite reverse;
}

.delivery-process__line {
  position: absolute;
  left: 7%;
  right: 7%;
  top: calc(clamp(2.8rem, 6vw, 4.5rem) + clamp(71px, 6.7vw, 95px) - 11px);
  height: 22px;
  background: linear-gradient(90deg, rgba(0,120,212,0.45), rgba(43,149,245,0.68), rgba(6,182,212,0.46), rgba(15,45,94,0.42));
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 16px 50%);
  opacity: 0.9;
  box-shadow: 0 0 24px rgba(43,149,245,0.22);
  pointer-events: none;
  overflow: hidden;
}

.delivery-process__line::after {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  bottom: -4px;
  width: 18%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(243,248,255,0.95), rgba(6,182,212,0.82), transparent);
  filter: blur(5px);
  animation: deliveryFlow 3.2s ease-in-out infinite;
}

.delivery-step {
  --tone-a: #0078d4;
  --tone-b: #0f2d5e;
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
}

.delivery-step:nth-of-type(1) { --tone-a: #0078d4; --tone-b: #0f2d5e; }
.delivery-step:nth-of-type(2) { --tone-a: #2b95f5; --tone-b: #0078d4; }
.delivery-step:nth-of-type(3) { --tone-a: #06b6d4; --tone-b: #0078d4; }
.delivery-step:nth-of-type(4) { --tone-a: #0f2d5e; --tone-b: #060d1a; }
.delivery-step:nth-of-type(5) { --tone-a: #0078d4; --tone-b: #0a1a40; }

.delivery-step__circle {
  position: relative;
  z-index: 2;
  width: clamp(142px, 13.4vw, 190px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 12px solid #f3f8ff;
  display: grid;
  place-items: center;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.delivery-step__circle::before {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: #061a34;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.delivery-step--light .delivery-step__circle {
  background: linear-gradient(145deg, var(--tone-a), var(--tone-b));
  color: #eff7ff;
  box-shadow: 0 18px 34px rgba(0,0,0,0.35), 0 0 34px rgba(43,149,245,0.16);
}

.delivery-step--blue .delivery-step__circle {
  background: linear-gradient(145deg, var(--tone-a), var(--tone-b));
  color: #eff7ff;
  box-shadow: 0 18px 34px rgba(0,0,0,0.35), 0 0 34px rgba(43,149,245,0.16);
}

.delivery-step__icon {
  position: relative;
  z-index: 3;
  width: clamp(68px, 6.8vw, 94px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #06254a;
  color: #f8fbff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.delivery-step__dot {
  width: 12px;
  height: 12px;
  margin: 1.35rem 0 1.35rem;
  border-radius: 50%;
  background: var(--tone-a);
  box-shadow: 0 0 20px rgba(43,149,245,0.5);
}

.delivery-step__dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(clamp(142px, 13.4vw, 190px) + 0.1rem);
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, rgba(43,149,245,0.5), transparent);
  transform: translateX(-50%);
}

.delivery-step h3 {
  width: min(100%, 210px);
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 1rem;
  padding: 0.76rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(243,248,255,0.2);
  background: linear-gradient(135deg, var(--tone-a), var(--tone-b));
  color: #fff;
  font-size: clamp(0.92rem, 1.35vw, 1.12rem);
  line-height: 1.15;
  font-weight: 800;
  box-shadow: 0 14px 24px rgba(0,0,0,0.16);
}

.delivery-step--blue h3 {
  background: linear-gradient(135deg, var(--tone-a), var(--tone-b));
  color: #fff;
}

.delivery-step p {
  width: min(100%, 220px);
  margin: 0;
  color: rgba(255,255,255,0.78);
  font-size: clamp(0.92rem, 1.3vw, 1.05rem);
  line-height: 1.38;
  transition: color 0.28s ease;
}

.delivery-step:hover .delivery-step__circle {
  transform: translateY(-10px) scale(1.04);
  box-shadow: 0 26px 52px rgba(0,0,0,0.36), 0 0 42px rgba(6,182,212,0.26);
}

.delivery-step:hover h3 {
  box-shadow: 0 14px 30px rgba(6,182,212,0.18);
}

.delivery-step:hover p {
  color: rgba(255,255,255,0.9);
}

@media (max-width: 1100px) {
  .delivery-process {
    gap: 0.75rem;
  }

  .delivery-step p {
    font-size: 0.88rem;
  }
}

@media (max-width: 900px) {
  .delivery-process {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.15rem;
    padding: 1rem 0 0;
  }

  .delivery-process__line {
    left: 58px;
    right: auto;
    top: 2rem;
    bottom: 2rem;
    width: 4px;
    height: auto;
    clip-path: none;
    background: linear-gradient(180deg, rgba(243,248,255,0.85), rgba(6,182,212,0.62), rgba(43,149,245,0.5));
  }

  .delivery-process__line::after {
    display: none;
  }

  .delivery-step {
    min-height: 128px;
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    grid-template-areas:
      "circle title"
      "circle copy";
    column-gap: 1rem;
    align-items: center;
    text-align: left;
  }

  .delivery-step__circle {
    grid-area: circle;
    width: 116px;
  }

  .delivery-step__icon {
    width: 56px;
  }

  .delivery-step__dot,
  .delivery-step__dot::before {
    display: none;
  }

  .delivery-step h3 {
    grid-area: title;
    width: min(100%, 280px);
    min-height: 0;
    margin: 0 0 0.5rem;
    justify-self: start;
  }

  .delivery-step p {
    grid-area: copy;
    width: 100%;
    max-width: 520px;
  }
}

@media (max-width: 768px) {
  .servicios-roadmap__frame {
    min-height: auto;
  }

  .pilares-orbit {
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0.25rem 0 0;
  }

  .pilares-orbit::before,
  .pilares-orbit__ring,
  .pilar-link {
    display: none;
  }

  .pilares-orbit__core {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 165px;
    height: 165px;
    margin: 0 auto 0.35rem;
    border-width: 8px;
  }

  .pilares-orbit__core img {
    width: 112px;
  }

  .pilar-node {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    width: min(100%, 360px);
    min-height: auto;
  }

  .pilar-node__circle {
    width: 120px;
    height: 120px;
    border-width: 9px;
  }

  .pilar-node .pilar-node__label {
    position: static;
    right: auto;
    left: auto;
    top: auto;
    transform: none;
    text-align: center;
    margin-top: 0.55rem;
    max-width: none;
  }

  .m365-roadmap {
    --roadmap-line-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    overflow: hidden;
  }

  .m365-roadmap__track,
  .m365-roadmap-card::before,
  .m365-roadmap-card::after {
    display: none;
  }

  .m365-roadmap-card {
    position: static;
    width: 100%;
    height: auto;
    min-height: auto;
    border-radius: 18px;
    animation: none;
  }

  .m365-roadmap-card:hover {
    transform: translateY(-8px) scale(1.02);
  }

  .m365-roadmap-card__head {
    height: auto;
    min-height: auto;
    border-radius: 18px 18px 0 0;
  }
}