/* ============================================================================
   KONDORY — SISTEMA DE DISENO "kdx" (todo el sitio)
   ----------------------------------------------------------------------------
   Antes se llamaba home-kdx.css y solo lo cargaba la home. Ahora es la hoja
   comun del sitio: la home, las paginas de servicio, el portafolio, el blog y
   contacto comparten estos componentes.

   El sitio acumulaba TRES lenguajes visuales distintos:
     - kd-*        (services, soluciones) — el primer intento, ya retirado
     - about-* /   (about-us y las ~19 paginas de solucion) — tarjetas propias
       feature-card  de cada pagina, sin sistema comun
     - Bootstrap   (chatbot, creditos, blog...) — .card .shadow-sm sueltos
       puro
   Este archivo los sustituye a todos. Prefijo kdx- para no colisionar con
   ninguna de las tres nomenclaturas mientras dure la migracion.

   Decisiones de base:
     1. Hero a pantalla completa en la home (foto corporativa + datos al pie);
        las paginas internas usan .kdx-page-hero, mas bajo y con migas de pan.
     2. Una sola secuencia de movimiento al cargar. Las secciones no se animan
        al hacer scroll.
     3. Estructura que informa: cada tarjeta declara a que pertenece (sector,
        categoria) antes del titulo.

   Paleta: los navy/cian que ya viven en el logo y en las capturas de producto
   (erp-hero, gestion, dashboard), para no inventar una identidad distinta a la
   corporativa.
   ============================================================================ */

:root {
  /* Superficies oscuras */
  --kdx-navy: #080f24;
  --kdx-navy-2: #0e1b3d;
  --kdx-navy-3: #16264f;

  /* Accion */
  --kdx-blue: #2563eb;
  --kdx-blue-deep: #1d4ed8;
  --kdx-cyan: #38bdf8;

  /* Superficies claras */
  --kdx-paper: #f5f7fb;  /* antes #fbfcfe: casi igual al blanco, las secciones se fundian */
  --kdx-white: #ffffff;

  /* Texto */
  --kdx-ink: #0b1428;
  --kdx-body: #4a5a75;
  --kdx-muted: #7a8aa3;

  /* Lineas y sombras */
  --kdx-line: #e2e9f3;
  --kdx-line-dark: rgba(255, 255, 255, .12);
  --kdx-shadow: 0 1px 2px rgba(11, 20, 40, .04), 0 12px 32px rgba(11, 20, 40, .07);
  --kdx-shadow-lg: 0 30px 70px rgba(6, 14, 34, .45);

  /* Ritmo vertical */
  --kdx-y: 104px;
}

/* ---------------------------------------------------------------------------
   Tipografia: Poppins (display) + Open Sans (texto) son las corporativas y ya
   vienen auto-alojadas con fallback metrico, asi que no se cambian las
   familias. Lo que cambia es el tratamiento: escala mas contrastada y
   tracking negativo en los titulares grandes.
   --------------------------------------------------------------------------- */
.kdx-h1,
.kdx-h2,
.kdx-h3 {
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--kdx-ink);
  margin: 0;
}

.kdx-h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.6rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
}

/* Segunda linea del titular: mismo tamano, otro peso. Sustituye al recurso de
   "una palabra en degradado", que es el tic mas reconocible de una pagina
   generada. */
.kdx-h1-soft {
  display: block;
  font-weight: 400;
  color: #6d7f9c;
}

.kdx-h2 {
  font-size: clamp(1.7rem, 2.9vw, 2.4rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.02em;
}

.kdx-h3 {
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.01em;
}

.kdx-lead {
  font-size: 1.08rem;
  line-height: 1.72;
  color: var(--kdx-body);
  margin: 0;
  /* El texto de apoyo si se limita: una linea de lectura de 62ch es comoda y
     evita que el parrafo se estire a todo el ancho del contenedor. */
  max-width: 62ch;
}

/* ---------------------------------------------------------------------------
   Secciones y cabeceras
   --------------------------------------------------------------------------- */
.kdx-section {
  position: relative;
  padding: var(--kdx-y) 0;
}

.kdx-section--paper { background: var(--kdx-paper); }
.kdx-section--white { background: var(--kdx-white); }

.kdx-section--navy {
  background:
    radial-gradient(900px 460px at 88% -6%, rgba(56, 189, 248, .14), transparent 62%),
    radial-gradient(760px 460px at -6% 108%, rgba(37, 99, 235, .26), transparent 58%),
    linear-gradient(150deg, var(--kdx-navy) 0%, #0d1a3e 58%, #0b2350 100%);
  color: #e8eefb;
}

.kdx-section--navy .kdx-h2,
.kdx-section--navy .kdx-h3 { color: #fff; }
.kdx-section--navy .kdx-lead { color: #a9bbdb; }

/* Cabecera alineada a la izquierda: la home no centra nada. Se apoya en un
   filete superior en vez de una pastilla con texto en mayusculas.

   El filete recorre TODO el contenedor (no el ancho del texto): con
   max-width en la cabecera, el filete se cortaba a 714px dentro de un
   contenedor de 1140px y dejaba 414px de vacio visible a la derecha. Ahora el
   ancho se limita en el titular y la entradilla, que es donde importa para la
   lectura, y la linea cruza completa. */
/* Estandar de secciones (v7, referencia pagina-biomantenimiento): la cabecera
   no lleva filete; el antetitulo es una pastilla con punto. Dos formas:
   .kdx-head                lateral / izquierda (secciones con columna al lado)
   .kdx-head--center        centrada (secciones de ancho completo)          */
.kdx-head {
  max-width: none;
  margin-bottom: 52px;
  padding-top: 0;
  border-top: 0;
}

.kdx-head--center {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.kdx-head--center .kdx-h2 { max-width: 24ch; margin-left: auto; margin-right: auto; text-wrap: balance; }
.kdx-head--center .kdx-lead { max-width: 62ch; margin-left: auto; margin-right: auto; }

/* Los titulares se limitan para que no se estiren a los 1140px del contenedor
   (una linea de lectura comoda ronda los 45-50 caracteres en display). */
.kdx-head .kdx-h2 {
  max-width: 22ch;
}

.kdx-section--navy .kdx-head { border-top-color: var(--kdx-line-dark); }

.kdx-head__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  margin-bottom: 16px;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  background: #eaf1ff;
  color: var(--kdx-blue);
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.2;
}

.kdx-head__kicker::before {
  content: '';
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.kdx-section--paper .kdx-head__kicker { background: #fff; box-shadow: 0 1px 2px rgba(8, 15, 36, .06); }
.kdx-section--navy .kdx-head__kicker { background: rgba(59, 130, 246, .16); color: #bfdbfe; }

.kdx-head .kdx-lead { margin-top: 16px; }

/* ---------------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------------- */
.kdx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 28px;
  border-radius: 11px;
  border: 1px solid transparent;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: .96rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .22s cubic-bezier(.16, 1, .3, 1),
              box-shadow .22s ease,
              background-color .22s ease,
              border-color .22s ease;
}

.kdx-btn--primary {
  background: linear-gradient(135deg, var(--kdx-blue) 0%, var(--kdx-blue-deep) 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(37, 99, 235, .32);
}

.kdx-btn--primary:hover,
.kdx-btn--primary:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(37, 99, 235, .44);
}

.kdx-btn--ghost {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
}

.kdx-btn--ghost:hover,
.kdx-btn--ghost:focus-visible {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
  transform: translateY(-2px);
}

.kdx-btn--outline {
  background: #fff;
  border-color: var(--kdx-line);
  color: var(--kdx-ink);
}

.kdx-btn--outline:hover,
.kdx-btn--outline:focus-visible {
  border-color: var(--kdx-blue);
  color: var(--kdx-blue);
  transform: translateY(-2px);
}

.kdx-btn:focus-visible {
  outline: 3px solid rgba(56, 189, 248, .55);
  outline-offset: 3px;
}

/* Enlace de texto con flecha, para "ver mas" */
.kdx-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .88rem;
  font-weight: 600;
  color: var(--kdx-blue);
  text-decoration: none;
}

.kdx-link i { transition: transform .25s ease; }
.kdx-link:hover { color: var(--kdx-blue-deep); }
.kdx-link:hover i { transform: translateX(4px); }

/* ---------------------------------------------------------------------------
   HERO — fondo a pantalla completa, contenido a la izquierda
   ---------------------------------------------------------------------------
   fondo_index.webp ya trae el equipo, la red de nodos y el candado de
   seguridad. El tercio derecho esta ocupado por esas figuras, asi que el texto
   vive a la izquierda y el degradado oscurece ese lado (y la franja inferior)
   en vez de velar toda la foto, que era lo que hacia el hero anterior.
   --------------------------------------------------------------------------- */
.kdx-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* La altura la fija el contenido mas el alto del header; asi el titular nunca
     choca con la banda de datos por mas que cambie el texto o el idioma. */
  padding: 148px 0 0;
  background: #0a1633 url('../img/fondo_index.webp') center right / cover no-repeat;
}

/* Capa de contraste: fuerte a la izquierda y abajo, casi nula a la derecha,
   que es donde esta el candado y conviene que se vea. */
.kdx-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(6, 13, 32, .95) 0%,
      rgba(6, 13, 32, .88) 34%,
      rgba(6, 13, 32, .58) 56%,
      rgba(6, 13, 32, .22) 78%,
      rgba(6, 13, 32, .12) 100%),
    linear-gradient(180deg,
      rgba(6, 13, 32, .55) 0%,
      rgba(6, 13, 32, 0) 26%,
      rgba(6, 13, 32, .35) 68%,
      rgba(6, 13, 32, .92) 100%);
}

.kdx-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 72px;
  width: 100%;
  min-height: 480px; /* empuja la banda de datos al pie del hero */
}

.kdx-hero__copy { max-width: 44rem; }

.kdx-hero__place {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: #9fb4d8;
}

.kdx-hero__place i { color: var(--kdx-cyan); font-size: .95rem; }

.kdx-hero__title {
  color: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: clamp(2.3rem, 4.4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.032em;
  margin: 0 0 22px;
  text-wrap: balance;
}

/* Segunda linea del titular: mismo tamano, otro peso. Sustituye al recurso de
   "una palabra en degradado", que es el tic mas reconocible de una pagina
   generada. */
.kdx-hero__title-soft {
  display: block;
  font-weight: 400;
  color: #9fb4d8;
}

.kdx-hero__lead {
  font-size: 1.08rem;
  line-height: 1.72;
  color: #c2d0e8;
  margin: 0 0 30px;
  max-width: 46ch;
}

.kdx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Banda de datos al pie del hero.
   Ocupa 3/4 del ancho a proposito: el cuarto derecho queda libre para el aviso
   de cookies, que es fijo y no se puede reubicar sin tapar el candado de la
   foto. Asi ninguno de los dos depende de la posicion del otro. */
.kdx-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0 0 44px;
  list-style: none;
  max-width: 100%;
}

.kdx-hero__stat {
  padding: 20px 24px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.kdx-hero__stat dt {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
}

.kdx-hero__stat dd {
  margin: 8px 0 0;
  font-size: .84rem;
  line-height: 1.4;
  color: #93a8cc;
}

@media (min-width: 768px) {
  .kdx-hero__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* 68% deja libre el cuarto derecho con margen suficiente para el aviso de
       cookies (374px de ancho), sin que las cifras queden apretadas. */
    max-width: 68%;
  }
  .kdx-hero__stat { padding-right: 30px; }
}

/* En pantallas estrechas la foto se recorta por la izquierda para no perder el
   equipo y el candado, y el degradado pasa a vertical porque ya no hay lado
   libre donde poner el texto. */
@media (max-width: 991px) {
  .kdx-hero {
    padding: 118px 0 0;
    background-position: 68% center;
  }

  .kdx-hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(6, 13, 32, .92) 0%,
        rgba(6, 13, 32, .86) 42%,
        rgba(6, 13, 32, .93) 100%);
  }

  .kdx-hero__inner { min-height: 0; gap: 52px; }
}

@media (max-width: 575px) {
  .kdx-hero { padding-top: 104px; }
  .kdx-hero__actions .kdx-btn { width: 100%; }
  .kdx-hero__stat dt { font-size: 1.5rem; }
  .kdx-hero__stat { padding-right: 14px; }
}

/* Una sola secuencia de entrada al cargar. Nada mas se anima solo. */
.kdx-in {
  animation: kdx-rise .78s cubic-bezier(.16, 1, .3, 1) both;
}

.kdx-in--2 { animation-delay: .1s; }
.kdx-in--3 { animation-delay: .2s; }
.kdx-in--4 { animation-delay: .3s; }
.kdx-in--5 { animation-delay: .4s; }

@keyframes kdx-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------------------
   Industrias: ficha INFORMATIVA de sectores
   ---------------------------------------------------------------------------
   Esta seccion no navega a ningun lado: declara a que sectores sirve Kondory.
   El diseno lo refleja en vez de disimularlo:
     - no es un <a>, asi que no hay cursor de enlace ni foco de teclado;
     - no hay :hover que levante la ficha, porque no hay nada que prometer;
     - no hay flecha ni "ver mas", que insinuarian un destino inexistente.
   La jerarquia la da el icono y el tipo de trabajo, no un boton.
   --------------------------------------------------------------------------- */
.kdx-industries {
  /* Papel y no blanco: industrias va justo antes de "Soluciones" (blanca) y
     ambas son rejillas de tarjetas, asi que compartir tono las fundia en un
     unico bloque. El cambio de tono marca donde empieza la oferta principal. */
  background: var(--kdx-paper);
  padding: var(--kdx-y) 0;
  border-bottom: 1px solid var(--kdx-line);
}

/* Cabecera a dos columnas: titulo a la izquierda, entradilla a la derecha. */
.kdx-industries__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: end;
  margin-bottom: 38px;
}

@media (min-width: 992px) {
  .kdx-industries__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 34ch);
    gap: 48px;
  }
}

/* Titulo mas pequeno que el de "Soluciones" (1.6rem frente a 2.4rem) para que
   esta seccion se lea como indice de sectores y no como la oferta principal.
   El salto es deliberado: es la unica seccion informativa que va arriba del
   todo, y no debe competir con el catalogo. */
.kdx-industries__head .kdx-h2 {
  font-size: clamp(1.35rem, 1.8vw, 1.6rem);
  letter-spacing: -.015em;
}

.kdx-industries__sub {
  margin: 0;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--kdx-muted);
}

.kdx-industries__grid {
  display: grid;
  grid-template-columns: 1fr;
  /* grid-auto-rows: 1fr reparte el alto de cada fila por igual entre sus
     fichas, para que el bloque cierre recto. */
  grid-auto-rows: 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .kdx-industries__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .kdx-industries__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

/* Sin `cursor: pointer` ni transiciones: es contenido, no un control. */
.kdx-industry {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 18px 18px;
  background: var(--kdx-white);
  border: 1px solid var(--kdx-line);
  border-radius: 14px;
}

/* Cabecera: icono y tipo de trabajo juntos, sin hueco muerto entre ellos. */
.kdx-industry__head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  margin-bottom: 14px;
}

.kdx-industry__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 9px;
  background: rgba(37, 99, 235, .07);
  color: var(--kdx-blue);
  font-size: .92rem;
}

.kdx-industry__work {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--kdx-muted);
}

.kdx-industry__name {
  display: block;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--kdx-ink);
  /* Anclado a 2 lineas: "Seguridad y salud en el trabajo" ocupa dos y
     "Manufactura" una. Sin reservar el alto, esa ficha sobresalia 18px por
     debajo de sus vecinas y rompia la linea de cierre de la fila. */
  min-height: calc(.95rem * 1.32 * 2);
}

@media (max-width: 991px) {
  .kdx-industries__head { margin-bottom: 30px; }
}

/* ---------------------------------------------------------------------------
   Soluciones: la tarjeta destacada (ERP) manda; el resto se subordina.
   Se rompe la rejilla de nueve cajas identicas.
   --------------------------------------------------------------------------- */
.kdx-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--kdx-line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--kdx-shadow);
  margin-bottom: 44px;
}

@media (min-width: 992px) {
  .kdx-feature { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

.kdx-feature__media {
  position: relative;
  min-height: 240px;
  background: linear-gradient(140deg, #0a1637, #12306b);
}

.kdx-feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kdx-feature__body {
  padding: 40px 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.kdx-feature__flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .74rem;
  font-weight: 600;
  color: var(--kdx-blue);
  background: rgba(37, 99, 235, .08);
  border: 1px solid rgba(37, 99, 235, .18);
  border-radius: 999px;
  padding: 6px 13px;
  margin-bottom: 16px;
}

.kdx-feature__body p {
  margin: 14px 0 24px;
  font-size: .98rem;
  line-height: 1.72;
  color: var(--kdx-body);
}

.kdx-feature__body .kdx-btn { align-self: flex-start; }

@media (max-width: 991px) {
  .kdx-feature__body { padding: 30px 26px; }
}

/* Variante 50/50 para paginas internas (about-us). La home usa 6fr/5fr para
   dar protagonismo al texto del ERP, pero en una ficha descriptiva la foto
   pesa igual, asi que aqui se reparte a la mitad. Solo aplica con la clase
   .kdx-feature--split; la home no la lleva. */
@media (min-width: 992px) {
  .kdx-feature--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   Bloque de lectura en dos columnas (texto + imagen), 50/50
   ---------------------------------------------------------------------------
   Para paginas internas tipo "Nosotros": el texto se lee como articulo (un
   titular, una entradilla, una lista corta y un cierre), no como tarjeta. La
   imagen se enmarca con un filete y una leyenda para que se lea como captura
   del producto y no como foto decorativa.
   Medido en escritorio: 557px + 557px dentro de un contenedor de 1140px.
   --------------------------------------------------------------------------- */
.kdx-split {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 40px;
}

@media (min-width: 992px) {
  .kdx-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
    /* `stretch` y no `center`: con el centrado, la columna de imagen quedaba
       mas corta que el texto y la foto flotaba 32px por debajo del titular. */
    align-items: stretch;
  }
}

/* El titular ya no se limita a 22ch como en las cabeceras de seccion: aqui es
   el asunto de la pagina y puede ocupar la columna entera. */
.kdx-split__body .kdx-head .kdx-h2 { max-width: 18ch; }
.kdx-split__body .kdx-head { margin-bottom: 24px; }

/* Nota breve dentro de un bloque de texto: icono + titulo + una linea de
   apoyo. Debajo de 640px se apilan. */
.kdx-notes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .kdx-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Fila con filete superior en vez de caja: la lista se lee como articulo y no
   como tres tarjetas sueltas dentro de un texto. */
.kdx-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 14px 0 0;
  border-top: 1px solid var(--kdx-line);
}

.kdx-note__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 9px;
  background: rgba(37, 99, 235, .07);
  color: var(--kdx-blue);
  font-size: .9rem;
}

.kdx-note__body {
  display: block;
  min-width: 0;
}

.kdx-note__body strong {
  display: block;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--kdx-ink);
  margin-bottom: 4px;
}

.kdx-note__body span {
  display: block;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--kdx-body);
}

/* ---------------------------------------------------------------------------
   Notas sobre fondo navy
   ---------------------------------------------------------------------------
   Las notas se definieron para fondos claros: titulo en --kdx-ink (#0b1428) y
   texto en --kdx-body (#4a5a75). Puestas dentro de .kdx-section--navy quedaban
   casi invisibles sobre #080f24. Aqui se invierten los tres tonos y el icono
   pasa a cian, como el resto de componentes claros sobre navy. */
.kdx-section--navy .kdx-note {
  border-top-color: var(--kdx-line-dark);
}

.kdx-section--navy .kdx-note__icon {
  background: rgba(56, 189, 248, .14);
  color: var(--kdx-cyan);
}

.kdx-section--navy .kdx-note__body strong {
  color: #fff;
}

.kdx-section--navy .kdx-note__body span {
  color: #a9bbdb;
}

/* Cierre del bloque y accion, separados del resto por el mismo filete. */
.kdx-split__note {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--kdx-line);
  font-size: .93rem;
  line-height: 1.68;
  color: var(--kdx-body);
}

/* Dos acciones con aire real. Antes el contenedor no declaraba `gap`, asi que
   los botones se tocaban (medido: 0px entre uno y otro) y parecian un solo
   control partido. `wrap` deja que bajen de linea en anchos cortos. */
.kdx-split__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

/* Ilustracion suelta sobre fondo oscuro (.kdx-split__figure).
   A diferencia de .kdx-shot, no lleva marco, fondo ni filete: la imagen ya es
   transparente y debe fundirse con el panel navy. Se limita el ancho y se
   centra para que no toque los bordes de la columna. */
.kdx-split__figure {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin-inline: auto;
  /* Un halo suave ayuda a separar la figura del fondo sin dibujarle un borde. */
  filter: drop-shadow(0 24px 48px rgba(2, 8, 30, .55));
}

/* Marco de captura: filete + leyenda sobria. Sin sombra fuerte, para que no
   compita con el titular. */
.kdx-shot {
  margin: 0;
  /* Ocupa el alto de la columna: la imagen deja de ir suelta por su altura
     natural y el bloque cierra a la misma linea que el texto. */
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--kdx-line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--kdx-paper);
  box-shadow: var(--kdx-shadow);
}

/* La imagen se reparte el alto que deja la leyenda. `object-fit: cover` recorta
   lo que sobre en lugar de deformar: la foto es 3:2 y la columna puede ser mas
   alargada segun el largo del texto.

   `flex: 1 1 0` y no `1 1 auto`: con base `auto`, el alto del elemento parte de
   la altura natural de la imagen (800px para 1200x800) y el flexbox se queda
   con ese tamanio en vez de ajustarse a la columna, que es lo que estiraba la
   seccion por debajo del texto. Con base 0, el alto lo decide solo el espacio
   que sobra. */
.kdx-shot img {
  display: block;
  width: 100%;
  flex: 1 1 0;
  height: 0;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}

.kdx-shot figcaption {
  flex: none;
  padding: 12px 16px;
  border-top: 1px solid var(--kdx-line);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--kdx-muted);
}

/* Marco sobre navy (.kdx-shot--navy): transparente.
   El marco claro (fondo --kdx-paper + filete + sombra) dibuja un recuadro
   blanco sobre el panel oscuro y corta el bloque. Aqui se deja sin fondo, sin
   borde y sin sombra para que la imagen se apoye directamente en el navy. */
.kdx-shot--navy {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  max-width: 380px;
  margin-inline: auto;
}

/* Sin leyenda en este caso: el pie con filete volveria a dibujar el corte. */
.kdx-shot--navy figcaption { display: none; }

.kdx-shot--navy img {
  border-radius: 16px;
  /* Un halo tenue separa la imagen del fondo sin contorno visible. */
  box-shadow: 0 30px 70px -18px rgba(2, 8, 30, .75);
}

/* ---------------------------------------------------------------------------
   Soluciones: catalogo de productos
   ---------------------------------------------------------------------------
   Recorrido de esta seccion, para no repetir los errores anteriores:
     1. Rejilla de 8 tarjetas identicas -> se leia como plantilla.
     2. Filas con hairlines -> se leia como una tabla de admin: el icono flotaba
        lejos del texto, la flecha vivia en el vacio y el hueco entre columnas
        rompia la lectura.
   Ahora cada producto es una tarjeta con borde propio: el icono y el sector
   forman una cabecera unida, el texto va debajo y el enlace cierra la tarjeta.
   Nada flota suelto y el conjunto se lee como oferta, no como listado.
   --------------------------------------------------------------------------- */
.kdx-catalog {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .kdx-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .kdx-catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}

.kdx-prod {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 22px 20px;
  background: var(--kdx-white);
  border: 1px solid var(--kdx-line);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color .22s ease,
              box-shadow .22s ease,
              transform .22s cubic-bezier(.16, 1, .3, 1);
}

.kdx-prod:hover {
  border-color: rgba(37, 99, 235, .42);
  box-shadow: var(--kdx-shadow);
  transform: translateY(-3px);
}

/* Cabecera: icono y sector en la misma linea, sin hueco muerto entre ellos.
   Altura fija: hay sectores que ocupan una linea y otros dos ("Seguridad y
   salud en el trabajo"), y sin fijarla los titulos de esas tarjetas arrancaban
   mas abajo y la fila quedaba descuadrada. */
.kdx-prod__head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  margin-bottom: 16px;
}

.kdx-prod__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 10px;
  background: rgba(37, 99, 235, .07);
  color: var(--kdx-blue);
  font-size: 1rem;
  transition: background-color .22s ease, color .22s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

/* Mismo gesto que en las tarjetas: el icono sube 1px y el simbolo hace un pop
   de 6%. Un solo movimiento por interaccion, no un bucle. */
.kdx-prod:hover .kdx-prod__icon {
  background: var(--kdx-blue);
  color: #fff;
  transform: translateY(-1px);
}

.kdx-prod:hover .kdx-prod__icon i {
  display: inline-block;
  transform: translateY(-2px) scale(1.06);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

/* El sector es la senal de orientacion: quien busca "logistica" se reconoce sin
   leer las ocho descripciones. Va en caja alta y pequena junto al icono, no en
   una linea propia compitiendo con el titulo. */
.kdx-prod__sector {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--kdx-muted);
}

/* El titulo se ancla a un numero fijo de lineas (2) para que las tarjetas con
   nombre corto y largo arranquen la descripcion a la misma altura. */
.kdx-prod__name {
  display: block;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--kdx-ink);
  margin-bottom: 8px;
  /* Anclado a 2 lineas: hay nombres de una linea y de dos ("Software POS e
     inventario"), y sin reservar el alto la descripcion arrancaba a distinta
     altura en cada tarjeta. */
  min-height: calc(1rem * 1.32 * 2);
}

.kdx-prod:hover .kdx-prod__name { color: var(--kdx-blue); }

.kdx-prod__desc {
  display: block;
  font-size: .89rem;
  line-height: 1.6;
  color: var(--kdx-body);
  /* Se reserva el alto de 4 lineas, que es el maximo que alcanza el texto mas
     largo. Sin esto las tarjetas de 3 lineas quedan 23px mas bajas y la fila
     muestra un escalon; el espaciador no basta porque solo reparte el sobrante
     cuando ya hay una altura comun. */
  min-height: calc(.89rem * 1.6 * 4);
}

/* Crece para empujar el enlace al pie de la tarjeta. */
.kdx-prod__spacer {
  flex: 1;
  min-height: 14px;
}

/* Enlace al pie, dentro de la tarjeta: deja de ser una flecha suelta y pasa a
   ser la accion con su texto. */
.kdx-prod__go {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 14px;
  border-top: 1px solid var(--kdx-line);
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 600;
  color: var(--kdx-blue);
}

.kdx-prod__go i { transition: transform .22s ease; }

.kdx-prod:hover .kdx-prod__go i { transform: translateX(4px); }

@media (max-width: 575px) {
  .kdx-prod { padding: 20px 18px 18px; }
  .kdx-prod__icon { width: 34px; height: 34px; min-width: 34px; font-size: .92rem; }
}

/* Variante oscura del catalogo (seccion "Servicios" sobre panel navy).
   Mismas tarjetas que Soluciones, pero adaptadas al fondo: la superficie sube
   un escalon en vez de ser blanca, y el texto pasa a claro. */
.kdx-catalog--dark .kdx-prod {
  background: rgba(255, 255, 255, .045);
  border-color: var(--kdx-line-dark);
}

.kdx-catalog--dark .kdx-prod:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(56, 189, 248, .45);
  box-shadow: 0 18px 40px rgba(3, 8, 22, .45);
}

.kdx-catalog--dark .kdx-prod__icon {
  background: rgba(56, 189, 248, .12);
  color: var(--kdx-cyan);
}

.kdx-catalog--dark .kdx-prod:hover .kdx-prod__icon {
  background: var(--kdx-cyan);
  color: var(--kdx-navy);
}

.kdx-catalog--dark .kdx-prod__sector { color: #8fa6c8; }
.kdx-catalog--dark .kdx-prod__name { color: #fff; }
.kdx-catalog--dark .kdx-prod:hover .kdx-prod__name { color: var(--kdx-cyan); }
.kdx-catalog--dark .kdx-prod__desc { color: #a9bbdb; }

.kdx-catalog--dark .kdx-prod__go {
  border-top-color: var(--kdx-line-dark);
  color: var(--kdx-cyan);
}

/* ---------------------------------------------------------------------------
   Caso de exito
   --------------------------------------------------------------------------- */
.kdx-case {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: center;
}

@media (min-width: 992px) {
  .kdx-case { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; }
}

/* Sobre fondo claro (la seccion es blanca): la cita pasa a texto de cuerpo con
   el filete cian como unico acento, y los botones usan la variante clara. */
.kdx-case__quote {
  margin: 0 0 26px;
  padding-left: 22px;
  border-left: 2px solid var(--kdx-blue);
  font-size: 1.02rem;
  line-height: 1.74;
  color: var(--kdx-body);
}

.kdx-case__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* El marco lleva la captura del producto. Sobre blanco necesita un borde y una
   sombra que lo separen del fondo, en vez del vidrio sobre navy anterior. */
.kdx-case__frame {
  border-radius: 18px;
  padding: 12px;
  background: var(--kdx-paper);
  border: 1px solid var(--kdx-line);
  box-shadow: var(--kdx-shadow-lg);
}

.kdx-case__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 11px;
}

@media (max-width: 991px) {
  .kdx-case__actions .kdx-btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Proceso: pasos numerados con cuerpo de tarjeta
   ---------------------------------------------------------------------------
   Aqui SI hay secuencia real, por eso se numera. Pero antes eran cuatro
   columnas planas con un filete arriba, sin superficie: se perdian entre las
   secciones. Ahora cada paso es una tarjeta y el numero comparte cabecera con
   el icono, igual que el resto de la pagina.
   --------------------------------------------------------------------------- */
.kdx-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 640px) {
  .kdx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .kdx-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

.kdx-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 20px 20px;
  background: var(--kdx-white);
  border: 1px solid var(--kdx-line);
  border-radius: 14px;
}

/* Sin :hover: el paso explica el metodo de trabajo, no se clica. */

/* El filete superior solo en el primer paso: marca donde arranca la secuencia
   sin repetir el adorno en las cuatro tarjetas. */
.kdx-steps li::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 20px;
  width: 44px;
  height: 2px;
  border-radius: 2px;
  background: var(--kdx-blue);
  opacity: 0;
}

.kdx-steps li:first-child::before { opacity: 1; }

.kdx-step__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  margin-bottom: 14px;
}

.kdx-step__n {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  /* Los numeros se leen todos. Estaban en --kdx-line (casi el color del borde),
     asi que 02, 03 y 04 parecian deshabilitados frente al 01 en azul: el visitante
     veia tres pasos apagados en vez de una secuencia. El 01 sigue destacando
     porque va en azul pleno. */
  color: var(--kdx-muted);
}

.kdx-steps li:first-child .kdx-step__n { color: var(--kdx-blue); }

.kdx-step__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 9px;
  background: rgba(37, 99, 235, .07);
  color: var(--kdx-blue);
  font-size: .92rem;
}

.kdx-steps h3 {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--kdx-ink);
  margin: 0 0 9px;
  letter-spacing: -.01em;
  /* Anclado a 2 lineas: "Puesta en marcha y soporte" ocupa dos y los otros tres
     pasos una, asi que su descripcion arrancaba 21px mas abajo y las cuatro
     tarjetas quedaban con el texto descuadrado entre si. */
  min-height: calc(1rem * 1.3 * 2);
}

.kdx-steps p {
  margin: 0;
  font-size: .89rem;
  line-height: 1.62;
  color: var(--kdx-body);
}

/* ---------------------------------------------------------------------------
   Integraciones: fichas con marca, nombre y para que sirve
   ---------------------------------------------------------------------------
   Antes eran cuatro cajas blancas con un logo dentro y nada mas: el visitante
   veia la marca pero no que se hace con ella. Ahora cada ficha lleva la marca,
   el nombre de la capacidad y una linea de para que sirve.
   --------------------------------------------------------------------------- */
.kdx-logos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 640px) { .kdx-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .kdx-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

.kdx-logo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  padding: 20px 18px;
  border-radius: 14px;
  /* Ficha clara: los cuatro logos tienen fondos incompatibles entre si (dos
     blancos, el degradado oscuro de Google y la composicion negra de ePayco),
     asi que sobre navy translucido se veian desparejos. El fondo claro los
     normaliza. */
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--kdx-line-dark);
}

/* Sin :hover: declara con que plataformas se integra Kondory; no lleva a
   ningun sitio. */

/* Zona de la marca: alto fijo para que los nombres arranquen alineados aunque
   los logos tengan proporciones muy distintas. */
.kdx-logo__mark {
  display: flex;
  align-items: center;
  height: 40px;
}

.kdx-logo__mark img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.kdx-logo__text { display: block; }

.kdx-logo__name {
  display: block;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--kdx-ink);
}

.kdx-logo__desc {
  display: block;
  margin-top: 6px;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--kdx-body);
}

/* ---------------------------------------------------------------------------
   HOME — Seccion de clientes (.kdx-clients)
   ---------------------------------------------------------------------------
   clients.php se usa tambien en otras paginas con su propio encabezado y su
   propio CTA. En la home esos dos elementos sobran: el titular "Nuestros
   clientes" compite con el de la seccion y el CTA duplica el boton que ya
   aparece en el hero y en la banda final. Aqui se neutralizan por contexto,
   sin tocar el parcial compartido ni el resto del sitio.
   --------------------------------------------------------------------------- */

.kdx-clients h2.text-center {
  display: none;
}

.kdx-clients .cta-section {
  display: none;
}

/* El swiper de clientes vive en un contenedor con `height: auto` y
   `align-items: stretch` (clients.css). Esa combinacion hace que la altura de
   cada slide dependa de la del contenedor y la del contenedor de la de los
   slides, asi que se realimentan y la tira termina midiendo miles de pixeles.
   Se fija la altura de la pista y se suelta el stretch para romper el ciclo. */
.kdx-clients .swiper.test-swiper {
  height: 104px;
  /* El parcial trae la utilidad pt-3 (16px con !important): con la altura fija
     empujaba las fichas hacia abajo y las cortaba por la mitad. */
  padding-top: 0 !important;
  padding-bottom: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.kdx-clients .swiper-wrapper {
  height: 104px;
  align-items: center;
}

.kdx-clients .swiper-slide {
  height: 104px;
  align-items: center;
}

/* Las tarjetas de cliente pasan a ser fichas blancas sobre el fondo claro:
   antes eran casi blancas sobre un fondo oscuro y el contraste no se sostenia. */
.kdx-clients .company-card {
  background: #fff;
  border: 1px solid var(--kdx-line);
  border-radius: 14px;
  height: 104px;
  box-sizing: border-box;
  padding: 14px;
  box-shadow: none;
  backdrop-filter: none;
  transition: border-color .22s ease, box-shadow .22s ease;
}

.kdx-clients .company-card:hover {
  transform: none;
  border-color: rgba(37, 99, 235, .38);
  box-shadow: var(--kdx-shadow);
}

.kdx-clients .company-card img {
  max-height: 68px;
  max-width: 100%;
  filter: grayscale(1);
  opacity: .62;
  transition: filter .22s ease, opacity .22s ease;
}

/* Si el logo no carga, el navegador pinta el alt al tamano de la ficha y rompe
   la tira. Se limita su tipografia para que la caja siga midiendo lo mismo. */
.kdx-clients .company-card img[alt] {
  font-size: .72rem;
  line-height: 1.2;
  color: var(--kdx-muted);
  text-align: center;
  overflow: hidden;
}

.kdx-clients .company-card:hover img {
  transform: none;
  filter: grayscale(0);
  opacity: 1;
}

/* La seccion arranca oculta y solo se revela cuando el JS confirma que hay
   logos. Asi, mientras las imagenes resuelven, no se ven huecos vacios; y si
   ninguna carga, se queda oculta en lugar de dejar un titular huerfano. */
.kdx-clients {
  display: none;
}

.kdx-clients.kdx-clients--ready {
  display: block;
}

.kdx-clients .swiper.test-swiper.kdx-no-logos {
  height: 0;
  overflow: hidden;
  margin: 0;
  -webkit-mask-image: none;
          mask-image: none;
}

/* ---------------------------------------------------------------------------
   Cookies
   ---------------------------------------------------------------------------
   El aviso anterior era un bloque gris de 600px con texto centrado que caia
   encima del hero y tapaba el titular. Se convierte en una tarjeta alineada al
   sistema kdx, anclada abajo a la derecha (la banda de datos del hero ocupa la
   izquierda) y de ancho contenido.
   --------------------------------------------------------------------------- */
.kdx-cookies .cookie-consent {
  position: fixed;
  bottom: 18px;
  right: 18px;
  left: auto;
  width: auto;
  max-width: 380px;
  margin: 0;
  padding: 20px 22px;
  text-align: left;
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: .88rem;
  line-height: 1.6;
  color: #dbe5f6;
  background: rgba(9, 17, 38, .97);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(4, 10, 26, .5);
  backdrop-filter: blur(10px);
  z-index: 120;
  /* Solo aparece mientras el hero esta a la vista: mas abajo tapa el contenido
     (el enlace de la ultima tarjeta de industrias) y el visitante ya vio el
     aviso. Lo controla el JS con la clase .is-hidden. */
  transition: opacity .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}

.kdx-cookies .cookie-consent.is-hidden {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}

.kdx-cookies .cookie-consent span {
  display: block;
  margin-bottom: 16px;
}

.kdx-cookies .cookie-consent a {
  color: #7dd3fc !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* El contenedor del boton se estira para que el boton ocupe todo el ancho */
.kdx-cookies .cookie-consent > div {
  display: flex !important;
  margin: 0 !important;
}

.kdx-cookies .cookie-consent .allow-button {
  flex: 1;
  width: auto;
  height: 42px;
  margin: 0 !important;
  padding: 0 20px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, var(--kdx-blue) 0%, var(--kdx-blue-deep) 100%);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s ease;
}

.kdx-cookies .cookie-consent .allow-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(37, 99, 235, .42);
}

@media (max-width: 575px) {
  .kdx-cookies .cookie-consent {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
    padding: 16px 18px;
  }
}

/* ---------------------------------------------------------------------------
   HOME — CTA final (.kdx-cta)
   ---------------------------------------------------------------------------
   El parcial call-action.html trae la pastilla "Respuesta en menos de 24 horas"
   en mayusculas con icono, que es la ultima etiqueta de ese tipo que quedaba y
   choca con el resto de la home. Se oculta: el titular del CTA ya dice todo.
   --------------------------------------------------------------------------- */
.kdx-cta .cta-badge {
  display: none;
}

     /* Chat: el tooltip flotante (parcial compartido) tapa el cierre de la ultima
        tarjeta al bajar. Solo tiene sentido mientras el hero esta a la vista, asi
        que se oculta al pasar el hero. La burbuja del chat (.chat_on) se mantiene
        siempre: es el acceso al asistente. */
     #tooltip_chat.kdx-tip-hidden {
       opacity: 0;
       visibility: hidden;
       pointer-events: none;
     }

     /* ---------------------------------------------------------------------------
        Ajustes responsive globales
        --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root { --kdx-y: 66px; }
  .kdx-head { margin-bottom: 34px; padding-top: 18px; }
  .kdx-h1 { font-size: clamp(2rem, 8vw, 2.5rem); }
}

/* Accesibilidad: se respeta la preferencia de movimiento reducido. Es la unica
   animacion automatica de la pagina, asi que basta con desactivarla aqui.
   Solo se listan elementos interactivos: las fichas informativas (industrias,
   proceso, integraciones) ya no tienen transiciones ni hover que desactivar. */
@media (prefers-reduced-motion: reduce) {
  .kdx-in { animation: none; }

  .kdx-btn,
  .kdx-link i,
  .kdx-prod__go i,
  .kdx-card__icon,
  .kdx-card__icon i,
  .kdx-prod__icon,
  .kdx-prod__icon i {
    transition: none;
  }

  .kdx-btn:hover,
  .kdx-prod:hover,
  a.kdx-card:hover .kdx-card__icon,
  a.kdx-card:hover .kdx-card__icon i,
  .kdx-prod:hover .kdx-prod__icon,
  .kdx-prod:hover .kdx-prod__icon i { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGINAS INTERNAS
   ---------------------------------------------------------------------------
   Componentes que la home no necesitaba pero si las paginas internas:
   hero de pagina, migas de pan, rejilla de tarjetas generica, formularios,
   filtros de listado y cuerpo de articulo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------------------------
   Hero de pagina interna, con ilustracion a la derecha (.kdx-hero-split)
   ---------------------------------------------------------------------------
   El estandar de las paginas de solucion: texto a la izquierda (migas, titular,
   entradilla, acciones) y la ilustracion del producto en la columna derecha,
   dentro de un marco redondeado.

   La ilustracion es contenido, no adorno: identifica el producto antes de leer.
   Por eso lleva `alt` real (no aria-hidden) y `fetchpriority=high`, al ser el
   elemento LCP de la pagina.

   El fondo es el mismo navy con reticula de .kdx-page-hero: el componente solo
   anade la segunda columna, asi las paginas con y sin imagen no se sienten
   distintas.
   --------------------------------------------------------------------------- */
.kdx-hero-split__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}

@media (min-width: 992px) {
  .kdx-hero-split__grid {
    /* 7 / 5, la proporcion de 12 columnas en Bootstrap: el texto manda, la
       imagen acompania. */
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 56px;
  }
}

/* La ilustracion se limita para no crecer sin control en pantallas muy anchas. */
.kdx-hero-split__media {
  display: flex;
  justify-content: center;
}

.kdx-hero-split__media img {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  border-radius: 18px;
  /* Sombra profunda pero suave: separa la imagen del navy sin dibujarle un
     borde duro, igual que las capturas de la home. */
  box-shadow: 0 30px 70px rgba(2, 8, 30, .45);
}

/* En movil la imagen va debajo del texto, mas pequena y sin sombra excesiva. */
@media (max-width: 991px) {
  .kdx-hero-split__grid { gap: 28px; }
  .kdx-hero-split__media img { max-width: 340px; }
}

/* ---------------------------------------------------------------------------
   Hero de pagina interna
   ---------------------------------------------------------------------------
   Mas bajo que el de la home y sin foto: la foto es el rasgo de la portada, y
   repetirla en las 22 paginas restantes la gastaria. Aqui el fondo es el navy
   con la reticula tecnica, que da continuidad sin competir.
   --------------------------------------------------------------------------- */
.kdx-page-hero {
  position: relative;
  overflow: hidden;
  padding: 150px 0 72px;
  color: #fff;
  background:
    radial-gradient(900px 440px at 86% -10%, rgba(56, 189, 248, .18), transparent 62%),
    radial-gradient(760px 440px at -8% 112%, rgba(37, 99, 235, .26), transparent 58%),
    linear-gradient(150deg, var(--kdx-navy) 0%, #0d1a3e 58%, #0b2350 100%);
}

/* Reticula tecnica, recortada hacia la derecha para no competir con el titular */
.kdx-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse at 78% 40%, #000 10%, transparent 68%);
          mask-image: radial-gradient(ellipse at 78% 40%, #000 10%, transparent 68%);
}

.kdx-page-hero .container { position: relative; z-index: 1; }

/* El contenido se limita para que la linea de lectura no pase de ~70ch */
.kdx-page-hero__inner { max-width: 46rem; }

/* Migas de pan: orientan sin ocupar una seccion entera */
.kdx-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  font-size: .84rem;
  color: #8fa6c8;
}

.kdx-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.kdx-crumbs li + li::before { content: '/'; color: rgba(255, 255, 255, .28); }
.kdx-crumbs a { color: #b8c9e4; text-decoration: none; }
.kdx-crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.kdx-crumbs [aria-current="page"] { color: #fff; font-weight: 600; }

.kdx-page-hero h1 {
  color: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0 0 18px;
  text-wrap: balance;
}

.kdx-page-hero__lead {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.72;
  color: #b3c3e0;
  max-width: 60ch;
}

.kdx-page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

@media (max-width: 991px) {
  .kdx-page-hero { padding: 118px 0 56px; }
}

@media (max-width: 575px) {
  .kdx-page-hero { padding: 104px 0 46px; }
  .kdx-page-hero__actions .kdx-btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Variante "Nosotros": el hero explica quien esta detras
   ---------------------------------------------------------------------------
   Servicios puede permitirse un hero de solo texto porque la pagina siguiente
   ya es un catalogo. En Nosotros no: un titular solo, alineado a la izquierda
   en 1140px y con nada a la derecha, se lee como una pagina sin contenido.
   Aqui la segunda linea del titular baja de peso (mismo recurso que la home),
   los datos ocupan la mitad derecha y los botones se quedan en el bloque de
   resumen, donde el visitante ya sabe de que empresa se trata.
   --------------------------------------------------------------------------- */
.kdx-page-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 992px) {
  .kdx-page-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: end;
    gap: 64px;
  }
}

/* Segunda linea: mismo tamano, otro peso. No es una palabra acentuada dentro
   de la frase, es la frase siguiente del titular. */
.kdx-page-hero__soft {
  display: block;
  font-weight: 400;
  color: #9fb4d8;
}

/* Placa de datos: cuatro cifras en dos filas, separadas por filetes. Nada de
   tarjetas: sobre el hero navy una caja mas solo suma ruido. */
.kdx-hero-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.kdx-hero-fact {
  padding: 18px 20px 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.kdx-hero-fact dt {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
}

.kdx-hero-fact dd {
  margin: 7px 0 0;
  font-size: .8rem;
  line-height: 1.4;
  color: #9fb4d8;
}

@media (min-width: 992px) {
  /* En dos columnas la placa se pega al borde inferior del texto. */
  .kdx-hero-facts { border-bottom: 1px solid rgba(255, 255, 255, .16); }
  .kdx-hero-fact { padding: 20px 22px 20px 0; }
}

/* ---------------------------------------------------------------------------
   Rejilla de tarjetas generica
   ---------------------------------------------------------------------------
   Sustituye a las tres rejillas distintas que habia (.kd-cards, .feature-card
   y el grid de Bootstrap). Mismo alto por fila para que los bordes cierren
   rectos, que es el fallo que mas se repite cuando cada tarjeta tiene su
   propio contenido.
   --------------------------------------------------------------------------- */
.kdx-cards {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) { .kdx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .kdx-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .kdx-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.kdx-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 24px 22px;
  background: var(--kdx-white);
  border: 1px solid var(--kdx-line);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color .22s ease,
              box-shadow .22s ease,
              transform .22s cubic-bezier(.16, 1, .3, 1);
}

/* La tarjeta solo reacciona si es un enlace. Las informativas (sin href) se
   quedan quietas, igual que en la home. */
a.kdx-card:hover {
  border-color: rgba(37, 99, 235, .42);
  box-shadow: var(--kdx-shadow);
  transform: translateY(-3px);
}

.kdx-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  margin-bottom: 16px;
}

.kdx-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 10px;
  background: rgba(37, 99, 235, .07);
  color: var(--kdx-blue);
  font-size: 1rem;
  transition: background-color .22s ease, color .22s ease;
}

/* Animacion de iconos (misma que la home): al entrar en la tarjeta, el icono
   se rellena de azul y el simbolo hace un pequeno "pop" — sube 2px y crece un
   6%. Es un gesto unico por interaccion, no un bucle: el icono es informacion,
   no un adorno. Se respeta `prefers-reduced-motion` al final de la hoja. */
a.kdx-card:hover .kdx-card__icon,
a.kdx-card:hover .kdx-card__icon i {
  transition: background-color .24s ease, color .24s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

a.kdx-card:hover .kdx-card__icon {
  background: var(--kdx-blue);
  color: #fff;
  transform: translateY(-1px);
}

a.kdx-card:hover .kdx-card__icon i {
  transform: translateY(-2px) scale(1.06);
}

.kdx-card__tag {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--kdx-muted);
}

.kdx-card__title {
  display: block;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--kdx-ink);
  margin: 0 0 9px;
  /* Anclado a 2 lineas: los titulos de una y dos lineas descuadraban la fila. */
  min-height: calc(1.04rem * 1.32 * 2);
}

a.kdx-card:hover .kdx-card__title { color: var(--kdx-blue); }

.kdx-card__desc {
  margin: 0;
  font-size: .9rem;
  line-height: 1.64;
  color: var(--kdx-body);
}

.kdx-card__spacer { flex: 1; min-height: 14px; }

/* Detalle plegable dentro de una tarjeta: mantiene la tarjeta corta sin perder
   informacion. El signo cambia al abrir, y no hay icono de mas. */
.kdx-card__more {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--kdx-line);
}

.kdx-card__more summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 600;
  color: var(--kdx-muted);
}

.kdx-card__more summary::-webkit-details-marker { display: none; }

.kdx-card__more summary::before {
  content: '\F4FE'; /* bi-plus-circle */
  font-family: 'bootstrap-icons';
  color: var(--kdx-blue);
  font-size: .95rem;
}

.kdx-card__more[open] summary::before { content: '\F2EA'; /* bi-dash-circle */ }
.kdx-card__more summary:hover { color: var(--kdx-blue); }

.kdx-card__more p {
  margin: 10px 0 0;
  font-size: .84rem;
  line-height: 1.58;
  color: var(--kdx-body);
}

.kdx-card__more a { color: var(--kdx-blue); font-weight: 600; }

.kdx-card__go {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 14px;
  border-top: 1px solid var(--kdx-line);
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 600;
  color: var(--kdx-blue);
}

.kdx-card__go i { transition: transform .22s ease; }
a.kdx-card:hover .kdx-card__go i { transform: translateX(4px); }

/* Variante sobre navy: sube un escalon la superficie y aclara el texto. */
.kdx-section--navy .kdx-card {
  background: rgba(255, 255, 255, .045);
  border-color: var(--kdx-line-dark);
}

.kdx-section--navy a.kdx-card:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(56, 189, 248, .45);
}

.kdx-section--navy .kdx-card__icon { background: rgba(56, 189, 248, .12); color: var(--kdx-cyan); }
.kdx-section--navy a.kdx-card:hover .kdx-card__icon { background: var(--kdx-cyan); color: var(--kdx-navy); }
.kdx-section--navy .kdx-card__tag { color: #8fa6c8; }
.kdx-section--navy .kdx-card__title { color: #fff; }
.kdx-section--navy a.kdx-card:hover .kdx-card__title { color: var(--kdx-cyan); }
.kdx-section--navy .kdx-card__desc { color: #a9bbdb; }
.kdx-section--navy .kdx-card__go { border-top-color: var(--kdx-line-dark); color: var(--kdx-cyan); }

/* ---------------------------------------------------------------------------
   Barra de filtros + busqueda (portafolio, blog)
   ---------------------------------------------------------------------------
   Se ancla bajo el header fijo mientras se recorre el listado: al filtrar, el
   visitante no pierde el control de vista. Fondo solido para que las tarjetas no
   se transparenten por debajo al hacer scroll.
   --------------------------------------------------------------------------- */
.kdx-filterbar {
  position: sticky;
  /* Por encima del contenido pero por DEBAJO del header fijo del sitio
     (z-index 1030 en Bootstrap): si no, al hacer scroll la barra se monta
     sobre la navegacion y las dos se pisan. El JS de la pagina ajusta `top`
     a la altura real del header. */
  z-index: 30;
  top: 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--kdx-line);
  background: var(--kdx-white);
  /* Sombra sutil solo cuando esta pegada: separa la barra de las tarjetas que
     pasan por debajo sin dibujar una linea dura en reposo. */
  box-shadow: 0 1px 0 rgba(11, 20, 40, .04);
}

.kdx-filterbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}

.kdx-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
  min-width: 0;
}

.kdx-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid var(--kdx-line);
  border-radius: 999px;
  background: var(--kdx-white);
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1;
  color: var(--kdx-body);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.kdx-filter i { font-size: .95rem; color: var(--kdx-muted); transition: color .2s ease; }
.kdx-filter:hover { border-color: var(--kdx-blue); color: var(--kdx-blue); }
.kdx-filter:hover i { color: var(--kdx-blue); }

.kdx-filter.is-active {
  background: var(--kdx-blue);
  border-color: var(--kdx-blue);
  color: #fff;
}

.kdx-filter.is-active i { color: #fff; }

.kdx-filter:focus-visible {
  outline: 3px solid rgba(56, 189, 248, .55);
  outline-offset: 2px;
}

/* El contador dice cuantos proyectos hay en cada categoria: evita el clic a
   ciegas en un filtro que no tiene nada. */
.kdx-filter__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(37, 99, 235, .09);
  font-size: .72rem;
  font-weight: 700;
  color: var(--kdx-blue);
}

.kdx-filter.is-active .kdx-filter__count {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

/* Buscador */
.kdx-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 260px;
  min-width: 200px;
}

.kdx-search i {
  position: absolute;
  left: 14px;
  font-size: .95rem;
  color: var(--kdx-muted);
  pointer-events: none;
}

.kdx-search input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: .9rem;
  color: var(--kdx-ink);
  background: var(--kdx-paper);
  border: 1px solid var(--kdx-line);
  border-radius: 999px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.kdx-search input:focus {
  outline: none;
  border-color: var(--kdx-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

/* Estado vacio: orienta al siguiente paso en vez de dejar la pantalla en blanco */
.kdx-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 40px 0 0;
  padding: 28px;
  border: 1px dashed var(--kdx-line);
  border-radius: 14px;
  background: var(--kdx-paper);
  font-size: .95rem;
  color: var(--kdx-body);
}

.kdx-empty i { font-size: 1.3rem; color: var(--kdx-muted); }

/* Las tarjetas filtradas se ocultan sin romper el grid */
.pf-hidden { display: none !important; }

@media (max-width: 767px) {
  .kdx-filterbar { padding: 16px 0; }
  .kdx-filter { padding: 8px 12px; font-size: .78rem; }
  .kdx-search { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------------
   Formularios (contacto, demo)
   --------------------------------------------------------------------------- */
.kdx-form { max-width: 34rem; }

.kdx-field { margin-bottom: 20px; }

.kdx-field label {
  display: block;
  margin-bottom: 8px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 600;
  color: var(--kdx-ink);
}

.kdx-field label .req { color: #dc2626; }

.kdx-input,
.kdx-select,
.kdx-textarea {
  display: block;
  width: 100%;
  padding: 13px 15px;
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: .95rem;
  color: var(--kdx-ink);
  background: var(--kdx-white);
  border: 1px solid var(--kdx-line);
  border-radius: 11px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.kdx-textarea { min-height: 132px; resize: vertical; }

.kdx-input:focus,
.kdx-select:focus,
.kdx-textarea:focus {
  outline: none;
  border-color: var(--kdx-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

.kdx-input::placeholder,
.kdx-textarea::placeholder { color: #9aa8bd; }

.kdx-help {
  margin: 7px 0 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--kdx-muted);
}

/* Error: explica que pasa y como resolverlo, sin disculpas ni vaguedades. */
.kdx-field.is-invalid .kdx-input,
.kdx-field.is-invalid .kdx-textarea,
.kdx-field.is-invalid .kdx-select { border-color: #dc2626; }

.kdx-error {
  margin: 7px 0 0;
  font-size: .82rem;
  line-height: 1.5;
  color: #dc2626;
}

/* ---------------------------------------------------------------------------
   FAQ (Seo::faqHtml)
   ---------------------------------------------------------------------------
   Dos columnas: titulo fijo a la izquierda y preguntas a la derecha, que es lo
   que evita el hueco muerto a la derecha que dejaba la version de una columna.
   --------------------------------------------------------------------------- */
.kdx-faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: start;
}

@media (min-width: 992px) {
  .kdx-faq__grid {
    grid-template-columns: 300px minmax(0, 1fr);
    column-gap: 64px;
  }

  .kdx-faq .kdx-head { margin-bottom: 0; }
}

/* Cada pregunta es una tarjeta (estandar v7, como pagina-biomantenimiento) */
.kdx-faq__list { display: grid; gap: 12px; }

.kdx-faq__item {
  padding: 0 22px;
  border: 1px solid var(--kdx-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 26px -22px rgba(8, 15, 36, .35);
}

.kdx-faq__item[open] { border-color: rgba(37, 99, 235, .3); }

.kdx-faq__item summary {
  position: relative;
  display: block;
  padding: 22px 48px 22px 0;
  list-style: none;
  cursor: pointer;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  /* El navegador aplica `color: black` por defecto a <summary>, y main.css
     trae reglas de summary con mas especificidad que esta. Se fuerza el tono
     del sistema y se neutraliza cualquier text-transform heredado. */
  color: var(--kdx-ink) !important;
  text-transform: none;
  letter-spacing: -.01em;
  transition: color .2s ease;
}

/* El marcador nativo de <summary> se oculta para dejar solo el + / - del
   sistema. `::marker` cubre Firefox y `::-webkit-details-marker` el resto. */
.kdx-faq__item summary::marker { content: ''; }
.kdx-faq__item summary::-webkit-details-marker { display: none; }
.kdx-faq__item summary:hover { color: var(--kdx-blue); }

/* Signo simple en circulo: mas y menos, con rotacion al abrir. */
.kdx-faq__item summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  line-height: 24px;
  font-size: 1.05rem;
  font-weight: 400;
  text-align: center;
  color: var(--kdx-blue);
  border: 1px solid var(--kdx-line);
  border-radius: 50%;
  transition: transform .24s cubic-bezier(.16, 1, .3, 1),
              background-color .24s ease,
              color .24s ease;
}

.kdx-faq__item[open] summary::after {
  content: '\2212';
  color: #fff;
  background: var(--kdx-blue);
  border-color: var(--kdx-blue);
}

.kdx-faq__a {
  padding: 0 56px 24px 0;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--kdx-body);
}

.kdx-faq__a a { color: var(--kdx-blue); }

@media (max-width: 767px) {
  .kdx-faq__item summary { padding: 18px 46px 18px 0; }
  .kdx-faq__a { padding: 0 46px 20px 0; }
}

/* ---------------------------------------------------------------------------
   Definicion citable (Seo::definitionHtml)
   ---------------------------------------------------------------------------
   La respuesta "que es X" va DENTRO de la pagina, no como una caja aislada.

   Antes: una seccion propia con 104px de aire arriba y abajo para dos lineas
   de texto (medido: 379px de seccion para 171px de contenido). Se veia como un
   hueco blanco entre el hero y el resto.

   Ahora: es la primera banda del contenido, con el aire vertical reducido a la
   mitad y el texto en una columna de lectura de ~70ch. Al ir pegada al hero,
   se lee como la entradilla del caso y no como una seccion suelta.
   --------------------------------------------------------------------------- */
.kdx-section--tight { padding-top: 56px; padding-bottom: 56px; }

.kdx-definition {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: center;
}

/* Si la pagina añade una captura, pasa a dos columnas 6/5. */
@media (min-width: 992px) {
  .kdx-definition:has(.kdx-definition__media) {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 56px;
  }
}

/* ---------------------------------------------------------------------------
   Variante inline: la definicion como entradilla de una seccion existente
   ---------------------------------------------------------------------------
   El bloque entra DENTRO de otra seccion, asi que no debe parecer una seccion:
     - ocupa el ancho completo del container (antes se cortaba a 659px frente a
       los 1116px de la cabecera y las tarjetas, y se veia desalineado);
     - su titulo NO puede tener el mismo peso que el h2 de la seccion (antes
       ambos a 36.8px y competian por la atencion); baja a nivel de kdx-h3;
     - el texto va al mismo tamano que la entradilla (.kdx-lead), para que se
       lea como continuacion de ella y no como un cuerpo aparte;
     - el filete de acento se mantiene: es el recurso de la cita de la home.
   --------------------------------------------------------------------------- */
.kdx-definition--inline {
  display: block;
  max-width: none;
  margin: 0 0 48px;
  padding: 24px 28px;
  background: var(--kdx-paper);
  border: 1px solid var(--kdx-line);
  border-radius: 14px;
}

.kdx-definition--inline .kdx-definition__body {
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 767px) {
  .kdx-definition--inline { padding: 20px 20px; margin-bottom: 36px; }
}

/* Columna de texto: misma cabecera con filete que .kdx-head, sin titular
   cortado por el header fijo en pantallas bajas. */
.kdx-definition__body {
  padding-top: 20px;
  border-top: 1px solid var(--kdx-line);
}

.kdx-definition h2 {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -.02em;
  color: var(--kdx-ink);
  margin: 0 0 14px;
  max-width: 24ch;
}

/* La variante inline va DESPUES de la regla generica: con el mismo peso de
   especificidad, la que aparece mas abajo gana. Si se declara antes, el h2 se
   queda en 36.8px y compite con el titular de la seccion. */
.kdx-definition--inline h2 {
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.36;
  letter-spacing: -.01em;
  max-width: none;
  margin: 0 0 12px;
}

.kdx-definition--inline p {
  font-size: 1rem;
  line-height: 1.72;
  max-width: 74ch;
  padding-left: 18px;
}

/* Etiqueta de seccion: identifica el bloque como parte del articulo y no como
   un aviso suelto. Mismo recurso que .kdx-head__kicker. */
.kdx-definition__label {
  display: block;
  margin-bottom: 10px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--kdx-blue);
}

/* En el modo de dos columnas, el texto no se queda corto frente a la imagen:
   se centra verticalmente y se le da un mínimo de aire. */
.kdx-definition__media + .kdx-definition__body,
.kdx-definition:has(.kdx-definition__media) .kdx-definition__body {
  align-self: center;
}

/* Respuesta citable: mismo filete de acento que la cita del caso de exito. */
.kdx-definition p {
  margin: 0;
  padding-left: 20px;
  border-left: 2px solid var(--kdx-blue);
  font-size: 1rem;
  line-height: 1.72;
  color: var(--kdx-body);
  max-width: 70ch;
}

.kdx-definition a { color: var(--kdx-blue); }

/* Captura opcional a la derecha, con el marco de .kdx-case__frame. */
.kdx-definition__media {
  margin: 0;
  border-radius: 18px;
  padding: 12px;
  background: var(--kdx-paper);
  border: 1px solid var(--kdx-line);
  box-shadow: var(--kdx-shadow-lg);
}

.kdx-definition__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 11px;
}

/* Sobre navy el filete y el texto cambian de tono. */
.kdx-section--navy .kdx-definition__body { border-top-color: var(--kdx-line-dark); }
.kdx-section--navy .kdx-definition h2 { color: #fff; }
.kdx-section--navy .kdx-definition p { color: #a9bbdb; border-left-color: var(--kdx-cyan); }

/* En pantallas bajas el titular no debe quedar bajo el header fijo. */
@media (max-width: 991px) {
  .kdx-section--tight { padding-top: 40px; padding-bottom: 40px; }
  .kdx-definition h2 { max-width: none; }
}

/* ---------------------------------------------------------------------------
   Principios: mision, enfoque y compromiso (.kdx-principles)
   ---------------------------------------------------------------------------
   Los tres se leen a la vez. La interactividad no oculta informacion: al pasar
   el cursor o al enfocar con el teclado, la tarjeta activa se eleva y su icono
   pasa a azul pleno; las demas retroceden un punto en profundidad, sin bajar
   el contraste del texto. Si no hay hover (tactil) el bloque se ve completo.
   --------------------------------------------------------------------------- */
.kdx-principles {
  display: grid;
  grid-template-columns: 1fr;
  /* Filas de igual alto: las tres descripciones son de distinta longitud. */
  grid-auto-rows: 1fr;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  perspective: 1200px;
}

@media (min-width: 768px) {
  .kdx-principles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

.kdx-principle {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  padding: 26px 24px 24px;
  background: var(--kdx-white);
  border: 1px solid var(--kdx-line);
  border-radius: 16px;
  /* Filete superior: marca donde empieza cada principio sin sumar cajas. */
  border-top: 2px solid #e6edf7;
  transition: transform .32s cubic-bezier(.16, 1, .3, 1),
              box-shadow .32s ease,
              border-color .32s ease,
              border-top-color .32s ease;
  transform-style: preserve-3d;
}

/* La tarjeta bajo el cursor se adelanta; sus vecinas se quedan atras. */
.kdx-principle:hover,
.kdx-principle:focus-within,
.kdx-principle:focus {
  transform: translateY(-6px);
  border-color: rgba(37, 99, 235, .35);
  border-top-color: var(--kdx-blue);
  box-shadow: 0 26px 48px -18px rgba(11, 20, 40, .28);
  outline: none;
}

.kdx-principles:hover .kdx-principle:not(:hover) {
  opacity: .82;
  transform: scale(.985);
}

.kdx-principle:focus-visible {
  outline: 3px solid rgba(56, 189, 248, .55);
  outline-offset: 3px;
}

.kdx-principle__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.kdx-principle__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 13px;
  background: rgba(37, 99, 235, .07);
  color: var(--kdx-blue);
  font-size: 1.22rem;
  transition: background-color .3s ease, color .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}

.kdx-principle:hover .kdx-principle__icon,
.kdx-principle:focus .kdx-principle__icon,
.kdx-principle:focus-within .kdx-principle__icon {
  background: linear-gradient(135deg, var(--kdx-blue) 0%, var(--kdx-blue-deep) 100%);
  color: #fff;
  transform: scale(1.06);
}

/* Numero grande y muy tenue: ordena la lectura, no compite con el titulo. */
.kdx-principle__num {
  font-family: Poppins, system-ui, sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: #eef2f9;
  transition: color .3s ease;
}

.kdx-principle:hover .kdx-principle__num,
.kdx-principle:focus .kdx-principle__num {
  color: rgba(37, 99, 235, .18);
}

.kdx-principle__label {
  margin: 0 0 6px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--kdx-muted);
}

.kdx-principle__title {
  margin: 0 0 12px;
  font-family: Poppins, system-ui, sans-serif;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.02em;
  color: var(--kdx-ink);
}

.kdx-principle__desc {
  margin: 0;
  font-size: .94rem;
  line-height: 1.72;
  color: var(--kdx-body);
}

@media (prefers-reduced-motion: reduce) {
  .kdx-principle,
  .kdx-principle__icon,
  .kdx-principle__num { transition: none; }
  .kdx-principle:hover,
  .kdx-principle:focus { transform: none; }
  .kdx-principles:hover .kdx-principle:not(:hover) { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Planes de precios (.kdx-plans)
   ---------------------------------------------------------------------------
   Tres columnas: nombre, precio, lista de incluidos y CTA. El plan destacado se
   rellena con el navy del sistema en vez de un color de "popular" ajeno a la
   paleta. Los precios usan tabular-nums para que las cifras no bailen.
   --------------------------------------------------------------------------- */
.kdx-plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}

@media (min-width: 768px) {
  .kdx-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

.kdx-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 26px 24px;
  background: var(--kdx-white);
  border: 1px solid var(--kdx-line);
  border-radius: 16px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.16, 1, .3, 1);
}

.kdx-plan:hover {
  border-color: rgba(37, 99, 235, .35);
  box-shadow: var(--kdx-shadow);
  transform: translateY(-3px);
}

/* Plan destacado: navy pleno, igual que las secciones oscuras. */
.kdx-plan--hot {
  background: linear-gradient(150deg, var(--kdx-navy) 0%, #0d1a3e 58%, #0b2350 100%);
  border-color: transparent;
  color: #e8eefb;
}

.kdx-plan__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(56, 189, 248, .16);
  border: 1px solid rgba(56, 189, 248, .35);
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 600;
  color: var(--kdx-cyan);
}

.kdx-plan__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: rgba(37, 99, 235, .07);
  color: var(--kdx-blue);
  font-size: 1.15rem;
}

.kdx-plan--hot .kdx-plan__icon {
  background: rgba(56, 189, 248, .14);
  color: var(--kdx-cyan);
}

.kdx-plan__name {
  margin: 0 0 8px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--kdx-ink);
}

.kdx-plan--hot .kdx-plan__name { color: #fff; }

.kdx-plan__price {
  margin: 0 0 20px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--kdx-blue);
}

.kdx-plan--hot .kdx-plan__price { color: #fff; }

.kdx-plan__price span {
  display: block;
  margin-top: 4px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--kdx-muted);
}

.kdx-plan--hot .kdx-plan__price span { color: #93a8cc; }

.kdx-plan__list {
  flex: 1;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.kdx-plan__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--kdx-body);
}

.kdx-plan__list i {
  flex: none;
  margin-top: 1px;
  color: var(--kdx-blue);
  font-size: .9rem;
}

.kdx-plan--hot .kdx-plan__list li { color: #a9bbdb; }
.kdx-plan--hot .kdx-plan__list i { color: var(--kdx-cyan); }

.kdx-plan .kdx-btn { width: 100%; }

/* Embed a ancho completo dentro de una seccion (calendario, mapa, video).
   El marco redondea y recorta el iframe, que trae su propio fondo y bordes. */
.kdx-embed {
  border: 1px solid var(--kdx-line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--kdx-white);
  box-shadow: var(--kdx-shadow);
}

.kdx-embed iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* ---------------------------------------------------------------------------
   Enlaces relacionados (Seo::relatedHtml)
   ---------------------------------------------------------------------------
   Recorrido, para no repetir los errores: primero fueron tarjetas iguales con
   un "Ver ->" al pie (siete veces la misma llamada, 150px de hueco muerto);
   despues una lista de filas con filete central, que se leia como una tabla de
   contenidos y ademas repetia el tipo de pagina encima del titulo. Ahora son
   fichas compactas en rejilla: icono del destino, un titulo y la flecha en la
   esquina, que solo aparece al pasar el cursor porque toda la ficha ya es un
   enlace. Sin "Ver", sin filetes de tabla y sin texto repetido.
   --------------------------------------------------------------------------- */
.kdx-related__list {
  grid-template-columns: 1fr;
  gap: 14px;
}

/* Rejilla fija de tres columnas.
   Con auto-fit y 240px se elegian cuatro, y como el numero de enlaces cambia
   segun la pagina (6, 7, 8), la ultima fila quedaba coja y a la derecha se veia
   un hueco muerto. Con tres columnas: 7 enlaces -> 3+3+1, y la ficha que sobra
   se estira a todo el ancho (`:last-child`), que cierra la fila en vez de
   dejarla abierta. Con 6 van 3+3 y con 8, 3+3+2 con la ultima estirada. */
@media (min-width: 768px) {
  .kdx-related__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .kdx-related__list > li:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}

/* Ficha: altura uniforme y contenido arriba. La flecha va absoluta en la
   esquina superior derecha para no empujar el titulo. */
.kdx-related__card {
  position: relative;
  padding: 18px 44px 18px 18px;
  min-height: 104px;
  /* Altura de tres lineas de titulo en el peor caso, para que ninguna ficha
     quede mas baja que sus vecinas por un titulo de una sola linea. */
  justify-content: flex-start;
}

.kdx-related__card .kdx-card__head {
  min-height: 32px;
  margin-bottom: 12px;
}

.kdx-related__card .kdx-card__icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 9px;
  font-size: .92rem;
}

.kdx-related__card .kdx-card__title {
  font-size: .93rem;
  line-height: 1.4;
  /* La altura la iguala `grid-auto-rows: 1fr` de .kdx-cards. Anclar tambien
     aqui un min-height de dos lineas dejaba hueco bajo titulos cortos como
     "Casos de exito de Kondory", que entran en una sola. */
  min-height: 0;
}

.kdx-card__arrow {
  position: absolute;
  top: 20px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: .82rem;
  /* Un tono por encima del borde (no --kdx-muted, que sobre blanco se lee como
     deshabilitado), y visible desde el principio: una ficha sin ninguna marca
     de salida parece un recuadro decorativo. El hover solo la afirma. */
  color: #b7c4d6;
  transition: transform .2s ease, color .2s ease;
}

a.kdx-card:hover .kdx-card__arrow {
  transform: translateX(3px);
  color: var(--kdx-blue);
}

/* Con teclado la flecha debe verse sin necesidad de pasar el cursor. */
a.kdx-card:focus-visible .kdx-card__arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--kdx-blue);
}

/* ---------------------------------------------------------------------------
   Tarjeta de proyecto (portafolio)
   ---------------------------------------------------------------------------
   Es la tarjeta kdx con imagen: la captura del proyecto arriba, la categoria
   sobre ella y el cuerpo debajo. Mantiene el mismo borde, radio y cierre que el
   resto de tarjetas del sitio para que el portafolio no parezca otra pagina.
   --------------------------------------------------------------------------- */
.kdx-card--project {
  padding: 0;
  overflow: hidden;
}

.kdx-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(140deg, #0a1637, #12306b);
}

/* La imagen es un enlace propio (al detalle o al sitio externo), asi que vive
   dentro de su propio <a> y no arrastra al resto de la tarjeta. */
.kdx-card__shot {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.kdx-card__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

.kdx-card--project:hover .kdx-card__shot img { transform: scale(1.045); }

/* ---------------------------------------------------------------------------
   Imagen ausente: marco de respaldo
   ---------------------------------------------------------------------------
   Las imagenes del portafolio viven en system/img/portafolio/, que no siempre
   esta desplegada (en local no lo esta). Un <img> roto pinta el icono del
   navegador y un texto alternativo sobre el marco azul.

   El JS marca `data-missing` cuando la imagen falla; el elemento se oculta y el
   marco queda con el degradado de la marca y un icono tenue. La tarjeta no
   cambia de alto, asi que la rejilla no se descuadra y la ficha sigue siendo
   legible y clicable.
   */
.kdx-card__media[data-missing]::after {
  content: '\F3F1'; /* bi-image */
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'bootstrap-icons';
  font-size: 1.9rem;
  color: rgba(255, 255, 255, .28);
  pointer-events: none;
}

.kdx-card__media[data-missing] .kdx-card__shot img {
  opacity: 0;
  visibility: hidden;
}

/* Velo con la accion: aparece al pasar por encima y anuncia a donde lleva. */
.kdx-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 15, 36, .55);
  opacity: 0;
  transition: opacity .25s ease;
}

.kdx-card--project:hover .kdx-card__overlay { opacity: 1; }

.kdx-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  background: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 600;
  color: var(--kdx-ink);
}

/* Badge de categoria sobre la imagen */
.kdx-card__badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--kdx-ink);
}

.kdx-card__badge i { color: var(--kdx-blue); font-size: .82rem; }

.kdx-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 18px;
}

.kdx-card__body .kdx-card__title { margin-bottom: 8px; }

/* La descripcion del proyecto llega desde el editor con parrafos completos
   (hasta 19 <p> en un caso): en una tarjeta de 289px eso daba 2.863px de alto y
   rompia la rejilla entera. Se recorta a 3 lineas con line-clamp, que respeta
   el texto y solo oculta el sobrante; el detalle completo esta en la pagina del
   proyecto. */
.kdx-card__body .kdx-card__desc {
  font-size: .89rem;
  line-height: 1.62;
  color: var(--kdx-body);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* El contenido llega como <p> sueltos del editor: en la tarjeta no deben
   arrastrar sus margenes ni separarse como bloques. */
.kdx-card__body .kdx-card__desc p {
  margin: 0;
  display: inline;
}

.kdx-card__body .kdx-card__desc p + p::before { content: ' '; }

.kdx-card__body .kdx-card__desc br { display: none; }

/* El titulo tambien se recorta: hay titulos de cuatro lineas que descuadraban
   la fila respecto a sus vecinos. */
.kdx-card__body .kdx-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* El cierre del proyecto es un enlace propio: mantiene el filete y la flecha. */
.kdx-card__body .kdx-card__go {
  margin-top: 16px;
  text-decoration: none;
}

.kdx-card__body .kdx-card__go i { transition: transform .22s ease; }
.kdx-card__body .kdx-card__go:hover i { transform: translateX(4px); }

/* Rejilla del portafolio: el generador devuelve items sueltos, asi que el grid
   lo pone el contenedor que los envuelve. */
.kdx-projects {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------------------------------------------------------------------------
   Tarjeta de articulo del blog (.kdx-card--post)
   ---------------------------------------------------------------------------
   La genera Elements::getBlogCard(). Medio a sangre, cuerpo debajo con fecha,
   titulo, autor y enlace de lectura. La rejilla la aporta #contentCards, que
   lleva .kdx-projects, asi que la tarjeta no incluye columnas de Bootstrap.
   --------------------------------------------------------------------------- */
.kdx-card--post {
  padding: 0;
  overflow: hidden;
}

.kdx-card--post .kdx-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(140deg, #0a1637, #12306b);
}

.kdx-card--post .kdx-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

.kdx-card--post:hover .kdx-card__media img { transform: scale(1.045); }

.kdx-card--post .kdx-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px;
}

.kdx-card--post .kdx-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: .74rem;
  color: var(--kdx-muted);
}

.kdx-card--post .kdx-card__title {
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.4;
  min-height: 0;
}

.kdx-card--post .kdx-card__title a {
  color: var(--kdx-ink);
  text-decoration: none;
}

.kdx-card--post:hover .kdx-card__title a { color: var(--kdx-blue); }

.kdx-card--post .kdx-card__author {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--kdx-line);
  font-size: .8rem;
  color: var(--kdx-body);
}

.kdx-card--post .kdx-card__author i { color: var(--kdx-muted); }

.kdx-card--post .kdx-card__go {
  margin-top: 12px;
  border-top: 0;
  padding-top: 0;
}

/* Cargador del listado: mismo centrado que el estado vacio del portafolio. */
.kdx-blog-loader {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

/* Contenedor ancho para listados (portafolio, blog).
   El .container de Bootstrap se queda en 1140px y deja 140px libres a cada lado
   en un monitor de 1280: con tres columnas, las tarjetas se ven estrechas y el
   conjunto parece centrado en una franja. Aqui se amplia a 1400px como maximo
   manteniendo el mismo padding lateral que el estandar, para que los bordes
   sigan alineados con el header y las demas secciones. */
.kdx-container--wide {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 24px;
}

@media (min-width: 1600px) {
  .kdx-container--wide { max-width: 1520px; }
}

/* La rejilla se abre por pasos. Antes solo cambiaba en 640 y 992, asi que entre
   768 y 991 las tarjetas se estiraban a media pantalla; ahora hay un paso
   intermedio de dos columnas y el de tres entra a 1200. */
@media (min-width: 560px)  { .kdx-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 992px)  { .kdx-projects { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
/* A partir de 1500px hay sitio para una cuarta columna. */
@media (min-width: 1500px) { .kdx-projects { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }

/* En movil cada tarjeta ocupa la fila completa, pero se limita el alto de la
   imagen para que no domine la pantalla. */
@media (max-width: 559px) {
  .kdx-projects { gap: 16px; }
  .kdx-card--project .kdx-card__media { aspect-ratio: 16 / 9; }
}

.kdx-article {
  font-size: 1.04rem;
  line-height: 1.78;
  color: var(--kdx-body);
}

.kdx-article > * + * { margin-top: 1.35em; }

.kdx-article h2,
.kdx-article h3 {
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--kdx-ink);
  letter-spacing: -.015em;
  margin-top: 2em;
}

.kdx-article h2 { font-size: 1.5rem; font-weight: 700; }
.kdx-article h3 { font-size: 1.18rem; font-weight: 700; }

.kdx-article a { color: var(--kdx-blue); text-underline-offset: 2px; }

.kdx-article ul,
.kdx-article ol { padding-left: 1.35em; }

.kdx-article li + li { margin-top: .45em; }

.kdx-article img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--kdx-line);
}

.kdx-article blockquote {
  margin: 1.8em 0;
  padding-left: 22px;
  border-left: 2px solid var(--kdx-blue);
  font-size: 1.06rem;
  color: var(--kdx-ink);
}

/* La primera linea de lectura comoda se limita a ~72ch, no a todo el ancho. */
.kdx-article { max-width: 72ch; }

/* ---------------------------------------------------------------------------
   Tarjetas con acento de fondo (.kdx-card--orbit)
   ---------------------------------------------------------------------------
   Historial de intentos, para no repetirlos:
     1. Orbe absoluto de 178px: desbordaba la tarjeta y pisaba la vecina.
     2. Columna de rejilla de 92px: le robaba medio ancho al texto duplicaba
        el alto de la tarjeta.
     3. Anillos concéntricos en la esquina: el `overflow: hidden` los cortaba
        a media curva y parecian un error de render.

   Lo que si pertenece a esta pagina: el mismo recurso que ya usan las
   tarjetas de la home y los filtros del portafolio -> un filete de acento
   arriba y un tinte muy suave que nace en la esquina. Sin formas cerradas
   que el borde pueda cortar, sin sombras nuevas y sin ocupar espacio: la
   tarjeta mide igual que antes (204px).
   --------------------------------------------------------------------------- */
.kdx-card--orbit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* El contenido va siempre por encima del tinte. */
.kdx-card--orbit > .kdx-card__head,
.kdx-card--orbit > .kdx-card__title,
.kdx-card--orbit > .kdx-card__desc,
.kdx-card--orbit > .kdx-card__spacer,
.kdx-card--orbit > .kdx-card__go {
  position: relative;
  z-index: 2;
}

/* El orbe deja de pintarse como figura. */


/* Tinte de esquina. Se repite el contexto de la seccion porque
   `.kdx-section--navy .kdx-card` declara el shorthand `background` y anula
   cualquier `background-image` de una sola clase (comprobado: el navegador
   devolvia `none`). */
.kdx-card--orbit,
.kdx-section--navy .kdx-card--orbit {
  background-image:
    radial-gradient(120% 140% at 100% 0%,
      rgba(56, 189, 248, .16) 0%,
      rgba(37, 99, 235, .10) 38%,
      transparent 72%);
  background-repeat: no-repeat;
}

.kdx-section--white .kdx-card--orbit,
.kdx-section--paper .kdx-card--orbit {
  background-image:
    radial-gradient(120% 140% at 100% 0%,
      rgba(37, 99, 235, .10) 0%,
      rgba(56, 189, 248, .07) 38%,
      transparent 72%);
  background-repeat: no-repeat;
}

/* Filete de acento en el borde superior: el mismo recurso que el primer paso
   de la home (.kdx-steps li:first-child::before) y las tarjetas destacadas.
   Es una linea recta, asi que el radio del borde no la puede cortar. */
.kdx-card--orbit::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 24px;
  width: 40px;
  height: 2px;
  border-radius: 2px;
  background: var(--kdx-blue);
  opacity: .5;
  z-index: 1;
  transition: width .3s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
}

/* Al pasar el cursor el filete crece hasta media tarjeta y sube de opacidad:
   marca la tarjeta activa sin mover el contenido. */
a.kdx-card--orbit:hover::before {
  width: calc(50% - 24px);
  opacity: 1;
}

/* Sobre navy el filete va en cian para mantener contraste. */
.kdx-section--navy .kdx-card--orbit::before {
  background: var(--kdx-cyan);
}

@media (prefers-reduced-motion: reduce) {
  .kdx-card--orbit::before { transition: none; }
}

/* ---------------------------------------------------------------------------
   Pie de pagina v3 (.kf) — assets/html/footer.html
   ---------------------------------------------------------------------------
   Sustituye al .footer-k (marca con filete subrayado y textos en mayusculas).
   Navy del sistema, cinco columnas en escritorio, dos en tablet y una en movil.
   --------------------------------------------------------------------------- */
.kf {
  position: relative;
  padding: 80px 0 28px;
  background: linear-gradient(180deg, var(--kdx-navy) 0%, #0a1430 100%);
  color: #a9bbdb;
  font-size: .94rem;
}

.kf::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .35), transparent);
}

.kf__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 640px) { .kf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .kf__grid { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 48px; } }

.kf__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  text-decoration: none;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  color: #fff;
}

.kf__logo img { width: 52px; height: auto; }
.kf__logo:hover { color: #fff; }
.kf__tagline { margin: 0 0 8px; color: #dbe5f6; line-height: 1.6; max-width: 34ch; }
.kf__desc { margin: 0 0 22px; color: #8fa6c8; }

.kf__social { display: flex; gap: 10px; }

.kf__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid var(--kdx-line-dark);
  color: #dbe5f6;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.kf__social a:hover { background: var(--kdx-blue); border-color: var(--kdx-blue); color: #fff; }

.main-wrapper .kf .kf__title,
.kf .kf__title {
  margin: 0 0 18px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}

.kf ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }

.kf a { color: #a9bbdb; text-decoration: none; transition: color .2s ease; }
.kf a:hover, .kf a:focus-visible { color: #fff; }
.kf__col a i { font-size: .8rem; }

.kf__contact li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.kf__contact i { margin-top: 2px; color: var(--kdx-cyan); }

.kf__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--kdx-line-dark);
  font-size: .84rem;
  color: #8fa6c8;
}

.kf__bottom p { margin: 0; }
.kf__legal { display: flex; gap: 20px; }

@media (max-width: 575px) {
  .kf { padding-top: 60px; }
}

/* Reglas heredadas de main/custom pintan de azul y subrayan los enlaces del pie */
.main-wrapper .kf a { color: #a9bbdb !important; text-decoration: none !important; }
.main-wrapper .kf a:hover,
.main-wrapper .kf a:focus-visible { color: #fff !important; }
.main-wrapper .kf .kf__logo { color: #fff !important; }

/* Tira de clientes: kdx-components.js la muestra con el primer logo cargado.
   --on manda sobre --empty / .kdx-no-logos del script inline antiguo. */
.kdx-clients.kdx-clients--on { display: block !important; }
.kdx-clients--on .swiper.test-swiper.kdx-no-logos { height: auto; overflow: visible; }