/* =========================================================================
   IngeniatecXXI — capa de la portada paraguas y de /negocios/.
   Se carga DESPUÉS de educacion.css y reutiliza sus tokens (Inter, morado,
   formulario, pie). Todo lo nuevo lleva prefijo ix- para no pisar nada.
   ========================================================================= */

:root {
  --ix-noche: #14132a;
  --ix-noche-2: #1d1b3a;
  --ix-linea-noche: #ffffff17;
  --ix-texto-noche: #b9b6d3;
  --ix-verde: #1ca797;
  --ix-lila: #f4f0fb;
  --ix-sombra: 0 30px 80px #2a17551f;
  --ix-ease: cubic-bezier(.22, .8, .24, 1);
}

body { overflow-x: clip; }

/* ---------- Cabecera: enlace activo según la sección ---------- */
nav a.ix-activo { color: var(--purple); }

/* ---------- Revelados al hacer scroll ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ix-ease), transform .9s var(--ix-ease);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].ix-visto { opacity: 1; transform: none; }

/* Imagen que se descubre de izquierda a derecha */
.js [data-cortina] {
  clip-path: inset(0 100% 0 0 round 18px);
  transition: clip-path 1.3s var(--ix-ease);
  transition-delay: var(--d, .1s);
}
.js [data-cortina].ix-visto { clip-path: inset(0 0 0 0 round 18px); }

/* ---------- Marcos de dispositivo ---------- */
.ix-navegador {
  background: #fff;
  border: 1px solid #e3def0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--ix-sombra);
}
.ix-navegador-barra {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  background: #f7f5fb;
  border-bottom: 1px solid #ece8f4;
}
.ix-navegador-barra i {
  width: 9px; height: 9px; border-radius: 50%;
  background: #dcd6e8;
}
.ix-navegador-barra span {
  margin-left: 14px;
  font-size: 10px;
  color: #8a86a0;
  background: #fff;
  border: 1px solid #ece8f4;
  border-radius: 99px;
  padding: 2px 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ix-navegador img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

.ix-movil {
  background: #111;
  border-radius: 38px;
  padding: 9px;
  box-shadow: 0 30px 70px #1b0f3a40;
}
.ix-movil img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 844;
  object-fit: cover;
  object-position: top;
  border-radius: 30px;
}

/* ---------- HERO paraguas ---------- */
.ix-hero {
  position: relative;
  padding-block: 80px 40px;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 40px;
  align-items: center;
}
.ix-hero h1 {
  font-size: clamp(46px, 5.6vw, 82px);
  line-height: 1.02;
  letter-spacing: -.062em;
  margin-bottom: 26px;
}
.ix-hero h1 span {
  background: linear-gradient(100deg, #7850df 5%, #aa42bc 60%, #057f87);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ix-hero .hero-text { font-size: 16px; max-width: 470px; margin-bottom: 34px; }
.ix-hero .acciones { display: flex; flex-wrap: wrap; gap: 12px; }

.ix-escena {
  position: relative;
  aspect-ratio: 1 / .92;
  min-width: 0;
}
.ix-escena > * {
  position: absolute;
  will-change: transform;
  transform: translate3d(0, calc(var(--py, 0) * 1px), 0);
}
.ix-escena .ix-capa-1 { top: 2%; left: 0; width: 84%; }
.ix-escena .ix-capa-2 { bottom: 0; right: 0; width: 62%; }
.ix-escena .ix-capa-3 { top: 22%; right: 2%; width: 27%; z-index: 3; }
.ix-escena .ix-capa-1 { z-index: 1; }
.ix-escena .ix-capa-2 { z-index: 2; }

.ix-flota { animation: ix-flotar 9s ease-in-out infinite; }
.ix-capa-3 .ix-flota { animation-duration: 7s; animation-delay: -2s; }
@keyframes ix-flotar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.ix-sello {
  left: 4%;
  bottom: 9%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #ece8f4;
  border-radius: 16px;
  padding: 13px 18px 13px 13px;
  box-shadow: 0 18px 40px #2a17552a;
  font-size: 12px;
}
.ix-sello b { display: block; font-size: 13px; color: var(--ink); }
.ix-sello small { color: var(--muted); }
.ix-sello-icono {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: #e7f7f3; color: var(--ix-verde);
  font-weight: 700;
}

/* ---------- Cinta de capacidades ---------- */
.ix-cinta {
  border-block: 1px solid var(--border);
  overflow: hidden;
  padding-block: 22px;
  margin-top: 40px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ix-cinta-pista {
  display: flex;
  width: max-content;
  gap: 56px;
  animation: ix-cinta 38s linear infinite;
}
.ix-cinta:hover .ix-cinta-pista { animation-play-state: paused; }
.ix-cinta span {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: #c9c3dc;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 56px;
}
.ix-cinta span::after { content: "✦"; font-size: 12px; color: var(--purple); }
@keyframes ix-cinta { to { transform: translateX(-50%); } }

/* ---------- Tres puertas ---------- */
.ix-puertas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ix-puerta {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 250px;
  padding: 30px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fff;
  transition: transform .45s var(--ix-ease), box-shadow .45s var(--ix-ease), border-color .3s;
  overflow: hidden;
}
.ix-puerta:hover { transform: translateY(-6px); box-shadow: var(--ix-sombra); border-color: #d9cdf3; }
.ix-puerta .service-number { font-size: 10px; letter-spacing: 1.6px; font-weight: 700; color: var(--purple); }
.ix-puerta h3 { font-size: 27px; margin-block: 18px 12px; }
.ix-puerta p { font-size: 14px; }
.ix-puerta .text-link { margin-top: auto; padding-top: 26px; }
.ix-puerta-oscura { background: var(--ix-noche); border-color: var(--ix-noche); }
.ix-puerta-oscura h3 { color: #fff; }
.ix-puerta-oscura p { color: var(--ix-texto-noche); }
.ix-puerta-oscura .service-number { color: #b8a2ff; }
.ix-puerta-oscura .text-link { color: #fff; }
.ix-puerta-lila { background: var(--ix-lila); border-color: #ebe2fa; }

/* ---------- Proyectos ---------- */
.ix-proyecto {
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 60px;
  align-items: center;
  padding-block: 70px;
  border-top: 1px solid var(--border);
}
.ix-proyecto:first-of-type { border-top: 0; padding-top: 20px; }
.ix-proyecto.ix-invertido { grid-template-columns: .85fr 1.35fr; }
.ix-proyecto.ix-invertido .ix-proyecto-visual { order: 2; }

.ix-proyecto-visual {
  position: relative;
  min-width: 0;
  padding: 44px 90px 44px 44px;
  border-radius: 30px;
  background: var(--fondo, var(--ix-lila));
  overflow: hidden;
}
.ix-proyecto-visual .ix-movil {
  position: absolute;
  right: 26px;
  bottom: -60px;
  width: 25%;
  transform: translate3d(0, calc(var(--py, 0) * 1px), 0);
}
.ix-proyecto-visual .ix-navegador { transition: transform .8s var(--ix-ease); }
.ix-proyecto:hover .ix-navegador { transform: scale(1.015); }

.ix-proyecto-texto { min-width: 0; }
.ix-numero {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--muted);
  margin-bottom: 22px;
}
.ix-proyecto-texto h3 { font-size: clamp(30px, 3vw, 42px); margin-block: 16px 16px; }
.ix-proyecto-texto > p { font-size: 15px; max-width: 420px; }
.ix-datos {
  display: grid;
  gap: 0;
  margin: 26px 0 30px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}
.ix-datos li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-block: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
}
.ix-datos li b { color: var(--ink); text-align: right; }

/* ---------- Sección oscura: negocios ---------- */
.ix-noche {
  background: var(--ix-noche);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.ix-noche::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 380px at 85% 10%, #7041d93b, transparent 70%),
    radial-gradient(500px 360px at 5% 95%, #057f872e, transparent 70%);
  pointer-events: none;
}
.ix-noche > * { position: relative; }
.ix-noche h2, .ix-noche h3 { color: #fff; }
.ix-noche p { color: var(--ix-texto-noche); }
.ix-noche .eyebrow { color: #b8a2ff; }
.ix-noche .text-link { color: #fff; }
.ix-noche .btn-white { background: transparent; color: #fff; border-color: #ffffff38; }
.ix-noche .btn-white:hover { background: #ffffff12; }

.ix-negocio-intro {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 60px;
  align-items: center;
}
.ix-negocio-intro h2 { font-size: clamp(34px, 3.7vw, 54px); line-height: 1.04; margin-bottom: 24px; }
.ix-negocio-intro h2 span { color: #b8a2ff; }
.ix-negocio-intro > div > p { font-size: 16px; max-width: 470px; margin-bottom: 32px; }

/* Demostración de automatización */
.ix-flujo {
  min-width: 0;
  background: #1c1a36;
  border: 1px solid var(--ix-linea-noche);
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 40px 90px #0000004d;
}
.ix-flujo-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 1.4px;
  font-weight: 700;
  color: #8f8bb0;
  padding: 2px 4px 18px;
}
.ix-flujo-cabecera .ix-en-vivo { display: inline-flex; align-items: center; gap: 8px; }
.ix-en-vivo i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #37d39f;
  box-shadow: 0 0 0 0 #37d39f88;
  animation: ix-latido 1.8s infinite;
}
@keyframes ix-latido { 70% { box-shadow: 0 0 0 9px #37d39f00; } 100% { box-shadow: 0 0 0 0 #37d39f00; } }
.ix-flujo-pausa {
  background: transparent;
  border: 1px solid var(--ix-linea-noche);
  color: #b9b6d3;
  border-radius: 99px;
  padding: 4px 12px;
  font: 700 10px Inter, sans-serif;
  cursor: pointer;
}

.ix-flujo-cuerpo { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; }
.ix-pasos { list-style: none; margin: 0; padding: 0; position: relative; }
.ix-pasos::before {
  content: "";
  position: absolute;
  left: 21px; top: 22px; bottom: 22px;
  width: 2px;
  background: #ffffff14;
}
.ix-pasos::after {
  content: "";
  position: absolute;
  left: 21px; top: 22px;
  width: 2px;
  height: calc((100% - 44px) * var(--avance, 0));
  background: linear-gradient(#8f6af0, #37d39f);
  transition: height .7s var(--ix-ease);
}
.ix-paso {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px 8px 0;
  border-radius: 14px;
  opacity: .42;
  transition: opacity .5s, background .5s;
}
.ix-paso-icono {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: #26244a;
  border: 1px solid var(--ix-linea-noche);
  color: #cfc7f5;
  transition: background .5s, color .5s, transform .5s var(--ix-ease);
}
.ix-paso-icono svg { width: 19px; height: 19px; }
.ix-paso strong { display: block; font-size: 13px; color: #fff; letter-spacing: -.01em; }
.ix-paso small { display: block; font-size: 11px; color: #8f8bb0; line-height: 1.4; }
.ix-paso-hora { font-size: 10px; color: #6f6b92; font-variant-numeric: tabular-nums; }
.ix-paso.ix-hecho { opacity: 1; }
.ix-paso.ix-actual { opacity: 1; background: #ffffff08; }
.ix-paso.ix-actual .ix-paso-icono { background: var(--purple); color: #fff; transform: scale(1.06); border-color: transparent; }
.ix-paso.ix-hecho:not(.ix-actual) .ix-paso-icono { background: #1f3b3a; color: #37d39f; }

.ix-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ix-metrica {
  background: #25234a;
  border: 1px solid var(--ix-linea-noche);
  border-radius: 14px;
  padding: 14px 16px;
}
.ix-metrica span { display: block; font-size: 10px; letter-spacing: 1.2px; font-weight: 700; color: #8f8bb0; }
.ix-metrica b {
  display: block;
  margin-top: 4px;
  font-size: 26px;
  letter-spacing: -.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  transition: color .4s;
}
.ix-metrica b.ix-sube { color: #37d39f; }
.ix-barras { display: flex; align-items: end; gap: 5px; height: 46px; margin-top: 10px; }
.ix-barras i {
  flex: 1;
  border-radius: 4px 4px 1px 1px;
  background: #4b3f8c;
  height: var(--h, 30%);
  transition: height .8s var(--ix-ease), background .4s;
}
.ix-barras i:last-child { background: #8f6af0; }
.ix-flujo-pie {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ix-linea-noche);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 12px;
  color: #cfc7f5;
}
.ix-flujo-pie small { color: #6f6b92; font-size: 10px; }

.ix-servicios-noche {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 80px;
  background: var(--ix-linea-noche);
  border: 1px solid var(--ix-linea-noche);
  border-radius: 22px;
  overflow: hidden;
}
.ix-servicios-noche article {
  background: var(--ix-noche);
  padding: 30px 26px;
  transition: background .4s;
}
.ix-servicios-noche article:hover { background: #1c1a36; }
.ix-servicios-noche .ix-icono {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: #26244a;
  color: #cbbcff;
  margin-bottom: 22px;
}
.ix-servicios-noche .ix-icono svg { width: 20px; height: 20px; }
.ix-servicios-noche h3 { font-size: 18px; letter-spacing: -.02em; margin-bottom: 10px; }
.ix-servicios-noche p { font-size: 13px; }

/* ---------- Educación ---------- */
.ix-banda-imagen {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  aspect-ratio: 21 / 8;
  margin-bottom: 60px;
}
.ix-banda-imagen img {
  position: absolute;
  inset: -12% 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  object-position: center 40%;
  transform: translate3d(0, calc(var(--py, 0) * 1px), 0);
}
.ix-banda-imagen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #14132acc 0%, #14132a55 45%, transparent 75%);
}
.ix-banda-texto {
  position: absolute;
  z-index: 1;
  left: 50px;
  bottom: 46px;
  max-width: 520px;
}
.ix-banda-texto .eyebrow { color: #d9ccff; }
.ix-banda-texto h2 { color: #fff; font-size: clamp(30px, 3.6vw, 52px); }

/* ---------- Nosotros en cifras de oficio (sin cifras inventadas) ---------- */
.ix-oficio {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 60px;
}
.ix-oficio div { border-top: 2px solid var(--ink); padding-top: 18px; }
.ix-oficio b { display: block; font-size: 15px; margin-bottom: 6px; letter-spacing: -.02em; }
.ix-oficio p { font-size: 13px; }

/* ---------- Página /negocios/ ---------- */
.ix-cabeza-noche { padding-block: 90px 100px; }
.ix-cabeza-noche h1 {
  font-size: clamp(44px, 5.4vw, 78px);
  line-height: 1.02;
  letter-spacing: -.062em;
  margin-bottom: 26px;
  color: #fff;
}
.ix-cabeza-noche h1 span { color: #b8a2ff; }

.ix-casos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ix-caso {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  background: #fff;
  transition: transform .45s var(--ix-ease), box-shadow .45s var(--ix-ease);
}
.ix-caso:hover { transform: translateY(-5px); box-shadow: var(--ix-sombra); }
.ix-caso .ix-numero { margin-bottom: 30px; }
.ix-caso h3 { font-size: 24px; margin-bottom: 12px; }
.ix-caso p { font-size: 14px; }
.ix-caso ul { margin: 20px 0 0; padding-left: 18px; font-size: 13px; color: #555267; line-height: 1.9; }

.ix-precios {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 50px;
  align-items: start;
}
.ix-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.ix-tabla th {
  text-align: left;
  font-size: 10px;
  letter-spacing: 1.6px;
  color: var(--muted);
  padding: 0 0 14px;
  border-bottom: 2px solid var(--ink);
}
.ix-tabla th:last-child, .ix-tabla td:last-child { text-align: right; }
.ix-tabla td { padding: 17px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.ix-tabla td:first-child { color: var(--ink); font-weight: 700; padding-right: 20px; }
.ix-tabla td:first-child small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 2px; }
.ix-tabla td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.ix-tabla td:last-child small { display: block; color: var(--muted); font-size: 12px; }
.ix-nota-precio { font-size: 12px; margin-top: 18px; }
.ix-condiciones {
  background: var(--ix-lila);
  border: 1px solid #ebe2fa;
  border-radius: var(--radius);
  padding: 30px;
}
.ix-condiciones h3 { font-size: 22px; margin-bottom: 16px; }
.ix-condiciones ol { margin: 0; padding-left: 20px; font-size: 14px; color: #555267; line-height: 1.8; }
.ix-condiciones ol li + li { margin-top: 8px; }

.ix-faq { border-top: 1px solid var(--border); }
.ix-faq details { border-bottom: 1px solid var(--border); }
.ix-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.02em;
}
.ix-faq summary::-webkit-details-marker { display: none; }
.ix-faq summary::after { content: "+"; color: var(--purple); font-size: 22px; line-height: 1; transition: transform .3s var(--ix-ease); }
.ix-faq details[open] summary::after { transform: rotate(45deg); }
.ix-faq details p { padding: 0 0 22px; max-width: 720px; font-size: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1050px) {
  .ix-hero { grid-template-columns: 1fr; padding-top: 56px; }
  .ix-escena { max-width: 680px; width: 100%; margin-inline: auto; }
  .ix-puertas { grid-template-columns: 1fr; }
  .ix-puerta { min-height: 0; }
  .ix-proyecto, .ix-proyecto.ix-invertido { grid-template-columns: 1fr; gap: 34px; padding-block: 50px; }
  .ix-proyecto.ix-invertido .ix-proyecto-visual { order: 0; }
  .ix-negocio-intro { grid-template-columns: 1fr; gap: 44px; }
  .ix-servicios-noche { grid-template-columns: 1fr 1fr; }
  .ix-oficio { grid-template-columns: 1fr 1fr; }
  .ix-casos { grid-template-columns: 1fr; }
  .ix-precios { grid-template-columns: 1fr; }
  .ix-banda-imagen { aspect-ratio: 16 / 9; }
}
@media (max-width: 760px) {
  .ix-hero { padding-block: 36px 10px; }
  .ix-hero .acciones .btn { width: 100%; }
  .ix-sello { display: none; }
  .ix-cinta span { font-size: 17px; gap: 36px; }
  .ix-cinta-pista { gap: 36px; }
  .ix-proyecto-visual { padding: 22px 56px 22px 18px; border-radius: 22px; }
  .ix-proyecto-visual .ix-movil { right: 12px; bottom: -40px; width: 30%; border-radius: 22px; padding: 5px; }
  .ix-proyecto-visual .ix-movil img { border-radius: 18px; }
  .ix-navegador-barra { height: 26px; }
  .ix-navegador-barra span { display: none; }
  .ix-flujo { padding: 14px; border-radius: 18px; }
  .ix-flujo-cuerpo { grid-template-columns: 1fr; }
  .ix-panel { flex-direction: row; }
  .ix-panel .ix-metrica { flex: 1; min-width: 0; padding: 12px; }
  .ix-panel .ix-metrica b { font-size: 20px; }
  .ix-panel .ix-barras { display: none; }
  .ix-paso-hora { display: none; }
  .ix-paso { grid-template-columns: 44px 1fr; }
  .ix-servicios-noche { grid-template-columns: 1fr; margin-top: 56px; }
  .ix-oficio { grid-template-columns: 1fr; }
  .ix-banda-imagen { aspect-ratio: 4 / 5; border-radius: 22px; }
  .ix-banda-imagen::after { background: linear-gradient(0deg, #14132ae6 0%, #14132a66 50%, transparent 80%); }
  .ix-banda-texto { left: 22px; right: 22px; bottom: 26px; }
  .ix-tabla td:last-child { white-space: normal; }
  .ix-cabeza-noche { padding-block: 56px 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-cortina] { opacity: 1; transform: none; clip-path: none; }
  .ix-cinta-pista { animation: none; }
}

@media (max-width: 760px) { .ix-solo-ancho { display: none; } }
footer .marca { align-self: flex-start; }