/* ==========================================================================
   Web comercial de Konexia (feature landing-y-login): armazon .kx-pub-*
   Design-system.md seccion 6. Solo tokens de variables.css: ningun color ni
   medida a pelo. Movil primero: las columnas se apilan por debajo de 720px.
   ========================================================================== */

html.kx-pub-html {
  scroll-behavior: smooth;
}

body.kx-pub {
  margin: 0;
  font-family: var(--fuente-base);
  color: var(--color-texto);
  background: var(--color-fondo);
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Formas degradadas de fondo (los "blobs" de los mockups), detras de todo */
.kx-pub-fondo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.kx-pub-forma {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.55;
}

.kx-pub-forma.is-1 {
  width: 60vw;
  height: 60vw;
  max-width: 900px;
  max-height: 900px;
  right: -10vw;
  top: -20vw;
  background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--color-primario) 30%, transparent), transparent 70%);
}

.kx-pub-forma.is-2 {
  width: 50vw;
  height: 50vw;
  max-width: 700px;
  max-height: 700px;
  right: 20vw;
  top: 10vw;
  background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--color-secundario) 22%, transparent), transparent 70%);
}

.kx-pub-forma.is-3 {
  width: 40vw;
  height: 40vw;
  max-width: 600px;
  max-height: 600px;
  left: -15vw;
  bottom: -10vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-acento) 18%, transparent), transparent 70%);
}

.kx-pub-contenido {
  position: relative;
  z-index: 1;
  width: min(1240px, 100% - 2 * var(--espacio-gutter));
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.kx-pub-cabecera {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
}

.kx-pub-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.kx-pub-logo img {
  height: 44px;
  width: auto;
  display: block;
}

.kx-pub-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: 24px;
  flex: 1;
}

.kx-pub-nav a {
  color: var(--color-texto);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--duracion-hover) var(--curva-entrada), border-color var(--duracion-hover) var(--curva-entrada);
}

.kx-pub-nav a:hover,
.kx-pub-nav a.is-activo {
  color: var(--color-primario);
  border-bottom-color: var(--color-primario);
}

.kx-pub-acciones {
  display: flex;
  align-items: center;
  gap: 20px;
}

.kx-pub-acciones .kx-pub-login,
.kx-pub-nav-acciones .kx-pub-login {
  color: var(--color-primario);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
}

/* Acciones dentro del menu: solo en movil */
.kx-pub-nav-acciones {
  display: none;
}

.kx-pub-nav-toggle {
  display: none;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-base);
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-texto);
}

/* Boton degradado: CTA principal de la web y del login */
.kx-btn-degradado {
  background: var(--degradado-marca);
  color: var(--color-superficie);
  border: none;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primario) 30%, transparent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.kx-btn-degradado:hover {
  filter: brightness(1.05);
  color: var(--color-superficie);
}

.kx-btn-degradado svg {
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Hero y bloques de contenido
   -------------------------------------------------------------------------- */

.kx-pub-hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
  padding: 56px 0 40px;
}

.kx-pub-hero.is-compacto {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

.kx-pub-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primario);
  margin: 0 0 18px;
}

.kx-pub-titulo {
  font-size: clamp(36px, 4.6vw, 58px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

.kx-pub-acento {
  background: var(--degradado-marca);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kx-pub-lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--color-texto-tenue);
  margin: 0 0 28px;
  max-width: 560px;
}

.kx-pub-beneficios {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kx-pub-beneficio {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: center;
}

.kx-pub-beneficio-icono {
  width: 56px;
  height: 56px;
  border-radius: var(--radio-base);
  background: color-mix(in srgb, var(--color-primario) 12%, var(--color-superficie));
  color: var(--color-primario);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kx-pub-beneficio strong {
  display: block;
  font-size: 17px;
}

.kx-pub-beneficio span {
  color: var(--color-texto-tenue);
  font-size: 15px;
}

.kx-pub-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
}

.kx-pub-cta .kx-btn {
  padding: 14px 24px;
  font-size: 16px;
}

.kx-pub-garantias {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  color: var(--color-texto-tenue);
  font-size: 14px;
}

.kx-pub-garantias li::before {
  content: "\2713";
  color: var(--color-primario);
  font-weight: 700;
  margin-right: 8px;
}

.kx-pub-ilustracion {
  position: relative;
}

.kx-pub-ilustracion img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--radio-base) * 2);
}

/* Nota manuscrita con flecha, junto a las ilustraciones */
.kx-pub-nota {
  font-family: var(--fuente-manuscrita);
  font-size: 24px;
  line-height: 1.1;
  color: var(--color-primario);
  display: inline-flex;
  align-items: flex-end;
  gap: 8px;
  transform: rotate(-6deg);
}

.kx-pub-nota svg {
  flex-shrink: 0;
}

.kx-pub-nota.is-flotante {
  position: absolute;
  right: 4%;
  bottom: -8px;
}

/* Franja inferior con titulo en mayusculas espaciadas */
.kx-pub-franja {
  margin: 48px 0 56px;
}

.kx-pub-franja-titulo {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-texto-tenue);
  margin-bottom: 28px;
}

.kx-pub-franja-titulo::before,
.kx-pub-franja-titulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-borde);
}

/* Franja "Una IA que responde por ti" (portada): tres tarjetas */
.kx-pub-ia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.kx-pub-ia-tarjeta,
.kx-pub-ia-tarjeta + .kx-pub-ia-tarjeta {
  margin: 0;
  padding: 24px;
  border: 1px solid var(--color-borde);
  border-radius: calc(var(--radio-base) * 1.5);
}

.kx-pub-ia-tarjeta.is-destacada {
  border-color: color-mix(in srgb, var(--color-primario) 40%, var(--color-borde));
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--color-secundario) 14%, transparent), transparent 55%),
    var(--color-superficie);
}

.kx-pub-ia-tarjeta .kx-pub-beneficio-icono {
  margin-bottom: 16px;
}

.kx-pub-ia-tarjeta h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.kx-pub-ia-tarjeta p {
  margin: 0;
  color: var(--color-texto-tenue);
  font-size: 15px;
  line-height: 1.55;
}

.kx-pub-ia-cta {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.kx-pub-ia-cta .kx-btn {
  padding: 14px 24px;
  font-size: 16px;
}

@media (max-width: 900px) {
  .kx-pub-ia {
    grid-template-columns: 1fr;
  }
}

/* Pie */
/* Paginas legales (privacidad, condiciones): texto largo a una columna, legible, con los tokens del tema */
.kx-pub-legal {
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 24px 96px;
  color: var(--color-texto);
  font-size: 16px;
  line-height: 1.65;
}

.kx-pub-legal h1 {
  font-size: 34px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 8px 0 6px;
}

.kx-pub-legal-fecha {
  color: var(--color-texto-tenue);
  font-size: 14px;
  margin: 0 0 32px;
}

.kx-pub-legal h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 36px 0 10px;
}

.kx-pub-legal p,
.kx-pub-legal li {
  margin: 0 0 12px;
}

.kx-pub-legal ul {
  padding-left: 22px;
}

.kx-pub-legal a {
  color: var(--color-primario);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kx-pub-legal code {
  font-size: 14px;
  background: var(--color-fondo);
  border-radius: 6px;
  padding: 1px 6px;
}

.kx-pub-pie {
  border-top: 1px solid var(--color-borde);
  padding: 24px 0 32px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--color-texto-tenue);
  font-size: 13px;
}

.kx-pub-pie a {
  color: var(--color-texto-tenue);
}

/* --------------------------------------------------------------------------
   Movil
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .kx-pub-hero,
  .kx-pub-hero.is-compacto {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 32px;
  }

  .kx-pub-nota.is-flotante {
    position: static;
    margin-top: 12px;
    transform: none;
  }
}

@media (max-width: 720px) {
  .kx-pub-nav-toggle {
    display: inline-flex;
  }

  .kx-pub-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0;
    padding: 12px var(--espacio-gutter) 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
    box-shadow: var(--sombra-tarjeta);
    z-index: 5;
  }

  .kx-pub-nav.is-abierta {
    display: flex;
  }

  .kx-pub-nav > a {
    padding: 12px 0;
    width: 100%;
    font-size: 16px;
  }

  .kx-pub-cabecera {
    position: relative;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 12px;
  }

  .kx-pub-nav-toggle {
    margin-left: auto;
    order: 3;
  }

  /* Las acciones de la cabecera pasan al menu desplegable */
  .kx-pub-acciones {
    display: none;
  }

  .kx-pub-nav-acciones {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--color-borde);
  }

  .kx-pub-nav-acciones .kx-pub-login {
    padding: 12px 0;
    font-size: 16px;
  }

  .kx-pub-nav-acciones .kx-btn {
    justify-content: center;
    width: 100%;
  }

  .kx-pub-cta .kx-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Modal de demo */
/* Captcha Turnstile: vacio no ocupa sitio; activo reserva el alto del widget */
.kx-turnstile {
  display: none;
}

.kx-turnstile.is-activo {
  display: block;
  min-height: 65px;
  margin: 0 0 14px;
}

.kx-demo-trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.kx-campo .kx-campo-error {
  color: var(--color-alerta);
}

/* Modal de demo: variante .is-demo del modal compartido, con la
   personalidad de la web (banda degradada, formas suaves, campos con icono) */
.kx-modal.is-demo {
  max-width: 600px;
  border-radius: calc(var(--radio-base) * 2);
  overflow: hidden;
  position: relative;
}

.kx-modal.is-demo::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: var(--degradado-marca);
}

.kx-modal.is-demo .kx-modal-header {
  position: relative;
  padding: 30px 28px 0;
  background:
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--color-secundario) 18%, transparent), transparent 55%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--color-acento) 14%, transparent), transparent 50%);
}

.kx-modal.is-demo .kx-modal-header h2 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: var(--degradado-marca);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kx-modal.is-demo .kx-modal-cerrar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-superficie);
  box-shadow: var(--sombra-tarjeta);
}

.kx-modal.is-demo .kx-modal-cuerpo {
  padding: 8px 28px 26px;
  background:
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--color-secundario) 18%, transparent), transparent 40%);
}

.kx-demo-intro {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-texto-tenue);
}

.kx-demo-intro strong {
  color: var(--color-texto);
}

.kx-demo .kx-campo-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.kx-demo .kx-campo {
  margin-bottom: 14px;
}

.kx-demo input,
.kx-demo textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--color-fondo);
  border-color: transparent;
}

.kx-demo input:focus,
.kx-demo textarea:focus {
  background: var(--color-superficie);
}

.kx-demo .kx-campo-icono-caja > svg {
  color: var(--color-primario);
}

.kx-demo-garantias {
  list-style: none;
  padding: 14px 16px;
  margin: 4px 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 13px;
  color: var(--color-texto-tenue);
  border-radius: var(--radio-base);
  background: color-mix(in srgb, var(--color-primario) 7%, var(--color-superficie));
}

.kx-demo-garantias li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.kx-demo-garantias svg {
  color: var(--color-exito);
  flex-shrink: 0;
}

.kx-demo .kx-form-pie {
  justify-content: stretch;
  margin-top: 4px;
}

.kx-demo-enviar {
  width: 100%;
  justify-content: center;
  padding: 14px 18px;
  font-size: 16px;
}

.kx-demo-pie {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--color-texto-tenue);
}

.kx-demo .kx-campo-error[hidden] {
  display: none;
}

@media (max-width: 720px) {
  .kx-demo .kx-campo-grid {
    grid-template-columns: 1fr;
  }

  .kx-modal.is-demo .kx-modal-header,
  .kx-modal.is-demo .kx-modal-cuerpo {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* --------------------------------------------------------------------------
   Funciones
   -------------------------------------------------------------------------- */

.kx-pub-lista-funciones {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kx-pub-funcion {
  display: grid;
  grid-template-columns: 56px 1fr 18px;
  gap: 16px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radio-base);
  color: var(--color-texto-tenue);
  transition: background-color var(--duracion-hover) var(--curva-entrada);
}

.kx-pub-funcion strong {
  display: block;
  font-size: 17px;
  color: var(--color-texto);
}

.kx-pub-funcion span {
  font-size: 15px;
}

.kx-pub-funcion.is-destacada,
.kx-pub-funcion:hover {
  background: color-mix(in srgb, var(--color-primario) 8%, var(--color-superficie));
}

.kx-pub-funcion.is-destacada .kx-pub-funcion-flecha {
  color: var(--color-primario);
}

.kx-pub-nota.is-arriba {
  position: absolute;
  right: 0;
  top: -84px;
  z-index: 1;
}

.kx-pub-resultados {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
}

.kx-pub-resultado {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
}

.kx-pub-resultado strong {
  display: block;
  font-size: 16px;
}

.kx-pub-resultado span {
  color: var(--color-texto-tenue);
  font-size: 14px;
}

.kx-pub-beneficio-icono.is-redondo {
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Precios
   -------------------------------------------------------------------------- */

.kx-pub-precios {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 9fr) minmax(0, 3fr);
  gap: 28px;
  align-items: start;
  padding: 48px 0 24px;
}

.kx-pub-planes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.kx-plan {
  position: relative;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: calc(var(--radio-base) * 2);
  padding: 24px 20px;
  box-shadow: var(--sombra-tarjeta);
  display: flex;
  flex-direction: column;
}

.kx-plan.is-destacado {
  border-color: var(--color-primario);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--color-primario) 18%, transparent);
  padding-top: 52px;
  margin-top: -16px;
}

.kx-plan-cinta {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 8px 12px;
  border-radius: calc(var(--radio-base) * 2) calc(var(--radio-base) * 2) 0 0;
  background: var(--degradado-marca);
  color: var(--color-superficie);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.kx-plan-cinta svg {
  width: 16px;
  height: 16px;
}

.kx-plan-nombre {
  font-size: 24px;
  font-weight: 800;
  margin: 0;
}

.kx-plan-subtitulo {
  color: var(--color-primario);
  font-weight: 500;
  margin: 2px 0 10px;
}

.kx-plan-descripcion {
  color: var(--color-texto-tenue);
  font-size: 14px;
  margin: 0 0 18px;
  min-height: 42px;
}

.kx-plan-precio {
  margin: 0;
  white-space: nowrap;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.kx-plan-precio small {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-texto-tenue);
}

.kx-plan-nota {
  color: var(--color-texto-tenue);
  font-size: 12px;
  margin: 4px 0 18px;
}

.kx-plan-boton {
  width: 100%;
  justify-content: center;
  margin-bottom: 18px;
}

.kx-plan-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}

.kx-plan-lista li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
}

.kx-plan-lista li::before {
  content: "\2713";
  color: var(--color-primario);
  font-weight: 700;
}

.kx-plan-lista li.is-excluido {
  color: var(--color-texto-tenue);
}

.kx-plan-lista li.is-excluido::before {
  content: "\2715";
  color: var(--color-texto-tenue);
}

.kx-pub-precios-lateral {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kx-pub-lateral-tarjeta h3 {
  font-size: 18px;
  margin: 12px 0 8px;
}

.kx-pub-lateral-tarjeta p {
  color: var(--color-texto-tenue);
  font-size: 14px;
  margin: 0;
}

.kx-pub-redes {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kx-red-icono {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-superficie);
  background: var(--degradado-marca);
}

.kx-red-icono.is-whatsapp { background: var(--color-exito); }
.kx-red-icono.is-facebook { background: var(--color-primario); }
.kx-red-icono.is-instagram { background: linear-gradient(135deg, var(--color-secundario), var(--color-alerta)); }
.kx-red-icono.is-linkedin { background: var(--color-linkedin); }
.kx-red-icono.is-tiktok { background: var(--color-tiktok); }
.kx-red-icono.is-pronto {
  background: var(--color-borde);
  color: var(--color-texto-tenue);
}

.kx-pub-consultar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  font-weight: 600;
  margin: 8px 0 24px;
}

@media (max-width: 1100px) {
  .kx-pub-precios {
    grid-template-columns: 1fr;
  }

  .kx-plan.is-destacado {
    margin-top: 0;
  }
}

@media (max-width: 720px) {
  .kx-pub-planes {
    grid-template-columns: 1fr;
  }

  .kx-pub-nota.is-arriba {
    position: static;
    margin-bottom: 12px;
  }

  .kx-pub-resultados {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --------------------------------------------------------------------------
   Recursos
   -------------------------------------------------------------------------- */

.kx-pub-buscador {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-base);
  background: var(--color-superficie);
  color: var(--color-texto-tenue);
  max-width: 620px;
}

.kx-pub-buscador input {
  border: none;
  outline: none;
  flex: 1;
  font: inherit;
  font-size: 15px;
  color: var(--color-texto);
  background: transparent;
  min-width: 0;
}

.kx-pub-tarjeta-flotante {
  position: absolute;
  right: -8px;
  bottom: -24px;
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: rotate(4deg);
}

.kx-pub-tarjeta-flotante strong {
  font-size: 18px;
  line-height: 1.2;
}

.kx-pub-tarjeta-flotante span {
  color: var(--color-texto-tenue);
  font-size: 13px;
}

.kx-pub-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 24px;
}

/* .kx-chip vive en konexia.css (pieza compartida con la app) */

.kx-pub-recursos {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-bottom: 32px;
}

.kx-pub-recursos-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 600px) {
  .kx-pub-recursos-lista {
    grid-template-columns: 1fr;
  }
}

.kx-pub-recursos-lista .kx-tabla-vacia {
  grid-column: 1 / -1;
}

.kx-pub-recurso {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: calc(var(--radio-base) * 1.5);
  padding: 12px 16px 16px;
  box-shadow: var(--sombra-tarjeta);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kx-pub-recurso-imagen {
  position: relative;
  margin: -12px -16px 6px;
  border-radius: calc(var(--radio-base) * 1.5) calc(var(--radio-base) * 1.5) 0 0;
  overflow: hidden;
}

.kx-pub-recurso-imagen img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  object-position: center bottom;
  display: block;
}

.kx-pub-recurso-tipo {
  position: absolute;
  left: 12px;
  top: 12px;
  gap: 6px;
}

.kx-pub-recurso-tipo svg {
  width: 14px;
  height: 14px;
}

.kx-pub-recurso h3 {
  font-size: 16px;
  margin: 0;
  line-height: 1.3;
}

.kx-pub-recurso p {
  color: var(--color-texto-tenue);
  font-size: 14px;
  margin: 0;
  flex: 1;
}

.kx-pub-recurso-pie {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  color: var(--color-texto-tenue);
  font-size: 13px;
}

.kx-pub-destacados h3 {
  margin: 0 0 12px;
  font-size: 18px;
}

.kx-pub-destacados ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kx-pub-destacados li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
}

.kx-pub-destacados li .kx-pub-beneficio-icono {
  width: 44px;
  height: 44px;
}

.kx-pub-destacados li strong {
  display: block;
  font-size: 15px;
}

.kx-pub-destacados li span {
  display: block;
  color: var(--color-texto-tenue);
  font-size: 13px;
}

.kx-pub-destacados li .kx-badge {
  display: inline-flex;
  margin-top: 6px;
}

.kx-pub-suscripcion {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 24px;
  align-items: center;
  margin-bottom: 40px;
  position: relative;
}

.kx-pub-beneficio-icono.is-grande {
  width: 72px;
  height: 72px;
}

.kx-pub-suscripcion h2 {
  font-size: 20px;
  margin: 0 0 4px;
}

.kx-pub-suscripcion p {
  color: var(--color-texto-tenue);
  margin: 0;
  font-size: 14px;
}

.kx-pub-suscripcion-form {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.kx-pub-suscripcion-form .kx-campo {
  flex: 1;
  margin: 0;
}

.kx-pub-suscripcion-form input {
  width: 100%;
  box-sizing: border-box;
}

.kx-pub-suscripcion .kx-pub-nota {
  position: absolute;
  right: 16px;
  top: -44px;
}

/* Oculto a la vista pero accesible; la clase repetida le da especificidad para que ninguna regla de campos lo estire (ver konexia.css) */
.kx-visualmente-oculto.kx-visualmente-oculto.kx-visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  min-width: 0;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .kx-pub-recursos,
  .kx-pub-suscripcion {
    grid-template-columns: 1fr;
  }

  .kx-pub-tarjeta-flotante {
    position: static;
    transform: none;
    width: auto;
    margin-top: 12px;
  }

  .kx-pub-suscripcion .kx-pub-nota {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Login a dos columnas (RF-05): .kx-login-*, .kx-campo-icono
   -------------------------------------------------------------------------- */

.kx-login-body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-fondo);
}

.kx-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

/* Panel de marca (izquierda) */
.kx-login-marca {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 56px 48px;
  background: color-mix(in srgb, var(--kx-marca-color, var(--color-primario)) 6%, var(--color-fondo));
}

.kx-login-marca .kx-pub-kicker {
  color: var(--kx-marca-color, var(--color-primario));
}

/* Con marca de agencia, las formas de fondo toman su color */
.kx-login-marca .kx-pub-forma.is-1 {
  background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--kx-marca-color, var(--color-primario)) 30%, transparent), transparent 70%);
}

.kx-login-marca .kx-pub-forma.is-2 {
  background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--kx-marca-color, var(--color-secundario)) 22%, transparent), transparent 70%);
}

.kx-login-marca-contenido {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.kx-login-marca .kx-pub-titulo {
  font-size: clamp(30px, 3vw, 42px);
}

.kx-login-marca .kx-pub-lead {
  font-size: 16px;
}

.kx-login-marca .kx-pub-beneficios {
  margin-bottom: 0;
}

.kx-login-marca .kx-pub-beneficio-icono {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--kx-marca-color, var(--color-primario)) 12%, var(--color-superficie));
  color: var(--kx-marca-color, var(--color-primario));
}

.kx-login-marca .kx-pub-beneficio strong {
  font-size: 15px;
}

.kx-login-marca .kx-pub-beneficio span {
  font-size: 13px;
}

/* Tarjetas decorativas (publicacion y metricas) */
.kx-login-marca-tarjetas {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 8px 0 92px;
}

.kx-login-post {
  width: min(100%, 340px);
  padding: 16px;
  transform: rotate(-2deg);
}

.kx-login-post-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.kx-login-post-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: contain;
  background: var(--color-fondo);
  padding: 4px;
}

.kx-login-post-cabecera strong {
  display: block;
  font-size: 14px;
}

.kx-login-post-cabecera span {
  font-size: 12px;
  color: var(--color-texto-tenue);
}

.kx-login-post-imagen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radio-base);
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.kx-login-post p {
  margin: 12px 0 10px;
  font-size: 14px;
  font-weight: 500;
}

.kx-login-post-contadores {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--color-texto-tenue);
}

.kx-login-post-contadores span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.kx-login-metricas {
  width: min(100%, 320px);
  padding: 16px 18px;
  align-self: flex-end;
  transform: rotate(2deg);
}

.kx-login-metricas > strong {
  display: block;
  font-size: 14px;
  margin-bottom: 8px;
}

.kx-login-tendencia {
  display: block;
  width: 100%;
  height: 64px;
}

.kx-login-metricas dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0 0;
}

.kx-login-metricas dl div {
  min-width: 0;
}

.kx-login-metricas dt {
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--color-texto-tenue);
  white-space: nowrap;
}

.kx-login-metricas dd {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--kx-marca-color, var(--color-primario));
}

.kx-login-nota {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: rotate(-4deg);
  color: var(--kx-marca-color, var(--color-primario));
}

/* Columna del formulario (derecha) */
.kx-login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  background: var(--color-superficie);
}

.kx-login-caja {
  width: 100%;
  max-width: 400px;
}

.kx-login-logo {
  display: inline-block;
  margin-bottom: 6px;
}

.kx-login-logo img {
  height: 52px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
}

/* Logo de la agencia (marca blanca): mas grande que la marca Konexia, que es apaisada (Jorge, 22/09/2026). */
.kx-login-logo img.is-marca {
  height: 150px;
  max-width: 100%;
}

.kx-login-lema {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kx-marca-color, var(--color-primario));
  margin: 0 0 28px;
}

.kx-login-titulo {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.kx-login-subtitulo {
  margin: 0 0 24px;
  color: var(--color-texto-tenue);
  font-size: 15px;
}

.kx-login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kx-login-error {
  color: var(--color-alerta);
  background: color-mix(in srgb, var(--color-alerta) 8%, var(--color-superficie));
  border: 1px solid color-mix(in srgb, var(--color-alerta) 30%, transparent);
  border-radius: var(--radio-base);
  padding: 10px 12px;
  font-size: 13px;
}

/* .kx-campo-icono vive en konexia.css (pieza compartida con la app) */

.kx-login-recordarme {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--color-texto);
  cursor: pointer;
}

.kx-login-recordarme input {
  width: 18px;
  height: 18px;
  accent-color: var(--kx-marca-color, var(--color-primario));
  margin: 0;
}

.kx-login-submit {
  width: 100%;
  justify-content: center;
  padding: 13px 18px;
  font-size: 15px;
}

.kx-login-separador {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0 16px;
  color: var(--color-texto-tenue);
  font-size: 13px;
}

.kx-login-separador::before,
.kx-login-separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-borde);
}

.kx-login-demo {
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: var(--color-texto-tenue);
}

.kx-login-enlace {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--kx-marca-color, var(--color-primario));
  cursor: pointer;
}

.kx-login-enlace:hover {
  text-decoration: underline;
}

@media (max-width: 1100px) {
  .kx-login-marca-contenido {
    grid-template-columns: 1fr;
  }

  .kx-login-marca-tarjetas {
    display: none;
  }
}

@media (max-width: 860px) {
  .kx-login {
    grid-template-columns: 1fr;
  }

  /* Panel de marca reducido: kicker y titular, sin beneficios ni tarjetas */
  .kx-login-marca {
    padding: 32px 24px 28px;
  }

  .kx-login-marca .kx-pub-lead,
  .kx-login-marca .kx-pub-beneficios {
    display: none;
  }

  .kx-login-marca .kx-pub-titulo {
    font-size: 26px;
    margin-bottom: 0;
  }

  .kx-login-panel {
    padding: 32px 24px 48px;
  }
}