/* ==========================================================================
   WALKER BRAND — Hoja de estilos global del sitio
   --------------------------------------------------------------------------
   Uso: encolar en TODO el sitio (no solo el home). Todas las clases usan el
   prefijo .wb- para no colisionar con Elementor, el tema ni otros plugins.

   Estructura:
     01. Tokens de diseño (variables CSS)
     02. Reset mínimo y base tipográfica
     03. Utilidades (contenedores, etiquetas, botones)
     04. Animaciones de entrada (reveal — una sola vez)
     05. Header / navegación
     06. Hero
     07. Slider de logos de clientes
     08. Sección Problema
     09. Sección WCS
     10. Sección Servicios
     11. Sección Casos (grid + popup + galería)
     12. Sección Números (+ barras)
     13. Sección Blog (tarjetas — reutilizable en blog y single)
     14. CTA final
     15. Footer
     16. Responsive
     17. Accesibilidad / motion / print
   ========================================================================== */


/* ==========================================================================
   01. TOKENS DE DISEÑO
   ========================================================================== */

:root {
  /* — Fondos — (COLORES SITIO WEB.png) */
  --wb-bg:            #06060F;
  --wb-bg-2:          #0D0D1A;
  --wb-bg-3:          #111122;
  --wb-bg-4:          #15152B;

  /* — Azules del sitio web — */
  --wb-blue:          #2B7FE1;
  --wb-blue-light:    #5B9FFF;
  --wb-blue-dark:     #1A5BB5;
  --wb-cyan:          #00D4FF;

  /* — Azules del manual de marca — (por si se necesita coherencia offline) */
  --wb-brand-blue:    #2785BA;
  --wb-brand-navy:    #282758;

  /* — Semánticos — */
  --wb-green:         #00C896;
  --wb-warn:          #FF6B35;

  /* — Texto —
     Contraste medido sobre --wb-bg (#06060F):
       --wb-text-2 #9090B8 → 6.6:1  ✓ AA  (es el "texto secundario" del brief)
       --wb-text-3 #7A7A9C → 4.9:1  ✓ AA
     Nota: el referencia.html usaba #606080 para el texto terciario, pero da
     3.35:1 y NO pasa AA. Se aclaró lo mínimo para cumplir sin perder el tono. */
  --wb-white:         #FFFFFF;
  --wb-text:          #FFFFFF;
  --wb-text-2:        #9090B8;
  --wb-text-3:        #7A7A9C;
  --wb-text-faint:    #606080;   /* sólo decorativo, nunca para texto legible */

  /* — Líneas y superficies — */
  --wb-line:          rgba(255,255,255,.08);
  --wb-line-soft:     rgba(255,255,255,.05);
  --wb-surface:       rgba(255,255,255,.03);
  --wb-surface-2:     rgba(255,255,255,.05);
  --wb-blue-wash:     rgba(43,127,225,.06);

  /* — Tipografía —
     El manual de marca especifica TextaAlt-Black (títulos) y TextaAlt-Medium
     (cuerpo). Texta Alt es una fuente de pago (Latinotype / Adobe Fonts), no
     está en Google Fonts. El stack la usa PRIMERO: si algún día se licencia y
     se carga en el sitio, entra automáticamente sin tocar el CSS. Mientras
     tanto cae en Space Grotesk / Inter, que es lo que usa el referencia.html. */
  --wb-font-display: "Texta Alt", "TextaAlt", "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --wb-font-body:    "Texta Alt", "TextaAlt", "Inter", "Segoe UI", system-ui, sans-serif;

  /* — Escala tipográfica fluida — */
  --wb-h1:      clamp(2.5rem, 1.4rem + 4.4vw, 5.25rem);
  --wb-h2:      clamp(1.95rem, 1.2rem + 3vw, 3.6rem);
  --wb-h3:      clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  --wb-body:    clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);
  --wb-lead:    clamp(1rem, 0.94rem + 0.4vw, 1.125rem);

  /* — Ritmo vertical de secciones — */
  --wb-section-y:      clamp(72px, 9vw, 140px);
  --wb-section-y-tight: clamp(56px, 7vw, 120px);

  /* — Layout — */
  --wb-container:      1200px;
  --wb-container-wide: 1440px;
  --wb-gutter:         clamp(20px, 4vw, 32px);
  --wb-gutter-wide:    clamp(20px, 4vw, 48px);

  /* — Radios — */
  --wb-r-sm: 6px;
  --wb-r-md: 12px;
  --wb-r-lg: 16px;
  --wb-r-xl: 24px;
  --wb-r-pill: 100px;

  /* — Transiciones — */
  --wb-t-fast: .2s ease;
  --wb-t:      .3s ease;
  --wb-t-slow: .5s ease;

  /* — Alto real del header (se usa para offsets y scroll-margin) — */
  --wb-nav-h: 76px;

  /* — Z-index — */
  --wb-z-nav:   100;
  --wb-z-modal: 9999;
}


/* ==========================================================================
   02. RESET MÍNIMO Y BASE
   ========================================================================== */

/* Ojo: no reseteamos globalmente para no pelear con Elementor.
   Solo normalizamos dentro de nuestros propios componentes. */

.wb-scope *,
.wb-scope *::before,
.wb-scope *::after { box-sizing: border-box; }

/* Anclas: que el header fijo no tape los títulos al saltar a #seccion */
[id^="wb-"],
.wb-section[id] { scroll-margin-top: calc(var(--wb-nav-h) + 24px); }

html {
  scroll-behavior: smooth;
  /* Reserva el ancho de la barra de scroll: evita el salto horizontal
     de la página al abrir el popup o el menú (que bloquean el scroll). */
  scrollbar-gutter: stable;
}

/* Base de página.
   Se aplica a <body> SIN depender de ninguna clase: esta hoja se carga solo
   en el sitio de Walker Brand, así que el fondo oscuro es el correcto por
   defecto. La clase .wb-site sigue funcionando (y suma especificidad por si
   algún plugin pelea), pero ya no es obligatoria. */
body,
body.wb-site {
  background: var(--wb-bg);
  color: var(--wb-text);
  font-family: var(--wb-font-body);
  font-size: var(--wb-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* "clip" evita el desbordamiento lateral SIN convertir el body en un
     contenedor de scroll (que es lo que hace "hidden" y puede romper
     position:sticky y scrollIntoView). "hidden" queda como fallback. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--wb-bg); }
::-webkit-scrollbar-thumb { background: var(--wb-blue-dark); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--wb-blue); }
html { scrollbar-color: var(--wb-blue-dark) var(--wb-bg); scrollbar-width: thin; }

/* Selección */
::selection { background: var(--wb-blue); color: #fff; }

/* El tema Hello Elementor imprime el título de la página (<h1 class="entry-title">).
   En las páginas construidas con Elementor sobra: lo oculta la propia página
   con "Elementor Full Width", y esto lo cubre por si acaso.
   OJO: solo aplica a páginas, no a entradas del blog (ahí el título sí va). */
.elementor-page .page-header,
.elementor-page > .entry-title,
.elementor-page .entry-header .entry-title { display: none; }


/* ==========================================================================
   03. UTILIDADES
   ========================================================================== */

/* Nota de especificidad: las reglas de ritmo vertical van "dobladas"
   (.wb-section.wb-section) para ganarle al CSS que Elementor genera por
   elemento (.elementor-element-xxxx, especificidad 0-1-0) sin usar
   !important y sin depender de ninguna clase en <body>. */
.wb-section { position: relative; }
/* Padding en shorthand: además del ritmo vertical, neutraliza cualquier
   padding horizontal heredado del contenedor de Elementor (los gutters los
   pone .wb-container, no la sección). */
.wb-section.wb-section         { padding: var(--wb-section-y) 0; }
.wb-section--flush.wb-section--flush { padding-block: 0; }
.wb-section--tight.wb-section--tight { padding: var(--wb-section-y-tight) 0; }

/* Los contenedores de Elementor son flex column; que los hijos ocupen
   todo el ancho y se apilen con normalidad. */
.wb-section.wb-section,
.wb-clients.wb-clients,
.wb-footer.wb-footer {
  display: block;
}
.wb-section--bg2     { background: var(--wb-bg-2); }
.wb-section--bg3     { background: var(--wb-bg-3); }
.wb-section--hairline{ border-top: 1px solid var(--wb-line-soft); border-bottom: 1px solid var(--wb-line-soft); }
.wb-section--clip    { overflow: hidden; }

.wb-container,
.wb-container-wide {
  width: 100%;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
.wb-container      { max-width: var(--wb-container);      padding-inline: var(--wb-gutter); }
.wb-container-wide { max-width: var(--wb-container-wide); padding-inline: var(--wb-gutter-wide); }

/* Capa de fondo decorativa (glows radiales) */
.wb-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.wb-glow--blue  { background: radial-gradient(ellipse 50% 80% at 80% 50%, rgba(43,127,225,.10) 0%, transparent 70%); }
.wb-glow--warn  { background: radial-gradient(ellipse 60% 50% at 20% 50%, rgba(255,107,53,.06) 0%, transparent 70%); }
.wb-glow--center{ background: radial-gradient(ellipse 45% 65% at 50% 50%, rgba(43,127,225,.08) 0%, transparent 70%); }

/* Etiqueta de sección (línea + texto en mayúsculas) */
.wb-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--wb-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--wb-blue-light);
  margin-bottom: 20px;
}
.wb-label::before {
  content: "";
  flex: none;
  width: 24px;
  height: 2px;
  background: currentColor;
}
.wb-label--warn  { color: var(--wb-warn); }
.wb-label--green { color: var(--wb-green); }

/* Pill / tag */
.wb-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--wb-blue-light);
  padding: 6px 14px;
  border: 1px solid rgba(91,159,255,.3);
  border-radius: var(--wb-r-pill);
}

/* Títulos */
.wb-h1, .wb-h2, .wb-h3 {
  font-family: var(--wb-font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}
.wb-h1 { font-size: var(--wb-h1); line-height: 1.05; }
.wb-h2 { font-size: var(--wb-h2); line-height: 1.1;  }
.wb-h3 { font-size: var(--wb-h3); line-height: 1.2;  }
.wb-h1 em, .wb-h2 em, .wb-h3 em { font-style: normal; color: var(--wb-blue-light); }

/* Intro / lead */
.wb-lead {
  font-size: var(--wb-lead);
  color: var(--wb-text-2);
  line-height: 1.7;
  max-width: 58ch;
  margin: 0;
}
.wb-lead--wide { max-width: 72ch; }

/* Botones */
.wb-btn,
.wb-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--wb-font-body);
  font-size: 15px;
  line-height: 1.2;
  padding: 16px 32px;
  border-radius: var(--wb-r-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--wb-t-fast), color var(--wb-t-fast),
              border-color var(--wb-t-fast), transform var(--wb-t-fast),
              box-shadow var(--wb-t-fast);
  /* que nunca se rompa en móvil */
  max-width: 100%;
  text-align: center;
}
.wb-btn {
  background: var(--wb-blue);
  color: #fff;
  font-weight: 700;
  border: 1px solid var(--wb-blue);
}
.wb-btn:hover,
.wb-btn:focus-visible {
  background: var(--wb-blue-light);
  border-color: var(--wb-blue-light);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(43,127,225,.35);
}
.wb-btn-ghost {
  background: transparent;
  color: var(--wb-text-2);
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.14);
}
.wb-btn-ghost:hover,
.wb-btn-ghost:focus-visible {
  border-color: var(--wb-blue);
  color: var(--wb-white);
}
.wb-btn--lg { font-size: 16px; padding: 18px 40px; }
.wb-btn svg, .wb-btn-ghost svg { flex: none; }

.wb-note {
  font-size: 13px;
  color: var(--wb-text-3);
  margin-top: 16px;
}

/* Cabecera de sección con acción a la derecha */
.wb-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.wb-section-head > :first-child { min-width: 0; }

.wb-stack   { display: flex; flex-direction: column; }
.wb-mb-0    { margin-bottom: 0 !important; }
.wb-mt-24   { margin-top: 24px; }
.wb-mt-48   { margin-top: clamp(32px, 4vw, 48px); }
.wb-center  { text-align: center; }

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

/* Sólo lectores de pantalla */
.wb-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   04. ANIMACIONES DE ENTRADA (reveal) — se ejecutan UNA SOLA VEZ
   ========================================================================== */

.wb-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.wb-reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;   /* se libera tras animar: la animación no se repite */
}

/* Variantes de dirección */
.wb-reveal--left  { transform: translateX(-28px); }
.wb-reveal--right { transform: translateX(28px);  }
.wb-reveal--scale { transform: scale(.96); }
.wb-reveal--fade  { transform: none; }

/* Retardos escalonados */
.wb-d1 { transition-delay: .08s; }
.wb-d2 { transition-delay: .16s; }
.wb-d3 { transition-delay: .24s; }
.wb-d4 { transition-delay: .32s; }
.wb-d5 { transition-delay: .40s; }
.wb-d6 { transition-delay: .48s; }

/* Escalonado automático de hijos (grids) */
.wb-reveal-children > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.wb-reveal-children.is-visible > * { opacity: 1; transform: none; }
.wb-reveal-children.is-visible > *:nth-child(1) { transition-delay: .00s; }
.wb-reveal-children.is-visible > *:nth-child(2) { transition-delay: .07s; }
.wb-reveal-children.is-visible > *:nth-child(3) { transition-delay: .14s; }
.wb-reveal-children.is-visible > *:nth-child(4) { transition-delay: .21s; }
.wb-reveal-children.is-visible > *:nth-child(5) { transition-delay: .28s; }
.wb-reveal-children.is-visible > *:nth-child(6) { transition-delay: .35s; }
.wb-reveal-children.is-visible > *:nth-child(7) { transition-delay: .42s; }

/* Fallback: si no hay JS, todo visible (nunca contenido invisible) */
.no-js .wb-reveal,
.no-js .wb-reveal-children > * { opacity: 1 !important; transform: none !important; }


/* ==========================================================================
   05. HEADER / NAVEGACIÓN
   ========================================================================== */

/* Doblada: Elementor aplica .e-con{position:relative} y ganaría por orden */
.wb-nav.wb-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: block;
  padding: 18px 0;
}
.wb-nav {
  z-index: var(--wb-z-nav);
  transition: background var(--wb-t), padding var(--wb-t), border-color var(--wb-t);
  border-bottom: 1px solid transparent;
}
/* Estado "scrolleado": lo activa nuestro JS y también Elementor Sticky */
.wb-nav.is-scrolled,
.wb-nav.elementor-sticky--effects {
  background: rgba(6,6,15,.92);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding-block: 11px;
  border-bottom-color: var(--wb-line-soft);
}
.wb-nav.wb-nav.is-scrolled,
.wb-nav.wb-nav.elementor-sticky--effects { padding: 11px 0; }

.wb-nav__inner {
  position: relative;
  z-index: 2;                 /* por encima del panel móvil */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--wb-container);
  margin-inline: auto;
  padding-inline: var(--wb-gutter);
}

/* Logo */
.wb-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
  line-height: 0;
}
/* IMPORTANTE — el archivo del logo (walkerbrand.logo_-scaled.webp) es un
   CUADRADO de 1920x1920 con el logotipo en una banda central de 1530x264
   (proporción real 5.8:1) y muchísimo espacio en blanco arriba y abajo.
   Con object-fit:contain el logo saldría diminuto (una caja cuadrada).
   Solución: caja con proporción ~5:1 + object-fit:cover, que recorta el
   blanco sobrante y deja sólo el logotipo.
   >>> Si suben un archivo ya recortado, cambiar a: object-fit:contain;
       height:auto; y quitar el aspect-ratio. */
.wb-logo img {
  --wb-logo-w: 176px;
  display: block;
  width: var(--wb-logo-w);
  height: calc(var(--wb-logo-w) / 5);
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  transition: width var(--wb-t), height var(--wb-t);
}
.wb-nav.is-scrolled .wb-logo img,
.wb-nav.elementor-sticky--effects .wb-logo img { --wb-logo-w: 152px; }

/* En el footer puede ir un poco más grande */
.wb-footer .wb-logo img { --wb-logo-w: 200px; }

/* El logo oficial es azul marino sobre claro: no se lee sobre #06060F.
   Esto lo pasa a blanco monocromo (versión aprobada en el manual, pág. 4).
   >>> Cuando suban un PNG/WEBP blanco real, quitar la clase wb-logo--invert. */
.wb-logo--invert img { filter: brightness(0) invert(1); }

/* Menú */
.wb-menu {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 36px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.wb-menu li { margin: 0; }
.wb-menu a {
  display: inline-block;
  color: var(--wb-text-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 0;
  transition: color var(--wb-t-fast);
  position: relative;
}
.wb-menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--wb-blue-light);
  transition: right var(--wb-t);
}
.wb-menu a:hover,
.wb-menu a:focus-visible,
.wb-menu .current-menu-item > a { color: var(--wb-white); }
.wb-menu a:hover::after { right: 0; }

/* CTA del menú */
.wb-menu .wb-menu-cta > a,
a.wb-menu-cta {
  background: var(--wb-blue);
  color: #fff;
  padding: 10px 22px;
  border-radius: var(--wb-r-sm);
  font-weight: 700;
  transition: background var(--wb-t-fast), transform var(--wb-t-fast);
}
.wb-menu .wb-menu-cta > a::after,
a.wb-menu-cta::after { display: none; }
.wb-menu .wb-menu-cta > a:hover,
a.wb-menu-cta:hover {
  background: var(--wb-blue-light);
  color: #fff;
  transform: translateY(-1px);
}

/* Hamburguesa */
.wb-burger {
  display: none;
  flex: none;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-sm);
  cursor: pointer;
  position: relative;
  color: var(--wb-white);
}
.wb-burger span,
.wb-burger span::before,
.wb-burger span::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform var(--wb-t), opacity var(--wb-t-fast), top var(--wb-t);
}
.wb-burger span { top: 50%; margin-top: -1px; }
.wb-burger span::before { top: -6px; left: 0; transform: none; }
.wb-burger span::after  { top:  6px; left: 0; transform: none; }
.wb-burger[aria-expanded="true"] span { transform: translateX(-50%) rotate(45deg); }
.wb-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(-90deg); }
.wb-burger[aria-expanded="true"] span::after  { opacity: 0; }

/* Panel móvil */
.wb-nav__panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(360px, 86vw);
  background: var(--wb-bg-2);
  border-left: 1px solid var(--wb-line);
  padding: calc(var(--wb-nav-h) + 24px) 28px 40px;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  z-index: 1;                 /* dentro de .wb-nav, debajo de .wb-nav__inner */
  display: none;
}
.wb-nav__panel.is-open { transform: none; }
.wb-nav__panel .wb-menu {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.wb-nav__panel .wb-menu a {
  font-size: 17px;
  font-weight: 600;
  color: var(--wb-white);
  padding: 14px 0;
  border-bottom: 1px solid var(--wb-line-soft);
}
.wb-nav__panel .wb-menu a::after { display: none; }
.wb-nav__panel .wb-menu .wb-menu-cta > a,
.wb-nav__panel a.wb-menu-cta {
  margin-top: 20px;
  text-align: center;
  border-bottom: 0;
  padding: 16px 22px;
}
.wb-nav__scrim {
  position: fixed;
  inset: 0;
  background: rgba(6,6,15,.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--wb-t), visibility var(--wb-t);
  z-index: calc(var(--wb-z-nav) - 2);
}
.wb-nav__scrim.is-open { opacity: 1; visibility: visible; }

/* Bloquea el scroll del body con el panel/modal abierto */
body.wb-locked { overflow: hidden; }


/* ==========================================================================
   06. HERO
   ========================================================================== */

.wb-hero {
  position: relative;
  overflow: hidden;
  background: var(--wb-bg);
}
/* Doblada por especificidad (ver nota en §03).
   Se usa flex-direction:column + justify-content:center (en vez de
   align-items:center) para que funcione igual con la dirección "column"
   que Elementor impone en sus contenedores. */
.wb-hero.wb-hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: calc(var(--wb-nav-h) + clamp(40px, 6vw, 64px)) 0 clamp(88px, 10vw, 120px);
}
/* El widget que envuelve el hero debe poder ocupar todo el ancho */
.wb-hero.wb-hero > * { width: 100%; }

/* Capa 1: imagen de fondo (bgwalker.webp) */
.wb-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Capa 2: glows + viñeta para asegurar contraste del texto */
.wb-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 62% 40%, rgba(43,127,225,.14) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 82% 72%, rgba(0,212,255,.07) 0%, transparent 60%),
    linear-gradient(100deg, rgba(6,6,15,.92) 0%, rgba(6,6,15,.72) 42%, rgba(6,6,15,.55) 100%);
}
/* Capa 3: retícula sutil */
.wb-hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 100%);
}

.wb-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wb-container);
  margin-inline: auto;
  padding-inline: var(--wb-gutter);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.wb-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--wb-blue-light);
  margin-bottom: 22px;
}
.wb-hero__eyebrow::before {
  content: "";
  flex: none;
  width: 32px; height: 2px;
  background: var(--wb-blue);
}

.wb-hero__title { margin-bottom: 26px; }

.wb-hero__sub {
  font-size: var(--wb-lead);
  color: var(--wb-text-2);
  line-height: 1.7;
  max-width: 48ch;
  margin: 0 0 clamp(32px, 4vw, 48px);
}

/* Tarjeta de métricas */
.wb-hero__card {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-lg);
  padding: clamp(22px, 2.6vw, 32px);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.wb-hero__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(12px, 1.4vw, 20px);
  margin-bottom: 24px;
}
.wb-metric {
  text-align: center;
  padding: clamp(16px, 2vw, 20px) 12px;
  background: rgba(43,127,225,.08);
  border: 1px solid rgba(43,127,225,.15);
  border-radius: 10px;
}
.wb-metric__num {
  display: block;
  font-family: var(--wb-font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--wb-blue-light);
}
.wb-metric__num sup,
.wb-metric__num .wb-plus {
  color: var(--wb-blue);
  font-size: .7em;
  vertical-align: baseline;
}
.wb-metric__label {
  font-size: 12px;
  line-height: 1.35;
  color: var(--wb-text-2);
  margin-top: 6px;
}

.wb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wb-chip {
  font-size: 12px;
  font-weight: 600;
  color: var(--wb-text-2);
  background: var(--wb-surface-2);
  padding: 6px 12px;
  border-radius: var(--wb-r-pill);
  border: 1px solid var(--wb-line);
}

/* Indicador de scroll */
.wb-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--wb-text-3);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  animation: wb-bounce 2.2s ease-in-out infinite;
}
.wb-scroll-hint svg { opacity: .55; }
@keyframes wb-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}


/* ==========================================================================
   07. SLIDER DE LOGOS DE CLIENTES (marquee CSS, sin JS)
   ========================================================================== */

.wb-clients.wb-clients { padding: clamp(36px, 4vw, 48px) 0; }
.wb-clients {
  border-top: 1px solid var(--wb-line-soft);
  border-bottom: 1px solid var(--wb-line-soft);
  background: rgba(255,255,255,.02);
  overflow: hidden;
}
.wb-clients__label {
  text-align: center;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--wb-text-3);
  margin-bottom: 28px;
}

/* Máscara de desvanecido en los bordes */
.wb-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.wb-marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
  width: max-content;
  animation: wb-slide 40s linear infinite;
}
.wb-marquee:hover .wb-marquee__track { animation-play-state: paused; }
@keyframes wb-slide {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

.wb-client-logo {
  flex: none;
  display: grid;
  place-items: center;
  height: clamp(40px, 5vw, 56px);
  width: clamp(90px, 11vw, 140px);
}
.wb-client-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  /* Logos a color → escala de grises apagada; a color al pasar el mouse */
  filter: grayscale(1) brightness(1.7) opacity(.5);
  transition: filter var(--wb-t);
}
.wb-client-logo:hover img { filter: grayscale(0) brightness(1) opacity(1); }

/* Variante texto (si algún cliente no tiene logo) */
.wb-client-logo--text {
  font-family: var(--wb-font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wb-text-3);
  white-space: nowrap;
  width: auto;
  transition: color var(--wb-t);
}
.wb-client-logo--text:hover { color: var(--wb-text-2); }


/* ==========================================================================
   08. SECCIÓN PROBLEMA
   ========================================================================== */

.wb-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px;
  background: var(--wb-line);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--wb-r-lg);
  overflow: hidden;
}
.wb-problem-item {
  background: var(--wb-bg-2);
  padding: clamp(28px, 3vw, 40px) clamp(22px, 2.4vw, 32px);
  position: relative;
  transition: background var(--wb-t);
  min-width: 0;
}
.wb-problem-item:hover { background: rgba(255,107,53,.06); }
.wb-problem-item:hover .wb-problem-item__icon { color: var(--wb-warn); }

.wb-problem-item__num {
  position: absolute;
  top: 16px; right: 20px;
  font-family: var(--wb-font-display);
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 900;
  line-height: 1;
  color: rgba(255,255,255,.04);
  pointer-events: none;
}
.wb-problem-item__icon {
  font-size: 26px;
  line-height: 1;
  margin-bottom: 18px;
  color: var(--wb-text-3);
  transition: color var(--wb-t);
}
.wb-problem-item__title {
  font-family: var(--wb-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--wb-white);
  margin: 0 0 10px;
}
.wb-problem-item__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--wb-text-2);
  margin: 0;
}

/* Celda de cierre destacada */
.wb-problem-item--accent {
  background: rgba(255,107,53,.05);
  border-left: 3px solid var(--wb-warn);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wb-problem-item--accent:hover { background: rgba(255,107,53,.08); }
.wb-problem-item--accent .wb-problem-item__num { color: rgba(255,107,53,.10); }
.wb-problem-item__kicker {
  font-family: var(--wb-font-display);
  font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--wb-white);
  margin: 0 0 14px;
}


/* ==========================================================================
   09. SECCIÓN WCS
   ========================================================================== */

.wb-wcs__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: start;
}
.wb-wcs__left { position: sticky; top: calc(var(--wb-nav-h) + 32px); }

.wb-wcs__badge {
  display: inline-block;
  background: rgba(43,127,225,.15);
  border: 1px solid rgba(43,127,225,.3);
  border-radius: 8px;
  padding: 8px 20px;
  font-family: var(--wb-font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1.1;
  color: var(--wb-blue-light);
  margin-bottom: 24px;
}
.wb-wcs__title { font-size: var(--wb-h3); margin-bottom: 18px; }
.wb-wcs__desc {
  font-size: var(--wb-body);
  color: var(--wb-text-2);
  line-height: 1.7;
  margin: 0 0 clamp(26px, 3vw, 36px);
  max-width: 46ch;
}

.wb-wcs__steps { display: flex; flex-direction: column; gap: 3px; }
.wb-step {
  background: var(--wb-surface);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--wb-r-md);
  padding: clamp(22px, 2.4vw, 28px);
  padding-left: clamp(22px, 5vw, 80px);
  position: relative;
  transition: background var(--wb-t), border-color var(--wb-t), transform var(--wb-t);
}
.wb-step:hover {
  background: var(--wb-blue-wash);
  border-color: rgba(43,127,225,.2);
  transform: translateX(6px);
}
.wb-step__num {
  font-family: var(--wb-font-display);
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .05em;
  color: var(--wb-blue);
  margin-bottom: 6px;
}
.wb-step__title {
  font-family: var(--wb-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--wb-white);
  margin: 0 0 8px;
}
.wb-step__desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--wb-text-2);
  margin: 0;
}
.wb-step__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.wb-step__tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--wb-blue-light);
  background: rgba(43,127,225,.1);
  padding: 3px 10px;
  border-radius: var(--wb-r-pill);
}

/* En desktop el número va absoluto a la izquierda */
@media (min-width: 601px) {
  .wb-step__num { position: absolute; left: 28px; top: clamp(22px, 2.4vw, 28px); margin: 0; }
}


/* ==========================================================================
   10. SECCIÓN SERVICIOS
   ========================================================================== */

.wb-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px;
  background: var(--wb-line-soft);
  border: 1px solid var(--wb-line-soft);
  border-radius: var(--wb-r-lg);
  overflow: hidden;
  margin-top: clamp(36px, 5vw, 64px);
}
.wb-service {
  background: var(--wb-bg);
  padding: clamp(28px, 3vw, 40px) clamp(22px, 2.4vw, 32px);
  position: relative;
  overflow: hidden;
  transition: background var(--wb-t);
  min-width: 0;
}
.wb-service::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--wb-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--wb-t);
}
.wb-service:hover::before { transform: scaleX(1); }
.wb-service:hover { background: rgba(43,127,225,.04); }

.wb-service__num {
  font-family: var(--wb-font-display);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--wb-blue);
  margin-bottom: 14px;
}
.wb-service__title {
  font-family: var(--wb-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--wb-white);
  margin: 0 0 10px;
}
.wb-service__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--wb-text-2);
  margin: 0 0 16px;
}
.wb-service__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wb-service__tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--wb-text-3);
  background: rgba(255,255,255,.04);
  padding: 3px 10px;
  border-radius: var(--wb-r-pill);
}


/* ==========================================================================
   11. SECCIÓN CASOS — grid + popup + galería
   ========================================================================== */

.wb-cases-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 16px;
}

/* Tarjeta de caso: TODO el contenedor es clicable */
.wb-case {
  --wb-case-h: 300px;
  grid-column: span 4;
  position: relative;
  border-radius: var(--wb-r-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--wb-bg-3);
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
}
.wb-case:focus-visible {
  outline: 2px solid var(--wb-blue-light);
  outline-offset: 3px;
}

/* Anchos en el grid de 12 */
.wb-case--4  { grid-column: span 4;  }
.wb-case--5  { grid-column: span 5;  }
.wb-case--6  { grid-column: span 6;  }
.wb-case--7  { grid-column: span 7;  }
.wb-case--8  { grid-column: span 8;  }
.wb-case--12 { grid-column: span 12; }

/* Alturas */
.wb-case--tall { --wb-case-h: 380px; }
.wb-case--mid  { --wb-case-h: 320px; }

.wb-case__inner {
  position: relative;
  min-height: var(--wb-case-h);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(20px, 2.4vw, 28px);
  overflow: hidden;
  isolation: isolate;
}

.wb-case__visual {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.001);
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.wb-case:hover .wb-case__visual,
.wb-case:focus-visible .wb-case__visual { transform: scale(1.06); }

/* Encuadre alternativo cuando la imagen trae texto en un lado */
.wb-case__visual--left   { background-position: left center; }
.wb-case__visual--right  { background-position: right center; }
.wb-case__visual--top    { background-position: center top; }
.wb-case__visual--bottom { background-position: center bottom; }

.wb-case__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(4,4,10,.94) 0%,
    rgba(4,4,10,.78) 32%,
    rgba(4,4,10,.28) 66%,
    rgba(4,4,10,.10) 100%);
  transition: opacity var(--wb-t);
}
.wb-case:hover .wb-case__overlay { opacity: .92; }

.wb-case__content { position: relative; display: block; }
.wb-case__industry {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--wb-blue-light);
  margin-bottom: 8px;
}
.wb-case__title {
  display: block;
  font-family: var(--wb-font-display);
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.3rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--wb-white);
  margin: 0 0 12px;
  text-wrap: pretty;
}
.wb-case__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.6vw, 20px);
}
.wb-case__metric-val {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--wb-green);
  line-height: 1.3;
}
.wb-case__metric-label {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: rgba(255,255,255,.62);
  line-height: 1.3;
}

/* Señal de "clicable" */
.wb-case__cue {
  position: absolute;
  top: clamp(16px, 2vw, 20px);
  right: clamp(16px, 2vw, 20px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(43,127,225,.9);
  padding: 7px 13px;
  border-radius: var(--wb-r-pill);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--wb-t), transform var(--wb-t);
  pointer-events: none;
}
.wb-case:hover .wb-case__cue,
.wb-case:focus-visible .wb-case__cue { opacity: 1; transform: none; }

/* El contenido del popup vive en un <template> dentro de la tarjeta */
.wb-case__detail { display: none; }

/* — POPUP — */
/* El contenedor que aloja el popup no debe ocupar espacio ni generar scroll */
.wb-modal-host.wb-modal-host {
  padding: 0;
  min-height: 0;
}

.wb-modal {
  position: fixed;
  inset: 0;
  z-index: var(--wb-z-modal);
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 40px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.wb-modal.is-open { opacity: 1; visibility: visible; }

.wb-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3,3,8,.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 0;
  padding: 0;
  cursor: pointer;
}

.wb-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 900px;
  max-height: min(88svh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--wb-bg-2);
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-lg);
  box-shadow: 0 40px 120px rgba(0,0,0,.7);
  overflow: hidden;
  transform: translateY(16px) scale(.98);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.wb-modal.is-open .wb-modal__dialog { transform: none; }

.wb-modal__close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  background: rgba(6,6,15,.72);
  color: var(--wb-white);
  border: 1px solid var(--wb-line);
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background var(--wb-t-fast), border-color var(--wb-t-fast), transform var(--wb-t-fast);
}
.wb-modal__close:hover {
  background: var(--wb-blue);
  border-color: var(--wb-blue);
  transform: rotate(90deg);
}

.wb-modal__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(28px, 4vw, 48px);
}

/* Cabecera del caso dentro del popup */
.wb-case-detail__industry {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wb-blue-light);
  margin-bottom: 12px;
}
/* 1) el nombre del caso */
.wb-case-detail__name {
  font-family: var(--wb-font-display);
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--wb-white);
  margin: 0 0 10px;
  padding-right: 48px;   /* deja aire para la X */
}
.wb-case-detail__claim {
  font-family: var(--wb-font-display);
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.35rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--wb-blue-light);
  margin: 0 0 clamp(20px, 3vw, 28px);
}
.wb-case-detail__hr {
  height: 1px;
  background: var(--wb-line);
  border: 0;
  margin: 0 0 clamp(20px, 3vw, 28px);
}

/* 2) el texto del caso */
.wb-case-detail__body > p {
  font-size: var(--wb-body);
  line-height: 1.75;
  color: #C8C8DC;
  margin: 0 0 1.15em;
}
.wb-case-detail__body > p:last-child { margin-bottom: 0; }
.wb-case-detail__body strong { color: var(--wb-white); font-weight: 700; }

/* Métricas de impacto */
.wb-case-detail__impact {
  margin-top: clamp(26px, 3.5vw, 36px);
  padding: clamp(20px, 2.6vw, 28px);
  background: rgba(0,200,150,.05);
  border: 1px solid rgba(0,200,150,.16);
  border-radius: var(--wb-r-md);
}
.wb-case-detail__impact-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wb-green);
  margin-bottom: 16px;
}
.wb-impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(14px, 2vw, 22px);
}
.wb-impact__val {
  font-family: var(--wb-font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--wb-green);
  display: block;
}
.wb-impact__label {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--wb-text-2);
  margin-top: 4px;
}

/* 3) la galería */
.wb-case-detail__gallery-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wb-text-3);
  margin: clamp(30px, 4vw, 44px) 0 16px;
}
.wb-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.wb-gallery figure {
  margin: 0;
  border-radius: var(--wb-r-md);
  overflow: hidden;
  background: var(--wb-bg-3);
  border: 1px solid var(--wb-line-soft);
}
/* Una imagen sola ocupa el ancho completo (evita huecos raros) */
.wb-gallery figure:only-child { grid-column: 1 / -1; }
/* Si el total es impar, la última se estira */
.wb-gallery figure:nth-child(odd):last-child { grid-column: 1 / -1; }

.wb-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--wb-t-slow);
}
.wb-gallery figure:hover img { transform: scale(1.03); }
.wb-gallery figcaption {
  font-size: 12px;
  color: var(--wb-text-3);
  padding: 10px 14px;
}

.wb-modal__foot {
  padding: clamp(20px, 3vw, 28px) clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--wb-line);
  background: rgba(255,255,255,.02);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.wb-modal__foot-text { font-size: 13px; color: var(--wb-text-3); margin: 0; }


/* ==========================================================================
   12. SECCIÓN NÚMEROS (+ barras)
   ========================================================================== */

.wb-numbers-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 1px;
  background: var(--wb-line-soft);
  border: 1px solid var(--wb-line-soft);
  border-radius: var(--wb-r-lg);
  overflow: hidden;
}
.wb-number {
  background: var(--wb-bg);
  padding: clamp(30px, 3.4vw, 48px) clamp(16px, 2vw, 28px);
  text-align: center;
  transition: background var(--wb-t);
  min-width: 0;
}
.wb-number:hover { background: rgba(43,127,225,.05); }

.wb-number__big {
  font-family: var(--wb-font-display);
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--wb-white);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.wb-number__big span { color: var(--wb-blue-light); }

/* Barra de progreso: se llena al entrar en pantalla (una vez) */
.wb-number__bar {
  height: 3px;
  background: rgba(255,255,255,.07);
  border-radius: 2px;
  overflow: hidden;
  margin: 0 auto 12px;
  max-width: 120px;
}
.wb-number__bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--wb-blue), var(--wb-cyan));
  transition: width 1.4s cubic-bezier(.2,.7,.2,1);
}
.wb-number.is-visible .wb-number__bar i { width: var(--wb-fill, 70%); }

.wb-number__desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--wb-text-2);
}

.wb-member {
  text-align: center;
  margin-top: clamp(32px, 4vw, 48px);
}
.wb-member__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wb-text-3);
  margin-bottom: 16px;
}
/* sab-marketing-w-scaled.webp también es un cuadrado 1920x1920 con la marca
   en una banda central de 1278x527 (proporción real 2.4:1). Mismo recorte
   por CSS que el logo de Walker Brand. */
.wb-member__logo img {
  --wb-sab-w: clamp(130px, 17vw, 180px);
  display: block;
  width: var(--wb-sab-w);
  height: calc(var(--wb-sab-w) / 2.8);
  max-width: 100%;
  margin-inline: auto;
  object-fit: cover;
  object-position: center;
  opacity: .8;
  transition: opacity var(--wb-t);
}
.wb-member__logo:hover img { opacity: 1; }
.wb-member__text {
  font-family: var(--wb-font-display);
  font-size: clamp(.95rem, .9rem + .3vw, 1.1rem);
  font-weight: 700;
  color: var(--wb-text-2);
  margin-top: 14px;
}


/* ==========================================================================
   13. TARJETAS DE BLOG  (reutilizable: home, archivo, relacionados)
   ========================================================================== */

.wb-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(16px, 2vw, 20px);
  margin-top: clamp(36px, 5vw, 64px);
}
.wb-post-card {
  display: flex;
  flex-direction: column;
  background: var(--wb-bg-2);
  border: 1px solid var(--wb-line-soft);
  border-radius: var(--wb-r-md);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--wb-t), transform var(--wb-t), box-shadow var(--wb-t);
  min-width: 0;
}
.wb-post-card:hover,
.wb-post-card:focus-visible {
  border-color: rgba(43,127,225,.3);
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(0,0,0,.45);
}
.wb-post-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #0a1628, #1B5EB5);
  display: grid;
  place-items: center;
  flex: none;
}
.wb-post-card__thumb img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--wb-t-slow);
}
.wb-post-card:hover .wb-post-card__thumb img { transform: scale(1.05); }
/* Placeholder cuando no hay imagen destacada */
.wb-post-card__thumb-label {
  font-family: var(--wb-font-display);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  text-align: center;
  padding: 0 16px;
}
.wb-thumb--a { background: linear-gradient(135deg, #0a1628, #1B5EB5); }
.wb-thumb--b { background: linear-gradient(135deg, #0a1a12, #0d4a28); }
.wb-thumb--c { background: linear-gradient(135deg, #1a0a06, #5c2000); }

.wb-post-card__body {
  padding: clamp(20px, 2.4vw, 28px);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.wb-post-card__cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--wb-blue-light);
  margin-bottom: 12px;
}
.wb-post-card__title {
  font-family: var(--wb-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.32;
  color: var(--wb-white);
  margin: 0 0 12px;
}
.wb-post-card__excerpt {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--wb-text-2);
  margin: 0 0 20px;
  flex: 1;
}
.wb-post-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--wb-blue-light);
  margin-top: auto;
}
.wb-post-card:hover .wb-post-card__link { color: var(--wb-cyan); }
.wb-post-card__meta {
  font-size: 12px;
  color: var(--wb-text-3);
  margin-bottom: 10px;
}


/* ==========================================================================
   14. CTA FINAL
   ========================================================================== */

.wb-cta { position: relative; overflow: hidden; background: var(--wb-bg-3); }
.wb-cta__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(43,127,225,.14) 0%, transparent 70%);
  pointer-events: none;
}
.wb-cta__frame {
  position: absolute;
  inset: clamp(16px, 4vw, 60px);
  border: 1px solid rgba(43,127,225,.15);
  border-radius: var(--wb-r-xl);
  pointer-events: none;
}
.wb-cta__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.wb-cta__title {
  font-family: var(--wb-font-display);
  font-size: clamp(2.1rem, 1.4rem + 3.4vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 24px 0;
}
.wb-cta__title em { font-style: normal; color: var(--wb-blue-light); }
.wb-cta__sub {
  font-size: var(--wb-lead);
  color: var(--wb-text-2);
  line-height: 1.65;
  margin: 0 auto clamp(32px, 4vw, 48px);
  max-width: 56ch;
}


/* ==========================================================================
   15. FOOTER
   ========================================================================== */

.wb-footer.wb-footer { padding: clamp(56px, 7vw, 80px) 0 36px; }
.wb-footer {
  border-top: 1px solid rgba(255,255,255,.06);
  background: var(--wb-bg);
}
.wb-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: clamp(32px, 4vw, 60px);
  margin-bottom: clamp(40px, 5vw, 60px);
}
.wb-footer__brand-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--wb-text-3);
  margin: 16px 0 0;
  max-width: 32ch;
}
.wb-footer__col-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wb-text-3);
  margin-bottom: 18px;
}
.wb-footer__links {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.wb-footer__links a {
  font-size: 14px;
  line-height: 1.45;
  color: var(--wb-text-2);
  text-decoration: none;
  transition: color var(--wb-t-fast);
}
.wb-footer__links a:hover,
.wb-footer__links a:focus-visible { color: var(--wb-white); }

.wb-social { display: flex; gap: 12px; margin-top: 24px; }
.wb-social a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--wb-line);
  border-radius: 8px;
  color: var(--wb-text-2);
  text-decoration: none;
  transition: border-color var(--wb-t-fast), color var(--wb-t-fast), background var(--wb-t-fast);
}
.wb-social a:hover {
  border-color: var(--wb-blue);
  color: var(--wb-blue-light);
  background: rgba(43,127,225,.08);
}
.wb-social svg { width: 17px; height: 17px; fill: currentColor; }

.wb-footer__bottom {
  border-top: 1px solid var(--wb-line-soft);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.wb-footer__copy { font-size: 13px; color: var(--wb-text-3); }
.wb-footer__sab {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wb-text-3);
  text-decoration: none;
}
.wb-footer__sab img {
  display: block;
  width: 108px;
  height: 39px;          /* 108 / 2.8 — recorte del cuadrado con blanco */
  object-fit: cover;
  object-position: center;
  opacity: .75;
  transition: opacity var(--wb-t);
}
.wb-footer__sab:hover img { opacity: 1; }


/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */

/* — ≥1441px: un poco más de aire — */
@media (min-width: 1441px) {
  .wb-cases-grid { gap: 20px; }
}

/* — ≤1200px — */
@media (max-width: 1200px) {
  /* 5 números en 3 columnas dejaría un hueco en la última fila.
     Con 6 columnas: fila 1 = 3 celdas (span 2) · fila 2 = 2 celdas (span 3). */
  .wb-numbers-grid { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .wb-numbers-grid > .wb-number { grid-column: span 2; }
  .wb-numbers-grid > .wb-number:nth-child(4),
  .wb-numbers-grid > .wb-number:nth-child(5) { grid-column: span 3; }

  .wb-hero__inner { grid-template-columns: 1fr .9fr; }
}

/* — ≤1024px (tablet horizontal) — */
@media (max-width: 1024px) {
  :root { --wb-nav-h: 70px; }

  .wb-hero__inner  { grid-template-columns: 1fr; gap: 44px; }
  .wb-hero__card   { max-width: 560px; }
  .wb-hero__sub    { max-width: 56ch; }

  .wb-wcs__layout  { grid-template-columns: 1fr; gap: 44px; }
  .wb-wcs__left    { position: static; }
  .wb-wcs__desc    { max-width: 60ch; }

  .wb-problem-grid  { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .wb-services-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* 3 artículos en 2 columnas: el impar se estira para no dejar hueco */
  .wb-blog-grid     { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .wb-blog-grid > .wb-post-card:nth-child(odd):last-child { grid-column: 1 / -1; }
  .wb-blog-grid > .wb-post-card:nth-child(odd):last-child .wb-post-card__thumb { aspect-ratio: 21 / 7; }

  /* Casos: todo a 2 columnas y misma altura → grid predecible */
  .wb-case,
  .wb-case--4, .wb-case--5, .wb-case--6,
  .wb-case--7, .wb-case--8, .wb-case--12 { grid-column: span 6; }
  .wb-case, .wb-case--tall, .wb-case--mid { --wb-case-h: 300px; }

  .wb-footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* — ≤900px: se activa el menú móvil — */
@media (max-width: 900px) {
  .wb-nav__inner > .wb-menu { display: none; }   /* menú horizontal fuera */
  .wb-burger      { display: grid; place-items: center; }
  .wb-nav__panel  { display: block; }

  .wb-numbers-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .wb-numbers-grid > .wb-number { grid-column: span 1; }
  /* 5 celdas en 2 columnas: la última a ancho completo (sin huecos) */
  .wb-numbers-grid > .wb-number:nth-child(4) { grid-column: span 1; }
  .wb-numbers-grid > .wb-number:nth-child(5) { grid-column: 1 / -1; }

  .wb-step:hover { transform: none; }            /* sin desplazamiento táctil */
  .wb-cta__frame { inset: 0; border-radius: 0; border-left: 0; border-right: 0; }
}

/* — ≤768px (tablet vertical / móvil grande) — */
@media (max-width: 768px) {
  .wb-blog-grid    { grid-template-columns: 1fr; }
  .wb-blog-grid > .wb-post-card:nth-child(odd):last-child { grid-column: auto; }
  .wb-blog-grid > .wb-post-card:nth-child(odd):last-child .wb-post-card__thumb { aspect-ratio: 16 / 9; }
  .wb-gallery      { grid-template-columns: 1fr; }
  .wb-gallery figure:nth-child(odd):last-child { grid-column: auto; }

  .wb-modal        { padding: 0; }
  .wb-modal__dialog{
    max-width: 100%;
    max-height: 100svh;
    height: 100svh;
    border-radius: 0;
    border: 0;
  }
  .wb-modal__scroll{ padding: 68px 20px 40px; }
  .wb-case-detail__name { padding-right: 0; }

  .wb-section-head { align-items: flex-start; }
}

/* — ≤600px (móvil) — */
@media (max-width: 600px) {
  .wb-problem-grid  { grid-template-columns: 1fr; }
  .wb-services-grid { grid-template-columns: 1fr; }

  /* Casos: una columna */
  .wb-case,
  .wb-case--4, .wb-case--5, .wb-case--6,
  .wb-case--7, .wb-case--8, .wb-case--12 { grid-column: 1 / -1; }
  .wb-case, .wb-case--tall, .wb-case--mid { --wb-case-h: 260px; }
  .wb-cases-grid { gap: 12px; }
  /* En táctil no hay hover: la señal siempre visible */
  .wb-case__cue { opacity: 1; transform: none; }

  .wb-numbers-grid { grid-template-columns: 1fr; }
  .wb-numbers-grid > .wb-number,
  .wb-numbers-grid > .wb-number:nth-child(4),
  .wb-numbers-grid > .wb-number:nth-child(5) { grid-column: 1 / -1; }
  .wb-number { padding-block: 28px; }

  .wb-footer__grid   { grid-template-columns: 1fr; gap: 36px; }
  .wb-footer__bottom { flex-direction: column; align-items: flex-start; }
  /* Objetivos táctiles cómodos en el footer (mín. ~44px de alto efectivo) */
  .wb-footer__links      { gap: 2px; }
  .wb-footer__links a    { display: block; padding: 11px 0; }
  .wb-social a           { width: 44px; height: 44px; }

  .wb-hero { min-height: auto; padding-bottom: 72px; }
  .wb-hero__metrics { gap: 10px; }
  .wb-scroll-hint { display: none; }

  /* Botones a ancho completo: nada de CTAs diminutos en móvil */
  .wb-actions { gap: 12px; }
  .wb-actions > .wb-btn,
  .wb-actions > .wb-btn-ghost { width: 100%; }

  .wb-section-head > .wb-btn-ghost { width: 100%; }

  .wb-impact-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

/* — ≤400px (móviles pequeños) — */
@media (max-width: 400px) {
  .wb-hero__metrics { grid-template-columns: 1fr; }
  .wb-case__metrics { gap: 10px; }
  .wb-logo img { --wb-logo-w: 140px; }
  .wb-footer .wb-logo img { --wb-logo-w: 168px; }
  .wb-impact-grid { grid-template-columns: 1fr; }
}

/* — Landscape muy bajo (móvil acostado) — */
@media (max-height: 520px) and (orientation: landscape) {
  .wb-hero { min-height: auto; padding-top: calc(var(--wb-nav-h) + 32px); padding-bottom: 56px; }
  .wb-scroll-hint { display: none; }
  .wb-modal__dialog { max-height: 100svh; }
}


/* ==========================================================================
   17. ACCESIBILIDAD / MOTION / PRINT
   ========================================================================== */

/* Foco visible coherente en todo el sitio */
body a:focus-visible,
body button:focus-visible,
body [tabindex]:focus-visible {
  outline: 2px solid var(--wb-blue-light);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Respeta "reducir movimiento" */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .wb-reveal,
  .wb-reveal-children > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .wb-marquee__track { animation: none; }
  .wb-scroll-hint    { animation: none; }
  .wb-number__bar i  { transition: none; width: var(--wb-fill, 70%); }

  .wb-case__visual,
  .wb-post-card__thumb img,
  .wb-gallery img { transition: none; }
  .wb-case:hover .wb-case__visual,
  .wb-post-card:hover .wb-post-card__thumb img,
  .wb-gallery figure:hover img { transform: none; }

  .wb-step:hover,
  .wb-btn:hover,
  .wb-post-card:hover { transform: none; }

  .wb-modal,
  .wb-modal__dialog,
  .wb-nav__panel { transition: none; }
}

/* Dispositivos sin hover: no dependas de :hover para nada esencial */
@media (hover: none) {
  .wb-case__cue { opacity: 1; transform: none; }
  .wb-client-logo img { filter: grayscale(1) brightness(1.7) opacity(.6); }
}

@media print {
  .wb-nav, .wb-scroll-hint, .wb-modal, .wb-nav__scrim, .wb-nav__panel { display: none !important; }
  body { background: #fff; color: #000; }
}