/* InnovaX · Hero home
   Todo el CSS está bajo .inx-hero para no chocar con el tema. */
.inx-hero {
  --inx-bg: #03050B;
  --inx-ink: #EAF0FF;
  --inx-accent: #4DA3FF;
  --inx-line: rgba(150, 190, 255, .18);
  /* Alto: 16:9 en desktop, acotado al viewport. Sobrescribible desde el tema. */
  --inx-hero-h: clamp(560px, 56.25vw, 100svh);
  /* Los setea el JS según el espacio libre sobre el bloque inferior */
  --inx-cy: 50%;
  --inx-sub-y: 120px;

  position: relative;
  width: 100%;
  height: var(--inx-hero-h);
  overflow: hidden;
  isolation: isolate;
  background: var(--inx-bg);
  color: var(--inx-ink);
  font-family: H4GommeLight, H4Gomme, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.inx-hero *, .inx-hero *::before, .inx-hero *::after { box-sizing: border-box; }

.inx-hero__sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.inx-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.inx-hero__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(3,5,11,.55) 78%, rgba(3,5,11,.92) 100%);
}
.inx-hero__scan {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  mix-blend-mode: screen; opacity: .5;
}
.inx-hero__scan::before {
  content: ''; position: absolute; left: 0; right: 0; height: 24%;
  background: linear-gradient(180deg, transparent, rgba(140,190,255,.07), transparent);
  animation: inxScan 9s linear infinite;
}
@keyframes inxScan { 0% { transform: translateY(-100%); } 100% { transform: translateY(420%); } }

/* ---- Tagline bajo INNOVAX ---- */
.inx-hero__tagline {
  position: absolute; left: 50%; top: var(--inx-cy);
  transform: translate(-50%, var(--inx-sub-y));
  width: min(88%, 640px);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin: 0;
  opacity: 0; filter: blur(6px);
  transition: opacity 1.3s cubic-bezier(.22,.7,.2,1), filter 1.3s cubic-bezier(.22,.7,.2,1);
}
.inx-hero__tagline::before {
  content: ''; width: clamp(120px, 22vw, 300px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(170,215,255,.6), transparent);
}
.inx-hero__tagline span {
  font-weight: 300; font-size: clamp(14px, 1.25vw, 18px); letter-spacing: .04em;
  color: rgba(236,243,255,.88); text-align: center; text-wrap: balance;
}
.inx-hero.is-ended .inx-hero__tagline { opacity: 1; filter: none; }

/* ---- Bloque inferior: capacidades + pie ---- */
.inx-hero__bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: clamp(14px, 3vh, 34px);
}
.inx-hero__caps {
  display: flex; justify-content: center;
  width: min(100%, 1680px);
  margin: 0 auto; padding: 0 clamp(20px, 3.5vw, 64px); list-style: none;
  opacity: 0; transform: translateY(16px);
  transition: opacity 1.4s cubic-bezier(.22,.7,.2,1) .35s, transform 1.4s cubic-bezier(.22,.7,.2,1) .35s;
}
.inx-hero.is-ui .inx-hero__caps { opacity: 1; transform: none; }
.inx-hero__cap {
  display: flex; align-items: center; gap: clamp(8px, 1vw, 16px);
  flex: 1 1 25%;
  min-height: clamp(58px, 5.2vw, 82px);
  justify-content: center;
  padding: 0 clamp(14px, 1.8vw, 32px);
  border-left: 1px solid var(--inx-line);
}
.inx-hero__cap b {
  font-family: H4Gomme, Arial, sans-serif; font-weight: 700;
  font-size: clamp(15px, 1.35vw, 22px); letter-spacing: .04em; color: var(--inx-accent);
}
.inx-hero__cap span {
  font-family: H4Gomme, Arial, sans-serif; font-weight: 700;
  font-size: clamp(12px, 1.06vw, 17px); line-height: 1.4; letter-spacing: .11em;
  text-transform: uppercase; color: rgba(240,246,255,.9);
}

.inx-hero__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: clamp(12px, 2.2vh, 24px) clamp(16px, 3.5vw, 54px);
  border-top: 1px solid rgba(255,255,255,.07);
  opacity: 0; transform: translateY(12px);
  transition: opacity 1.3s cubic-bezier(.22,.7,.2,1) .4s, transform 1.3s cubic-bezier(.22,.7,.2,1) .4s;
}
.inx-hero.is-ui .inx-hero__foot { opacity: 1; transform: none; }
.inx-hero__brand { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); }
.inx-hero__brand img { height: clamp(14px, 1.4vw, 18px); width: auto; opacity: .95; display: block; }
.inx-hero__brand i { width: 1px; height: 14px; background: rgba(255,255,255,.16); }
.inx-hero__meta {
  font-family: H4Gomme, Arial, sans-serif; font-weight: 400;
  font-size: clamp(9.5px, .78vw, 11.5px); letter-spacing: .18em; text-transform: uppercase;
  color: rgba(234,240,255,.55); white-space: nowrap;
}
.inx-hero__meta--dim { letter-spacing: .2em; color: rgba(234,240,255,.42); }

/* ---- Tablet ---- */
@media (max-width: 900px) and (orientation: portrait) {
  .inx-hero { --inx-hero-h: clamp(620px, 78svh, 900px); }
}
@media (max-width: 900px) {
  .inx-hero__caps { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); row-gap: 14px; }
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
  .inx-hero { --inx-hero-h: max(600px, 88svh); }
  .inx-hero__caps { padding: 0 16px; column-gap: 0; row-gap: 12px; justify-content: stretch; grid-template-columns: 1fr 1fr; }
  .inx-hero__cap { min-height: 52px; padding: 0 10px; align-items: flex-start; justify-content: flex-start; }
  .inx-hero__cap b { font-size: 13px; }
  .inx-hero__cap span { font-size: 10px; line-height: 1.4; letter-spacing: .08em; }
  .inx-hero__foot { flex-direction: column; gap: 10px; padding: 14px 16px 18px; }
  .inx-hero__meta--dim { display: none; }
}
@media (max-width: 360px) {
  .inx-hero__cap span { letter-spacing: .08em; }
}

/* ---- Pantallas bajas (laptops chicos en landscape, móvil horizontal) ---- */
@media (max-height: 520px) and (min-width: 601px) {
  .inx-hero { --inx-hero-h: max(420px, 100svh); }
  .inx-hero__caps { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .inx-hero__scan { display: none; }
  .inx-hero *, .inx-hero *::before { transition: none !important; }
}