/* ═══════════════════════════════════════════════════════════
   IT — TERRITORIOS INTELIGENTES · DESIGN SYSTEM v5.0
   Sistema de diseño compartido para todas las páginas del sitio.

   ESTRUCTURA DE ESTE ARCHIVO:
     1. Variables CSS (colores, sombras, tipografía)
     2. Reset / Estilos base
     3. Navbar — fijo, 3 zonas, efecto al scroll
     4. Botones
     5. Layout y grid
     6. Tipografía
     7. Tarjetas (cards)
     8. Marquee / ticker de clientes
     9. Animaciones reveal
    10. Bloques de estadísticas
    11. Hero atoms (orbs, badges)
    12. Hero de páginas interiores
    13. Divisores
    14. CTA Banner
    15. Quote card
    16. Equipo (team avatar)
    17. Footer
    18. Responsive
    19. Utilidades

   ARCHIVO JS COMPARTIDO: assets/it-nav.js
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --red:    #D94F2A;
  --blue:   #4BAED6;
  --yellow: #F0B740;
  --green:  #5A9E3C;
  --navy:   #2B5C8A;
  --ink:    #0D0F12;
  --gray:   #f0efeb;
  --soft:   #f7f6f2;
  --mid:    #e8e6e0;
  --white:  #ffffff;
  --border: rgba(13,15,18,0.08);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06), 0 20px 40px rgba(0,0,0,0.07);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.08), 0 40px 80px rgba(0,0,0,0.1);
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease2: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:   0.2s;
  --nav-h: 68px;

  /* Dark blue gradient — matches hero, replaces flat black */
  --dark-bg: linear-gradient(155deg, #07101e 0%, #0a1828 35%, #0d1e36 65%, #0e1f38 100%);
  --dark-bg-solid: #0a1828;
}

/* ── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--gray);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.6;
  font-size: 16px;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }

/* Offset anchor targets so the fixed nav doesn't cover them.
   Applies to every element with an id — covers #demo, #servicios-grid, etc. */
[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: rgba(13,15,18,0.12); border-radius: 2px; }

/* ══════════════════════════════════════════════════════════
   NAVBAR — 3 zonas: logo (izq) | links (centro) | acciones (der)

   Estado inicial:  transparente, sobre el hero oscuro
   Estado .stuck:   fondo oscuro translúcido (se activa con JS
                    al bajar más de 20px → ver assets/it-nav.js)
   ══════════════════════════════════════════════════════════ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: 80px;
  display: flex; align-items: center;
  padding: 0 clamp(16px, 4vw, 48px);
  transition: all 0.3s var(--ease);
  background: transparent;
  border-bottom: 1px solid transparent;
  color: #fff;
}

/* ── Zone 1: Logo (left) ── */
.nav-logo {
  display: flex; align-items: center; flex-shrink: 0;
  text-decoration: none;
}
/* El logo siempre muestra la versión blanca (logo_white.png).
   Tamaño: 44px normal, 32px cuando el nav está fijo (.stuck). */
.nav-logo img,
.nav-logo svg {
  height: 80px;   /* bigger logo */
  width: auto;
  display: block;
  transition: height 0.3s var(--ease), opacity 0.2s;
  opacity: 0.95;
}
.nav-logo img:hover { opacity: 1; }

/* ── Zone 2: Center links ── */
.nav-center {
  display: flex; gap: 4px; align-items: center;
  flex: 1; justify-content: center;
  margin: 0 12px;
}

/* ── Zone 3: Right actions ── */
.nav-end {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}

/* ── Nav social icons ── */
.nav-social {
  display: flex; align-items: center; gap: 1px;
  padding-right: 10px; margin-right: 6px;
  border-right: 1px solid rgba(255,255,255,0.12);
}
#nav.stuck .nav-social { border-right-color: rgba(13,15,18,0.09); }
.nav-soc-link {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.60); transition: color 0.15s, background 0.15s;
  text-decoration: none;
}
.nav-soc-link:hover { color: #fff; background: rgba(255,255,255,0.1); }
.nav-soc-link svg { width: 15px; height: 15px; display: block; fill: currentColor; }
#nav.stuck .nav-soc-link { color: rgba(255,255,255,0.60); }
#nav.stuck .nav-soc-link:hover { color: #fff; background: rgba(255,255,255,0.1); }

/* ── Enlace del nav ── */
.nl {
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  position: relative;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color var(--dur), background var(--dur), opacity var(--dur);
  color: #ffffff;
  opacity: 0.9;
  text-decoration: none;
}
.nl:hover { opacity: 1; }
.nl.act   { opacity: 1; font-weight: 600; }
.nl.act::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 1.5px; border-radius: 0 0 6px 6px;
  background: rgba(255,255,255,0.45);
}
/* Ícono de flecha en el botón "Soluciones" */
.nl svg {
  width: 8px; height: 8px;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.18s var(--ease);
  flex-shrink: 0;
}
.nav-item:hover .nl svg,
.nav-item.open .nl svg { transform: rotate(180deg); }

/* ══════════════════════════════════════════════════════════
   MEGA MENU — World-class dropdown (Vercel/Linear/Stripe level)
   ══════════════════════════════════════════════════════════ */
.nav-item { position: relative; }
.nav-dd {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 700px;
  padding: 6px;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(13,15,18,0.07);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.03),
    0 8px 16px rgba(0,0,0,0.06),
    0 32px 80px rgba(0,0,0,0.16);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
  z-index: 1000;
  color: var(--ink);
}
.nav-dd::before {
  content: "";
  position: absolute;
  top: -15px; left: 0; right: 0;
  height: 15px;
}
.nav-item.open .nav-dd {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

/* Mega menu inner layout */
.mm-grid {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 6px;
}
.mm-left {
  padding: 14px 10px 10px;
}
.mm-right {
  background: linear-gradient(155deg, #07101e, #0d1e36);
  border-radius: 18px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.mm-right::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(75,174,214,0.2) 0%, transparent 70%);
  pointer-events: none;
}

/* Section headings inside mega-menu */
.mm-section-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(13,15,18,0.35);
  padding: 0 6px;
  margin-bottom: 4px;
}

/* Sector item — compact */
.mm-sector {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.12s;
  position: relative;
}
.mm-sector:hover { background: var(--soft); }
.mm-sector.act-item { background: rgba(75,174,214,0.07); }
.mm-sector.act-item .mm-sector-name { color: var(--blue); }

.mm-sector-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}
.mm-sector-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.mm-sector-desc {
  font-size: 11.5px;
  color: rgba(13,15,18,0.42);
  margin-top: 1px;
  line-height: 1.3;
}
.mm-sector-arrow {
  margin-left: auto;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(13,15,18,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.12s;
  flex-shrink: 0;
}
.mm-sector:hover .mm-sector-arrow { opacity: 1; }
.mm-sector-arrow svg { width: 8px; height: 8px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Grid of sectors */
.mm-sectors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-bottom: 10px;
}

/* Divider */
.mm-div {
  height: 1px;
  background: rgba(13,15,18,0.06);
  margin: 6px 6px 10px;
}

/* Right panel: CTA card */
.mm-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}
.mm-cta-badge span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue);
  animation: pulse 2.2s ease-in-out infinite;
}
.mm-cta-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin-bottom: 8px;
}
.mm-cta-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  line-height: 1.55;
  margin-bottom: 16px;
}
.mm-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 10px;
  background: #4BAED6;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
  letter-spacing: -0.01em;
}
.mm-cta-btn:hover { background: #3a9dc5; transform: translateY(-1px); }
.mm-cta-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Right panel: product mini-list */
.mm-products {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
}
.mm-prod-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 9px;
  text-decoration: none;
  transition: background 0.1s;
}
.mm-prod-link:hover { background: rgba(255,255,255,0.07); }
.mm-prod-img {
  width: 24px; height: 24px;
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  opacity: 0.8;
}
.mm-prod-name {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  letter-spacing: -0.01em;
}
.mm-prod-link:hover .mm-prod-name { color: #fff; }

/* Textos oscuros del dropdown */
.nav-dd .dd-label,
.nav-dd .dd-sub,
.nav-dd .dd-item { color: var(--ink); }
.nav-dd .dd-item.act-item .dd-label { color: var(--blue); }
.dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 10px;
  color: var(--ink); transition: background 0.1s;
}
.dd-item:hover { background: var(--soft); }
.dd-item.act-item { background: rgba(75,174,214,0.07); }
.dd-item.act-item .dd-label { color: var(--blue); }
.dd-icon {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.dd-icon-img {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.dd-label { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.dd-sub   { font-size: 12px; color: rgba(13,15,18,0.45); margin-top: 1px; }
.dd-sep   { height: 1px; background: rgba(13,15,18,0.06); margin: 5px 3px; }
.dd-suite {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px; border-radius: 11px;
  background: rgba(75,174,214,0.06); border: 1px solid rgba(75,174,214,0.14);
  margin-bottom: 4px; transition: background 0.1s; color: var(--ink);
}
.dd-suite:hover { background: rgba(75,174,214,0.1); }
.dd-suite.act-item { background: rgba(75,174,214,0.12); border-color: rgba(75,174,214,0.28); }

/* ── STUCK STATE — nav con scroll (clase .stuck agregada por JS) ── */
/*    El fondo es oscuro translúcido para mantener legibilidad     */
/*    sobre cualquier contenido de página.                         */
#nav.stuck {
  height: 64px;
  background: #0d0f12;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

/* ── Dark-nav initial state (páginas interiores con hero oscuro) ──
   Desde el primer pixel la navbar es legible sobre el hero azul.
   .dark-nav = nav con hero oscuro (páginas de producto, eX.html)
   .light-page = nav sobre páginas con hero claro/beige               */
#nav.dark-nav {
  background: rgba(7,16,30,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Pages with light/beige heroes: nav must be dark and visible immediately */
#nav.light-page {
  background: rgba(13,15,18,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* Logo más pequeño cuando el nav está fijo */
#nav.stuck .nav-logo img,
#nav.stuck .nav-logo svg { height: 52px; }
/* Iconos sociales en estado stuck */
#nav.stuck .nav-social { border-right-color: rgba(255,255,255,0.12); }
/* Hamburguesa en estado stuck — siempre blanca (nav oscuro) */
#nav.stuck .ham span { background: #fff; }
/* Botones de acción en nav oscuro */
#nav.stuck .btn-outline { color: #fff; border-color: rgba(255,255,255,0.24); }
#nav.stuck .btn-ghost   { color: #fff; border-color: rgba(255,255,255,0.24); }

/* ── Dark-nav variant (product pages) ── */
#nav.dark-nav.stuck {
  background: rgba(10, 24, 40, 0.70);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(255,255,255,0.07);
  color: #fff;
}
#nav.dark-nav.stuck .nl             { color: rgba(255,255,255,0.70); }
#nav.dark-nav.stuck .nl:hover,
#nav.dark-nav.stuck .nl.act         { color: #fff; background: rgba(255,255,255,0.09); }
#nav.dark-nav.stuck .btn-outline    { color: #fff; border-color: rgba(255,255,255,0.24); }
#nav.dark-nav.stuck .btn-ghost      { color: #fff; border-color: rgba(255,255,255,0.24); }
#nav.dark-nav.stuck .ham span       { background: #fff; }
#nav.dark-nav.stuck .nav-soc-link   { color: rgba(255,255,255,0.60); }
#nav.dark-nav.stuck .nav-soc-link:hover { color: #fff; background: rgba(255,255,255,0.09); }

/* ── Hamburger ── */
/* ── Hamburger button (aligned to the right on mobile) ── */
.ham {
  display: none; flex-direction: column; gap: 5px;
  padding: 8px 4px; background: none; border: none; margin: 0 0 0 8px;
  cursor: pointer; z-index: 901; flex-shrink: 0;
}
.ham span { display: block; width: 22px; height: 2px; border-radius: 2px; transition: all 0.22s; background: #fff; }
/* nav is always dark (glass) — ham stays white in all states */
#nav.stuck .ham span { background: #fff; }
.ham.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.ham.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ham.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── Mobile nav (Drawer from right) ── */
#mob-nav {
  position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; z-index: 899;
  background: var(--soft); overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  padding: 20px clamp(16px,4vw,32px) 48px;
}
#mob-nav.open { transform: translateX(0); }
.mob-link {
  display: block; font-size: 20px; font-weight: 700; color: var(--ink);
  padding: 14px 0; border-bottom: 1px solid rgba(13,15,18,0.07);
  letter-spacing: -0.025em;
}
.mob-products {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px;
}
.mob-prod-item {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 13px; border-radius: 12px; background: #fff;
  border: 1px solid var(--border); color: var(--ink);
  font-size: 12px; font-weight: 600;
}
.mob-prod-item.act-item { background: rgba(75,174,214,0.08); border-color: rgba(75,174,214,0.2); color: var(--blue); }

/* ══════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
  padding: 10px 20px; border-radius: 10px; border: none;
  white-space: nowrap; line-height: 1;
  transition: all var(--dur) var(--ease);
}
.btn-sm  { font-size: 13px; padding: 8px 16px; border-radius: 9px; }
.btn-lg  { font-size: 15px; padding: 14px 28px; border-radius: 12px; }
.btn-xl  { font-size: 15px; padding: 16px 34px; border-radius: 13px; }

.btn-ink   { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #1c2027; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,0.22); }
.btn-blue  { background: var(--blue); color: #fff; }
.btn-blue:hover { background: #38a0cb; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(75,174,214,0.36); }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid rgba(13,15,18,0.16); }
.btn-outline:hover { background: rgba(13,15,18,0.04); }
.btn-ghost { background: rgba(255,255,255,0.10); color: #fff; border: 1px solid rgba(255,255,255,0.18); }
.btn-ghost:hover { background: rgba(255,255,255,0.17); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ══════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════ */
.wrap   { max-width: 1160px; margin: 0 auto; padding: 0 clamp(16px,4vw,48px); }
.sec    { padding: 88px 0; }
.sec-sm { padding: 60px 0; }
.sec-xs { padding: 44px 0; }
.g2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.f-center  { display: flex; align-items: center; justify-content: center; }
.f-between { display: flex; align-items: center; justify-content: space-between; }

/* ══════════════════════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════════════════════ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 100px; margin-bottom: 14px;
}
.ey-blue   { background: rgba(75,174,214,0.1);  color: var(--blue); }
.ey-red    { background: rgba(217,79,42,0.1);   color: var(--red); }
.ey-green  { background: rgba(90,158,60,0.1);   color: var(--green); }
.ey-yellow { background: rgba(240,183,64,0.12); color: #8a5e00; }
.ey-gray   { background: rgba(13,15,18,0.08);   color: rgba(13,15,18,0.68); }
.ey-white  { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.82); }

h1.disp {
  font-size: clamp(32px,4.5vw,60px);
  font-weight: 800; letter-spacing: -0.045em; line-height: 0.96; color: var(--ink);
}
h2.sec-h {
  font-size: clamp(24px,3.2vw,38px);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.06;
}
h3.card-h { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.sub {
  font-size: clamp(15px,1.3vw,17px);
  color: rgba(13,15,18,0.50); line-height: 1.7; max-width: 520px;
}
.sub-wide { max-width: 640px; }
.text-center { text-align: center; }

/* Dark background text — always legible */
.on-dark { color: rgba(255,255,255,0.82) !important; }
.on-dark-muted { color: rgba(255,255,255,0.52) !important; }

/* ══════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════ */
.card {
  background: #fff; border-radius: 18px; border: 1px solid var(--border);
  padding: 28px; transition: transform 0.26s var(--ease), box-shadow 0.26s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card-sm { padding: 22px; border-radius: 14px; }
.card-lg { padding: 40px; border-radius: 22px; }
.icon-badge {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  margin-bottom: 18px; flex-shrink: 0;
}
.icon-badge-sm { width: 34px; height: 34px; border-radius: 9px; font-size: 15px; margin-bottom: 13px; }
.ib-blue   { background: rgba(75,174,214,0.1); }
.ib-red    { background: rgba(217,79,42,0.1); }
.ib-green  { background: rgba(90,158,60,0.1); }
.ib-yellow { background: rgba(240,183,64,0.12); }
.ib-gray   { background: rgba(13,15,18,0.06); }
.prod-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px;
}

/* ══════════════════════════════════════════════════════════
   MARQUEE / TICKER
   ══════════════════════════════════════════════════════════ */
.mq-wrap { overflow: hidden; position: relative; }
.mq-fade-l {
  position: absolute; left: 0; top: 0; bottom: 0; width: 80px;
  background: linear-gradient(to right, var(--gray), transparent);
  z-index: 2; pointer-events: none;
}
.mq-fade-r {
  position: absolute; right: 0; top: 0; bottom: 0; width: 80px;
  background: linear-gradient(to left, var(--gray), transparent);
  z-index: 2; pointer-events: none;
}
.mq-fade-l.on-white { background: linear-gradient(to right, #fff, transparent); }
.mq-fade-r.on-white { background: linear-gradient(to left, #fff, transparent); }
.mq-fade-l.on-dark { background: linear-gradient(to right, #07101e, transparent); }
.mq-fade-r.on-dark { background: linear-gradient(to left, #0a1828, transparent); }
.mq-track {
  display: flex; gap: 10px; width: max-content;
  animation: ticker 38s linear infinite;
  will-change: transform;
}
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mq-wrap:hover .mq-track { animation-play-state: paused; }
.chip {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 16px; background: #fff; border-radius: 100px;
  border: 1px solid rgba(13,15,18,0.07); white-space: nowrap; flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.chip span { font-size: 13px; font-weight: 600; color: rgba(13,15,18,0.60); }

/* ══════════════════════════════════════════════════════════
   REVEAL ANIMATIONS
   ══════════════════════════════════════════════════════════ */
.rv { opacity: 0; transform: translateY(40px) scale(0.97); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; }
.rv.in { opacity: 1; transform: translateY(0) scale(1); }
.rv.rv-right { transform: translateX(80px) scale(0.97); }
.rv.rv-right.in { transform: translateX(0) scale(1); }

.rvs > * { opacity: 0; transform: translateY(30px) scale(0.97); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.rvs.in > * { opacity: 1; transform: none; }
.rvs.in > *:nth-child(1) { transition-delay: 0s }
.rvs.in > *:nth-child(2) { transition-delay: .1s }
.rvs.in > *:nth-child(3) { transition-delay: .2s }
.rvs.in > *:nth-child(4) { transition-delay: .3s }
.rvs.in > *:nth-child(5) { transition-delay: .4s }
.rvs.in > *:nth-child(6) { transition-delay: .5s }
.rvs.in > *:nth-child(7) { transition-delay: .6s }
.rvs.in > *:nth-child(8) { transition-delay: .7s }

/* ══════════════════════════════════════════════════════════
   STAT BLOCK
   ══════════════════════════════════════════════════════════ */
.stat-num   { font-size: clamp(26px,3vw,42px); font-weight: 800; letter-spacing: -0.06em; line-height: 1; }
.stat-label,
.stat-lbl   { font-size: 13px; color: rgba(13,15,18,0.48); font-weight: 500; margin-top: 6px; line-height: 1.4; }

/* ══════════════════════════════════════════════════════════
   HERO ATOMS
   ══════════════════════════════════════════════════════════ */
.orb {
  position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 0;
  animation: orb-float 13s ease-in-out infinite;
  will-change: transform;
}
@keyframes orb-float { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-22px) scale(1.03)} }
.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 14px 5px 7px; border-radius: 100px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
  font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.65);
  letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 22px;
}
.hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.6)} }

/* ══════════════════════════════════════════════════════════
   PAGE HERO (interior pages) — dark blue gradient
   ══════════════════════════════════════════════════════════ */
.page-hero {
  background: var(--dark-bg); position: relative; overflow: hidden;
  padding: 120px clamp(16px,4vw,48px) 80px;
}
.page-hero .ph-grid { max-width: 1160px; margin: 0 auto; position: relative; z-index: 2; }
.page-hero-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* ══════════════════════════════════════════════════════════
   DIVIDER
   ══════════════════════════════════════════════════════════ */
.section-sep { height: 1px; background: var(--border); }

/* ══════════════════════════════════════════════════════════
   CTA BANNER — dark blue gradient
   ══════════════════════════════════════════════════════════ */
.cta-banner {
  background: var(--dark-bg); border-radius: 24px;
  padding: clamp(40px,5vw,68px); position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(75,174,214,0.18) 0%, transparent 70%);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   QUOTE — dark blue gradient
   ══════════════════════════════════════════════════════════ */
.quote-card {
  background: var(--dark-bg);
  border-radius: 22px; padding: clamp(36px,5vw,68px);
  position: relative; overflow: hidden;
}
.quote-mark {
  position: absolute; top: -20px; left: 32px;
  font-size: 180px; font-weight: 800; line-height: 1;
  color: rgba(75,174,214,0.09); pointer-events: none; user-select: none;
}
.quote-text {
  font-size: clamp(17px,2.2vw,26px); font-weight: 600;
  color: rgba(255,255,255,0.85); line-height: 1.44;
  letter-spacing: -0.02em; max-width: 720px; position: relative; z-index: 1;
}
.quote-text em { color: var(--blue); font-style: normal; }

/* ══════════════════════════════════════════════════════════
   TEAM AVATAR
   ══════════════════════════════════════════════════════════ */
.team-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--soft);
  border: 1.5px solid var(--border);
  margin: 0 auto 18px;
  overflow: hidden;
}
.team-avatar svg { width: 32px; height: 32px; }
.team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
footer {
  background: var(--dark-bg);
  color: rgba(255,255,255,0.65);
  position: relative; overflow: hidden;
}
/* Accent line top */
footer::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(75,174,214,0.5) 35%, rgba(75,174,214,0.5) 65%, transparent 100%);
  pointer-events: none;
}
/* Ambient glow */
footer::before {
  content: ''; position: absolute; top: -80px; right: -60px;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(75,174,214,0.06) 0%, transparent 65%);
  pointer-events: none;
}

.ft-inner { max-width: 1160px; margin: 0 auto; padding: 0 clamp(16px,4vw,48px); position: relative; z-index: 1; }

/* ── Main grid ── */
.ft-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
  padding: 52px 0 44px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ft-grid > * { flex: 0 0 auto; }

/* ── Column headers ── */
.ft-col-h {
  font-size: 11px; font-weight: 700;
  color: #fff;
  letter-spacing: 0.10em; text-transform: uppercase;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(75,174,214,0.25);
}

/* ── Link lists ── */
.ft-links { display: flex; flex-direction: column; gap: 11px; list-style: none; }

/* Products: 2 columns, fills column-by-column so items are grouped naturally */
.ft-links-2col {
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  column-gap: 28px;
  row-gap: 11px;
}

.ft-links a {
  font-size: 13.5px; color: rgba(255,255,255,0.52);
  transition: color 0.18s;
  white-space: nowrap;
}
.ft-links a:hover { color: #fff; }

/* ── Logo column ── */
.ft-desc {
  font-size: 13px; line-height: 1.75;
  color: rgba(255,255,255,0.45);
  margin: 14px 0 18px;
  max-width: 195px;
}
.ft-contact-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: rgba(255,255,255,0.45);
  margin-bottom: 5px;
}
.ft-contact-item svg { flex-shrink: 0; opacity: 0.55; }
.ft-contact-item a { color: inherit; transition: color 0.18s; }
.ft-contact-item a:hover { color: rgba(255,255,255,0.85); }

/* ── Social icons ── */
.soc { display: flex; gap: 6px; margin-top: 18px; }
.soc a {
  width: 33px; height: 33px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.42);
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.soc a svg { width: 14px; height: 14px; display: block; fill: currentColor; }
.soc a:hover { border-color: rgba(75,174,214,0.6); color: #4BAED6; background: rgba(75,174,214,0.07); }

/* ── Bottom bar ── */
.ft-bottom {
  display: flex; align-items: center; justify-content: center;
  padding: 20px 0;
  font-size: 11.5px; color: rgba(255,255,255,0.28);
  letter-spacing: 0.02em; text-align: center;
  flex-wrap: wrap; gap: 6px;
}
.ft-bottom a { color: inherit; transition: color 0.18s; }
.ft-bottom a:hover { color: rgba(255,255,255,0.65); }
.ft-copy    { color: rgba(255,255,255,0.28); white-space: nowrap; }
.ft-sep     { color: rgba(255,255,255,0.18); margin: 0 12px; }
.ft-tagline { color: rgba(255,255,255,0.20); white-space: nowrap; }

/* ══════════════════════════════════════════════════════════
   OVERFLOW — Evita scroll horizontal causado por animaciones
   reveal (.rv-right, .rv-left) y el drawer #mob-nav
   ══════════════════════════════════════════════════════════ */
html, body { overflow-x: hidden; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .nav-center { gap: 0; }
  .nl { padding: 5px 10px; font-size: 13px; }
}
@media (max-width: 900px) {
  .nav-center { display: none; }
  .nav-end .nav-social { display: none; }
  .ham { display: flex; }
  .ft-grid { gap: 40px; justify-content: flex-start; }
  .ft-desc { max-width: 100%; }
  .g3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  :root { --nav-h: 60px; }

  /* ── Secciones ── */
  .g3, .g2 { grid-template-columns: 1fr; }
  .g4 { grid-template-columns: 1fr 1fr; }
  .sec { padding: 64px 0; }
  .sec-sm { padding: 44px 0; }
  h2.sec-h { letter-spacing: -0.03em; }

  /* ── CTA banner ── */
  .cta-banner { border-radius: 16px; padding: clamp(28px,6vw,40px); }

  /* ── Page hero interior ── */
  .page-hero { padding: 100px clamp(16px,4vw,32px) 60px; }

  /* ═══════════════════════════════════════════════════════
     FOOTER MOBILE — grid de 2 columnas, diseño limpio
     ══════════════════════════════════════════════════════ */

  /* Convierte flex en grid de 2 cols iguales */
  .ft-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px 20px;
    padding: 44px 0 36px;
  }

  /* Logo + desc: ocupa las 2 columnas */
  .ft-grid > :first-child {
    grid-column: 1 / -1;
  }

  /* Desc más ancha en mobile */
  .ft-desc { max-width: 100%; font-size: 13.5px; }

  /* Social más espaciada */
  .soc { gap: 8px; margin-top: 20px; }

  /* Producto lista: 1 columna limpia (no grid anidado) */
  .ft-links-2col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-template-columns: unset;
    grid-auto-flow: unset;
  }

  /* Links más legibles en mobile */
  .ft-links a { font-size: 14px; }
  .ft-col-h { font-size: 10.5px; margin-bottom: 14px; }

  /* Bottom bar: apilado vertical */
  .ft-bottom {
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 18px 0 env(safe-area-inset-bottom, 0px);
    font-size: 10.5px;
    line-height: 1.6;
    text-align: center;
  }
  /* Ocultar el separador pipe en mobile */
  .ft-sep { display: none; }
  /* Permitir que el copyright y tagline se envuelvan */
  .ft-copy, .ft-tagline { white-space: normal; }
}
@media (max-width: 480px) {
  /* Stack footer to 1 column on very small phones */
  .ft-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
@media (max-width: 400px) {
  .mob-products { grid-template-columns: 1fr; }
  .btn-xl { padding: 14px 24px; font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════
   UTILIDADES
   Clases de ayuda rápida para casos puntuales.
   ══════════════════════════════════════════════════════════ */

/* Accesibilidad: oculta visualmente pero disponible para lectores de pantalla */
.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;
}

/* Márgenes */
.mt-4  { margin-top:    16px; }
.mt-6  { margin-top:    24px; }
.mt-8  { margin-top:    32px; }
.mt-10 { margin-top:    40px; }
.mb-4  { margin-bottom: 16px; }
.mb-6  { margin-bottom: 24px; }

/* Gaps */
.gap-2 { gap:  8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }

/* Flexbox */
.flex         { display: flex; }
.flex-wrap    { flex-wrap: wrap; }
.items-center { align-items: center; }

/* ══════════════════════════════════════════════════════════
   ACCESIBILIDAD — Focus visible
   Teclado-navegable sin quitar el outline por defecto.
   ══════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ══════════════════════════════════════════════════════════
   MOVIMIENTO REDUCIDO — Respeta preferencias del sistema
   Desactiva animaciones para usuarios sensibles al movimiento.
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Keep marquee visible but static */
  .mq-track { animation: none; transform: translateX(0); }
  /* Keep orbs visible but static */
  .orb { animation: none; }
  /* Reveal elements immediately — no scroll fade-in */
  .rv, .rvs > * { opacity: 1 !important; transform: none !important; }
}

/* ══════════════════════════════════════════════════════════
   MEGA MENU TABS — tabbed layout (Sectores)
   Usado en páginas interiores (egob.html, nosotros.html…)
   y en páginas de sector. El grid-template cambia en móvil.
   ══════════════════════════════════════════════════════════ */
.mm-tab-layout { display:grid; grid-template-columns:240px 1fr; gap:0; min-height:340px;
  border-radius:18px; overflow:hidden; }
.mm-tabs-col {
  padding:16px 10px 14px 12px;
  background:#fff;
  border-right:1px solid rgba(13,15,18,0.07);
  display:flex; flex-direction:column;
}
.mm-tab-list { display:flex; flex-direction:column; gap:1px; margin-top:6px; }
.mm-tab {
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px;
  text-decoration:none; background:none; text-align:left; font-size:12px;
  font-weight:500; color:rgba(13,15,18,0.62); font-family:inherit;
  transition:background 0.12s,color 0.12s; width:100%; line-height:1.3; cursor:pointer;
}
.mm-tab:hover { background:rgba(13,15,18,0.04); color:var(--ink); }
.mm-tab.on   { background:rgba(75,174,214,0.09); color:var(--blue); font-weight:600; }
.mm-tab-ico  { font-size:14px; flex-shrink:0; width:20px; text-align:center; }
.mm-tab-chev { width:8px; height:8px; flex-shrink:0; margin-left:auto; opacity:0; transition:opacity 0.12s; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.mm-tab:hover .mm-tab-chev { opacity:0.35; }
.mm-tab.on .mm-tab-chev   { opacity:1; }
.mm-panels-col {
  padding:22px 24px 20px;
  background:#f4f6f8;
  position:relative;
  overflow:hidden;
}
/* Subtle top accent line */
.mm-panels-col::before {
  content:""; position:absolute; top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--blue) 0%, rgba(75,174,214,0.3) 100%);
  pointer-events:none;
}
.mm-panels-col > * { position:relative; z-index:1; }
.mm-panel { display:none; flex-direction:column; gap:12px; }
.mm-panel.on { display:flex; animation:mmIn 0.14s ease; }
@keyframes mmIn { from{opacity:0;transform:translateX(5px)} to{opacity:1;transform:translateX(0)} }
.mm-panel-hd-info {
  display:flex; align-items:flex-start; gap:12px; padding:13px 15px;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(13,15,18,0.08);
  box-shadow:0 1px 4px rgba(13,15,18,0.05);
}
.mm-panel-ico  { font-size:26px; flex-shrink:0; line-height:1; margin-top:1px; }
.mm-panel-title{ font-size:13.5px; font-weight:700; letter-spacing:-0.02em; color:var(--ink); line-height:1.25; }
.mm-panel-sub  { font-size:11.5px; color:rgba(13,15,18,0.52); margin-top:3px; line-height:1.4; }
.mm-panel-desc { font-size:12.5px; color:rgba(13,15,18,0.62); line-height:1.65; margin:0; padding:0 1px; }
.mm-chips-lbl  { font-size:10px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:rgba(13,15,18,0.38); padding:0 1px; }
.mm-sol-list   { font-size:12.5px; color:rgba(13,15,18,0.65); line-height:1.7; padding:0 1px; margin:0; }
.mm-logo-row   { display:flex; flex-wrap:wrap; gap:7px; padding:0 1px; }
.mm-logo-chip  {
  display:inline-flex; align-items:center; gap:8px; padding:8px 13px;
  background:#fff; border:1px solid rgba(13,15,18,0.1); border-radius:10px;
  pointer-events:none;
  box-shadow:0 1px 3px rgba(13,15,18,0.06);
}
.mm-logo-chip img     { width:26px; height:26px; object-fit:contain; }
.mm-logo-chip-txt     { font-size:11px; font-weight:800; color:var(--blue); line-height:1; }
.mm-logo-chip > span  { font-size:13px; font-weight:600; color:var(--ink); }
/* Dark panel override removed — now both panels are light */

.mm-footer-link {
  display:inline-flex; align-items:center; gap:6px; margin-top:auto;
  padding:9px 14px; border-radius:10px;
  font-size:12px; font-weight:600; color:var(--blue); text-decoration:none;
  background:rgba(75,174,214,0.1); border:1px solid rgba(75,174,214,0.22);
  transition:background 0.15s, color 0.15s;
}
.mm-footer-link:hover { background:rgba(75,174,214,0.18); color:#0d1e36; }
.mm-footer-link svg { flex-shrink:0; stroke:currentColor; }

/* Hide panel column on narrow screens */
@media (max-width: 960px) {
  .mm-tab-layout { grid-template-columns: 1fr; }
  .mm-panels-col { display: none; }
}
/* Responsive dropdown: prevent overflow on medium screens */
@media (max-width: 1100px) {
  .nav-dd[style*="min-width:900px"],
  .nav-dd[style*="min-width: 900px"] {
    min-width: min(900px, calc(100vw - 32px)) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(0) !important;
  }
  .nav-item.open .nav-dd[style*="min-width:900px"],
  .nav-item.open .nav-dd[style*="min-width: 900px"] {
    transform: translateX(-50%) translateY(0) !important;
  }
}
@media (max-width: 860px) {
  /* Hide desktop nav center */
  .nav-center { display: none !important; }

  /* Nav bar layout: logo left, demo + ham right */
  #nav {
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
  }

  /* Logo stays left */
  .nav-logo {
    flex: 0 0 auto;
    margin: 0;
    display: flex;
    align-items: center;
  }
  .nav-logo img { height: 32px !important; width: auto !important; }

  /* Right side: demo button + hamburger */
  .nav-end {
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    gap: 10px;
  }
  .nav-end .nav-social { display: none !important; }
  .nav-end .btn-blue {
    display: inline-flex !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    border-radius: 100px !important;
    white-space: nowrap;
  }

  /* Hamburger — always rightmost */
  .ham {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    padding: 7px 4px;
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 2px;
    flex-shrink: 0;
  }
}

/* ══════════════════════════════════════════════════════════
   MOBILE NAV ACCORDION
   Acordeón de 3 secciones (Sectores / Soluciones / Capacidades)
   dentro del drawer #mob-nav.
   ══════════════════════════════════════════════════════════ */
.mob-section { border-bottom:1px solid rgba(13,15,18,0.07); }
.mob-section-hd {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; background:none; border:none;
  font-size:20px; font-weight:700; color:var(--ink);
  padding:14px 0; letter-spacing:-0.025em;
  cursor:pointer; text-align:left;
  transition:color 0.12s;
}
.mob-section-hd:hover { color:var(--blue); }
.mob-chev {
  width:20px; height:20px; flex-shrink:0;
  stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform 0.22s var(--ease);
}
.mob-section-hd.open .mob-chev { transform:rotate(180deg); }
.mob-section-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s cubic-bezier(0.22,1,0.36,1);
}
.mob-section-inner { padding:8px 0 14px; }

/* Sector links */
.mob-sector-item {
  display:flex; align-items:center; gap:10px;
  font-size:15px; font-weight:600; color:var(--ink);
  padding:10px 0; border-bottom:1px solid rgba(13,15,18,0.05);
  text-decoration:none; letter-spacing:-0.01em;
  transition:color 0.12s;
}
.mob-sector-item:last-child { border-bottom:none; }
.mob-sector-item:hover { color:var(--blue); }
.mob-emo { font-size:18px; width:28px; text-align:center; flex-shrink:0; line-height:1; }

/* Solutions grid */
.mob-sol-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding:8px 0 14px;
}
.mob-sol-item {
  display:flex; align-items:center; gap:8px;
  padding:11px 13px; border-radius:12px;
  background:#fff; border:1px solid var(--border);
  color:var(--ink); font-size:12px; font-weight:600;
  text-decoration:none; transition:background 0.12s,border-color 0.12s;
}
.mob-sol-item:hover { background:rgba(75,174,214,0.06); border-color:rgba(75,174,214,0.22); color:var(--blue); }
.mob-sol-item img { width:22px; height:22px; object-fit:contain; flex-shrink:0; }
.mob-sol-txt-badge {
  font-size:9px; font-weight:800; color:#4BAED6;
  background:rgba(75,174,214,0.1); border:1px solid rgba(75,174,214,0.18);
  padding:2px 6px; border-radius:5px; letter-spacing:0.04em; flex-shrink:0;
}

/* Capabilities list */
.mob-cap-list { padding:8px 0 14px; display:flex; flex-direction:column; gap:10px; }
.mob-cap-item {
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 14px; border-radius:12px;
  background:#fff; border:1px solid var(--border);
}
.mob-cap-title { font-size:14px; font-weight:700; color:var(--ink); letter-spacing:-0.01em; }
.mob-cap-desc  { font-size:12px; color:rgba(13,15,18,0.48); line-height:1.5; margin-top:3px; }

/* ══════════════════════════════════════════════════════════
   MOB-NAV — Elementos del menú espejo del desktop
   ══════════════════════════════════════════════════════════ */

/* Group label (Sectores / Soluciones) */
.mob-dd-group-title {
  font-size:10px; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:rgba(13,15,18,0.4);
  padding:12px 0 5px;
}

/* Sector row inside accordion */
.mob-dd-sector {
  display:flex; align-items:center; gap:11px;
  font-size:14px; font-weight:600; color:var(--ink);
  padding:9px 0; border-bottom:1px solid rgba(13,15,18,0.05);
  text-decoration:none; letter-spacing:-0.01em;
  transition:color 0.12s;
}
.mob-dd-sector:last-of-type { border-bottom:none; }
.mob-dd-sector:hover { color:var(--blue); }
.mob-dd-sector .mob-emo { font-size:17px; width:26px; text-align:center; flex-shrink:0; }

/* Divider between sectors and solutions */
.mob-dd-divider {
  height:1px; background:rgba(13,15,18,0.08);
  margin:8px 0;
}

/* "Ver todas las soluciones" link */
.mob-dd-all {
  display:block; text-align:center;
  font-size:13px; font-weight:600; color:var(--blue);
  padding:10px 0 4px; text-decoration:none;
  letter-spacing:-0.01em;
  transition:opacity 0.12s;
}
.mob-dd-all:hover { opacity:0.7; }

/* CTA button at bottom of mob-nav */
.mob-cta {
  display:block; text-align:center;
  margin:18px 0 4px;
  padding:13px 24px !important;
  font-size:14px !important;
  border-radius:100px !important;
  width:100%; box-sizing:border-box;
}