/* ═══════════════════════════════════════════════════════════════════════════
   Global System Solutions — Sistema visual v2.1
   Aesthetic: "Refined Corporate Tech · Deep Ocean"
   v2.1 fixes:
     • Fondo más visible: radiales fuertes + orbes flotantes en toda la página
     • Tech grid de circuito visible + scanline animado
     • Marquee de clientes funcional (flex items + mask de bordes)
     • Login pills tipo banking ("Login Clientes" / "Login Empresa")
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg:           #050a1a;
  --bg-deep:      #030616;
  --bg-elev:      #0a1227;
  --bg-elev-2:    #0f1a35;
  --surface:      rgba(15, 26, 53, 0.6);
  --surface-hi:   rgba(20, 34, 68, 0.75);
  --border:        rgba(124, 168, 255, 0.10);
  --border-strong: rgba(124, 168, 255, 0.22);
  --border-glow:   rgba(34, 211, 238, 0.35);
  --text:         #e8edf7;
  --text-dim:     #aab4cc;
  --text-mute:    #6b7896;
  --accent:       #22d3ee;
  --accent-2:     #3b82f6;
  --accent-3:     #818cf8;
  --success:      #34d399;
  --warning:      #fbbf24;
  --danger:       #f87171;
  --grad-text:    linear-gradient(135deg, #22d3ee 0%, #3b82f6 60%, #818cf8 100%);
  --grad-cta:     linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
  --grad-glass:   linear-gradient(135deg, rgba(34,211,238,0.08) 0%, rgba(59,130,246,0.04) 100%);
  --f-display:    'Sora', system-ui, sans-serif;
  --f-body:       'Geist', system-ui, sans-serif;
  --f-mono:       'JetBrains Mono', ui-monospace, monospace;
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 100px;
  --shadow-sm:    0 4px 20px rgba(0, 0, 0, 0.25);
  --shadow:       0 10px 40px rgba(0, 0, 0, 0.4);
  --shadow-lg:    0 24px 60px rgba(0, 0, 0, 0.5);
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* ═══ FONDO TÉCNICO ════════════════════════════════════════════════════ */

body::before {
  content: '';
  position: fixed;
  inset: -10%;
  background:
    /* Halo cenital — luz desde arriba */
    radial-gradient(ellipse 90% 40% at 50% -5%, rgba(34, 211, 238, 0.18) 0%, transparent 60%),
    /* Radiales principales */
    radial-gradient(ellipse 70% 50% at 15% 12%, rgba(59, 130, 246, 0.36) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 85% 22%, rgba(34, 211, 238, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 18% 72%, rgba(129, 140, 248, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 65% 45% at 82% 86%, rgba(34, 211, 238, 0.18) 0%, transparent 55%),
    /* Base con más matices */
    linear-gradient(180deg, #081a3f 0%, #050d22 25%, #050a1a 55%, #0a1738 80%, #050a1a 100%);
  z-index: -4;
  pointer-events: none;
  animation: bg-drift 36s ease-in-out infinite alternate;
}
@keyframes bg-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-1%, .8%, 0) scale(1.03); }
  100% { transform: translate3d(1%, -.8%, 0) scale(1.015); }
}

/* Vignette sutil — agrega profundidad en los bordes */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    /* Grid fino tech */
    linear-gradient(rgba(34, 211, 238, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.055) 1px, transparent 1px),
    /* Grid amplio para sensación de profundidad */
    linear-gradient(rgba(124, 168, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 168, 255, 0.035) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 240px 240px, 240px 240px;
  z-index: -3;
  pointer-events: none;
  mask-image:
    radial-gradient(ellipse 120% 90% at 50% 40%, black 30%, transparent 95%),
    linear-gradient(180deg, black, black);
  mask-composite: intersect;
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 40%, black 30%, transparent 95%);
}

.bg-fx {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
.bg-fx::before, .bg-fx::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  will-change: transform;
}
.bg-fx::before {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.50) 0%, rgba(34, 211, 238, 0.15) 40%, transparent 70%);
  top: 12%; left: -220px;
  animation: orb-1 42s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.bg-fx::after {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.45) 0%, rgba(59, 130, 246, 0.14) 40%, transparent 70%);
  top: 58%; right: -240px;
  animation: orb-2 48s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
@keyframes orb-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(40vw, -4vh) scale(1.05); }
  50%      { transform: translate(55vw, 18vh) scale(1.1); }
  75%      { transform: translate(25vw, 30vh) scale(0.95); }
}
@keyframes orb-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(-35vw, -10vh) scale(0.95); }
  50%      { transform: translate(-45vw, 12vh) scale(1.08); }
  75%      { transform: translate(-15vw, 22vh) scale(1.02); }
}

.bg-scan {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(34, 211, 238, 0.5) 35%, rgba(129, 140, 248, 0.4) 65%, transparent 95%);
  z-index: -1;
  pointer-events: none;
  animation: scan 14s linear infinite;
  opacity: .35;
}
@keyframes scan {
  0%   { transform: translateY(-2px); opacity: 0; }
  8%   { opacity: .35; }
  92%  { opacity: .35; }
  100% { transform: translateY(100vh); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body::before, .bg-fx::before, .bg-fx::after, .bg-scan { animation: none; }
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: transparent; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--bg-deep); }
.skip {
  position: absolute; top: -40px; left: 0;
  background: var(--accent); color: var(--bg-deep);
  padding: .5rem 1rem; z-index: 100;
}
.skip:focus { top: 0; }

/* ═══ TIPOGRAFÍA ═══════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
h1 { font-size: clamp(2.5rem, 5.5vw, 4.5rem); font-weight: 700; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.85rem, 3.5vw, 2.75rem); letter-spacing: -0.025em; }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -0.015em; }
h4 { font-size: 1rem; font-weight: 600; }
p { color: var(--text-dim); }
em { font-style: normal; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
code, .mono { font-family: var(--f-mono); font-size: 0.85em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--f-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  padding: .4rem .85rem;
  border-radius: 100px;
  background: rgba(34, 211, 238, 0.06);
  border: 1px solid rgba(34, 211, 238, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.05) inset;
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.75); }
}

.container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.section { padding-block: clamp(4.5rem, 9vw, 7.5rem); position: relative; }
.section-head { max-width: 760px; margin-bottom: clamp(2.25rem, 4vw, 3.75rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: 1.25rem; }
.section-head .lead { margin-top: 1.1rem; font-size: 1.05rem; color: var(--text-dim); max-width: 60ch; line-height: 1.65; }
.section-head.center .lead { margin-inline: auto; }

/* ═══ BOTONES ══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .9rem 1.5rem;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: -0.005em;
  border-radius: var(--r);
  cursor: pointer;
  transition: transform .35s var(--ease-out), box-shadow .4s var(--ease-out), background .3s var(--ease-out), border-color .3s var(--ease-out), color .3s var(--ease-out);
  text-align: center;
  white-space: nowrap;
  position: relative;
  border: 1px solid transparent;
  overflow: hidden;
}
.btn svg { width: 18px; height: 18px; transition: transform .35s var(--ease-out); position: relative; z-index: 1; }
.btn-primary {
  background: var(--grad-cta);
  color: var(--bg-deep);
  font-weight: 600;
  box-shadow: 0 8px 28px rgba(34, 211, 238, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transition: left .7s var(--ease-out);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(34, 211, 238, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-primary:hover::before { left: 100%; }
.btn-primary:hover svg { transform: translateX(4px); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.025);
  color: var(--text);
  border-color: var(--border-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.btn-ghost:hover {
  background: rgba(34, 211, 238, 0.05);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(34, 211, 238, 0.15);
}
.btn-outline { background: transparent; border-color: var(--accent); color: var(--accent); }
.btn-outline:hover { background: rgba(34, 211, 238, 0.1); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(34, 211, 238, 0.2); }
.btn-sm { padding: .6rem 1.05rem; font-size: .85rem; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ═══ HEADER ═══════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 10, 26, 0.65);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 32px rgba(0, 0, 0, 0.2);
  transition: background .35s var(--ease-out), border-color .35s var(--ease-out);
}
.site-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.18) 50%, transparent);
  pointer-events: none;
}
.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: .75rem;
  min-height: 84px;
}
/* Distribución 3 zonas: brand | nav centrada | cta — solo en desktop */
@media (min-width: 861px) {
  .nav > nav { flex: 1; display: flex; justify-content: center; }
  .brand     { flex-shrink: 0; }
  .nav-cta   { flex-shrink: 0; }
}
.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.brand img {
  display: block;
  height: 60px;
  width: auto;
  max-width: none;
  aspect-ratio: 2261 / 1310;
  filter: drop-shadow(0 0 16px rgba(34, 211, 238, 0.35)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
  transition: filter .4s var(--ease-out), transform .4s var(--ease-out);
}
.brand:hover img {
  filter: drop-shadow(0 0 24px rgba(34, 211, 238, 0.55)) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.4));
  transform: scale(1.03);
}

.nav-links { display: flex; align-items: center; gap: .6rem; list-style: none; }
.nav-links a, .nav-links button {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem .9rem;
  font-size: .92rem;
  font-weight: 450;
  color: var(--text-dim);
  border-radius: var(--r-sm);
  transition: color .2s var(--ease-out), background .2s var(--ease-out);
  position: relative;
}
.nav-links a:hover, .nav-links button:hover { color: var(--text); background: rgba(255, 255, 255, 0.035); }
.nav-links a.is-active { color: var(--accent); }
.nav-links a.is-active::before {
  content: ''; position: absolute; left: .85rem; right: .85rem; bottom: 6px; height: 1px;
  background: var(--accent);
}

.has-dropdown { position: relative; }
.dropdown-toggle .chev { width: 14px; height: 14px; transition: transform .3s; }
.dropdown-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 320px;
  list-style: none;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  padding: .5rem;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all .25s var(--ease-out);
  z-index: 100;
}
.dropdown-toggle[aria-expanded="true"] + .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown li a {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .7rem .85rem;
  border-radius: var(--r-sm);
  font-size: .95rem;
  font-weight: 500;
  color: var(--text);
}
.dropdown li a small { font-size: .78rem; font-weight: 400; color: var(--text-mute); }
.dropdown li a:hover { background: var(--surface-hi); color: var(--accent); }

/* ═══ LOGIN PILLS (banking style) ═══════════════════════════════════════ */
.nav-cta { display: flex; align-items: center; gap: .55rem; margin-left: auto; }
.nav-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .6rem 1.4rem;
  font-family: var(--f-body);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background .25s var(--ease-out), color .25s var(--ease-out), box-shadow .35s var(--ease-out), transform .35s var(--ease-out), border-color .25s var(--ease-out);
  cursor: pointer;
  /* v2.31.9: mismo styling que .primary — unifica todos los botones del header */
  background: var(--grad-cta);
  color: var(--bg-deep);
  border: 1.5px solid transparent;
  box-shadow: 0 4px 16px rgba(34, 211, 238, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  position: relative;
}
.nav-login:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(34, 211, 238, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* .outline mantiene compatibilidad pero ya no se usa en HTML actual */
.nav-login.outline {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
.nav-login.outline:hover {
  background: rgba(34, 211, 238, 0.12);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(34, 211, 238, 0.28);
}
.nav-login.primary {
  background: var(--grad-cta);
  color: var(--bg-deep);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(34, 211, 238, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.nav-login.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(34, 211, 238, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.nav-login:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.menu-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
}
.menu-toggle svg { width: 22px; height: 22px; }
.menu-toggle:hover { border-color: var(--accent); color: var(--accent); }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(360px, 90vw);
  background: var(--bg-elev);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid var(--border-strong);
  padding: 5rem 1.5rem 2rem;
  z-index: 49;
  transform: translateX(100%);
  transition: transform .35s var(--ease-out);
  overflow-y: auto;
}
.drawer.open { transform: translateX(0); }
.drawer ul { list-style: none; }
.drawer > ul > li > a, .drawer-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: .85rem 0;
  font-size: 1.05rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.drawer-toggle .chev { width: 16px; height: 16px; transition: transform .3s; }
.drawer-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.drawer-sub { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease-out); }
.drawer-toggle[aria-expanded="true"] + .drawer-sub { max-height: 250px; }
.drawer-sub li a {
  display: block;
  padding: .65rem 0 .65rem 1rem;
  font-size: .95rem;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
.drawer-sub li a:hover { color: var(--accent); }
.drawer-cta { display: flex; flex-direction: column; gap: .65rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }

main { display: block; position: relative; z-index: 1; }

/* ═══ HERO ═════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  padding-block: clamp(5rem, 9vw, 8rem) clamp(4.5rem, 8vw, 7rem);
  overflow: hidden;
}
/* Halo cenital específico del hero — sugiere infraestructura iluminada */
.hero::before {
  content: '';
  position: absolute;
  top: -20%; left: 50%;
  width: 1100px; height: 700px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(34, 211, 238, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 80% 40% at 50% 70%, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 920px;
  margin-inline: auto;
}
.hero-inner h1 {
  margin-top: 1.75rem;
  text-shadow: 0 0 60px rgba(34, 211, 238, 0.12);
}
.hero-inner h1 .accent {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 24px rgba(34, 211, 238, 0.25));
}
.hero-inner .sub {
  margin-top: 1.75rem;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--text-dim);
  max-width: 62ch;
  margin-inline: auto;
  line-height: 1.65;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .85rem;
  margin-top: 2.75rem;
}
.hero-trust {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .65rem;
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}
.hero-trust span {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem .9rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color .3s var(--ease-out), color .3s var(--ease-out);
}
.hero-trust span:hover { border-color: var(--border-strong); color: var(--text-dim); }
.hero-trust span::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.page-hero {
  position: relative;
  padding-block: clamp(3.5rem, 6vw, 5.5rem) clamp(2rem, 4vw, 3rem);
  overflow: hidden;
  text-align: center;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 { margin-top: 1.5rem; }
.page-hero .sub { margin-top: 1.5rem; font-size: 1.1rem; color: var(--text-dim); max-width: 65ch; margin-inline: auto; }

/* ═══ TARJETAS Y GRIDS ═══════════════════════════════════════════════════ */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 2rem;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  overflow: hidden;
  transition: transform .5s var(--ease-out), border-color .5s var(--ease-out), box-shadow .5s var(--ease-out);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--border-glow);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 20px 50px rgba(0, 0, 0, 0.35), 0 0 60px rgba(34, 211, 238, 0.12);
}

.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.service-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 2.25rem 2rem;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  overflow: hidden;
  transition: transform .5s var(--ease-out), border-color .5s var(--ease-out), box-shadow .5s var(--ease-out);
  display: flex; flex-direction: column;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.service-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 20%, var(--accent) 50%, transparent 80%);
  opacity: 0; transition: opacity .4s var(--ease-out);
}
.service-card::after {
  content: ''; position: absolute;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.08), transparent 70%);
  top: -140px; right: -100px;
  filter: blur(40px);
  opacity: 0; transition: opacity .5s var(--ease-out);
  pointer-events: none;
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-glow);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 24px 60px rgba(0, 0, 0, 0.4), 0 0 70px rgba(34, 211, 238, 0.14);
}
.service-card:hover::before { opacity: 1; }
.service-card:hover::after { opacity: 1; }
.service-card .ico {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  background: var(--grad-glass);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  color: var(--accent);
  margin-bottom: 1.5rem;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.08) inset, 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.service-card:hover .ico {
  border-color: var(--border-glow);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.2) inset, 0 8px 24px rgba(34, 211, 238, 0.18);
}
.service-card .ico svg { width: 24px; height: 24px; }
.service-card h3 { margin-bottom: .5rem; }
.service-card .desc { color: var(--text-dim); margin-bottom: 1.25rem; font-size: .95rem; }
.service-card .checks { list-style: none; margin-bottom: 1.5rem; flex: 1; }
.service-card .checks li { display: flex; align-items: flex-start; gap: .55rem; font-size: .9rem; color: var(--text-dim); padding: .35rem 0; }
.service-card .checks li::before {
  content: ''; flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px;
  background: var(--accent);
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}
.service-card .more {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .92rem; font-weight: 500;
  color: var(--accent);
  margin-top: auto; align-self: flex-start;
}
.service-card .more svg { width: 16px; height: 16px; transition: transform .3s; }
.service-card:hover .more svg { transform: translateX(4px); }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.feature {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all .35s var(--ease-out);
}
.feature:hover {
  border-color: var(--border-glow);
  background: var(--surface-hi);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.feature .ico {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.12);
  border-radius: var(--r-sm);
  color: var(--accent);
  margin-bottom: 1rem;
  transition: border-color .35s var(--ease-out), background .35s var(--ease-out);
}
.feature:hover .ico { border-color: rgba(34, 211, 238, 0.25); background: rgba(34, 211, 238, 0.12); }
.feature .ico svg { width: 20px; height: 20px; }
.feature h3 { font-size: 1rem; margin-bottom: .4rem; }
.feature p { font-size: .88rem; color: var(--text-dim); }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; align-items: stretch; }
.plan {
  position: relative;
  padding: 2.25rem 2rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  display: flex; flex-direction: column;
  transition: transform .45s var(--ease-out), border-color .45s var(--ease-out), box-shadow .45s var(--ease-out);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.plan:hover {
  transform: translateY(-3px);
  border-color: var(--border-glow);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 22px 52px rgba(0, 0, 0, 0.4), 0 0 60px rgba(34, 211, 238, 0.1);
}
.plan.featured {
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.10) 0%, var(--surface) 60%);
  border-color: var(--accent);
  box-shadow: 0 0 50px rgba(34, 211, 238, 0.22), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
.plan.featured::before {
  content: 'Más elegido';
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--grad-cta);
  color: var(--bg-deep);
  font-family: var(--f-mono); font-size: .68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: .35rem .9rem;
  border-radius: 100px;
  box-shadow: 0 6px 18px rgba(34, 211, 238, 0.4);
}
.plan-name { font-family: var(--f-display); font-size: 1.3rem; font-weight: 600; }
.plan-tag { font-size: .85rem; color: var(--text-mute); margin-top: .25rem; }
.plan-price {
  display: flex; align-items: baseline; gap: .35rem;
  font-family: var(--f-display); font-size: 2rem; font-weight: 600;
  margin: 1.5rem 0;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.plan-price .currency { font-size: 1rem; color: var(--text-mute); }
.plan-price .period { font-size: .8rem; font-weight: 400; color: var(--text-mute); margin-left: auto; }
.plan-specs { list-style: none; margin-bottom: 2rem; flex: 1; }
.plan-specs li {
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem 0;
  font-size: .9rem;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
.plan-specs li:last-child { border-bottom: none; }
.plan-specs li strong { color: var(--text); font-weight: 600; }
.plan-specs li::before {
  content: ''; flex-shrink: 0; width: 14px; height: 14px;
  background: var(--accent);
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}

.process { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.step {
  position: relative;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  backdrop-filter: blur(10px);
}
.step h3 { margin-bottom: .5rem; }
.step .when {
  display: inline-block;
  margin-top: 1rem;
  padding: .25rem .65rem;
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  font-family: var(--f-mono); font-size: .72rem;
  color: var(--accent);
  letter-spacing: 0.08em;
}

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
.stat {
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(10px);
  text-align: center;
}
.stat .v {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 5vw, 3.25rem);
  font-weight: 700;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: -0.03em;
  line-height: 1;
}
.stat .k { font-family: var(--f-mono); font-size: .8rem; color: var(--text-mute); letter-spacing: 0.1em; text-transform: uppercase; margin-top: .85rem; }
.stat p { font-size: .9rem; color: var(--text-dim); margin-top: .75rem; }

.faq { display: grid; gap: .75rem; max-width: 820px; margin-inline: auto; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  backdrop-filter: blur(10px);
  transition: border-color .25s, background .25s;
  overflow: hidden;
}
.faq details:hover, .faq details[open] { border-color: var(--border-strong); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--f-mono); font-size: 1.5rem; color: var(--accent); transition: transform .3s; }
.faq details[open] summary::after { content: '−'; }
.faq details > div { padding: 0 1.5rem 1.5rem; color: var(--text-dim); font-size: .95rem; }

/* ═══ CTA + FORMS ══════════════════════════════════════════════════════ */
.cta-wrap {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem;
  align-items: start;
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  position: relative; overflow: hidden;
}
.cta-wrap::before {
  content: ''; position: absolute;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.15), transparent 70%);
  top: -150px; right: -100px;
  filter: blur(60px);
  pointer-events: none;
}
.cta-info p { margin-top: 1rem; }
.cta-direct { display: flex; flex-direction: column; gap: .5rem; margin-top: 2rem; }
.cta-direct a {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .65rem .85rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: .9rem;
  color: var(--text-dim);
  transition: all .25s var(--ease-out);
}
.cta-direct a svg { width: 16px; height: 16px; color: var(--accent); }
.cta-direct a:hover { border-color: var(--border-glow); color: var(--text); transform: translateX(4px); }

.form { display: grid; gap: 1rem; position: relative; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-family: var(--f-mono); font-size: .72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); }
.field input, .field textarea, .field select {
  padding: .85rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: .95rem;
  transition: border-color .25s, background .25s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-mute); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); background: rgba(34, 211, 238, 0.04); }
.field textarea { resize: vertical; min-height: 110px; font-family: var(--f-body); }

/* Dropdown del select: las <option> heredan el tema del SO (fondo blanco) si no
   se les fija color y fondo sólidos. Esto las deja legibles en dark mode. */
.field select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2322d3ee' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.field select option,
.field select optgroup {
  background-color: #0b1428;
  color: var(--text);
}
.field select option:checked,
.field select option:hover {
  background-color: #16233f;
  color: var(--accent);
}

/* ═══ SPECS, PILLS, TIMELINE, VALUES, LOCATION ═══════════════════════════ */
.specs { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: 2rem; backdrop-filter: blur(10px); }
.specs dl { display: grid; gap: 0; }
.specs dl > div {
  display: grid; grid-template-columns: minmax(180px, 1fr) 2.5fr;
  gap: 1.5rem; padding: 1.1rem 0;
  border-bottom: 1px solid var(--border); align-items: start;
}
.specs dl > div:last-child { border-bottom: none; }
.specs dt { font-family: var(--f-mono); font-size: .78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.specs dd { color: var(--text-dim); font-size: .95rem; }
.specs dd code { background: rgba(34, 211, 238, 0.1); padding: .15rem .4rem; border-radius: 4px; color: var(--accent); }

.brand-pills { display: flex; flex-wrap: wrap; gap: .65rem; }
.pill { font-family: var(--f-mono); font-size: .82rem; padding: .55rem 1rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 100px; color: var(--text-dim); backdrop-filter: blur(10px); }

.timeline { display: grid; gap: 1rem; }
.tl-item {
  display: grid; grid-template-columns: 100px 1fr; gap: 1.5rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  backdrop-filter: blur(10px);
}
.tl-year { font-family: var(--f-display); font-size: 1.5rem; font-weight: 600; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tl-item h3 { margin-bottom: .35rem; }
.tl-item p { font-size: .92rem; color: var(--text-dim); }

.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.value {
  padding: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  backdrop-filter: blur(10px);
  transition: all .35s var(--ease-out);
}
.value:hover { border-color: var(--border-glow); transform: translateY(-3px); }
.value .ico {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--grad-glass);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--accent);
  margin-bottom: 1rem;
}
.value .ico svg { width: 22px; height: 22px; }

.location {
  display: grid; grid-template-columns: auto 1fr; gap: 2rem;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  backdrop-filter: blur(10px);
  align-items: start;
}
.location .ico-big {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  background: var(--grad-glass);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  color: var(--accent);
  flex-shrink: 0;
}
.location .ico-big svg { width: 32px; height: 32px; }
.location h3 { margin-bottom: .5rem; }
.location p { color: var(--text-dim); margin-bottom: 1.5rem; }
.location .meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.location .meta > div { font-size: .9rem; color: var(--text-dim); }
.location .meta span {
  display: block;
  font-family: var(--f-mono); font-size: .7rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .3rem;
}

/* ═══ KB / CHANNELS / SLA / CALLOUT / PROSE ═══════════════════════════ */
.kb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.kb-card {
  padding: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  backdrop-filter: blur(10px);
  transition: all .35s var(--ease-out);
  display: flex; flex-direction: column;
}
.kb-card:hover { border-color: var(--border-glow); transform: translateY(-3px); }
.kb-card .ico {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: rgba(34, 211, 238, 0.08);
  border-radius: var(--r-sm);
  color: var(--accent);
  margin-bottom: 1rem;
}
.kb-card .ico svg { width: 20px; height: 20px; }
.kb-card h3 { margin-bottom: .5rem; font-size: 1.05rem; }
.kb-card p { font-size: .9rem; color: var(--text-dim); flex: 1; margin-bottom: 1.25rem; }
.kb-card .more { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--accent); }
.kb-card .more svg { width: 14px; height: 14px; transition: transform .3s; }
.kb-card:hover .more svg { transform: translateX(3px); }

.channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.channel {
  padding: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  backdrop-filter: blur(10px);
  transition: all .35s var(--ease-out);
  display: flex; flex-direction: column;
}
.channel:hover { border-color: var(--border-glow); transform: translateY(-3px); }
.channel .ico {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--grad-glass);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  color: var(--accent);
  margin-bottom: 1.25rem;
}
.channel .ico svg { width: 22px; height: 22px; }
.channel h3 { margin-bottom: .5rem; }
.channel p { font-size: .9rem; color: var(--text-dim); margin-bottom: 1rem; flex: 1; }
.channel .target { display: inline-block; font-family: var(--f-mono); font-size: .7rem; letter-spacing: 0.08em; color: var(--text-mute); margin-bottom: 1rem; }
.channel .cta { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; font-weight: 500; color: var(--accent); }
.channel .cta svg { width: 14px; height: 14px; transition: transform .3s; }
.channel:hover .cta svg { transform: translateX(3px); }

.sla-table {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  backdrop-filter: blur(10px);
}
.sla-row {
  display: grid; grid-template-columns: 150px 1fr 180px;
  gap: 1.5rem;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  align-items: center;
  font-size: .92rem;
}
.sla-row:last-child { border-bottom: none; }
.sla-row.head { font-family: var(--f-mono); font-size: .72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); background: rgba(255, 255, 255, 0.02); }
.sla-sev {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--f-mono); font-size: .78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: .35rem .65rem;
  border-radius: 100px;
  border: 1px solid;
}
.sla-sev .dot { width: 6px; height: 6px; border-radius: 50%; }
.sla-sev.critical { color: var(--danger); border-color: rgba(248, 113, 113, 0.3); }
.sla-sev.critical .dot { background: var(--danger); box-shadow: 0 0 6px var(--danger); }
.sla-sev.high     { color: #fb923c; border-color: rgba(251, 146, 60, 0.3); }
.sla-sev.high .dot { background: #fb923c; box-shadow: 0 0 6px #fb923c; }
.sla-sev.medium   { color: var(--warning); border-color: rgba(251, 191, 36, 0.3); }
.sla-sev.medium .dot { background: var(--warning); box-shadow: 0 0 6px var(--warning); }
.sla-sev.low      { color: var(--success); border-color: rgba(52, 211, 153, 0.3); }
.sla-sev.low .dot { background: var(--success); box-shadow: 0 0 6px var(--success); }

.callout {
  display: flex; gap: 1rem; align-items: center;
  padding: 1.25rem 1.5rem;
  background: var(--grad-glass);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  backdrop-filter: blur(10px);
  font-size: .92rem;
}
.callout .ico { color: var(--accent); flex-shrink: 0; }
.callout .ico svg { width: 22px; height: 22px; }

.prose { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; max-width: 1080px; margin-inline: auto; }
.prose p { margin-bottom: 1rem; line-height: 1.7; }
.prose strong { color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════════
   MARQUEE — funcional (estructura nueva con flex items)
   ═══════════════════════════════════════════════════════════════════════ */
.clients-strip {
  padding: 3rem 0 3.25rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.015), transparent);
  overflow: hidden;
  position: relative;
}
.clients-strip::before,
.clients-strip::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.12) 50%, transparent);
  pointer-events: none;
}
.clients-strip::before { top: 0; }
.clients-strip::after  { bottom: 0; }

.clients-label {
  text-align: center;
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 2rem;
}
.clients-row {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%);
}
.clients-track {
  display: flex;
  width: max-content;
  animation: marquee 55s linear infinite;
  will-change: transform;
}
.clients-track:hover { animation-play-state: paused; }
.clients-item {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 0 2.25rem;
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap;
  letter-spacing: -0.01em;
  position: relative;
  transition: color .3s var(--ease-out);
}
.clients-item:hover { color: var(--text); }
.clients-item::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg, transparent, var(--border-strong) 30%, var(--border-strong) 70%, transparent);
}
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .clients-track { animation: none; }
}

/* ═══ FOOTER ════════════════════════════════════════════════════════════ */
.site-footer {
  margin-top: 4rem;
  padding-top: 4rem;
  background: linear-gradient(180deg, transparent 0%, rgba(3, 6, 22, 0.5) 100%);
  border-top: 1px solid var(--border);
}
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 3rem; }
.foot-col h4 { font-family: var(--f-mono); font-size: .72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.foot-col a { display: block; padding: .35rem 0; font-size: .9rem; color: var(--text-dim); transition: color .2s, transform .2s; }
.foot-col a:hover { color: var(--accent); transform: translateX(3px); }
.foot-status { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; font-family: var(--f-mono); font-size: .8rem; color: var(--success); }
.foot-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); animation: pulse-dot 2s ease-in-out infinite; }
.foot-social { display: flex; gap: .5rem; margin-top: 1.5rem; }
.foot-social a {
  width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-dim);
}
.foot-social a:hover { color: var(--accent); border-color: var(--accent); background: rgba(34, 211, 238, 0.06); transform: translateY(-2px); }
.foot-social svg { width: 18px; height: 18px; }
.foot-hours { font-size: .85rem; color: var(--text-mute); margin-top: 1rem; font-family: var(--f-mono); letter-spacing: 0.04em; }
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
  font-size: .8rem; color: var(--text-mute);
}
.foot-bottom .mono { font-family: var(--f-mono); letter-spacing: 0.08em; }

/* ═══ LOGIN PAGES ═══════════════════════════════════════════════════════ */
.login-wrap { min-height: calc(100vh - 80px); display: grid; place-items: center; padding: 3rem 1.25rem; position: relative; }
.login-card {
  width: 100%; max-width: 460px;
  padding: 2.5rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.login-card::before {
  content: ''; position: absolute;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.15), transparent 70%);
  top: -150px; right: -100px;
  filter: blur(60px);
  pointer-events: none;
}
.login-card > * { position: relative; z-index: 1; }
.login-icon {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  background: var(--grad-glass);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  color: var(--accent);
  margin-bottom: 1.5rem;
}
.login-icon svg { width: 28px; height: 28px; }
.login-card h1 { font-size: 1.8rem; margin-bottom: .5rem; }
.login-card .sub { color: var(--text-dim); margin-bottom: 2rem; font-size: .95rem; }
.login-card .form { gap: 1.25rem; }
.login-card .btn-primary { width: 100%; justify-content: center; padding: 1rem; }
.login-card .alt { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: .88rem; color: var(--text-dim); text-align: center; }
.login-card .alt a { color: var(--accent); font-weight: 500; }
.login-card .alt a:hover { text-decoration: underline; }
.login-options { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; }
.login-options label { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-dim); cursor: pointer; }
.login-options label input { accent-color: var(--accent); }
.login-options a { color: var(--accent); }
.login-notice {
  margin-top: 1.5rem;
  padding: .85rem 1rem;
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: var(--r-sm);
  font-size: .82rem;
  color: var(--warning);
  line-height: 1.5;
}

/* ═══ KB / TICKETS ══════════════════════════════════════════════════════ */
.kb-search { position: relative; max-width: 620px; margin: 0 auto 3rem; }
.kb-search input {
  width: 100%;
  padding: 1.1rem 1.4rem 1.1rem 3.2rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  color: var(--text);
  font-size: 1rem;
  backdrop-filter: blur(20px);
}
.kb-search input:focus { outline: none; border-color: var(--accent); }
.kb-search svg { position: absolute; top: 50%; left: 1.2rem; transform: translateY(-50%); width: 20px; height: 20px; color: var(--text-mute); }

.kb-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 4rem; }
.kb-cat {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  backdrop-filter: blur(10px);
  text-align: center;
  transition: all .35s var(--ease-out);
}
.kb-cat:hover { border-color: var(--border-glow); transform: translateY(-3px); background: var(--surface-hi); }
.kb-cat .ico {
  width: 48px; height: 48px;
  margin: 0 auto 1rem;
  display: grid; place-items: center;
  background: var(--grad-glass);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--accent);
}
.kb-cat .ico svg { width: 22px; height: 22px; }
.kb-cat h3 { margin-bottom: .35rem; font-size: 1.05rem; }
.kb-cat p { font-size: .85rem; color: var(--text-dim); }
.kb-cat .count {
  display: inline-block;
  margin-top: .85rem;
  padding: .2rem .6rem;
  background: rgba(34, 211, 238, 0.08);
  border-radius: 100px;
  font-family: var(--f-mono);
  font-size: .72rem;
  color: var(--accent);
}

.kb-articles { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); backdrop-filter: blur(10px); overflow: hidden; }
.kb-articles .item {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem;
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--border);
  transition: background .2s;
}
.kb-articles .item:last-child { border-bottom: none; }
.kb-articles .item:hover { background: rgba(34, 211, 238, 0.04); }
.kb-articles .item h4 { font-size: .98rem; font-weight: 500; margin-bottom: .25rem; }
.kb-articles .item p { font-size: .85rem; color: var(--text-dim); }
.kb-articles .item .meta { font-family: var(--f-mono); font-size: .72rem; color: var(--text-mute); letter-spacing: 0.05em; }

.tickets-table { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); backdrop-filter: blur(10px); overflow: hidden; }
.tickets-row {
  display: grid; grid-template-columns: 100px 1fr 120px 130px 100px;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  align-items: center;
  font-size: .9rem;
}
.tickets-row.head { font-family: var(--f-mono); font-size: .72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); background: rgba(255, 255, 255, 0.02); }
.tickets-row .tk-id { font-family: var(--f-mono); color: var(--accent); }
.badge {
  display: inline-block;
  padding: .25rem .6rem;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 100px;
  border: 1px solid;
}
.badge.open     { color: var(--accent); border-color: rgba(34, 211, 238, 0.3); background: rgba(34, 211, 238, 0.08); }
.badge.progress { color: var(--warning); border-color: rgba(251, 191, 36, 0.3); background: rgba(251, 191, 36, 0.08); }
.badge.closed   { color: var(--text-mute); border-color: var(--border-strong); background: rgba(255,255,255,0.02); }

/* ═══ WHATSAPP FAB ══════════════════════════════════════════════════════ */
.wa-fab {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.5rem);
  bottom: clamp(1rem, 2.5vw, 1.5rem);
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff;
  z-index: 45;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 0 28px rgba(37, 211, 102, 0.35);
  transition: transform .3s var(--ease-out), box-shadow .35s var(--ease-out), opacity .25s;
  animation: wa-pulse 2.8s ease-in-out infinite;
}
.wa-fab::before {
  content: ''; position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(37, 211, 102, 0.4);
  opacity: 0; transform: scale(.92);
  transition: opacity .3s, transform .35s;
  pointer-events: none;
}
.wa-fab:hover, .wa-fab:focus-visible {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.08) inset, 0 0 40px rgba(37, 211, 102, 0.6);
}
.wa-fab:hover::before, .wa-fab:focus-visible::before { opacity: 1; transform: scale(1.1); }
.wa-fab svg { width: 30px; height: 30px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)); }
.wa-fab .wa-label {
  position: absolute;
  right: calc(100% + .85rem); top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: .55rem .9rem;
  border-radius: var(--r);
  font-size: .85rem; font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--shadow);
  opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .25s;
}
.wa-fab .wa-label::after { content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: var(--border-strong); }
.wa-fab:hover .wa-label, .wa-fab:focus-visible .wa-label { opacity: 1; transform: translateY(-50%) translateX(0); }
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 0 0 rgba(37,211,102,.45), 0 0 28px rgba(37,211,102,.35); }
  50%      { box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 0 12px rgba(37,211,102,0), 0 0 28px rgba(37,211,102,.35); }
}
@media (prefers-reduced-motion: reduce) { .wa-fab { animation: none; } }
body.drawer-open .wa-fab { opacity: 0; pointer-events: none; transform: scale(.8); }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ═══ RESPONSIVE ════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .cta-wrap { grid-template-columns: 1fr; gap: 2rem; }
  .prose { grid-template-columns: 1fr; gap: 1rem; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .specs dl > div { grid-template-columns: 1fr; gap: .35rem; }
  .sla-row { grid-template-columns: 1fr; gap: .5rem; }
  .tickets-row { grid-template-columns: 1fr; gap: .35rem; }
  .tickets-row.head { display: none; }
  /* Orbes más chicos en tablet — evita exceso de luz */
  .bg-fx::before { width: 380px; height: 380px; filter: blur(80px); }
  .bg-fx::after  { width: 440px; height: 440px; filter: blur(85px); }
  .hero { padding-block: clamp(4rem, 8vw, 6rem) clamp(3.5rem, 7vw, 5rem); }
  .clients-item { font-size: 1.02rem; padding: 0 1.75rem; }
}
@media (max-width: 760px) {
  .nav-links, .nav-cta { display: none; }
  .menu-toggle { display: flex; }
  .form-row { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 2rem; }
  .location { grid-template-columns: 1fr; }
  .tl-item { grid-template-columns: 1fr; }
  .brand img { height: 48px; }
  .nav { min-height: 68px; padding-block: .65rem; }
  /* Hero refinado en mobile */
  .hero { padding-block: 3.5rem 3rem; }
  .hero::before { width: 100%; height: 500px; filter: blur(60px); }
  .hero-inner h1 { margin-top: 1.25rem; }
  .hero-inner .sub { margin-top: 1.25rem; font-size: 1rem; }
  .hero-actions { margin-top: 2rem; gap: .65rem; }
  .hero-trust { gap: .5rem; margin-top: 3rem; padding-top: 2rem; }
  .hero-trust span { padding: .35rem .75rem; font-size: .68rem; }
  /* Marquee más compacto en mobile */
  .clients-strip { padding: 2.25rem 0 2.5rem; }
  .clients-label { margin-bottom: 1.5rem; }
  .clients-item { font-size: .95rem; padding: 0 1.5rem; }
  .clients-row {
    mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%);
  }
  /* Cards más compactos */
  .service-card { padding: 1.75rem 1.5rem; }
  .card { padding: 1.5rem; }
  /* Secciones con menos padding */
  .section { padding-block: clamp(3rem, 8vw, 5rem); }
}
@media (max-width: 560px) {
  .wa-fab { width: 54px; height: 54px; right: 1rem; bottom: 1rem; }
  .wa-fab svg { width: 26px; height: 26px; }
  .wa-fab .wa-label { display: none; }
  .login-card { padding: 1.75rem; }
  /* Tipografía hero más compacta */
  .hero { padding-block: 3rem 2.5rem; }
  /* Orbes aún más chicos en móvil */
  .bg-fx::before { width: 300px; height: 300px; }
  .bg-fx::after  { width: 340px; height: 340px; }
  /* Brand pills más compactos */
  .brand-pills { gap: .5rem; }
  .pill { font-size: .75rem; padding: .45rem .8rem; }
  /* Menos padding en containers */
  .container { padding-inline: 1.1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v2.5 — Pulido profesional final
   Microinteracciones, header scroll-aware, tipografía mobile, refinos
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Header con elevación dinámica al scroll ──────────────────────────── */
.site-header.is-scrolled {
  background: rgba(5, 10, 26, 0.85);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(34, 211, 238, 0.08) inset,
    0 10px 32px rgba(0, 0, 0, 0.35);
  border-bottom-color: rgba(124, 168, 255, 0.18);
}
.site-header.is-scrolled .nav { padding-block: .55rem; min-height: 76px; }
.site-header.is-scrolled .brand img { height: 46px; }

/* ── Reveal mejorado: easing más natural, distancia menor ─────────────── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ── Link microinteractions (underline animado en prose) ──────────────── */
.prose a, .faq details > div a, .callout a {
  position: relative;
  color: var(--accent);
  font-weight: 500;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .35s var(--ease-out), color .25s var(--ease-out);
  padding-bottom: 2px;
}
.prose a:hover, .faq details > div a:hover, .callout a:hover {
  background-size: 100% 1px;
  color: var(--accent);
}

/* ── Focus rings accesibles globales ──────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
details summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible, .nav-login:focus-visible { outline-offset: 3px; }

/* ── Field hover refinado ─────────────────────────────────────────────── */
.field input:hover:not(:focus),
.field textarea:hover:not(:focus),
.field select:hover:not(:focus) {
  border-color: rgba(124, 168, 255, 0.32);
  background: rgba(255, 255, 255, 0.04);
}

/* ── Submit button con estado disabled ────────────────────────────────── */
.btn:disabled,
button[type="submit"]:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none !important;
}
.btn:disabled::before { display: none; }

/* ── Eyebrow con peso visual mejorado ─────────────────────────────────── */
.eyebrow {
  user-select: none;
}

/* ── Stat values con tabular-nums para alineación ─────────────────────── */
.stat .v, .plan-price { font-variant-numeric: tabular-nums; }

/* ── FAQ: mejor padding interior y separator ──────────────────────────── */
.faq details > div {
  padding-top: .25rem;
  border-top: 1px solid var(--border);
  margin: 0 1.5rem 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 1.5rem;
  line-height: 1.65;
}
.faq details > div::before {
  content: '';
  display: block;
  height: 1rem;
}
.faq details summary { padding: 1.35rem 1.5rem; }

/* ── Service-card / Plan cards: hover lift uniforme ───────────────────── */
.card, .service-card, .plan, .feature, .kb-card, .channel, .step, .stat, .value, .tl-item, .kb-cat {
  will-change: transform;
}

/* ── Container padding más generoso en pantallas medianas ─────────────── */
@media (min-width: 561px) and (max-width: 980px) {
  .container { padding-inline: clamp(1.5rem, 4vw, 2.25rem); }
}

/* ── Mobile: tipografía y spacing finos ───────────────────────────────── */
@media (max-width: 560px) {
  h1 { font-size: clamp(2rem, 8.5vw, 2.75rem); letter-spacing: -.025em; }
  h2 { font-size: clamp(1.5rem, 6vw, 1.95rem); letter-spacing: -.02em; }
  h3 { font-size: 1.1rem; }
  .hero-inner .sub, .page-hero .sub { font-size: .98rem; line-height: 1.6; }
  .section-head .lead { font-size: .98rem; }
  .btn { padding: .8rem 1.25rem; font-size: .92rem; }
  .btn-sm { padding: .55rem .9rem; font-size: .82rem; }
  .nav-login { padding: .55rem 1.1rem; font-size: .82rem; }
  .nav { gap: .5rem; }
  .eyebrow { font-size: .65rem; padding: .3rem .65rem; letter-spacing: .13em; }
  /* Cards más respirados */
  .feature, .value, .step { padding: 1.25rem; }
  .channel { padding: 1.5rem 1.25rem; }
  /* FAQ summary touch-friendly */
  .faq summary { padding: 1.15rem 1.2rem; font-size: .98rem; }
  .faq details > div { margin: 0 1.2rem; padding-bottom: 1.25rem; }
  /* CTA grid */
  .cta-wrap { padding: 1.5rem 1.25rem; }
  /* Plans pricing más compactos */
  .plan { padding: 1.75rem 1.5rem; }
  .plan-price { font-size: 1.65rem; }
  .plan.featured::before { font-size: .62rem; padding: .28rem .7rem; }
  /* Specs en una columna */
  .specs { padding: 1.5rem 1.25rem; }
  .specs dl > div { grid-template-columns: 1fr; gap: .35rem; padding: .9rem 0; }
  /* Forms cómodos */
  .field input, .field textarea, .field select { padding: .9rem 1rem; font-size: 16px; }
  /* Hero trust más compacto */
  .hero-trust { margin-top: 2.5rem; padding-top: 1.75rem; gap: .45rem; }
  /* Footer en columnas controladas */
  .foot-grid { gap: 1.75rem; }
  .foot-col h4 { font-size: .68rem; }
  /* Brand pills más compactos */
  .pill { font-size: .7rem; padding: .4rem .75rem; }
}

/* ── Footer refinement (premium grid + separadores) ───────────────────── */
.site-footer {
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.18) 50%, transparent);
}
.foot-col h4 {
  position: relative;
  padding-bottom: .85rem;
  margin-bottom: 1rem;
}
.foot-col h4::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 24px; height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.foot-col a {
  position: relative;
  padding: .4rem 0;
  font-size: .9rem;
  color: var(--text-dim);
}
.foot-col a:hover {
  color: var(--accent);
  transform: translateX(4px);
}
.foot-status {
  padding: .5rem .85rem;
  background: rgba(52, 211, 153, 0.06);
  border: 1px solid rgba(52, 211, 153, 0.2);
  border-radius: 100px;
  font-size: .78rem;
  width: fit-content;
}
.foot-social a {
  position: relative;
  transition: all .3s var(--ease-out);
}
.foot-social a:hover {
  color: var(--bg-deep);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(34, 211, 238, 0.35);
}
.foot-bottom {
  font-size: .82rem;
}

/* ── Cookies/legal links footer style ─────────────────────────────────── */
.foot-bottom a {
  color: var(--text-mute);
  margin-left: 1rem;
  transition: color .2s;
}
.foot-bottom a:hover { color: var(--accent); }

/* ── Brand pills hover state ──────────────────────────────────────────── */
.pill {
  transition: border-color .25s var(--ease-out), color .25s var(--ease-out), background .25s var(--ease-out);
  cursor: default;
}
.pill:hover {
  border-color: var(--border-glow);
  color: var(--text);
  background: var(--surface-hi);
}

/* ── Tabla SLA: row hover sutil ───────────────────────────────────────── */
.sla-row:not(.head) {
  transition: background .25s var(--ease-out);
}
.sla-row:not(.head):hover {
  background: rgba(34, 211, 238, 0.025);
}

/* ── Tickets row hover ────────────────────────────────────────────────── */
.tickets-row:not(.head) {
  transition: background .25s var(--ease-out);
  cursor: pointer;
}
.tickets-row:not(.head):hover {
  background: rgba(34, 211, 238, 0.04);
}

/* ── Hero h1 fluid y mejor balance ────────────────────────────────────── */
.hero-inner h1 {
  text-wrap: balance;
}
.page-hero h1 {
  text-wrap: balance;
}
.section-head h2 {
  text-wrap: balance;
}

/* ── Mobile menu toggle más visible ───────────────────────────────────── */
@media (max-width: 760px) {
  .menu-toggle { transition: background .2s, color .2s, border-color .2s; }
  .menu-toggle[aria-expanded="true"] {
    background: rgba(34, 211, 238, 0.1);
    color: var(--accent);
    border-color: var(--accent);
  }
  /* Logo refinement: no over-shrink */
  .brand img { height: 42px; }
  /* Page hero on mobile más respirado */
  .page-hero { padding-block: 2.5rem 2rem; }
  /* CTA wrap form más cómodo */
  .cta-direct a { font-size: .85rem; padding: .75rem .9rem; }
  /* Hero buttons stack mejor */
  .hero-actions { flex-direction: column; align-items: stretch; max-width: 320px; margin-inline: auto; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ── Imágenes: render crisp para SVG/logos ────────────────────────────── */
.brand img, .login-icon svg, .feature .ico svg, .service-card .ico svg {
  image-rendering: -webkit-optimize-contrast;
}

/* ── Scrollbar discreto (webkit) ──────────────────────────────────────── */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb {
  background: rgba(124, 168, 255, 0.15);
  border-radius: 6px;
  border: 3px solid var(--bg-deep);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(34, 211, 238, 0.3);
}
::-webkit-scrollbar-corner { background: var(--bg-deep); }

/* ── Selection global más prolija ─────────────────────────────────────── */
::selection { background: rgba(34, 211, 238, 0.3); color: var(--text); }

/* ── Print styles (impresiones limpias de propuestas) ─────────────────── */
@media print {
  body::before, body::after, .bg-fx, .bg-scan, .wa-fab, .site-header { display: none !important; }
  body { background: white; color: black; }
  .container { max-width: 100%; padding: 0; }
  a { color: black; text-decoration: underline; }
  .card, .service-card, .plan, .feature {
    background: white;
    border: 1px solid #ccc;
    color: black;
    box-shadow: none;
  }
  h1, h2, h3, h4 { color: black; }
  p { color: #333; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v2.6 — Producción: form validation, a11y utilities, spinner
   ═══════════════════════════════════════════════════════════════════════ */

/* ── sr-only (visible solo para screen readers) ───────────────────────── */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Form: errores de validación ──────────────────────────────────────── */
.field-error {
  display: none;
  margin-top: .5rem;
  font-size: .82rem;
  color: var(--danger);
  font-family: var(--f-body);
  line-height: 1.4;
  padding-left: .25rem;
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: var(--danger);
  background: rgba(248, 113, 113, 0.04);
}
.field input[aria-invalid="true"]:focus,
.field textarea[aria-invalid="true"]:focus,
.field select[aria-invalid="true"]:focus {
  border-color: var(--danger);
  outline: 2px solid rgba(248, 113, 113, 0.3);
  outline-offset: 0;
}

/* ── Spinner para botones en loading ──────────────────────────────────── */
.btn-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: .35rem;
  animation: spin .7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation-duration: 2s; }
}

/* ── Login notice visual mejorado ─────────────────────────────────────── */
.login-notice {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
}
.login-notice::before {
  content: '!';
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 20px; height: 20px;
  background: var(--warning);
  color: var(--bg-deep);
  border-radius: 50%;
  font-weight: 700;
  font-size: .82rem;
  font-family: var(--f-mono);
}

/* ── Skip link visible en focus ───────────────────────────────────────── */
.skip:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1000;
  padding: .75rem 1.25rem;
  background: var(--accent);
  color: var(--bg-deep);
  font-weight: 600;
  border-radius: var(--r-sm);
  text-decoration: none;
  box-shadow: var(--shadow-lg);
}

/* ═══════════════════════════════════════════════════════════════════════
   v2.7 — Service Técnico: banner Banghó + brands grid premium
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Banner Banghó destacado (service oficial) ────────────────────────── */
.banner-bangho {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  padding: 3rem;
  background: linear-gradient(135deg,
    rgba(8, 16, 32, 0.85) 0%,
    rgba(5, 10, 26, 0.92) 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
}
.banner-bangho::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  z-index: 2;
}
.banner-bangho-mark { position: relative; z-index: 1; }
.banner-bangho-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 45%;
  background:
    radial-gradient(circle at 70% 50%, rgba(34, 211, 238, 0.18), transparent 60%),
    radial-gradient(circle at 90% 80%, rgba(59, 130, 246, 0.14), transparent 60%);
  z-index: 0;
}
.banner-bangho-bg::after {
  content: 'BANGHÓ';
  position: absolute;
  top: 50%; right: 2.5rem;
  transform: translateY(-50%);
  font-family: var(--f-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 800;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(34, 211, 238, 0.22);
  white-space: nowrap;
  user-select: none;
}

@media (max-width: 860px) {
  .banner-bangho { grid-template-columns: 1fr; padding: 2rem 1.5rem; gap: 1.5rem; }
  .banner-bangho-bg { display: none; }
}

/* ── Brands grid premium ──────────────────────────────────────────────── */
.brands-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}
.brand-card {
  position: relative;
  padding: 1.75rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: all .3s var(--ease-out);
  isolation: isolate;
  overflow: hidden;
}
.brand-card:hover {
  border-color: var(--border-glow);
  background: var(--surface-hi);
  transform: translateY(-2px);
}
.brand-card .brand-name {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: .35rem;
}
.brand-card .brand-tag {
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-mute);
  line-height: 1.4;
}
.brand-card .brand-desc {
  font-size: .85rem;
  color: var(--text-dim);
  margin-top: 1rem;
  line-height: 1.55;
}

/* ── Brand destacada (Banghó) ─────────────────────────────────────────── */
.brand-card.brand-featured {
  background: linear-gradient(135deg,
    rgba(34, 211, 238, 0.08) 0%,
    rgba(59, 130, 246, 0.04) 100%);
  border-color: var(--border-glow);
  grid-column: span 2;
}
.brand-card.brand-featured::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.brand-card.brand-featured .brand-name {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 1.85rem;
}
.brand-card.brand-featured .brand-tag {
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 860px) {
  .brands-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-card.brand-featured { grid-column: span 2; }
}
@media (max-width: 480px) {
  .brands-grid { grid-template-columns: 1fr; gap: .75rem; }
  .brand-card.brand-featured { grid-column: span 1; }
  .brand-card { padding: 1.4rem 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v2.10 — Noticias públicas + form notice + skeletons
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Grid de tarjetas ─────────────────────────────────────────────────── */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 960px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } }

/* ── Tarjeta ──────────────────────────────────────────────────────────── */
.news-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: all .3s var(--ease-out);
  position: relative;
}
.news-card:hover {
  border-color: var(--border-glow);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -8px rgba(34, 211, 238, 0.15);
}
.news-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.news-card-cover {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-hi);
  border-bottom: 1px solid var(--border);
}
.news-card-cover-placeholder {
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%),
    radial-gradient(circle at 30% 40%, rgba(34, 211, 238, 0.15), transparent 60%);
}
.news-card-body {
  padding: 1.25rem 1.4rem 1.4rem;
}
.news-card-body time {
  display: block;
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: .55rem;
}
.news-card-body h3 {
  font-size: 1.1rem;
  margin: 0 0 .6rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--text);
}
.news-card-body p {
  font-size: .88rem;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0 0 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card-more {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--accent);
}
.news-card-more svg { width: 14px; height: 14px; transition: transform .25s; }
.news-card:hover .news-card-more svg { transform: translateX(3px); }
.news-card-badge {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.3);
  padding: .2rem .55rem;
  border-radius: 100px;
  margin-bottom: .65rem;
}

/* Destacada: card más grande en la primera posición del grid en desktop */
@media (min-width: 961px) {
  .news-card-featured {
    grid-column: span 2;
    grid-row: span 1;
  }
  .news-card-featured .news-card-cover { aspect-ratio: 21 / 9; }
  .news-card-featured .news-card-body h3 { font-size: 1.4rem; }
}

/* ── Skeleton loader ──────────────────────────────────────────────────── */
.news-skeleton {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  height: 320px;
  position: relative;
  overflow: hidden;
}
.news-skeleton::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(124, 168, 255, 0.05) 50%, transparent 100%);
  animation: skeleton-shimmer 1.5s infinite;
}
@keyframes skeleton-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── Empty / error ────────────────────────────────────────────────────── */
.news-empty {
  grid-column: 1 / -1;
  padding: 3rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.news-empty strong { display: block; color: var(--text); font-weight: 500; margin-bottom: .35rem; }
.news-empty span { color: var(--text-mute); font-size: .9rem; }
.news-empty-error { border-color: rgba(248, 113, 113, 0.3); }
.news-empty-error strong { color: var(--danger); }

/* ── Paginación ───────────────────────────────────────────────────────── */
.news-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.news-pagination .pag-btn {
  display: inline-flex;
  align-items: center;
  padding: .65rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  text-decoration: none;
  font-size: .88rem;
  transition: all .25s var(--ease-out);
}
.news-pagination .pag-btn:hover { border-color: var(--accent); color: var(--accent); }
.news-pagination .pag-info {
  font-family: var(--f-mono);
  font-size: .78rem;
  color: var(--text-mute);
  letter-spacing: .05em;
}

/* ── Detalle de noticia ───────────────────────────────────────────────── */
.news-detail {
  max-width: 760px;
  margin: 0 auto;
}
.news-detail-head { margin-bottom: 2rem; }
.news-detail-meta {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--f-mono);
  font-size: .78rem;
  color: var(--text-mute);
  letter-spacing: .05em;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.news-detail-meta a { color: var(--accent); text-decoration: none; }
.news-detail-meta a:hover { text-decoration: underline; }
.news-detail-meta-sep { opacity: .5; }
.news-detail-badge {
  color: var(--accent);
  background: rgba(34, 211, 238, 0.08);
  padding: .15rem .55rem;
  border-radius: 100px;
  border: 1px solid rgba(34, 211, 238, 0.25);
  text-transform: uppercase;
  font-size: .65rem;
}
.news-detail h1 {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  letter-spacing: -.025em;
  line-height: 1.15;
  margin: 0 0 1rem;
}
.news-detail-excerpt {
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
}
.news-detail-cover {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border-radius: var(--r-lg);
  margin: 0 0 2rem;
  border: 1px solid var(--border);
}
.news-detail-body {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text-dim);
}
.news-detail-body p { margin: 0 0 1.25rem; }
.news-detail-body p:last-child { margin-bottom: 0; }
.news-detail-foot {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.news-detail-loading { padding: 4rem 1rem; text-align: center; color: var(--text-mute); }

/* ── Form notice (contacto) ───────────────────────────────────────────── */
.form-notice {
  padding: .85rem 1.1rem;
  border-radius: var(--r-sm);
  font-size: .9rem;
  border: 1px solid;
  margin: 1rem 0;
}
.form-notice-success {
  background: rgba(52, 211, 153, 0.08);
  border-color: rgba(52, 211, 153, 0.35);
  color: var(--success);
}
.form-notice-error {
  background: rgba(248, 113, 113, 0.06);
  border-color: rgba(248, 113, 113, 0.3);
  color: var(--danger);
}

/* v2.11.1 — fade-in propio de las news cards (sin depender del IntersectionObserver) */
.news-grid .news-card {
  animation: news-card-in .45s var(--ease-out) both;
}
@keyframes news-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .news-grid .news-card { animation: none; }
}

/* ═══ v2.24.1 — Tarjetas de estado de infraestructura (online/offline/crítico) ═══ */
.infra-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.istatus-card {
  position: relative;
  background: var(--surface, rgba(15,26,53,.6));
  border: 1px solid var(--border, rgba(120,160,220,.16));
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.istatus-card:hover { transform: translateY(-2px); }
.istatus-card::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--st-color, #64748b);
}
/* Estados con glow */
.istatus-card.is-online  { --st-color: #34d399; box-shadow: 0 0 0 1px rgba(52,211,153,.18), 0 0 18px rgba(52,211,153,.08); }
.istatus-card.is-pending { --st-color: #7ca8ff; box-shadow: 0 0 0 1px rgba(124,168,255,.18); }
.istatus-card.is-warning { --st-color: #fbbf24; box-shadow: 0 0 0 1px rgba(251,191,36,.2), 0 0 18px rgba(251,191,36,.1); }
.istatus-card.is-offline { --st-color: #f87171; box-shadow: 0 0 0 1px rgba(248,113,113,.28), 0 0 22px rgba(248,113,113,.16); }
.istatus-card.is-critical {
  --st-color: #ef4444;
  box-shadow: 0 0 0 1px rgba(239,68,68,.45), 0 0 26px rgba(239,68,68,.28);
  animation: istatus-pulse 2.2s ease-in-out infinite;
}
@keyframes istatus-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(239,68,68,.4), 0 0 22px rgba(239,68,68,.22); }
  50%      { box-shadow: 0 0 0 1px rgba(239,68,68,.6), 0 0 34px rgba(239,68,68,.42); }
}
.istatus-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; }
.istatus-name { font-weight: 600; font-size: 1rem; color: var(--text, #e8edf7); margin: 0; line-height: 1.25; }
.istatus-type { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute, #64748b); }
.istatus-pill {
  display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: .28rem .6rem; border-radius: 100px;
  color: var(--st-color); background: color-mix(in srgb, var(--st-color) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--st-color) 45%, transparent);
}
.istatus-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st-color); box-shadow: 0 0 8px var(--st-color); }
.istatus-card.is-critical .istatus-dot, .istatus-card.is-offline .istatus-dot { animation: dot-blink 1.4s ease-in-out infinite; }
@keyframes dot-blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.istatus-meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .8rem; color: var(--text-dim, #aab4cc); margin-bottom: .55rem; }
.istatus-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.istatus-crit { font-size: .68rem; font-weight: 600; text-transform: uppercase; padding: .15rem .5rem; border-radius: 6px; }
.istatus-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
  border-top: 1px solid var(--border, rgba(120,160,220,.16)); padding-top: .65rem; margin-top: .2rem;
}
.istatus-stat { display: flex; flex-direction: column; gap: .1rem; }
.istatus-stat b { font-size: .92rem; color: var(--text, #e8edf7); font-family: var(--f-mono, monospace); }
.istatus-stat span { font-size: .64rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-mute, #64748b); }
/* Banda de alertas prioritarias arriba del dashboard */
.infra-priority-alerts { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.25rem; }
.ipa {
  display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border-radius: 10px;
  font-size: .88rem; border-left: 4px solid var(--ipa-color, #f87171);
  background: color-mix(in srgb, var(--ipa-color, #f87171) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ipa-color, #f87171) 25%, transparent);
}
.ipa.k-offline  { --ipa-color: #ef4444; }
.ipa.k-ssl      { --ipa-color: #fb923c; }
.ipa.k-rds      { --ipa-color: #f472b6; }
.ipa.k-warn     { --ipa-color: #fbbf24; }
.ipa-badge { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ipa-color); white-space: nowrap; }
.ipa-days { margin-left: auto; font-family: var(--f-mono, monospace); font-size: .82rem; color: var(--ipa-color); white-space: nowrap; }
/* SSL crítico: badge muy visible */
.ssl-critical { color: #ef4444 !important; font-weight: 700; }

/* ═══ v2.25 — Knowledge Base (cards + lector) ═══ */
.kb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.kb-card {
  background: var(--surface, rgba(15,26,53,.6)); border: 1px solid var(--border, rgba(120,160,220,.16));
  border-radius: 14px; padding: 1.1rem 1.2rem; cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s;
  display: flex; flex-direction: column; gap: .55rem;
}
.kb-card:hover, .kb-card:focus { transform: translateY(-3px); border-color: var(--accent, #22d3ee); box-shadow: 0 8px 28px rgba(0,0,0,.25); outline: none; }
.kb-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.kb-card-cat { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent, #22d3ee); font-weight: 600; }
.kb-vis { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.kb-card-title { font-size: 1.05rem; margin: 0; color: var(--text, #e8edf7); line-height: 1.3; }
.kb-card-excerpt { font-size: .85rem; color: var(--text-dim, #aab4cc); margin: 0; line-height: 1.5; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kb-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .3rem; }
.kb-card-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.kb-tag { font-size: .68rem; background: rgba(124,168,255,.12); color: #7ca8ff; border-radius: 5px; padding: .12rem .5rem; }
.kb-card-date { font-size: .72rem; color: var(--text-mute, #64748b); white-space: nowrap; }
.kb-empty { text-align: center; padding: 3rem 1rem; color: var(--text-mute, #64748b); display: flex; flex-direction: column; gap: .4rem; }
.kb-empty strong { color: var(--text-dim, #aab4cc); font-size: 1.05rem; }

/* Lector */
.kb-reader { max-width: 820px; }
.kb-breadcrumb { display: flex; align-items: center; gap: .6rem; font-size: .82rem; color: var(--text-mute); margin-bottom: 1.25rem; }
.kb-back { background: none; border: none; color: var(--accent); cursor: pointer; font-size: .85rem; font-family: inherit; padding: 0; }
.kb-breadcrumb-sep { opacity: .5; }
.kb-reader-head { border-bottom: 1px solid var(--border); padding-bottom: 1rem; margin-bottom: 1.5rem; }
.kb-reader-head h1 { font-size: 1.8rem; margin: 0 0 .65rem; color: var(--text); letter-spacing: -.02em; }
.kb-reader-meta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; font-size: .82rem; color: var(--text-mute); }
.kb-print { margin-left: auto; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); border-radius: 8px; padding: .35rem .8rem; cursor: pointer; font-size: .8rem; font-family: inherit; }
.kb-print:hover { color: var(--accent); border-color: var(--accent); }
.kb-reader-body { font-size: .98rem; line-height: 1.75; color: var(--text-dim); }
.kb-reader-body h3 { color: var(--text); font-size: 1.2rem; margin: 1.5rem 0 .6rem; }
.kb-reader-body ul, .kb-reader-body ol { padding-left: 1.4rem; }
.kb-reader-body a { color: var(--accent); }
.kb-reader-body img { max-width: 100%; border-radius: 8px; margin: .8rem 0; }
.kb-reader-body code { background: rgba(255,255,255,.06); padding: .1rem .4rem; border-radius: 4px; font-family: var(--f-mono, monospace); font-size: .88em; }
.kb-reader-section { margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 1.25rem; }
.kb-reader-section h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); margin: 0 0 .75rem; }
.kb-reader-attachments { display: flex; flex-wrap: wrap; gap: .5rem; }
.kb-attach { display: inline-flex; align-items: center; gap: .3rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: .4rem .8rem; color: var(--text-dim); text-decoration: none; font-size: .85rem; }
.kb-attach:hover { color: var(--accent); border-color: var(--accent); }
.kb-link-chip { display: inline-block; background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.25); color: var(--accent); border-radius: 8px; padding: .35rem .7rem; font-size: .82rem; margin-right: .4rem; }
.kb-toolbar { display: flex; gap: .65rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.25rem; }
.kb-toolbar input[type=search], .kb-toolbar select {
  background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: .55rem .85rem; font-size: .88rem;
}
.kb-toolbar input[type=search] { flex: 1; min-width: 200px; }

/* ═══ v2.26 — Agenda Operativa (badges + workflow + feriados) ═══ */
.agenda-badge {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600;
  padding: .25rem .6rem; border-radius: 100px; border: 1px solid; white-space: nowrap;
}
.agenda-mandatory-notice {
  margin: .6rem 0; padding: .6rem .85rem; border-radius: 8px; font-size: .82rem;
  color: #c084fc; background: rgba(168,85,247,.08); border: 1px solid rgba(168,85,247,.3);
}
.agenda-act-btn {
  font-size: .8rem; font-weight: 500; padding: .4rem .85rem; border-radius: 8px; cursor: pointer;
  background: color-mix(in srgb, var(--ac, #22d3ee) 12%, transparent);
  color: var(--ac, #22d3ee); border: 1px solid color-mix(in srgb, var(--ac, #22d3ee) 45%, transparent);
  font-family: inherit; transition: background .15s;
}
.agenda-act-btn:hover { background: color-mix(in srgb, var(--ac, #22d3ee) 22%, transparent); }
.agenda-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.agenda-history { margin-top: 1rem; border-top: 1px solid var(--border, rgba(120,160,220,.16)); padding-top: .75rem; }
.agenda-history-item { display: flex; gap: .6rem; align-items: baseline; font-size: .8rem; padding: .3rem 0; color: var(--text-dim, #aab4cc); }
.agenda-history-item .ah-action { font-weight: 600; color: var(--text, #e8edf7); }
.agenda-history-item .ah-time { margin-left: auto; font-size: .72rem; color: var(--text-mute, #64748b); white-space: nowrap; }
/* Feriados en calendario/lista */
.agenda-holiday {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem;
  color: #fb7185; background: rgba(251,113,133,.1); border: 1px solid rgba(251,113,133,.3);
  padding: .15rem .5rem; border-radius: 6px;
}
.agenda-day-holiday { position: relative; }
.agenda-day-holiday::after {
  content: '★'; position: absolute; top: 2px; right: 4px; font-size: .6rem; color: #fb7185;
}
.coord-selector { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .35rem; }
.coord-option {
  flex: 1; min-width: 180px; padding: .7rem .85rem; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--border, rgba(120,160,220,.2)); background: var(--surface, rgba(15,26,53,.5));
  transition: border-color .15s, background .15s;
}
.coord-option.is-selected { border-color: var(--accent, #22d3ee); background: rgba(34,211,238,.06); }
.coord-option strong { display: block; font-size: .88rem; color: var(--text, #e8edf7); margin-bottom: .2rem; }
.coord-option span { font-size: .76rem; color: var(--text-mute, #64748b); }

/* ═══ v2.26.1 — Feriado en celda de calendario ═══ */
.cal-cell-holiday {
  font-size: .64rem; font-weight: 600; color: #fb7185;
  background: rgba(251,113,133,.1); border: 1px solid rgba(251,113,133,.28);
  border-radius: 5px; padding: .1rem .35rem; margin: .15rem 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.agenda-day-holiday { background: rgba(251,113,133,.04); }
.agenda-day-holiday .cal-cell-num { color: #fb7185; }

/* ═══ v2.26.1 — Banner de feriados (lista) ═══ */
.agenda-holidays-banner {
  margin-bottom: 1rem; padding: .7rem 1rem; border-radius: 10px; font-size: .84rem;
  color: #fda4af; background: rgba(251,113,133,.07); border: 1px solid rgba(251,113,133,.25);
}
.agenda-holidays-banner strong { color: #fb7185; }

/* ═══ v2.26.2 — Calendario unificado (movido de admin-panel.css para uso compartido) ═══ */
.cal-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.cal-nav { display: flex; align-items: center; gap: .5rem; }
.cal-label {
  font-family: var(--f-display, Sora); font-size: 1.05rem; color: var(--text);
  margin-left: .5rem; text-transform: capitalize;
}
.cal-views { display: flex; gap: .3rem; }
.cal-view-btn {
  background: var(--surface); border: 1px solid var(--border); color: var(--text-dim);
  padding: .5rem .9rem; border-radius: var(--r-sm); cursor: pointer;
  font-family: inherit; font-size: .82rem; transition: all .2s var(--ease-out);
}
.cal-view-btn:hover { border-color: var(--border-glow); }
.cal-view-btn.is-active { background: rgba(34,211,238,.1); border-color: var(--accent); color: var(--accent); }

.cal-container { min-height: 400px; }

/* Vista MES */
.cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  margin-bottom: 1px;
}
.cal-dow > div {
  text-align: center; padding: .5rem; font-family: var(--f-mono);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-mute);
}
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden;
}
.cal-cell {
  background: var(--surface); min-height: 104px; padding: .4rem;
  cursor: pointer; transition: background .15s var(--ease-out);
  display: flex; flex-direction: column; gap: .25rem;
}
.cal-cell:hover { background: var(--surface-hi); }
.cal-cell-empty { background: var(--bg); cursor: default; }
.cal-cell.is-today { background: rgba(34,211,238,.05); }
.cal-cell.is-today .cal-cell-num { color: var(--accent); font-weight: 700; }
.cal-cell-num { font-size: .8rem; color: var(--text-dim); font-family: var(--f-mono); }
.cal-cell-events { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }

/* Chip de evento */
.cal-event {
  display: flex; align-items: center; gap: .3rem; width: 100%;
  text-align: left; border: none; border-radius: 4px; cursor: pointer;
  padding: .2rem .4rem; font-size: .68rem; color: #cbd5e1;
  background: rgba(124,168,255,.15); border-left: 2px solid #7ca8ff;
  overflow: hidden; white-space: nowrap;
  transition: filter .15s var(--ease-out);
}
.cal-event:hover { filter: brightness(1.3); }
.cal-event-time { font-family: var(--f-mono); opacity: .8; flex-shrink: 0; }
.cal-event-title { overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.cal-event-meta { display: none; }
.cal-event.is-cancelled { opacity: .45; text-decoration: line-through; }
/* Colores por tipo */
.cal-event.ev-visit   { background: rgba(34,211,238,.15);  border-left-color: #22d3ee; }
.cal-event.ev-meeting { background: rgba(167,139,250,.15); border-left-color: #a78bfa; }
.cal-event.ev-maint   { background: rgba(251,191,36,.15);  border-left-color: #fbbf24; }
.cal-event.ev-install { background: rgba(52,211,153,.15);  border-left-color: #34d399; }
.cal-event.ev-onsite  { background: rgba(248,113,113,.15); border-left-color: #f87171; }
.cal-more { font-size: .65rem; color: var(--text-mute); padding: .1rem .4rem; }

/* Vista SEMANA */
.cal-week {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--r-sm); overflow: hidden;
}
.cal-week-day { background: var(--surface); min-height: 320px; padding: .5rem; cursor: pointer; }
.cal-week-day:hover { background: var(--surface-hi); }
.cal-week-day.is-today .cal-week-head { color: var(--accent); }
.cal-week-head {
  font-family: var(--f-mono); font-size: .75rem; color: var(--text-dim);
  text-align: center; padding-bottom: .5rem; margin-bottom: .5rem;
  border-bottom: 1px solid var(--border); text-transform: capitalize;
}
.cal-week-events { display: flex; flex-direction: column; gap: 3px; }
.cal-empty-day { color: var(--text-mute); text-align: center; font-size: .8rem; }

/* Vista DÍA */
.cal-day { display: flex; flex-direction: column; gap: .6rem; }
.cal-day-event {
  display: flex; align-items: flex-start; gap: 1rem; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid #7ca8ff; border-radius: var(--r-sm);
  padding: 1rem 1.25rem; cursor: pointer; transition: all .2s var(--ease-out);
}
.cal-day-event:hover { border-color: var(--border-glow); transform: translateX(2px); }
.cal-day-event.ev-visit   { border-left-color: #22d3ee; }
.cal-day-event.ev-meeting { border-left-color: #a78bfa; }
.cal-day-event.ev-maint   { border-left-color: #fbbf24; }
.cal-day-event.ev-install { border-left-color: #34d399; }
.cal-day-event.ev-onsite  { border-left-color: #f87171; }
.cal-day-event.is-cancelled { opacity: .5; }
.cal-day-time { font-family: var(--f-mono); font-size: .85rem; color: var(--accent); min-width: 110px; flex-shrink: 0; }
.cal-day-body { flex: 1; display: flex; flex-direction: column; gap: .2rem; }
.cal-day-body strong { color: var(--text); font-size: .95rem; }
.cal-day-body span { color: var(--text-dim); font-size: .82rem; }
.cal-day-loc { color: var(--text-mute) !important; }

@media (max-width: 720px) {
  .cal-cell { min-height: 72px; }
  .cal-event-title { font-size: .62rem; }
  .cal-week { grid-template-columns: 1fr; }
  .cal-week-day { min-height: auto; }
}

/* Auxiliares compartidos para calendario en empresa/técnico */
.tbl-empty {
  padding: 2rem; text-align: center; color: var(--text-mute, #64748b);
  background: var(--surface, rgba(15,26,53,.4)); border-radius: 10px;
  border: 1px dashed var(--border, rgba(120,160,220,.18));
}
.tbl-empty strong { display: block; color: var(--text-dim, #aab4cc); margin-bottom: .25rem; }
.badge-status {
  display: inline-flex; padding: .15rem .55rem; border-radius: 100px;
  font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid;
}
.badge-status.active   { color: #16a34a; background: rgba(22,163,74,.1); border-color: rgba(22,163,74,.3); }
.badge-status.inactive { color: #dc2626; background: rgba(220,38,38,.1); border-color: rgba(220,38,38,.3); }
.badge-status.draft    { color: #3b82f6; background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.3); }

/* ═══ v2.27.1 — Widget de preferencias de notificación ═══ */
.np-intro { color: var(--text-dim, #aab4cc); font-size: .9rem; margin-bottom: 1rem; }
.np-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.np-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1rem; background: var(--surface, rgba(15,26,53,.5));
  border: 1px solid var(--border, rgba(120,160,220,.16)); border-radius: 10px; cursor: pointer;
}
.np-row:hover { border-color: var(--accent, #22d3ee); }
.np-name { font-size: .92rem; color: var(--text, #e8edf7); }
.np-switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.np-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.np-slider {
  position: absolute; inset: 0; background: rgba(120,160,220,.25); border-radius: 24px; transition: background .2s;
}
.np-slider::before {
  content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .2s;
}
.np-switch input:checked + .np-slider { background: var(--accent, #22d3ee); }
.np-switch input:checked + .np-slider::before { transform: translateX(20px); }
.np-note {
  font-size: .8rem; color: var(--text-dim, #aab4cc); padding: .7rem 1rem;
  background: rgba(34,211,238,.05); border: 1px solid rgba(34,211,238,.18); border-radius: 8px; margin-bottom: 1rem;
}
.np-note strong { color: var(--accent, #22d3ee); }
.np-actions { display: flex; align-items: center; gap: 1rem; }
.np-status { font-size: .85rem; }
.np-status.np-ok { color: #16a34a; }
.np-status.np-err { color: #dc2626; }
.np-loading, .np-error { padding: 1.5rem; text-align: center; color: var(--text-dim, #aab4cc); }
.np-error { color: #dc2626; }

/* ═══ v2.27.1 — Submenú lateral de Documentación (configurable) ═══ */
.doc-layout { display: flex; gap: 1.25rem; align-items: flex-start; }
.doc-submenu {
  width: 210px; flex-shrink: 0; display: flex; flex-direction: column; gap: .15rem;
  background: var(--surface, rgba(15,26,53,.5)); border: 1px solid var(--border, rgba(120,160,220,.16));
  border-radius: 12px; padding: .75rem;
}
.doc-submenu-title {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-mute, #64748b); padding: .35rem .75rem .5rem;
}
.doc-submenu-item {
  text-align: left; background: none; border: none; cursor: pointer;
  padding: .55rem .75rem; border-radius: 8px; font-size: .88rem; font-family: inherit;
  color: var(--text-dim, #aab4cc); transition: background .15s, color .15s; width: 100%;
}
.doc-submenu-item:hover { background: rgba(120,160,220,.08); color: var(--text, #e8edf7); }
.doc-submenu-item.is-active { background: rgba(34,211,238,.12); color: var(--accent, #22d3ee); font-weight: 600; }
@media (max-width: 760px) {
  .doc-layout { flex-direction: column; }
  .doc-submenu { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .doc-submenu-title { width: 100%; }
}

/* ═══ v2.27.3 — Dirección en footer ═══ */
.foot-address {
  font-size: .82rem; color: var(--text-mute, #64748b); line-height: 1.5; margin-top: .6rem;
  padding-top: .6rem; border-top: 1px solid rgba(120,160,220,.12);
}

/* ═══ v2.27.3 — Video de fondo en hero ═══ */
.hero--video {
  position: relative; overflow: hidden; isolation: isolate;
  /* v2.31.6: bg sólido inmediato para eliminar flicker entre páginas
     (mientras el video del page nuevo aún no tiene frames disponibles) */
  background: var(--bg, #050a1a);
}
.hero-video-wrap { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-video {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%; width: auto; height: auto;
  object-fit: cover; filter: saturate(1.05) contrast(1.02);
  /* v2.31.6: arranca invisible; se revela cuando el frame inicial está listo */
  opacity: 0;
  transition: opacity .35s ease-out;
}
.hero-video.is-ready { opacity: 1; }
.hero-video-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5,10,26,.72) 0%, rgba(5,10,26,.55) 45%, rgba(5,10,26,.88) 100%),
    radial-gradient(1200px 500px at 75% 20%, rgba(34,211,238,.12), transparent 60%);
}
/* Línea tech glow inferior para integrar el corte del video */
.hero--video::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.6), transparent);
  box-shadow: 0 0 18px 2px rgba(34,211,238,.4);
}
@media (max-width: 768px) {
  .hero-video { /* en mobile el cover ya funciona; aseguramos cubrir alto */ min-height: 100%; }
  .hero-video-overlay { background:
    linear-gradient(180deg, rgba(5,10,26,.8) 0%, rgba(5,10,26,.7) 50%, rgba(5,10,26,.92) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero--video { background: var(--bg, #050a1a) url('../img/hero-poster.jpg') center/cover no-repeat; }
}

/* ═══ v2.27.3 — Logos en carrusel de empresas (v2.27.10: tamaños aumentados) ═══ */
.clients-logo {
  height: 56px;          /* antes: 32px */
  width: auto;
  max-width: 200px;      /* antes: 140px */
  object-fit: contain;
  opacity: .92;          /* antes: .75 — más visible por defecto */
  filter: grayscale(.4) brightness(1.15);  /* menos gris, más luminoso */
  transition: opacity .2s, filter .2s, transform .2s;
  vertical-align: middle;
}
.clients-item:hover .clients-logo {
  opacity: 1;
  filter: grayscale(0) brightness(1.15);
  transform: scale(1.04);
}
/* Cuando es logo+nombre el logo va más chico */
.clients-item.clients-item--with-name .clients-logo {
  height: 44px;
  max-width: 130px;
  margin-right: .75rem;
}
.clients-item-name {
  font-size: 1rem;
  color: var(--text-dim, #aab4cc);
  font-weight: 500;
  white-space: nowrap;
}
.clients-item:hover .clients-item-name { color: var(--text, #e8edf7); }

/* ═══ v2.27.3 — Pill destacado (Ciberseguridad) ═══ */
.pill--accent {
  background: rgba(34,211,238,.12); border-color: rgba(34,211,238,.45);
  color: var(--accent, #22d3ee); font-weight: 600;
}

/* ═══ v2.27.3 — Hito Polo Tecnológico + mapa Nosotros ═══ */
.tl-item--featured > div { position: relative; }
.tl-item--featured h3 { color: var(--accent, #22d3ee); }
.map-frame {
  position: relative; margin-top: 1.75rem; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border, rgba(120,160,220,.18));
  box-shadow: 0 10px 40px rgba(0,0,0,.3); isolation: isolate;
}
.map-frame iframe {
  width: 100%; height: 380px; border: 0; display: block;
  filter: grayscale(.3) invert(.92) hue-rotate(180deg) contrast(.9);
}
.map-frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(34,211,238,.15); border-radius: 16px;
}
.map-cta {
  position: absolute; bottom: 1rem; right: 1rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--accent, #22d3ee); color: #04121a; font-weight: 600; font-size: .85rem;
  padding: .6rem 1rem; border-radius: 100px; text-decoration: none;
  box-shadow: 0 6px 20px rgba(34,211,238,.4); transition: transform .15s;
}
.map-cta:hover { transform: translateY(-2px); }
.map-cta svg { width: 16px; height: 16px; }
@media (max-width: 600px) { .map-frame iframe { height: 280px; } }

/* ═══ v2.27.9 — Bloque "Asociados al Polo Tecnológico" en columna Servicios ═══ */
/* La columna del logo GSS (foot-col primera) ya NO incluye el Polo.
   El Polo va en la columna Servicios, alineado al fondo para llenar el espacio. */
.foot-grid .foot-col { display: flex; flex-direction: column; }

/* Logo GSS en footer — solo, sin Polo al lado, puede ser más grande */
.foot-grid .foot-col > .brand img {
  height: 72px; width: auto; max-width: 200px; object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(34,211,238,.35)) drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
@media (max-width: 640px) {
  .foot-grid .foot-col > .brand img { height: 60px; max-width: 180px; }
}

.foot-polo-block {
  margin-top: auto; /* empuja al fondo de la columna, alineando con la base de las otras columnas */
  padding-top: 2rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
}
.foot-polo-label {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-mute, #64748b);
}
.foot-polo {
  display: inline-flex; align-items: center; max-width: 220px;
  /* Pill clara semi-translúcida: el logo respira sobre un fondo que contrasta
     con el dark del footer. Es la técnica profesional para logos coloridos sobre dark
     (la usan sitios serios). No es bloque blanco sólido — semi-trans + borde cyan + sombra. */
  background: rgba(244, 248, 255, 0.92);
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 12px;
  padding: .6rem .95rem;
  transition: transform .2s, background .2s, border-color .2s, box-shadow .2s;
  text-decoration: none;
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.08) inset,
    0 4px 18px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(34, 211, 238, 0.18);
}
.foot-polo img {
  width: 100%; height: auto; max-height: 56px; display: block;
  /* Sobre fondo claro, el logo se ve perfecto en sus colores originales,
     sin necesidad de filtros destructivos. Solo un toque de contraste. */
  filter: contrast(1.05) saturate(1.05);
}
.foot-polo:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(34, 211, 238, 0.6);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.2) inset,
    0 6px 22px rgba(0, 0, 0, 0.4),
    0 0 26px rgba(34, 211, 238, 0.3);
}
.foot-polo:hover img { filter: contrast(1.08) saturate(1.12); }
@media (max-width: 640px) {
  .foot-polo-block { padding-top: 1rem; }
  .foot-polo { max-width: 180px; padding: .45rem .7rem; }
  .foot-polo img { max-height: 48px; }
}

/* ═══ v2.27.4 — Banner Partners ═══ */
.partners-strip { padding-top: 1.5rem; }
.partners-intro {
  text-align: center; max-width: 60ch; margin: -.2rem auto 1.25rem;
  font-size: .92rem; color: var(--text-dim, #aab4cc); line-height: 1.5;
}

/* ═══ v2.27.4 — Logo en brand-card (marcas administrables) — v2.27.10 ampliado ═══ */
.brand-card .brand-logo {
  display: block;
  max-width: 100%;
  max-height: 72px;       /* antes: 48px */
  width: auto; height: auto;
  margin: 0 auto 1rem;    /* más respiración antes del nombre */
  object-fit: contain;
  opacity: 1;             /* antes: .9 */
  filter: brightness(1.1) saturate(1.05);
  transition: transform .25s, filter .25s;
}
.brand-card:hover .brand-logo { transform: scale(1.05); filter: brightness(1.2) saturate(1.1); }

/* ═══ v2.27.6 — Brands empty / brand-tag dinámico ═══ */
.brands-empty {
  grid-column: 1 / -1; text-align: center; padding: 2rem;
  color: var(--text-mute, #64748b); font-size: .92rem;
}

/* ═══ v2.27.6 — Logo en banner Service Oficial ═══ */
.banner-bangho-logo {
  position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%);
  max-width: 200px; max-height: 80px; object-fit: contain; opacity: .85;
  filter: brightness(1.1) saturate(1.05);
}
@media (max-width: 760px) { .banner-bangho-logo { display: none; } }

/* ═══ v2.29.0 — Página Consultar Orden (pública) ═══ */
.consult-wrap {
  padding: 4rem 1rem 5rem;
  display: flex;
  justify-content: center;
}
.consult-card {
  width: 100%;
  max-width: 640px;
  padding: 2.5rem;
  background: rgba(15, 26, 53, .55);
  border: 1px solid rgba(120, 160, 220, .14);
  border-radius: 16px;
  box-shadow: 0 12px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
}
.consult-icon {
  width: 56px; height: 56px; margin: 0 auto 1rem;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgba(34, 211, 238, .12);
  border: 1px solid rgba(34, 211, 238, .35);
  color: var(--accent, #22d3ee);
}
.consult-icon svg { width: 30px; height: 30px; }
.consult-card h1 { text-align: center; margin: 0 0 .5rem; font-size: 1.5rem; }
.consult-card .sub { text-align: center; color: var(--text-dim, #aab4cc); font-size: .9rem; margin-bottom: 1.75rem; line-height: 1.55; }

.consult-tabs {
  display: flex; gap: .5rem; margin-bottom: 1.5rem;
  padding: .35rem;
  background: rgba(8, 16, 40, .55);
  border: 1px solid rgba(120, 160, 220, .12);
  border-radius: 10px;
}
.consult-tab {
  flex: 1;
  padding: .65rem .85rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text-mute, #64748b);
  font: inherit; font-weight: 500; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.consult-tab:hover { color: var(--text, #e8edf7); }
.consult-tab.is-active {
  background: rgba(34, 211, 238, .12);
  border-color: rgba(34, 211, 238, .35);
  color: var(--accent, #22d3ee);
}

.consult-form .field + .field { margin-top: 1rem; }
.consult-form button[type=submit] { margin-top: 1.25rem; width: 100%; }
.consult-hint { font-size: .82rem; color: var(--text-mute, #64748b); margin: .85rem 0 0; line-height: 1.5; }
.consult-hint a { color: var(--accent, #22d3ee); }

.consult-status {
  margin-top: 1.25rem;
  padding: .9rem 1rem;
  border-radius: 8px;
  font-size: .9rem; line-height: 1.5;
  display: none;
}
.consult-status:not(:empty) { display: block; }
.consult-status.is-err  { background: rgba(220,38,38,.08); border: 1px solid rgba(220,38,38,.3); color: #fca5a5; }
.consult-status.is-warn { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.3); color: #fcd34d; }
.consult-status.is-ok   { background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.3); color: #86efac; }

/* ─── Resultado: card de una orden ─── */
.consult-result { margin-top: 1.5rem; }
.ord-card {
  padding: 1.25rem 1.4rem;
  background: rgba(8, 16, 40, .5);
  border: 1px solid rgba(120, 160, 220, .14);
  border-radius: 10px;
}
.ord-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.ord-num { font-size: 1rem; color: var(--text-dim); }
.ord-num strong { color: var(--text); font-size: 1.2rem; }
.ord-client { font-size: .85rem; color: var(--text-mute); margin-top: .15rem; }
.ord-estado {
  font-family: var(--f-mono, monospace);
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .35rem .7rem;
  border-radius: 6px;
  border: 1px solid;
  white-space: nowrap;
}
.ord-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .65rem 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed rgba(120, 160, 220, .12);
  margin-bottom: 1rem;
}
.ord-row { display: flex; flex-direction: column; gap: .15rem; }
.ord-lbl {
  font-family: var(--f-mono, monospace);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-mute, #64748b);
}
.ord-val { font-size: .9rem; color: var(--text); }
.ord-block { margin-top: 1rem; }
.ord-block:first-of-type { margin-top: 0; }
.ord-block-title {
  font-family: var(--f-mono, monospace);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent, #22d3ee); margin-bottom: .35rem;
}
.ord-block p { margin: 0; line-height: 1.55; color: var(--text-dim); font-size: .9rem; white-space: pre-wrap; }

/* ─── Resultado: lista (empresa) ─── */
.ord-empty {
  padding: 2rem 1rem; text-align: center;
  color: var(--text-mute);
  border: 1px dashed rgba(120, 160, 220, .18);
  border-radius: 8px;
  line-height: 1.55;
}
.ord-empty small { color: var(--text-mute); font-size: .82rem; }
.ord-empty a { color: var(--accent, #22d3ee); }
.ord-list-head { font-size: .9rem; color: var(--text-dim); margin-bottom: 1rem; }
.ord-list { display: flex; flex-direction: column; gap: .6rem; }
.ord-list-item {
  display: flex; align-items: center; gap: 1rem;
  padding: .8rem 1rem;
  background: rgba(8, 16, 40, .5);
  border: 1px solid rgba(120, 160, 220, .12);
  border-radius: 8px;
}
.ord-list-num { font-size: .82rem; color: var(--text-mute); white-space: nowrap; }
.ord-list-num strong { color: var(--text); font-size: 1rem; }
.ord-list-info { flex: 1; min-width: 0; }
.ord-list-equipo { font-size: .9rem; color: var(--text); font-weight: 500; }
.ord-list-meta { font-size: .78rem; color: var(--text-mute); margin-top: .12rem; }
.ord-list-estado {
  font-family: var(--f-mono, monospace);
  font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .3rem .6rem;
  border-radius: 5px;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .consult-card { padding: 1.75rem 1.25rem; }
  .ord-head { flex-direction: column; }
  .ord-list-item { flex-direction: column; align-items: flex-start; gap: .35rem; }
}