/* ============================================================
   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: #fff;
  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: rgba(255,255,255,.92);
}
/* 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: rgba(255,255,255,.7);
  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: #fff; background: rgba(255,255,255,.1); }

/* 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: rgba(255,255,255,.8);
  -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 — sobre negro
   ============================================================ */
.hero {
  position: relative;
  margin-top: var(--wox-offset-top);
  min-height: 560px;
  height: 56.25vw;                       /* 16:9 */
  max-height: calc(100vh - 5rem);
  background: #000;
  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%,
                    rgba(0,0,0,.92) 0%,
                    rgba(0,0,0,.80) 55%,
                    rgba(0,0,0,.35) 80%,
                    rgba(0,0,0,0) 100%),
    linear-gradient(to bottom,
                    rgba(0,0,0,.45) 0%,
                    rgba(0,0,0,.10) 32%,
                    rgba(0,0,0,.10) 68%,
                    rgba(0,0,0,.45) 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%, #29E6FF, #0091C7 55%, #06507A);
  display: grid;
  place-items: center;
  box-shadow: 0 0 60px rgba(0, 209, 255, .45);
  animation: pulseGlow 3s ease-in-out infinite;
}
.hero-core__ring {
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(0, 209, 255, .35);
  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: #04212F;
}

/* 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: rgba(9, 32, 56, .82);
  border: 1px solid rgba(0, 209, 255, .3);
  color: #DCEFFA;
  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: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  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: #fff;
  max-width: 20ch;
  text-shadow: 0 2px 24px rgba(0,0,0,.75);
}
.hero__sub {
  color: rgba(255,255,255,.82);
  max-width: 52ch;
  font-size: clamp(14px, 1.6vw, 18px);
  text-shadow: 0 1px 12px rgba(0,0,0,.7);
}
.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: rgba(0, 209, 255, .18);
}
.industrias__orb--2 {
  width: 520px; height: 520px;
  bottom: -180px; right: -160px;
  background: rgba(43, 108, 184, .28);
}

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

.industrias__chip {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.92);
  font-weight: 500;
}

.industrias__title { color: #fff; }

.industrias__sub {
  color: rgba(255,255,255,.75);
  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: rgba(255,255,255,.12);
  transform: translateY(-2px);
}
.ind-chip.is-active {
  background: rgba(0, 209, 255, .14);
  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: rgba(255,255,255,.7);
  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: #0A1B2E;
  border: 1px solid rgba(255,255,255,.14);
  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: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mockup__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
}
.mockup__title {
  margin-left: .5rem;
  color: rgba(255,255,255,.62);
  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 rgba(255,255,255,.08);
  padding: .75rem;
}
.mockup__search {
  padding: .5rem .625rem;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.4);
  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: rgba(0,209,255,.1); }
.mockup__list li:hover { background: rgba(255,255,255,.06); }

.av {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0091C7, #14406F);
  color: #fff;
  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: #E8F4FB;
  font-size: var(--wox-fs-micro);
  font-weight: 600;
}
.mk-txt i {
  color: rgba(255,255,255,.45);
  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 rgba(255,255,255,.08);
}
.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: rgba(255,255,255,.09); color: #DCEAF5; }
.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: rgba(255,255,255,.09);
}
.typing-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  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: rgba(255,255,255,.06);
  color: rgba(255,255,255,.4);
  font-size: var(--wox-fs-micro);
}

.mockup__panel {
  border-left: 1px solid rgba(255,255,255,.08);
  padding: 1rem;
  text-align: center;
}
.mockup__panel .av { margin: 0 auto .625rem; }
.mk-name { display: block; color: #E8F4FB; font-size: var(--wox-fs-sec); }
.mk-role { display: block; color: rgba(255,255,255,.45); 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: rgba(255,255,255,.4); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.mk-meta dd { margin: 0 0 .5rem; color: #DCEAF5; font-size: 11px; }
.mk-badge {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: var(--wox-radius-pill);
  background: rgba(47,209,107,.16);
  color: var(--wox-green);
  font-size: 10px;
  font-weight: 600;
}
/* el placeholder dentro del panel oscuro usa la variante clara */
.mockup__panel .placeholder {
  color: rgba(255,255,255,.55);
  border-bottom-color: rgba(255,255,255,.3);
  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 */
  -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: rgba(220,38,38,.12);  color: var(--wox-danger-icon); }
.ico--check { background: rgba(47,209,107,.16); color: var(--wox-ok-icon); }

.contraste__metric {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(0,0,0,.1);
  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: #06301A;
  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: #fff;
  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, rgba(241,245,249,.5), 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: rgba(0,145,199,.1);
  border: 1px solid rgba(0,145,199,.25);
  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: #fff; font-size: var(--wox-fs-sec); }
.chatwin__head .mk-txt i { color: rgba(255,255,255,.65); }
.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: #fff;
  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: #fff;
  max-width: 100%;
  text-wrap: balance;
}
.metricas__lbl {
  color: rgba(255,255,255,.8);
  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: #fff;
  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: rgba(0,145,199,.1);
  border: 1px solid rgba(0,145,199,.25);
  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: rgba(255,255,255,.12);
}
.cta__orb--2 {
  width: 440px; height: 440px;
  bottom: -160px; right: -110px;
  background: rgba(0,209,255,.18);
  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: #fff; max-width: 22ch; }
.cta__sub {
  color: rgba(255,255,255,.85);
  max-width: 54ch;
  font-size: clamp(15px, 1.7vw, 19px);
}
.cta__btn { padding: 1rem 2rem; font-size: var(--wox-fs-body); }
.cta__fine { font-size: var(--wox-fs-micro); }

/* ============================================================
   14 · FOOTER — ~441px
   ============================================================ */
.footer {
  background: var(--wox-navy);
  color: #fff;
  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: #fff; }
.footer__tld { color: var(--wox-cyan); }   /* cian sobre navy: contraste alto */

.footer__desc {
  margin: 1rem 0 1.25rem;
  color: rgba(255,255,255,.72);
  font-size: var(--wox-fs-sec);
  line-height: 1.7;
}
.footer__cta { margin-bottom: 1rem; }
.footer__mail { font-size: var(--wox-fs-sec); color: rgba(255,255,255,.72); }

.footer__title {
  color: #fff;
  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: rgba(255,255,255,.72);
  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 rgba(255,255,255,.14);
  color: rgba(255,255,255,.6);
  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: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.92);
  font-weight: 500;
}
.pag-hero__title { color: #fff; margin-top: .875rem; }
.pag-hero__sub {
  margin: .875rem auto 0;
  max-width: 58ch;
  color: rgba(255,255,255,.78);
  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 rgba(0,145,199,.15);
}
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; }