/* ============================================================
   WOXANT.ai — estilos por sección (0 a 5)
   MOBILE FIRST. Breakpoints: 640 / 768 / 1024 / 1280 / 1400
   ============================================================ */

/* ============================================================
   0 · BARRA DE ANUNCIO — 44px, fondo navy
   ============================================================ */
.announce {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--wox-announce-h);
  background: var(--wox-navy);
  color: var(--wox-on-dark);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.announce[hidden] { display: none; }

.announce__inner {
  width: 100%;
  max-width: 1400px;
  min-width: 0;          /* permite que los hijos se encojan */
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: var(--wox-fs-micro);
  overflow: hidden;      /* nada se escapa de la franja de 44px */
}

.announce__tag {
  flex: none;
  color: var(--wox-green);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
}

.announce__text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: color-mix(in srgb, var(--wox-on-dark) 92%, transparent);
}
/* En móvil el titular es largo: se recorta con ellipsis dentro de su caja.
   min-width:0 en el flex-item es lo que permite que el ellipsis actúe. */

.announce__link {
  flex: none;
  color: var(--wox-cyan);          /* cian sobre navy: contraste alto, OK */
  font-weight: 600;
  transition: color var(--wox-t-fast) var(--wox-ease);
}
.announce__link:hover { color: var(--wox-cyan-glow); }

.announce__close {
  flex: none;
  color: color-mix(in srgb, var(--wox-on-dark) 70%, transparent);
  font-size: 14px;
  line-height: 1;
  padding: .375rem;
  border-radius: var(--wox-radius-pill);
  transition: color var(--wox-t-fast) var(--wox-ease),
              background-color var(--wox-t-fast) var(--wox-ease);
}
.announce__close:hover { color: var(--wox-on-dark); background: color-mix(in srgb, var(--wox-on-dark) 10%, transparent); }

/* En móvil el titular es largo: se recorta con ellipsis y el enlace
   "Conocer" se oculta para que la barra no reviente los 44px. */
/* Versión corta en móvil, completa desde 768px. */
.announce__text--largo { display: none; }

.announce__link { display: none; }
@media (min-width: 768px) {
  .announce__inner { padding: 0 2rem; font-size: var(--wox-fs-sec); gap: .75rem; }
  .announce__text  { white-space: normal; }
  .announce__text--corto { display: none; }
  .announce__text--largo { display: block; }
  .announce__link  { display: inline; }
}

/* ============================================================
   1 · HEADER FIJO — 72px
   ============================================================ */
.header {
  position: fixed;
  top: var(--wox-announce-h);
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--wox-header-h);
  background: var(--wox-surface);
  transition: background-color var(--wox-t-comp) var(--wox-ease),
              box-shadow var(--wox-t-comp) var(--wox-ease),
              backdrop-filter var(--wox-t-comp) var(--wox-ease),
              top var(--wox-t-comp) var(--wox-ease);
}

/* Al scrollear: translúcido + blur + sombra */
.header.is-scrolled {
  background: color-mix(in srgb, var(--wox-on-dark) 80%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--wox-shadow-lg);
}

.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo {
  font-family: var(--wox-font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: var(--wox-tracking);
  color: var(--wox-navy);
  white-space: nowrap;
}
.logo__tld { color: var(--wox-cyan-deep); }  /* acento sobre claro: cyan-deep */

/* Nav de escritorio: oculta en móvil (va la hamburguesa) */
.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: 1.5rem; }
.nav__list a {
  font-size: var(--wox-fs-sec);
  font-weight: 500;
  color: var(--wox-navy);
  transition: color var(--wox-t-fast) var(--wox-ease);
}
.nav__list a:hover { color: var(--wox-cyan-deep); }

.header__actions { display: none; align-items: center; gap: 1rem; }
.header__lang,
.header__login {
  font-size: var(--wox-fs-sec);
  font-weight: 500;
  color: var(--wox-navy);
  white-space: nowrap;
  transition: color var(--wox-t-fast) var(--wox-ease);
}
.header__lang:hover,
.header__login:hover { color: var(--wox-cyan-deep); }
.header__cta { padding: .625rem 1.25rem; }

/* Hamburguesa */
.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: var(--wox-radius-btn);
  transition: background-color var(--wox-t-fast) var(--wox-ease);
}
.burger:hover { background: var(--wox-surface-alt); }
.burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--wox-navy);
  border-radius: 2px;
  transition: transform var(--wox-t-comp) var(--wox-ease),
              opacity var(--wox-t-fast) var(--wox-ease);
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Panel móvil */
.mobile-menu {
  position: absolute;
  top: var(--wox-header-h);
  left: 0;
  right: 0;
  background: var(--wox-surface);
  border-top: 1px solid var(--wox-border);
  box-shadow: var(--wox-shadow-lg);
  padding: 1rem 2rem 1.5rem;
  max-height: calc(100vh - var(--wox-offset-top));
  overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__list { display: flex; flex-direction: column; }
.mobile-menu__list a {
  display: block;
  padding: .875rem 0;
  font-size: var(--wox-fs-body);
  font-weight: 500;
  color: var(--wox-navy);
  border-bottom: 1px solid var(--wox-border);
}
.mobile-menu__list a:hover { color: var(--wox-cyan-deep); }
.mobile-menu__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .875rem;
  padding-top: 1.25rem;
}
.mobile-menu__actions .btn { width: 100%; }

@media (min-width: 1024px) {
  .nav, .header__actions { display: flex; }
  .burger, .mobile-menu { display: none !important; }
}

/* ============================================================
   2 · HERO
   ============================================================
   Fase 6 fix: el fondo era #000 (negro puro, heredado del sitio viejo).
   En la version CLARA eso hacia que los primeros 810px del sitio —lo
   primero que ve el visitante— fueran oscuros. Ahora arranca en Blanco
   Tecnico; la inversion completa de la seccion esta al final del archivo,
   en el bloque "HERO CLARO".
   ============================================================ */
.hero {
  position: relative;
  margin-top: var(--wox-offset-top);
  min-height: 560px;
  height: 56.25vw;                       /* 16:9 */
  max-height: calc(100vh - 5rem);
  background: var(--wox-bg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- visualización: núcleo + nodos --- */
.hero__viz {
  position: absolute;
  inset: 0;
  z-index: 0;                            /* capa de fondo */
  display: grid;
  place-items: center;
  opacity: .5;                           /* atenuado: el texto manda */
}
@media (min-width: 1024px) { .hero__viz { opacity: .7; } }

/* El núcleo se corre HACIA ARRIBA, fuera de la columna de texto: si queda
   en el centro exacto, su disco cian aparece detrás del subtítulo y del
   botón. Así se ve entero y no compite con la lectura. */
.hero__viz > .hero-core { transform: translateY(-30vh); }
@media (max-width: 767px) {
  .hero__viz > .hero-core { transform: translateY(-24vh); }
}

/* Capa de oscurecimiento entre el gráfico y el texto.
   Radial: bien oscura en el centro (columna de texto) y transparente en
   los bordes, para que los nodos se sigan viendo. */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Banda oscura sobre la columna de texto (elipse ancha y baja) para que el
     título/subtítulo/botón tengan contraste pleno, dejando respirar el núcleo
     y las líneas por arriba y por abajo. */
  background:
    radial-gradient(ellipse 46% 30% at 50% 52%,
                    color-mix(in srgb, var(--wox-navy) 92%, transparent) 0%,
                    color-mix(in srgb, var(--wox-navy) 80%, transparent) 55%,
                    color-mix(in srgb, var(--wox-navy) 35%, transparent) 80%,
                    color-mix(in srgb, var(--wox-navy) 0%, transparent) 100%),
    linear-gradient(to bottom,
                    color-mix(in srgb, var(--wox-navy) 45%, transparent) 0%,
                    color-mix(in srgb, var(--wox-navy) 10%, transparent) 32%,
                    color-mix(in srgb, var(--wox-navy) 10%, transparent) 68%,
                    color-mix(in srgb, var(--wox-navy) 45%, transparent) 100%);
}

.hero__links {
  position: absolute;
  width: min(760px, 92vw);
  aspect-ratio: 1;
  opacity: .55;
}
.hero-link {
  animation: dashFlow 1.6s linear infinite;
}

.hero-core {
  position: relative;
  width: clamp(70px, 10vw, 104px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    var(--wox-cyan-glow),
    var(--wox-cyan) 55%,
    var(--wox-navy-soft));
  display: grid;
  place-items: center;
  box-shadow: 0 0 60px color-mix(in srgb, var(--wox-cyan) 45%, transparent);
  animation: pulseGlow 3s ease-in-out infinite;
}
.hero-core__ring {
  position: absolute;
  inset: -14px;
  border: 1px solid color-mix(in srgb, var(--wox-cyan) 35%, transparent);
  border-radius: 50%;
}
.hero-core__label {
  font-family: var(--wox-font-display);
  font-weight: 700;
  font-size: clamp(9px, 1.3vw, 12px);
  letter-spacing: .06em;
  color: var(--wox-on-accent);
}

/* Nodos satélite.
   IMPORTANTE — dos capas:
   .hero-node     POSICIONA con transform: translate(...)  (sin animación)
   .hero-node__in ANIMA con el keyframe float              (sin posición)
   Si un mismo elemento hiciera las dos cosas, el keyframe pisaría el
   transform de posición y los seis nodos colapsarían en el centro.
   El radio es amplio a propósito: los nodos orbitan POR FUERA de la
   columna de texto, así no la pisan. */
.hero-node {
  position: absolute;
  --orbit-x: clamp(150px, 34vw, 520px);
  --orbit-y: clamp(130px, 20vw, 300px);
}
.hero-node__in {
  display: inline-block;
  padding: .375rem .75rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--wox-navy) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--wox-cyan) 30%, transparent);
  color: var(--wox-on-dark);
  font-size: clamp(10px, 1.15vw, 13px);
  font-weight: 500;
  white-space: nowrap;
  animation: float 7s ease-in-out infinite;
}

/* Elipse: más ancha que alta, para despejar el centro donde va el texto */
.hero-node--1 { transform: translate(calc(var(--orbit-x) * -1), calc(var(--orbit-y) * -1)); }
.hero-node--2 { transform: translate(calc(var(--orbit-x) * -1.06), 0); }
.hero-node--3 { transform: translate(calc(var(--orbit-x) * -1), var(--orbit-y)); }
.hero-node--4 { transform: translate(var(--orbit-x), calc(var(--orbit-y) * -1)); }
.hero-node--5 { transform: translate(calc(var(--orbit-x) * 1.06), 0); }
.hero-node--6 { transform: translate(var(--orbit-x), var(--orbit-y)); }

.hero-node--1 .hero-node__in { animation-delay: 0s; }
.hero-node--2 .hero-node__in { animation-delay: .6s; }
.hero-node--3 .hero-node__in { animation-delay: 1.2s; }
.hero-node--4 .hero-node__in { animation-delay: 1.8s; }
.hero-node--5 .hero-node__in { animation-delay: 2.4s; }
.hero-node--6 .hero-node__in { animation-delay: 3s; }

/* Badge EN VIVO */
.hero__live {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .375rem .75rem;
  border-radius: var(--wox-radius-pill);
  background: color-mix(in srgb, var(--wox-navy) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--wox-on-dark) 18%, transparent);
  color: var(--wox-on-dark);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
}
.hero__live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--wox-green);
}
@media (min-width: 768px) { .hero__live { top: 1.5rem; right: 2rem; } }

/* Texto del hero */
.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.hero__title {
  color: var(--wox-on-dark);
  max-width: 20ch;
  text-shadow: 0 2px 24px color-mix(in srgb, var(--wox-navy) 75%, transparent);
}
.hero__sub {
  color: color-mix(in srgb, var(--wox-on-dark) 82%, transparent);
  max-width: 52ch;
  font-size: clamp(14px, 1.6vw, 18px);
  text-shadow: 0 1px 12px color-mix(in srgb, var(--wox-navy) 70%, transparent);
}
.hero__cta { margin-top: .25rem; }

/* ============================================================
   3 · SELECTOR DE INDUSTRIAS — gradiente hero
   ============================================================ */
.industrias {
  position: relative;
  min-height: 90vh;
  background: var(--wox-grad-hero);
  overflow: hidden;
  padding: 64px 0;
  display: flex;
  align-items: center;
}
@media (min-width: 768px) { .industrias { padding: 88px 0; } }

.industrias__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.industrias__orb--1 {
  width: 460px; height: 460px;
  top: -120px; left: -140px;
  background: color-mix(in srgb, var(--wox-cyan) 18%, transparent);
}
.industrias__orb--2 {
  width: 520px; height: 520px;
  bottom: -180px; right: -160px;
  background: color-mix(in srgb, var(--wox-blue) 28%, transparent);
}

.industrias__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

.industrias__chip {
  background: color-mix(in srgb, var(--wox-on-dark) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--wox-on-dark) 20%, transparent);
  color: color-mix(in srgb, var(--wox-on-dark) 92%, transparent);
  font-weight: 500;
}

.industrias__title { color: var(--wox-on-dark); }

.industrias__sub {
  color: color-mix(in srgb, var(--wox-on-dark) 75%, transparent);
  max-width: 56ch;
  font-size: clamp(14px, 1.5vw, 18px);
}

/* Chips de industria: 2 columnas en móvil, fila en escritorio */
.industrias__chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  width: 100%;
  max-width: 420px;
  margin-top: .5rem;
}
@media (min-width: 768px) {
  .industrias__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: none;
    gap: 1rem;
  }
}

.ind-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem .75rem;
  min-height: 92px;
  font-size: var(--wox-fs-sec);
  font-weight: 500;
  transition: background-color var(--wox-t-comp) var(--wox-ease),
              border-color var(--wox-t-comp) var(--wox-ease),
              transform var(--wox-t-comp) var(--wox-ease);
}
@media (min-width: 768px) {
  .ind-chip { width: 140px; min-height: 104px; font-size: var(--wox-fs-body); }
}
.ind-chip:hover {
  background: color-mix(in srgb, var(--wox-on-dark) 12%, transparent);
  transform: translateY(-2px);
}
.ind-chip.is-active {
  background: color-mix(in srgb, var(--wox-cyan) 14%, transparent);
  border-color: var(--wox-cyan);
}
.ind-chip__icon { font-size: 26px; line-height: 1; }
.ind-chip:focus-visible { outline: 3px solid var(--wox-cyan); outline-offset: 3px; }

.industrias__hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: color-mix(in srgb, var(--wox-on-dark) 70%, transparent);
  font-size: var(--wox-fs-sec);
}
.industrias__ping {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--wox-cyan);
}

/* --- Mockup de la app (propio, sin capturas ajenas) --- */
.mockup {
  width: 100%;
  margin-top: 1rem;
  /* el cambio de industria transiciona en 0.7s */
  transition: opacity var(--wox-t-industry) var(--wox-ease),
              transform var(--wox-t-industry) var(--wox-ease);
}
.mockup.is-switching { opacity: .35; transform: scale(.99); }

.mockup__frame {
  background: var(--wox-panel-deep);
  border: 1px solid color-mix(in srgb, var(--wox-on-dark) 14%, transparent);
  border-radius: var(--wox-radius-card);
  box-shadow: var(--wox-shadow-2xl);
  overflow: hidden;
  text-align: left;
}

.mockup__bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .625rem .875rem;
  background: color-mix(in srgb, var(--wox-on-dark) 5%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--wox-on-dark) 8%, transparent);
}
.mockup__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wox-on-dark) 22%, transparent);
}
.mockup__title {
  margin-left: .5rem;
  color: color-mix(in srgb, var(--wox-on-dark) 62%, transparent);
  font-size: var(--wox-fs-micro);
}

/* Móvil: sólo el chat. Escritorio: 3 columnas. */
.mockup__body { display: grid; grid-template-columns: 1fr; min-height: 260px; }
.mockup__inbox, .mockup__panel { display: none; }
@media (min-width: 900px) {
  .mockup__body { grid-template-columns: 230px 1fr 240px; min-height: 340px; }
  .mockup__inbox, .mockup__panel { display: block; }
}

.mockup__inbox {
  border-right: 1px solid color-mix(in srgb, var(--wox-on-dark) 8%, transparent);
  padding: .75rem;
}
.mockup__search {
  padding: .5rem .625rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--wox-on-dark) 6%, transparent);
  color: color-mix(in srgb, var(--wox-on-dark) 40%, transparent);
  font-size: var(--wox-fs-micro);
  margin-bottom: .625rem;
}
.mockup__list li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem;
  border-radius: 8px;
  transition: background-color var(--wox-t-fast) var(--wox-ease);
}
.mockup__list li.is-active { background: color-mix(in srgb, var(--wox-cyan) 10%, transparent); }
.mockup__list li:hover { background: color-mix(in srgb, var(--wox-on-dark) 6%, transparent); }

.av {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--wox-grad-acento);
  color: var(--wox-on-dark);
  font-size: 10px;
  font-weight: 700;
}
.av--lg { width: 34px; height: 34px; font-size: 11px; }
.av--xl { width: 56px; height: 56px; font-size: 16px; }

.mk-txt { display: flex; flex-direction: column; min-width: 0; }
.mk-txt b {
  color: var(--wox-on-dark);
  font-size: var(--wox-fs-micro);
  font-weight: 600;
}
.mk-txt i {
  color: color-mix(in srgb, var(--wox-on-dark) 45%, transparent);
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mockup__chat { display: flex; flex-direction: column; }
.mockup__chat-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem .875rem;
  border-bottom: 1px solid color-mix(in srgb, var(--wox-on-dark) 8%, transparent);
}
.mk-online {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--wox-green);
  margin-right: .3rem;
}

.mockup__msgs {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .875rem;
}
.bub {
  max-width: 78%;
  padding: .5rem .75rem;
  border-radius: 12px;
  font-size: var(--wox-fs-micro);
  line-height: 1.45;
}
.bub--in  { align-self: flex-start;
  background: color-mix(in srgb, var(--wox-on-dark) 9%, transparent);
  color: var(--wox-on-dark); }
.bub--out { align-self: flex-end;   background: var(--wox-cyan); color: var(--wox-navy); font-weight: 500; }
.bub--typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  background: color-mix(in srgb, var(--wox-on-dark) 9%, transparent);
}
.typing-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wox-on-dark) 60%, transparent);
  animation: typing 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: .18s; }
.typing-dot:nth-child(3) { animation-delay: .36s; }

.mockup__input {
  margin: 0 .875rem .875rem;
  padding: .625rem .75rem;
  border-radius: var(--wox-radius-pill);
  background: color-mix(in srgb, var(--wox-on-dark) 6%, transparent);
  color: color-mix(in srgb, var(--wox-on-dark) 40%, transparent);
  font-size: var(--wox-fs-micro);
}

.mockup__panel {
  border-left: 1px solid color-mix(in srgb, var(--wox-on-dark) 8%, transparent);
  padding: 1rem;
  text-align: center;
}
.mockup__panel .av { margin: 0 auto .625rem; }
.mk-name { display: block; color: var(--wox-on-dark); font-size: var(--wox-fs-sec); }
.mk-role { display: block; color: color-mix(in srgb, var(--wox-on-dark) 45%, transparent); font-size: 11px; margin-bottom: .875rem; }
.mk-meta { display: grid; grid-template-columns: 1fr; gap: .3rem; margin: 0; text-align: left; }
.mk-meta dt { color: color-mix(in srgb, var(--wox-on-dark) 40%, transparent); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.mk-meta dd { margin: 0 0 .5rem; color: var(--wox-on-dark); font-size: 11px; }
.mk-badge {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: var(--wox-radius-pill);
  background: color-mix(in srgb, var(--wox-green) 16%, transparent);
  color: var(--wox-green);
  font-size: 10px;
  font-weight: 600;
}
/* el placeholder dentro del panel oscuro usa la variante clara */
.mockup__panel .placeholder {
  color: color-mix(in srgb, var(--wox-on-dark) 55%, transparent);
  border-bottom-color: color-mix(in srgb, var(--wox-on-dark) 30%, transparent);
  font-size: 10px;
}

.industrias__demo { margin-top: 1.25rem; padding: .875rem 1.75rem; }

/* ============================================================
   4 · MARQUEE DE INTEGRACIONES
   ============================================================ */
.integraciones {
  background: linear-gradient(to bottom, var(--wox-surface-alt), var(--wox-surface));
  padding: 56px 0;
  overflow: hidden;
}
@media (min-width: 768px) { .integraciones { padding: var(--wox-section-pad) 0; } }

.integraciones__kicker {
  text-align: center;
  color: var(--wox-text-muted);
  font-size: var(--wox-fs-micro);
  font-weight: 600;
  letter-spacing: .12em;
}
.integraciones__aviso {
  text-align: center;
  margin-top: .75rem;
  font-size: var(--wox-fs-micro);
}

.marquee {
  margin-top: 2rem;
  overflow: hidden;
  /* difuminado en los bordes para que la cinta no "corte" de golpe */
  /* #000 aca es OPERADOR de mascara (define opacidad), no un color pintado */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: scroll-infinite var(--wox-marquee-dur) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-right: 1rem;
}

.chip-int {
  flex: none;
  padding: .75rem 1.25rem;
  border-radius: var(--wox-radius-pill);
  background: var(--wox-surface);
  border: 1px solid var(--wox-border);
  color: var(--wox-text-soft);
  font-size: var(--wox-fs-sec);
  font-weight: 600;
  white-space: nowrap;
  transition: color .5s var(--wox-ease),
              border-color .5s var(--wox-ease),
              box-shadow var(--wox-t-comp) var(--wox-ease);
}
.chip-int:hover {
  color: var(--wox-cyan-deep);       /* acento sobre claro */
  border-color: var(--wox-cyan-deep);
  box-shadow: var(--wox-shadow-lg);
}

/* ============================================================
   5 · ANTES / DESPUÉS
   ============================================================ */
.contraste {
  background: var(--wox-surface);
  padding: 56px 0;
}
@media (min-width: 768px) { .contraste { padding: var(--wox-section-pad) 0; } }

.contraste__sub {
  margin-top: .75rem;
  color: var(--wox-text-muted);
  font-size: clamp(15px, 1.6vw, 18px);
}

.contraste__grid {
  display: grid;
  grid-template-columns: 1fr;        /* apiladas en móvil */
  gap: 1.25rem;
  margin: 2.5rem 0;
}
@media (min-width: 768px) {
  .contraste__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}

.contraste__col {
  padding: 1.75rem;
  border-radius: var(--wox-radius-card);
  border: 1px solid;
  transition: transform var(--wox-t-comp) var(--wox-ease),
              box-shadow var(--wox-t-comp) var(--wox-ease);
}
.contraste__col:hover { transform: translateY(-4px); box-shadow: var(--wox-shadow-lg); }

.contraste__col--antes   { background: var(--wox-danger-bg); border-color: var(--wox-danger-border); }
.contraste__col--despues { background: var(--wox-ok-bg);     border-color: var(--wox-ok-border); }

.contraste__title { letter-spacing: .04em; margin-bottom: 1.25rem; }
.contraste__title--antes   { color: var(--wox-danger-text); }
.contraste__title--despues { color: var(--wox-ok-text); }

.contraste__list { display: flex; flex-direction: column; gap: .875rem; }
.contraste__list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: var(--wox-fs-body);
  line-height: 1.5;
  color: var(--wox-text);
}

.ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}
.ico--x     { background: var(--wox-danger-bg);  color: var(--wox-danger-icon); }
.ico--check { background: color-mix(in srgb, var(--wox-green) 16%, transparent); color: var(--wox-ok-icon); }

.contraste__metric {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed color-mix(in srgb, var(--wox-navy) 10%, transparent);
  font-size: var(--wox-fs-micro);
}

/* ============================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ============================================================ */
.wa {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--wox-green);
  color: var(--wox-on-accent);
  box-shadow: var(--wox-shadow-2xl);
  transition: transform var(--wox-t-comp) var(--wox-ease),
              box-shadow var(--wox-t-comp) var(--wox-ease);
}
.wa:hover { transform: scale(1.06); }
.wa:focus-visible { outline: 3px solid var(--wox-navy); outline-offset: 3px; }
@media (min-width: 768px) { .wa { right: 1.5rem; bottom: 1.5rem; } }

.wa__tooltip {
  position: absolute;
  right: calc(100% + .625rem);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--wox-navy);
  color: var(--wox-on-dark);
  font-size: var(--wox-fs-micro);
  padding: .5rem .75rem;
  border-radius: var(--wox-radius-btn);
  box-shadow: var(--wox-shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--wox-t-comp) var(--wox-ease);
}
.wa:hover .wa__tooltip,
.wa:focus-visible .wa__tooltip { opacity: 1; }

/* En pantallas muy chicas el tooltip no entra al costado: va arriba */
@media (max-width: 420px) {
  .wa__tooltip {
    right: 0;
    top: auto;
    bottom: calc(100% + .5rem);
    transform: none;
  }
}


/* ============================================================
   6 · DEMO DE CHAT EN VIVO — ~704px
   ============================================================ */
.demo {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--wox-surface-alt) 50%, transparent),
    var(--wox-bg));
  padding: 56px 0;
  overflow: hidden;
}
@media (min-width: 768px) { .demo { padding: var(--wox-section-pad) 0; } }

.demo__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .demo__grid { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}

.demo__badge {
  background: color-mix(in srgb, var(--wox-cyan-deep) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--wox-cyan-deep) 25%, transparent);
  color: var(--wox-cyan-deep);
  font-weight: 600;
}
.demo__badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--wox-green);
}

.demo__title { margin-top: 1rem; }
.demo__sub {
  margin-top: .875rem;
  color: var(--wox-text-muted);
  font-size: clamp(15px, 1.6vw, 18px);
  max-width: 48ch;
}
.demo__list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: 1.5rem;
}
.demo__list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: var(--wox-fs-sec);
}
.demo__nota { margin-top: 1.25rem; font-size: var(--wox-fs-micro); }

/* --- ventana de chat --- */
.demo__chat { display: flex; flex-direction: column; gap: 1rem; }

.chatwin {
  background: var(--wox-surface);
  border: 1px solid var(--wox-border);
  border-radius: var(--wox-radius-card);
  box-shadow: var(--wox-shadow-2xl);
  overflow: hidden;
}
.chatwin__head {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .875rem 1rem;
  background: var(--wox-navy);
}
.chatwin__head .mk-txt b { color: var(--wox-on-dark); font-size: var(--wox-fs-sec); }
.chatwin__head .mk-txt i { color: color-mix(in srgb, var(--wox-on-dark) 65%, transparent); }
.chatwin__avatar {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--wox-cyan);
  color: var(--wox-navy);
  font-family: var(--wox-font-display);
  font-weight: 700;
  font-size: 14px;
}

.chatwin__msgs {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem;
  min-height: 260px;
  background: var(--wox-surface-alt);
}
.chatwin__msgs .bub {
  max-width: 82%;
  padding: .625rem .875rem;
  border-radius: 14px;
  font-size: var(--wox-fs-sec);
  line-height: 1.45;
  animation: fadeInUp .35s ease-out both;
}
.chatwin__msgs .bub--in {
  align-self: flex-start;
  background: var(--wox-surface);
  border: 1px solid var(--wox-border);
  color: var(--wox-text);
}
.chatwin__msgs .bub--out {
  align-self: flex-end;
  background: var(--wox-cyan);
  color: var(--wox-navy);      /* sobre cian, texto navy (nunca blanco) */
  font-weight: 500;
}
.chatwin__msgs .bub--typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  background: var(--wox-surface);
  border: 1px solid var(--wox-border);
}
.chatwin__msgs .typing-dot { background: var(--wox-text-soft); }

.chatwin__input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin: 0 1rem 1rem;
  padding: .75rem 1rem;
  border-radius: var(--wox-radius-pill);
  background: var(--wox-surface-alt);
  color: var(--wox-text-soft);
  font-size: var(--wox-fs-sec);
}
.chatwin__send {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--wox-cyan-deep);
  color: var(--wox-on-dark);
  font-size: 12px;
}

.demo__aside { padding: 1.25rem; }
.demo__aside p { margin: .5rem 0 1rem; }

/* ============================================================
   7 · BANDA DE MÉTRICAS — ~192px
   ============================================================ */
.metricas {
  background: var(--wox-grad-full);
  padding: 48px 0;
}
@media (min-width: 768px) { .metricas { padding: 64px 0; } }

.metricas__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  text-align: center;
}
@media (min-width: 768px) {
  .metricas__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

.metricas__item { display: flex; flex-direction: column; gap: .5rem; align-items: center; }
/* El "número" es una PALABRA, no una cifra ("Siempre", "Al instante",
   "Sin desvíos"): el clamp es más chico que el de un número corto para
   que no desborde la columna a 768–1280px ni en 390px. La altura de la
   banda no cambia (la fija el padding de .metricas). */
.metricas__num {
  font-family: var(--wox-font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.1vw, 36px);
  letter-spacing: var(--wox-tracking);
  color: var(--wox-on-dark);
  max-width: 100%;
  text-wrap: balance;
}
.metricas__lbl {
  color: color-mix(in srgb, var(--wox-on-dark) 80%, transparent);
  font-size: var(--wox-fs-sec);
  max-width: 34ch;
}

/* ============================================================
   8 · CÓMO FUNCIONA — 4 pasos — ~736px
   ============================================================ */
.pasos {
  background: var(--wox-surface-alt);
  padding: 56px 0;
}
@media (min-width: 768px) { .pasos { padding: var(--wox-section-pad) 0; } }

.pasos__sub {
  margin-top: .75rem;
  color: var(--wox-text-muted);
  font-size: clamp(15px, 1.6vw, 18px);
}

.pasos__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 2.5rem 0;
  counter-reset: paso;
}
@media (min-width: 640px)  { .pasos__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pasos__grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }

.pasos__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
  padding: 1.5rem;
  background: var(--wox-surface);
  border: 1px solid var(--wox-border);
  border-radius: var(--wox-radius-card);
  transition: transform var(--wox-t-comp) var(--wox-ease),
              box-shadow var(--wox-t-comp) var(--wox-ease);
}
.pasos__item:hover { transform: translateY(-4px); box-shadow: var(--wox-shadow-lg); }

.pasos__num {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--wox-grad-cta);
  color: var(--wox-on-dark);
  font-family: var(--wox-font-display);
  font-weight: 700;
  font-size: 18px;
}
.pasos__title { color: var(--wox-navy); }
.pasos__item p { font-size: var(--wox-fs-sec); }

/* Botón outline (referencia: borde azul claro, radio 12px) */
.btn-outline {
  background: transparent;
  color: var(--wox-navy);
  border: 1px solid var(--wox-blue);
}
.btn-outline:hover { background: var(--wox-surface); border-color: var(--wox-cyan-deep); }

/* ============================================================
   9 · BENEFICIOS — 4 tarjetas — ~640px
   ============================================================ */
.beneficios {
  background: var(--wox-surface-alt);
  padding: 56px 0;
}
@media (min-width: 768px) { .beneficios { padding: var(--wox-section-pad) 0; } }

.beneficios__sub {
  margin-top: .75rem;
  color: var(--wox-text-muted);
  font-size: clamp(15px, 1.6vw, 18px);
}

.beneficios__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (min-width: 640px)  { .beneficios__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .beneficios__grid { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; } }

.beneficios__card {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.75rem 1.5rem;
  /* stagger interno de .15s, como la referencia */
  transition: transform var(--wox-t-comp) var(--wox-ease),
              box-shadow var(--wox-t-comp) var(--wox-ease);
}
.beneficios__card:hover { transform: translateY(-4px); box-shadow: var(--wox-shadow-2xl); }
.beneficios__card h3 { color: var(--wox-navy); }

.beneficios__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--wox-grad-cta);
  font-size: 22px;
}

/* ============================================================
   10 · TESTIMONIOS — ~948px
   ============================================================ */
.testimonios {
  background: var(--wox-surface-mut);
  padding: 56px 0;
}
@media (min-width: 768px) { .testimonios { padding: var(--wox-section-pad) 0; } }

.testimonios__sub { margin-top: .75rem; font-size: var(--wox-fs-sec); }

.testimonios__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (min-width: 768px)  { .testimonios__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .testimonios__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

.testimonio {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem;
  transition: transform var(--wox-t-comp) var(--wox-ease),
              box-shadow var(--wox-t-comp) var(--wox-ease);
}
.testimonio:hover { transform: translateY(-4px); box-shadow: var(--wox-shadow-2xl); }

/* Kicker numerado (01/02/03). Mantiene el tamaño micro del original
   para no alterar la altura de la tarjeta. */
.testimonio__stars {
  font-size: var(--wox-fs-micro);
  font-family: var(--wox-font-display);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--wox-cyan-deep);
}
.testimonio__quote {
  margin: 0;
  font-size: var(--wox-fs-sec);
  line-height: 1.6;
  min-height: 72px;
}

.testimonio__autor {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--wox-border);
}
/* avatar: disco con el número del principio (nunca una foto de persona).
   Pasa de borde punteado —que leía como "dato pendiente"— a borde sólido
   de marca, conservando exactamente los 44px que fijan la altura del pie. */
.testimonio__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--wox-surface-alt);
  border: 1px solid var(--wox-border);
  color: var(--wox-cyan-deep);
  font-family: var(--wox-font-display);
  font-weight: 700;
  font-size: 14px;
}
.testimonio__autor .mk-txt b { color: var(--wox-navy); font-size: var(--wox-fs-sec); }
.testimonio__autor .mk-txt i { color: var(--wox-text-soft); white-space: normal; }

/* etiqueta de cierre del principio (antes era el hueco del logo del
   cliente). Misma caja de 40px: la altura de la tarjeta no cambia. */
.testimonio__logo {
  display: grid;
  place-items: center;
  height: 40px;
  border-radius: var(--wox-radius-btn);
  background: var(--wox-surface-alt);
  font-size: var(--wox-fs-micro);
  color: var(--wox-text-muted);
  font-weight: 600;
}

/* ============================================================
   11 · ESTAMOS CONTRATANDO — ~414px
   ============================================================ */
.contratando {
  background: var(--wox-surface);
  padding: 56px 0;
}
@media (min-width: 768px) { .contratando { padding: var(--wox-section-pad) 0; } }

.contratando__tag {
  background: color-mix(in srgb, var(--wox-cyan-deep) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--wox-cyan-deep) 25%, transparent);
  color: var(--wox-cyan-deep);
  font-weight: 600;
}
.contratando__title { margin-top: 1rem; }
.contratando__sub {
  margin: .875rem auto 1.75rem;
  max-width: 56ch;
  color: var(--wox-text-muted);
  font-size: clamp(15px, 1.6vw, 18px);
}
.contratando__nota { margin-top: 1.25rem; font-size: var(--wox-fs-micro); }

/* ============================================================
   12 · BLOG / NOVEDADES — ~720px
   ============================================================ */
.blog {
  background: var(--wox-surface-mut);
  padding: 56px 0;
  overflow: hidden;
}
@media (min-width: 768px) { .blog { padding: 96px 0; } }

.blog__head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
  .blog__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

.blog__kicker {
  color: var(--wox-cyan-deep);
  font-size: var(--wox-fs-micro);
  font-weight: 700;
  letter-spacing: .12em;
  margin-bottom: .5rem;
}

.blog__nav { display: flex; gap: .625rem; }
.blog__arrow {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--wox-border);
  background: var(--wox-surface);
  color: var(--wox-navy);
  font-size: 18px;
  line-height: 1;
  transition: border-color var(--wox-t-fast) var(--wox-ease),
              color var(--wox-t-fast) var(--wox-ease),
              opacity var(--wox-t-fast) var(--wox-ease);
}
.blog__arrow:hover:not(:disabled) { border-color: var(--wox-cyan-deep); color: var(--wox-cyan-deep); }
.blog__arrow:disabled { opacity: .4; cursor: not-allowed; }

.blog__viewport { overflow: hidden; }
.blog__track {
  display: flex;
  gap: 1.25rem;
  transition: transform var(--wox-t-industry) var(--wox-ease);
}

.blog__card {
  flex: 0 0 auto;
  width: 280px;
  background: var(--wox-surface);
  border: 1px solid var(--wox-border);
  border-radius: var(--wox-radius-card);
  overflow: hidden;
  transition: box-shadow var(--wox-t-comp) var(--wox-ease);
}
@media (min-width: 768px)  { .blog__card { width: 320px; } }
@media (min-width: 1280px) { .blog__card { width: 360px; } }
.blog__card:hover { box-shadow: var(--wox-shadow-2xl); }

/* Imagen: gradiente CSS de la paleta. No se descarga ningún asset. */
.blog__img {
  position: relative;
  height: 168px;
  overflow: hidden;
  transition: transform .5s var(--wox-ease);
}
.blog__card:hover .blog__img { transform: scale(1.05); }
.blog__img--1 { background: var(--wox-grad-hero); }
.blog__img--2 { background: var(--wox-grad-cta); }
.blog__img--3 { background: var(--wox-grad-full); }
.blog__img--4 { background: linear-gradient(135deg, var(--wox-navy-mid), var(--wox-blue)); }

.blog__cat {
  position: absolute;
  top: .75rem; left: .75rem;
  padding: .25rem .625rem;
  border-radius: var(--wox-radius-pill);
  background: var(--wox-cyan);
  color: var(--wox-navy);        /* sobre cian, texto navy */
  font-size: 11px;
  font-weight: 700;
}

/* Al sacar el <p class="blog__pend"> las 4 tarjetas perdieron la misma
   altura. Se compensa con padding inferior en el cuerpo —no reponiendo
   texto— para que la tarjeta no quede apretada contra el borde. */
.blog__body { padding: 1.25rem 1.25rem 1.5rem; }
.blog__fecha {
  display: block;
  font-size: var(--wox-fs-micro);
  margin-bottom: .5rem;
  color: var(--wox-text-soft);
}
.blog__title { color: var(--wox-navy); margin-bottom: .5rem; }
.blog__extracto {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: .75rem;
}
.blog__link {
  color: var(--wox-cyan-deep);
  font-size: var(--wox-fs-sec);
  font-weight: 600;
}
.blog__pend { margin-top: .625rem; font-size: 11px; }   /* sin uso desde Fase 5: ya no hay nota de "artículo pendiente" */

/* ============================================================
   13 · CTA FINAL — ~580px
   ============================================================ */
.cta {
  position: relative;
  background: var(--wox-grad-full);
  padding: 72px 0;
  overflow: hidden;
}
@media (min-width: 768px) { .cta { padding: 96px 0; } }

.cta__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  will-change: transform;        /* parallax/float de fondo */
}
.cta__orb--1 {
  width: 380px; height: 380px;
  top: -110px; left: -90px;
  background: color-mix(in srgb, var(--wox-on-dark) 12%, transparent);
}
.cta__orb--2 {
  width: 440px; height: 440px;
  bottom: -160px; right: -110px;
  background: color-mix(in srgb, var(--wox-cyan) 18%, transparent);
  animation-delay: 1.5s;
}

.cta__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}
.cta__title { color: var(--wox-on-dark); max-width: 22ch; }
.cta__sub {
  color: color-mix(in srgb, var(--wox-on-dark) 85%, transparent);
  max-width: 54ch;
  font-size: clamp(15px, 1.7vw, 19px);
}
.cta__btn { padding: 1rem 2rem; font-size: var(--wox-fs-body); }
/* El CTA va sobre el gradiente institucional G1 (azul oscuro), así que su
   texto no puede heredar el Gris Ingeniería del body: sobre el extremo
   claro daba 1.41:1. La letra chica mide 12px y necesita 4.5:1; Blanco
   Técnico al 92% todavía caía a 4.32:1 en móvil. Sin atenuar mantiene al
   menos 4.7:1 sobre los glifos renderizados.
   OJO al medirlo de nuevo: el peor caso NO está en los extremos del rango
   de anchos, está EN EL MEDIO, cerca de 414px. La causa es que el
   gradiente es de 135deg: a ese ancho su tramo más claro queda justo
   debajo de la letra chica. Barrer sólo 320px y 1920px da valores más
   holgados y esconde el mínimo real, que es 4.72:1 a 414px. */
.cta__fine {
  font-size: var(--wox-fs-micro);
  color: var(--blanco-tecnico);
}

/* ============================================================
   14 · FOOTER — ~441px
   ============================================================ */
.footer {
  background: var(--wox-navy);
  color: var(--wox-on-dark);
  padding: 56px 0 24px;
}
@media (min-width: 768px) { .footer { padding: 72px 0 32px; } }

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 640px)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2.5rem; } }

.footer__logo { font-size: 22px; color: var(--wox-on-dark); }
.footer__tld { color: var(--wox-cyan); }   /* cian sobre navy: contraste alto */

.footer__desc {
  margin: 1rem 0 1.25rem;
  color: color-mix(in srgb, var(--wox-on-dark) 72%, transparent);
  font-size: var(--wox-fs-sec);
  line-height: 1.7;
}
.footer__cta { margin-bottom: 1rem; }
.footer__mail { font-size: var(--wox-fs-sec); color: color-mix(in srgb, var(--wox-on-dark) 72%, transparent); }

.footer__title {
  color: var(--wox-on-dark);
  margin-bottom: .875rem;
  font-size: var(--wox-fs-h3-sm);
}
.footer__list { display: flex; flex-direction: column; gap: .625rem; }
.footer__list a,
.footer__link {
  color: color-mix(in srgb, var(--wox-on-dark) 72%, transparent);
  font-size: var(--wox-fs-sec);
  transition: color var(--wox-t-fast) var(--wox-ease);
}
.footer__list a:hover,
.footer__link:hover { color: var(--wox-cyan); }

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  align-items: center;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--wox-on-dark) 14%, transparent);
  color: color-mix(in srgb, var(--wox-on-dark) 60%, transparent);
  font-size: var(--wox-fs-micro);
  text-align: center;
}
@media (min-width: 768px) {
  .footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}
.footer__bottom a { transition: color var(--wox-t-fast) var(--wox-ease); }
.footer__bottom a:hover { color: var(--wox-cyan); }


/* ============================================================
   PÁGINAS INTERNAS (precios · empresa · contacto)
   Cada una entra en UNA pantalla. Comparten header y footer con la home.
   ============================================================ */

/* deja lugar al header fijo + barra de anuncio */
.pagina { padding-top: var(--wox-offset-top); }

/* Enlace activo del nav */
.nav__list a.is-active,
.mobile-menu__list a.is-active { color: var(--wox-cyan-deep); font-weight: 600; }
.nav__list a.is-active { border-bottom: 2px solid var(--wox-cyan-deep); padding-bottom: 2px; }

/* --- Cabecera de página interna --- */
.pag-hero {
  background: var(--wox-grad-hero);
  padding: 48px 0 40px;
}
@media (min-width: 768px) { .pag-hero { padding: 64px 0 56px; } }

.pag-hero__tag {
  background: color-mix(in srgb, var(--wox-on-dark) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--wox-on-dark) 20%, transparent);
  color: color-mix(in srgb, var(--wox-on-dark) 92%, transparent);
  font-weight: 500;
}
.pag-hero__title { color: var(--wox-on-dark); margin-top: .875rem; }
.pag-hero__sub {
  margin: .875rem auto 0;
  max-width: 58ch;
  color: color-mix(in srgb, var(--wox-on-dark) 78%, transparent);
  font-size: clamp(14px, 1.5vw, 17px);
}

/* ============================================================
   precios.html
   ============================================================ */
.planes { background: var(--wox-bg); padding: 48px 0 56px; }
@media (min-width: 768px) { .planes { padding: 64px 0 72px; } }

.planes__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 900px) {
  .planes__grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.75rem 1.5rem;
  transition: transform var(--wox-t-comp) var(--wox-ease),
              box-shadow var(--wox-t-comp) var(--wox-ease);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--wox-shadow-2xl); }

.plan--destacado { border-color: var(--wox-cyan-deep); border-width: 2px; }
.plan__badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  padding: .25rem .875rem;
  border-radius: var(--wox-radius-pill);
  background: var(--wox-cyan);
  color: var(--wox-navy);          /* sobre cian, texto navy */
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.plan__nombre { color: var(--wox-navy); }
.plan__desc { min-height: 2.6em; }

/* El importe no está definido: se lee "Consultar" + "Propuesta a medida",
   nunca un número inventado. El borde inferior pasa a .plan__precio-nota
   para que el par se lea como un solo bloque de precio. */
.plan__precio {
  padding: .75rem 0 .25rem;
  border-top: 1px solid var(--wox-border);
  font-size: var(--wox-fs-h3-card);
  color: var(--wox-navy);
}
.plan__precio-nota {
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--wox-border);
  font-size: var(--wox-fs-micro);
  color: var(--wox-text-muted);
}

.plan__lista { display: flex; flex-direction: column; gap: .625rem; flex: 1; }
.plan__lista li {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  font-size: var(--wox-fs-sec);
  line-height: 1.45;
}
.plan__cta { margin-top: .5rem; width: 100%; }
.planes__nota { margin-top: 2rem; font-size: var(--wox-fs-micro); }

/* ============================================================
   empresa.html
   ============================================================ */
.empresa { background: var(--wox-bg); padding: 48px 0 56px; }
@media (min-width: 768px) { .empresa { padding: 64px 0 72px; } }

.empresa__datos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .empresa__datos { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

.empresa__dato {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .375rem;
  padding: 1.5rem 1rem;
  text-align: center;
}
.empresa__num {
  font-family: var(--wox-font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: var(--wox-tracking);
  color: var(--wox-cyan-deep);     /* acento sobre claro */
}
.empresa__lbl { color: var(--wox-text-muted); font-size: var(--wox-fs-sec); }

.empresa__h2 { margin: 2.5rem 0 1.5rem; }

.empresa__lineas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .empresa__lineas { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
}
.empresa__linea {
  padding: 1.75rem 1.5rem;
  transition: transform var(--wox-t-comp) var(--wox-ease),
              box-shadow var(--wox-t-comp) var(--wox-ease);
}
.empresa__linea:hover { transform: translateY(-4px); box-shadow: var(--wox-shadow-lg); }
.empresa__linea h3 { color: var(--wox-navy); margin-bottom: .5rem; }
.empresa__cta { margin-top: 2.5rem; }

/* ============================================================
   contacto.html
   ============================================================ */
.contacto { background: var(--wox-bg); padding: 48px 0 56px; }
@media (min-width: 768px) { .contacto { padding: 64px 0 72px; } }

.contacto__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  .contacto__grid { grid-template-columns: 1fr 1.15fr; gap: 2.5rem; }
}

.contacto__vias { display: flex; flex-direction: column; gap: 1rem; }
.contacto__via { padding: 1.25rem 1.5rem; }
.contacto__via h2 { color: var(--wox-navy); margin: .375rem 0 .25rem; }
.contacto__icon { font-size: 22px; }
.contacto__dato {
  color: var(--wox-cyan-deep);     /* acento sobre claro */
  font-size: var(--wox-fs-sec);
  font-weight: 600;
  word-break: break-word;
  transition: color var(--wox-t-fast) var(--wox-ease);
}
.contacto__dato:hover { color: var(--wox-navy); }

.contacto__form { padding: 1.75rem 1.5rem; }
.contacto__form h2 { color: var(--wox-navy); margin-bottom: .875rem; }

/* Aviso de que el formulario NO está conectado. Va arriba, antes de
   que la persona complete nada. */
.contacto__aviso {
  padding: .875rem 1rem;
  margin-bottom: 1.25rem;
  border-radius: var(--wox-radius-btn);
  background: var(--wox-surface-alt);
  border-left: 3px solid var(--wox-cyan-deep);
  color: var(--wox-text-muted);
  font-size: var(--wox-fs-sec);
  line-height: 1.5;
}

.campo { display: block; margin-bottom: 1rem; }
.campo__lbl {
  display: block;
  margin-bottom: .375rem;
  font-size: var(--wox-fs-sec);
  font-weight: 600;
  color: var(--wox-navy);
}
.campo__in {
  width: 100%;
  padding: .75rem .875rem;
  border-radius: var(--wox-radius-btn);
  border: 1px solid var(--wox-border);
  background: var(--wox-surface);
  color: var(--wox-text);
  font-size: var(--wox-fs-sec);
  font-family: var(--wox-font-body);
  transition: border-color var(--wox-t-fast) var(--wox-ease),
              box-shadow var(--wox-t-fast) var(--wox-ease);
}
.campo__in:focus {
  outline: none;
  border-color: var(--wox-cyan-deep);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wox-cyan-deep) 15%, transparent);
}
textarea.campo__in { resize: vertical; min-height: 110px; }

.contacto__enviar { width: 100%; margin-top: .25rem; }

.contacto__estado {
  margin-top: .875rem;
  font-size: var(--wox-fs-sec);
  line-height: 1.5;
  min-height: 1.2em;
}
.contacto__estado.is-info  { color: var(--wox-text-muted); }
.contacto__estado.is-error { color: var(--wox-danger-icon); font-weight: 500; }


/* ============================================================
   LOGO OFICIAL (Fase 6) — reglas del Manual de Identidad Visual
   ============================================================
   pag-11 · Area de resguardo: la mitad de la altura de la W libre en los
            4 lados. La W del logotipo mide ~26px de alto en el header, asi
            que el resguardo es 13px -> se aplica como padding.
   pag-12 · Tamano minimo digital: logotipo completo 85px de ancho.
            min-width lo garantiza aunque el contenedor se achique.
   pag-17 · No deformar: width/height fijos + object-fit:contain y una sola
            escala (height:auto) evitan cualquier cambio de proporcion.
            Tampoco se le aplica sombra, outline ni rotacion.
   ============================================================ */
.logo__img {
  display: block;
  height: 26px;
  width: auto;
  min-width: 85px;              /* tamano minimo digital (pag-12) */
  object-fit: contain;          /* nunca deforma */
  padding: 13px;                /* area de resguardo = 1/2 altura de la W */
  box-sizing: content-box;
  margin: -13px;                /* el resguardo no empuja el layout */
}
.logo { display: inline-flex; align-items: center; }

.footer__logo-img {
  height: 29px;
  padding: 15px;                /* resguardo proporcional a esta altura */
  margin: -15px 0 0 -15px;
}

@media (max-width: 420px) {
  /* Nunca por debajo del minimo de 85px: se baja la altura, no el ancho. */
  .logo__img { height: 22px; padding: 11px; margin: -11px; }
}


/* ============================================================
   VERSION CLARA — ajustes de caracter (Fase 6)
   Corporativo y sobrio, cercano a la papeleria del manual (pag-20):
   mucho respiro, bordes finos, sombras casi imperceptibles.
   ============================================================ */

/* Montserrat tiene ojo mas grande y camina mas ancho que Inter: el cuerpo
   gana interlinea para que el texto largo no se apelmace. */
body { line-height: 1.65; font-weight: 400; }

/* Los titulos del manual son Bold; las bajadas van en Light (pag-08). */
.h2-sec, .h2, .h1 { font-weight: 700; }
.hero__sub, .contraste__sub, .testimonios__sub, .pasos__sub,
.beneficios__sub, .demo__sub { font-weight: 300; }

/* Tarjetas: borde fino + sombra muy suave (la papeleria no tiene volumen). */
.card {
  border: 1px solid var(--wox-border);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--azul-estrategico) 5%, transparent);
}
.card:hover { box-shadow: var(--wox-shadow-lg); }

/* Acento: G2 en botones y elementos activos (recurso complementario). */
.btn-accent {
  background: var(--wox-grad-acento);
  color: var(--wox-on-dark);
  border: none;
}
.btn-accent:hover { filter: brightness(1.06); }

/* Banda de metricas: en la clara el gradiente institucional G1 da el
   contrapunto oscuro que en la papeleria hacen los bloques azules. */
.metricas { background: var(--wox-grad-full); }

/* Subrayado de acento en los kickers, como los filetes de la papeleria. */
.blog__kicker, .integraciones__kicker {
  color: var(--wox-cyan-deep);
  font-weight: 700;
  letter-spacing: .08em;
}

/* ============================================================
   HERO CLARO — inversion completa (Fase 6, correccion 1)
   ============================================================
   El hero estaba construido para fondo oscuro: texto blanco, overlay que
   oscurece, chips en pastilla oscura. Al pasar el fondo a Blanco Tecnico
   TODO eso queda ilegible, asi que se invierte la seccion entera.

   Criterio: esta es la version "corporativa y sobria" (papeleria del
   manual, pag-19/20). Se conserva la visualizacion —nucleo, lineas y
   nodos— porque es el recurso propio de la marca, pero baja de intensidad:
   sobre claro el grafico acompana, no domina. El aire manda.

   Ningun HEX nuevo: todo sale de los 8 oficiales via color-mix().
   ============================================================ */

/* Fondo: Blanco Tecnico con un velo muy suave de G2 arriba a la derecha,
   como las formas en gradiente de la papeleria. Nada de bloque pleno. */
.hero {
  background:
    radial-gradient(ellipse 60% 50% at 78% 8%,
                    color-mix(in srgb, var(--azul-innovacion) 14%, transparent) 0%,
                    color-mix(in srgb, var(--azul-innovacion) 0%, transparent) 70%),
    radial-gradient(ellipse 50% 45% at 12% 92%,
                    color-mix(in srgb, var(--verde-digital) 11%, transparent) 0%,
                    color-mix(in srgb, var(--verde-digital) 0%, transparent) 70%),
    var(--blanco-tecnico);
}

/* La visualizacion baja de intensidad: sobre claro compite con el texto.
   OJO: la atenuacion va POR ELEMENTO, no en el contenedor. Si se atenua
   .hero__viz entero, el nucleo se lava contra el blanco y el label WOXANT
   que va encima se vuelve ilegible (medido: 1.58:1, falla AA). El nucleo
   es lo unico de la visualizacion que lleva texto, asi que va sin atenuar. */
.hero__viz { opacity: 1; }
@media (min-width: 1024px) { .hero__viz { opacity: 1; } }
.hero__links { opacity: .32; }
.hero-node__in { opacity: .9; }

/* El overlay oscurecia para dar contraste a texto blanco. Sobre claro se
   invierte: velo de Blanco Tecnico que despeja la columna de texto y deja
   respirar el grafico en los bordes. */
.hero__overlay {
  background:
    radial-gradient(ellipse 48% 32% at 50% 52%,
                    color-mix(in srgb, var(--blanco-tecnico) 94%, transparent) 0%,
                    color-mix(in srgb, var(--blanco-tecnico) 82%, transparent) 55%,
                    color-mix(in srgb, var(--blanco-tecnico) 38%, transparent) 80%,
                    color-mix(in srgb, var(--blanco-tecnico) 0%, transparent) 100%),
    linear-gradient(to bottom,
                    color-mix(in srgb, var(--blanco-tecnico) 55%, transparent) 0%,
                    color-mix(in srgb, var(--blanco-tecnico) 12%, transparent) 32%,
                    color-mix(in srgb, var(--blanco-tecnico) 12%, transparent) 68%,
                    color-mix(in srgb, var(--blanco-tecnico) 62%, transparent) 100%);
}

/* Texto: Azul Estrategico y Gris Ingenieria. Se saca el text-shadow, que
   sobre claro ensuciaba el trazo en vez de ayudar a leer. */
.hero__title {
  color: var(--azul-estrategico);
  text-shadow: none;
}
/* El tramo de acento del h1 ("ingenieria de lo infalible"): el cian puro
   no contrasta sobre blanco, va con --acento-texto (Verde Digital
   oscurecido con el operador #000), que es justo para lo que se definio. */
.hero__title .text-accent-on-dark { color: var(--acento-texto); }

.hero__sub {
  color: var(--gris-ingenieria);
  text-shadow: none;
}

/* Chips de nodos: de pastilla oscura a tarjetita clara con borde sutil. */
.hero-node__in {
  background: var(--superficie-tarjeta);
  border: 1px solid color-mix(in srgb, var(--azul-innovacion) 34%, transparent);
  color: var(--azul-estrategico);
  font-weight: 600;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--azul-estrategico) 10%, transparent);
}

/* Nucleo: sobre blanco el glow cian casi no se percibe -> se refuerza el
   halo y se cierra el disco con Verde Digital. El centro NO se aclara tanto
   como para lavar el label: con .hero__viz ya sin atenuar, el disco tiene
   su color pleno y el label en Azul Estrategico contrasta contra el. */
.hero-core {
  background: radial-gradient(circle at 38% 32%,
    color-mix(in srgb, var(--azul-innovacion) 72%, #fff) 0%,
    var(--azul-innovacion) 52%,
    var(--verde-digital) 100%);
  box-shadow:
    0 0 0 8px color-mix(in srgb, var(--azul-innovacion) 12%, transparent),
    0 8px 28px color-mix(in srgb, var(--verde-digital) 38%, transparent);
}
.hero-core__ring { border-color: color-mix(in srgb, var(--azul-innovacion) 45%, transparent); }
/* Sobre el disco cian/teal el texto va en Azul Estrategico (--wox-on-accent),
   que ya venia asi: se verifica que siga contrastando y se refuerza el peso. */
.hero-core__label { color: var(--azul-estrategico); font-weight: 700; }

/* Lineas punteadas: la atenuacion se define arriba, junto al resto de la
   visualizacion (.hero__links { opacity: .32 }), para no pisarla desde dos
   lugares distintos. Aca solo queda el nucleo, que va sin atenuar. */

/* Badge EN VIVO: de pastilla oscura translucida a tarjetita clara. */
.hero__live {
  background: var(--superficie-tarjeta);
  border: 1px solid var(--borde-fino);
  color: var(--gris-ingenieria);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--azul-estrategico) 8%, transparent);
}
.hero__live-dot { background: var(--verde-digital); }

/* CTA: sobre claro G1 (azul institucional) es el que mejor destaca y
   ademas ancla la marca. Se le agrega sombra para despegarlo del fondo. */
.hero__cta {
  background: var(--grad-g1);
  color: var(--blanco-tecnico);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--azul-estrategico) 30%, transparent);
}
.hero__cta:hover { filter: brightness(1.08); }