/* Comparativa: tabla limpia con la columna de LeadConecta como una burbuja azul alta; en el móvil, tarjetas */
#comparativa .cmp__envoltorio {
  margin-top: clamp(2rem, 4vw, 3rem);
}
#comparativa .cmp__tabla {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
#comparativa .cmp__vacia {
  width: 19%;
}
#comparativa .cmp__col {
  padding: 1rem 1rem 1.1rem;
  font-family: var(--aiw-fuente-titulos);
  font-size: 0.98rem;
  font-weight: 700;
  text-align: left;
  vertical-align: bottom;
  color: rgb(var(--aiw-suave));
}
#comparativa .cmp__col--nuestra {
  width: 24%;
  padding-top: 1.3rem;
  border-radius: 22px 22px 0 0;
  background: rgb(var(--aiw-acento));
  color: rgb(var(--aiw-sobreacento));
  font-size: 1.15rem;
  font-weight: 800;
}
#comparativa .cmp__punto {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.5rem;
  border-radius: 50% 50% 50% 0;
  background: rgb(var(--aiw-acento2));
  vertical-align: 0.1em;
}
#comparativa .cmp__criterio {
  padding: 1.05rem 1rem 1.05rem 0;
  border-top: 1px solid rgb(var(--aiw-borde));
  font-family: var(--aiw-fuente-titulos);
  font-size: 1rem;
  font-weight: 800;
  text-align: left;
  vertical-align: top;
}
#comparativa .cmp__criterio > span:last-child {
  display: inline;
}
#comparativa .cmp__icono {
  display: inline-grid;
  margin-right: 0.5rem;
  color: rgb(var(--aiw-acentotexto));
  vertical-align: -0.2em;
}
#comparativa .cmp__icono svg {
  width: 1.1rem;
  height: 1.1rem;
}
#comparativa .cmp__celda {
  padding: 1.05rem 1rem;
  border-top: 1px solid rgb(var(--aiw-borde));
  font-size: 0.93rem;
  line-height: 1.45;
  vertical-align: top;
  color: rgb(var(--aiw-suave));
}
#comparativa .cmp__valor--vacia {
  opacity: 0.5;
}
#comparativa .cmp__celda--nuestra {
  border-top-color: rgb(var(--aiw-sobreacento) / 0.18);
  background: rgb(var(--aiw-acento));
  color: rgb(var(--aiw-sobreacento));
  font-weight: 700;
}
#comparativa .cmp__fila:last-child .cmp__celda--nuestra {
  border-radius: 0 0 22px 6px;
}
#comparativa .cmp__check {
  display: inline-grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: rgb(var(--aiw-sobreacento));
  color: rgb(var(--aiw-acento));
  vertical-align: -0.25em;
}
#comparativa .cmp__check svg {
  width: 0.85rem;
  height: 0.85rem;
}
#comparativa .cmp__celda--nuestra > * {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s, transform 0.4s;
  transition-delay: calc(var(--i) * 0.12s + 0.15s);
}
#comparativa .cmp__envoltorio[data-visto] .cmp__celda--nuestra > * {
  opacity: 1;
  transform: none;
}
#comparativa .cmp__acciones {
  margin-top: 2rem;
}

/* tarjetas: solo en el móvil */
#comparativa .cmp__tarjetas {
  display: none;
}
@media (max-width: 759px) {
  #comparativa .cmp__envoltorio {
    display: none;
  }
  #comparativa .cmp__tarjetas {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
  }
  #comparativa .cmp__tarjeta {
    padding: 1.2rem 1.2rem 1.3rem;
    border: 1px solid rgb(var(--aiw-borde));
    border-radius: var(--lc-r) var(--lc-r) var(--lc-r) var(--lc-cola);
    background: rgb(var(--aiw-superficie));
    box-shadow: var(--lc-sombra);
  }
  #comparativa .cmp__tarjeta-titulo {
    display: flex;
    align-items: center;
    font-family: var(--aiw-fuente-titulos);
    font-size: 1.1rem;
    font-weight: 800;
  }
  #comparativa .cmp__burbuja {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0.85rem 0 0.9rem;
    padding: 0.7rem 0.9rem;
    border-radius: 16px 16px 16px 4px;
    background: rgb(var(--aiw-acento));
    color: rgb(var(--aiw-sobreacento));
  }
  #comparativa .cmp__burbuja-quien {
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0.85;
  }
  #comparativa .cmp__otros {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #comparativa .cmp__otro {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 0.75rem;
    font-size: 0.88rem;
    line-height: 1.4;
  }
  #comparativa .cmp__otro-nombre {
    font-weight: 600;
  }
  #comparativa .cmp__otro-valor {
    color: rgb(var(--aiw-suave));
  }
}